Developers who, like me, like Google Fonts have been frustrated by their not having Variable Fonts available. That has changed in the last few weeks. Google has released an experimental API, available at fonts.googleapis.com/css2. The API has a limited selection of fonts available and the syntax takes a little while to get used to it. Google font developers make the following assertion: This version of the API isn’t completely stable. It’s best for experimental work while we document the new endpoint. Syntax and Limitations The new API announced in this codepenhttps://codepen.io/nlwilliams/full/JjPJewp shows examples of how to use the new API...
Javascript does a lot of things decently enough but one of its biggest drawbacks is that it's single-threaded. All scripts that run on a page or application run in the same execution context. Web Workers provide one way to work around Javascript's single-threaded execution model. The idea is that we have two scripts. According to Surmahttps://dassur.ma/things/when-workers/: > Web Workers, also called “Dedicated Workers”, are JavaScript’s take on threads. JavaScript engines have been built with the assumption that there is a single thread, and consequently there is no concurrent access JavaScript object memory, which absolves the need for any synchronization mechanism....
Based on Andreas Bovens' article Responsive Images: Use Cases and Documented Code Snippets to Get You Startedhttps://dev.opera.com/articles/responsive-/images/ we will look at four use cases for responsive images: - Change image sizes based on responsive design rules the sizes use case - Optimize for high-dpi screens the dpi use case - Serve images in different image formats to browsers that support them the mime use case - Serve different art depending on certain contextual factors the art direction use case We'll look at some example native responsive images and how they apply to these use cases. Viewport Size Based The most...
In working through automating image compression and responsive image generation I wanted to add more areas to the conversation about responsive images without cluttering the post about automation. How should we get our source images? The first thing to consider is what should be the ideal format for our source images. The Gulp task with manipulates the size of the images so it pays to have the largest possible image available to process. It's always better to shrink an image than it is to enlarge it, besides you will compress the images later anyways. There are ways to use Machine...
Since we are unlikely to compress images and less likely to create the individual images necessary to do a good job with responsive images, we have to leverage technologies to do it for us. I use Gulp to build sites so I've incorporated image processing into my development and production pipeline. There are two tasks for working with images in Gulp. I will cover them separately and explain the decisions I've made about them. Install and configure the plugins All these plugins are installed with Node. Like we do in all Node projects we first initialize an empty package.json. The...
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...
