A rather geeky/technical weblog, est. 2001, by Bramus
Great tip by Mattias: TIL: you can fake package versions in composer using the "as" alias. Useful to force install certain versions while keeping other dependencies in check! 👍https://t.co/VzmMRCCoR5 — Mattias Geniar (@mattiasgeniar) April 16, 2020 You can alias directly when requiring a package: composer require monolog/monolog:”dev-bugfix as 1.0.x-dev” Surely comes in handy when locally …
In The Quest for the Perfect Dark Mode, Joshua W Comeau extensively explains how he has implemented the Dark Mode Toggle on his Gatsby-powered website. It follows the system’s light/dark mode preference, but also allows for an override which he persists in localStorage. The flow to decide if Dark Mode should be used or not …
Continue reading “The Quest for the Perfect Dark Mode Toggle, using Vanilla JavaScript”
Tim Kaldec has measured the JavaScript bytes and the JavaScript CPU time for a bunch of sites. Right now, if you’re using a framework to build your site, you’re making a trade-off in terms of initial performance—even in the best of scenarios. Some trade-off may be acceptable in the right situations, but it’s important that …
<input type=”color”> with <datalist>
Christian Heilman: The input type colour supports the list attribute, which allows you to define a preset list of options. The colours need to be defined as hexadecimal colours. They can be defined as values or text inside the option tags, but the values take precedence. Pictured at the top of this post is how …
Continue reading “Limit the colors to choose from in <input type=”color”> with <datalist>“
Robin Rendle writing for CSS-Tricks, on leveraging Variable Fonts when implementing a Dark Mode: Oddly enough, these two bits of text [shown above] are actually using the same font-weight value of 400. But to my eye, the white text looks extra bold on a black background. How do we fix this? Well, this is where …
BlinkMacSystemFont: A Workaround
UPDATE 2020-04-28: Good news everyone! A workaround for this bug has landed in Canary (Chromium 84) and will be merged into the M83 release! The workaround described here still applies for Chromium 81. The problem As detailed before there’s this bug that shipped with Chromium 81 which somehow prevents the font-weight CSS property from being …
Continue reading “Chrome vs. BlinkMacSystemFont: A Workaround”
Back in 2012 at dotJS – which I attended – Brian Leroux gave his talk WTFJS. Somehow the video of that talk got recommended on YouTube to me. It was fun watching this again 🙂 Gotta love coercion 😍 Also: Wat?
98.css is a CSS library for building interfaces that look like Windows 98. 😂 98.css → UPDATE 2020.04.28: Jordan Scale, the author of the library, has done a write-up on 98.css.
The key property for the parallex effect itself is the perspective set on the .parallax-wrapper, in combination with the height and object-fit: cover; set on its containing img element. The shadow is injected using ::after ⚠️ Doesn’t seem to work in Safari …
Photo by Zach Lucero on Unsplash When presented with a problem, Nicholas C. Zakas has settled on a set of 5 questions he asks himself for each problem as it arises. Asking these questions, in order, helps him make the best decision possible: Is this really a problem? Does the problem need to be solved? …