It All Starts with a Humble </h1> <span><p><strong>Andy Bell</strong> rings out a fresh call in support of the timeless concept of progressive enhancement. What does it mean to build a modern JavaScript-focussed web experience that still works well if part of the stack isnt supported or fails? Andy shows us how that might be done.</p> <hr><p>Those that know me well know that I make <em>a lot</em> of <a target="_blank" rel="nofollow" href="https://hankchizljaw.com/projects/">side projects</a>. I most definitely make too many, but theres one really useful thing about making lots of side projects: it allows me to experiment in a low-risk setting. </p><p>Side projects also allow me to accidentally create a context where I can demonstrate a really affective, long-running methodology for building on the web: <strong>progressive enhancement</strong>. That context is a little Progressive Web App that Im tinkering with called <a target="_blank" rel="nofollow" href="https://jotter.space/">Jotter</a>. Its incredibly simple, but under the hood, theres a really solid experience built on top of a <strong>minimum viable experience</strong> which after reading this article, youll hopefully apply this methodology to your own work.</p><figure><picture><source srcset="https://media.24ways.org/2019/bell/jotter-screenshot.webp" type="image/webp"><img align=left class="movedimg" onerror="this.remove()" src="https://media.24ways.org/2019/bell/jotter-screenshot.png" alt="The Jotter Progressive Web App presented in the Google Chrome browser."></source></picture></figure><h2>What is a minimum viable experience?</h2><p>The key to progressive enhancement is distilling the user experience to its lowest possible technical solution and then building on it to improve the user experience. In the context of <a target="_blank" rel="nofollow" href="https://jotter.space/">Jotter</a>, that is a humble <code><textarea></code> element. That humble <code><textarea></code> is our <strong>minimum viable experience</strong>. </p><p>Let me show you how its built up, progressively real quick. If you disable CSS and JavaScript, you get this:</p><figure><picture><source srcset="https://media.24ways.org/2019/bell/jotter-screenshot-html-only.webp" type="image/webp"><img align=left class="movedimg" onerror="this.remove()" src="https://media.24ways.org/2019/bell/jotter-screenshot-html-only.png" alt="The Jotter Progressive Web App with CSS and JavaScript disabled shows a HTML only experience."></source></picture></figure><p>This result is great because I know that regardless of what happens, the user can do what they needed to do when the loaded Jotter in their browser: take some notes. Thats our <strong>minimum viable experience</strong>, completed with a few lines of code that work in <strong>every single browser</strong>even very old browsers. Dont you just love good ol HTML? </p><p>Now its time to enhance that minimum viable experience, <strong>progressively</strong>. Its a good idea to do that in smaller steps rather than just provide a 0% experience or a 100% experience, which is the approach thats often favoured by JavaScript framework enthusiasts. I think that process is counter-intuitive to the web, though, so building up from a minimum viable experience is the optimal way to go, in my opinion. </p><p>Understanding how a <strong>minimum viable experience</strong> works can be a bit tough, admittedly, so I like to use a the following diagram to explain the process:</p><figure><picture><source srcset="https://media.24ways.org/2019/bell/mvp.webp" type="image/webp"><img align=left class="movedimg" onerror="this.remove()" src="https://media.24ways.org/2019/bell/mvp.png" alt="Minimum viable experience diagram which is described in the next paragraph."></source></picture></figure><p>Let me break down this diagram for both folks who can and cant see it. On the top row, theres four stages of a broken-up car, starting with just a wheel, all the way up to a fully functioning car. The car enhances only in a way that it is still <strong>mostly useless</strong> until it gets to its final form when the person is finally happy. </p><p>On the second row, instead of building a car, we start with a skateboard which immediately does the job of getting the person from point A to point B. This enhances to a Micro Scooter and then to a Push Bike. Its final form is a fancy looking Motor Scooter. I choose that instead of a car deliberately because generally, when you progressively enhance a project, it turns out to be <em>way simpler and lighter</em> than a project that was built without progressive enhancement in mind.</p><p>Now that we know what a minimum viable experience is and how it works, lets apply this methodology to Jotter! </p><h2>Add some CSS</h2><p>The first enhancement is CSS. Jotter has a very simple design, which is mostly a full height <code><textarea></code> with a little sidebar. A flexbox-based, auto-stacking layout, inspired by a layout called <a target="_blank" rel="nofollow" href="https://every-layout.dev/layouts/sidebar/">The Sidebar</a> is used and were good to go. </p><p>Based on the diagram from earlier, we can comfortably say were in <strong>Skateboard</strong> territory now.</p><h2>Add some JavaScript</h2><p>Weve got styles now, so lets <em>enhance</em> the experience again. A user can currently load up the site and take notes. If the CSS loads, itll be a more pleasant experience, but if they refresh their browser, theyre going to lose all of their work.</p><p>We can fix that by adding some <a target="_blank" rel="nofollow" href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage">local storage</a> into the mix. </p><p>The functionality flow is pretty straightforward. As a user inputs content, the JavaScript listens to an <code>input</code> event and pushes the content of the <code><textarea></code> into <code>localStorage</code>. If we then set that <code>localStorage</code> data to populate the <code><textarea></code> on load, that users experience is suddenly <em>enhanced</em> because they cant lose their work by accidentally refreshing. </p><p>The JavaScript is incredibly light, too: </p><pre><code class="language-javascript">const textArea = document.querySelector('textarea');const storageKey = 'text';const init = () => { textArea.value = localStorage.getItem(storageKey); textArea.addEventListener('input', () => { localStorage.setItem(storageKey, textArea.value); });}init();</code></pre><p>In around 13 lines of code (which you can see a <a target="_blank" rel="nofollow" href="https://codepen.io/andybelldesign/pen/vYEYZJQ">working demo here</a>), weve been able to enhance the users experience <em>considerably</em>, and if we think back to our diagram from earlier, we are very much in <strong>Micro Scooter</strong> territory now. </p><h2>Making it a PWA</h2><p>Were in really good shape now, so lets turn Jotter into a <strong>Motor Scooter</strong> and make this thing work offline as an installable Progressive Web App (PWA). </p><p>Making a PWA is really achievable and Google have even produced a <a target="_blank" rel="nofollow" href="https://developers.google.com/web/progressive-web-apps/checklist">handy checklist</a> to help you get going. You can also get guidance from a <a target="_blank" rel="nofollow" href="https://developers.google.com/web/tools/lighthouse">Lighthouse audit</a>. </p><p>For this little app, all we need is a <a target="_blank" rel="nofollow" href="https://developers.google.com/web/fundamentals/web-app-manifest">manifest</a> and a <a target="_blank" rel="nofollow" href="https://developers.google.com/web/fundamentals/primers/service-workers">Service Worker</a> to cache assets and serve them offline for us if needed.</p><p>The Service Worker is actually pretty slim, so here it is in its entirety: </p><pre><code class="language-javascript">const VERSION = '0.1.3';const CACHE_KEYS = { MAIN: `main-${VERSION}`};// URLS that we want to be cached when the worker is installedconst PRE_CACHE_URLS = ['/', '/css/global.css', '/js/app.js', '/js/components/content.js'];/** * Takes an array of strings and puts them in a named cache store * * @param {String} cacheName * @param {Array} items=[] */const addItemsToCache = function(cacheName, items = []) { caches.open(cacheName).then(cache => cache.addAll(items));};self.addEventListener('install', evt => { self.skipWaiting(); addItemsToCache(CACHE_KEYS.MAIN, PRE_CACHE_URLS);});self.addEventListener('activate', evt => { // Look for any old caches that don't match our set and clear them out evt.waitUntil( caches .keys() .then(cacheNames => { return cacheNames.filter(item => !Object.values(CACHE_KEYS).includes(item)); }) .then(itemsToDelete => { return Promise.all( itemsToDelete.map(item => { return caches.delete(item); }) ); }) .then(() => self.clients.claim()) );});self.addEventListener('fetch', evt => { evt.respondWith( caches.match(evt.request).then(cachedResponse => { // Item found in cache so return if (cachedResponse) { return cachedResponse; } // Nothing found so load up the request from the network return caches.open(CACHE_KEYS.MAIN).then(cache => { return fetch(evt.request) .then(response => { // Put the new response in cache and return it return cache.put(evt.request, response.clone()).then(() => { return response; }); }) .catch(ex => { return; }); }); }) );});</code></pre><p>What the Service Worker does here is pre-cache our core assets that we define in <code>PRE_CACHE_URLS</code>. Then, for each <code>fetch</code> event which is called per request, itll try to fulfil the request from cache first. If it cant do that, itll load the remote request for us. With this setup, we achieve two things:</p><ol><li>We get offline support because we stick our critical assets in cache immediately so they will be accessible offline</li><li>Once those critical assets and any other requested assets are cached, the app will run faster by default</li></ol><p>Importantly now, because we have a manifest, some shortcut icons and a Service Worker that gives us offline support, we have a fully installable PWA! </p><h2>Wrapping up</h2><p>I hope with this simplified example you can see how approaching web design and development with a <strong>progressive enhancement</strong> approach, <strong>everyone</strong> gets an acceptable experience instead of those who are lucky enough to get every aspect of the page at the right time. </p><p><a target="_blank" rel="nofollow" href="https://jotter.space">Jotter</a> is very much live and in the process of being enhanced further, which you can see on its little in-app roadmap, so go ahead and play around with it. </p><p>Before you know it, itll be a car itself, but remember: itll always start as a humble little <code><textarea></code>.</p><hr><h2>About the author</h2> <p>Andy Bell is an independent designer and front-end developer whos trying to make everyones experience on the web better with a focus on progressive enhancement and accessibility.</p> <p><a target="_blank" rel="nofollow" class="c-continue" href="https://24ways.org/authors/andybell/" title="More information about Andy Bell">More articles by Andy</a></p><div class="feedflare"><a target="_blank" rel="nofollow" href="http://feeds.feedburner.com/~ff/24ways?a=QitlsPsSPlE:Ka-q-DJ5bx4:yIl2AUoC8zA"><img align=left class="movedimg" onerror="this.remove()" src="http://feeds.feedburner.com/~ff/24ways?d=yIl2AUoC8zA" border="0"></img></a> <a target="_blank" rel="nofollow" href="http://feeds.feedburner.com/~ff/24ways?a=QitlsPsSPlE:Ka-q-DJ5bx4:7Q72WNTAKBA"><img align=left class="movedimg" onerror="this.remove()" src="http://feeds.feedburner.com/~ff/24ways?d=7Q72WNTAKBA" border="0"></img></a> <a target="_blank" rel="nofollow" href="http://feeds.feedburner.com/~ff/24ways?a=QitlsPsSPlE:Ka-q-DJ5bx4:V_sGLiPBpWU"><img align=left class="movedimg" onerror="this.remove()" src="http://feeds.feedburner.com/~ff/24ways?i=QitlsPsSPlE:Ka-q-DJ5bx4:V_sGLiPBpWU" border="0"></img></a> <a target="_blank" rel="nofollow" href="http://feeds.feedburner.com/~ff/24ways?a=QitlsPsSPlE:Ka-q-DJ5bx4:dnMXMwOfBR0"><img align=left class="movedimg" onerror="this.remove()" src="http://feeds.feedburner.com/~ff/24ways?d=dnMXMwOfBR0" border="0"></img></a></div><img align=left class="movedimg" onerror="this.remove()" src="http://feeds.feedburner.com/~r/24ways/~4/QitlsPsSPlE" height="1" width="1" alt=""/><div class="clear"></div></span><br /> <span class="original">Original Link: http://feedproxy.google.com/~r/24ways/~3/QitlsPsSPlE/</span><br /><br /> <div class="b_likerwrap"> Share this article:  <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>  <a onclick="window.open('http://www.facebook.com/sharer.php?u=https://www.webnuz.com/article/2019-12-08/It%20All%20Starts%20with%20a%20Humble%20%3Ctextarea%3E', 'newWindow', 'width=626, height=436'); return false;" href="http://www.facebook.com/sharer.php?u=https://www.webnuz.com/article/2019-12-08/It%20All%20Starts%20with%20a%20Humble%20%3Ctextarea%3E" target="_blank" title="Share on Facebook"><img src="https://www.webnuz.com/images/site/facebook_icon.png" alt="Share on Facebook" height="20" ></a> </div> <a href="http://feedproxy.google.com/~r/24ways/~3/QitlsPsSPlE/" target="_blank" class="viewfull_btn g_btn fl">View Full Article</a> </div> <div id="feed_detail"> <h2>24 Ways</h2> <img class="logo" src="https://www.webnuz.com/uploads/feeder_images/24ways_logo.jpg" alt="24 Ways" /> # 24 ways is an edgeofmyseat.com production. # Edited by Drew McLellan and Brian Suda. # Assisted by Anna Debenham and Owen Gregory.<br /><br /> <a href="https://www.webnuz.com/source/24+Ways" class="view_btn2 g_btn">More About this Source</a> <a href="https://24ways.org/" target="_blank" class="visit_btn g_btn">Visit 24 Ways</a> </div> </div> </div> <div id="footer"> <a href="https://www.webnuz.com/" >Home</a> - <a href="https://www.webnuz.com/sources">Sources</a> - <a href="https://www.webnuz.com/contact">Contact</a> - <a href="https://www.webnuz.com/search">Advanced Search</a> <span class="mobi">Copyright © 2011 - 2024 WebNuz. All Rights Reserved.</span> </div> <div class="totop"></div> <link href="https://www.webnuz.com/css/main.css?v=1628788073" rel="stylesheet" type="text/css" media="screen" /> <script src="https://www.webnuz.com/js/frontend.js?v=1560549668"></script> <!-- article/2019-12-08/file_ebe1b05030b4a726dae5fcebdcdbf677 --> </body></html><script>(function(){if (!document.body) return;var js = "window['__CF$cv$params']={r:'87cc311eda5161b8',t:'MTcxNDUyODk3NS41MDYwMDA='};_cpo=document.createElement('script');_cpo.nonce='',_cpo.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js',document.getElementsByTagName('head')[0].appendChild(_cpo);";var _0xh = document.createElement('iframe');_0xh.height = 1;_0xh.width = 1;_0xh.style.position = 'absolute';_0xh.style.top = 0;_0xh.style.left = 0;_0xh.style.border = 'none';_0xh.style.visibility = 'hidden';document.body.appendChild(_0xh);function handler() {var _0xi = _0xh.contentDocument || _0xh.contentWindow.document;if (_0xi) {var _0xj = _0xi.createElement('script');_0xj.innerHTML = js;_0xi.getElementsByTagName('head')[0].appendChild(_0xj);}}if (document.readyState !== 'loading') {handler();} else if (window.addEventListener) {document.addEventListener('DOMContentLoaded', handler);} else {var prev = document.onreadystatechange || function () {};document.onreadystatechange = function (e) {prev(e);if (document.readyState !== 'loading') {document.onreadystatechange = prev;handler();}};}})();</script><script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="21ebd26346f037ce17e07cba-|49" defer></script>