Looking at inline CSS and performance
In this post, Timothy Vernon has a lot of smart things to say about taking your styles out of CSS file and moving them into the HTML for performance reasons:
CSS is treated as a render-blocking resource — that is, if you include any form
<link href="style.css" rel="stylesheet">of in the document’s<head>, the browser will trigger an additional request to the server to retrieve that stylesheet before even beginning to render your page for the user.While our internet providers, infrastructure, and servers are all getting faster every year, there is no such thing as a free lunch. Every network request to the server has a time cost, and the requests required to complete before the browser begins rendering the page are the most expensive.
There are some trade-offs with this, as Timothy mentions. For example: now those styles are in your HTML, the download is certainly larger than before. It follows then makes to only serve the CSS that’s being used on that page and that’s commonly referred to as Critical CSS. Timothy mentions a few tools to help with that, such as Addy Osmani’s Critical project.
Looking at performance through JavaScript bundling
Here’s a fantastic post where Ivan Akulov digs into the popular writing app Notion (we’re big fans) and looks at why it’s particularly slow:
It turns out, almost every app has low-hanging fruits that could be implemented just by tuning the bundler configuration and doing a few precise code changes.
Ivan gives us some pointers for how we can make our own websites and apps faster with techniques such as deferring JavaScript execution, code splitting, and removing polyfills.
Global and Component Style Settings with CSS Variables
I want to share my favorite two ways to use CSS Variables to organize and maintain styles in my projects today.
Heck yeah! Sara then walks us through how she built a whole library of accessible components called Skeleton:
Sara found that a lot of the styling properties between these components can be best maintained — and forked, then edited — with the help of CSS variables. This also allows her to quickly theme these components, too.
A/B Testing Instant.Page With Netlify and Speedcurve
instant.page is a script that you add to your site so that when a user hovers over a link that page is preloaded, making the whole experience once they click it just a tiny bit faster. Tim Kadlec wanted to investigate the effects of this on his personal site though and so he set up an A/B test with the help of Netlify:
Netlify supports branch-bases split testing, so first up was implementing instant.page on a separate branch. I downloaded the latest version so that I could self-host (there’s no reason to incur the separate connection cost) and dropped it into my page on a separate branch (very creatively called “instant-page”) and pushed to GitHub.
Also: the fact that it’s so easy to setup an A/B test with Netlify is thoroughly bonkers to me.
Stay tuned to Tim’s blog… he’s got a follow up coming that looks at some reasons he was seeing what he was seeing, including some subtle bugs in how Netlify is doing things that might just get fixed up.
The Best Design System Tool is Slack
I know this is a catchy title and whatnot — I’m not trying to stir up drama — but it’s only because I’ve found that it’s best to meet folks where they are when working with design systems. Building lots of tools and writing lots of docs for components… All of this is useful, but 99% of the conversations about design systems happen in Slack anyway, so I wondered whether we could start to make those conversations easier to consolidate that information?
And what happens if we add some of that documentation to Slack itself? I looked into our Slackbot settings and added colors from our design system so that, whenever someone types in color me, all of the colors are shown in that Slack Channel, like this:
It’s pretty handy! And only takes a couple of minutes to set up, too. No one needs to head to Figma or a style guide — they can quickly type their request, then get back to work.
Updates to form styles have landed in Chrome 83
Here’s some nifty updates to how forms look, but check out the <input type="time"> element Chrome 83 introduces. I struggled with that input on a recent project because I noticed Chrome didn’t support it at all. Now it does, though, so hurrah!
Overlapping header with CSS Grid
Here’s a smart post from Jonathan Snook about making the header in this design overlap the content with CSS grid:
It’s a pretty neat trick and shows that now we don’t have to do a lot of the weird layout magic hackery that we used to not so long ago.
Here’s a post all about replicating Sass color functions in CSS
Jim Nielsen wanted to remove Sass dependency on a recent project and started experimenting with HSL to replace certain Sass functions, like saturate, desaturate, and darken:
I’ve felt quite happy as of late with no Sass in any of my personal projects. That said, I have always missed the color functions in Sass. I always loved those. Heck, I built a tool called SassMe which helps you visualize the output of Sass color functions in real time. All of this got me thinking: could you actually do an equivalent of something like Sass’ saturate() in CSS in 2020? Short answer: you can!
All of this riffs off of Lea Verou’s article called “A user’s guide to CSS variables” which is worth every moment of your time. There’s just so much good stuff in there. But the section about color is especially interesting.
And, last but not least, here’s how to make a close button
These types of buttons can be found everywhere on the web: in modals and overlays, on ads and video pop-ups. But! Making them with accessibility in mind should always be important. Manuel Matuzović breaks down all the patterns we need to avoid and the best practices we need to consider whilst making them.
Sponsor
Jetpack Scan
The Jetpack team at Automattic is on a roll when it comes to pumping out big new features! First, we saw support for recurring payments. Then we saw a huge update to the search feature that introduced instant results. Now, we get Jetpack Scan, a premium site security service that doesn’t just monitor security and notify you when issues pop up — it will even fix those issues for you. Check it out, give it a try, and sleep better at night knowing your site is secure.
Have you seen Lynn Fisher’s amazing thread of CSS memes?
I love how positivity focused there are. Rather than pooping on CSS being confusing or hard, they are focused on CSS killin’ it.
GIFs are the only thing that will work in email, and they are huge, so I’ll just do one:
But don’t miss the ones on flex-direction: column;, adjacent sibling combinators, or border-radius: 50%;.
