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...
The support for these features depends on the browser and not all browsers support all the features discussed below. Check the corresponding entries on caniuse.comhttps://caniuse.com/ or MDNhttps://developer.mozilla.org/ to ensure the feature will work in your target browsers. Using a font's OpenType features on the web is possible but difficult. This post will explore what we can do and how we can do it. We will also explore how to figure out what OpenType features are available in fonts. A brief introduction OpenType fonts provide a set of features to enhance the way fonts appear on the page or screen. If...
There are times when we want to do different things based on whether we're creating code for production or development. This is based on the example from the Gulp documentationhttps://github.com/gulpjs/gulp/blob/master/docs/recipes/pass-arguments-from-cli.md. We'll use this as the base and then see if we can expand it further. As with all Gulp projects we use NPM to install the packages we want to use bash npm install -D gulp gulp-if \ gulp-uglify yargs Then we requite the packages. We're not using modules for this example. js const gulp = require'gulp'; const gulpif = require'gulp-if'; const uglify = require'gulp-uglify'; const args = require'yargs'.argv; We...
One of the strong points of WordPress is that it's easy to translate the tool itself. As discussed in Translating WordPress Themeshttps://publishing-project.rivendellweb.net/translating-wordpress-themes/ the process for translating WordPress elements is as follows: Add a domain to the style.css theme boilerplate to make sure that WordPress doesn't confuse the translations of your content with other plugins, themes, and the core itself. php /! Theme Name: rivendellweb Version: 1.0.0 Text Domain: rivendellweb / Then you need to change the way you write strings for WordPress. Instead of using the raw echo command, like this: php or cancel if you change your mind. The...
One of the biggest pain points of variable fonts was that they were not available in font CDNs like Google Fonts. In October 2019, Google released the new version of its API that supported variable fonts. I wrote about it in Variable Fonts from Google Fontshttps://publishing-project.rivendellweb.net/variable-fonts-from-google-fonts/ The way we import the fonts from Google Fonts changes when working with version 2 of the Google font API. To use Roboto Variable Font, the link we insert in HTML looks like this it should all be in one line, broken down for readability: html and the CSS @import command changes in a...
In my layouts sitehttps://layout-experiments.firebaseapp.com/ I use Workboxhttps://developers.google.com/web/tools/workbox/ as an abstraction to create a service worker. I created the service worker with version 3 of the library and it was good. The problem is that the longer it passes the harder it is to migrate to a later version. This was the case when moving from version 3 to version 5, and, of course, as soon as I decide to upgrade to version 5, the first pre-release versions of version 6 go out into NPM. But leaving aside version 6 for now, I want to look at the new service worker...
