Archive | Link

RSS feed for this section

Crafting Webfont Fallbacks

There is a great bit in here where Glen uses Font Style Matcher to create some CSS for a fallback font that has font-size, line-height, font-weight, letter-spacing, and word-spacing adjusted so perfectly that when the web font does load, the page hardly shifts at all. Like barely noticeable FOUT. Maybe we’ll call it FOCST (Flash of Carefully Styled Text).

Direct Link to ArticlePermalink


Crafting Webfont Fallbacks is a post from CSS-Tricks

Long Distance

A podcast (turns out to be a 2-parter) from Reply All in which Alex Goldman gets a scam phone call about his iCloud account being compromised. He goes pretty far into investigating it, speaking regularly with the people who run these scams.

Especially resonant for me, as someone who also spoke directly with a hacker who’s goal was doing me harm. I’ve long struggled with thinking rationally about stuff like this.

Direct Link to ArticlePermalink


Long Distance is a post from CSS-Tricks

The Evolution of Trust

Nicky Case’s games are a damn treasure in this world. Most importantly, they are fun and compelling to play. They also make gameplay the vehicle for education on tricky, intricate, and important issues. Issues that would be much harder to learn about by just reading. They are also a masterclass in design: clear calls to action, clear onboarding, meaningful interactions and animations, and good copy.

This latest one is no different.

Direct Link to ArticlePermalink


The Evolution of Trust is a post from CSS-Tricks

Removing that ugly :focus ring (and keeping it too)

David Gilbertson:

Removing the focus outline is like removing the wheelchair ramp from a school because it doesn’t fit in with the aesthetic.

So David shows how you can remove it unless you detect that the user is tabbing, then show it. Essentially you add “user-is-tabbing” class to the body when you detect the tabbing, and use that class to remove the focus styles if it’s not there (plus handle the edge cases).

Direct Link to ArticlePermalink


Removing that ugly :focus ring (and keeping it too) is a post from CSS-Tricks

​The #1 Website for Coding Challenges

Coderbyte is a web application built to help you practice programming and improve your algorithm skills. We offer a collection of coding challenges and web development courses that can help you prepare for an upcoming job interview or general technical assessment. All of our coding challenges can be completed directly in our online editor, and if you need help along the way you can view thousands of user-submitted code solutions as well.

View all Coding Challenges

Direct Link to Article


​The #1 Website for Coding Challenges is a post from CSS-Tricks

“Combine the transparency of a PNG with the compression of a JPG”

JPG doesn’t support alpha transparency. PNGs that do support alpha transparency don’t compress nearly as well as JPG. SVG has masks and clipping paths, which we can use to our advantage here.

  • Drag and drop tool by Shaw to help do the trick. It produces an SVG containing a mask (for the transparency) and the raster graphic put together.
  • It’s like ZorroSVG with more features. There is also some prior art here.
  • You can see how the masking works


“Combine the transparency of a PNG with the compression of a JPG” is a post from CSS-Tricks

CSS Utility Classes and “Separation of Concerns”

Adam Wathan takes us on a journey through the different ways we can approach HTML and CSS. This is a really great read that I bet will resonate with a lot of you, whether or not you agree with where he ends up.

Here’s a particularly interesting bit where he specifically calls out “separation of concerns” as being a straw man:

You either have separation of concerns (good!), or you don’t (bad!).This is not the right way to think about …


CSS Utility Classes and “Separation of Concerns” is a post from CSS-Tricks

Integrate Your Wufoo Forms Everywhere

At its heart, Wufoo is a form builder. If you need any type of form, you can build it super quickly by selecting and customizing the fields you need in Wufoo’s fantastically easy to use form builder. I can hardly imagine a more useful web app for web designers and developers.

But what is a form, at its essence? Just a means to collect data. The important part is what you do with that data. You can do all the …


Integrate Your Wufoo Forms Everywhere is a post from CSS-Tricks

IntersectionObserver comes to Firefox

A great intro by Dan Callahan on why IntersectionObserver is so damn useful:

What do infinite scrolling, lazy loading, and online advertisements all have in common?

They need to know about—and react to—the visibility of elements on a page!

Unfortunately, knowing whether or not an element is visible has traditionally been difficult on the Web. Most solutions listen for scroll and resize events, then use DOM APIs like getBoundingClientRect() to manually calculate where elements are relative to the viewport. This …


IntersectionObserver comes to Firefox is a post from CSS-Tricks