Research
Security News
Malicious npm Package Typosquats react-login-page to Deploy Keylogger
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.
ab-mediaquery
Advanced tools
Readme
That's the JavaScript side of Media Queries on mobile first projects. It proposes you some very useful methods for your scripts.
Demo: Codepen
NPM: https://www.npmjs.com/package/ab-mediaquery
npm install ab-mediaquery
The plugin is CommonJS and AMD compliant, 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.
There are different ways to setup breakpoints and media queries rules. Default media queries are in em unit, here is why: http://zellwk.com/blog/media-query-units/
Simply call abMediaQuery
function with no parameters:
abMediaQuery();
You can go further by changing default settings, see below (More options) for available options.
* small: screen and (min-width: 0em)
* smallOnly: screen and (max-width: 47.99em)
* medium: screen and (min-width: 48em)
* mediumOnly: screen and (min-width: 48em) and (max-width: 64em)
* large: screen and (min-width: 64.01em)
* largeOnly: screen and (min-width: 64.01em) and (max-width: 80em)
* huge: screen and (min-width: 80.01em)
* hugeOnly: screen and (min-width: 80.01em) and (max-width: 90em)
First, define default media queries rules:
// unit must be in 'em'
$ab-breakpoints: (
small: 48em,
medium: 64em,
large: 80em,
huge: 90em
);
OPTIONAL: Then you can add your own custom rules (even with other units like px or rem)
$ab-mq-myRules: (
retina: 'screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)',
non-retina: 'not screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)',
my-media-query: 'screen and (min-width: 70em)',
...
);
Then import _AB-mediaQuery.scss
:
@import 'path/to/AB-mediaQuery'
Simple call abMediaQuery
function with no parameters:
abMediaQuery();
You can change default breakpoints values with bp
object and the debounce time on window resize with delay
option.
abMediaQuery({
bp: {
small: 48em,
medium: 64em,
large: 80em,
huge: 90em
},
delay: 200
});
That will return an array of current breakpoints
AB.mediaQuery.current;
Check if window respects the breakpoint specified and return true/false. You can check default media queries generated by the plugin:
But also your custom rules define in your Sass through $ab-mq-myRules
variable will be checked:
AB.mediaQuery.is('media-query-name-you-want-to-check);
'changed.ab-mediaquery' event is automatically triggered when breakpoints change:
window.addEventListener('changed.ab-mediaquery', function(){
...
});
AB.mediaQuery.get('small');
FAQs
Unknown package
The npm package ab-mediaquery receives a total of 15 weekly downloads. As such, ab-mediaquery popularity was classified as not popular.
We found that ab-mediaquery 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.
Research
Security News
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.
Security News
The JavaScript community has launched the e18e initiative to improve ecosystem performance by cleaning up dependency trees, speeding up critical parts of the ecosystem, and documenting lighter alternatives to established tools.
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.