Daily Tips Last week, Ryan Carniato, the guy who made SolidJS, wrote an article about how Web Components are not the future. The nicest thing I can say about it is that he’s just completely, utterly wrong. His article really boiled down to “Web Components are hard for me as a library author to…
Juan Fernandes
Several times this year, I’ve answered variations of the following question: Is it strictly necessary for form fields and labels to have for/id association, or is it enough to wrap the around the The answer is — Wrapping is enough in theory, but isn’t quite in practice. What’s the difference? All…
21 September 2024 Removing link underline styles between icons and text Tags: css quick-tip I recently made a little update to my site with a blogroll that includes the linked site’s favicon. I think it’s good to have that icon be clickable, so I wrapped icon and label within a standard link. It…
Daily Tips I love ditching JavaScript for HTML and CSS whenever I can. It’s a core part of the Lean Web Club ethos. In particular, one of my favorite sets of HTML elements are and , which can be used to create a disclosure or expand-and-collapse component with absolutely no JS. But one of the…
Brian LeRoux posted a few thoughts about forms and the idea of a “good form” resonated with me so I dogpiled some of my own thoughts and experiences on it. Here’s a compilation of those ideas. I’m sure this is incomplete and would love to see your list. Good forms work without client JavaScript…
Lately, I’ve been thinking a lot about the debate around auto layout in Figma. On one side, you’ve got designers who say skipping auto layout makes their work faster—they don’t have to get bogged down in the details, and it speeds up their process. On the other hand, some argue that auto layout is…
Daily Tips When I start working with new consulting clients, one of the first things I like to do is an audit of their existing site. I’m primarily looking for performance issues, accessibility issues, and architecture issues. I put them all together into a nice report, and often helps guide a lot…
The Popover API has support across browsers now, and apparently the new way to say that is “landed in Baseline”, albeit as “newly available” rather than “widely available”, which may be an important distinction for you. A popover is very much like a in that you don’t have to worry about where it…
I look at some people’s personal websites and think, “Stupendous! If I ever reach that zenith of personal web design, I will call it quits.” Then I read a post by them later and they say something like, “Gah! I just really don’t like where I’m at with my personal website.” And in my mind I say,…
I’ve written previously about using --patch to interactively stage changes. But did you know that you can use --patch (aka -p) to similar effect with other Git commands? Let’s take a look… Selectively stashing changes git stash is great for temporarily stashing changes that you want to apply later,…
I work a lot with the Laravel framework, which scaffolds much of your initial setup and has conventions for where code should be stored. Starting a brand new Eleventy project from scratch doesn't give you this boilerplate and means you have to make decisions about where everything lives. When adding…
24 August 2024 Time to read: 3 Minutes The Saturday Freelancer is free thanks to ClientManager Kyle Prinsloo Author Do you want to earn more, work less and be a more fulfilled freelancer? No? Then carry on billing hourly 😀 No offence. I know there are plenty of web designers and developers out there…
Daily Tips There’s a section of my yard where not much grows. We tried to get turf grass to grow for years. Wasted a ton of time, money, and resources on seeds, water, fertilizer and so on. But it’s too shady, the soil is too sandy and rocky, and the pines and oaks make it too acidic. So this…
The Secret Inside One Million Checkboxes Teens wrote me a secret. I found them. Aug 28, 2024 A few days into making One Million Checkboxes I thought I’d been hacked. What was that doing in my database? A few hours later I was tearing up, proud of some brilliant teens. But let’s back up. Note - I’m…
After organising Eleventy filters, shortcodes etc I had an idea to tidy the code even more and make it dynamic. I wanted to automatically import any new functions that were added, including new when using files. I wanted to find all the files in the specific folder – each set of filters, functions,…
Consider the following: I am a paragraph. I am also a paragraph. You might hate it, but I'm a paragraph too. Even I am a paragraph. Though I'm a list item as well. I might trick you Guess who? A paragraph! The above HTML-monologue is marked up as follows: You may look at that markup and say “Hey!…
I recently changed my workflow around authoring and publishing my site notes.jim-nielsen.com. Here’s the rundown. Before Pretty standard JAMstack type stuff. All my notes are markdown files in a git repository that live alongside the code generating the website, e.g. I author new notes in iA Writer.…
28th August 2024 If you’re reading these HTML element guides alphabetically, you will have already read about and learned what a sectioning element is. If you’re embracing chaos and reading these element guides in a random order, then I salute you and wish you the best of luck. Like , is a…
From Emil Kowalski’s newsletter (my Feedbin cache for your convenience): I started writing more blog posts recently. I like it because it's different than X. You get a spike of views when you share something on X, but that dies off quickly. If you provide great value with your posts, people will…
As a UX Designer, working efficiently is always a priority—and leveraging the full power of your design tools can help. Figma offers a plethora of keyboard shortcuts that can significantly elevate your workflow and productivity as a designer. We checked in with our new Advanced Figma course creators…
A long time ago, I wrote an article on how to add anchor links to headings in Jekyll. It got a fair amount of interest, and I was pretty pleased with the code I wrote, as it was short but also very readable. Little did I realize how versatile this code was and how relevant it would still be 9 years…
Many people are confronted with the topic of web accessibility for the first time as a result of the EAA (European Accessibility Act) (why this confrontation didn't happen much earlier is another matter...) and are downright afraid of the topic, its complexity and ‘conformity’ per se. And yet I…
11 Comments In response to Ed Green. Ed, Thanks for sharing your thoughts. The question is perfectly capable of being intuited based on the forum in which it is asked. Not every question is asked in a forum where context is clear. Consider the generalist A11y Slack. Or an email from someone you…
Daily Tips On Friday, I wrote about why I love using flat text files instead of a database for my projects. One of the more common questions I got was how I search for things, and the performance impacts of doing so. The truth is… I don’t! The structure of my file system—lots of small, sensibly…
Dieser Text ist auch auf Deutsch verfügbar. One point from Alvaro Montoro's CSS One-Liners post triggered me. Increase the text size body { font-size: 1.25rem; } Let's face reality: browsers' default 16px font size is small. Although that may be a personal opinion based on me getting old 😅 When I…
5 February 2019 The first rule of form design is to only ask for information you actually need to give users a good experience. But sometimes asking for additional information helps the user. Now you could just mark the field as optional. But a lot of the time this is not the best UX. For example,…
Daily Tips Yesterday, we looked at the Web Component lifecycle. While Web Components don’t have data reactivity, one of the lifecycle methods built into the Web Component API can be used to detect when an attribute on your custom element changes. Today, we’re going to learn how to do that. Let’s dig…
15th August 2024 If you’ve never killed a Tamagotchi, you’ve probably never used an element. Like Tamagotchis, elements used to be all the rage, fell out of favor, and obstinately continue to exist. The last time I wielded an element, four things were very different: Nobody browsed the web on…
tfw when you have an idea for a personal website redesign, and then you build it, and then you hate it, and then you have to decide whether to ship it anyway or keep what you have As you can probably guess from the title[1], I decided to keep what I have and throw away what I built. But I felt…
The way I’ve seen great work made isn’t using any sort of design process. It’s skipping steps when we deem them unnecessary. It’s doing them out of order just for the heck of it. It’s backtracking when we’re unsatisfied. It’s changing things after we’ve handed off the design. It’s starting from the…
Daily Tips The more I work with flat files, the more I love them over a traditional database setup. Let’s dig in! What is flat file storage? A flat is just a file you can read and write with a text editor program. It could be .txt or markdown, but it might also be .json or YAML or something else. A…
At the moment my site has 6 different feeds. 5 RSS feeds, an ICS feeds and JSON versions of the 5 RSS feeds. I was asked how they're put together and, well, it's a bit involved. At the core of the implementation is this liquid.js template: It accepts data which are passed through the…
A post from Remy on Mastodon recently got me thinking: Been picking up some of the jsbin archive work. Today, there's currently 62 millions bins stored. The last full copy archive I ran (which downloads the full html, js + css into a single page) holds 42 millions bins, consumes 130gb and the names…
I was reading a great post on Lene Saile’s blog and noticed a cool little design feature on her site that highlights a line of text once you scroll to it. Here’s a video so you can see what I mean: The highlighted line is done with a element in HTML, which feels right. I noticed the class name on…
Daily Tips Yesterday, I wrote about how I ditched my Sass build step for vanilla CSS. As part of that process, I ended up refactoring a lot of code in a way that made it simpler and more efficient. For example, my old Sass files were filled with code like this… Sass supports media query nesting,…
Daily Tips I’m removing all build steps from all of my websites. I’m just so damn sick of having to install NPM scripts and run CLI commands every time I want to update my CSS or JavaScript. Today, I ripped out Sass in favor of 100 percent vanilla CSS. I convert all Sass variables to CSS custom…
Hi All! 🤗 Let’s talk about the first thing many of your visitors will see and thus one of the most important places on any personal website: the home page. “The home” is where you leave a first impression and where people decide whether the website they are looking at – and the services you might be…
Here’s something you might not know about me: I like to play golf. As such, I follow a couple of golf-related brands on social media as a guilty pleasure. The other day an image surfaced on Taylormade’s account which showcases Tommy Fleetwood playing some of their newest irons. When I mindlessly…
7th February 2024 Sometimes a web development client doesn’t know quite what they want. Trying to guess is difficult and delivering a guess is risky. Where they have a vague idea, I offer to set them up with the means to create what they want for themselves—when they work out precisely what that is.…
Cascade Layers are useless* posted on 21.06.2023 *if you don‘t understand the problems they solve and use them in combination with other solutions that tackle the same challenges albeit less elegantly and with the downside of limiting you in taking full advantage of selectors, one of the coolest…
No articles.