It’s no secret that MDN rolled out a new design back in March. It’s gorgeous! And there are some sweet CSS-y gems in it that are fun to look at. One of those gems is how card components handle truncat
Last week, I had a discussion with some web friends about how the abbr element actually sucks for accessibility. The abbr element is supposed to be used to denote an abbreviation or acronym. If you in
This week, we’ve been looking at ways to build vanilla JS libraries based on my newly updated course on the topic . Yesterday, we looked at the revealing module pattern . Today, we’re going to learn a
This month we launched a waitlist for Luro . For simplicity’s sake on our Eleventy -powered site, we felt like Netlify Forms was a slam dunk for getting the waitlist up and running in a couple minutes
As it relates to blogging, I’ve seen encouragement to Just Publish It™️. Matt says just put stuff out there while Chris adds that there is no bar for the quality of a blog post. I agree. I enjoy Matt’
16 July 2022 We’re delighted to launch Pagefind, an open-source tool that adds search to your static websites without hosting any infrastructure, while respecting your users’ bandwidth. At CloudCannon
Focus outlines are a great way to improve accessibility . They are traditionally set with the :focus pseudo class. That still works, but with :focus-visible we have a new way to only show focus styles
Something I like about logical properties is the ability to set margins or padding on just a single axis on an element, while leaving the other alone. Say we have an element on which we’ve set some pa
Minimal Social Markup Post from July 14, 2022, filed under Web Development . Every website and app these days needs so-called “social markup,” metadata for a richer and prettier display in social medi
Points, break. Posted on 19 July 2022 Here’s an interesting question Thomas Semmler asked on Twitter : Hey #CSS & #HTML people - I’m writing something and it turns out that I couldn’t find the term “b
30th May 2022 Code Splitting in Alpine.js I've recently published a library called Async Alpine that adds asynchronous or lazy loading of components to Alpine.js! It can help you write faster, more ef
Back in December 2021, I wrote an article titled Defensive CSS . I used that term because that's really what is it about. I wanted a term that communicates the concept of writing CSS that prevents une
It’s very common to have a somewhere whose contents are the output of a markdown file. This can result in a flat structure of elements whose hierarchy has semantic meaning — the best kind of HTM
When I was thinking about what to do with this site I spent some time looking around the IndieWeb Webring . I’d pick a site and then use the Webring link to randomly move to the next site. You can als
By default, an takes up zero space until the browser loads enough of the image to know its dimensions: When you run the demo, you'll see the immediately. Then, after a few seconds,
A portfolio website is a way to market your skills as a developer. It's like a resume, but 10x better. This article talks about what content should be included in your portfolio. This is the most impo
Yesterday, we looked at what web components are . Today, I wanted to share how to actually create one. Let’s dig in! Today’s article is an excerpt from my new course and ebook on web components with v
Generally, it’s better to avoid opening links in new windows or tabs 20 April 2020 UX Accessibility Design It's bad for usability, because it takes control away from users (for example, it breaks the
I just released a new course and ebook on Web Components with Vanilla JS . ( If you already own my complete set of courses or the expert bundle , this is a free upgrade you’ll already see in your acco
Over the past couple of years, we’ve talked a lot about the carbon footprint of websites. The carbon impact of the web is largely caused by electricity use. The question is: Can we as web professional
Subscribe to my newsletter and never miss my upcoming articles Did you know that websites have carbon footprints? It makes sense if you think about it. Every time you visit a site, you are making a re
Weeknotes – series 06 episode 01 8 July 2022 Weeknotes Made Tech Onboarding My first week at Made Tech is complete… and so far, so good. Most of the week I’ve been in remote onboarding sessions. There
July 5, 2022 ; It’s 2022 and people are still afraid to use and . I understand the layout challenges can be frustrating, but swapping to an ARIA group role will result in a more in
TL;DR If your pages contain many links or elements before the main content, consider adding a link to the very beginning of the page to help keyboard-navigating users jump directly to the content they
There are lots of reasons to shift to more privacy-conscious business and marketing models , but the path can feel daunting. Privacy movements have been around for a long time, but businesses and mark
Wednesday, 29 th June, 2022 < meta name = " generator " content = " {{ eleventy.generator }} " > How to add a generator meta tag to your Eleventy site in nunjucks This single line of code, added to yo
In this call with software engineer Hugo Müller-Downing, I review his blog. We dive into the spacing around his headings, to structure his website better, talk about font sizes for headings, how to st
I’ve been doing the finishing touches on some client work recently and a part of that is making sure we get 100s across the board in Lighthouse. That’s so important to me that I make it a deliverable
Card-style components are pretty much still a thing these days, and there are many ways to make a bunch of identical rectangles look prettier. I’m quite fond of the pop art, or maybe it’s more of a co
Juan Fernandes