#199: Modern CSS Solutions and the Single Div Project

Howdy folks! This week’s newsletter is jam packed so let’s get straight to it!


Modern CSS Solutions for Old CSS Problems

This is a remarkable website by Stephanie Eckles and has a ton of up-to-date information about all sorts of great stuff, like:

C’mon Stephanie, you’re making us all look bad! ;)


Lynn Fisher’s Single <div> Project is Amazing

Lynn Fisher has been up to some serious tricks making these rather beautiful single div designs with nothing but the power of CSS. They’re extremely cute and impressive to boot:

To get started making things like this, it might be good to check out our guide to making shapes with CSS. I use that piece all the time when I’m working on some neat-o CSS work.


What I wish I knew about React

A little while back, Ire Aderinokun wrote about what she wishes she knew about React before she started:

The way I like to think of it in comparison to Angular is this: Angular is a framework for architecting and building applications. It, for the most part, doesn’t change the way you write your HTML or CSS, but it heavily controls the way you write Javascript.

React, on the other hand, is a library for building user interfaces. It, for the most part, doesn’t change the way you write Javascript that isn’t directly related to your UI, but it heavily controls the way you write HTML and CSS (or the equivalent of it).


Have you heard of the clamp() CSS function?

Kevin Powell made a great video about this very subject that goes into a bunch of depth and gives a few great examples for how to use it.

clamp()effectively allows us to set a max/min value of an element. Jeremy Keith also wrote about it a short bit ago and shared how he used it to make the text responsive in a project. He set a max and min font-size just like this:

.element {
  font-size: clamp(1rem, 0.5rem + 0.666vw, 1.5rem);
}

There are a few edge cases veto consider here, so it’s definitely worth reading the post above to check those first.

On a separate note, one point that Jeremy makes in that article above that caught my eye is where he talks about how many features in Sass have been merged into regular CSS and likewise for jQuery and JavaScript:

I’ve said it before and I’ll say it again, the goal of any good library should be to get so successful as to make itself redundant. That is, the ideas and functionality provided by the tool are so useful and widely adopted that the native technologies—HTML, CSS, and JavaScript—take their cue from those tools.


Here’s the low-down on CSS and line-height

The line-height CSS property can be a fickle and annoying thing. I’ve come tons of cases where it was clear that line-height was the cause of some tiny visual problem and that a lot of folks didn’t really understand how it worked.

Caleb Williams has written all about how to tame line-height, walking us through all the typographic terms in the process.


Proper VoiceOver support coming soon to Firefox on MacOS

This is exciting news! By the end of the year, VoiceOver is expected to be supported in Firefox as long as a host of other improvements.

Yay for accessibility!


Notion-powered websites

Here’s a nifty idea: make a doc in Notion public with the flip of a switch and, with something like Super in tow, you can easily make a website with a custom domain and fonts. Chris writes about all this and he’s written about how he uses Notion personally and professionally in the past.

At my new gig with Sentry, everything is in a Notion doc and it’s sort of like the company database. Need to know something? Head on over to Notion.

I can see how Notion might support this sort of feature eventually by making it even easier to create tiny websites and apps from within Notion itself, and the thought of that is exciting.


Putting the scroll percentage in the title bar

Notice how in the gif above the title changes as the users scrolls? That’s a neat trick by Knut Melvær where he writes about his solution with React.

Chris then riffed on this and made a plain ol’ JavaScript solution.


FeaturePeek

Frontend staging environments on-demand. Shorten feedback loops, increase code quality and push stable releases.

Get started today with a 2-week free trial →


WordPress.com now supports payments… even recurring!

Let’s say you need to build a site that can take money from customers, but on a recurring basis. WordPress.com can do that now, and it’s a fantastic choice because it’s all of the power and control and none of the debt.


[Chris]: I was interviewed in Justin Avery’s RWD Weekly the other week. The term “Responsive Web Design” is just a week away from being 10 years old. It’s certainly the biggest change in web design since then. It’s gone from something that needed a lot of discussion to a a basic requirement for about any project.

Is responsive something that you have to sell in any more or does everyone get it now?

I can say that it seems like responsive design is just an assumption. I think that responsive design was an assumption in 2015. Even then, if you delivered a website to a client that was just a zoomed out “desktop” website they would assume it’s broken and that you didn’t really do your job. Today, even more so. It’s just not done.