Data attributes
Semantic HTML has an extensibility mechanism that allows adding extra data on elements using the data-* syntax. This replaces older hacks such as non-standard attributes, or extra properties on...
Is the great divide (still) a thing?
Who gets the job? In 2019, Chris Coyier wrote The Great Divide where he discusses the differences between different types of front end developers. This post will explore the great divide: what is it,...
Do we need people in charge of open source projects?
In episode 629 of Shoptalk Dave and Chris had an interesting discussion about Design ain’t a democracy an article by Robin Rendle, published in July 2024 and Miriam Suzanne's We don’t need a boss, we...
Installing manual dependecies in Homebrew
In macOS we have a few disadvantages when it comes to software version management. The good thing is that macOS developer tools do come with versions of Python and other software bundled as part of...
Managing CSS support in Javascript
Javascript has access to the conditional CSS tools that we have to work when working directly with CSS. This post will cover matchMedia (script support for media queries) and CSS.Supports...
Using Page Visibility
The PageVisibility API lets your application know when a page is visible to the user. While this information may seem irrelevant it enables the creation of Web pages that behave differently when they...
When to deploy a feature in production
What browsers should we support? This is an interesting question: What browsers should we support? This is a deceptively simple question to ask and even harder to answer. This post will try to address...
Placing items in grids
Working with grids on web content can be as simple or as complex as you want it to be. This post will cover different ways to place content on a grid and what would you use them for. The idea is to...
Simplifying dark theme creation with light-dark()
We can control the color schemes for light and dark modes through CSS using the prefers-color-scheme media query. These media queries will match the system's color scheme and will allow us to select...
Animating display none and height auto
New properties and functions will enable you to animate properties that, until now, were not animatable. We'll look at the following properties: transition-behavior calc-size() @starting-style used...