progressive-enhancement-resources
Enhancement guide
A collection of resources and examples on Progressive Enhancement strategies for web development
Resources on Progressive Enhancement. From concept and strategies to feature detection & testing methods. Complete with a list of (code) examples.
132 stars
12 watching
7 forks
last commit: almost 2 years ago
Linked from 3 awesome lists
awesomeawesome-listexamplesfeature-detectionlistopen-sourceprogressive-enhancementsupport-tables
Progressive Enhancement Resources / The Concept | |||
| Progressive Enhancement: It's about the content | Sharing content is the core of the web. Progressive Enhancement ensures access to content | ||
| The Role of Enhancement in Web Design | From the concept of enhancement to the criteria and rules for enriching the user interface | ||
| Understanding Progressive Enhancement | Apply technologies in an intelligent way, layer-upon-layer, to craft an amazing experience | ||
| Designing with Progressive Enhancement | (400+ pages) on Progressive Enhancement | ||
| Adaptive Web Design | Book on Progressive Enhancement from content to design and interaction | ||
| Detecting (HTML5) features | Intro to different feature detection techniques with examples and demos | ||
| Progressive Web Apps | Enhancing web sites into native-like apps (progressive, not hybrid) | ||
Progressive Enhancement Resources / Strategies | |||
| The Content-out Approach | Provide wide access to content without technological restrictions | ||
| Make the page usable with only HTML | This sets the baseline for every device and browser | ||
| Test Driven Progressive Enhancement | Core functional experience enhanced after testing capabilities | ||
| Cut the mustard | Set a threshold for collection of enhancements | ||
| Grade components, not browsers | Component level feature tests and enhancements | ||
| Feature vs Browser vs Form factor detection | As different strategies to tune your app to its environment | ||
| Server-side device detection | Use user-agent and other HTTP header info combined with a device database to conditionally serve files | ||
| Writing polyfills | If your baseline is still too high for some browsers, consider (aka ) | ||
| Application Shell Architecture | Setup for instant loading web apps | ||
Progressive Enhancement Resources / Feature Detection | |||
| CSS feature queries | ( & ) - Natively test if specific CSS feature is supported using JS method or CSS declaration | ||
| Feature Detect ES6 | Detect which ES2015 features are available | ||
| SVG requiredFeatures | Render SVG elements only if their evaluate to true | ||
| Modernizr | Extensive feature detection suite (supports custom builds) | ||
| Feature.js | Lightweight feature detection suite | ||
| Conditioner.js | Conditionally load JS modules based on directives in HTML attributes | ||
| EnhanceJS | Lets you asynchronously load CSS & JS after a set pre-defined feature tests | ||
Progressive Enhancement Resources / Support Tables | |||
| The Web Platform | Overview of browser technologies with links to docs and test suites | ||
| Can I use ...? | Compare feature implementations and limitations across desktop & mobile browsers | ||
| I want to use ... | Figure out the browser support of combinations of features | ||
| HTML5 Test | Test and compare HTML5 feature support across browsers | ||
| CSS3 Test | Fine-grained tests for CSS3 feature support of your current browser | ||
| Accessibility Support | Compare accessibility support of HTML elements and ARIA roles across browsers & assistive technologies | ||
| State of Web Type | 65 | about 7 years ago | Support tables for type and typographic features on the web |
| Font Family Reunion | Compatibility tables for default local (system) fonts | ||
| HTML5 Accessibility | Compare feature support of HTML5 tags, input types and properties across major browsers | ||
| WAI-ARIA Screen reader compatibility | ARIA roles and attributes support for different screen reader and browser combinations | ||
| What web can do today | Lists and checks modern web APIs like access to device system, sensors and actuators | ||
| HTML5 Worker test | Compare which APIs are supported in Web Workers and Service Workers across browsers | ||
| HTML5 Please | Explore features with recommendations and links to polyfills | ||
| API Catalog | Lets you compare implementation of API specifications in major desktop browsers | ||
| Kangax's ECMAScript compatibility table | Overview of JavaScript feature support across browsers and other runtimes | ||
| Node compatibility table | Overview of JavaScript feature support across NodeJS versions | ||
| Is service worker ready? | Overview of support for all features involved in the core technology behind Progressive Web Apps | ||
| Is PWA ready? | Overview of support for the core and related technologies behind Progressive Web Apps for both popular global and many Chinese browsers | ||
| Is WebRTC ready yet? | Overview of support for the different browser features behind real time communication | ||
| Is WebVR ready? | Overview of support of different browser features behind WebVR including display, gamepad, audio and speech APIs | ||
| Is Houdini ready yet? | Overview of support for Houdini (low-level APIs exposing parts of the CSS rendering engine) across browsers | ||
| Chrome Platform Status | |||
| Edge Platform Status | |||
| Firefox Platform Status | |||
| Webkit Platform Status | (Safari) | ||
| MDN Compatibility tables | MDN's web technology documentation has a browser compatibility table end the end of each article | ||
| MDN Browser Compat Data | 4,983 | 6 days ago | npm module powering the MDN Compatibility tables |
| Device Bugs & Quirks | 864 | over 8 years ago | Crowd sourced collection of weird HTML, CSS, and JS quirks in mobile devices, which you won't find in the other support tables |
| Can I Email? | Support tables for HTML and CSS in emails. Inspired by | ||
| Project Fugu API tracker | Browser support status overview of web API's filling the "app gap" | ||
| iOS PWA Compatibility | Support table for PWA features including service worker, manifest, background sync and push notifications (Unofficial, maintained by Maximiliano Firtman) | ||
Progressive Enhancement Resources / Testing Methods | |||
| Open Device Lab | Lets you (for free) | ||
| Text browsers | Good way to test if your content is accessible at the baseline. Try for example | ||
| Testing in Opera Mini | Download the app, emulate on desktop, setup to test local websites. (Opera Mini accounts for over 5% browser usage world wide) | ||
| cURL | Web page to see the pre-rendered source code of a page | ||
| Browserling | Lets you manually test web pages in different versions of browsers on Windows and Android platforms | ||
| Run Internet Explorer using Virtual Machines | To test IE browsers on other platforms | ||
| Device emulators and simulators | |||
| Configure Desired Capabilities in Selenium | 30,751 | 6 days ago | Run automated browser tests in different scenarios |
| BrowserStack | Continuously run automated tests in different browsers using , or other alternatives | ||
| Lighthouse | 28,401 | 7 days ago | Audit and meassure performance of Progressive Web Apps (via cli or ) |
| Progressive Enhancement checklist (1st edition, HTML) | , - Actionable list to check you've applied Progressive Enhancement best practices. Part of | ||
| CSS Feature Toggles | Chrome DevTools extension to toggle support of selected CSS features for testing progressive enhancement fallbacks | ||
Progressive Enhancement Resources / Examples / Custom Form Elements | |||
| Fancy radio buttons | Based on HTML radio buttons, visually enhanced using CSS pseudo classes and elements | ||
| Checkboxes & radio buttons | With custom focus, hover and checked state. Enhanced asynchronously | ||
| Toggle switch | Checkbox or radios, visually enhanced to sliding toggle switches using CSS only | ||
| 5-star rating | Based on HTML radio buttons, visually enhanced using CSS pseudo classes and elements | ||
| jQuery slider | 34 | about 2 years ago | Accessible, custom slider widget based on a standard HTML select |
| jQuery custom file input | Article and library | ||
| React isomorphic form | 31 | about 8 years ago | Set of React form components which can be pre-rendered & handled server-side. They are enhanced client-side without losing state |
Progressive Enhancement Resources / Examples / Data Visualisations | |||
| Timeline | From definition list to SVG illustration (article with demos) | ||
| Charts | From data table to themed charts using HTML5 canvas (article and library) | ||
Progressive Enhancement Resources / Examples / Images | |||
| Responsive Carousel | List of images enhanced into responsive carousel with various behaviour options | ||
| Lazy Progressive Enhancement | 190 | over 4 years ago | Lazy load images inside tags. (note: Evergreen browsers only) |
Progressive Enhancement Resources / Examples / Menus | |||
| Progressive hamburger menu | List of links in footer enhanced to off-canvas menu | ||
Progressive Enhancement Resources / Examples / Page Navigation | |||
| Barba.js | Add page transitions with event hooks, cache and prefetch support | ||
| SmoothState.js | 4,426 | almost 3 years ago | Add page transitions with event hooks, cache and prefetch support. (requires jQuery) |
| jquery-pjax | 16,726 | almost 2 years ago | Add page transitions with support for multiple containers / content slots (requires jQuery) |
| MoOx/pjax | 1,452 | almost 2 years ago | Similar tot jquery-pjax, but without the jQuery dependency |
| Turbolinks | 12,715 | over 3 years ago | Add page transitions with event hooks and cache support. Has adapters to bind to native navigation controls on iOS and Android |
Progressive Enhancement Resources / Related Articles | |||
| Make the web work for everyone | Plea to developers to consider browser differences and build a resilient web | ||
| How many people are missing out on JavaScript enhancement? | Research on why in 1.1% of page visits JavaScript isn't loaded | ||
sindresorhus/awesome
jnv/lists
0ex/more-awesome
moduscreateorg/gimbal
mozilla/web-ext