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...
There is a function-like, dynamic form of import that will allow us to play with imports inside modules and classes and will let us work with them together with async functions and awaiting for async events to complete instead of using then/catch blocks for our promise-based async code. js async => { try { const utilsModuleSpecifier = './utils.js'; const utilsModule = await importutilsModuleSpecifier utilsModule.default; utilsModule.doStuff; } catch { console.log'Dynamic import failed'; } }; Modules either dynamic or static use deferhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/scriptAttributes by default. ES6 modules run in strict modehttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strictmode, even if you don’t write "use strict"; in them. If you're not...
Typescript is good to usee but at times it can be really infuriating to learn how to use it and to use it properly. When you bring in Javascript files to convert to Typescript it will give you many surprises and not all of them are intuitive or easy to decipher. It's important to remember that while Typescript will transpile to Javascript it's a superset of the ECMAScript specification, and you need to learn the differences. These are not all the things I've learned but they are the most important to me. When to add types and when to let...
