As one gathers navel from one’s lint, so also do I gather little bits of information I hope will be helpful for those of you who, as I do, have found a hobby in fiddling with personal SSG-built websites. Back in December, I began issuing such items as “Gems in the rough.” Here be the latest thereof.
Some time back, I went through a somewhat tortured series of explaining how to cache-bust the CSS for a Eleventy-based site which uses Tailwind CSS. Turns out that, if you’re willing to use SCSS instead, you can skip the whole mess by using internal CSS — i.e., where it’s included site-wide in your HTML’s head rather than as a separate file, as I discussed a few weeks ago regarding Hugo’s asset pipeline. Check out “My Eleventy + SCSS/Sass Setup” by Duncan McDougall for all the coolness (and, to be fair, he credits his inspiration to Andy Bell’s well-known Hylia Starter Kit).
Not a tip but just a note: I’m experimenting with other website-building apps and methods, due to some upcoming Day Job stuff. Since the Day Job is moving toward being a React shop, I’m spending significant time in Next.js, in particular. As of now, that’s the platform toward which I’m leaning as the best all-around recommendation when I get asked. Of course, the final decision ain’t mine. [Update, 2021-04-15: After an initial miscommunication gave me the wrong impression of the thinking in higher places, the decision eventually went against me, so I won’t be doing this after all.]
Wondering which display setting you should use when calling a web font with @font-face CSS , especially for reducing CLS? Some writers suggest display: optional. With that in place, a browser probably won’t show the web font on first arriving at your site, but should when the user either refreshes that initial page or visits one or more subsequent pages in the site. This means that your visitors likely won’t see the consistent appearance for which you installed the web font in the first place. Besides, you don’t know whether someone actually will visit a subsequent page after finding the first one to which a search sent him/her. My advice: use display: swap and live with whatever CLS it causes or just settle for the totally CLS-free system fonts stack approach.
Still keeping my eye on the Cloudflare Pages beta test, which now is an open beta. Build times are getting faster, but quite a few bugs must die before Pages will be safe for production use. For now, if you want a static site that lives on Cloudflare, stick with a Workers site.
If you’ve ever tried to figure out why you couldn’t click on a link in a fixed-position element, like a header or footer that you want to stay in the same place, the CSS z-index property is your friend. Keep adjusting that setting for all elements concerned until each appears as it should while allowing you to click links to your heart’s content.