Renditions of my webdev experiences
Over the weekend I started playing with the rather new formatter and linter written in Rust. If you're familiar with Prettier and ESLint, you'll quickly get into the basics. The improvement was clear! ESLint and Prettier spent 5+7 seconds running on the same code with a cache, while Biome merely spent 50ms on the entire codebase. However, I think that for most codebases, the developer experience…
One of the things I miss the most in my everyday life as a pull request reviewer is good code descriptions and an explanation that tells me how to test and review the code. Pull requests come in all sizes, and some of them are so heavy that it's difficult to know where to begin! Maybe you're not familiar with the code already, or perhaps the person who created the PR has changed a thousand files.…
A BBC article from 2020 suggests that the Internet (and the devices that use it) accounts for about 3.7% of the world's carbon footprint. This is a lot, and it's our responsibility as designers, devs and techies to keep that number down. A few years ago I made a small site that takes advantage of the fantastic Website Carbon project to measure Norwegian municipalities' sizes. The test I run is far…
TypeScript 5.2 is out! The newest version comes with ✨Explicit Resource Management✨ and the using keyword! Just like in C# it will now be possible to create auto-disposable resources, which means that it is no longer the consumer's responsibility to, say, close connections. This example is copied from the TS team's blog post , which makes it quite clear how to set it up imo: function loggy ( id :…
Dependabot is GitHub's tool for automating dependency updates. It's great! But it can be a little noisy. Here are some tips for making it a little less so. Grouping Ever had Dependabot create seven PRs for the same dependency update? If you're working with dependencies like Storybook, you probably have. To make it a little smarter, we can tell it to group certain dependencies. The groups keyword…
Storybook 7 came out earlier this year and together with better performance and type safety the team shipped ✨ Component Story Format (CSF) 3 ✨! In my opinion it makes stories looks nicer and beautifuller and they're simpler to write! As with a few other updates in Storybook, this one comes with a migration! Just run this to migrate all stories from v2 to v3 (switch out the glob pattern with…
Sometimes as developers we have to write code that generates code. This can be for a number of reasons, but one of the most common ones is that we want to generate HTML or CSS from JavaScript. This is a common pattern in libraries like styled-components and Lit , but it's also something you might want to do if you're writing a tool that generates HTML or CSS. The problem This code often ends up as…
I really like using CSS modules when programming with React. There are other options too, like the long list of CSS-in-JS libraries and Tailwind, but I like to hand write my CSS in (S)CSS files. CSS modules typically look like this: my-component.module.css .myClass { color : rebeccapurple ; } my-component.tsx import styles from "./my-component.module.css" ; const MyComponent = ( ) => { return < h1…
satisfies is a pretty cool keyword that came with TypeScript 5! There aren't many places it can be used, but for config objects and default exports, it's especially good. You might already know that as has its limitations. It's not very good because we're telling the TypeScript compiler that we know better than it does. It turns off some checks and just takes what we say at face value: type Person…
Ever tried using window.confirm() before? It's a remarkable method that is very handy whenever you want your users to really be sure of what they're doing. However, have you tried styling it? Just like with window.alert() it's impossible, so we'll need to create our own Confirm Modal. I'll show you how! What to solve First, it's useful to map out what we're trying to solve. It's important that our…
Styling for every possibility is hard. Doing the CSS work for a ✨CMS generated site✨ where you have no control of the site's markup teaches you quite a few things about making the most out of the limited tools we're blessed with. The problem Our designer's latest challenge was this: Create a grid of rectangles such that it behaves like this on desktop screens: Use no JS to achieve this, make it…
So there's this thing you probably haven't heard of called "dark mode". Yeah, you're right, they're everywhere. Let me teach you how to grace the interwebs with even more instances of light on dark! 🌓 Caveat : This tutorial uses the power of CSS Filters , thus isn't supported by every browser. Per July 10 2019, 94.36% of users support it worldwide . How do filters work? The CSS filter property…
Tooltips are a nice way to show the user extra info about the site's UI. By making use of CSS attribute selectors and the attr() function, we're able to create a neat little tooltip to show our users extra info that we don't want to add to the element's text. Scroll down to the bottom to see the tooltips in action, or follow along to learn how to make them yourself! Preface Before we begin, we…
Have you ever tried reading a printed out website, then instantly becoming frustrated when you're trying to click the links? Pseudo elements can't really help you much with this, however they might help you a bit by displaying the links' urls! How do you do this, you ask? Let me show you the power of pseudo elements and the attr() function. Printed documents only have two dimensions, and they…