Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
ab-interchange
Advanced tools
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.
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.
Heavily 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).
The you only need to initialize with abInterchange()
.
data-ab-interchange attribute should contain a list of arrays with your needed breakpoints as defined in AB-mediaQuery. Defaults values are :
<img src="" data-ab-interchange="[img/cat-1x.jpg, small], [img/cat-2x.jpg, medium], [img/cat-3x.jpg, large]">
<div data-ab-interchange="[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, 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 63 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.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.