Darkmode.js Emoji Rendering Fix

#javascript #css #wecoded #theycoded

As of recent web designers and developers have been implementing a dark/light mode toggle feature on their websites. I decided to try it out by adding a widget via Darkmode.js.

Ways to Implement:

via JSDelivr CDN.
using NPM.
Enable/disable Darkmode programatically.

I used the CDN and the following object to render the widget.
After saving, I ran into an issue with the label not rendering the emoji.

My document:

Alternate document:

I tried a few things like viewing my document in different browsers, editing the options, adding a positive value for the z-index and hardcoding the emoji within the document, etc.

I then decided to try the ::after pseudo element.

Fix:

.darkmode-toggle::after {
content: "🌓";
}

My Updated Document:

That fixed the issue.

There are probably other fixes out there, this was mine. Here is the issues page.

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.