# data[].attributes.attachment_link.description
A JavaScript utility library delivering consistency, modularity, performance, & extras.

# data[].attributes.attachment_link.title
SlickNav - Responsive Mobile Menu Plugin for jQuery

# data[].attributes.attachment_link.description
Without any additional configuration, both the original and mobile menus will be displayed. It is recommended to use media queries to hide the original menu and display the mobile menu when appropriate. Modernizr or similar can be used for graceful degradation. For example:

# data[].attributes.attachment_link.title
TypeIt | The Most Versatile JavaScript Typewriter Utility on the Planet.

# data[].attributes.attachment_link.description
TypeIt is the most versatile JavaScript utility on the planet for creating dynamic, realistic typewriter text effects on the web. Include a single, dependency-free JavaScript file, and you're ready to go. Its straightforward API allows you to type single or multiple strings that break lines, delete & replace each other, and a whole lot more.

# data[].attributes.attachment_link.title
Atropos - Stunning touch-friendly 3D parallax hover effects

# data[].attributes.attachment_link.description
Atropos is a lightweight, free and open-source JavaScript library to create stunning touch-friendly 3D parallax hover effects.

# data[].attributes.attachment_link.readable_text
A practical functional library for JavaScript programmers.

Why Ramda?

There are already several excellent libraries with a functional flavor. Typically, they are meant to be general-purpose toolkits, suitable for working in multiple paradigms. Ramda has a more focused goal. We wanted a library designed specifically for a functional programming style, one that makes it easy to create functional pipelines, one that never mutates user data.

What's Different?

The primary distinguishing features of Ramda are:

Ramda emphasizes a purer functional style. Immutability and side-effect free functions are at the heart of its design philosophy. This can help you get the job done with simple, elegant code.

Ramda functions are automatically curried. This allows you to easily build up new functions from old ones simply by not supplying the final parameters.

The parameters to Ramda functions are arranged to make it convenient for currying. The data to be operated on is generally supplied last.

The last two points together make it very easy to build functions as sequences of simpler functions, each of which transforms the data and passes it along to the next. Ramda is designed to support this style of coding.

Introductions

Philosophy

Using Ramda should feel much like just using JavaScript. It is practical, functional JavaScript. We're not introducing lambda expressions in strings, we're not borrowing consed lists, we're not porting over all of the Clojure functions.

Our basic data structures are plain JavaScript objects, and our usual collections are JavaScript arrays. We also keep other native features of JavaScript, such as functions as objects with properties.

Functional programming is in good part about immutable objects and side-effect free functions. While Ramda does not enforce this, it enables such style to be as frictionless as possible.

We aim for an implementation both clean and elegant, but the API is king. We sacrifice a great deal of implementation elegance for even a slightly cleaner API.

Last but not least, Ramda strives for performance. A reliable and quick implementation wins over any notions of functional purity.

Installation

To use with node:

$ npm install ramda

Then in the console:

const R = require('ramda');

To use directly in the browser:

or the minified version:

or from a CDN, either cdnjs:

or one of the below links from jsDelivr:

(note that using latest is taking a significant risk that ramda API changes could break your code.)

These script tags add the variable R on the browser's global scope.

Or you can inject ramda into virtually any unsuspecting website using the bookmarklet.

Note for versions > 0.25 Ramda versions > 0.25 don't have a default export. So instead of import R from 'ramda';, one has to use import * as R from 'ramda'; Or better yet, import only the required functions via import { functionName } from 'ramda';

Build

npm run build creates es, src directories and updates both dist/ramda.js and dist/ramda.min.js

Partial Builds

It is possible to build Ramda with a subset of the functionality to reduce its file size. Ramda's build system supports this with command line flags. For example if you're using R.compose, R.reduce, and R.filter you can create a partial build with:

npm run --silent partial-build compose reduce filter > dist/ramda.custom.js

This requires having Node/io.js installed and ramda's dependencies installed (just use npm install before running partial build).

Documentation

Please review the API documentation.

Also available is our Cookbook of functions built from Ramda that you may find useful.

The Name

Ok, so we like sheep. That's all. It's a short name, not already taken. It could as easily have been eweda, but then we would be forced to say eweda lamb!, and no one wants that. For non-English speakers, lambs are baby sheep, ewes are female sheep, and rams are male sheep. So perhaps ramda is a grown-up lambda... but probably not.

Running The Test Suite
Console:
To run the test suite from the console, you need to have mocha installed:

npm install -g mocha

Then from the root of the project, you can just call

Alternately, if you've installed the dependencies, via:

npm install

then you can run the tests (and get detailed output) by running:
Browser:
You can use testem to test across different browsers (or even headlessly), with livereloading of tests. Install testem ( npm install -g testem) and run testem. Open the link provided in your browser and you will see the results in your terminal.

If you have PhantomJS installed, you can run testem -l phantomjs to run the tests completely headlessly.

Usage

For v0.25 and up, import the whole library or pick ES modules directly from the library:

import * as R from 'ramda' const {identity} = R R.map(identity, [1, 2, 3])

Destructuring imports from ramda does not necessarily prevent importing the entire library. You can manually cherry-pick methods like the following, which would only grab the parts necessary for identity to work:

import identity from 'ramda/src/identity' identity()

Manually cherry picking methods is cumbersome, however. Most bundlers like Webpack and Rollup offer tree-shaking as a way to drop unused Ramda code and reduce bundle size, but their performance varies, discussed here. Here is a summary of the optimal setup based on what technology you are using:

1. Webpack + Babel - use babel-plugin-ramda to automatically cherry pick methods. Discussion here, example here

2. Webpack only - use UglifyJS plugin for treeshaking along with the ModuleConcatenationPlugin. Discussion here, with an example setup here

3. Rollup - does a fine job properly treeshaking, no special work needed; example here

Typings

Translations

Acknowledgements

Thanks to J. C. Phillipps for the Ramda logo. Ramda logo artwork © 2014 J. C. Phillipps. Licensed Creative Commons CC BY-NC-SA 3.0.

# data[].attributes.attachment_link.readable_text
Underscore is a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects. It's the answer to the question: "If I sit down in front of a blank HTML page, and want to start being productive immediately, what do I need?" ... and the tie to go along with jQuery's tux and Backbone's suspenders.

Underscore provides over 100 functions that support both your favorite workaday functional helpers: map, filter, invoke - as well as more specialized goodies: function binding, javascript templating, creating quick indexes, deep equality testing, and so on.

You may choose between monolithic and modular imports. There is a quick summary of the options below, as well as a more comprehensive discussion in the article.

Enjoying Underscore, and want to turn it up to 11? Try Underscore-contrib.

You can support the project by donating on Patreon. Enterprise coverage is available as part of the Tidelift Subscription.

https://cdn.jsdelivr.net/npm/[email protected]/underscore-umd-min.js

https://cdn.jsdelivr.net/npm/[email protected]/underscore-esm-min.js

https://unpkg.com/[email protected]/underscore-umd-min.js

https://unpkg.com/[email protected]/underscore-esm-min.js

https://pagecdn.io/lib/underscore/1.13.1/underscore-umd-min.js

https://pagecdn.io/lib/underscore/1.13.1/underscore-esm-min.js

https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.1/underscore-umd-min.js

https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.1/underscore-esm-min.js

In most cases, you can replace the version number above by latest so that your embed will automatically use the latest version, orstable if you want to delay updating until an update has proven to be free of accidental breaking changes. Example:
https://cdn.jsdelivr.net/npm/[email protected]/underscore-umd-min.js

If you are hardcoding the path to the file within the package and you are unsure which build to use, it is very likely that you need underscore-umd.js or the minified variantunderscore-umd-min.js.

ESM import map from 'underscore/modules/map.js'

AMD require(['underscore/amd/map.js'], ...)

CommonJS var map = require('underscore/cjs/map.js');

For functions with multiple aliases, the file name of the module is always the first name that appears in the documentation. For example,_.reduce/_.inject/_.foldl is exported fromunderscore/modules/reduce.js. Modular usage is mostly recommended for creating a customized build of Underscore.

Underscore 1.x is backwards compatible with any engine that fully supports ES3, while also utilizing newer features when available, such as Object.keys, typed arrays and ES modules. We routinely run our unittests against the JavaScript engines listed below:

Chrome 26-latest

Edge 13, 18 and latest

Firefox 11-latest

Internet Explorer 9-11

Node.js 8-latest LTS

Safari 8-latest

In addition:

We have recent confirmation that the library is compatible with Adobe ExtendScript.

There is support code present for IE 8, which we will retain in future Underscore 1.x updates.

Patches to enhance support for other ES3-compatible environments are always welcome.

Underscore 2.x will likely remove support for some outdated environments.

Collection Functions (Arrays or Objects)

Alias: _.each(list, iteratee, [context])forEach
Iterates over a list of elements, yielding each in turn to an iteratee function. The iteratee is bound to the context object, if one is passed. Each invocation of iteratee is called with three arguments:(element, index, list). If list is a JavaScript object, iteratee's arguments will be(value, key, list). Returns the list for chaining.

_.each([1, 2, 3], alert);
=> alerts each number in turn...
_.each({one: 1, two: 2, three: 3}, alert);
=> alerts each number value in turn...

Note: Collection functions work on arrays, objects, and array-like objects such as arguments, NodeList and similar. But it works by duck-typing, so avoid passing objects with a numeric length property. It's also good to note that aneach loop cannot be broken out of - to break, use _.find instead.

Alias: _.map(list, iteratee, [context])collect
Produces a new array of values by mapping each value in list through a transformation function (iteratee). The iteratee is passed three arguments: the value, then the index (or key) of the iteration, and finally a reference to the entire list.

_.map([1, 2, 3], function(num){ return num * 3; });
=> [3, 6, 9]
_.map({one: 1, two: 2, three: 3}, function(num, key){ return num * 3; });
=> [3, 6, 9]
_.map([[1, 2], [3, 4]], _.first);
=> [1, 3]

_.reduce(list, iteratee, [memo], [context])
Also known as inject and foldl, reduce boils down a list of values into a single value. Memo is the initial state of the reduction, and each successive step of it should be returned by iteratee. The iteratee is passed four arguments: the memo, then the value and index (or key) of the iteration, and finally a reference to the entire list.

If no memo is passed to the initial invocation of reduce, the iteratee is not invoked on the first element of the list. The first element is instead passed as the memo in the invocation of the iteratee on the next element in the list.

var sum = _.reduce([1, 2, 3], function(memo, num){ return memo + num; }, 0);
=> 6

Alias: _.reduceRight(list, iteratee, [memo], [context])foldr
The right-associative version of reduce. Foldr is not as useful in JavaScript as it would be in a language with lazy evaluation.

var list = [[0, 1], [2, 3], [4, 5]];
var flat = _.reduceRight(list, function(a, b) { return a.concat(b); }, []);
=> [4, 5, 2, 3, 0, 1]

Alias: _.find(list, predicate, [context])detect
Looks through each value in the list, returning the first one that passes a truth test ( predicate), or undefined if no value passes the test. The function returns as soon as it finds an acceptable element, and doesn't traverse the entire list. predicate is transformed through iteratee to facilitate shorthand syntaxes.

var even = _.find([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });
=> 2

Alias: _.filter(list, predicate, [context])select
Looks through each value in the list, returning an array of all the values that pass a truth test ( predicate). predicate is transformed through iteratee to facilitate shorthand syntaxes.

var evens = _.filter([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });
=> [2, 4, 6]

_.findWhere(list, properties)
Looks through the list and returns the first value that matches all of the key-value pairs listed in properties.

If no match is found, or if list is empty, undefined will be returned.

