Now available: CSS Flexbox and Grid Posters
Our complete guide to flexbox is something I use on a weekly basis and it’s saved me so much confusion and heartache over the years. But now I won’t even have to go to the guide at all because we just started printing our very own poster all about flexbox:
Designed by the ever-so-talented Lynn Fisher, this poster is a handy reminder how to layout elements on a page in a flash. So if you find yourself looking up these properties and values then it’s safe to say you ought to go and pick one up. There is a poster for grid too!
Dark Mode on the Web
Speaking of our guides, we just published A Complete Guide to Dark Mode by Adhuham, and in it he writes about toggling themes, storing a user’s preferences, and a host of design considerations to keep in mind when building this functionality.
At Sentry right now I’m currently working on a big CSS refactor—I’m refactoring our colors in the hopes of one day supporting dark mode but it’s an awful lot of work! The hardest thing I’ve found so far isn’t the technical aspect of implementing dark mode—those things are blissfully easy, in fact—instead it’s the design considerations that are the really hard part.
For instance: how should we name our variables? That one tiny question is actually loaded with a ton of problems. Or what about font-weight adjustments? As with all design work, there’s always a ton of nuance and complexity there. Thankfully this post details quite a lot of them so it’s great to have this post to read through before I dive in any further.
The Thirteenth Fourth
This week was CSS-Tricks’s 13th birthday and, as Chris always does around this time of year, he wrote about some of the design changes to the site as well as his notes on reducing tech debt, tackling ecommerce logistics issues, as well as a few other things that are interesting if you’re a fan of what’s been going on around these parts. 13 years is a shocking amount of time though—I (me, Robin) have only known a world wide web with CSS-Tricks in it. And so: yay! Here’s to the next 13.
Font Match
Font Match is a great little app that lets you compare two fonts side by side so that you can make safe fallback font decisions. It’s super handy for making those tiny performance adjustments and the sleight of hand when it comes to replacing a system font with a new and fancy web font that’s just been downloaded by the user.
New in Chrome: CSS Overview
Here’s a fancy new experimental feature in Chrome called CSS Overview. Now, we can get an overview of the CSS used on a site, from how many colors there are to the number of unused declarations…even down to the total number of defined media queries.
Since this is an experimental feature you’ll need to do the following to turn it on:
- Open up DevTools (Command+Option+I on Mac; Control+Shift+I on Windows)
- Head over to DevTool Settings (? or Function+F1 on Mac; ? or F1 on Windows)
- Click open the Experiments section
- Enable the CSS Overview option
And there you have it! It’s exciting to start seeing some of these tools making their way into the browser. And I know that it’s most definitely going to help me refactor things in the future.
1-Line Layouts
Una Kravets has made this dazzling display of 1-Line Layouts. This site breaks down how to make once very complex layouts now in CSS Grid. Here’s one example: centering a child element right in the middle of its parent:
All those jerks saying CSS is bad because you can’t center things, well, harrumph to you! place-items now makes that possible in what before did take a certain amount of time depending on the circumstance. Nifty stuff.
Common Performance Mistakes
Karolina Szczur writes about the 5 Common Mistakes Teams Make When Tracking Performance and I particularly like how she recommends points to tackle each problem at the end of each example. Karolina writes:
A significant amount of performance testing happens after changes already have reached your customers. This approach exposes teams to shipping degradations in user experience way too easily. If testing infrequently, and assuming several tests to confirm there is a regression, it might take days to notice a change that might drastically affect how your audience perceives your product.
With this particular issue she recommends tracking performance in pull requests so that other folks on the team can see them and using a staging environment that has the same data as your pull request so that you can test things out before shipping. There’s a lot of other tips in that post though that are definitely worth checking out. The general gist though: how you view your website isn’t important, it’s your users experience that matters the most.
And so having a tool to fix those problems is a great first step.
Sponsor
Frontity
Frontity is a free and open-source React framework for WordPress. Its unique approach enables you to easily build a frontend for a headless (or decoupled) WordPress site, without worrying about tooling and configuration.
Sponsor
Netlify
[Chris]: Here’s one tiny thing that I just love about Netlify. When I push up changes to assets on a site, like CSS or JavaScript, Netlify automatically de-caches those files. I don’t have to write any special code in my build process to specifically do that, like I’ve do so many times in the past and always resent it. I’d use Netlify for that alone on some projects! Good thing Netlify does about a million other amazing things, too.
[Chris]: It’s a weird time in the world to be looking for work, but I know a lot of people are. And particularly remote work. Working at home is already so full of advantages, but especially so when it makes the world safer and might be required for your life anyway if you’ve got kids with closed schools and all that.
Whenever I think of remote tech work, I instantly think of Automattic. Automattic has been a poster child of remote work forever, proving that it can be done successfully and at scale. Heck, Matt Mullenweg talks about it all the time and even has a podcast on it.
Automattic is a great company to work for, and they are actively hiring. For example, they have some mobile positions available:
Go get ’em.
