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 Wakamaifonduehttps://wakamaifondue.com/ to see what the font has to offer. The screenshots below use Recursivehttps://www.recursive.design/, 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...
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...
CSS Font Loading Module Level 3https://drafts.csswg.org/css-font-loading/ presents a Javascript API for loading fonts in a similar way to how Fontface Observerhttps://fontfaceobserver.com/ 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...
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 phone.@DasSurma and I pulled a little data to try to visualise why that might be both true and not...
I've looked at CSS Paged Media in the past. IMO it's an awesome technology that allows you to create stunning end products from your HTML, CSS, and, optionally Javascript. The layouts for the printed material can be very simple, or they can be as complex as the book CSS Secretshttps://www.oreilly.com/library/view/css-secrets/9781449372736/ by Lea Verouhttps://twitter.com/LeaVerou/. I've worked with a two different CSS Paged Media processors: PrinceXMLhttps://www.princexml.com/ and Antenna Househttps://www.antennahouse.com/. They are both good products but they require a license purchase before you can use their full capabilities. The new products I want to review are: PDFreactorhttps://www.pdfreactor.com/ Weasyprinthttps://weasyprint.org/ typeset.shhttps://typeset.sh/en When I discuss individual...
I love Homebrew, I really do. But some of the limitations of the system, while understandable from a maintenance point of view, can be really frustrating. In How to Create and Maintain a Taphttps://docs.brew.sh/How-to-Create-and-Maintain-a-Tap the Homebrew team shows how to create a tap and how to add formulae and casks to it. At first, I thought it would be easy; just use brew tap-new to create the custom tap, create the corresponding repository, create the formulas that I want to use, and push them to the repo. But it's not that easy. The post will discuss how to create a...
I've always wanted to do Optical Character Recognition OCR in Node.js but the alternatives always seemed too complicated for simple command line and browser use. Recently I came accross Tesseract.jshttps://tesseract.projectnaptha.com/, a Javascript port of the Tesseract C++ libraryhttps://github.com/tesseract-ocr/tesseract. Tesseract any version will take an image as input and output any text that it finds as part of the image. This post presents an example of how to use Tesseract.js to do OCR. The first step is to install Tesseract.js. bash npm install tesseract.js Next, we need to import the packages we need. There are packages that are native to Node...
There are times when we want to create a hash from either a string or an existing file. This has multiple uses. Some that come to mind are: - Validate the file has not changed. As long as the file remains the same the hash will remain the same too - Use it as a unique identifier for a file by combining the hash with the file name This is different than creating a UUID with Node. The UUID is random and is not tied to the file. The hash is tied to the file and will produce the same...
UUIDs Universally Unique IDentifier are also known as GUIDs Globally Unique IDentifier. A UUID is 128 bits long and can guarantee uniqueness across space and time. UUIDs are defined in RFC 4122https://www.ietf.org/rfc/rfc4122.txt. This post will work in two ways of generating UUID V4 strings: Using the UUID package and the randomUUID method of the native Node Crypto package. The native way Since Node 15.6.0, Node's cryptohttps://nodejs.org/api/crypto.html module provides a method for generating v4 UUIDs. We first import the method from the crypto module. js import { randomUUID } from 'crypto'; We then call the method to generate a UUID using...
It is easy to think of Local by Flywheelhttps://localwp.com/ as just a way to run a WordPress site locally. It is that and it is also much more than that. Review: What is Local by Flywheel? Local by Flywheel Local is a WordPress-specific local development environment. It provides several features that make development easier and faster. Some of these features include: Multiple hosting options Ngnix and Apache servers Multiple versions of PHP 5.6, 7.3, 7.4, and 8.0 and MySQL 5.7 and 8.0 The ability to swap between versions of PHP and MySQL The ability to switch between Nginx and Apache...
