Accessible notifications (#note) 🔗
Sara Soueidan just published a free chapter of her Practical Accessibility course; with no surprise, it's high quality. The chapter is split into two [...]
Stefan Judis Web Development
Posts
How to exclude elements from being shown in Google Search results (#tilPost) 🔗
Let's look at what happens when I google myself. Of course, I know how my site is structured, and I can tell that Google displays my site's title and [...]
How to do math in shell environments (bash, zsh, ...) (#tilPost) 🔗
I was kneedeep into CI/CD scripting, when I hit a wall. You can't just do simple math like adding or subtracting integers in a shell environment? How [...]
Web Weekly #119 (#blogPost) 🔗
Greetings! 👋 Does sticky content harm accessibility? Is it time for a native toggle button on the web? And what makes a good touch target? This week [...]
Web Weekly #118 (#blogPost) 🔗
Guten Tag! Guten Tag! 👋 How can you block AI agents from using your content? Is centering elements in CSS really a problem in 2024? What's in for br [...]
Local link targets must be focusable to prevent accessibility issues (#tilPost) 🔗
You might think that when you bet on the web platform and rely on native HTML features, your website will be completely accessible. Unfortunately, thi [...]
Web Weekly #117 (#blogPost) 🔗
Hello, hello friends! 👋 How can you quickly find out if a web feature is safe to use? Does the definition of the sizes attribute really have to be s [...]
CSS only "scroll-to-top" (#snippet) 🔗
David Darnes shared a nifty tiny trick to build a "scroll to top" component that automatically shows up after you scroll down a little. And thanks to [...]
A web component to make your text sparkle (#blogPost) 🔗
Inspired by Zach Leatherman and the community's recent rediscovery of HTML web components, I sat down to write a quick component to make text sparkle. [...]
Web Weekly #116 (#blogPost) 🔗
Hello, hello Friends! 👋 How does reactivity work in JS frameworks? What's the deal with the oklch() CSS color function? And how can you ship respons [...]
oklch() retains perceived lightness for different hue angles (#tilPost) 🔗
As far as I see, it's time to ditch hsl() and use oklch() for color palettes and design systems. Why's that? For me, it boils down to two reasons. New [...]
Web Weekly #115 (#blogPost) 🔗
Hello, hello Friends! 👋 How does Google do site reliability engineering? Is using relative CSS units (rem) to control spaces like margins and paddin [...]
Web Weekly #114 (#blogPost) 🔗
Hello Hello! Do your React useEffect hooks include race conditions? Have you heard of the perspective() CSS function? Would you use Next.js? This wee [...]
Too small touch targets (#blogPost) 🔗
Here's an interesting UI pattern from GitHub.👇 I'm no big GitHub mobile user, but occasionally, I browse projects while on the go. With the fat finge [...]
JS surprise: Array.every() always returns true for empty arrays (#note) 🔗
JavaScript is always good for a surprise, isn't it? Nicholas C. Zakas published a discovery that made my head spin. Do you know the array method every [...]
Web Weekly #113 (#blogPost) 🔗
Long time no see! Can a regular expression freeze your JavaScript? Are you looking for some inspiration to get started with Chrome's View Transitions [...]
Web Weekly #112 (#blogPost) 🔗
It's been a while, friends! 👋 You might have noticed that the last Web Weekly hit your inbox 35 days ago. It's the longest break since I started Web [...]
How to style element descendants with Tailwind CSS (#tilPost) 🔗
I'm maintaining a project built with Tailwind at work. I'm no daily Tailwinder, but usually, I manage just fine. But recently, a trivial task took me [...]
How to escape CSS selectors in JavaScript (#tilPost) 🔗
Here's a trick question: how would you select the following HTML element in JavaScript? <div id="#">Select me!</div> Oddly, this element's id is a #. [...]
Web Weekly #111 (#blogPost) 🔗
Happy Monday, party people! Should your JS projects always include a build step? Is the dotenv npm package now obsolete? And how could you create adv [...]
A new method to validate URLs in JavaScript (2023 edition) (#blogPost) 🔗
There's news on the URL validation front in JavaScript land! After all these years of cursing JavaScript for not having an easy way to validate a URL, [...]
Conversation closure (#note) 🔗
Chris Coyier wrote about email expectation handling the other day. I took a little time to respond (thanks for the async expectations, email!) and wro [...]
Web Weekly #110 (#blogPost) 🔗
Guten Tag! 👋 What's the most common viewport size? When will native CSS nesting land in browsers? And how could you maximize your future job salary [...]
Web Weekly #109 (#blogPost) 🔗
Guten Tag! 👋 When will we be able to animate the display property? What's CSS @starting-style? And when will the HTML search element hit the baselin [...]
Fancy SVG filters (#blogPost) 🔗
The CSS filter property provides two hands full of handy filters. filter: blur(5px); filter: brightness(0.4); filter: contrast(200%); filter: drop-sha [...]