Tag Archives: progressive enhancement

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 …

Continue reading “Unpoly – The unobtrusive JavaScript framework for server-side web applications”

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 …

Continue reading “Using @supports to detect if a browser supports CSS Variables”

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 …

Continue reading “SQIP – SVG-Based Image Placeholder”

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 …

Continue reading “Check if a browser supports ES6 ES2015“

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 …

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

Using Feature Queries in CSS

There’s a good introduction to @supports on Mozilla Hacks: With @supports, you can write a small test in your CSS to see whether or not a particular “feature” (CSS property or value) is supported, and apply a block of code (or not) based on the answer. Progressive enhancement in it’s finest form: /* fallback code …

Continue reading “Using Feature Queries in CSS”

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 …

Continue reading “Enhancing Optimistically”

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) {} …

Continue reading “Progressive enhancement with handlers and enhancers”