A declarative web?
Jeremy Keith recently published Declarative design on his blog. The premise of the post is that there are two divergent ways to think about web design and building web content, encapsulated by these...
Template Literals
Among the large number of new features in ES6/ES2015 are Template Literals/Strings. These are backtick "`" enclosed expressions that allow for multiline expressions and string interpolations...
Playing with CSS Selectors
CSS has evolved significantly over the last few years. Some of these changes deal with a set of selectors known as the functional pseudo-classes. The :not() pseudo-class has been around for a while...
Disable Javascript
I am not going to rehash the "people don't disable Javascript" debate. Most of the time Javascript is enabled and everything is good. However, having Javascript enabled doesn't mean that...
Evergreen may not mean what you think it does
Evergreen browsers are those that update themselves automatically, or very close to it, without user intervention. This is particularly useful when it comes to new features. We don't have to wait for...
Scripting Support Media Query
I know that it's unlikely people will disable Javascript on their browsers, but it is not impossible. We can notify the user of the lack of Javascript using the scripting media query. This example...
Revisiting Web Components (2024 edition)
I've written about web components a lot over the years but not recently. I think it's time to take a look at where we're at, and the newer technologies that have emerged under the web components...
Select an element which doesn't descend from another in CSS
There may be times when we may want to style elements that are not direct descendants of the elements that we want to style. In Select an Element Which Doesn't Descend From Another in CSS Chris...
Use margin-trim to trim the bottom margin on the last child
When writing CSS one of the most annoying and repeating tasks is having to customize the styles for the last element in a list or other repetitive components. I've lost track of how many times I've...
Even more performance measurements
Measuring long tasks in our code # // Test for long tasks test('should capture long tasks on the page', async ({ page }) => { // Function to capture long tasks async function...