The Publishing Project

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

Google fonts way of serving variable fonts

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 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): <link href=”https://fonts.googleapis.com/css2? family=Roboto+Slab:ital,[email protected],400;0,700; 1,400;1,700&display=swap” rel=”stylesheet”> and the CSS @import

Updating a service worker using Workbox

In my layouts site I use 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

Formating numbers with Javascript

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. const n1 = 199874; const n2 = -199874. console.log(n1.toLocaleString(‘en-US’, { style: ‘currency’, currency: ‘USD’, currencySign: ‘accounting’, })); console.log(n2.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 it