Is this you? As a journalist, you can create a free Muck Rack account to customize your profile, list your contact preferences, and upload a portfolio of your best work.
Claim your profile
Articles by Stefan Judis
There's a great runbook to successfully manage big projects!
Signup here for the newsletter to get the weekly digest right into your inbox. Find the 9 highlighted links of weeklyfoo #77: by Ben Kuhn An attempt to describe my playbook for when Iβm being intense about project management. π Read it!, projects, engineering by thymer.com An important requirement to ensure you can fully access your data in cloud apps forever is making the backend sync server available for local self-hosting. That's what EJECTABLE apps are about.
Creating Animated Accordions with the Details Element and Modern CSS
Accordions are everywhere these days. GitHub has them on their home page right now. Figma ships them, too. I've implemented so many custom accordions that I can't count them. But I must say, today’s accordions are pretty fancy. Here's what you'll find on github.com. The accordion opens and closes with a good-looking slide animation, and when you toggle the entries, the image on the right column reflects the currently open entry. How does this work?
Creating Animated Accordions with the Details Element and Modern CSS
Accordions are everywhere these days. GitHub has them on their home page right now. Figma ships them, too. I've implemented so many custom accordions that I can't count them. But I must say, today’s accordions are pretty fancy. Here's what you'll find on github.com. The accordion opens and closes with a good-looking slide animation, and when you toggle the entries, the image on the right column reflects the currently open entry. How does this work?
Replace your JavaScript Animation Library with View Transitions
I've always wanted the web to win, full stop. When I compared the web experience to mobile apps, however, it always felt like the web was losing. After all these years, the web still feels like a collection of documents linked without delight or an excellent user experience.
Replace your JavaScript Animation Library with View Transitions
I've always wanted the web to win, full stop. When I compared the web experience to mobile apps, however, it always felt like the web was losing. After all these years, the web still feels like a collection of documents linked without delight or an excellent user experience.
Forms without an accessible name are not exposed as ARIA landmarks
Suppose you want to be a good web citizen; you use semantic and accessible HTML. Elements "leading places" are a elements, your navigation lives in a nav element, buttons are ... well ... buttons, and your form controls are surrounded by a good old form. Using the correct elements gives your HTML meaning. Semantic markup helps machines understand what they're dealing with. Googlebot slurping in your site will understand the important sections of your articles because it finds their headings.
A new method to validate URLs in JavaScript (2023 edition)
Published at Updated at Reading time 2min 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, there's a new method in town â URL.canParse()! URL.canParse('https://www.stefanjudis.com'); URL.canParse('www.stefanjudis.com'); Hallelujah! URL.canParse() is a quick way to figure out if a string is a valid URL.
Why I don't need to clean up my desktop and downloads folder in macOS
I saw an interesting discussion on Twitter today. People were talking about messy desktops and the always full Downloads folder on macOS. These two directories are usually full of two different file types: random internet downloads and lots of screenshots. Let me tell you a secret! I didn't need to clean up ~/Downloads or ~/Desktop for a year now because I changed a few macOS settings. There are two tricks to get rid of the problem of too many files on your hard drive.
How to disable Google sign-in prompts on other sites
Suppose you're using Google Services like Gmail; you can log into other services with Google Sign-In. That's great if you're logged in all the time and don't mind Google watching every one of your moves. If you're using Gmail and Chrome, privacy's a lost cause anyways, but let's not get into this topic. Now, even though I use Gmail, I prefer to sign in with Email/Password combinations and let my password manager do its magic.
Playwright, a Time-Saving End-to-End Testing Framework
Playwright, a Time-Saving End-to-End Testing Framework contributed, Frontend Development / Security / Software Development UIs should be monitored with the same care as the APIs. Checkly's Stefan Judis explains how Microsoft's open source Playwright gets the job done. How confident are you that your sites are up and running right now? I’m fairly sure my projects are up, but I always face this hidden fear of production issues that I just don’t know about yet. Because things break. Unnoticed.
Playwright: A Modern, Open Source Approach to End-To-End Testing
I was excited when I started writing my first end-to-end tests years ago. The idea was promising; create an automated test suite that spins up a browser and mimics your user’s behavior. Test your website end-to-end. Frontend, backend, your database—you name it. All these automated tests would cover everything! Unfortunately, it wasn’t all roses and sunshine. The implementation was more complicated than expected and the results were not as stable as I had hoped.
A look at the dialog element's super powers
A long time ago in 2014, the dialog element landed in Chromium 37. The idea behind the HTML element was to make it easier to build modals, dialogs and popups. The specification defines the element as follows: The dialog element represents a part of an application that a user interacts with to perform a task, for example a dialog box, inspector, or window.
Highlights of the Web Almanac 2021
Once a year the folks behind HTTP Archive release the Web Almanac. The Web Almanac is a comprehensive report on the state of the web, backed by real data and trusted web experts. The 2021 edition is comprised of 24 chapters spanning aspects of page content, user experience, publishing, and distribution. It's a very interesting (and also massive!) read written by very smart people. I highly recommend checking it out yourself. I learned quite a bit with the 2021 edition.
New in CSS: relative colors
Do you remember the good old Sass days? Using Sass, you could manipulate colors with helper functions such as darken or lighten. This wasn't possible in pure CSS, but now it's on its way! Jim Nielsen's post Dynamic Color Manipulation with CSS Relative Colors explains how the new relative color syntax enables flexible color manipulations. Relative CSS colors are super new and only available in Safari Tech Preview (and even in Tech Preview, you have to toggle a development flag).
Can we have custom media queries, please?
Can we have custom media queries, please? Published at Aug 08 2021 Updated at Aug 25 2021 Reading time 2min This post is a note that includes my thoughts about something I found online. Check it out yourself! Related Topics Related Articles
Automatic hyphenation depends on the defined document language
This post is part of my Today I learned series in which I share all my learnings regarding web development. The lang HTML attribute (e.g. lang="en") is essential for creating accessible websites. Without it, browsers and assistive technology can only guess the website's language leading to a poor user experience. And while I was aware that the attribute is important, I didn't know that it also affects how browsers deal with long words and hyphenation.
Smashing Podcast Episode 39 With Addy Osmani: Image Optimization — Smashing Magazine
About The Author Drew is a Staff Engineer specialising in Frontend at Snyk, as well as being a co-founder of Notist and the small content management system Perch. Prior to this, … More about Drew ↬ In this episode of the Smashing Podcast, we’re talking about image optimization. What steps should we follow for performant images in 2021? We talk to expert Addy Osmani to find out. In today’s episode of the Smashing Podcast, we’re talking about image optimization.
CSS defines color values that follow system preferences
This post is part of my Today I learned series in which I share all my learnings regarding web development. I learned something exciting from Jim Nielsen today. Jim shared that CSS defines system color values that follow the system color preferences (light and dark mode). If you want to learn more about the nitty-gritty details, read his post or have a look at the CSS Color Module Level 4 specification.
A custom "dev" command with auto-completion
I went into the rabbit hole of writing shell scripting today. 🙈 The goal: saving keystrokes and manually ran commands when starting to work on a project. Here's the result. 👇 The video above shows a custom dev command that: navigates into a project runs npm run dev opens VS Code The exciting part is that it supports auto-completion to pass paths to projects with a working npm run dev command quickly.
Should DevTools teach the CSS cascade?
The CSS cascade and the closely related topic of CSS selector specificity are often misunderstood in the web development community. Unfortunately, my impression is that many developers never learned how CSS really works. Trending solutions such as "CSS-in-JS" and Tailwind are definitely not helping with the overall understanding of this core web technology. The missing knowledge brings up the following questions: Will it become less critical to know CSS in the future? I don't know, maybe one day...
How to style and define the color of radio and checkbox inputs
How to style and define the color of radio and checkbox inputs While reading the Chrome 91 DevTools release notes, I discovered that hopefully soon, we'll be able to define the highlight color or radios and checkboxes using the CSS property. It allows to match form controls with the website's style and colors. is available in Chrome 91+ and (!) you have to turn on experimental web platform features to use the CSS property. The result looks like the following (example on CodePen).
HTML defines a ping attribute on anchor elements (links)
This post is part of my Today I learned series in which I share all my learnings regarding web development. A PR on the MDN compatibility data repository caught my eye today. The pull request's purpose was to update the ping attribute support for Safari.
The output HTML element is an aria-live region
Published at Updated at Reading time 3min This post is part of my Today I learned series in which I share all my web development learnings. Ε ime Vidas' Web Platform News is one of my favourite resources for web development updates. Ε ime covers a wide range of topics all about web technology. I'm a big fan of the bonus content he sends out when you're becoming a supporter.
How to display language-specific quotes in CSS
This post is part of my Today I learned series in which I share all my learnings regarding web development. Will Boyd's excellent article Diving into the ::before and ::after Pseudo-Elements includes a nifty detail about CSS and quotes that was complete news to me. It's a great read, and you should check it out. If you're maintaining a multi-lingual site that includes quotes in different languages, you might use the following HTML.
SVGs filters can be inlined in CSS
This post is part of my Today I learned series in which I share all my learnings regarding web development. The CSS filter property provides a way to apply graphical effects on HTML elements. These effects go from blur to grayscale handling but can also include advanced filters using SVG. CSS filters are cross-browser supported and ready to use. If you haven't played around with them, you should give them a try! Let's look at the CSS filter property, or .
A picture element to load correctly resized webp images in HTML
tl;dr – I have trouble remembering (and finding) the complete HTML snippet to load responsive webp images. . Loading images in the best sizes and formats was always complicated. With the Avif image format around the corner, there is one more format to consider, and shipping images is not getting any easier. Developers have to choose between traditional image formats like png and jpeg, the almost mainstream webp format, the new avif image format, and many others.
Say goodbye to resource-caching across sites and domains
When I started doing web development, we all loaded jQuery from the official global jQuery CDN. The idea was straightforward: if everybody loads the same jQuery script file (cdn.jquery.com/jquery.latest.js – or whatever URL it was back then), then the script file would be cached by the browsers, and other sites requesting the same script would benefit from the speedup of already cached resources.
How to tell browsers that your site supports color-schemes
User preferences and settings play an essential role in how websites look in 2020. To name two examples: well-made websites look great on different devices and handle various font-size settings with ease. Over the past few years, a new user preference made it into the group of things "that change how a website looks" – yes, I'm talking about color themes. "How to implement dark mode on a website?" was one of the most important topics in 2019. (yes...
HTTP headers for the responsible developer
This article is a written version of the talk “HTTP headers for the responsible developer”. You can check the slides or the recording. Being online is the default state for many people these days. We all spend our time shopping, chatting, reading articles, and looking for information like directions. The web connects us with the whole world, but most certainly the web connects people.
Gradient border without pseudo elements
About External Resources You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself. If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying. You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it.
ES6 modules support lands in browsers: is it time to rethink bundling?
The usual way to build web applications is to include one single bundle that is produced using Browserify, Rollup or Webpack (or any other tool out there). A classic website that's not a SPA (single page application) consists of server-side generated HTML, which then includes a single JavaScript bundle. The combined file includes three JavaScript files bundled with Webpack. These files make use of ES6 modules: The result of this app will be a "Hello world" telling us that all files are loaded.
How My API-Driven Website Helps Me Travel The World – Smashing Magazine
Recently, I decided to rebuild my personal website, because it was six years old and looked — politely speaking — a little bit “outdated.” The goal was to include some information about myself, a blog area, a list of my recent side projects, and upcoming events. As I do client work from time to time, there was one thing I didn’t want to deal with — databases! Previously, I built WordPress sites for everyone who wanted me to.
Being a Dev Dad
I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes how I preserve a work/life balance, especially with kids. I thought I'd share my story of initial frustration to the bliss of family life I experience today. I can tell you this -- I started off being a "dev dad" all wrong.
Git Hook - npm install if package.json is Modified
Most of the projects I work on these days contain a frequently-modified package.json file to manage dependencies. You would think by know I'd be used seeing the package.json file when I did a git pull and it would trigger something in my head to execute npm install to ensure I had the latest dependencies installed but I somehow continue to forget to do so. Instead I see npm start result in errors which leads to facepalm after facepalm. It's probably time to automate this task.
A Pen by Stefan Judis
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself. If the stylesheet you link to has the file extension of a preprocessor, we'll attempt to process it before applying. You can also link to another Pen here, and we'll pull the CSS from that Pen and include it.
Show More
loading
Actions
Is this you?
As a journalist, you can create a free Muck Rack account to customize your profile, list your contact preferences, and upload a portfolio of your best work.Get in touch with Stefan
Contact Stefan, search articles and posts on X, monitor coverage, and track replies from one place.
Learn more about Muck Rack