Tag Archives: javascript

Laphs: Apple Live Photos on the Web

From the folks over at Tumblr: Add support for Apple’s Live Photos in web browsers. Install it using npm, or include the dist file: npm install –save laphs You can make Laphs work with existing elements: <img src="STILL-PHOTO.jpg" data-live-photo="LIVE-PHOTO.mov" data-live-photo-still-image-time="1.71"/> … Continue reading

Elsewhere , , , , Leave a comment

10 principles for smooth web animations

Don’t change any properties besides opacity or transform! Hide content in plain sight with opacity: 0; and pointer-events: none; Don’t animate everything at the same time Slightly increasing transition delays makes it easy to choreograph motion Use a global multiplier … Continue reading

Elsewhere , , , Leave a comment

Sublime HyperClick

Most of the time when you are navigating and reading a code-base, you need to jump between required/imported (whatever jargon your programming language uses) files. The “Go to Definition” functionality of Sublime falls short for most languages since jumping between … Continue reading

Elsewhere , , , , Leave a comment

ES6/ES2015: Looping over an Object with keys and values

Say you have an object like this: const obj = { firstName: ‘John’, lastName: ‘Doe’, age: 50, eyeColor: ‘blue’ }; A simple one-liner is all it takes to loop over it, with easy access to both the key and the … Continue reading

Elsewhere , Leave a comment

Introducing Custom Elements

One of the new features in Safari Technology Preview 18 is Custom Elements v1 (Chrome/Opera already support for it): To define a custom element, simply invoke customElements.define with a new local name of the element and a subclass of HTMLElement. … Continue reading

Elsewhere , , , , 1 Comment

Check if a browser supports ES6

Great snippet by Benjamin De Cock: var supportsES6 = function() { try { new Function(“(a = 0) => a”); return true; } catch (err) { return false; } }(); The critical test is the a = 0. All browsers supporting … Continue reading

Elsewhere , , , Leave a comment

Plotly Academy: State Management with Redux

Learn how to handle application state in a centralized store with Redux, the most popular unidirectional data flow library! Wow, wish I had stumbled upon this magnificent tutorial when I was just getting started with Redux. Well written, with a … Continue reading

Elsewhere , , , Leave a comment

Start Using ES6 Today

Great set of slides by Wes Bos to getting started with ES02015 (ES6). Highly recommended. Start Using ES6 Today →

Elsewhere , , , Leave a comment

ES2015 (ES6) and React snippets for Sublime Text

babel-sublime-snippets contains a set of shorthands for Sublime Text to working more easily with ES2015 and React. With it, for example, you can just type cdup followed by a TAB and you’ll end up with componentDidUpdate(prevProps, prevState) {…}. Find it … Continue reading

Elsewhere , , , , Leave a comment

You Might Not Need JavaScript

In the spirit of You Might Not Need jQuery, and just like You Don’t Need JavaScript, the website “You Might Not Need JavaScript” contains a truckload of examples with CSS alternatives for interface components that are typically built with/powered by … Continue reading

Elsewhere , Leave a comment