Revisiting Gutenberg full site editing
Now that WordPress 5.9 is close to release, we can revisit the Gutenberg full site editing experience since more of it will be baked into core rather than the Gutenberg plugin. I'm not a fan of full...
The web as craft or assembly line (part 2): The soul of the web
The other side of the argument is that we've let the web become boring. We've lost the whimsical designs from the early days. Examples like the Space Jam website, from 1996, show what earlier websites...
The web as craft or assembly line (part 1): Everything easy is hard again
Doing web development used to be simple. All we needed was a text editor and either good knowledge of HTML, CSS, and Javascript or bookmarks on your browser pointing to Eric Meyer’s CSS resources on...
Testing front end with Mocha and Playwright (2022)
I've told myself for a while that I would learn how to write and use tests for front-end code. Most of the code and tutorials I've seen are written for backend code. But using tools like Playwright...
Dealing with third-party libraries
In Do you know where your third parties are going? we discussed part of the problem: How to measure the additional impact these scripts have on our site's performance when they add more scripts that...
Performance Budgets
The idea of a performance budget is to set the performance goals for the site. What is a performance budget? # There are multiple definitions of what's a performance budget. According to Performance...
Basic grid layouts
now that CSS Grid has become better supported in all major browsers, it is time to look at some of the more whimscal layouts that are possible. This post will look at the following areas: Positioning...
Chroma.js. Another color manipulation library
A while back I wrote about color.js a color manipulation library by Lea Verou. Chroma.js is another color manipulation library that allows you to manipulate colors in a natural way without using...
Importing JSON and CSS on Javascript
Two new proposals to import non-Javascript resources in Javascript modules are reaching stage 3 in the TC39 process, meaning that implementations are already available or will be available soon. This...
Color Contrast in CSS
The CSS Color Level 5 specification defines a way to provide contrast between background and foreground colors. The color-contrast() function takes the followng arguments: A color for the...