Unpoly – The unobtrusive JavaScript framework for server-side web applications

Unpoly is an unobtrusive Javascript framework for applications that render on the server. It allows your views to do things that are not normally possible in HTML, such as having links update only fragments of a page, or opening links in modal dialogs. Unpoly can give your server-side application fast and flexible frontends that feel […]

Using @supports to detect if a browser supports CSS Variables

As tweeted by Ire Aderinokun: @supports (color: var(–)) { /* has support */ } Not too surprising if you’ve used Feature Queries before, but what does surprise me is that you can make it work by only passing the prefix of CSS Custom Properties (e.g. –) into the var() function. See the Pen Supports CSS […]

Network based image loading using the Network Information API in Service Worker

Clever use of a service worker in combination with navigator.connection.effetiveType by Michael Scharnagl. The SW watches all requests for image resources, and rewrites them to high resolution versions in case navigator.connection.effetiveType is fast enough. Network based image loading using the Network Information API in Service Worker →

SQIP – SVG-Based Image Placeholder

In an in-depth analysis on how Medium loads up their images, José M. Pérez explains how their “blur-up technique” works: Display a resized version of the original at the original size, with a blur filter on top to hide the artifacts. Load in the bigger one. Once the big version is loaded, replace the small […]

Check if a browser supports ES6 ES2015

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 default parameters have a fairly complete support of ES6 — for example, Edge 13 will […]

Adding “feature X is unsupported” warnings in your CSS Demos with @supports

Great tip from tuts+: When your CodePen demos rely on cutting edge CSS it’s a good idea to warn people. Let’s provide a notification when browsers don’t support our demos, using the @supports rule to make a handy reusable CodePen asset. New to Feature Queries (e.g. @supports)? Using Feature Queries in CSS will get you […]

Enhancing Optimistically

Here’s how Filament Group enhances (or: used to) their website for browsers that “Cut the Mustard”: if( "querySelector" in window.document && "addEventListener" in window ){ // This is a capable browser, let's improve the UI further! window.document.documentElement.className += " enhanced"; // load the enhanced scripting loadJS( "/path/to/enhancements.js" ); } But what if a browser is […]

Progressive enhancement with handlers and enhancers

var handlers = { 'overlay' : function(e) { // This function is executed on click of any element with // 'overlay' in its data-handler attribute. // The click event is in 'e', $(this).attr('data-foo') holds the // value of data-foo of the element the user clicked on }, 'another-function-name' : function(e) {} […]