[Robin]: I read this post from Dave Rupert about setting color variables, using a combination of Sass vars, CSS vars, and what Dave calls “semantic theme vars.” He writes:
Last week I got the opportunity to work on a side project that has no plans to include IE 11 in the support matrix and let me tell you; what a wonderful feeling! This opens the door to a lot of fun CSS, namely Custom Properties. Adding a proper “Dark Theme” to the application has been on the backlog for awhile and seeing some free time in my schedule, I sat down to hammer it out. It’s nothing super original, but I settled on a solution where I can layer in the ability to theme my application but also maintain some of the power of Sass in the process.
Dave decided to use a combination of all these things and I think it’s interesting because it shows the complexity of adding color options to a codebase. When we talk about color variables, it’s not as simple as pick a color, and then just use CSS variables in your project). Dave uses CSS and Sass vars together, like this:
html {
--black: #{$black};
--grey: #{$grey};
--light-grey: #{$light-grey};
--white: #{$white};
--primary: #{$primary};
}This is an interesting for me personally because I’ve been refactoring colors at Sentry, where I work. Our codebase has a theme.tsx file where we set a ton of color variables, like this:
const colors = {
gray100: '#FAF9FB',
gray200: '#F2F0F5',
gray300: '#E7E1EC',
gray400: '#C6BECF',
gray500: '#9585A3',
gray600: '#645574',
gray700: '#4A3E56',
gray800: '#302839',
} as const;We then have an alias object:
const aliases = {
text: colors.gray800,
border: colors.gray400,
success: colors.green400,
error: colors.red,
disabled: colors.gray400,
} as const;The idea is that when we’re making a new component with Emotion, we don’t have to remember which gray is our default text color. So, in a component we might have something like this:
import styled from '@emotion/styled';
const Alert = styled('div')`
background: ${p => p.theme.error};
color: ${p => p.theme.white};
`;I like how Dave approaches things by combining Sass and CSS variables:
Digging in the code, I found dozens of places where we were using Sass color functions like lighten() and darken(). Programmatically generating colors (grays) still has a ton of value for this project. Unfortunately, CSS doesn’t have color functions (yet). Rather than letting this be a blocker for me, I decided I can have the best of both worlds.
--border: #{darken($light-grey, 6%)};The lack of true CSS color functions is one of the last few Sass superpowers that I can’t really do without. Dave links to a proposal by Lea Verou where she wrote about how color functions might be implemented in CSS and that’s super exciting to me.
Making a Mini Insta-Friends Scrolling List Layout
In this video, Adam Argyle recreates the Stories design from Instagram which involves a little bit of fancy CSS trickery that’s worth looking into.
The reason I point to this video, besides it being a useful thing to know, is that Adam shows us how to think like a front-end developer (that’s something that Chris has written a lot about). In the beginning of the video, Adam breaks down the design which I think is just as interesting as the code. He looks at each aspect of the design and discusses how this particular detail might be a tricky because of how you need to implement this other feature of the design.
It’s like live-stream blogging! And I love that.
A Browser Storage Primer
Ido Shamun writes about all the different types of browser storage; from the localStorage API to IndexedDB, URL storage to cookies. There’s lots of great info and tricks in here, such as this bit that caught my eye:
Saving application data in a cookie can be a bad idea! It will drastically increase the request size and will reduce application performance. Also, the server cannot benefit from this information as it’s a stale version of the information it already has in its database. If you use cookies, make sure to keep them small.
Toggling dark mode and preserving that state, keeping user information, making sure the back button isn’t a super confusing experience in complex web apps; browser storage is an important part of the user experience and in this post Ido explains precisely why.
The State of CSS 2020
“CSS is evolving faster than ever” says the website for this year’s survey that asks developers how they feel about CSS. And, well, boy howdy, I could not agree more with that statement. I feel like I’m constantly hearing about new things just on the horizon that will improve all our lives when it comes to writing CSS and doing web development more generally.
Quite frankly, there’s never been a better time to write CSS and I think it’s only going to get better. But! I’d highly recommend taking the survey here because it’s a small, but meaningful, way to contribute back to the community.
Focus Management
Here’s a fabulous post by Eric Bailey on focus management and inert, particularly about making the Tab key work correctly on everyone’s keyboards. Eric tells us which interactive elements and then walks through all the best practices:
Tab will jump to interactive elements in the order they show up in the DOM. This is one of the reasons why it is so important that the order of your source code matches the visual hierarchy of your design.
Eric also shows this great animation that shows how tabbing ought to work and how it needs to be visually obvious as you hit Tab:
The best advice out of all this? I think it’s perhaps when Eric says that, “99% of the time, you want to leave focus order alone. I cannot stress this enough.” And this is definitely be true in my experience. I’ve spent a whole bunch of time in the past fighting the browser defaults to match some visual design but now I’ve started to see things differently. Now, any time I feel like I have to fight the browser, I stop what I’m doing and go back to the design. It’s like a weird spidey-sense I’ve developed after decades of building sites, and I’m sure you know what I mean.
How to Create a Realistic Motion Blur with CSS Transition
Just reading the title of this post by Neale van Fleet I was like hmmmm. I have absolutely no idea how I’d go about making something like this with CSS. First Neale describes what motion blur is:
If the subject of the frame is moving during the time the shutter is open, we end up taking a photo of an object moving through the frame. On film, this shows up as being a steady smear, with the subject being in an infinite number of places between its starting point to its end. The moving object also ends up being semi-transparent, with parts of the background visible behind it.
Then, Neale dives into how this effect can work in the browser and makes this nifty demo:
The trick here is to duplicate that element several times over and then give each of them a slight transition delay, like this:
It’s such a small, but nice effect when used in the right place — I can’t wait to use this in my next project. I can imagine it being effective in a ton of different ways: reveal/hide content, improve content animations and loading states, etc.
Sponsor
aCe
Do you know if your website is accessible and ADA compliant? aCe is a free ADA and WCAG compliance testing tool that checks the accessibility level of any website. Just place the URL and you’ll know in a second!
Sponsor
WooCommerce Payments now supports subscriptions and saved cards
This is a big deal! Now that WooCommerce Payments works with WooCommerce Subscriptions, you can get recurring cash flow for subscription-based products, like a digital magazine, access to support, a record of the month club, or even a monthly payment plan for large purchases. This is the same exact thing we use for membership plans on CSS-Tricks!
An extra bonus is that WooCommerce Payments can now save a customer’s debit and credit cards for a faster, more convenient checkout experience.
[Chris]: A personal website with a slider for how much CSS to apply? HAHAHA! Too good, Niles.
But I keep thinking of this joke Stephen Shaw made in a shared Slack:
