FLIP is an approach to animations that remaps animating expensive properties, like width, height, left and top to significantly cheaper changes using transforms. It does this by taking two snapshots, one of the element’s First position (F), another of its Last position (L). It then uses a transform to Invert (I) the element’s changes, such that the element appears to still be in the First position. Lastly it Plays (P) the animation forward by removing the transformations applied in the Invert step.
Ever get annoyed with carousels and similar widgets that have that sort sticky pause when you swipe and release? Well, Flickity totally fixes that by handling momentum in an intuitive way.
A standalone version of the readability library used for Firefox Reader View.
To parse a document, you must create a new
Readabilityobject from a document object, and then call
parse(). Here’s an example:var article = new Readability(document).parse();
articleobject will contain the following properties:
title: article title
content: HTML string of processed article content
length: length of an article, in characters
excerpt: article description, or short excerpt from the content
byline: author metadata
dir: content direction
If you’re using Readability on the web, you will likely be able to use a
documentreference from elsewhere (e.g. fetched via XMLHttpRequest, in a same-origin
<iframe>you have access to, etc.).
Splitting creates elements and adds CSS variables to unlock amazing possibilities for animating text, grids, and more!
DoubleDash your CSS
The previously impractical becomes easy with Splitting’s CSS Variables.
A shocking amount of features in a 1.5kb (minified & gzipped) package.
Upgrade websites for modern browsers without breaking IE.
- If you are looking for performance, don’t use frameworks. Period.
- At the end of the day, DOM is slow.
- Repaints and reflows are even slower.
- Whatever performance you get out of your app, repaints and reflows are still going to be the last remaining bottleneck.
- Keep the number of DOM nodes down.
- Cache created DOM nodes, and use them as a pool of pre-assembled elements you can put back in the page as needed.
- Logging the timings in IE/Edge console is unreliable because the developer tools have a noticeable performance hit.
- Measure! Always measure performance first, then only fix the issues you’ve reliably identified.
This is pretty neat: an accessible drag and drop component that works with keyboard as well as a pointer.
Every year or so, someone writes an article titled “You do not need jQuery” or “You do not need Lodash”. These articles point out that the native APIs have been improved since or old browsers that prevented the usage of native APIs have died out. That is right, but they often miss the other main goal of libraries.
Libraries provide a concise and consistent API that is an abstraction of several inconsistent browser APIs. For example, using jQuery for traversing and manipulating the DOM, handling events and animation is still more pleasant than using the respective native APIs. This is because jQuery provides an unbeaten abstraction: A list type containing DOM nodes with powerful map, reduce and filter operations. Also, jQuery still deals with browser inconsistencies and tries to level them.
For the sake of robustness, use well-tested, rock-solid libraries. The time, resources and brain power that went into the creation and maintenance of such libraries do not compare to your own solutions.