Understanding the color-scheme property

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.

Understanding CSRF Attacks

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.

A library to make localStorage easier to use

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

How to find a tag id in Convertkit

Finding a tag ID in convertkit is simple. You don’t need to use the API. Using the API is a roundabout way if you want to find a specific tag ID.

Here are the steps:

  1. Click the tag in Convertkit
  2. Look at the URL.
  3. Find the subscribable_ids parameter

Here’s an example:

In this case, the tag ID is 3061839.

Don’t be ashamed of tutorial hell

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.

Don’t be ashamed of tutorial hell.

New CSS Color syntax — rgb instead of rgba

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.

No need for commas too!

Getting a cookie’s expiry value on a server

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.

There are two methods:

  • You can create a cookie with a JSON value
  • You can use another cookie to signify the expiry

Hold on while i sign you up…

Woohoo! You’re in!
Now, hold on while I redirect you.