Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
ab-interchange
Advanced tools
Readme
Responsive image loading is not really an easy task even today, here is a solution to manage conditional (based on breakpoints) loading of img, background-image or even HTML content. That also provide for lazy-loading (optional).
Inspired by https://github.com/zurb/foundation-sites.
Demo: Codepen
NPM: https://www.npmjs.com/package/ab-interchange
npm install ab-interchange
The plugin is CommonJS and AMD compliant, in vanilla JS, with no dependencies.
Because of the usage of matchMedia
, compatibility start with IE 10. To rise compatibility up to IE 9, you can add https://github.com/paulirish/matchMedia.js/ polyfill.
You will need jQuery (https://jquery.com/), but I have plan to remove that dependency in the future.
The other dependency is AB-mediaQuery (https://github.com/lordfpx/AB-mediaQuery).
Install AB-mediaQuery following your needs (or only abMediaQuery()
for default configuration).
Then you only need to initialize with abInterchange()
or with options:
abInterchange({
lazy: false, // or true
delay: 100 // debounce time on scroll event (only when lazy loading is true)
});
data-ab-interchange attribute should contain a list of arrays with your needed breakpoints as defined in AB-mediaQuery AND a default image that will be loaded when matching is false. Defaults values are :
It's clever to prepare a spinner animation as first img src or default styling before init. You can use 'replaced.ab-interchange' event to remove that right after.
<img src="spinner.gif" data-ab-interchange="[img/cat-1x.jpg, default], [img/cat-1x.jpg, small], [img/cat-2x.jpg, medium], [img/cat-3x.jpg, large]">
<div data-ab-interchange="[img/cat-1x.jpg, default], [img/cat-1x.jpg, small], [img/cat-2x.jpg, medium], [img/cat-3x.jpg, large]"></div>
If the data-ab-interchange is neither an image format nor on an img tag, that will send and http request and put the response inside the element.
<div data-ab-interchange="[small-content.html, default], [small-content.html, small], [medium-content.html, medium], [large-content.html, large]"></div>
FAQs
AB-interchange: While responsive image loading is not really an easy task even today, here is a solution to manage conditional (based on breakpoints) loading of img, background-image or even HTML content.
The npm package ab-interchange receives a total of 27 weekly downloads. As such, ab-interchange popularity was classified as not popular.
We found that ab-interchange demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.