#webdev Notes

It can be tricky to test Javascript code on mobile when you’re using Web APIs that require a secure (HTTPS) context, e.g. the DeviceOrientationAbsolute event.

If my webserver is serving on localhost:8080, my usual method to test on mobile is to just go to my laptop’s IP address + port in my phone’s browser, e.g. http://192.168.1.153:8080.

But on my phone, this isn’t a localhost address and it isn’t https, so it’s not secure, and the API doesn’t work.

ngrok is a SAAS way to solve this, but I just learned an easy work-around.

Go to chrome://flags in Chrome on your phone (also works in Brave) and search for a flag called “Insecure origins treated as secure”.

If you enter your computers’s ip address+port combination into the textbox, enable the flag, and then restart your browser, your context will now be marked as secure, and your JS APIs will work!

(A word of warning: don’t do this for real websites, security contexts are important!)

Hopefully this will save someone a headache down the line!

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 🤗.