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...
When working with numbers on Javascript I've most frequently seen toLocaleString as the solution to format numbers. The following example uses US Dollars as the currency and accounting as the currency sign, it will display negative numbers in parenthesis. js const n1 = 199874; const n2 = -199874. console.logn1.toLocaleString'en-US', { style: 'currency', currency: 'USD', currencySign: 'accounting', }; console.logn2.toLocaleString'en-US', { style: 'currency', currency: 'USD', currencySign: 'accounting', }; Sadly if we work with more than a few numbers it gets cumbersome as we have to add the toLocaleString object to the number with all its children. We may be able to shorten...
We have four months or so before Flash goes away and the biggest question after why is it going away? Is what replaces Flash? This is an important issue and not just for those people who are worried about the Flash games they play and what will replace them but also for people who are migrating old e-learning modules from older versions of Captivate and other e-learning tools. So I thought it interesting to take a look and see what HTML5 technologies and APIs would replace some of Flash's functionality. It's by no means a complete list; it's what first...
Git allows developers to forkhttps://docs.github.com/en/github/getting-started-with-github/fork-a-repo and clonehttps://git-scm.com/docs/git-clone repositories. The main difference between the two commands is that when you clone a repository you create an exact copy of the "main" repository, to which you're not likely to have access or permissions to make changes. However, when you fork a repository, you create a copy that you own and you can update and get ready for pull requests. Forking introduces a problem into the equation, do you see? Because forking creates your own copy of the repository, it is no longer updated from the original. Whatever changes you make are exclusive...
