The gotchas of CSS Nesting CSS & HTML ,13 June 2023, 3 minute read Quickly deploy preview environments to the cloud! AWS, GCP & Azure support. It's OSS - try it now. Ads by EthicalAds I've written bef

19 Comments In response to John P. Green. Yeah, that is part of WordPress and I have not yet found where that lives so I can write a function to override it. Partly because I want to split each element into its own , I want to strip all instances of title, I want to strike & , and I want to strip…

I get sites not having an “RSS” for “Feed” link on their website while actually having an RSS feed. I don’t like it, but I get it. Maybe they picked an off-the-shelf theme that doesn’t have that. Maybe they just forgot. Maybe they even don’t want to. I somehow never considered sites that have an RSS…

You might think that when you bet on the web platform and rely on native HTML features, your website will be completely accessible. Unfortunately, this assumption is wrong in many cases. If you want to learn about more inaccessible HTML features, a recent HTMHell article covered many of them. It's a…

In typography, an orphan or widow is a single word on its own line. It can look particularly unpleasing with headings, and is hard to “plan for” on the web, where people view your site on a wide range

Rachel Andrew shared a snippet of good news for CSS layout on her blog the other day: it’ll soon be possible to vertically centre an element inside a parent without the parent needing to be a flex or

I kicked 2023 off with a pretty big change in my professional life as I transitioned roles at Squiz . Before 2023, I had been a Lead Developer , working on projects for clients in the Services team an

I have used Sass for a very long time within marketing departments, design system teams, and on many solo projects. My standout reasons as expanded upon in this post were: file organization list and m

In my new free course for beginners, Learn JavaScript, , I talk briefly about how powerful the developer console is, and why I think it’s ones of the best features of working in the front end. Today,

A friend showed me something of a design spec they were charged with pulling off: The requirements: … when I click on any of them it expands at the top to full width and the rest of the cards re-arran

Nick Babich 5 min read· Oct 2, 2021 -- When we design web forms, we always try to minimize the chance of users making mistakes. With that intention, we try to prevent users from taking actions that can cause errors. And disabling the submit button is one solution that, from the first glance, seems…

I'm not a font person. I have neither the skills nor the patience to get into font fiddling. But I do notice and appreciate a site with beautiful font combinations. Web fonts also come with challenges

Have you ever wished there is a native way in CSS to make two lines headlines consistent in the number of words per line? As a designer, I spot that a lot when dealing with varying content lengths whi

Interaction to Next Paint (INP) is a performance metric that assesses how well your page handles visitor interactions. Every time a visitor clicks a button or taps the screen, your page should be ready to respond quickly for the best possible page experience. INP tracks how long it takes for your…

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 devices and monitors can display colors that aren

Working on an Image Optimization tutorial for CloudCannon (using Eleventy), I stumbled into what I think is a neat little trick for automated image optimization. There are three kinds of optimization that Eleventy Image can do: Raster to raster: Convert a large raster input image (PNG, JPEG, WebP,…

I just saw Stefan Bohacek made a WordPress plugin for Mastodon embeds . As Dave noted , the for a Mastodon embed is very big, the resources aren’t cached across instances. With Stefan’s plugi

Removing list styles without affecting semantics. posted on 06.11.2023 Some people, I guess primarily developers and not actual users, don’t like the fact that Safari removes list semantics of lists t

I’m a fan of the general advice of use subdomains, particularly for all those little projects we all cook up and want to put somewhere with a domain name we own and control. Subdomains instead of top-level domains, because: They are free. No ongoing cost that you’ll inevitably want to cut off. They…

At the Jamstack ZHUZH, we had a lovely panel discussion on the current and future status of the Jamstack ecosystem. Some stakeholders and detractors have declared the Jamstack “dead,” in part evidenced by the recent shuttering of the Jamstack Discord, the discontinuation of Jamstack Conf (as Netlify…

November 20, 2023 By James O'Halloran TL;DR TinaCMS is now fully open-source and easier to self-host. We also built a Next.js + TinaCMS demo site that can be hosted entirely on Vercel. Earlier this ye

I scheduled this post, isn't that cute? I find I have very little energy to write blog posts during the week, but occasionally I sit down on the weekend to write something and have a few ideas that turn into multiple posts. I'd like to be able to publish posts more often, but realistically I won't…

Day 22 of National Blog Posting Month #NaBloPoMo Earlier this month, Jeremy Keith posed the question: “How green is my server?”. As Jeremy notes, it’s surprisingly hard to get that information! So how do you ensure that you’re hosting your website on a green server? What do we mean by “green”? When…

Yesterday, I wrote about classless vs. class-based CSS design systems . In the article, I noted… There’s a middle ground between classless and class-based design systems. My favorite CSS boilerplates/

Today, I wanted to talk about classless vs. class-based CSS design systems, boilerplates, and frameworks: how they differ, which approach I prefer, and so on. Let’s dig in! What is a classless design

Day 15 of National Blog Posting Month #NaBloPoMo I’m a big fan of lists. I like to think of myself as a fairly organised person. I make lists for a lot of stuff, at work and home, and get a little kic

Blog Slides Newsletter❗ Portfolio My projects Testimonials My links My setup My favorites About me My services Contact me Blog css view transitions 2023-06-26 Transition between pages smoothly with a

I’ve been around digital design software since Macromedia Fireworks was a thing — yes really that long! I can hear Gen Z hurriedly googling now what (and even who) that is. These were also times when we compromised the user’s experience on the web, by designing for digital software like Photoshop,…

You might be used to adding and removing .open and .closed classes on div s and containers to control their state styles. What if we could just write CSS that reflected the state of the DOM, without h

Published: November 29, 2022 Last edit: June 3, 2024 Reading time: 10 min. Eleventy comes with basic defaults already set up for you. That means you don’t have to do anything to start working: the output folder defaults to _site, and Eleventy looks for your source files in the root directory. This…

What's Going On Here: What Is This Your MooseDog Studios created website will be measurably above the crowd. Sales, attention, branding, misson, this is how it's supposed to be done. Who Am I I am an independent web designer, creator and front-end developer, easy to contact and easy to talk with. I…