_.findWhere(publicServicePulitzers, {newsroom: "The New York Times"});
=> {year: 1918, newsroom: "The New York Times",
  reason: "For its public service in publishing in full so many official reports,
  documents and speeches by European statesmen relating to the progress and
  conduct of the war."}

_.where(list, properties)
Looks through each value in the list, returning an array of all the values that matches the key-value pairs listed in properties.

_.where(listOfPlays, {author: "Shakespeare", year: 1611});
=> [{title: "Cymbeline", author: "Shakespeare", year: 1611},
    {title: "The Tempest", author: "Shakespeare", year: 1611}]

_.reject(list, predicate, [context])
Returns the values in list without the elements that the truth test ( predicate) passes. The opposite of filter. predicate is transformed through iteratee to facilitate shorthand syntaxes.

var odds = _.reject([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });
=> [1, 3, 5]

Alias: _.every(list, [predicate], [context])all
Returns true if all of the values in the list pass the predicate truth test. Short-circuits and stops traversing the list if a false element is found. predicate is transformed through iteratee to facilitate shorthand syntaxes.

_.every([2, 4, 5], function(num) { return num % 2 == 0; });
=> false

Alias: _.some(list, [predicate], [context])any
Returns true if any of the values in the list pass the predicate truth test. Short-circuits and stops traversing the list if a true element is found. predicate is transformed through iteratee to facilitate shorthand syntaxes.

_.some([null, 0, 'yes', false]);
=> true

Aliases: _.contains(list, value, [fromIndex])include, includes
Returns true if the value is present in the list. Uses indexOf internally, if list is an Array. Use fromIndex to start your search at a given index.

_.contains([1, 2, 3], 3);
=> true

_.invoke([[5, 1, 7], [3, 2, 1]], 'sort');
=> [[1, 5, 7], [1, 2, 3]]

var stooges = [{name: 'moe', age: 40}, {name: 'larry', age: 50}, {name: 'curly', age: 60}];
_.pluck(stooges, 'name');
=> ["moe", "larry", "curly"]

_.max(list, [iteratee], [context])
Returns the maximum value in list. If an iteratee function is provided, it will be used on each value to generate the criterion by which the value is ranked.-Infinity is returned if list is empty, so an isEmpty guard may be required. This function can currently only compare numbers reliably. This function uses operator< ( note).

var stooges = [{name: 'moe', age: 40}, {name: 'larry', age: 50}, {name: 'curly', age: 60}];
_.max(stooges, function(stooge){ return stooge.age; });
=> {name: 'curly', age: 60};

_.min(list, [iteratee], [context])
Returns the minimum value in list. If an iteratee function is provided, it will be used on each value to generate the criterion by which the value is ranked. Infinity is returned if list is empty, so an isEmpty guard may be required. This function can currently only compare numbers reliably. This function uses operator< ( note).

var numbers = [10, 5, 100, 2, 1000];
_.min(numbers);
=> 2

_.sortBy(list, iteratee, [context])
Returns a (stably) sorted copy of list, ranked in ascending order by the results of running each value throughiteratee. iteratee may also be the string name of the property to sort by (eg. length). This function uses operator < ( note).

_.sortBy([1, 2, 3, 4, 5, 6], function(num){ return Math.sin(num); });
=> [5, 4, 6, 3, 1, 2]

var stooges = [{name: 'moe', age: 40}, {name: 'larry', age: 50}, {name: 'curly', age: 60}];
_.sortBy(stooges, 'name');
=> [{name: 'curly', age: 60}, {name: 'larry', age: 50}, {name: 'moe', age: 40}];

_.groupBy([1.3, 2.1, 2.4], function(num){ return Math.floor(num); });
=> {1: [1.3], 2: [2.1, 2.4]}

_.groupBy(['one', 'two', 'three'], 'length');
=> {3: ["one", "two"], 5: ["three"]}

_.indexBy(list, iteratee, [context])
Given a list, and an iteratee function that returns a key for each element in the list (or a property name), returns an object with an index of each item. Just like groupBy, but for when you know your keys are unique.

var stooges = [{name: 'moe', age: 40}, {name: 'larry', age: 50}, {name: 'curly', age: 60}];
_.indexBy(stooges, 'age');
=> {
  "40": {name: 'moe', age: 40},
  "50": {name: 'larry', age: 50},
  "60": {name: 'curly', age: 60}
}

_.countBy([1, 2, 3, 4, 5], function(num) {
  return num % 2 == 0 ? 'even': 'odd';
});
=> {odd: 3, even: 2}

_.shuffle(list)
Returns a shuffled copy of the list, using a version of the Fisher-Yates shuffle.

_.shuffle([1, 2, 3, 4, 5, 6]);
=> [4, 1, 6, 3, 5, 2]

_.sample([1, 2, 3, 4, 5, 6]);
=> 4

_.sample([1, 2, 3, 4, 5, 6], 3);
=> [1, 6, 2]

(function(){ return _.toArray(arguments).slice(1); })(1, 2, 3, 4);
=> [2, 3, 4]

_.size([1, 2, 3, 4, 5]);
=> 5

_.size({one: 1, two: 2, three: 3});
=> 3

_.partition(list, predicate)
Split list into two arrays: one whose elements all satisfy predicate and one whose elements all do not satisfy predicate. predicate is transformed through iteratee to facilitate shorthand syntaxes.

_.partition([0, 1, 2, 3, 4, 5], isOdd);
=> [[1, 3, 5], [0, 2, 4]]

_.compact(list)
Returns a copy of the list with all falsy values removed. In JavaScript, false, null, 0, "", undefined and NaN are all falsy.

_.compact([0, 1, false, 2, '', 3]);
=> [1, 2, 3]

Array Functions

Note: All array functions will also work on the arguments object. However, Underscore functions are not designed to work on "sparse" arrays.

_.first(array, [n])
Returns the first element of an array. Passing n will return the first n elements of the array.

_.first([5, 4, 3, 2, 1]);
=> 5

_.initial([5, 4, 3, 2, 1]);
=> [5, 4, 3, 2]

_.last([5, 4, 3, 2, 1]);
=> 1

_.rest(array, [index])
Returns the rest of the elements in an array. Pass an index to return the values of the array from that index onward.

_.rest([5, 4, 3, 2, 1]);
=> [4, 3, 2, 1]

_.flatten(array, [depth])
Flattens a nested array. If you pass true or 1 as the depth, the array will only be flattened a single level. Passing a greater number will cause the flattening to descend deeper into the nesting hierarchy. Omitting the depth argument, or passing false or Infinity, flattens the array all the way to the deepest nesting level.

_.flatten([1, [2], [3, [[4]]]]);
=> [1, 2, 3, 4];

_.flatten([1, [2], [3, [[4]]]], true);
=> [1, 2, 3, [[4]]];

_.flatten([1, [2], [3, [[4]]]], 2);
=> [1, 2, 3, [4]];

_.without([1, 2, 1, 0, 3, 1, 4], 0, 1);
=> [2, 3, 4]

_.union([1, 2, 3], [101, 2, 1, 10], [2, 1]);
=> [1, 2, 3, 101, 10]

_.intersection([1, 2, 3], [101, 2, 1, 10], [2, 1]);
=> [1, 2]

_.difference([1, 2, 3, 4, 5], [5, 2, 10]);
=> [1, 3, 4]

Alias: _.uniq(array, [isSorted], [iteratee])unique
Produces a duplicate-free version of the array, using === to test object equality. In particular only the first occurrence of each value is kept. If you know in advance that the array is sorted, passing true for isSorted will run a much faster algorithm. If you want to compute unique items based on a transformation, pass aniteratee function.

_.uniq([1, 2, 1, 4, 1, 3]);
=> [1, 2, 4, 3]

_.zip(['moe', 'larry', 'curly'], [30, 40, 50], [true, false, false]);
=> [["moe", 30, true], ["larry", 40, false], ["curly", 50, false]]

Alias: _.unzip(array)transpose
The opposite of zip. Given an array of arrays, returns a series of new arrays, the first of which contains all of the first elements in the input arrays, the second of which contains all of the second elements, and so on. If you're working with a matrix of nested arrays, this can be used to transpose the matrix.

_.unzip([["moe", 30, true], ["larry", 40, false], ["curly", 50, false]]);
=> [['moe', 'larry', 'curly'], [30, 40, 50], [true, false, false]]

_.object(list, [values])
Converts arrays into objects. Pass either a single list of[key, value] pairs, or a list of keys, and a list of values. Passing by pairs is the reverse of pairs. If duplicate keys exist, the last value wins.

_.object(['moe', 'larry', 'curly'], [30, 40, 50]);
=> {moe: 30, larry: 40, curly: 50}

_.object([['moe', 30], ['larry', 40], ['curly', 50]]);
=> {moe: 30, larry: 40, curly: 50}

var partners = _.chunk(_.shuffle(kindergarten), 2);
=> [["Tyrone", "Elie"], ["Aidan", "Sam"], ["Katrina", "Billie"], ["Little Timmy"]]

_.indexOf(array, value, [isSorted])
Returns the index at which value can be found in the array, or-1 if value is not present in the array. If you're working with a large array, and you know that the array is already sorted, pass true for isSorted to use a faster binary search ... or, pass a number as the third argument in order to look for the first matching value in the array after the given index. If isSorted is true, this function uses operator< ( note).

_.indexOf([1, 2, 3], 2);
=> 1

_.lastIndexOf(array, value, [fromIndex])
Returns the index of the last occurrence of value in the array, or-1 if value is not present. Pass fromIndex to start your search at a given index.

_.lastIndexOf([1, 2, 3, 1, 2, 3], 2);
=> 4

_.sortedIndex(array, value, [iteratee], [context])
Uses a binary search to determine the smallest index at which the value should be inserted into the array in order to maintain the array's sorted order. If aniteratee function is provided, it will be used to compute the sort ranking of each value, including the value you pass. The iteratee may also be the string name of the property to sort by (eg. length). This function uses operator < ( note).

_.sortedIndex([10, 20, 30, 40, 50], 35);
=> 3

var stooges = [{name: 'moe', age: 40}, {name: 'curly', age: 60}];
_.sortedIndex(stooges, {name: 'larry', age: 50}, 'age');
=> 1

_.findIndex(array, predicate, [context])
Similar to , returns the first index where the predicate truth test passes; otherwise returns -1.

_.findIndex([4, 6, 8, 12], isPrime);
=> -1 // not found
_.findIndex([4, 6, 7, 12], isPrime);
=> 2

_.findLastIndex(array, predicate, [context])
Like but iterates the array in reverse, returning the index closest to the end where the predicate truth test passes.

var users = [{'id': 1, 'name': 'Bob', 'last': 'Brown'},
             {'id': 2, 'name': 'Ted', 'last': 'White'},
             {'id': 3, 'name': 'Frank', 'last': 'James'},
             {'id': 4, 'name': 'Ted', 'last': 'Jones'}];
_.findLastIndex(users, {
  name: 'Ted'
});
=> 3

_.range([start], stop, [step])
A function to create flexibly-numbered lists of integers, handy for each and map loops. start, if omitted, defaults to 0; step defaults to 1. Returns a list of integers from start (inclusive) to stop (exclusive), incremented (or decremented) by step. Note that ranges that stop before they start are considered to be zero-length instead of negative - if you'd like a negative range, use a negative step.

_.range(10);
=> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
_.range(1, 11);
=> [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
_.range(0, 30, 5);
=> [0, 5, 10, 15, 20, 25]
_.range(0, -10, -1);
=> [0, -1, -2, -3, -4, -5, -6, -7, -8, -9]
_.range(0);
=> []

Function (uh, ahem) Functions

_.bind(function, object, *arguments)
Bind a function to an object, meaning that whenever the function is called, the value of this will be the object. Optionally, pass arguments to the function to pre-fill them, also known as partial application. For partial application without context binding, use partial.

var func = function(greeting){ return greeting + ': ' + this.name };
func = _.bind(func, {name: 'moe'}, 'hi');
func();
=> 'hi: moe'

_.bindAll(object, *methodNames)
Binds a number of methods on the object, specified by methodNames, to be run in the context of that object whenever they are invoked. Very handy for binding functions that are going to be used as event handlers, which would otherwise be invoked with a fairly useless this. methodNames are required.

var buttonView = {
  label  : 'underscore',
  onClick: function(){ alert('clicked: ' + this.label); },
  onHover: function(){ console.log('hovering: ' + this.label); }
};
_.bindAll(buttonView, 'onClick', 'onHover');
// When the button is clicked, this.label will have the correct value.
jQuery('#underscore_button').on('click', buttonView.onClick);

_.partial(function, *arguments)
Partially apply a function by filling in any number of its arguments, without changing its dynamic this value. A close cousin of bind. You may pass _ in your list of arguments to specify an argument that should not be pre-filled, but left open to supply at call-time.

var subtract = function(a, b) { return b - a; };
sub5 = _.partial(subtract, 5);
sub5(20);
=> 15

// Using a placeholder
subFrom20 = _.partial(subtract, _, 20);
subFrom20(5);
=> 15

_.memoize(function, [hashFunction])
Memoizes a given function by caching the computed result. Useful for speeding up slow-running computations. If passed an optional hashFunction, it will be used to compute the hash key for storing the result, based on the arguments to the original function. The default hashFunction just uses the first argument to the memoized function as the key. The cache of memoized values is available as the cache property on the returned function.

var fibonacci = _.memoize(function(n) {
  return n < 2 ? n: fibonacci(n - 1) + fibonacci(n - 2);
});

_.delay(function, wait, *arguments)
Much like setTimeout, invokes function after wait milliseconds. If you pass the optional arguments, they will be forwarded on to the function when it is invoked.

var log = _.bind(console.log, console);
_.delay(log, 1000, 'logged later');
=> 'logged later' // Appears after one second.

_.defer(function, *arguments)
Defers invoking the function until the current call stack has cleared, similar to using setTimeout with a delay of 0. Useful for performing expensive computations or HTML rendering in chunks without blocking the UI thread from updating. If you pass the optional arguments, they will be forwarded on to the function when it is invoked.

_.defer(function(){ alert('deferred'); });
// Returns from the function before the alert runs.

By default, throttle will execute the function as soon as you call it for the first time, and, if you call it again any number of times during the wait period, as soon as that period is over. If you'd like to disable the leading-edge call, pass{leading: false}, and if you'd like to disable the execution on the trailing-edge, pass
{trailing: false}.

var throttled = _.throttle(updatePosition, 100);
$(window).scroll(throttled);

If you need to cancel a scheduled throttle, you can call .cancel() on the throttled function.

_.debounce(function, wait, [immediate])
Creates and returns a new debounced version of the passed function which will postpone its execution until after wait milliseconds have elapsed since the last time it was invoked. Useful for implementing behavior that should only happen after the input has stopped arriving. For example: rendering a preview of a Markdown comment, recalculating a layout after the window has stopped being resized, and so on.

At the end of the wait interval, the function will be called with the arguments that were passed most recently to the debounced function.

Pass true for the immediate argument to cause debounce to trigger the function on the leading instead of the trailing edge of the wait interval. Useful in circumstances like preventing accidental double-clicks on a "submit" button from firing a second time.

var lazyLayout = _.debounce(calculateLayout, 300);
$(window).resize(lazyLayout);

If you need to cancel a scheduled debounce, you can call .cancel() on the debounced function.

_.once(function)
Creates a version of the function that can only be called one time. Repeated calls to the modified function will have no effect, returning the value from the original call. Useful for initialization functions, instead of having to set a boolean flag and then check it later.

var initialize = _.once(createApplication);
initialize();
initialize();
// Application is only created once.

var renderNotes = _.after(notes.length, render);
_.each(notes, function(note) {
  note.asyncSave({success: renderNotes});
});
// renderNotes is run once, after all notes have saved.

_.before(count, function)
Creates a wrapper of function that memoizes its return value. From the count-th call onwards, the memoized result of the last invocation is returned immediately instead of invoking function again. So the wrapper will invoke function at most count - 1 times.

var monthlyMeeting = _.before(3, askForRaise);
monthlyMeeting();
monthlyMeeting();
monthlyMeeting();
// the result of any subsequent calls is the same as the second call

_.wrap(function, wrapper)
Wraps the first function inside of the wrapper function, passing it as the first argument. This allows the wrapper to execute code before and after the function runs, adjust the arguments, and execute it conditionally.

var hello = function(name) { return "hello: " + name; };
hello = _.wrap(hello, function(func) {
  return "before, " + func("moe") + ", after";
});
hello();
=> 'before, hello: moe, after'

_.negate(predicate)
Returns a new negated version of thepredicate function.

var isFalsy = _.negate(Boolean);
_.find([-2, -1, 0, 1, 2], isFalsy);
=> 0

_.compose(*functions)
Returns the composition of a list of functions, where each function consumes the return value of the function that follows. In math terms, composing the functions f(), g(), and h() produces f(g(h())).

var greet    = function(name){ return "hi: " + name; };
var exclaim  = function(statement){ return statement.toUpperCase() + "!"; };
var welcome = _.compose(greet, exclaim);
welcome('moe');
=> 'hi: MOE!'

_.restArguments(function, [startIndex])
Returns a version of the function that, when called, receives all arguments from and beyond startIndex collected into a single array. If you don't pass an explicit startIndex, it will be determined by looking at the number of arguments to the function itself. Similar to ES6's rest parameters syntax.

var raceResults = _.restArguments(function(gold, silver, bronze, everyoneElse) {
  _.each(everyoneElse, sendConsolations);
});

raceResults("Dopey", "Grumpy", "Happy", "Sneezy", "Bashful", "Sleepy", "Doc");

Object Functions

_.keys({one: 1, two: 2, three: 3});
=> ["one", "two", "three"]

function Stooge(name) {
  this.name = name;
}
Stooge.prototype.silly = true;
_.allKeys(new Stooge("Moe"));
=> ["name", "silly"]

_.values({one: 1, two: 2, three: 3});
=> [1, 2, 3]

_.mapObject(object, iteratee, [context])
Like map, but for objects. Transform the value of each property in turn.

_.mapObject({start: 5, end: 12}, function(val, key) {
  return val + 5;
});
=> {start: 10, end: 17}

_.pairs(object)
Convert an object into a list of[key, value] pairs. The opposite of object.

_.pairs({one: 1, two: 2, three: 3});
=> [["one", 1], ["two", 2], ["three", 3]]

_.invert({Moe: "Moses", Larry: "Louis", Curly: "Jerome"});
=> {Moses: "Moe", Louis: "Larry", Jerome: "Curly"};

_.create(prototype, props)
Creates a new object with the given prototype, optionally attaching props as own properties. Basically, Object.create, but without all of the property descriptor jazz.

var moe = _.create(Stooge.prototype, {name: "Moe"});

Alias: _.functions(object)methods
Returns a sorted list of the names of every method in an object - that is to say, the name of every function property of the object.

_.functions(_);
=> ["all", "any", "bind", "bindAll", "clone", "compact", "compose" ...

_.findKey(object, predicate, [context])
Similar to but for keys in objects. Returns the key where the predicate truth test passes or undefined. predicate is transformed through iteratee to facilitate shorthand syntaxes.

_.extend(destination, *sources)
Shallowly copy all of the properties in the source objects over to the destination object, and return the destination object. Any nested objects or arrays will be copied by reference, not duplicated. It's in-order, so the last source will override properties of the same name in previous arguments.

_.extend({name: 'moe'}, {age: 50});
=> {name: 'moe', age: 50}

Alias: _.extendOwn(destination, *sources)assign
Like extend, but only copies own properties over to the destination object.

_.pick({name: 'moe', age: 50, userid: 'moe1'}, 'name', 'age');
=> {name: 'moe', age: 50}
_.pick({name: 'moe', age: 50, userid: 'moe1'}, function(value, key, object) {
  return _.isNumber(value);
});
=> {age: 50}

_.omit({name: 'moe', age: 50, userid: 'moe1'}, 'userid');
=> {name: 'moe', age: 50}
_.omit({name: 'moe', age: 50, userid: 'moe1'}, function(value, key, object) {
  return _.isNumber(value);
});
=> {name: 'moe', userid: 'moe1'}

_.defaults(object, *defaults)
Returns object after filling in its undefined properties with the first value present in the following list of defaults objects.

var iceCream = {flavor: "chocolate"};
_.defaults(iceCream, {flavor: "vanilla", sprinkles: "lots"});
=> {flavor: "chocolate", sprinkles: "lots"}

_.clone({name: 'moe'});
=> {name: 'moe'};

_.chain([1,2,3,200])
  .filter(function(num) { return num % 2 == 0; })
  .tap(alert)
  .map(function(num) { return num * num })
  .value();
=> // [2, 200] (alerted)
=> [4, 40000]

_.toPath('key');
=> ['key']
_.toPath(['a', 0, 'b']);
=> ['a', 0, 'b'] // (same array)

_.toPath is used internally in has, get, invoke, property, propertyOf and result, as well as in iteratee and all functions that depend on it, in order to normalize deep property paths. You can override_.toPath if you want to customize this behavior, for example to enable Lodash-like string path shorthands. Be advised that altering_.toPath will unavoidably cause some keys to become unreachable; override at your own risk.

// Support dotted path shorthands.
var originalToPath = _.toPath;
_.mixin({
  toPath: function(path) {
    return _.isString(path) ? path.split('.') : originalToPath(path);
  }
});
_.get({a: [{b: 5}]}, 'a.0.b');
=> 5

_.get(object, path, [default])
Returns the specified property of object. path may be specified as a simple key, or as an array of object keys or array indexes, for deep property fetching. If the property does not exist or is undefined, the optional default is returned.

_.get({a: 10}, 'a');
=> 10
_.get({a: [{b: 2}]}, ['a', 0, 'b']);
=> 2
_.get({a: 10}, 'b', 100);
=> 100

_.has(object, key)
Does the object contain the given key? Identical to object.hasOwnProperty(key), but uses a safe reference to the hasOwnProperty function, in case it's been overridden accidentally.

_.has({a: 1, b: 2, c: 3}, "b");
=> true

var stooge = {name: 'moe'};
'moe' === _.property('name')(stooge);
=> true

var stooges = {moe: {fears: {worst: 'Spiders'}}, curly: {fears: {worst: 'Moe'}}};
var curlysWorstFear = _.property(['curly', 'fears', 'worst']);
curlysWorstFear(stooges);
=> 'Moe'

var stooge = {name: 'moe'};
_.propertyOf(stooge)('name');
=> 'moe'

Alias: _.matcher(attrs)matches
Returns a predicate function that will tell you if a passed in object contains all of the key/value properties present in attrs.

var ready = _.matcher({selected: true, visible: true});
var readyToGoList = _.filter(list, ready);

_.isEqual(object, other)
Performs an optimized deep comparison between the two objects, to determine if they should be considered equal.

var stooge = {name: 'moe', luckyNumbers: [13, 27, 34]};
var clone  = {name: 'moe', luckyNumbers: [13, 27, 34]};
stooge == clone;
=> false
_.isEqual(stooge, clone);
=> true

var stooge = {name: 'moe', age: 32};
_.isMatch(stooge, {age: 32});
=> true

_.isEmpty(collection)
Returns true if collection has no elements. For strings and array-like objects_.isEmpty checks if the length property is 0. For other objects, it returns true if the object has no enumerable own-properties. Note that primitive numbers, booleans and symbols are always empty by this definition.

_.isEmpty([1, 2, 3]);
=> false
_.isEmpty({});
=> true

_.isElement(jQuery('body')[0]);
=> true

(function(){ return _.isArray(arguments); })();
=> false
_.isArray([1,2,3]);
=> true

_.isObject({});
=> true
_.isObject(1);
=> false

(function(){ return _.isArguments(arguments); })(1, 2, 3);
=> true
_.isArguments([1,2,3]);
=> false

_.isFunction(alert);
=> true

_.isString("moe");
=> true

_.isNumber(object)
Returns true if object is a Number (including NaN).

_.isNumber(8.4 * 5);
=> true

_.isFinite(-101);
=> true

_.isFinite(-Infinity);
=> false

_.isBoolean(null);
=> false

_.isDate(new Date());
=> true

_.isRegExp(/moe/);
=> true

try {
  throw new TypeError("Example");
} catch (o_O) {
  _.isError(o_O);
}
=> true

_.isSymbol(Symbol());
=> true

_.isMap(new Map());
=> true

_.isWeakMap(new WeakMap());
=> true

_.isSet(new Set());
=> true

_.isWeakSet(WeakSet());
=> true

_.isArrayBuffer(new ArrayBuffer(8));
=> true

_.isDataView(new DataView(new ArrayBuffer(8)));
=> true

_.isTypedArray(new Int8Array(8));
=> true

_.isNaN(object)
Returns true if object is NaN.
Note: this is not the same as the native isNaN function, which will also return true for many other not-number values, such as undefined.

_.isNaN(NaN);
=> true
isNaN(undefined);
=> true
_.isNaN(undefined);
=> false

_.isNull(null);
=> true
_.isNull(undefined);
=> false

_.isUndefined(window.missingVariable);
=> true

Utility Functions

_.noConflict()
Give control of the global_ variable back to its previous owner. Returns a reference to the Underscore object.

var underscore = _.noConflict();

The _.noConflict function is not present if you use the EcmaScript 6, AMD or CommonJS module system to import Underscore.

_.identity(value)
Returns the same value that is used as the argument. In math: f(x) = x
This function looks useless, but is used throughout Underscore as a default iteratee.

var stooge = {name: 'moe'};
stooge === _.identity(stooge);
=> true

var stooge = {name: 'moe'};
stooge === _.constant(stooge)();
=> true

obj.initialize = _.noop;

_.times(n, iteratee, [context])
Invokes the given iteratee function n times. Each invocation ofiteratee is called with an index argument. Produces an array of the returned values.

_.times(3, function(n){ genie.grantWishNumber(n); });

_.random(min, max)
Returns a random integer between min and max, inclusive. If you only pass one argument, it will return a number between 0 and that number.

_.random(0, 100);
=> 42

_.mixin({
  capitalize: function(string) {
    return string.charAt(0).toUpperCase() + string.substring(1).toLowerCase();
  }
});
_("fabio").capitalize();
=> "Fabio"

_.iteratee(value, [context])
Generates a callback that can be applied to each element in a collection._.iteratee supports a number of shorthand syntaxes for common callback use cases. Depending upon value's type,_.iteratee will return:

// No value
_.iteratee();
=> _.identity()

// Function
_.iteratee(function(n) { return n * 2; });
=> function(n) { return n * 2; }

// Object
_.iteratee({firstName: 'Chelsea'});
=> _.matcher({firstName: 'Chelsea'});

// Anything else
_.iteratee('firstName');
=> _.property('firstName');

You may overwrite _.iteratee with your own custom function, if you want additional or different shorthand syntaxes:

// Support `RegExp` predicate shorthand.
var builtinIteratee = _.iteratee;
_.iteratee = function(value, context) {
  if (_.isRegExp(value)) return function(obj) { return value.test(obj) };
  return builtinIteratee(value, context);
};

_.uniqueId('contact_');
=> 'contact_104'

_.escape('Curly, Larry & Moe');
=> "Curly, Larry &amp; Moe"

_.unescape('Curly, Larry &amp; Moe');
=> "Curly, Larry & Moe"

_.result(object, property, [defaultValue])
If the value of the named property is a function then invoke it with the object as context; otherwise, return it. If a default value is provided and the property doesn't exist or is undefined then the default will be returned. If defaultValue is a function its result will be returned.

var object = {cheese: 'crumpets', stuff: function(){ return 'nonsense'; }};
_.result(object, 'cheese');
=> "crumpets"
_.result(object, 'stuff');
=> "nonsense"
_.result(object, 'meat', 'ham');
=> "ham"

_.now()
Returns an integer timestamp for the current time, using the fastest method available in the runtime. Useful for implementing timing/animation functions.

_.now();
=> 1392066795351

_.template(templateString, [settings])
Compiles JavaScript templates into functions that can be evaluated for rendering. Useful for rendering complicated bits of HTML from JSON data sources. Template functions can both interpolate values, using<%= ... %>, as well as execute arbitrary JavaScript code, with<% ... %>. If you wish to interpolate a value, and have it be HTML-escaped, use<%- ... %>. When you evaluate a template function, pass in a data object that has properties corresponding to the template's free variables. The settings argument should be a hash containing any_.templateSettings that should be overridden.

var compiled = _.template("hello: <%= name %>");
compiled({name: 'moe'});
=> "hello: moe"

var template = _.template("<b><%- value %></b>");
template({value: '<script>'});
=> "<b>&lt;script&gt;</b>"

You can also use print from within JavaScript code. This is sometimes more convenient than using<%= ... %>.

var compiled = _.template("<% print('Hello ' + epithet); %>");
compiled({epithet: "stooge"});
=> "Hello stooge"

If ERB-style delimiters aren't your cup of tea, you can change Underscore's template settings to use different symbols to set off interpolated code. Define an interpolate regex to match expressions that should be interpolated verbatim, an escape regex to match expressions that should be inserted after being HTML-escaped, and an evaluate regex to match expressions that should be evaluated without insertion into the resulting string. Note that if part of your template matches more than one of these regexes, the first will be applied by the following order of priority: (1) escape, (2) interpolate, (3) evaluate. You may define or omit any combination of the three. For example, to perform Mustache.js-style templating:

_.templateSettings = {
  interpolate: /\{\{(.+?)\}\}/g
};

var template = _.template("Hello {{ name }}!");
template({name: "Mustache"});
=> "Hello Mustache!"

By default, template places the values from your data in the local scope via the with statement. However, you can specify a single variable name with the variable setting. This can significantly improve the speed at which a template is able to render.

_.template("Using 'with': ", {variable: 'data'})({answer: 'no'});
=> "Using 'with': no"

Precompiling your templates can be a big help when debugging errors you can't reproduce. This is because precompiled templates can provide line numbers and a stack trace, something that is not possible when compiling templates on the client. The source property is available on the compiled template function for easy precompilation.

<script>
  JST.project = ;
</script>

Object-Oriented Style

You can use Underscore in either an object-oriented or a functional style, depending on your preference. The following two lines of code are identical ways to double a list of numbers.

_.map([1, 2, 3], function(n){ return n * 2; });
_([1, 2, 3]).map(function(n){ return n * 2; });

Chaining

Calling chain will cause all future method calls to return wrapped objects. When you've finished the computation, call value to retrieve the final value. Here's an example of chaining together a map/flatten/reduce, in order to get the word count of every word in a song.

var lyrics = [
  {line: 1, words: "I'm a lumberjack and I'm okay"},
  {line: 2, words: "I sleep all night and I work all day"},
  {line: 3, words: "He's a lumberjack and he's okay"},
  {line: 4, words: "He sleeps all night and he works all day"}
];

_.chain(lyrics)
  .map(function(line) { return line.words.split(' '); })
  .flatten()
  .reduce(function(counts, word) {
    counts[word] = (counts[word] || 0) + 1;
    return counts;
  }, {})
  .value();

=> {lumberjack: 2, all: 4, night: 2 ... }

In addition, the Array prototype's methods are proxied through the chained Underscore object, so you can slip a reverse or a push into your chain, and continue to modify the array.

var stooges = [{name: 'curly', age: 25}, {name: 'moe', age: 21}, {name: 'larry', age: 23}];
var youngest = _.chain(stooges)
  .sortBy(function(stooge){ return stooge.age; })
  .map(function(stooge){ return stooge.name + ' is ' + stooge.age; })
  .first()
  .value();
=> "moe is 21"

_.chain(obj).value()
Extracts the value of a wrapped object.

_.chain([1, 2, 3]).reverse().value();
=> [3, 2, 1]

Underscore.lua, a Lua port of the functions that are applicable in both languages. Includes OOP-wrapping and chaining. ( source)

Dollar.swift, a Swift port of many of the Underscore.js functions and more. ( source)

Underscore.m, an Objective-C port of many of the Underscore.js functions, using a syntax that encourages chaining. ( source)

_.m, an alternative Objective-C port that tries to stick a little closer to the original Underscore.js API. ( source)

Underscore.php, a PHP port of the functions that are applicable in both languages. Tailored for PHP 5.4 and made with data-type tolerance in mind. ( source)

Underscore-perl, a Perl port of many of the Underscore.js functions, aimed at on Perl hashes and arrays. ( source)

Underscore.cfc, a Coldfusion port of many of the Underscore.js functions. ( source)

Underscore.string, an Underscore extension that adds functions for string-manipulation: trim, startsWith, contains, capitalize, reverse, sprintf, and more.

Underscore-java, a java port of the functions that are applicable in both languages. Includes OOP-wrapping and chaining. ( source)

Ruby's Enumerable module.

Prototype.js, which provides JavaScript with collection functions in the manner closest to Ruby's Enumerable.

Oliver Steele's Functional JavaScript, which includes comprehensive higher-order function support as well as string lambdas.

Michael Aufreiter's Data.js, a data manipulation + persistence library for JavaScript.

Python's itertools.

PyToolz, a Python port that extends itertools and functools to include much of the Underscore API.

Funcy, a practical collection of functional helpers for Python, partially inspired by Underscore.

Notes

Underscore functions that depend on ordering, such as and_.sortedIndex, use JavaScript's built-in relational operators, specifically the "less than" operator<. It is important to understand that these operators are only meaningful for numbers and strings. You can throw any value to them, but JavaScript will convert the operands to string or number first before performing the actual comparison. If you pass an operand that cannot be meaningfully converted to string or number, it ends up being NaN by default. This value is unsortable.

Ideally, the values that you are sorting should either be all (meaningfully convertible to) strings or all (meaningfully convertible to) numbers. If this is not the case, you have two options:

out all unsortable values first.

Pick a target type, i.e., either string or number, and pass an to your Underscore function that will convert its argument to a sensible instance of the target type. For example, if you have an array of numbers that you want to sort and that may occasionally contain null orundefined, you can control whether you want to sort these before or after all numbers by passing aniteratee to_.sortBy that returns -Infinity or+Infinity for such values, respectively. Or maybe you want to treat them as zeros; it is up to you. The sameiteratee can also be passed to other Underscore functions to ensure that the behavior is consistent.

Change Log

Restores the underscore.js alias committed to the GitHub repository.

Adds some build clarifications to the documentation.

No code changes.

Merges the changes from the 1.13.0-0 through 1.13.0-3 preview releases into the main release stream following version 1.12.1. As of this release, ESM support is 100%.

Adds a security policy to the documentation.

Adds funding information to the documentation.

Re-synchronizes some comments and documentation text with the 1.12.x branch.

Fixes the same security issue in _.template as the parallel 1.12.1 release.

Fixes a security issue in _.template that could enable a third party to inject code in compiled templates. This issue affects all versions of Underscore between 1.3.2 and 1.12.0, inclusive, as well as preview releases 1.13.0-0 and 1.13.0-1. The fix in this release is also included in the parallel preview release 1.13.0-2.CVE-2021-23358

Restores an optimization in _.debounce that was unintentionally lost in version 1.9.0 (same as in parallel preview release 1.13.0-0).

Various test and documentation enhancements (same as in parallel preview releases 1.13.0-0 and 1.13.0-1).

Fixes an issue that caused aliases to be absent among the named exports in the new native ESM entry point for Node.js 12+.

More test and documentation fixes and enhancements.

Adds experimental support for native ESM imports in Node.js. You can now also do named imports or even deep module imports directly from a Node.js process in Node.js version 12 and later. Monolithic imports are recommended for use in production. State (such as mixed-in functions) is shared between CommonJS and ESM consumers.

Renames the UMD bundle to underscore-umd.js for consistency with the other bundle names. An alias namedunderscore.js is retained for backwards compatibility.

Restores an optimization in _.debounce that was unintentionally lost in version 1.9.0.

Various test and documentation enhancements.

Fixes a bug in _.isEqual that caused typed arrays to compare equal when viewing different segments of the same underlyingArrayBuffer.

Significantly enhances the performance of _.isEmpty and several members of the isType family of functions.

Restores cross-browser testing during continuous integration to its former glory and adds documentation about engine compatibility.

Slims down the development dependencies for testing.

Puts the source of every function in a separate module, following up on the move to EcmaScript 6 export notation in version 1.10.0. AMD and CommonJS versions of the function modules are provided as well. This brings perfect treeshaking to all users and unlocks the possibility to create arbitrary custom Underscore builds without code size overhead.modules/index.js is still present and the UMD bundle is still recommended for most users.
Since the modularization obfuscates the diff, piecewise diffs are provided below.

Adds a modular version of the annotated source, reflecting the full internal structure of the primary source code.

Adds the option to flatten arrays to a specific depth: _.flatten(anArray, 3).

Adds _.transpose as an alias to _.unzip.

Fixes a regression introduced in version 1.9.0 that caused _.bindAll to return undefined instead of the bound object.

Restores continuous integration testing with Travis CI.

Replaces stigmatizing "whitelist"/"blacklist" terminology in comments and documentation by neutral "allowed"/"disallowed" terminology.

Various clarifications and minor enhancements and fixes to the documentation, source comments and a test.

Fixes a bug introduced with 1.10.0, while using the legacy Node.js require API:var _ = require("underscore")._

Fixed relative links among the ES Modules to include the file extension, for web browser support.

Reformats the source code to use EcmaScript 6 export notation. Theunderscore.js UMD bundle is now compiled from underlying source modules instead of being the source. From now on, Rollup users have the option to import from the underlying source module in order to enable treeshaking.

Makes the notation of the _.max unittest consistent with other unittests.

Fixes a bug that would cause infinite recursion if an overridden implementation of _.iteratee attempted to fall back to the original implementation.

Restores compatibility with EcmaScript 3 and ExtendScript.

No code changes. Updated a test to help out CITGM.

Adds the _.restArguments function for variadic function handling.

Adds the _.chunk function for chunking up an array.

_.property now accepts arrays of keys and indexes as path specifiers, for looking up a deep properties of a value.

_.range now accepts negative ranges to generate descending arrays.

Adds support for several environments including: WebWorkers, browserify and ES6 imports.

Removes the component.json as the Component package management system is discontinued.

The placeholder used for partial is now configurable by setting _.partial.placeholder.

_.bindAll now accepts arrays or arguments for keys.

Three years of performance improvements.

Adds an _.create method, as a slimmed down version ofObject.create.

Restores the previous old-Internet-Explorer edge cases changed in 1.8.1.

Adds a fromIndex argument to _.contains.

Fixes/changes some old-Internet Explorer and related edge case behavior. Test your app with Underscore 1.8.1 in an old IE and let us know how it's doing...

Added _.mapObject, which is similar to _.map, but just for the values in your object. (A real crowd pleaser.)

Added _.allKeys which returns all the enumerable property names on an object.

Reverted a 1.7.0 change where _.extend only copied "own" properties. Hopefully this will un-break you - if it breaks you again, I apologize.

Added _.extendOwn - a less-useful form of _.extend that only copies over "own" properties.

Added an _.isError function.

Restored the _.unzip function as the inverse of zip. Flip-flopping. I know.

_.result now takes an optional fallback value (or function that provides the fallback value).

Added the _.propertyOf function generator as a mirror-world version of_.property.

Deprecated _.matches. It's now known by a more harmonious name -_.matcher.

Various and diverse code simplifications, changes for improved cross-platform compatibility, and edge case bug fixes.

For consistency and speed across browsers, Underscore now ignores native array methods for forEach, map, reduce,reduceRight, filter, every, some,indexOf, and lastIndexOf. "Sparse" arrays are officially dead in Underscore.

Added _.before as a counterpart to _.after.

Added _.negate to invert the truth value of a passed-in predicate.

Added _.noop as a handy empty placeholder function.

_.isEmpty now works with arguments objects.

_.has now guards against nullish objects.

_.omit can now take an iteratee function.

_.matches creates a shallow clone of your object and only iterates over own properties.

Aligning better with the forthcoming ECMA6 Object.assign,_.extend only iterates over the object's own properties.

Falsy guards are no longer needed in _.extend and_.defaults-if the passed in argument isn't a JavaScript object it's just returned.

Override base methods like each and some and they'll be used internally by other Underscore functions too.

The escape functions handle backticks (`), to deal with an IE ≤ 8 bug.

For consistency, _.union and _.difference now only work with arrays and not variadic args.

_.memoize exposes the cache of memoized values as a property on the returned function.

Underscore templates no longer accept an initial data object._.template always returns a function now.

Optimizations and code cleanup aplenty.

Underscore now registers itself for AMD (Require.js), Bower and Component, as well as being a CommonJS module and a regular (Java)Script. An ugliness, but perhaps a necessary one.

Added _.partition, a way to split a collection into two lists of results - those that pass and those that fail a particular predicate.

Added _.property, for easy creation of iterators that pull specific properties from objects. Useful in conjunction with other Underscore collection functions.

Added _.matches, a function that will give you a predicate that can be used to tell if a given object matches a list of specified key/value properties.

Added _.constant, as a higher-order _.identity.

The _.partial function may now be used to partially apply any of its arguments, by passing_ wherever you'd like a placeholder variable, to be filled-in later.

The _.each function now returns a reference to the list for chaining.

The _.keys function now returns an empty array for non-objects instead of throwing.

... and more miscellaneous refactoring.

Added a sample function, for sampling random elements from arrays.

The _.escape function no longer escapes '/'.

Added a new unzip function, as the inverse of _.zip.

The throttle function now takes an options argument, allowing you to disable execution of the throttled function on either theleading or trailing edge.

A source map is now supplied for easier debugging of the minified production build of Underscore.

Removed the ability to call _.bindAll with no method name arguments. It's pretty much always wiser to allow the names of the methods you'd like to bind.

Removed the ability to call _.after with an invocation count of zero. The minimum number of calls is (naturally) now1.

Added _.findWhere, for finding the first element in a list that matches a particular set of keys and values.

Added _.partial, for partially applying a function without changing its dynamic reference tothis.

Simplified bind by removing some edge cases involving constructor functions. In short: don't_.bind your constructors.

A minor optimization to invoke.

Fix bug in the minified version due to the minifier incorrectly optimizing-away isFunction.

Improved Underscore compatibility with Adobe's JS engine that can be used to script Illustrator, Photoshop, and friends.

The uniq function can now take array, iterator, context as the argument list.

The times function now returns the mapped array of iterator results.

Simplified and fixed bugs in throttle.

For backwards compatibility, returned to pre-1.4.0 behavior when passing null to iteration functions. They now become no-ops again.

Fixed a 1.4.0 regression in the lastIndexOf function.

Added a countBy function, for counting the number of objects in a list that match a certain criteria.

Added an invert function, for performing a simple inversion of the keys and values in an object.

Added a where function, for easy cases of filtering a list for objects with specific values.

Added an omit function, for filtering an object to remove certain keys.

Added a random function, to return a random number in a given range.

_.debounce'd functions now return their last updated value, just like_.throttle'd functions do.

The sortBy function now runs a stable sort algorithm.

"Sparse" arrays are no longer supported in Underscore iteration functions. Use a for loop instead (or better yet, an object).

The min and max functions may now be called onvery large arrays.

Interpolation in templates now represents null andundefined as the empty string.

Underscore iteration functions no longer accept null values as a no-op argument. You'll get an early error instead.

A number of edge-cases fixes and tweaks, which you can spot in the diff. Depending on how you're using Underscore,1.4.0 may be more backwards-incompatible than usual - please test when you upgrade.

Added the pick function, which allows you to filter an object literal with a list of allowed property names.

Added the result function, for convenience when working with APIs that allow either functions or raw properties.

Added the isFinite function, because sometimes knowing that a value is a number just ain't quite enough.

The sortBy function may now also be passed the string name of a property to use as the sort order on each object.

Fixed uniq to work with sparse arrays.

The difference function now performs a shallow flatten instead of a deep one when computing array differences.

The debounce function now takes an immediate parameter, which will cause the callback to fire on the leading instead of the trailing edge.

Added an _.has function, as a safer way to use hasOwnProperty.

Added _.collect as an alias for _.map. Smalltalkers, rejoice.

Reverted an old change so that _.extend will correctly copy over keys with undefined values again.

Bugfix to stop escaping slashes within interpolations in _.template.

Removed AMD (RequireJS) support from Underscore. If you'd like to use Underscore with RequireJS, you can load it as a normal script, wrap or patch your copy, or download a forked version.

You now can (and probably should, as it's simpler) write _.chain(list) instead of_(list).chain().

Fix for escaped characters in Underscore templates, and for supporting customizations of _.templateSettings that only define one or two of the required regexes.

Fix for passing an array as the first argument to an _.wrap'd function.

Improved compatibility with ClojureScript, which adds a call function toString.prototype.

Dynamic scope is now preserved for compiled _.template functions, so you can use the value ofthis if you like.

Sparse array support of _.indexOf, _.lastIndexOf.

Continued tweaks to _.isEqual semantics. Now JS primitives are considered equivalent to their wrapped versions, and arrays are compared by their numeric properties only(#351).

_.escape no longer tries to be smart about not double-escaping already-escaped HTML entities. Now it just escapes regardless(#350).

In _.template, you may now leave semicolons out of evaluated statements if you wish:<% }) %> (#369).

_.after(callback, 0) will now trigger the callback immediately, making "after" easier to use with asynchronous APIs(#366).

Several important bug fixes for _.isEqual, which should now do better on mutated Arrays, and on non-Array objects withlength properties. (#329)

James Burke contributed Underscore exporting for AMD module loaders, andTony Lukasavage for Appcelerator Titanium.(#335, #338)

You can now _.groupBy(list, 'property') as a shortcut for grouping values by a particular common property.

_.throttle'd functions now fire immediately upon invocation, and are rate-limited thereafter(#170, #266).

Most of the _.is[Type] checks no longer ducktype.

The _.bind function now also works on constructors, a-la ES5 ... but you would never want to use_.bind on a constructor function.

_.clone no longer wraps non-object types in Objects.

The _.isEqual function now supports true deep equality comparisons, with checks for cyclic structures, thanks to Kit Cambridge.

Underscore templates now support HTML escaping interpolations, using <%- ... %> syntax.

Ryan Tenney contributed _.shuffle, which uses a modified Fisher-Yates to give you a shuffled copy of an array.

_.uniq can now be passed an optional iterator, to determine by what criteria an object should be considered unique.

_.last now takes an optional argument which will return the last N elements of the list.

A new _.initial function was added, as a mirror of _.rest, which returns all the initial values of a list (except the last N).

- July 13, 2011 - Diff - Docs
Added_.groupBy, which aggregates a collection into groups of like items. Added_.union and _.difference, to complement the (re-named)_.intersection. Various improvements for support of sparse arrays._.toArray now returns a clone, if directly passed an array._.functions now also returns the names of functions that are present in the prototype chain.

- April 18, 2011 - Diff - Docs
Added_.after, which will return a function that only runs after first being called a specified number of times._.invoke can now take a direct function reference._.every now requires an iterator function to be passed, which mirrors the ES5 API._.extend no longer copies keys when the value is undefined._.bind now errors when trying to bind an undefined value.

- March 20, 2011 - Diff - Docs
Added an_.defaults function, for use merging together JS objects representing default options. Added an_.once function, for manufacturing functions that should only ever execute a single time._.bind now delegates to the native ES5 version, where available._.keys now throws an error when used on non-Object values, as in ES5. Fixed a bug with_.keys when used over sparse arrays.

- January 9, 2011 - Diff - Docs
Improved compliance with ES5's Array methods when passing null as a value._.wrap now correctly sets this for the wrapped function._.indexOf now takes an optional flag for finding the insertion index in an array that is guaranteed to already be sorted. Avoiding the use of.callee, to allow _.isArray to work properly in ES5's strict mode.

- December 1, 2010 - Diff - Docs
In CommonJS, Underscore may now be required with just:
var _ = require("underscore"). Added_.throttle and _.debounce functions. Removed_.breakLoop, in favor of an ES5-style un- break-able each implementation - this removes the try/catch, and you'll now have better stack traces for exceptions that are thrown within an Underscore iterator. Improved the isType family of functions for better interoperability with Internet Explorer host objects._.template now correctly escapes backslashes in templates. Improved_.reduce compatibility with the ES5 version: if you don't pass an initial value, the first item in the collection is used._.each no longer returns the iterated collection, for improved consistency with ES5's forEach.

- October 15, 2010 - Diff - Docs
Fixed_.contains, which was mistakenly pointing at_.intersect instead of _.include, like it should have been. Added_.unique as an alias for _.uniq.

- August 18, 2010 - Diff - Docs
The method signature of_.reduce has been changed to match the ES5 signature, instead of the Ruby/Prototype.js version. This is a backwards-incompatible change._.template may now be called with no arguments, and preserves whitespace._.contains is a new alias for_.include.

- June 22, 2010 - Diff - Docs
Andri Möll contributed the _.memoize function, which can be used to speed up expensive repeated computations by caching the results.

- June 14, 2010 - Diff - Docs
Patch that makes_.isEqual return false if any property of the compared object has a NaN value. Technically the correct thing to do, but of questionable semantics. Watch out for NaN comparisons.

- March 18, 2010 - Diff - Docs
Things have been stable for many months now, so Underscore is now considered to be out of beta, at 1.0. Improvements since 0.6 include_.isBoolean, and the ability to have _.extend take multiple source objects.

- February 24, 2010 - Diff - Docs
Major release. Incorporates a number of Mile Frawley's refactors for safer duck-typing on collection functions, and cleaner internals. A new_.mixin method that allows you to extend Underscore with utility functions of your own. Added_.times, which works the same as in Ruby or Prototype.js. Native support for ES5's Array.isArray, and Object.keys.

- January 28, 2010 - Diff - Docs
Fixed Underscore's collection functions to work on NodeLists and HTMLCollections once more, thanks to Justin Tulloss.

- January 20, 2010 - Diff - Docs
A safer implementation of_.isArguments, and a faster_.isNumber,
thanks to Jed Schmidt.

- January 18, 2010 - Diff - Docs
Customizable delimiters for_.template, contributed by Noah Sloan.

- January 5, 2010 - Diff - Docs
Fix for multiple single quotes within a template string for_.template. See: Rick Strahl's blog post.

- January 1, 2010 - Diff - Docs
New implementations of isArray, isDate, isFunction, isNumber, isRegExp, and isString, thanks to a suggestion from Robert Kieffer. Instead of doing Object#toString comparisons, they now check for expected properties, which is less safe, but more than an order of magnitude faster. Most other Underscore functions saw minor speed improvements as a result. Evgeniy Dolzhenko contributed_.tap, similar to Ruby 1.9's, which is handy for injecting side effects (like logging) into chained calls.

- December 9, 2009 - Diff - Docs
Added an_.isArguments function. Lots of little safety checks and optimizations contributed by Noah Sloan and Andri Möll.

- December 7, 2009 - Diff - Docs
[API Changes] _.bindAll now takes the context object as its first parameter. If no method names are passed, all of the context object's methods are bound to it, enabling chaining and easier binding._.functions now takes a single argument and returns the names of its Function properties. Calling_.functions(_) will get you the previous behavior. Added_.isRegExp so that isEqual can now test for RegExp equality. All of the "is" functions have been shrunk down into a single definition. Karl Guertin contributed patches.

- December 6, 2009 - Diff - Docs
Added isDate, isNaN, and isNull, for completeness. Optimizations for isEqual when checking equality between Arrays or Dates._.keys is now 25%-2X faster (depending on your browser) which speeds up the functions that rely on it, such as_.each.

- November 30, 2009 - Diff - Docs
Added the range function, a port of the Python function of the same name, for generating flexibly-numbered lists of integers. Original patch contributed by Kirill Ishanov.

- November 19, 2009 - Diff - Docs
Added rest for Arrays and arguments objects, and aliased first as head, and rest as tail, thanks to Luke Sutton's patches. Added tests ensuring that all Underscore Array functions also work on arguments objects.

- November 18, 2009 - Diff - Docs
Added isString, and isNumber, for consistency. Fixed_.isEqual(NaN, NaN) to return true (which is debatable).

- November 8, 2009 - Diff - Docs
Chained Underscore objects now support the Array prototype methods, so that you can perform the full range of operations on a wrapped array without having to break your chain. Added a breakLoop method to break in the middle of any Underscore iteration. Added an isEmpty function that works on arrays and objects.

- November 7, 2009 - Diff - Docs
All Underscore functions can now be called in an object-oriented style, like so:_([1, 2, 3]).map(...);. Original patch provided by Marc-André Cournoyer. Wrapped objects can be chained through multiple method invocations. A method was added, providing a sorted list of all the functions in Underscore.

- October 31, 2009 - Diff - Docs
Added the JavaScript 1.8 function reduceRight. Aliased it as foldr, and aliased reduce as foldl.

- October 29, 2009 - Diff - Docs
Now runs on stock Rhino interpreters with: load("underscore.js"). Added as a utility function.

- October 29, 2009 - Diff - Docs
All iterators are now passed in the original collection as their third argument, the same as JavaScript 1.6's forEach. Iterating over objects is now called with(value, key, collection), for details see .

- October 29, 2009 - Diff - Docs
Added Dmitry Baranovskiy's comprehensive optimizations, merged in Kris Kowal's patches to make Underscore CommonJS and Narwhal compliant.

- October 28, 2009 - Docs
Initial release of Underscore.js.

# data[].attributes.attachment_link.readable_text
Math.js is an extensive math library for JavaScript and Node.js. It features a flexible expression parser with support for symbolic computation, comes with a large set of built-in functions and constants, and offers an integrated solution to work with different data types like numbers, big numbers, complex numbers, fractions, units, and matrices. Powerful and easy to use.

Supports numbers, big numbers, complex numbers, fractions, units, strings, arrays, and matrices.

Is compatible with JavaScript's built-in Math library.

Contains a flexible expression parser.

Does symbolic computation.

Comes with a large set of built-in functions and constants.

Can be used as a command line application as well.

Runs on any JavaScript engine.

Is easily extensible.

Open source.

Here some example code demonstrating how to use the library. Click here to fiddle around.

Try the expression parser below.
See Math Notepad for a full application.

loading...

# data[].attributes.attachment_link.description
Math.js is an extensive math library for JavaScript and Node.js. It features big numbers, complex numbers, matrices, units, and a flexible expression parser.

# data[].attributes.attachment_link.readable_text
As of v2.0, native extension has become opt-in while supporting two new ways of interacting with the library. Sugar still believes in the safe extension of natives, however there are times when this is not appropriate, and this choice is now put in the hands of the user.

# data[].attributes.attachment_link.title
Sugar - A Javascript utility library for working with native objects.

# data[].attributes.attachment_link.description
As of v2.0, native extension has become opt-in while supporting two new ways of interacting with the library. Sugar still believes in the safe extension of natives, however there are times when this is not appropriate, and this choice is now put in the hands of the user.

# data[].attributes.attachment_link.readable_text
Chance is a minimalist generator of random [1] strings, numbers, etc. to help reduce some monotony particularly while writing automated tests or anywhere else you need anything random.

Chance is open source software and is released under the developer and business-friendly MIT License

Chance is loaded on this site so you can just open the console on your browser and play!

Written by Victor Quinn

Or move on to the Usage section for many other ways to get and use Chance.

Acknowledgements & Thanks

Thank you to Sean McCullough for your Mersenne Twister gist on which almost the entirety of this library is dependent. And to Takuji Nishimura and Makoto Matsumoto who wrote the original C version on which Sean's JavaScript gist is based.

And of course a monster thank you to all of the Contributors to this project!
© 2013 Victor Quinn Chance and this documentation are released under the terms of theMIT license.
[1] Of course true mathematicians out there would say that this ought to be considered as only generating pseudo-random things, not true random. For that we'd need some external entropy, not depending on a Mersenne Twister, blah, blah, blah. However, for most practical uses of this library for which it was created and intended, such as generating random names and addresses for automated tests, our random is good enough. But it should probably NOT be used for any cryptographic applications requiring true-random. See Wikipedia's article for more info.

# data[].attributes.attachment_link.description
Chance is a minimalist generator of random [1] strings, numbers, etc. to help reduce some monotony particularly while writing automated tests or anywhere else you need anything random. Chance is open source software and is released under the developer and business-friendly MIT License Chance is loaded on this site so you can just open the console on your browser and play!

# data[].attributes.attachment_link.readable_text
Tweet +1

Lazy.js is a functional utility library for JavaScript, similar to Underscore and Lodash, but with a lazy engine under the hood that strives to do as little work as possible while being as flexible as possible.

It has no external dependencies, so you can get started right away with:

(Note the package is called "lazy.js", with a dot.)

Or, if you're using Lazy.js in the browser:

Now let's look at what you can do with Lazy.js. (For more thorough information, take a look at the API Docs.)

Introduction

Let's start with an array of objects representing people.

var people = getBigArrayOfPeople ();

Suppose we're using this array to back some sort of search-as-you-type functionality, where users can search for people by their last names. Naturally we want to put some reasonable constraints on our problem space, so we'll provide up to 5 results at a time. Supposing the user types "Smith", we could therefore fetch results using something like this (using Underscore):

This query does a lot of stuff:

pluck('lastName'): iterates over the array and creates a new (potentially giant) array

filter(...): iterates over the new array, creating yet another (potentially giant) array

take(5): all that just for 5 elements!

So if performance and/or efficiency were a concern for you, you would probably not do things that way using Underscore. Instead, you'd likely go the procedural route:

There-now we haven't created any extraneous arrays, and we did all of the work in one iteration. Any problems?

Well, yeah. The main problem is that this is one-off code, which isn't reusable or particularly readable. If only we could somehow leverage the expressive power of Underscore but still get the performance of the hand-written procedural solution...

That's where Lazy.js comes in! Here's how we'd write the above query using Lazy.js:

Looks almost identical, right? That's the idea: Lazy.js aims to be completely familiar to JavaScript devs experienced with Underscore or Lodash. Every method from Underscore should have the same name and (almost) identical behavior in Lazy.js, except that instead of returning a fully-populated array on every call, it creates a sequence object with an each method.

What's important here is that no iteration takes place until you call each, and no intermediate arrays are created. Essentially Lazy.js combines all query operations into a "sequence" that behaves quite a bit like the procedural code we wrote a moment ago. (If you ever do want an array, simply call toArray on the resulting sequence.)

Of course, unlike the procedural approach, Lazy.js lets you keep your code clean and functional, and focus on solving whatever problem you're actually trying to solve instead of optimizing array traversals.

Features

So, Lazy.js is basically Underscore with lazy evaluation. Is that it?

Nope!

Indefinite sequence generation

The sequence-based paradigm of Lazy.js lets you do some pretty cool things that simply aren't possible with Underscore's array-based approach. One of these is the generation of indefinite sequences, which can go on forever, yet still support all of Lazy's built-in mapping and filtering capabilities.

Here's an example. Let's say we want 300 unique random numbers between 1 and 1000.

Here's a slightly more advanced example: let's use Lazy.js to make a Fibonacci sequence.

OK, what else?

Asynchronous iteration

You've probably seen code snippets before that show how to iterate over an array asynchronously in JavaScript. But have you seen an example with functional goodness like this?

All right... what else?

Event sequences

With indefinite sequences, we saw that unlike Underscore and Lodash, Lazy.js doesn't actually need an in-memory collection to iterate over. And asynchronous sequences demonstrate that it also doesn't need to do all its iteration at once.

Now here's a really cool combination of these two features: with a small extension to Lazy.js (lazy.browser.js, a separate file to include in browser-based environments), you can apply all of the power of Lazy.js to handling DOM events. In other words, Lazy.js lets you think of DOM events as a sequence-just like any other-and apply the usual map, filter, etc. functions on that sequence.

Here's an example. Let's say we want to handle all mousemove events on a given DOM element, and show their coordinates in one of two other DOM elements depending on location.

Anything else? Of course!

String processing

Now here's something you may not have even thought of: String.match and String.split. In JavaScript, each of these methods returns an array of substrings. If you think about it, this often means doing more work than necessary; but it's the quickest way (from a developer's standpoint) to get the job done.

For example, suppose you wanted the first five lines of a block of text. You could always do this:

But of course, this actually splits the entire string into every single line. If the string is very large, this is quite wasteful.

With Lazy.js, we don't need to split up an entire string just to treat it as a sequence of lines. We can get the same effect by wrapping the string with Lazy and calling split:

This way we can read the first five lines of an arbitrarily large string (without pre-populating a huge array) and map/reduce on it just as with any other sequence.

Similarly with String.match: let's say we wanted to find the first 5 alphanumeric matches in a string. With Lazy.js, it's easy!

Piece of cake.

Stream processing

Lazy.js can wrap streams in Node.js as well.

Given any Readable Stream, you can wrap it with Lazy just as with arrays:

For convenience, specialized helper methods for dealing with either file streams or HTTP streams are also offered. ( Note: this API will probably change.)

In each case, the elements in the sequence will be "chunks" of data most likely comprising multiple lines. The lines() method splits each chunk into lines (lazily, of course).
This library is experimental and still a work in progress.

# data[].attributes.attachment_link.readable_text
Micromodal.js is a lightweight, configurable and a11y-enabled modal library written in pure JavaScript

It enables you to create WAI-ARIA guidelines compliant modal dialogs, with confidence and with minimal configuration. At just 1.9kb minified and gzipped, its a tiny library for big change.

Following are some of the interactions handled by the library:-

Closing modal on overlay click

Closing modal on esc button press

Toggling aria-hidden attribute on modal

Trapping tab focus within the modal

Maintaining focus position before and after toggling modal

Focusing on the first focusable element within the modal

Installation

Micromodal is available on npm and can be installed from the command line via npm or yarn

 npm install micromodal --save // via npm yarn add micromodal --save // via yarn

You can also download or link to the latest compiled version using the CDN.

 https://unpkg.com/micromodal/dist/micromodal.min.js

Usage

Designed to be easy to use, it does most of the heavy lifting behind the scenes and exposes a simple api to interact with the dom.

Typically modals have an overlay which cover the rest of the content. To achieve this, it is normal to put the modal code just before the closing body tag, so that the modal overlay is relative to the body and covers the whole screen.

1. Add the modal markup

The following html structure is expected for the modal to work. It can of course be extended to suit your needs. As an example of the customization, see the source code of the demo modal here.

 <!-- [1] --> <div id="modal-1" aria-hidden="true"> <!-- [2] --> <div tabindex="-1" data-micromodal-close> <!-- [3] --> <div role="dialog" aria-modal="true" aria-labelledby="modal-1-title" > <header> <h2 id="modal-1-title"> Modal Title </h2> <!-- [4] --> <button aria-label="Close modal" data-micromodal-close></button> </header> <div id="modal-1-content"> Modal Content </div> </div> </div> </div>

This is the outermost container of the modal. It's job is to toggle the display of the modal. It is important that every modal have a unique id. By default the aria-hidden will be true. Micromodal takes care of toggling the value when required.

This is the div which acts as the overlay for the modal. Notice the data-micromodal-close on it. This is a special attribute which indicates that the element that it is on should trigger the close of the modal on click. If we remove that attribute, clicking on the overlay will not close the modal anymore.

The role="dialog" attribute is used to inform assistive technologies that content within is separate from the rest of the page. Additionally, the aria-labelledby="modal-1-title" attribute points to the id of the modal title. This is to help identify the purpose of the modal.

Ensuring that all buttons have a aria-label attribute which defines the action of the button. Notice the data-micromodal-close attribute is used on the button since we want to close the modal on press.

2. Add micromodal.js

If you included the compiled file from the CDN into your project, you will have access to a MicroModal global variable, which you can use to instantiate the module.

In cases with a modular workflow, you can directly import the module into your project.

 import MicroModal from 'micromodal'; // es6 module var MicroModal = require('micromodal'); // commonjs module

3. Use with data attributes

Set data-micromodal-trigger="modal-1" on an element, like a button or link, on whose click you want to show the modal. The value of the attribute, in this case modal-1 should correspond to the id of the modal you want to toggle.

Then instantiate the MicroModal module, so that it takes care of all the bindings for you.

 MicroModal.init();

Example:-

3.1. Custom data attributes

You can also specify custom attributes to open and close modals. Set data-custom-open="modal-1" to any element on the page and pass it in init method as parameter of openTrigger.

The working and usage is same as data-micromodal-trigger, but with your own defined data attribute, in this case it's data-custom-open

Similarly, you can also define custom close attribute. Example:-

4. Use with javascript

You can also trigger and close modals programmatically using the show and close methods on the MicroModal object. Example:-

 MicroModal.show('modal-id'); // [1] MicroModal.close('modal-id'); // [2]

The string passed to the show method must correspond to the id of the modal to be open. You can also pass in a config object in the show method and it will apply only to this modal.

The string passed to the close method must correspond to the id of the modal to be closed

Configuration

The init and show method accepts an optional configuration object. This allows you to set custom callbacks and control behaviour of the modal. Example:-

 MicroModal.init({ onShow: modal => console.info(`${modal.id} is shown`), // [1] onClose: modal => console.info(`${modal.id} is hidden`), // [2] openTrigger: 'data-custom-open', // [3] closeTrigger: 'data-custom-close', // [4] disableScroll: true, // [5] disableFocus: false, // [6] awaitOpenAnimation: false, // [7] awaitCloseAnimation: false, // [8] debugMode: true // [9] });

onShow function
This is fired when the modal is opening. The function receives the modal object as the first parameter and the trigger element as second parameter

onClose function
This is fired when the modal is closing. The function receives the modal object as the first parameter and the trigger element as second parameter

openTrigger string
Custom data attribute to open modal. Default is data-micromodal-trigger

closeTrigger string
Custom data attribute to close modal. Default is data-micromodal-close

disableScroll boolean
This disables scrolling on the page while the modal is open. The default value is false

disableFocus boolean
Disable auto focus on first focusable element. Default is false

awaitOpenAnimation boolean
Set this to true if using css animations to open the modal. This allows it to wait for the animation to finish before focusing on an element inside the modal. Default is false

awaitCloseAnimation boolean
Set this to true if using css animations to hide the modal. This allows it to wait for the animation to finish before removing it from the DOM. Default is false

debugMode boolean
This option suppresses the console warnings if passed as true. The default value is false

Styling

Micromodal does not make any stylistic choices about your modal and hence comes with no styling at all. It does not even toggle the visibility of the modal. You are free to style the modal in anyway you wish.

At the very least, we recommend the following bit of css to toggle the modal.

 .modal { display: none; } .modal.is-open { display: block; }

In case you do want some default styles to get started quickly, you can refer to the styles and the corresponding markup of the demo modal here:-

Demo markup and styles.

# data[].attributes.attachment_link.title
Micromodal - Tiny javascript library for creating accessible modal dialogs

# data[].attributes.attachment_link.description
It enables you to create WAI-ARIA guidelines compliant modal dialogs, with confidence and with minimal configuration. At just 1.9kb minified and gzipped, its a tiny library for big change.

# data[].attributes.attachment_link.title
Best Node.js mysql-orm Libraries in 2021 | Openbase

# data[].attributes.attachment_link.description
A comparison of the Best Node.js mysql-orm Libraries: sequelize, typeorm, knex, objection, bookshelf, jugglingdb, wetland, hapi-sequelize, and more

# data[].attributes.attachment_link.readable_text
Crazy fast

Performance is paramount, especially on mobile devices with sluggish processors. Silky smooth HTML5 javascript animation is the hallmark of any tweening engine worth its weight and GSAP outperforms old "industry standards" by literally 1000%+ under stress. What was jerky and twitchy is now fluid. It's the result of countless optimizations made to ensure that your interactive projects are responsive, efficient, and buttery smooth. Check out the speed test for a head-to-head comparison.

Freakishly robust

HTML5 javascript animation built for professionals, GSAP is packed with features that make most other engines look like cheap toys. Animate colors, beziers, css properties, arrays, scrolls and lots more. Round values, smoothly reverse() on the fly, use relative values, automatically accommodate getter/setter functions, employ virtually any easing equation, and manage conflicting tweens like a pro. Define callbacks, tween in seconds or frames, build sequences effortlessly (even with overlapping tweens), repeat/yoyo and more.

Animate anything

That's right. Anything. No predefined list of properties to choose from. Any numeric property of any object can be tweened, and if the property needs special handling (like colors, filters, non-numeric values, etc.), chances are there's a plugin that will do it. If not, one can be created. The possibilities are endless.

No dependencies

The GSAP isn't built on top of any 3rd party tools like jQuery (although it works great with jQuery). This approach minimizes load times and maximizes performance.

Dedicated support

Everybody needs a little help sometimes. We've got your back. When deadlines are looming and you can't figure something out, hop over to greensock.com/forums to get your GreenSock-related questions answered. With a proven track record of active participation by the author and an army of fellow users, GreenSock tools are unlike most open source projects that stagnate or offer zero support.

Think of GSAP as the Swiss Army Knife of javascript animation...but better. It animates anything JavaScript can touch (CSS properties, canvas library objects, SVG, React, Vue, generic objects, whatever) and it solves countless browser inconsistencies, all with blazing speed (up to 20x faster than jQuery), including automatic GPU-acceleration of transforms. See the "Why GSAP?" article for details. Most other libraries only animate CSS properties. Plus, their sequencing abilities and runtime controls pale by comparison.

Simply put, GSAP is the most robust high-performance javascript animation library on the planet, which is probably why Google recommends it for JS-based animations and every major ad network excludes it from file size calculations. Unlike monolithic frameworks that dictate how you structure your apps, GSAP completely flexible; sprinkle it wherever you want.

GSAP has quite a few plugins, eases, and special utilities like Draggable and SplitText:

# data[].attributes.attachment_link.description
Lottie is a library for Android, iOS, Web, and Windows that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile and on the web

# data[].attributes.attachment_link.description
AOS - Animate On Scroll library using CSS3

# data[].attributes.attachment_link.title
Framer: Create a professional website, free. No code website builder loved by designers.

# data[].attributes.attachment_link.description
Build a free website with Framer—enjoy full design freedom, powerful CMS, built-in SEO, and real-time collaboration. Create professional, fully custom sites with the no-code builder loved by designers and high-performing teams.

# data[].attributes.attachment_link.title
Popmotion 8 | A functional, flexible JavaScript animation library

# data[].attributes.attachment_link.description
A functional, flexible JavaScript motion library

# data[].attributes.attachment_link.description
For the ones looking to spice up their sites with some sweet animation effects. Find all you need here on the site and download the CSS file. Then you’re ready to start adding animation to your content with simple classes.

# data[].attributes.body
https://animate.style/

# data[].attributes.attachment_link.readable_text
Phosphor is a flexible icon family for interfaces, diagrams, presentations - whatever, really. Explore all our icons at phosphoricons.com.

Usage

Getting Started

We use a similar approach as many other icon sets out there, providing icons as a webfont that uses Unicode's Private Use Area character codes to map normally non-rendering characters to icons. But you don't need to know that. All you need to do is add the script to the document <head>, and drop in icons with an <i/> tag and the appropriate class:

Note: For stability, you may choose to source a specific version of Phosphor by adding the version to the script URL, for example: https://unpkg.com/phosphor-icons@1.1.0. The CDN supports version ranges.

Styling

Since the icons are just text under the hood, they can be colored and styled with CSS like any other font, including font-size, color, etc. We include several helper classes to provide easy sizing if you need it:

Note: Overriding the font-family, font-style, font-weight, font-variant, or text-transform may break the icons and render unprintable characters. Don't do it.

Note: The duotone weight is not yet available for this implementation, as fonts do not support baked-in alpha/opacity. In future we plan to move to an SVG-based approach with full support for all icon weights.

Ligatures

The icon font now supports ligatures, meaning that in any text using font-family: "Phosphor", writing the name of an icon (without the ph- prefix) will convert to the corresponding icon. The largest possible string will be matched, meaning you can use any available weight, and print multiple icons without separating with spaces or other characters if you choose.

Related Projects

License

MIT © Phosphor Icons

# data[].attributes.attachment_link.description
Phosphor is a flexible icon family for interfaces, diagrams, presentations - whatever, really. Explore all our icons at phosphoricons.com. We use a similar approach as many other icon sets out there, providing icons as a webfont that uses Unicode's Private Use Area character codes to map normally non-rendering characters to icons.

# data[].attributes.attachment_link.readable_text
Zero-runtime CSS in JS library.

Write CSS in JS, but with zero runtime, CSS is extracted to CSS files during build

Familiar CSS syntax with Sass like nesting

Use dynamic prop based styles with the React bindings, uses CSS variables behind the scenes

Easily find where the style was defined with CSS sourcemaps

Lint your CSS in JS with stylelint

Use JavaScript for logic, no CSS preprocessor needed

Optionally use any CSS preprocessor such as Sass or PostCSS

Why use Linaria
npm install @linaria/core @linaria/react @linaria/babel-preset @linaria/shaker

or

yarn add @linaria/core @linaria/react @linaria/babel-preset @linaria/shaker

Linaria currently supports webpack and Rollup to extract the CSS at build time. To configure your bundler, check the following guides:

Or configure Linaria with one of the following integrations:

Optionally, add the @linaria preset to your Babel configuration at the end of the presets list to avoid errors when importing the components in your server code or tests:

See Configuration to customize how Linaria processes your files.

Linaria can be used with any framework, with additional helpers for React. The basic syntax looks like this:

You can use imported variables and functions for logic inside the CSS code. They will be evaluated at build time.

If you're using React, you can use the styled helper, which makes it easy to write React components with dynamic styles with a styled-component like syntax:

Dynamic styles will be applied using CSS custom properties (aka CSS variables) and don't require any runtime.

See Basics for a detailed information about the syntax.

We appreciate any support in library development!

Take a look on Contributing docs to check how you can run Linaria in development mode.

No IE11 support when using dynamic styles in components with styled, since it uses CSS custom properties

Dynamic styles are not supported with css tag. See Dynamic styles with css tag for alternative approaches.

VSCode

Atom

Webstorm

Sublime Text

This project wouldn't have been possible without the following libraries or the people behind them.

Special thanks to @kentcdodds for his babel plugin and @threepointone for his suggestions and encouragement.

Made with ❤️ at Callstack

Linaria is an open source project and will always remain free to use. If you think it's cool, please star it 🌟. Callstack is a group of React and React Native geeks, contact us at hello@callstack.com if you need any help with these or just want to say hi!

Thanks goes to these wonderful people ( emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

# data[].attributes.attachment_link.description
Zero-runtime CSS in JS library. Contribute to callstack/linaria development by creating an account on GitHub.

# data[].attributes.attachment_link.readable_text
A developer-friendly API

Handsontable is easy to implement, flexible, and super customizable. You can extend it with custom plugins and edit the source code to adjust it to your product. Plus you get access to a comprehensive API, useful tutorials, and both community and commercial support.
Explore the API

# data[].attributes.attachment_link.title
Handsontable is a JavaScript data grid that looks and feels like a spreadsheet | Available for React, Angular and Vue

# data[].attributes.attachment_link.description
Handsontable is easy to implement, flexible, and super customizable. You can extend it with custom plugins and edit the source code to adjust it to your product. Plus you get access to a comprehensive API, useful tutorials, and both community and commercial support. Explore the API

# data[].attributes.attachment_link.readable_text
Tiny slider for all purposes, inspired by Owl Carousel.
Test results
Warning: tiny-slider works with static content and it works in the browser only. If the HTML is loaded dynamically, make sure to call tns() after its loading.

Using % instead of px (No more recalculation of each slide width on window resize)

Using CSS Mediaqueries if supported

Save browser capability values to localStorage, so they will not be recheck again until browser get upgraded or user clear the localStorage manually.

More options available for responsive. (Start from v2.1.0, issue 53)

Insert controls and nav before slider instead of after (issue 4)

Move autoplay button out of nav container. (Start from v2.1.0)

Some selector changes in tiny-slider.scss

Migrating to v2

Update controls and / or nav styles based on their position changes.

Update the slider selectors accordingly if used in your CSS or JS.

Update styles related to autoplay button.

* Default
bower install tiny-slider or npm install tiny-slider

Option A: Add tiny-slider.js to your page:

Option B: Import tns via webpack or rollup:

Option C: Import tns directly start from v2.8.2

Node | String

Default: '.slider'.
The slider container element or selector.

"carousel" | "gallery"

Default: "carousel".
Controls animation behaviour.
With carousel everything slides to the side, while gallery uses fade animations and changes all slides at once.

Boolean

Default: false.
If true, the width of each slide will be its natural width as a inline-block box.

viewportMax (was fixedWidthViewportWidth)

positive integer | false

Default: false.
Maximum viewport width for fixedWidth/ autoWidth.

Boolean

Default: true.
Controls the display and functionalities of controls components (prev/next buttons). If true, display the controls and add all functionalities.
For better accessibility, when a prev/next button is focused, user will be able to control the slider using left/right arrow keys.

Boolean

Default: true.
Controls the display and functionalities of nav components (dots). If true, display the nav and add all functionalities.

autoplayButtonOutput
Boolean

Default: true.
Output autoplayButton markup when autoplay is true but a customized autoplayButton is not provided.

autoplayResetOnVisibility
Boolean

Default: true.
Pauses the sliding when the page is invisible and resumes it when the page become visiable again. ( Page Visibility API)

responsive
Default: false.
Breakpoint: Integer.
Defines options for different viewport widths (see Responsive Options).

Boolean

Default: false.
Enables lazyloading images that are currently not viewed, thus saving bandwidth (see demo).
NOTE:
+ Class .tns-lazy-img need to be set on every image you want to lazyload if option lazyloadSelector is not specified;
+ data-src attribute with its value of the real image src is required;
+ width attribute for every image is required for autoWidth slider.

lazyloadSelector (v2.9.1+)

String

Default: '.tns-lazy-img'.
The CSS selector for lazyload images.

"inner" | "outer" | false

Default: false.
Define the relationship between nested sliders. (see demo)
Make sure you run the inner slider first, otherwise the height of the inner slider container will be wrong.

Boolean

Default: true.
Indicate whether the slider will be frozen ( controls, nav, autoplay and other functions will stop work) when all slides can be displayed in one page.

useLocalStorage
Boolean

Default: true.
Save browser capability variables to localStorage and without detecting them everytime the slider runs if set to true.

NOTE: Prior to v2.0.2, options "container", "controlsContainer", "navContainer" and "autoplayButton" still need to be DOM elements. E.g. container: document.querySelector('.my-slider')

The following options can be redefined in responsive field: startIndex, items, slideBy, speed, autoHeight, fixedWidth, edgePadding, gutter, center, controls, controlsText, nav, autoplay, autoplayHoverPause, autoplayResetOnVisibility, autoplayText, autoplayTimeout, touch, mouseDrag, arrowKeys, disable

NOTE:

The breakpoints behave like (min-width: breakpoint) in CSS, so an undefined option will be inherited from previous small breakpoints.

fixedWidth can only be changed to other positive integers. It can't be changed to negative integer, 0 or other data type.

The slider returns a slider object with some properties and methods once it's initialized:

To get the slider information, you can either use the getInfo() method or subscribe to an Event. Both return an Object:

Get slider information.

Go to specific slide by number or keywords.

Programmatically start slider autoplay when autoplay: true.

Programmatically stop slider autoplay when autoplay: true.

Manually adjust slider height when autoHeight is true.

Destroy the slider.

Rebuild the slider after destroy.

slider = slider . rebuild ( ) ;
// this method returns a new slider Object with the same options with the original slider

Available events include: indexChanged, transitionStart, transitionEnd, newBreakpointStart, newBreakpointEnd, touchStart, touchMove, touchEnd, dragStart, dragMove and dragEnd.

Desktop: Firefox 8+ ✓ Chrome 15+ ✓ (Should works on Chrome 4-14 as well, but I couldn't test it.) Safari 4+ ✓ Opera 12.1+ ✓ IE 8+ ✓

Mobile: Android Browser 4.2+ ✓ Chrome Mobile 63+ ✓ Firefox Mobile 28+ ✓ Maxthon 4+ ✓

Live tests and Automated Tests

Live tests, Screenshots and Automated Tests

Cdnjs
Images on demo page are from https://unsplash.com/.

This project is available under the MIT license.

# data[].attributes.attachment_link.description
Tiny slider for all purposes, inspired by Owl Carousel. Test results Warning: tiny-slider works with static content and it works in the browser only. If the HTML is loaded dynamically, make sure to call tns() after its loading.

# data[].attributes.attachment_link.description
A kickass library used to manage poppers in web applicationsNow much more powerful!

# data[].attributes.attachment_link.title
Easy File Uploading With JavaScript | FilePond

# data[].attributes.attachment_link.description
A JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.

# data[].attributes.attachment_link.readable_text
Install

Download

CDN

Link directly to unpkg.

Package managers

Install with npm: npm install isotope-layout

Install with Bower: bower install isotope-layout --save

License

Commercial license

If you want to use Isotope to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Read more about Isotope commercial licensing.

Once purchased, you'll receive a commercial license PDF and be all set to use Isotope in your commercial applications.

Open source license

If you are creating an open source application under a license compatible with the GNU GPL license v3, you may use Isotope under the terms of the GPLv3. Read more about Isotope open source licensing.

Getting started

HTML

Include the Isotope .js file in your site.

Isotope works on a container element with a group of similar child items.

CSS

All sizing of items is handled by your CSS.

Initialize with jQuery

You can use Isotope as a jQuery plugin: $('selector').isotope().

Initialize with Vanilla JavaScript

You can use Isotope with vanilla JS: new Isotope( elem, options ). The constructor accepts two arguments: the container element and an options object.

Initialize in HTML

You can initialize Isotope in HTML, without writing any JavaScript. Add data-isotope attribute to the container element. Options can be set in its value.

Options set in HTML must be valid JSON. Keys need to be quoted, for example "itemSelector":. Note the HTML attribute data-isotope is set with single quotes ', but JSON entities use double-quotes ".

Next

Learn more about how to use Isotope:

Isotope in use

Justin Bieber, Tyler Perry, Colonel Sanders: they all have used Isotope.

Are you using Isotope? Tweet @metafizzyco or email yo@metafizzy.co to share your work and possibly get it featured here.

People like Isotope

People like Isotope - Curated tweets by metafizzyco

# data[].attributes.attachment_link.description
Link directly to unpkg. Install with npm: npm install isotope-layout Install with Bower: bower install isotope-layout --save If you want to use Isotope to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Read more about Isotope commercial licensing.

# data[].attributes.attachment_link.readable_text
Create multi-page apps using UI widgets

Appsmith ships with 16 UI widgets. Every widget has useful properties like the table widget includes server-side/client-side search, filters, and server-side pagination, We include form input widgets like multi-select, auto-complete text input, radio buttons, and more. Chart types included are bar, pie, line, column, and area charts. Use Google map viewer to display location data.

Every UI widget has event based triggers like you can run an API 'onClick' of a button or search the table 'onSearchtextchange'. Use JS to write custom logic where necessary.

# data[].attributes.attachment_link.description
Appsmith ships with 16 UI widgets. Every widget has useful properties like the table widget includes server-side/client-side search, filters, and server-side pagination, We include form input widgets like multi-select, auto-complete text input, radio buttons, and more. Chart types included are bar, pie, line, column, and area charts.

# data[].attributes.attachment_link.readable_text
What is Webiny?

Webiny is an open-source framework for building serverless applications. It provides you with developer tools, libraries, ready-made apps and processes. It's built on top of AWS cloud and uses the latest technologies such as NodeJs, React and GraphQL.

It's designed for building websites, apps and APIs that scale to millions of users and run on top of serverless infrastructure like AWS Lambda.

Created with technology and tools you know and Love!

# data[].attributes.attachment_link.title
The easiest way to adopt serverless | Webiny

# data[].attributes.attachment_link.description
Webiny is an open-source framework for building serverless applications. It provides you with developer tools, libraries, ready-made apps and processes. It's built on top of AWS cloud and uses the latest technologies such as NodeJs, React and GraphQL. It's designed for building websites, apps and APIs that scale to millions of users and run on top of serverless infrastructure like AWS Lambda.

# data[].attributes.attachment_link.readable_text
A super tiny Javascript library to make DOM elements draggable and movable. Has touch screen support. Zero dependencies and 500 bytes Gzipped. Demo here.

Usage

Node

npm install @knadh/dragmove

ES6 module

Check this example to include dragmove.js as a <script> directly on an HTML page.

Licensed under the MIT License.

# data[].attributes.attachment_link.description
A super tiny Javascript library to make DOM elements draggable and movable. ~500 bytes and no dependencies. - knadh/dragmove.js

# data[].attributes.attachment_link.readable_text
Gold sponsor

⭐️ Puppeteer Recorder is now Headless Recorder and supports Playwright! ⭐️

Headless recorder is a Chrome extension that records your browser interactions and generates a Puppeteer or Playwright script. Install it from the Chrome Webstore. Don't forget to check out our sister project theheadless.dev, the open source knowledge base for Puppeteer and Playwright.

This project does the following already:

Records clicks and type events.

Add waitForNavigation, setViewPort and other useful clauses.

Generates a Puppeteer script.

Shows which events are being recorded.

Copy to clipboard.

Offers configuration options.

Allows data-id configuration for element selection.

Note: we only record certain events. See dom-events-to-record.js in the code-generator folder for which events. This collection will be expanded in future releases.

Click the icon and hit Record.

Hit tab after you finish typing in an input element.

Click links, inputs and other elements.

Wait for full page load on each navigation. The icon will switch from to .

Click Pause when you want to navigate without recording anything. Hit Resume to continue recording.

Writing Puppeteer or Playwright scripts for scraping, testing and monitoring can be tricky. A recorder / code generator can be helpful, even if the code isn't perfect. This project builds on other projects (see disclaimer below) but adds extensibility, configurability and a smoother UI.

1. Run: git clone https://github.com/checkly/headless-recorder.git

2. Build the project: cd headless-recorder && npm i && npm run dev

3. Navigate to chrome://extensions

4. Make sure 'Developer mode' is checked

5. Click Load unpacked extension...

6. Browse to headless-recorder/build and click Select

bump versions in package.json and manifest.json

tag the code with the version, i.e. git tag v0.4.0

push with tags git push --tags

Now generate a release with gren. Make sure all issues associated with the new version are linked to a milestone with the name of the tag.

gren release --override --data-source=milestones --milestone-match="{{tag_name}}"

Headless recorder is the spiritual successor & love child of segment.io's Daydream and ui recorder. Headless Recorder was previously named "Puppeteer Recorder".

Apache 2

# data[].attributes.attachment_link.description
Gold sponsor ⭐️ Puppeteer Recorder is now Headless Recorder and supports Playwright! ⭐️ Headless recorder is a Chrome extension that records your browser interactions and generates a Puppeteer or Playwright script. Install it from the Chrome Webstore. Don't forget to check out our sister project theheadless.dev, the open source knowledge base for Puppeteer and Playwright.

# data[].attributes.attachment_link.readable_text
Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.

Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.

Read the introductory blog post to learn more.

# data[].attributes.attachment_link.description
Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.

# data[].attributes.attachment_link.readable_text
To understand why we'll always need transpilers and polyfills let's take a look at Backwards and Forwards compatibility in JavaScript.

Backwards compatibility

Backwards compatibility means that once something is added to the language there won't be any changes in the future that cause it to become invalid.

Think about this for a second. This assurance is no small thing, right?

We certainly shouldn't take it for granted. This has a huge impact on decisions involving adding something to the language. Because once it is added we can't remove it just like that.

We are not going to wake up one day and find our code has just stopped running. Because of this assurance we, JavaScript developers can sleep peacefully and it makes choosing JavaScript a safe bet.

But there are some exceptions to this.🙃 JavaScript has a few backwards-incompatible changes. However, the JavaScript committee is very careful in doing so.

They study the code on the web by gathering data from the browsers to get an estimate of the impact. They make the change only if the impact is going to be minimal and if the browsers are willing to take the brunt from the change.

Forwards Compatibility

Forwards compatibility means new syntax would be able to run in an old JavaScript engine. That is if we take some code that was added to the language in 2019 it should be able to run in a JavaScript engine from 2015, 2010 or any previous years.

JavaScript is not forwards compatible.

On the contrary HTML and CSS are forwards compatible but not backwards compatible.

If we take some old HTML or CSS from 2005 it might not run or produce the same results. On the other hand, if we run modern-day HTML or CSS in an old browser it will just skip over the parts it doesn't recognize, while the rest would be processed accordingly.

This is possible because HTML and CSS are declarative and it is easier to skip over the stuff that is not recognizable. However, just imagine if the JavaScript engine starts to skip stuff that it doesn't recognize we'll get errors and bugs left and right in our code!

We'll have to support some older versions of the browser because everyone doesn't have the latest version. So if we can't run new code on an old engine should we always stick to an older syntax based on the oldest engine we need to support?

This is where the tools come in.

Transpilers

A transpiler will convert a new syntax to an older syntax.

The most commonly used transpiler is Babel.

For example, consider the following snippet of code.

if (something) { let x = 3 console. log (x) } else { let x = 4 console. log (x) }

If we run this in an older version of a browser where let is not defined we'll run into issues. So babel will transpile it to an equivalent older syntax.

var x0, x1 if (something) { x0 = 3 console. log (x0) } else { x1 = 4 console. log (x1) }

We can write newer forms of syntax without worrying about compatibility issues in old browsers.

Polyfills

Polyfills (aka shims) are useful when the issue is related to a missing API rather than some new syntax. Let us understand what we mean by this.

Let's assume we want to support an older version of a browser where Array.map() method is not defined.

So to use the method we'll have to provide our own implementation that will act as if it was already defined.

if ( ! Array .prototype.map) { Array .prototype. map = function ( callback ) { const newArray = [ ] for ( let i = 0 ; i < this .length; i++ ) { newArray. push ( callback ( this [i] , i, this ) ) } return newArray } }

The if statement will check if the map() method is defined. If not then our custom implementation will kick in.

Transpilers like Babel will automatically detect which polyfills are needed in our code but sometimes we might have to do it ourselves.

The above example is just for illustration purposes. When you need to manually define polyfills use a robust and well-tested polyfill from an official library like es-shims.

Conclusion

Since JavaScript is not forwards compatible there will always be a gap between the latest code we can write and the oldest JS engine we need to support.

As developers, we should focus on writing clean and newer syntax that communicates the ideas effectively and let the tools take care of the compatibility.

Shoutout to the YDKJS book series by Kyle Simpson that enabled this blog post.

# data[].attributes.attachment_link.title
Why JavaScript will always need Transpilers and Polyfills

# data[].attributes.attachment_link.description
To understand why we'll always need transpilers and polyfills let's take a look at Backwards and Forwards compatibility in JavaScript. Backwards compatibility...

# data[].attributes.attachment_link.readable_text
About JSCompress

JSCompress is an online JavaScript compressor that allows you to compress and minify all of your JS files by up to 80% of their original size. Copy and paste your code or you can upload and combine multiple files and then compress. We use UglifyJS 3 and babel-minify for all JavaScript minification and compression.

Why You Should Compress JavaScript

There are a number of reasons why compressing your JavaScript files is a good idea:

Quicker download times for your users.

Reduced bandwidth consumption of your website.

Reduced number of HTTP requests on your server when combining many JavaScript files into one compressed file, thus reducing the server load and allowing more visitors to access your website.

Comments and whitespace are not needed for JavaScript execution; Removing them will reduce file size and speed up script execution times.

Credits & Source

Maintained by CircleCell. You can grab the JSCompress.com source code from GitHub here.

© JSCompress.com - Advertise Here -Privacy

# data[].attributes.attachment_link.title
JSCompress - The JavaScript Compression Tool

# data[].attributes.attachment_link.description
About JSCompress JSCompress is an online JavaScript compressor that allows you to compress and minify all of your JS files by up to 80% of their original size. Copy and paste your code or you can upload and combine multiple files and then compress. We use UglifyJS 3 and babel-minify for all JavaScript minification and compression.

# data[].attributes.attachment_link.readable_text
Further customization

Want to use custom markup for each header?

You just need to add a div with the class .midnightHeader.default inside your header, as well as any other custom headers you want.

For instance the "butterflies" section will use the .midnightHeader.butterflies header, and any other ones will just use the markup from .midnightHeader.default.

# data[].attributes.attachment_link.title
Midnight.js - Switch fixed headers on the fly

# data[].attributes.attachment_link.description
Want to use custom markup for each header? You just need to add a div with the class .midnightHeader.default inside your header, as well as any other custom headers you want. For instance the "butterflies" section will use the .midnightHeader.butterflies header, and any other ones will just use the markup from .midnightHeader.default.

# data[].attributes.attachment_link.description
Your device does not support force touch or 3d touch so Pressure.js has fallen back to the polyfill.

# data[].attributes.attachment_link.description
GitHub is where people build software. More than 28 million people use GitHub to discover, fork, and contribute to over 85 million projects.

# data[].attributes.attachment_link.description
Some CSS classes to move your DOM! Easy-to-use classes that will add different kind of shake to each part of your site.

# data[].attributes.attachment_link.description
Konva is 2d Canvas JavaScript framework for drawings shapes, animations, node nesting, layering, filtering, event handling, drag and drop and much more.

# data[].attributes.attachment_link.title
Flickity · Touch, responsive, flickable carousels

# data[].attributes.attachment_link.title
jQuery Content Slider | Responsive jQuery Slider | bxSlider

# data[].attributes.attachment_link.title
flipLightBox - Responsive Lightbox jQuery Plugin

# data[].attributes.attachment_link.description
A free Responsive Lightbox jQuery Plugin that is extremely easy to implement and doesn't require any additional stylesheets, scripts or libraries. Its main feature is an optional flip effect as each lightbox image opens and closes. Another optional feature is a toggled slide text bar and navigation to accompany the lightbox images.

# data[].attributes.attachment_link.readable_text
C'est un anglicisme pour décrire la réduction d'un menu en petit symbole de trois lignes horizontales. Ce symbole évoque pour certains un hamburger.

C'est utilisé beaucoup dans le cas d'un écran étroit, type smartphone, car mettre le menu en haut de la page ne laisserai peu de place pour le début du contenu (très important pour accrocher le visiteur).

Quand on clique/touche le hamburger le menu se dévoile.
Comment implémenter un mode "hamburger" ?
Dans le HTML on crée 2 sections (div) avec identifiants "hamburger" et "menu" par exemple. La section hamburger contient l'image du hamburger uniquement. La section menu contient les liens du menu dévoilé.

L'idée et de coder la page pour que, au départ, dans le cas des petits écrans, la section "hamburger" soit visible et la section "menu" soit invisible.

Ensuite on met en place du code JavaScript pour basculer l'affichage entre hamburger et menu. C'est à dire que, quand le hamburger est cliqué/touché, le code JavaScript fait en sorte que la section "hamburger" devient invisible et que la section "menu" devient visible.

Exemple :
Dans la section head du HTML

<link rel="stylesheet" type="text/css"
      href="MON_NOM_DE_FICHIER_STYLES.css">
<script type="text/javascript" language="JavaScript"
      src="MON_NOM_DE_FICHIER_JAVASCRIPT.js"></script>

Qqpart dans le body du HTML

<div id="hamburger">
  <a href="javascript:hamburger_click();">
    <img id="hamburger-img" src="hamburger.png">
  </a>
</div>

<div id="menu">
    <ul>
	<li>Donec</li>
	<li>Vitae</li>
	<li>Rhoncus</li>
	<li>Lacinia</li>
	<li>Lectus</li>
	<li>Sapiens</li>
    </ul>
</div>

#menu
{
  font-size:18px;
  font-weight:normal;
  letter-spacing:6px;
}

#menu ul
{
  margin:0;
  padding:0;
  list-style:none;
}

#menu ul li
{
  cursor:pointer;
  padding:5px 8px;
}

#menu ul li:hover
{
  background-color:#008ac5;
  color:gold;
}

#hamburger
{
  display:none;
  width:100%;
  height:50px;
  text-align:center;
}

@media screen and (max-width: 750px)
{

#menu
{
  display:none;
}

#hamburger
{
  display:block;
}

}

Code JavaScript

function hamburger_click()
{
  var hamburgerElement = document.getElementById("hamburger");
  var menuElement = document.getElementById("menu");

  hamburgerElement.style.display = "none";
  menuElement.style.display = "block";
}

1. Prendre comme base de travail le code de la leçon Responsive Design - Les @media queries et l'adapter pour intégrer un menu avec mode hamburger quand l'écran est étroit. Voici le lien pour l'image hamburger.png.

# data[].attributes.attachment_link.title
Responsive Design - Les menus en mode hamburger

# data[].attributes.attachment_link.description
C'est un anglicisme pour décrire la réduction d'un menu en petit symbole de trois lignes horizontales. Ce symbole évoque pour certains un hamburger. C'est utilisé beaucoup dans le cas d'un écran étroit, type smartphone, car mettre le menu en haut de la page ne laisserai peu de place pour le début du contenu (très important pour accrocher le visiteur).

# data[].attributes.attachment_link.description
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

# data[].attributes.attachment_link.description
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

# data[].attributes.attachment_link.description
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

# data[].attributes.attachment_link.description
L'événement drag est déclenché lorsqu'un élément ou une section de texte est glissé (toutes les quelques centaines de milisecondes)

# data[].attributes.attachment_link.description
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

# data[].attributes.attachment_link.title
Magnific Popup: Responsive jQuery Lightbox Plugin

# data[].attributes.attachment_link.description
Light and open source responsive lightbox plugin with focus on performance, for jQuery and Zepto.js. High-DPI (retina) display support, fast tap for touch devices.

# data[].attributes.attachment_link.description
Background images are often boring. Use this effect to make your static CSS background images more interactive!

# data[].attributes.attachment_link.title
Push v1.0 | Javascript Notification Framework

# data[].attributes.attachment_link.description
The world's most versatile desktop notifications framework

# data[].attributes.attachment_link.description
p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.

# data[].attributes.attachment_link.description
Simple counter using jQuery.animate to count up to a desired number. good for stat counters....

# data[].attributes.attachment_link.description
jquery-countTo - A jQuery plugin that will count up (or down) to a target number at a specified speed.

# data[].attributes.attachment_link.description
smoothscroll-for-websites - Smooth scrolling experience for websites.

# data[].attributes.attachment_link.description
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh erat, sagittis sit amet congue at, aliquam eu libero. Integer molestie, turpis vel ultrices facilisis, nisi mauris sollicitudin mauris, volutpat elementum enim urna eget odio. Donec egestas aliquet facilisis. Nunc eu nunc eget neque ornare fringilla. Nam vel sodales lectus.

# data[].attributes.attachment_link.title
Sequence.js - The responsive CSS animation framework

# data[].attributes.attachment_link.description
The responsive CSS animation framework for creating unique sliders, presentations, banners, and other step-based applications.

# data[].attributes.attachment_link.description
Free jQuery Plugins about parallax. Download free parallax jQuery plugins at jQueryScript.Net.

# data[].attributes.attachment_link.title
Parallax.js | Simple Parallax Scrolling Effect with jQuery

# data[].attributes.attachment_link.description
Parallax.js is a dirt simple parallax scrolling effect inspired by Spotify.com and implemented as a jQuery plugin.

# data[].attributes.attachment_link.description
jquery-counter - jQuery.counter (javascript + css3)

# data[].attributes.attachment_link.description
A high-performance, dependency-free library for animated filtering, sorting and more

# data[].attributes.attachment_link.title
[MixItUp] Demos - a Collection by patrickkunka on CodePen

# data[].attributes.attachment_link.description
An inside look from Team CodePen on what it's like running a web business. Everything from server infrastructure, to day-to-day operations, to new feature development.

# data[].attributes.attachment_link.description
Sometimes it's nice to be able validate field differently depending on the input itself. validate.js allows the validators object and validator options to be a function that should return the constraints/options:

# data[].attributes.attachment_link.description
A simple and user-friendly form validator plugin for Bootstrap 3

# data[].attributes.attachment_link.readable_text
This jQuery plugin makes simple clientside form validation easy, whilst still offering plenty of customization options. It makes a good choice if you're building something new from scratch, but also when you're trying to integrate something into an existing application with lots of existing markup. The plugin comes bundled with a useful set of validation methods, including URL and email validation, while providing an API to write your own methods. All bundled methods come with default error messages in english and translations into 37 other languages.

For a quick overview of what this plugin provides, check out this Webucator video (they also provide jQuery trainings):

The plugin was initially written and maintained by Jörn Zaefferer, a member of the jQuery team, lead developer on the jQuery UI team and maintainer of QUnit. It was started back in the early days of jQuery in 2006, and updated and improved since then.

Starting with Version 1.15.0 Markus Staab took over the maintenance of the codebase in February 2016. Since July 2016 Brahim Arkni assisted Markus, and a few months later Brahim joined the jQuery Validation core team.

Files:

Installation via Package Managers

Bower: bower install jquery-validation

NuGet: Install-Package jQuery.Validation

NPM: npm i jquery-validation

Dependencies

Required

Support

Please post questions to the official using jQuery Plugins Forum, tagging your question with (at least) "validate". Keep your question short and succinct and provide code when possible; a testpage makes it much more likely that you get an useful answer in a shorter time.

Please post bug reports and other contributions (enhancements, features, eg. new validation methods) to the GitHub issue tracker

# data[].attributes.attachment_link.description
This jQuery plugin makes simple clientside form validation easy, whilst still offering plenty of customization options. It makes a good choice if you're building something new from scratch, but also when you're trying to integrate something into an existing application with lots of existing markup.

# data[].attributes.attachment_link.title
JavaScript Animated Typing with Typed.js | by Matt Boldt

# data[].attributes.attachment_link.title
slick - the last carousel you'll ever need

# data[].attributes.attachment_link.description
slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!

# data[].attributes.attachment_link.readable_text
Reveal Animations When You Scroll. Very Animate.css Friend :-)
Easily customize animation settings: style, delay, length, offset, iterations...
100% MIT Licensed, not GPL. Keep your code yours.
ES2015+, naturally Caffeine free.

# data[].attributes.attachment_link.title
wow.js - Reveal Animations When Scrolling

# data[].attributes.attachment_link.description
wow.js is a JavaScript plugin that reveals animations when you scroll. Very Animate.css Friend.

# data[].attributes.attachment_link.description
Respond - A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)

# data[].attributes.attachment_link.title
fullPage scroll snapping. Create full screen pages fast and simple

# data[].attributes.attachment_link.description
fullPage plugin by Alvaro Trigo. Create fullscreen pages fast and simple. One page scroll sections jquery plugin. Mouse snap.

# data[].attributes.attachment_link.title
CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5

# data[].attributes.attachment_link.description
A suite of modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTML5.

# data[].attributes.attachment_link.title
Slider Revolution Responsive WordPress Slider Plugin

# data[].attributes.attachment_link.description
Over 4 million active users value the potential of the #1 Slider Revolution WordPress Slider Plugin. Build websites with our visual editor & 140+ templates.

# data[].attributes.attachment_link.title
Free jQuery Plugins and Tutorials - jQuery Script

# data[].attributes.attachment_link.description
8000+ latest Free jQuery plugins with examples and tutorials for web & mobile developers.

# data[].attributes.attachment_link.title
Velocity.js: The Official Collection - a Collection by Julian Shapiro on CodePen

# data[].attributes.attachment_link.title
TypeIt | The Most Versatile JavaScript Typewriter Utility on the Planet.

# data[].attributes.attachment_link.description
TypeIt is the most versatile JavaScript utility on the planet for creating dynamic, realistic typewriter text effects on the web. Include a single, dependency-free JavaScript file, and you're ready to go. Its straightforward API allows you to type single or multiple strings that break lines, delete & replace each other, and a whole lot more.

# data[].attributes.attachment_link.title
Slippry - A responsive slider by booncon

# data[].attributes.attachment_link.description
Slippry is a responsive content slider by booncon. Slippry is truly responsive, built on modern web standards and is packed with options, so it can be as simple or complex as you want, so give it a go!

# data[].attributes.attachment_link.readable_text
A tutorial on how to create an experimental slideshow that animates in fragments. The slider is powered by the "Pieces" library, which was created for achieving interesting effects like these easily.

Today we'd like to show you how to create a playful slider with an original fragmented look. Each element of the slider will be divided into pieces that will animate in different ways, using Pieces, a library that I've created for achieving interesting effects like these easily.

This will be the final result:

The animations are powered by anime.js.

The demo is kindly sponsored by: Northwestern's Online Master's in Information Design and Strategy.
If you would like to sponsor one of our demos, find out more here.

The original idea

The source of inspiration for this kind of effect came from the Dribbble shot Shift Animation by Alexander Saunki:

Since I saw it, I wanted to implement an effect like that for my new personal website, which I recently launched: lmgonzalves.com.

To achieve the desired effects, I developed a library that I called "Pieces", since it allows to draw and animate text, images and SVG paths through rectangular pieces. So, without further ado, let's see how to use this library!

Getting started with Pieces

All the detailed documentation about the Pieces library can be found in its Github repository. But anyway, let's quickly see some essential concepts to be able to start using this library.

Assuming that we want to draw and animate an image, these are the basic elements that make up the scene:

As you can see, the image we want to draw will be our item, which will be divided into several pieces, which can also vary in size and position according to the options we define. To see all the possible options I recommend you check out the documentation on Github.

Throughout the tutorial we will explain each piece of code, so you can learn how to implement your own animations using the Pieces library. Let's start!

HTML Structure

Before starting to write Javascript code, let's see how we have defined the HTML for our slider. The markup is quite simple, since we have each slide with a corresponding image and text, the canvas element to animate things, and buttons to navigate through the slider.

<!-- Pieces Slider --> <div class="pieces-slider"> <!-- Each slide with corresponding image and text --> <div class="pieces-slider__slide"> <img class="pieces-slider__image" src="img/ricardo-gomez-angel-381749.jpg" alt=""> <div class="pieces-slider__text">Ricardo Gomez Angel</div> </div> <div class="pieces-slider__slide"> <img class="pieces-slider__image" src="img/josh-calabrese-527813.jpg" alt=""> <div class="pieces-slider__text">Josh Calabrese</div> </div> <div class="pieces-slider__slide"> <img class="pieces-slider__image" src="img/samuel-zeller-103111.jpg" alt=""> <div class="pieces-slider__text">Samuel Zeller</div> </div> <div class="pieces-slider__slide"> <img class="pieces-slider__image" src="img/sweet-ice-cream-photography-143023.jpg" alt=""> <div class="pieces-slider__text">Sweet Ice Cream</div> </div> <div class="pieces-slider__slide"> <img class="pieces-slider__image" src="img/sticker-mule-199237.jpg" alt=""> <div class="pieces-slider__text">Sticker Mule</div> </div> <!-- Canvas to draw the pieces --> <canvas class="pieces-slider__canvas"></canvas> <!-- Slider buttons: prev and next --> <button class="pieces-slider__button pieces-slider__button--prev">prev</button> <button class="pieces-slider__button pieces-slider__button--next">next</button> </div>

Styling the slider

The slideshow needs some special styling for our effect. We'll need to hide the images and texts as we'll be redrawing them with our library. But we also want them to fallback to their initial markup if no JavaScript is available. Finally, we need to make sure that the slider is responsive with a couple of media queries:

.pieces-slider { position: relative; text-align: center; padding: 8rem 0; } .js .pieces-slider { padding: 0; } /* Make all slides absolutes and hide them */ .js .pieces-slider__slide { position: absolute; right: 100%; } /* Define image dimensions and also hide them */ .pieces-slider__image { max-width: 600px; max-height: 400px; } .js .pieces-slider__image { visibility: hidden; } /* Hide the titles */ .js .pieces-slider__text { text-indent: -9999px; } /* Canvas with viewport width and height */ .js .pieces-slider__canvas { position: relative; width: 100vw; height: 100vh; transition: 0.2s opacity; } /* Class for when we resize */ .pieces-slider__canvas--hidden { opacity: 0; transition-duration: 0.3s; } /* Navigation buttons */ .pieces-slider__button { position: absolute; left: 0; top: 50%; width: 100px; height: 100px; margin: -25px 0 0 0; background-color: #5104ab; color: #fff; font-family: inherit; font-weight: bold; border: none; cursor: pointer; transition: 0.1s background-color; } .pieces-slider__button:hover { background: #5f3abf; } .pieces-slider__button--next { left: auto; right: 0; } /* Hide the buttons when no JS */ .no-js .pieces-slider__button { display: none; } /* Media queries with styles for smaller screens */ @media screen and (max-width: 720px) { .pieces-slider__image { max-width: 300px; } } @media screen and (max-width: 55em) { .pieces-slider__canvas { width: 100vw; height: 100vw; } .pieces-slider__button { width: 60px; height: 60px; } }

As you can see, we have hidden the HTML elements that we defined for our slider (except for the buttons), since we will draw everything in the canvas element.

Using Pieces to animate the slider

Let's start by defining some variables and getting the slider info from the DOM:

// Get all images and texts, get the `canvas` element, and save slider length var sliderCanvas = document.querySelector('.pieces-slider__canvas'); var imagesEl = [].slice.call(document.querySelectorAll('.pieces-slider__image')); var textEl = [].slice.call(document.querySelectorAll('.pieces-slider__text')); var slidesLength = imagesEl.length;

Then we need to define indexes variables to handle all the items we will draw on the canvas:

// Define indexes related variables, as we will use indexes to reference items var currentIndex = 0, currentImageIndex, currentTextIndex, currentNumberIndex; var textIndexes = []; var numberIndexes = []; // Update current indexes for image, text and number function updateIndexes() { currentImageIndex = currentIndex * 3; currentTextIndex = currentImageIndex + 1; currentNumberIndex = currentImageIndex + 2; } updateIndexes();

Now we will start defining the options for each type of item (image, text, number and button). You can find a complete reference in the Pieces documentation, but here is a detailed explanation for each option used to draw the images:

// Options for images var imageOptions = { angle: 45, // rotate item pieces 45deg extraSpacing: {extraX: 100, extraY: 200}, // this extra spacing is needed to cover all the item, because angle != 0 piecesWidth: function() { return Pieces.random(50, 200); }, // every piece will have a random width between 50px and 200px ty: function() { return Pieces.random(-400, 400); } // every piece will be translated in the Y axis a random distance between -400px and 400px };

In the same way, we will define the options for the other items types. Please see the comments to understand some of the properties used:

// Options for texts var textOptions = { color: 'white', backgroundColor: '#0066CC', fontSize: function() { return windowWidth > 720 ? 50 : 30; }, padding: '15 20 10 20', angle: -45, extraSpacing: {extraX: 0, extraY: 300}, piecesWidth: function() { return Pieces.random(50, 200); }, ty: function() { return Pieces.random(-200, 200); }, translate: function() { if (windowWidth > 1120) return {translateX: 200, translateY: 200}; if (windowWidth > 720) return {translateX: 0, translateY: 200}; return {translateX: 0, translateY: 100}; } }; // Options for numbers var numberOptions = { color: 'white', backgroundColor: '#0066CC', backgroundRadius: 300, fontSize: function() { return windowWidth > 720 ? 100 : 50; }, padding: function() { return windowWidth > 720 ? '18 35 10 38' : '18 25 10 28'; }, angle: 0, piecesSpacing: 2, extraSpacing: {extraX: 10, extraY: 10}, piecesWidth: 35, ty: function() { return Pieces.random(-200, 200); }, translate: function() { if (windowWidth > 1120) return {translateX: -340, translateY: -180}; if (windowWidth > 720) return {translateX: -240, translateY: -180}; return {translateX: -140, translateY: -100}; } };

Now we have all the options for each type of item, lets put them togheter to pass it to the Pieces library!

// Build the array of items to draw using Pieces var items = []; var imagesReady = 0; for (var i = 0; i < slidesLength; i++) { // Wait for all images to load before initializing the slider and event listeners var slideImage = new Image(); slideImage.onload = function() { if (++imagesReady == slidesLength) { initSlider(); initEvents(); } }; // Push all elements for each slide with the corresponding options items.push({type: 'image', value: imagesEl[i], options: imageOptions}); items.push({type: 'text', value: textEl[i].innerText, options: textOptions}); items.push({type: 'text', value: i + 1, options: numberOptions}); // Save indexes textIndexes.push(i * 3 + 1); numberIndexes.push(i * 3 + 2); // Set image src slideImage.src = imagesEl[i].src; }

In addition to building the array of elements, in the previous code block we defined a simple mechanism to call the initSlider function only when all the images have been loaded. This is very important, since we will not be able to use Pieces to draw an image that is not available.

So far, we've not draw anything yet, but we're ready to do that now. Let's see how we are initializing a new instance of Pieces.

// Save the new Pieces instance piecesSlider = new Pieces({ canvas: sliderCanvas, // CSS selector to get the canvas items: items, // the Array of items we've built before x: 'centerAll', // center all items in the X axis y: 'centerAll', // center all items in the Y axis piecesSpacing: 1, // default spacing between pieces fontFamily: ["'Helvetica Neue', sans-serif"], animation: { // animation options to use in any operation duration: function() { return Pieces.random(1000, 2000); }, easing: 'easeOutQuint' }, debug: false // set `debug: true` to enable debug mode });

And now, all the items and pieces are ready to be animated. They are being actually created, but are hidden by default, so, let's see how to show the first slide and start the animations we want:

// Animate all numbers to rotate clockwise indefinitely piecesSlider.animateItems({ items: numberIndexes, duration: 20000, angle: 360, loop: true }); // Show current items: image, text and number showItems();

So, to show and hide the current items we need to call showItems and hideItems functions respectively. We have implemented them as follows:

// Show current items: image, text and number function showItems() { // Show image pieces piecesSlider.showPieces({items: currentImageIndex, ignore: ['tx'], singly: true, update: (anim) => { // Stop the pieces animation at 60%, and run a new indefinitely animation of `ty` for each piece if (anim.progress > 60) { var piece = anim.animatables[0].target; var ty = piece.ty; anime.remove(piece); anime({ targets: piece, ty: piece.h_ty < 300 ? [{value: ty + 10, duration: 1000}, {value: ty - 10, duration: 2000}, {value: ty, duration: 1000}] : [{value: ty - 10, duration: 1000}, {value: ty + 10, duration: 2000}, {value: ty, duration: 1000}], duration: 2000, easing: 'linear', loop: true }); } }}); // Show pieces for text and number, using alternate `ty` values piecesSlider.showPieces({items: currentTextIndex}); piecesSlider.showPieces({items: currentNumberIndex, ty: function(p, i) { return p.s_ty - [-3, 3][i % 2]; }}); } // Hide current items: image, text and number function hideItems() { piecesSlider.hidePieces({items: [currentImageIndex, currentTextIndex, currentNumberIndex]}); }

And finally to navigate through the slides, we've defined these functions:

// Select the prev slide: hide current items, update indexes, and show the new current item function prevItem() { hideItems(); currentIndex = currentIndex > 0 ? currentIndex - 1 : slidesLength - 1; updateIndexes(); showItems(); } // Select the next slide: hide current items, update indexes, and show the new current item function nextItem() { hideItems(); currentIndex = currentIndex < slidesLength - 1 ? currentIndex + 1 : 0; updateIndexes(); showItems(); }

So we need to call those functions if the navigation buttons are clicked, or some of the arrow keys ( left or right) are pressed:

// Select prev or next slide using buttons prevButtonEl.addEventListener('click', prevSlide); nextButtonEl.addEventListener('click', nextSlide); // Select prev or next slide using arrow keys document.addEventListener('keydown', function (e) { if (e.keyCode == 37) { // left prevSlide(); } else if (e.keyCode == 39) { // right nextSlide(); } });

We are almost done 🙂 We just need to implement a responsive behavior, listening to the resize event, saving the current window width, and reinitializing the slider:

// Handle `resize` event window.addEventListener('resize', resizeStart); var initial = true, hideTimer, resizeTimer; // User starts resizing, so wait 300 ms before reinitialize the slider function resizeStart() { if (initial) { initial = false; if (hideTimer) clearTimeout(hideTimer); sliderCanvas.classList.add('pieces-slider__canvas--hidden'); } if (resizeTimer) clearTimeout(resizeTimer); resizeTimer = setTimeout(resizeEnd, 300); } // User ends resizing, then reinitialize the slider function resizeEnd() { initial = true; windowWidth = window.innerWidth; initSlider(); hideTimer = setTimeout(() => { sliderCanvas.classList.remove('pieces-slider__canvas--hidden'); }, 500); }

And we are finally done!

We really hope this tutorial has been useful, and that you have found inspiration in these effects!

# data[].attributes.attachment_link.description
A tutorial on how to create an experimental slideshow that animates in fragments. The slider is powered by the "Pieces" library, which was created for achieving interesting effects like these easily. Today we'd like to show you how to create a playful slider with an original fragmented look.

# data[].attributes.attachment_link.provider_name
MasonGram, Instagram photo feed jQuery plugin

# data[].attributes.attachment_link.title
MasonGram, Instagram photo feed jQuery plugin

# data[].attributes.attachment_link.description
Display Instagram images with infinite scroll, masonry layout, and other customizations

# data[].attributes.attachment_link.title
Priority Nav Scroller - Priority+ navigation in a horizontal scrollable container with controls

# data[].attributes.attachment_link.description
Priority Nav Scroller is a plugin for the priority+ navigation pattern. When the navigation items don't fit on screen they are hidden in a horizontal scrollable container with controls.

# data[].attributes.attachment_link.title
PACE - Automatic page load progress bars

# data[].attributes.attachment_link.description
Pace is a Javascript and CSS library to automatically add beautiful progress and activity indicators for page loads and ajax navigation. It is free and open source and was developed by HubSpot developers Adam Schwartz (@adamfschwartz) and Zack Bloom (@zackbloom).

# data[].attributes.attachment_link.readable_text
Add Icon

An SVG Icon from Vivid.js icons library can be easily included using the syntax <i data-vi="icon-name"></i> , where icon-name is replaced by the unique name of the respective icon.

Check out the icon reference cheatsheet to find and use the needed icons.

View Cheatsheet

Customize Icon

Each Icon can be customized in terms of size and colors.

Add data-vi-size="number" data attribute to i element to customize size of the icon.

Add data-vi-primary="#hexcode" data attribute to i element to customize the primary color of the icon.

Add data-vi-accent="#hexcode" data attribute to i element to customize the accent color of the icon.

Add data-vi-prop="#hexcode" data attribute to i element to customize the prop color of the icon.

The colors and size of the entire Vivid.js Icons library can also be changed globally via src/config.js file and compiling again.

# data[].attributes.attachment_link.title
Free Open Source SVG Icons Set Pack and Library [100+ Icons] - Vivid.js

# data[].attributes.attachment_link.description
Add Icon An SVG Icon from Vivid.js icons library can be easily included using the syntax , where icon-name is replaced by the unique name of the respective icon. Check out the icon reference cheatsheet to find and use the needed icons. View Cheatsheet Customize Icon Each Icon can be customized in terms of size and colors.

# data[].attributes.attachment_link.description
Progressively highlight any text on a page.

# data[].attributes.attachment_link.readable_text
A retro-style grid layout with a playful motion hover effect on the grid items. When clicking on a grid item, a content preview opens.

Today we'd like to share a little grid layout with you. We use CSS Grid and a playful hover effect on the grid items which are composed of different wildly placed elements. When an item is clicked, we slide in a content preview overlay and animate the grid items out and the preview items in. For the animations we use TweenMax by Greensock.

The inspiration for this demo comes from Brian Roettinger's design WORDS IMAGE SOUND>.

The demo is kindly sponsored by monday.com: Get your team on the same playbook!. If you would like to sponsor one of our demos, find out more here.

Attention: We've made this layout with modern browsers in mind.

Here's how the grid looks like:

The content preview overlay looks like this:

We hope you enjoy this little layout and find it useful!

References and Credits

Find great discounts for many useful services and resources on our Deals & Offers page!

Generative artistry * Gifdancer * Sonar * Polly.js * CSS Micro Reset * Gradient Joy * Making Web Components Wo...

JSUI * Pickr * The Most Powerful Font * Devpen * Awesome design patterns * LogicEmu * MapKit JS * jsconfeu-gen...

# data[].attributes.attachment_link.title
Grid Layout with Motion Hover Effect and Content Preview | Codrops

# data[].attributes.attachment_link.description
A retro-style grid layout with a playful motion hover effect on the grid items. When clicking on a grid item, a content preview opens. Today we'd like to share a little grid layout with you. We use CSS Grid and a playful hover effect on the grid items which are composed of different wildly placed elements.

# data[].attributes.attachment_link.title
jQuery Plugins, jQuery Tutorials, jQuery Articles, jQuery Examples, jQuery Demos

# data[].attributes.attachment_link.description
Daily Latest, Popular, Free jQuery Plugins & jQuery Tutorials & jQuery Articles & Demos