Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
shorter-js
Advanced tools
A small ES6+ library with various JavaScript tools, all ESLint valid and with TypeScript definitions, everything useful for creating light libraries or web components. If there is anything that is consistently repeating itself, shorter-js can help you save up to 50% of the code required, with little to no performance cost.
shorter-js is featured in KUTE.js, BSN, Navbar.js and other libraries.
dist
folder, that is mainly for build consistency testing. You can make use of "tree shaking" to import one or anything your code needs.src
root folder, the structure is key to understanding the purpose of each type of shortie, whether we have boolean
for various basic browser detection or browser feature support, attr
for all things Element attributes or strings
for most common and most used Element.prototype methods.npm install shorter-js
// import the tool you need
import { supportTransform } from 'shorter-js';
// use the tool in your ES6/ES7 sources
if (supportTransform) {
// have modern browsers do something about that
}
// EXAMPLES
import { getAttribute, hasAttribute, setAttribute } from 'shorter-js';
// check target has certain attribute
if (!hasAttribute(myTarget, 'attribute-name')) {
setAttribute(myTarget, 'attribute-name', 'new-value');
}
// get attribute value
const currentAttrValue = getAttribute(myTarget, 'attribute-name');
document.body
;document.documentElement
;document.head
;boolean
value for the client browser is either Apple Safari browser or not;boolean
value for the client browser is either Firefox or not;boolean
value for the client browser is either a Mobile device or not;boolean
value for the client browser capability for webKit perspective
;boolean
value for the client browser capability for touch
events;boolean
value for the client browser capability for passive
event option;boolean
value for the client browser capability for webKit transform
;boolean
value for the client browser capability for webKit keyframe animation
;boolean
value for the client browser capability for webKit transition
;// EXAMPLES
import { support3DTransform } from 'shorter-js';
// filter myAction to supported browsers
if (support3DTransform) {
// do something with modern browsers
}
// EXAMPLES
import { addClass, removeClass, hasClass } from 'shorter-js'
// add a class
addClass(targetElement, 'className');
// remove a class
removeClass(targetElement, 'className');
// check for a class
if (hasClass(targetElement, 'className')) {
// do something about that
}
// EXAMPLES
import { on, off, one, passiveHandler } from 'shorter-js';
// attach a passive mousedown eventHandler
on(targetElement, 'click', eventHandler, passiveHandler);
// detach a passive mouseup eventHandler
off(targetElement, 'mouseup', eventHandler, passiveHandler);
// attach a single instance passive touchstart eventHandler
one(targetElement, 'touchstart', eventHandler, passiveHandler);
For a more advanced method to handle event listeners, I recommend using the event-listener.js.
#Document
for a given Element or just any Document, useful when working with iframes;<body>
for a given Element or just any;<html>
for a given Element or just any;<head>
for a given Element or just any;animationDelay
property of an animation
property;animationDuration
property of a animation
property;transitionDelay
property of a transition
property;transitionDuration
property of a transition
property;{ x, y }
scroll position;offsetParent
;Window
for a given Element or just any Window;// EXAMPLES
import {
getElementAnimationDuration,
getElementAnimationDurationLegacy,
} from 'shorter-js'
// store the transition duration for target element on a modern browser
const duration = getElementAnimationDuration(target);
// or do the same with legacy browser fallback
const duration = getElementAnimationDurationLegacy(target);
Array
;CustomElement
instance;Document
instance;Element
instance;Element
is partially visible in the viewport;Element
is fully visible in the viewport;Array
with Element
instances;Function
instance;HTMLCollection
instance;HTMLElement
instance;HTMLImageElement
instance;SVGElement
, HTMLImageElement
or HTMLVideoElement
instance;Node
instance;NodeList
instance;<html dir="rtl">
;ShadowRoot
instance;SVGElement
instance;<table>
, <td>
or <th>
Element;Window
instance;// EXAMPLES
import { isArray, isHTMLElement, isElementsArray } from 'shorter-js';
// check if a value is an `Array` of `Element` instances
if (isArray(myValue) && myValue.every(isHTMLElement)) {
// do something with these instances
}
// or use the dedicated shortie of the above
if (isElementsArray(myValue)) {
// do something with these instances
}
Array.from()
method;Map
;Element.dispatchEvent()
method;Array
;animationend
event is triggered, or execute the callback right after for legacy browsers;transitionend
event is triggered, or execute the callback right after for legacy browsers;Float32Array.from()
method;Float64Array.from()
method;Element.focus()
method;() => {}
NOOP;data-NAMESPACE-option="value"
; priority: JavaScript options > DATA API options > default optionsObject.assign()
method;Object.keys()
method;Object.values()
method;CustomEvent
with the added relatedTarget
and other properties;options
with passive: true
event option used;offsetHeight
value, also because using just element.offsetHeight;
won't validate on ESLint;setTimeout
have a meaning;String.toLowerCase()
method;String.toUpperCase()
method;try()
and catch()
wrapper for functions, with option to preffix the error logs, pointing out the context of the errors;The Data and Timer utilities have their own specifics, you might want to check the wiki.
// EXAMPLES
import {
emulateTransitionEnd,
distinct,
} from 'shorter-js';
// execute a callback when transitionend is triggered for the target
emulateTransitionEnd(targetElement, callback);
// define some arrays of numbers
const array1 = [0, 1, 3, 5, 7, 9];
const array2 = [0, 2, 4, 6, 8, 10];
// merge them and filter them to make sure we have distinct values
const array3 = [...array1, ...array2].filter(distinct);
// [0, 1, 3, 5, 7, 9, 2, 4, 6, 8, 10]
Element.closest()
method;document.all
collection;Array
with all registered CustomElement
;document.getElementById()
method;Element.getElementsByClassName()
method;Element.getElementsByTagName()
method;Element.matches()
method;// EXAMPLES
import { querySelector, querySelectorAll, documentAll, matches } from 'shorter-js';
// get first element that matches a certain selector
const element = querySelector('.my-class-name');
// get all elements that matches same selector
const elements = querySelectorAll('.my-class-name');
// now do the same as the above, but differently
const elements = [...documentAll].filter((x) => matches(x, '.my-class-name'));
transition-timing-function
based on Cubic Bezier; EG: cubic-bezier(0.215,0.61,0.355,1)
for bezierEasings.easingCubicOut
;mousedown
, end: mouseup
, move: mousemove
, cancel: mouseout
;mousedown
, up: mouseup
;mouseenter
and mouseleave
OR mouseover
and mouseout
;touchstart
, end: touchend
, move: touchmove
, cancel: touchcancel
;animationDuration
property for modern browsers;animationDelay
property for modern browsers;animationEndEvent
event for modern browsers;animationName
property name for modern browsers;transitionDuration
property name for modern browsers;transitionDelay
property name for modern browsers;transitionend
event name for modern browsers;transitionProperty
property name for modern browsers;addEventListener
method name;removeEventListener
method name;There are lots more string constants available which include native event names, browser strings, keyboard key codes or ARIA specific attribute names. Be sure to check the src/strings
folder for a complete list.
// EXAMPLES
import {on, off, one, mouseClickEvents, touchEvents, passiveHandler} from 'shorter-js';
// attach a passive mousedown eventHandler
on(targetElement, mouseClickEvents.down, eventHandler, passiveHandler);
// detach a passive mousedown eventHandler
off(targetElement, mouseClickEvents.down, eventHandler, passiveHandler);
// attach a single instance passive touchstart eventHandler
one(targetElement, touchEvents.start, eventHandler, passiveHandler);
Here's a simple example to showcase the benefit of using shorter-js.
// This is your typical day to day scripting
const target = document.getElementById('my-element');
target.addEventListener('click', function(e) {
target.classList.add('my-className');
})
Now make it all shorter. You might want to import shorties directly from their location, something we like to call "tree shaking".
// Example
import on from 'shorter-js/src/event/on';
import addClass from 'shorter-js/src/class/addClass';
import getElementById from 'shorter-js/src/selectors/getElementById';
import mouseclickEvent from 'shorter-js/src/strings/mouseclickEvent';
const target = getElementById('my-element');
on(target, mouseclickEvent, function(e) {
addClass(target, 'my-className')
})
shorter-js is released under the MIT License
FAQs
JavaScript shorties for the modern web.
The npm package shorter-js receives a total of 1,334 weekly downloads. As such, shorter-js popularity was classified as popular.
We found that shorter-js 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
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.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.