Skip to main content
Fresh Article

#191: Learn by doing: CUBE CSS

Andy Bell joins me to talk through his CSS methodology he calls CUBE CSS. That’s Composition, Utility, Block, and Exception.… Read article “#191: Learn by doing: CUBE CSS”

Link

System UIcons

Article

Don’t Wait! Mock the API

Today we have a loose coupling between the front end and the back end of web applications. They are usually developed by separate teams, and keeping those teams and the technology in sync is not easy. To solve part of this problem, we can “fake” the API server that the back end tech would normally create and develop as if the API or endpoints already exist.… Read article “Don’t Wait! Mock the API”

Link

zerodivs.com

Article

Nailing the Perfect Contrast Between Light Text and a Background Image

Have you ever come across a site where light text is sitting on a light background image? If you have, you’ll know how difficult that is to read. A popular way to avoid that is to use a transparent overlay. But this leads to an important question: Just how transparent should that overlay be? It’s not like we’re always dealing with the same font sizes, weights, and colors, and, of course, different images will result in different contrasts.

Trying … Read article “Nailing the Perfect Contrast Between Light Text and a Background Image”

Article

More Control Over CSS Borders With background-image

You can make a typical CSS border dashed or dotted. For example:

.box {
   border: 1px dashed black;
   border: 3px dotted red;
}

You don’t have all that much control over how big or long the dashes or gaps are. And you certainly can’t give the dashes slants, fading, or animation! You can do those things with some trickery though.… Read article “More Control Over CSS Borders With background-image”

Link

What does 100% mean in CSS?

Article

Every Website is an Essay

Every website that’s made me oooo and aaahhh lately has been of a special kind; they’re written and designed like essays. There’s an argument, a playfulness in the way that they’re not so much selling me something as they are trying to convince me of the thing. They use words and type and color in a way that makes me sit up and listen.

And I think that framing our work in this way lets us web designers explore exciting … Read article “Every Website is an Essay”

Link

font-weight: 300 considered harmful

Tomáš Janoušek:

Many web pages these days set font-weight: 300 in their stylesheet. With DejaVu Sans as my preferred font, this results in very thin and light text that is hard to read, because for some reason the “DejaVu Sans ExtraLight” variant (weight 200) is being used for weights < 360 (in Chrome; in Firefox up to 399). Let’s investigate why this happens and what can be done about it.

Read article “font-weight: 300 considered harmful”
Article

HTML for Subheadings and Headings

Let’s say you have a double heading situation going on. A little one on top of a big one. It comes up, I dunno, a billion times a day, I’d say. What HTML do you go for? Dare I say, it depends? But have you considered all the options? And how those options play out semantically and accessibility-y?

As we do around here sometimes, let’s take a stroll through the options.… Read article “HTML for Subheadings and Headings”

Link

JavaScript Fatigue

Keep browsing in the archives

Monthly Mixup

Article

A CSS Golfing Exercise

Article

A Funny Thing Happened on the Way to Learning JavaScript

Article

Making My Netlify Build Run Sass

Snippet

Strip HTML Tags in JavaScript

Monthly Sponsor
Thanks, Frontend Masters!