Adapter
call
Given a key and a set of arguments, call them when given a context. Primarily useful in composition.
Use a closure to call a stored key with stored arguments.
const call = (key, ...args) => context => context[key](...args);
+ }
30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.
Adapter
call
Given a key and a set of arguments, call them when given a context. Primarily useful in composition.
Use a closure to call a stored key with stored arguments.
const call = (key, ...args) => context => context[key](...args);
Promise.resolve([1, 2, 3])
.then(call('map', x => 2 * x))
.then(console.log); //[ 2, 4, 6 ]
@@ -341,11 +341,6 @@ elementIsVisibleInViewport(el, true); // true // (partially visible)
getScrollPosition(); // {x: 0, y: 200}
getStyle
Returns the value of a CSS rule for the specified element.
Use Window.getComputedStyle() to get the value of the CSS rule for the specified element.
const getStyle = (el, ruleName) => getComputedStyle(el)[ruleName];
getStyle(document.querySelector('p'), 'font-size'); // '16px'
-
getURLParameters
Returns an object containing the parameters of the current URL.
Use match() with an appropriate regular expression to get all key-value pairs, Array.reduce() to map and combine them into a single object. Pass location.search as the argument to apply to the current url.
const getURLParameters = url =>
- url
- .match(/([^?=&]+)(=([^&]*))/g)
- .reduce((a, v) => ((a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a), {});
-
getURLParameters('http://url.com/page?name=Adam&surname=Smith'); // {name: 'Adam', surname: 'Smith'}
hasClass
Returns true if the element has the specified class, false otherwise.
Use element.classList.contains() to check if the element has the specified class.
const hasClass = (el, className) => el.classList.contains(className);
hasClass(document.querySelector('p.special'), 'special'); // true
hide
Hides all the elements specified.
Use the spread operator (...) and Array.forEach() to apply display: none to each element specified.
const hide = (...el) => [...el].forEach(e => (e.style.display = 'none'));
@@ -835,6 +830,11 @@ extendHex('05a'); // '#0055aa'
getType
Returns the native type of a value.
Returns lowercased constructor name of value, "undefined" or "null" if value is undefined or null
const getType = v =>
v === undefined ? 'undefined' : v === null ? 'null' : v.constructor.name.toLowerCase();
getType(new Set([1, 2, 3])); // "set"
+
getURLParameters
Returns an object containing the parameters of the current URL.
Use match() with an appropriate regular expression to get all key-value pairs, Array.reduce() to map and combine them into a single object. Pass location.search as the argument to apply to the current url.
const getURLParameters = url =>
+ url
+ .match(/([^?=&]+)(=([^&]*))/g)
+ .reduce((a, v) => ((a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a), {});
+
getURLParameters('http://url.com/page?name=Adam&surname=Smith'); // {name: 'Adam', surname: 'Smith'}
hexToRGB
Converts a color code to a rgb() or rgba() string if alpha value is provided.
Use bitwise right-shift operator and mask bits with & (and) operator to convert a hexadecimal color code (with or without prefixed with #) to a string with the RGB values. If it's 3-digit color code, first convert to 6-digit version. If an alpha value is provided alongside 6-digit hex, give rgba() string in return.
const hexToRGB = hex => {
let alpha = false,
h = hex.slice(hex.startsWith('#') ? 1 : 0);