#webdev Notes

Here’s a fun SVG trick I just learned. If you set the fill or stroke properties to currentColor using CSS, your SVG will be the color of the text around it.

svg, svg path {
    fill: currentColor;
    stroke: currentColor;
}

This is great for auto-changing light and dark modes because it means you don’t need multiple images – the SVG will just change color appropriately.

Note, that this only works for inline SVGs, it doesn’t work with an <img> tag. Thanks to @freeplay for the reminder!

Change your computer’s Dark Mode setting, or use my /settings page, and watch the sun change colors!

TIL that Chrome has a great built in Node JS profiler.

You can connect the Chrome debugger to your Node code, and get Performance metrics just like you can with a website!

See https://developer.chrome.com/docs/devtools/performance/nodejs for full instructions.

One tip is that you need to add a timeout before the code you want to profile, so that you have time to hit the Record button in the DevTools “Performance” tab.

This helped me narrow down what had been making my blog generation scripts run slower. It’s a nice debugging experience!

Tip for sorting lists using CSS!

If your list is initially sorted, you can reverse it by using display: flex and setting the flex-direction attribute to column or column-reverse.

For example:

ol {
    display: flex;

    /* flips the order */
    flex-direction: column-reverse;
}

Then you write a little bit of Javascript to change the flex-direction when the user selects a dropdown option and voilà, sorting!

Now my /notes page can be viewed with the oldest notes at the top 🤗.