Skip to main content
Fresh 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”
Article

A Dynamically-Sized Sticky Sidebar with HTML and CSS

Creating page content that sticks to the viewport as you scroll, something like a jump-to-anchor menu or section headings, has never been easier. Throw a position: sticky into your CSS ruleset, set the directional offset (e.g. top: 0) and you’re ready to impress your teammates with minimal effort. Check out this CSS-Tricks article to see some real fancy sticky positioning use cases.

But sticky positioning can get a bit tricky, particularly when it comes to height and the dangerous … Read article “A Dynamically-Sized Sticky Sidebar with HTML and CSS”

Video

#198: About the Position Property

  • static: the default
  • relative: allows you to nudge around with top/right/bottom/left, making z-index work, gives you a positioning context
  • absolute: top/right/bottom/left moves the element to that exact position, otherwise the same as relative
  • fixed: like absolute, but scrolling the page doesn’t move the element
  • sticky: like fixed, but it doesn’t become fixed until the page is scrolled past your set
Read article “#198: About the Position Property”
Article

console.log({ myVariable });

I think this might be my most popular tweet of all time, but I’m not sure how to verify that these days. I’ll restate this neat little trick here because blogging is cool and fun.

I used to do this a lot while debugging JavaScript:

console.log("myVariable: ", myVariable);

But now I do this because it’s just easier to type quickly:

console.log({ myVariable });
Read article “console.log({ myVariable });”
Sponsored Article

mediastack

Have you ever had the idea for a website or new app that involved showing news content? You don’t have to create content yourself to have the right to build an innovative news reading experience. I remember when Flipboard came out. They didn’t (and still don’t) actually produce content — they just made a fantastic experience for reading it, and did very well with that.

Where do you get that news content? mediastack. You’re going to need a great … Read article “mediastack”

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