{"slug": "jbmoelker--progressive-enhancement-resources", "title": "Progressive Enhancement Resources", "description": "Resources on Progressive Enhancement. From concept and strategies to feature detection & testing methods. Complete with a list of (code) examples.", "github_url": "https://github.com/voorhoede/progressive-enhancement-resources", "stars": "102", "tag": "Front-End Development", "entry_count": 91, "subcategory_count": 6, "subcategories": [{"name": "General", "parent": "", "entries": [{"name": "The Concept", "url": "#the-concept", "description": ""}, {"name": "Strategies", "url": "#strategies", "description": ""}, {"name": "Feature Detection", "url": "#feature-detection", "description": ""}, {"name": "Support Tables", "url": "#support-tables", "description": ""}, {"name": "Testing Methods", "url": "#testing-methods", "description": ""}, {"name": "Examples", "url": "#examples", "description": ""}, {"name": "Related Articles", "url": "#related-articles", "description": ""}, {"name": "Progressive Enhancement: It's about the content", "url": "http://cognition.happycog.com/article/progressive-enhancement-its-about-the-content", "description": "Sharing content is the core of the web. Progressive Enhancement ensures access to content."}, {"name": "The Role of Enhancement in Web Design", "url": "https://www.nngroup.com/articles/enhancement/", "description": "From the concept of enhancement to the criteria and rules for enriching the user interface."}, {"name": "Understanding Progressive Enhancement", "url": "http://alistapart.com/article/understandingprogressiveenhancement", "description": "Apply technologies in an intelligent way, layer-upon-layer, to craft an amazing experience."}, {"name": "Designing with Progressive Enhancement", "url": "https://www.filamentgroup.com/dwpe/", "description": "*The book* (400+ pages) on Progressive Enhancement."}, {"name": "Adaptive Web Design", "url": "http://adaptivewebdesign.info/2nd-edition/", "description": "Book on Progressive Enhancement from content to design and interaction."}, {"name": "Detecting (HTML5) features", "url": "http://diveinto.html5doctor.com/detect.html", "description": "Intro to different feature detection techniques with examples and demos."}, {"name": "Progressive Web Apps", "url": "https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/", "description": "Enhancing web sites into native-like apps (progressive, not hybrid)."}, {"name": "The Content-out Approach", "url": "https://articles.uie.com/progressive_enhancement/", "description": "Provide wide access to content without technological restrictions."}, {"name": "Make the page usable with only HTML", "url": "https://www.gov.uk/service-manual/technology/using-progressive-enhancement#make-the-page-usable-with-only-html", "description": "This sets the baseline for every device and browser."}, {"name": "Test Driven Progressive Enhancement", "url": "http://alistapart.com/article/testdriven", "description": "Core functional experience enhanced after testing capabilities."}, {"name": "Cut the mustard", "url": "http://responsivenews.co.uk/post/18948466399/cutting-the-mustard", "description": "Set a threshold for collection of enhancements."}, {"name": "Grade components, not browsers", "url": "https://www.filamentgroup.com/lab/grade-the-components.html", "description": "Component level feature tests and enhancements."}, {"name": "Feature vs Browser vs Form factor detection", "url": "http://www.html5rocks.com/en/tutorials/detection/", "description": "As different strategies to tune your app to its environment."}, {"name": "Server-side device detection", "url": "https://www.smashingmagazine.com/2014/07/server-side-device-detection-with-javascript/", "description": "Use user-agent and other HTTP header info combined with a device database to conditionally serve files."}, {"name": "Writing polyfills", "url": "https://addyosmani.com/blog/writing-polyfills/", "description": "If your baseline is still too high for some browsers, consider [polyfills](https://remysharp.com/2010/10/08/what-is-a-polyfill) (aka [Regressive Enhancement](https://twitter.com/SlexAxton/status/25600963629))."}, {"name": "Application Shell Architecture", "url": "https://medium.com/google-developers/instant-loading-web-apps-with-an-application-shell-architecture-7c0c2f10c73", "description": "Setup for instant loading web apps."}, {"name": "CSS feature queries", "url": "https://www.sitepoint.com/an-introduction-to-css-supports-rule-feature-queries/", "description": ""}, {"name": "Feature Detect ES6", "url": "https://www.npmjs.com/package/feature-detect-es6", "description": "Detect which ES2015 features are available."}, {"name": "SVG requiredFeatures", "url": "https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/requiredFeatures", "description": "Render SVG elements only if their `[requiredFeatures]` evaluate to true."}, {"name": "Modernizr", "url": "https://modernizr.com/", "description": "Extensive feature detection suite (supports custom builds)."}, {"name": "Feature.js", "url": "http://featurejs.com/", "description": "Lightweight feature detection suite."}, {"name": "Conditioner.js", "url": "http://conditionerjs.com/", "description": "Conditionally load JS modules based on directives in HTML attributes."}, {"name": "EnhanceJS", "url": "https://www.filamentgroup.com/lab/introducing-enhancejs-smarter-safer-apply-progressive-enhancement.html", "description": "Lets you asynchronously load CSS & JS after a set pre-defined feature tests."}, {"name": "The Web Platform", "url": "https://platform.html5.org/", "description": "Overview of browser technologies with links to docs and test suites."}, {"name": "Can I use ...?", "url": "http://caniuse.com/", "description": "Compare feature implementations and limitations across desktop & mobile browsers."}, {"name": "I want to use ...", "url": "http://www.iwanttouse.com/", "description": "Figure out the browser support of combinations of features."}, {"name": "HTML5 Test", "url": "http://html5test.com/", "description": "Test and compare HTML5 feature support across browsers."}, {"name": "CSS3 Test", "url": "http://css3test.com/", "description": "Fine-grained tests for CSS3 feature support of your current browser."}, {"name": "Accessibility Support", "url": "https://a11ysupport.io/", "description": "Compare accessibility support of HTML elements and ARIA roles across browsers & assistive technologies."}, {"name": "State of Web Type", "url": "https://github.com/bramstein/stateofwebtype", "description": "Support tables for type and typographic features on the web.", "stars": "67"}, {"name": "Font Family Reunion", "url": "http://fontfamily.io/", "description": "Compatibility tables for default local (system) fonts."}, {"name": "HTML5 Accessibility", "url": "http://html5accessibility.com/", "description": "Compare feature support of HTML5 tags, input types and properties across major browsers."}, {"name": "WAI-ARIA Screen reader compatibility", "url": "https://www.powermapper.com/tests/screen-readers/aria/", "description": "ARIA roles and attributes support for different screen reader and browser combinations."}, {"name": "What web can do today", "url": "https://whatwebcando.today/", "description": "Lists and checks modern web APIs like access to device system, sensors and actuators."}, {"name": "HTML5 Worker test", "url": "https://nolanlawson.github.io/html5workertest/", "description": "Compare which APIs are supported in Web Workers and Service Workers across browsers."}, {"name": "HTML5 Please", "url": "http://html5please.com/", "description": "Explore features with recommendations and links to polyfills."}, {"name": "API Catalog", "url": "https://developer.microsoft.com/en-us/microsoft-edge/platform/catalog/", "description": "Lets you compare implementation of API specifications in major desktop browsers."}, {"name": "Kangax's ECMAScript compatibility table", "url": "http://kangax.github.io/compat-table/", "description": "Overview of JavaScript feature support across browsers and other runtimes."}, {"name": "Node compatibility table", "url": "http://node.green/", "description": "Overview of JavaScript feature support across NodeJS versions."}, {"name": "Is service worker ready?", "url": "https://jakearchibald.github.io/isserviceworkerready/", "description": "Overview of support for all features involved in the core technology behind Progressive Web Apps."}, {"name": "Is PWA ready?", "url": "https://ispwaready.toxicjohann.com/", "description": "Overview of support for the core and related technologies behind Progressive Web Apps for both popular global and many Chinese browsers."}, {"name": "Is WebRTC ready yet?", "url": "http://iswebrtcreadyyet.com/", "description": "Overview of support for the different browser features behind real time communication."}, {"name": "Is WebVR ready?", "url": "https://iswebvrready.org/", "description": "Overview of support of different browser features behind WebVR including display, gamepad, audio and speech APIs."}, {"name": "Is Houdini ready yet?", "url": "https://ishoudinireadyyet.com/", "description": "Overview of support for Houdini (low-level APIs exposing parts of the CSS rendering engine) across browsers."}, {"name": "Chrome Platform Status", "url": "https://www.chromestatus.com/features", "description": ""}, {"name": "Edge Platform Status", "url": "https://developer.microsoft.com/en-us/microsoft-edge/platform/status/", "description": ""}, {"name": "Firefox Platform Status", "url": "https://platform-status.mozilla.org/", "description": ""}, {"name": "Webkit Platform Status", "url": "https://webkit.org/status/", "description": ""}, {"name": "MDN Compatibility tables", "url": "https://developer.mozilla.org/en-US/docs/MDN/Contribute/Structures/Compatibility_tables", "description": "MDN's web technology documentation has a browser compatibility table end the end of each article."}, {"name": "MDN Browser Compat Data", "url": "https://github.com/mdn/browser-compat-data", "description": "npm module powering the MDN Compatibility tables.", "stars": "4.4k"}, {"name": "Device Bugs & Quirks", "url": "https://github.com/scottjehl/Device-Bugs", "description": "Crowd sourced collection of weird HTML, CSS, and JS quirks in mobile devices, which you won't find in the other support tables.", "stars": "859"}, {"name": "Can I Email?", "url": "https://www.caniemail.com/", "description": "Support tables for HTML and CSS in emails. Inspired by [Can I use](http://caniuse.com/)."}, {"name": "Project Fugu API tracker", "url": "https://fugu-tracker.web.app/", "description": "Browser support status overview of web API's filling the \"app gap\"."}, {"name": "iOS PWA Compatibility", "url": "https://firt.dev/notes/pwa-ios/", "description": "Support table for PWA features including service worker, manifest, background sync and push notifications (Unofficial, maintained by Maximiliano Firtman)."}, {"name": "Open Device Lab", "url": "https://opendevicelab.com/", "description": "Lets you *test manually on actual devices* (for free)."}, {"name": "Text browsers", "url": "https://en.wikipedia.org/wiki/Text-based_web_browser", "description": "Good way to test if your content is accessible at the baseline. Try [Lynx](http://lynx.browser.org/) for example."}, {"name": "Testing in Opera Mini", "url": "https://dev.opera.com/articles/making-sites-work-opera-mini/#testing-in-opera-mini", "description": "Download the app, emulate on desktop, setup to test local websites. (Opera Mini accounts for over 5% browser usage world wide)"}, {"name": "cURL", "url": "https://curl.haxx.se/docs/manual.html", "description": "Web page to see the pre-rendered source code of a page."}, {"name": "Browserling", "url": "https://www.browserling.com/", "description": "Lets you manually test web pages in different versions of browsers on Windows and Android platforms."}, {"name": "Run Internet Explorer using Virtual Machines", "url": "https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/mac/", "description": "To test IE browsers on other platforms."}, {"name": "Device emulators and simulators", "url": "https://developers.google.com/web/tools/chrome-devtools/iterate/device-mode/testing-other-browsers?hl=en#device-emulators-and-simulators", "description": ""}, {"name": "Configure *Desired Capabilities* in Selenium", "url": "https://github.com/SeleniumHQ/selenium/wiki/DesiredCapabilities", "description": "Run automated browser tests in different scenarios.", "stars": "26k"}, {"name": "Lighthouse", "url": "https://github.com/GoogleChrome/lighthouse", "description": "Audit and meassure performance of Progressive Web Apps (via cli or [Chrome extension](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk)).", "stars": "26k"}, {"name": "Progressive Enhancement checklist (1st edition, HTML)", "url": "http://adaptivewebdesign.info/1st-edition/read/chapter-6.html#the-progressive-enhancement-checklist", "description": ""}, {"name": "CSS Feature Toggles", "url": "https://chrome.google.com/webstore/detail/css-feature-toggles/aeinmfddnniiloadoappmdnffcbffnjg", "description": "Chrome DevTools extension to toggle support of selected CSS features for testing progressive enhancement fallbacks."}]}, {"name": "Custom Form Elements", "parent": "Examples", "entries": [{"name": "Fancy radio buttons", "url": "https://www.sitepoint.com/replacing-radio-buttons-without-replacing-radio-buttons/", "description": "Based on HTML radio buttons, visually enhanced using CSS pseudo classes and elements."}, {"name": "Checkboxes & radio buttons", "url": "https://www.filamentgroup.com/dwpe/checkbox-radiobutton/", "description": "With custom focus, hover and checked state. Enhanced asynchronously."}, {"name": "Toggle switch", "url": "https://ghinda.net/css-toggle-switch/", "description": "Checkbox or radios, visually enhanced to sliding toggle switches using CSS only."}, {"name": "5-star rating", "url": "http://lea.verou.me/2011/08/accessible-star-rating-widget-with-pure-css/", "description": "Based on HTML radio buttons, visually enhanced using CSS pseudo classes and elements."}, {"name": "jQuery slider", "url": "https://github.com/filamentgroup/jQuery-Slider", "description": "Accessible, custom slider widget based on a standard HTML select.", "stars": "34"}, {"name": "jQuery custom file input", "url": "https://www.filamentgroup.com/lab/jquery-custom-file-input-book-designing-with-progressive-enhancement.html", "description": "Article and library."}, {"name": "React isomorphic form", "url": "https://github.com/ghengeveld/react-isomorphic-form/", "description": "Set of React form components which can be pre-rendered & handled server-side. They are enhanced client-side without losing state.", "stars": "30"}]}, {"name": "Data Visualisations", "parent": "Examples", "entries": [{"name": "Timeline", "url": "https://css-tricks.com/progressive-enhancement-data-visualizations/", "description": "From definition list to SVG illustration (article with demos)."}, {"name": "Charts", "url": "https://www.filamentgroup.com/lab/update-to-jquery-visualize-accessible-charts-with-html5-from-designing-with.html", "description": "From data table to themed charts using HTML5 canvas (article and library)."}]}, {"name": "Images", "parent": "Examples", "entries": [{"name": "Responsive Carousel", "url": "http://filamentgroup.github.io/responsive-carousel/test/functional/fade-auto.html", "description": "List of images enhanced into responsive carousel with various behaviour options."}, {"name": "Lazy Progressive Enhancement", "url": "https://github.com/tvler/lazy-progressive-enhancement", "description": "Lazy load images inside `