You would have heard of the CSS color-scheme property if you are interested in adding a dark theme to your website. Here’s what it looks like:
:root {
color-scheme: light dark;
}
color-scheme tells the browser to render user-agent stylesheets according to the user’s preferred color scheme (which is set in their operating system).
There are three possible values (and it’s super easy to understand):
light: Browser will render styles according to the light scheme only
dark: Browser will render styles according to the dark scheme only
light dark (or dark light): Browser will styles according to the scheme the user prefers
This means:
color-scheme: light will give black text on a white background
color-scheme: dark will give white text on a black background
color-scheme: light dark or dark light will give either light or dark depending on the user’s color scheme preference in their operating system.
Is color-scheme necessary?
Most articles would recommend you use color-scheme.
But nope. color-scheme is not necessary.
color-scheme is not necessary because it only changes the colors in the user-agent stylesheet. If you are confident you would override all user-agent stylesheet colors, there’s no need to add this extra line.
In fact, I’d argue it’s safer to omit color-scheme when you’re building Light and Dark themes… but that’s a topic for another day when I consolidate all the information I found about creating Light and Dark themes.
Just my two cents.
Update: Setting color-scheme to would change scrollbar colors. So the property is no longer unnecessary. I’m still hesitant about using it because it may introduce more problems… but I’ll leave that conversation for another day.
I went about researching web security recently as I was writing Understanding Asynchronous JavaScript — I wanted to make sure my recommendations were secure and I’m not doing any of my students a disservice with my recommendations.
Unfortunately, articles in the security space were pretty hard to understand. There were many words that trigger lots of fear, uncertainty, and doubt in the articles. I get emotionally panicky when I read these articles — and I worry I may end up doing something wrong — even though the intention of these articles was good!
Many articles also don’t disclose full details CSRF, how to set up a CSRF Attack, and how to prevent a CSRF Attack, which leaves me doubtful about what I learned. I end up having to figure things out on my own.
I want to make it easier for you to understand CSRF, so I took a stab at writing an article with complete (and step-by-step) information about CSRF Attacks. I hope this article gives you the clarity and confidence you need to build secure web applications.
One of the problems with localStorage is it takes in only string values. If you want to save an object, you have to convert it into JSON with JSON.stringify.
When you retrieve objects from localStorage, you need to convert the JSON value back into JavaScript with JSON.parse
Many people are trapped in tutorial hell — they hop from one tutorial to another, to another, to another, never building something on their own. And they’re ashamed of it.
If you want to support transparency in a CSS rgb or hsl function, there’s no need to write rgba or hsla anymore. You can simply write rgb or hsl with a / to indicate the alpha.
Browsers handle cookie expiry so they don’t pass the cookie’s expiry value to the server. You have to make some adjustments if you want to get the cookie’s expiry value on the server.
