Is performance all that matters?

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 (@sarah_edo) June 27, 2020 The article reminds us that we’ve become so focused on

Using PageSpeed Insights during development

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 Insights 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 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. npm i -g psi Once you publish your site to staging or production you can use the

Working with OpenType Features on the web

Warning 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.com or MDN 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.

Passing flags and arguments to Gulp

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 documentation. 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 npm install -D gulp gulp-if \ gulp-uglify yargs Then we requite the packages. We’re not using modules for this example. const gulp = require(‘gulp’); const gulpif = require(‘gulp-if’); const uglify = require(‘gulp-uglify’); const args = require(‘yargs’).argv; We then set

Automating WordPress Translations

One of the strong points of WordPress is that it’s easy to translate the tool itself. As discussed in 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. /*! 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 if ($req) echo (‘(required)’); You’d have to change it