Articles

ARTICLE Friday, August 21, 2020

Our Dark Mode Setup

Conceptually, dark/light mode on a website is driven by the buttons on the UI: whichever mode user picks, a data-theme attribute with that value gets set on <html> tag. We also persist that to browser's local storage.

Automatic mode setting "listens" to system's setting via @media (prefers-color-scheme: dark). Manual dark/light modes' CSS "listens" to <html> tag attribute's value by :root[data-theme='dark'].

That's pretty much it.

Here is the mixin we use.

Read article

#eleventy #meta #css

ARTICLE Wednesday, August 19, 2020

Evolution of Our npm Packages, from a README Perspective

As our npm package count grows, the README automation becomes more and more an issue. Installation instructions, badges, contribution guidelines can be automatically generated, but many other chapters can't.

Here's our story from a README perspective.

Read article

#monorepo #indieweb

ARTICLE Tuesday, August 18, 2020

`string-strip-html` v.5 and Lessons Learned

For an exported function, string-in, string-out API is awesome because it's simple. The problem happens later when you want to add more to the output, for example, a log with time spent. Or an alternative output, like locations of string indexes. Or the version from package.json.

Read article

#api

ArticlesΣ=7

Our Dark Mode Setup

Evolution of Our npm Packages, from a README Perspective

string-strip-html v.5 and Lessons Learned

Articles^Σ=7

`string-strip-html` v.5 and Lessons Learned