The Publishing Project

Analyzing a font with Wakamaifondue

When I wrote my article reviewing font-variant-* attributes I realized that I needed a way to see what OpenType features the font I’m using supports. My go-to tool is Wakamaifondue to see what the font has to offer. The screenshots below use Recursive, my favorite variable font, run through Wakmaifondue. If you’ve used Wakamaifondue before the screenshots may look a little different. These are from the beta version of the site. I chose it because the UI is better than the original. The site will first ask you to “upload” a font. All the processing is done on the browser

Building a utility toolkit

There are tools that you use in all your projects and you’d rather not have to manually install every time. The project attempts to create a set of those scripts packed as an NPM module, modeled after the kcd-scripts react-scripts and @wordpress/scripts packages, that will make it easier to start new projects by adding the scripts package as a development dependency. The package will contain, at a minimum, the following: ESLint Google Configuration CSS Linting Bundler configuration Webpack Rollup Prettier configuration JS HTML Carlos’s specic tools WP-env Markdown Linting If you have local configurations, they will override the ones provided

Building my own static site generator

In a way, this is the combination of two projects I’ve worked on at different times: A static site generator using Nunjucks A standalone Markup processor After looking at the two projects, I figured out that the next logical step would be to combine them since they both do the same task in similar but slightly different ways. The standalone markup generator uses Node built-in methods to write the components of the template and insert the converted HTML fragment into the output file. The static site generator uses a Gulp build system to run the Markdown conversion using the Marked

JS font loading API

CSS Font Loading Module Level 3 presents a Javascript API for loading fonts in a similar way to how Fontface Observer works. This API allows you to do more things than third-party tools can and it’s set up to interact directly with the browser’s font loading process. In its most basic application, the API will load the font, add it to the list of available fonts can, optionally, add it to the document’s stylesheet and cause it to render right away. This may harm CLS but it’s the only way to get the font to render right away. The FontFace

Remote debugging on mobile

There are times when the mobile version of an app doesn’t work but the actual version does, or we might want to run the app in an actual device to see how it works. We need a way to run the code on a real mobile device so we can debug code issues and see how the app works under real mobile device conditions. People sometimes suggest I should calm down about web performance because the web feels fine on *their* [email protected] and I pulled a little data to try to visualise why that might be both true and not