A rather geeky/technical weblog, est. 2001, by Bramus
Solid list of tips by the folks over at Snyk: By the time you’re at number 8 your mind may have dwelled, but don’t skip out on that step though! It not only allows you to build smaller images but also prevents you from having unnecessary files (read: security risks) left inside your container. Basically …
Continue reading “10 best practices to containerize Node.js web applications with Docker”
Ana Tudor recently shared a trick on how to make an image partially greyscale: #tinyCSStip Would you like to apply `filter: grayscale(1)`, but only partly, not everywhere? You can emulate that with blend modes. background: url(cat) 50%/ cover, linear-gradient(-45deg, transparent 50%, grey 0);background-blend-mode: luminosity Many variations possible. — Ana Tudor 🐯 (@anatudor) January 20, 2021 …
Continue reading “Animated Greyscale to Color Image Reveal Effect”
Solid advice by Jake: Here’s an old pattern that seems to be making a comeback: import { toReadableNumber } from ‘some-library’; const readableNumbers = someNumbers.map(toReadableNumber); Here’s the problem: // We think of: const readableNumbers = someNumbers.map(toReadableNumber); // …as being like: const readableNumbers = someNumbers.map((n) => toReadableNumber(n)); // …but it’s more like: const readableNumbers = someNumbers.map((item, …
Continue reading “Don’t use functions as callbacks unless they’re designed for it”
Alex Kondov, Tech Lead at Financial Times, has compiled a huge list of best practices when it comes to writing React. This article is a collection of principles and rules that have proven to be effective for me and the teams I’ve worked with. I outline good practices about components, application structure, testing, styling, state …
Continue reading “Tao of React – Software Design, Architecture & Best Practices”
The folks over at Formidable have been experimenting with Houdini and WebGL/Three.js to create futuristic UIs Futuristic sci-fi UIs in movies often support a story where humans, computers, and interfaces are far more advanced than today, often mixed with things like super powers, warp drives, and holograms. What is it about these UIs that feel …
Recently, Stephanie Eckles sent out a call to revive the use of CSS border-image. Not to use it with images — which requires a pretty nasty syntax — but to create Gradient Borders in CSS. 🎉 Time to revive an old CSS property! When `border-image` was announced, I was off-put b/c the syntax was so …
:focus-visible Is Here
With Chromium 86 and now recently Firefox 85 supporting :focus-visible, it’s a good time to refer to this post by Matthias Ott: The :focus-visible pseudo-class lets you show focus styles only when they are needed, using the same heuristic that the browser uses to decide whether to show the default focus indicator. You use :focus-visible …
This website is a single HTML file. It simply uses the #anchor suffix (from 1992) and the :target CSS selector to show and hide pages/content. This setup is databaseless, javascriptless, and buildshit-free, so you can edit your website with a text editor and upload it somewhere like a normal person. Brilliant! 🤩 John Doe → …
Ahmad recently encountered an issue where a CSS Grid column grew too large: .wrapper { display: grid; grid-template-columns: [main] 1fr [aside] 16em; grid-gap: 2em; } The main column has a 1fr value. That means it will take the available space minus the sidebar and the gap. However, the minimum content size of a grid item …
:not(:focus):not(:placeholder-shown):invalid, not :invalid
The built-in browser form validation mechanism can be frustrating as it will mark fields invalid while still entering text. Using only CSS this can be circumvented, so that validations happen afterwards.