Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
@degjs/breakpoints
Advanced tools
Breakpoints is a Javascript module that triggers a change event when CSS-defined breakpoints are crossed during a browser viewport resize. Changes to the content
style property of a pseudo-element across CSS media queries are used to inform the breakpoints module as to when a breakpoint change event should be fired.
Responsive websites often necessitate conditional Javascript that only runs at certain viewport sizes. This can lead to problems when you need to sync up viewport breakpoints across Javascript and CSS. An example:
A component has a tabbed interface on larger viewports and an accordion interface on smaller viewports. At a certain breakpoint, let's say 48em
and smaller, Javascript should instantiate an accordion interface by applying an accordion Javascript plugin to the component. Above 48em
, Javascript should instantiate a tabbed interface by applying a tabs Javascript plugin to the component.
To accomplish the above example, your Javascript would need to listen to the window.resize
event and compare the viewport's width to the defined breakpoint of 48em
. This breakpoint would also exist in your CSS, as certain styles for the component and surrounding layout would likely be dependent on this 48em
size as well. This presents two problems:
48em
breakpoint must be defined and maintained in two separate areas, your CSS and JavascriptThe Breakpoints module allows you to define and maintain your breakpoints for an element in one place: your CSS. It does this by relying on a pseudo-element tied to the element. This pseudo-element can have different content
property values defined across media queries:
.component:before {
content: 'small';
display: none;
}
@media (min-width: 48em) {
.component:before {
content: 'medium';
}
}
Note: the above CSS is just an example, but it's a good idea to use values for content
that are easily understandable.
Every time the window.resize
event fires, the Breakpoints module reads in the value of the content
property of the pseudo-element. It keeps track of this value and fires a breakpointChange
event when the value changes. In the above example, the content
value changes from 'small'
to 'medium'
when the viewport resizes above 48em
.
The benefit of the Breakpoints module is that all of your component's breakpoints are defined in your CSS only, ensuring that your Javascript and CSS are always in sync.
Breakpoints is an ES6 module. Consequently, you'll need an ES6 transpiler (Babel is a nice one).
Install breakpoints with NPM using the command:
$ npm install @degjs/breakpoints
Breakpoints relies on the EventAggregator module to publish the breakpointChange
event. Your Javascript code will also need to import the EventAggregator module in order to subscribe to this event. You can find out more about EventAggregator here.
Sample Javascript:
import breakpoints from "@degjs/breakpoints";
import eventAggregator from "@degjs/event-aggregator";
/* Function to handle breakpoint changes */
function onBreakpointChange(size) {
console.log(size);
}
/* Instantiate the Breakpoints module on an element */
let instance = breakpoints({
elementSelector: ".component"
});
/* Subscribe to the breakpointChange event */
eventAggregator.subscribe("breakpointChange", function(e) {
onBreakpointChange(e.size);
});
/* If the current size is needed before a breakpointsChange event is fired, it can be retrieved from the Breakpoints instance */
let currentSize = instance.getCurrentSize();
onBreakpointChange(currentSize);
Sample CSS:
.component:before {
content: 'small';
/* Hide the pseudo-element so that the text 'small' does not appear on screen */
display: none;
}
@media (min-width: 48em) {
.component:before {
content: 'medium';
}
}
@media (min-width: 64em) {
.component:before {
content: 'large';
}
}
Type: String
The CSS selector of the observed element. Either this property or the element
property is required.
Type: Element
The observed DOM element. Either this property or the elementSelector
property is required.
Type: String
Default: :before
The pseudo-element that Breakpoints will use to determine the current size and when a breakpoint has been crossed. Possible values are :before
and :after
.
Type: String
Default: data-breakpoints-inited
The name of the attribute that gets added to the observed element when breakpoints has been instantiated on it. This is primarily to ensure that breakpoints does not get instantiated multiple times on the same element.
Parameters: none
Returns the current size, which is the current value of the pseudo-element's content
style property.
Breakpoints depends on the following browser APIs:
To support legacy browsers, you'll need to include polyfills for the above APIs.
Breakpoints will not work with IE8 due to its lack of support for window.computedStyle
, which Breakpoints uses to retrieve the content
value of the pseudo-element. There are window.computedStyle
polyfills available, but they are unable to retrieve pseudo-element content
values. Breakpoints will log a warning message to the console and otherwise fail silently in IE8. Sorry.
FAQs
Trigger CSS-based breakpoint events with JavaScript.
The npm package @degjs/breakpoints receives a total of 3 weekly downloads. As such, @degjs/breakpoints popularity was classified as not popular.
We found that @degjs/breakpoints demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 8 open source maintainers 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
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.