Skip to main content
Fresh Article

Tailwind versus BEM

Some really refreshing technological comparison writing from Eric Bailey. Like, ya know, everything in life, we don’t have to hate or love everything. Baby bear thinking, I like to say. There are benefits and drawbacks. Every single bullet point here is well-considered and valid. I really like the first in each section, so I’ll quote those as a taste here:… Read article “Tailwind versus BEM”

Article

Considerations for Making a CSS Framework

Around eight months ago, I started building a framework which would eventually go on to become Halfmoon. I made a post on this very website announcing the launch of the very first version. Halfmoon has been billed as a Bootstrap alternative with a built-in dark mode feature, that is especially good when it comes to building dashboards and tools. All of this still applies to the framework.

However, today I would like to talk about an area of the … Read article “Considerations for Making a CSS Framework”

Article

Rendering Spectrum

Here are the big categories of rendering websites:

  • Client: ship a <div id="root"</div and let a JavaScript template render all of it.
  • Static: pre-render the HTML.
  • Server: let a live server process requests and generate the HTML response.

They are not mutually exclusive.

  • A website could statically pre-render 75% of it’s pages (say, blog posts), but the other 25% have a server respond to (say, forums).
  • A website could statically pre-render all the pages, but have
Read article “Rendering Spectrum”
Article

How to Load Fonts in a Way That Fights FOUT and Makes Lighthouse Happy

A web font workflow is simple, right? Choose a few nice-looking web-ready fonts, get the HTML or CSS code snippet, plop it in the project, and check if they display properly. People do this with Google Fonts a zillion times a day, dropping its <link> tag into the <head>.

Let’s see what Lighthouse has to say about this workflow.… Read article “How to Load Fonts in a Way That Fights FOUT and Makes Lighthouse Happy”

Link

The Core Web Vitals hype train

Article

Creating UI Components in SVG

I’m thoroughly convinced that SVG unlocks a whole entire world of building interfaces on the web. It might seem daunting to learn SVG at first, but you have a spec that was designed to create shapes and yet, still has elements, like text, links, and aria labels available to you. You can accomplish some of the same effects in CSS, but it’s a little more particular to get positioning just right, especially across viewports and for responsive development.… Read article “Creating UI Components in SVG”

Link

Graphery SVG

Article

DRY-ing up styled-components

I like working with styled-components. They allow you write CSS in your JavaScript, keeping your CSS in very close proximity to your JavaScript for a single component. As a front-end developer who loves to dissect a web page and break it down into reusable components, the idea of styled-components brings me joy. The approach is clean and modular and I don’t have to go digging in some gigantic CSS file to see if a class I need already exists. … Read article “DRY-ing up styled-components”

Link

What’s Missing from CSS?

Article

How You Might Build a Modern Day Webring

I’m sure different people picture different things when they think about webrings, so let me clarify what I picture. I see an element on a website that:

  1. Signifies this site is part of a webring
  2. Allows you to move to the next or previous site of the webring
  3. Maybe has other functionality like going to a “random” site or seeing the complete list

But then another major thing:

  1. Site owners don’t have to do much. They just plop (it?) on
Read article “How You Might Build a Modern Day Webring”
Keep browsing in the archives

Monthly Mixup

Article

The Document Outline Dilemma

Article

Creating an SVG Icon System with React

Article

A Complete Guide to Links and Buttons

Article

A Guide for SVG Support in Email

Monthly Sponsor
Thanks, Mailchimp
MailChimp / Google Impression Tracker 'pixel' image tracker