JavaScript - Libraries

Mozilla's Readability.js

A standalone version of the readability library used for Firefox Reader View.

[…]

To parse a document, you must create a new Readability object from a document object, and then call parse(). Here’s an example:

var article = new Readability(document).parse();

This article object 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 document reference from elsewhere (e.g. fetched via XMLHttpRequest, in a same-origin <iframe> you have access to, etc.).

Tags: 

Splitting - text animation library

A stylized "Splitting" with a banana mascot.
That's one determined banana.

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.

Comically Small

A shocking amount of features in a 1.5kb (minified & gzipped) package.

Progressively Enhance

Upgrade websites for modern browsers without breaking IE.

Tags: 

Taming huge collections of DOM nodes

Hajime Yamasaki Vukelic has come to the conclusion that, if you’re dealing with a really big number of DOM nodes that need to be updated in real time, frameworks are usually incredibly slow on top of the already-slow DOM operations you have to do. The solution they settled on is to avoid frameworks altogether for these scenarios and use vanilla JavaScript. Also of note are that repaints and reflows are going to be big bottlenecks regardless of what you use.

  • 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.

Tags: 

Abstraction libraries - Robust Client-Side JavaScript

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.

Quoted content by Mathias Schäfer is licensed under CC BY-SA. See the other snippets from Robust Client-Side JavaScript.

Tags: