How to set up Tailwind CSS in Vite with Laravel.

Read more

I've had an eye on Vite for a while. With a stable release out the door (2.0, as 1.0 never left the release candidate stage) it seemed like a good time to give it a shot.

Vite is a frontend build tool like webpack. Instead of bundling development assets, Vite serves native ES modules transpiled with esbuild from the dev server. This means there's a lot less bundling to do, and results in a very fast developer experience. For production builds, Vite uses Rollup to bundle the assets.

Read more

How to set up Vue.js in Vite with Laravel.

Read more

Mac is case insensitive, Linux isn't. This has caused me trouble in the past after deploying my code to an Ubuntu server.

If you rename a file on Mac, git won't pick up any changes if you only change the case.

Read more

Henrik Nyh suggests to make comments more resilient to change with double-entry bookkeeping.

- $timeoutMs = 1000; // Equals 1 second
+ $timeoutMs = 1000; // 1000ms equals 1 second

Whether the discrepancy is caught immediately by the author, or in review, or by another developer far down the line, it will be explicitly clear that the comment was not intended for the current value.

This lowers the odds that a comment will get out of sync, especially useful in configuration files.

For more context head to Henrik's blog, The Pug Automatic.

When I set up a new Mac, there are a few things that make it immediately feel "off" to me. These are the small System Preferences tweaks I make that my muscle memory relies on.

Read more

Around the end of January, I decided to take a break from Twitter for an undetermined amount of time. Twitter was my main source of distraction, and I wanted to find out how much it affects my productivity.

Read more

RoyalSloth reviews the three most common patterns to model interconnected state in a user interface.

• Connect the boxes: create the user avatar component and pass its instance to the inventory table component
• Lift the state up: move the internal state of the user avatar component and the state of the inventory table into a separate box/class
• Introduce a message bus: connect the inventory table and the user avatar component to the shared pipe that is used for distributing events in the application

Connect the boxes and lift the state up seem to be the most common choices for React apps; respectively prop drilling and context or single state trees (like Redux).

There's no silver bullet to UI complexity, all methods have their caveats.

Read the full article on blog.royalsloth.eu.

I rediscovered jq the other day, a little command line tool to format, read, and transform JSON from the command line.

Jq falls into one of my favorite categories of tools: the "simple and do one thing good" category—the Unix philosophy at its finest.

Read more

There are two bike stalls near my apartment. One is right in front of the door, the other around the corner. The one in front of the door is closest, so when I can, I store my bike there. However, most of the time that stall is full, and I need to go around the corner instead.

That's fine. Until a next morning–when I'm still in a daze because I'm not a morning person–I take the walk around the corner, only to realise my bike was actually in front of the door. The day before was one of those lucky days I could store my bike in front of the door.

I quit using the front stall. The less choices I have to make, the more room I have for important things.

Read more

Type inference is the ability to derive types from other pieces of code. TypeScript's type inference is very powerful, even a minimal amount of typing adds a lot of assertions.

Just because you don't need to add types, doesn't mean you shouldn't. This is how I decide when or when not to explicitly add types in TypeScript.

Read more

Google went down today. Downtime at this scale doesn't happen often, but when it rains, it pours. Google going down doesn't only affect Google products, it also affect products connected to Google. App that require authentication with your Google account weren't available, unless you were already logged in.

Coïncidentally, I came across a compelling article about local-first software. From a SaaS point of view, before the internet all we had local-first.

Read more

Masonry layout support has been added to the CSS grid specification! 🎉

Read more

Today, my colleague Freek asked for help embedding the webview of an email campaign in an iframe. He needed it in an iframe because embedding the HTML directly caused layout issues because the website's CSS clashed with it.

After setting up the iframe, we needed to find a way to dynamically resize it based on its contents to avoid double scrollbars on the page. While possible, it required some icky scripting.

I took a step back. The problem at hand was that the CSS needed to be scoped somehow. While iframes were the only solution for a long time, these days we have the shadow DOM.

Read more

I recently stumbled across an over 5 year old comment on Hacker News about performance.

Lots of people make the mistake of thinking there's only two vectors you can go to improve performance, high or wide.

• High - throw hardware at the problem, on a single machine
• Wide - Add more machines

There's a third direction you can go, I call it "going deep". Today's programs run on software stacks so high and so abstract that we're just now getting around to redeveloping (again for like the 3rd or 4th time) software that performs about as well as software we had around in the 1990s and early 2000s

Going deep means stripping away this nonsense and getting down closer to the metal, using smart algorithms, planning and working through a problem and seeing if you can size the solution to running on one machine as-is.

The author talks about "high" and "wide" hardware changes, but this can apply to software too. It's easier to throw a cache at a slow piece of code than going deep and fixing it.

No need to look far, Electron is built on this principle. We're adding heavy runtimes to support multiple platforms instead of staying close to the metal, and we pay the price in performance.

Read more