WDRL — Edition 302: Digital accessibility, learning modern CSS, UI tricks, serving images the right way, and proper waiting in JavaScript.
31.8.2022
Hey,
Let's build websites for every one of us: »At the end of 2021, approximately 7.8 million severely disabled people were living in Germany. […] The percentage of severely disabled people in the total population in Germany stood at 9.4%.« – Statistisches Bundesamt
When I first stumbled upon...
Inspirational Websites Roundup #41
31.8.2022
A new, handpicked collection of the most creative and inspirational websites
Interpolating Numeric CSS Variables
30.8.2022
We can make variables in CSS pretty easily:
:root {
--scale: 1;
}
And we can declare them on any element:
.thing {
transform: scale(--scale);
}
Even better for an example like this is applying the variable on a user …
Interpolating Numeric CSS Variables originally published...
Monitor Events and Function Calls via Console
29.8.2022
Despite having worked on the very complex Firefox for a number of years, I’ll always love plain old console.log debugging. Logging can provide an audit trail as events happen and text you can share with others. Did you know that chrome provides monitorEvents and monitor so that you can get...
Using Grid Named Areas to Visualize (and Reference) Your Layout
26.8.2022
Whenever we build simple or complex layouts using CSS Grid, we’re usually positioning items with line numbers. Grid layouts contain grid lines that are automatically indexed with positive and negative line numbers (that is unless we explicitly name them). …
Using Grid Named Areas...
Collective #726
25.8.2022
Needle (Beta) * The AI Art Apocalypse * Sidekick * Creative list styling
Not Sure How to WordPress Anymore?
25.8.2022
Neither do I! And that’s probably because there’s a lot happening in WordPress-land. The evolution towards full-site editing (FSE) introduces frequent changes to the way we build themes and plugins, and at such break-neck speed that the documentation itself is …
Not Sure How...
Using CSS Cascade Layers to Manage Custom Styles in a Tailwind Project
24.8.2022
If a utility class only does one thing, chances are you don’t want it to be overridden by any styles coming from elsewhere. One approach is to use !important to be 100% certain the style will be applied, regardless of …
Using CSS Cascade Layers to Manage Custom Styles in a Tailwind Project...
Custom SVG Cursors with an Interactive Emitter Effect
24.8.2022
Several interactive cursor effects made with JavaScript and SVG
Removing jQuery from GOV.UK
23.8.2022
The GOV.UK team recently published “How and why we removed jQuery from GOV.UK“. This was an insightful look at how an organization can assess its tooling and whether something is still the best tool for the job. This …
Removing jQuery from GOV.UK originally published...
CSS Grid and Custom Shapes, Part 2
22.8.2022
Alright, so the last time we checked in, we were using CSS Grid and combining them with CSS clip-path and mask techniques to create grids with fancy shapes.
Here’s just one of the fantastic grids we made together:
CodePen…
CSS Grid and Custom Shapes, Part 2 originally published...
CSS :out-of-range
22.8.2022
One aspect of web development I’ve always loathed was working with forms. Form elements have been traditionally difficult to style due to OS and browser differences, and validation can be a nightmare. Luckily the native HTML APIs added methods for improving the form validation situation. With...