One of the hottest things, when I was working in higher education, was SCORM. It provided a way for courses coded and packaged to the SCORM specification to send data to a Learning Management System for it to be tracked and recorded. Jump to 2010 when Rustici Software began the first research into SCORM 2.0 with the specification reaching a 1.0 release in 2013 and becoming first the TinCanAPI and, eventually, the Experience API xAPI. xAPI is based on Activity Streamshttp://activitystrea.ms/ and its corresponding draft RFChttps://raw.githubusercontent.com/activitystreams/activity-streams-verb-definition/master/activity-streams-verb-definition.txt and provides an education-focused extension to the activity streams specification so, in theory, we...
Inspired by Surma's article When should you be using Web Workers?https://surma.dev/things/when-workers/, I've been looking at ways to use web workershttps://developer.mozilla.org/en-US/docs/Web/API/WebWorkersAPI on my projects and I think I've found a good candidate. I write in Markdown and, until now, have had to rely on the build process to generate HTML files from the Markdown. It works but it requires rebuilding all the files whenever I add new content. The idea is as follows: 1. The page will create a worker 2. The worker will convert the Markdown to HTML and process syntax highlight commands 3. The worker will return the processed...
The CSS Display Module Level 3https://www.w3.org/TR/css-display-3/ has added new ways to tell browsers how we want to layout and display the content on our pages. We still have block, inline, none, and other values for display that have been available since CSS 1.0 back in the 1990s. The new features include a two-value version of the attribute. css .container { / these are equivalent / display: block; display: block flow; } display outside: The outside container value The , the first value in the two-element display declaration, defines the outer displayhttps://www.w3.org/TR/css-display-3/outer-role type, meaning the type of the outer box container....
Plugins like Jetpackhttps://jetpack.com/ don't work at all in development environments that don't use a fully qualified domain name or a domain that uses non-standard local domains like site.local or site.dev, making it impossible to use any of its features unless we use Development Modehttps://jetpack.com/support/development-mode/. To enable development mode we need to define the JETPACKDEVDEBUG in wp-config.php. The code looks something like this: php
I've been looking at Critical Path CSS again as I work trying to improve the performance of this blog. The idea behind Critical Path CSS from now on, just Critical Path is that we inline the CSS needed to render the first screen of content, what's called above the fold borrowing a term from printed media and load the remaining CSS later. I know that inlining CSS or Javascript can negatively affect performance but in this case, reducing the number of HTTP request needed to render and only adding the smallest amount of CSS possible to render above the fold...
Although I've always thought about staging environments as clones of production systems, I understand the need to do things differently in production than in staging or development. This would be no different than using Gulp to only concatenate and minify scripts in production or use the compressed setting when transpiling SASS but until version 5.5 there was no native way to do it. WordPress 5.5 introduced the wp\get\environment\typehttps://make.wordpress.org/core/2020/07/24/new-wpgetenvironmenttype-function-in-wordpress-5-5/ function that allows developers to branch code based on the type of server we're running. First set the WPENVIRONMENTTYPE variable in wp-config.php php define 'WPENVIRONMENTTYPE', 'staging' ; When wpgetenvironmenttype returns development, WordPress...
Using the default encoder and settings, as described in Compressing AVIF images with Gulphttps://publishing-project.rivendellweb.net/compressing-avif-images-with-gulp/, got the task running and produced the result we wanted: AVIF images that were smaller than the source image in either JPG or PNG format. This post will start from there and explore some further considerations on using avifenc to create images for the web. Unlike the previous post, the tasks here will try to mirror the following CLI commands. bash Default AOM encoder avifenc --codec aom \ --min 40 --max 40 \ --jobs 4 \ --speed 10 \ --output squosh3.avif \ /images/squosh.png The first pass...
Now that AVIF support is enabled by default in Chrome stable 85 and Firefox behind a flag we really should look at how to encode images to AVIF as part of a build workflow. In my normal workflow, I use imageminhttps://www.npmjs.com/package/imagemin, gulp-imageminhttps://www.npmjs.com/package/gulp-imagemin, imagemin-mozjpegwww.npmjs.com/package/imagemin-mozjpeg, imagemin-webpwww.npmjs.com/package/imagemin-webp, and, experimentally, imagemin-guetzlihttps://www.npmjs.com/package/imagemin-guetzli. As of right now, there is no Node package to compress AVIF images either direct library manipulation or wrapper for the existing scripts so we're left to explore other options. !Squosh compressing an image to AVIFhttps://res.cloudinary.com/dfh6ihzvj/image/upload/v1599713591/publishing-project.rivendellweb.net/squosh.png Squosh compressing an image to AVIF The first one is to use a tool like Squooshhttps://squoosh.app/ from...
One thing that has struck me over the last few years is our obsession with fast. The faster, the better, right? I've become interested in how do we define fast and whether performance is the only thing that matters? Sarah Drasner wrote this Tweet: I wrote a small article, called "In Defense of a Fussy Website"In it, I talk about sites I love, like @JoshWComeau @devopsjay @cassiecodes @stripe ✨ and also how we might be headed the wrong direction generally for UI/UX.https://t.co/rRaA6mzdNC— Sarah Drasner @sarahedo June 27, 2020 The article reminds us that we've become so focused on delivering the...
Sometimes it's good to have performance data results as we build our projects. It tells us what we need to work on and where we can tweak things to improve performance. PageSpeed Insightshttps://developers.google.com/speed/docs/insights/v5/get-started provides command-line and a website-based tool to measure a site's performance. It combines its own data with information obtained from the CrUX Reporthttps://developers.google.com/web/tools/chrome-user-experience-report. Installing PSI CLI The first version of PSI we will install is the CLI version. We install this globally to make sure we can test from anywhere. bash npm i -g psi Once you publish your site to staging or production you can use...
