In Javascript, the intlhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/GlobalObjects/Intl object provides several locale-aware tools to work with in Javascript. One of those tools is the segmenterhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/GlobalObjects/Intl/Segmenter object. The segmenter object enables locale-aware segmentation from a string with selectable granularity grapheme, word and sentence. a grapheme is a single character, regardless of how many codepoints it takes to display it. "🫵" is one grapheme, so is a space " " Words and sentences are self-explanatory. We first create a segmenter object with two parameters: A valid language code and the granularity that we want to use. For this example, we're using word as the granularity. js...
As I was writing my previous post about Playwright and writing tests I came across an articlehttps://www.checklyhq.com/blog/how-playwright-can-monitor-third-party-resources/ that explained how to run performance measurements inside Playwright tests. Core Web Vitals The example runs against your app's local server and will generate the Largest Contentful Painthttps://web.dev/articles/lcp value using performance observershttps://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver combined with Playwright commands. Because the local server will not act like your regular server there are no network requests the results will be significantly faster than they would be against your production site. You should take this into account when evaluating the tests and, if possible, should also test against...
Several times I've found myself working with fonts where I want to know what's available in the font without using tools like Wakmaifonduehttps://wakamaifondue.com/. Recently, I discovered fontkit.jshttps://github.com/foliojs/fontkit/, a tool that will read and manipulate fonts so I decided to use it in a test script to see what a given font has available to use. This is a node script so it assumes one of two things: - there is a package.json where you've installed fontkit - You've installed fontkit globally The script also imports the argvhttps://nodejs.org/docs/latest/api/process.htmlprocessargv from the built-in process module to capture the full path to the font...
Most of the work I've seen done in the console is limited to console.log. There is a lot more that you can do with the console. There's even a living standard hosted at WHATWG. Most of the time we just use console.log to print something to the DevTools console. And that's enough, but sometimes we can do more. I was surprised to find out that there is a specification for the console APIhttps://console.spec.whatwg.org that shows some amazing things you can do with the console. Caveats: The console specification is an early work that documents existing functionality in browsers I will...
A little bit of background. The W3C chartered the Web Accessibility Initiativehttps://www.w3.org/WAI/ as the central place to gather information, research, best practices, and standards recommendations in W3C talk for accessibility on the web. The best-known resource generated by the WAI is the Web Content Accessibility Guidelines WCAGhttps://www.w3.org/WAI/standards-guidelines/wcag/ recommendation. The current version of WCAG is 2.1https://www.w3.org/TR/WCAG/ with a draft of version 2.2https://www.w3.org/TR/WCAG22/ expected to become a recommendation soon and an earlier draft of version 3https://www.w3.org/TR/wcag3/ as an early working draft. The current version of WCAG provides two guidelines regarding accessibility: > Success Criterion 1.4.3 Contrast Minimum The visual presentation of text...
After looking at format and tech discussed in the Updates to @font-facehttps://publishing-project.rivendellweb.net/updates-to-font-face/ I thought it would be good to look at other aspects of the @font-face at-rule that changed or are new since the last time I looked at. font-weight, font-style, and font-stretch These descriptors will still work with a single value. font-weighthttps://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-weight and font-stretchhttps://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-stretch can take two values to represent the lower and upper boundaries of the variable font range for the descriptor. font-stylehttps://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-style can also use ranges but it's a little more complex than font-weight and font-stretch. The possible values for the descriptor are: normal : Selects the...
@font-face has been around for a while and it works fine for the existing monochrome, one file per style, fonts. CSS Fonts level 4https://w3c.github.io/csswg-drafts/css-fonts/ introduced a new property related to font types tech to the src attribute of @font-face at-rules. I also looked again at the format attribute of the src descriptor; particularly what benefits would we get from using it. We will discuss each of these in turn. format This attribute specifies the font format of the font it is attached to. If the value for format is not supported or invalid, the browser will not download the resource,...
Starting in WordPress 6.1 fonts can be fully defined in theme.json including adding variable fonts to the list of available fonts. The fontFace syntax in the theme.json file is very similar to what you would use when defining a font using the @font-facehttps://developer.mozilla.org/en-US/docs/Web/CSS/@font-face at-rule, as described in the @font-facehttps://developer.mozilla.org/en-US/docs/Web/CSS/@font-face entry in MDNhttps://developer.mozilla.org/en-US/ and explained in this CSS Trickshttps://css-tricks.com/snippets/css/system-font-stack/ article. System Fonts The first example uses fonts that are known to be in the system. These are the default fonts across operating systems and the browser will pick the first font it supports. The font-family attribute contains a list of fonts...
When you start a new site for developing the site has no data and there is no way to see what the theme would look like with content in it. We will discuss three approaches to populating a theme with data to see what it would look like: 1. Cloning the data from your production site 2. Using WordPress Theme Datahttps://github.com/WPTT/theme-test-data 3. Using Gutenberg Test Datahttps://github.com/Automattic/theme-tools/tree/master/gutenberg-test-data Each of these strategies addresses different needs and use cases. Cloning data from your production site The easiest way to get data for your development system is to take the data from your production...
There are times when you don't want Google search to index specific pages on your site. It may be because these are private pages that, for some reason, are not password protected; or the site needs to be available to the client during development and you don't want to put it behind a password. This post will present two ways of blocking Google crawlers from indexing your site: server response headers and client-side meta tags. Using Server Response Headers The easiest way to add the headers is to do so in your server configuration. To disable search engine indexing globally...
