Differential loading is the technique where you load different content for different browsers that support different sets of Javascript features and APIs. html This works awesome with modern browsers that understand type="module" and that will happily ignore nomodule. The problem is that we can't make that assumption safely. Some browsers will download the nomodule script twice and others that will download both scripts, even when they will only execute one of them. Jeremy Wagner's article A Less Risky Differential Serving Patternhttps://jeremy.codes/blog/a-less-risky-differential-serving-pattern/ proposes the following hack to make sure that all browsers will load a single version of the code for...
In working on another idea how to allow users to select their preferred reading configuration on a web page I came across another issue: How do we allow users to save their preferences so they don't have to redo their work every time they visit the content. I remembered an old project that I worked on to test the same hypothesis from a different point of view. Rather than use that project, I've created the full project in Githubhttps://caraya.github.io/localstorage-settings-demo/. I will only highlight details that I think are important. The idea is that after the user changes the settings, the...
Wgethttps://www.gnu.org/software/wget/ is the GNU/FSF alternative to CURLhttps://curl.haxx.se/ used to retrieve files from the network via command line. Getting a single file is easy but trying to get an entire directory it's not so easy. I've used a similar version to this command in the past but it turned into huge downloads that would take forever to complete. I found this version in Guy Rutenberg's sitehttps://www.guyrutenberg.com/2014/05/02/make-offline-mirror-of-a-site-using-wget/ and liked it after I used it to mirror a site. The command is: bash wget --mirror \ --convert-links \ --adjust-extension \ --page-requisites --no-parent http://example.org These are flags we're using: - \--mirror – Mirrors a...
I was browsing through Brad Neuberg's bloghttp://codinginparadise.org/ I came across stretchtext.jshttp://codinginparadise.org/ebooks/html/blog/stretchtext.html and I found it interesting enough to take a deeper look. Stretchtext is a Javascript implementation of a hypertext going back to the work of Ted Nelson in 1967. Taken from Neuberg's article: > Stretchtext consists of ordinary continuous text which can be "stretched", or made longer and more detailed. By pointing at specific areas and pulling the throttle in the "magnify" direction, the reader may obtain greater detail on a specific subject, or area of the text. The text stretches, becoming longer, with replacement phrases, new details, and...
I've spent a lot of time trying to figure out if Prism.js will run inside a worker to highlight syntax on the web page. The answer is sort of. Given the way that Prism uses web workers, it still would not work in AMP pages. You still need to call this snippet of Javascript in the page that needs syntax highlighting. js Prism.highlightAlltrue, function { console.log'Syntax highlight completed'; }; Furthermore, the async functionality of Prism.js is off by default. The Prism.js FAQ explains whyhttps://prismjs.com/faq.htmlwhy-is-asynchronous-highlighting-disabled-by-default: > \...\\Furthermore, using Web Workers is actually slower than synchronously highlighting, due to the overhead of...
I've always loved the work that Andy Clarke has done over the years with art direction on the web. I came across another of his ideas in Inspired Design Decisions For The Web 3 that was part of my Smashing Magazines membership. In it, he talks about how we can make the same basic layout more interesting for our readers without having too many additional libraries. It doesn't have to be boring For ages, we've blamed CSS frameworks for the sameness of our designs. We think that Bootstrap or Foundation are what make our designs bland and repetitive. I haven't...
This post will look at technologies allow us to create fully encapsulated and accessible web content. - Custom Elements allows developers to create specialized elements for the web - Shadow DOM gives us encapsulated styles that won't bleed into the parent document - Templates provide inert chunks of HTML content that we can instantiate after creation - Custom Properties provides a way to create reusable styles that will work through the shadow DOM Reviewing Custom elements The idea behind custom elements is to allow developers to create their valid HTML elements that encapsulate HTML content, CSS styles and Javascript behavior...
When we print web pages we see links as underlined text either black or, if we printed in a color printer, blue or whatever color we made our links. That doesn't help us know what the actual links are. A possible solution is to use generated content for paged media and the :after selector to insert the text of the URL after the link. The code We're saving all the code in this section in a print.css file. Why we're doing this will become clear when we use the styles. The easiest way to start is to tell the browser...
I'm documenting behaviors that I take for granted and then forget just when I need them. The question is How do I generate screenshots of what I'm working on? The answer is It depends How to generate screenshots will depend on what tool you're using. Both Windows and Macintosh systems offer you ways to generate files from screenshots and, a surprise to me, Chrome DevTools will let you do it too Windows 10 Windows 10 gives you two options to capture screenshots. Which one you use will depend on whether you need to keep a file of the screenshot for...
As developers, we are fixated with performance and rightly so. But we also tend to put web performance in a vacuum and not worry how our site's performance got to where it is today. In this post, we'll talk about using Chrome DevTools to measure performance using Lighthouse from the Audits panel. The idea is that, through testing, you'll get actionable items to fix for performance improvement as you start and later you can measure the impact of specific loading strategies and pieces of your content. Warning: Make sure that you run the test in Incognito Mode create a blank...
