React follows semantic versioning, but with a twist. From their versioning policy:

When releasing critical bug fixes, we make a patch release by changing the z number (ex: 15.6.2 to 15.6.3).

When releasing new features or non-critical fixes, we make a minor release by changing the y number (ex: 15.6.2 to 15.7.0).

When releasing breaking changes, we make a major release by changing the x number (ex: 15.6.2 to 16.0.0).

The twist is subtle: non-critical bugfixes are released as minor releases.

I've often wondered whether three digits really is necessary for versioning. As a package maintainer, deciding between minor and patch is often a gray area.

Two digits would suffice: breaking changes and non-breaking changes. Feature or bugfix doesn't really matter from a technical point of view: upgrading can either break things, or can't.

React reserves the patch number for critical bugfixes, which I believe is a necessary escape hatch in a two digit system. But I like I how they default to simply bumping minor versions.

Last week I published a post about how I implemented live updates on an Oh Dear! status page.

Caleb Porzio rebuilt the page with Livewire. It's pretty impressive to see how easy the process is by just adding a few built in Livewire directives.

Watch the short screencast on Caleb's blog.

Both Inertia.js and Livewire have been in the spotlight the past few months. The two libraries often get put next to each other because of their (coincidentally) simultaneous releases.

I've seen many people compare the two, or ask if they can be used together. This post showcases their similarities and differences, and should help you understand which problems they each solve best.

Read more

If you're building an app with Laravel and Inertia, you don't have access to Laravel's helper methods because you're writing views in JavaScript. This means you lose the ability to generate URLs on the fly with Laravel's route and action helpers.

This short post outlines two ways to deal with routes in a Laravel and Inertia app.

Read more

Last week Oh Dear! launched a new status pages feature. I designed them and implemented their frontend. Here's a live example on status.flareapp.io.

We were originally going to use Vue for the pages, so we could make the entire view reactive so we could easily fetch and update data with AJAX or websockets. I started building the status page view, but quickly became hesitant about the decision to use Vue. It didn't feel like the right tool for the job.

Read more

How much should we invest in JavaScript as developers? I've asked myself that question over and over again. Around last year I came to a conclusion: I strongly believe JavaScript is a requirement for excellent user experiences. Not good experiences, excellent experiences.

Read more

In his most recent essay, Craig Mod explores the effect of optimizing software for speed.

Speed and reliability are often intuited hand-in-hand. Speed can be a good proxy for general engineering quality. If an application slows down on simple tasks, then it can mean the engineers aren’t obsessive detail sticklers. Not always, but it can mean disastrous other issues lurk. I want all my craftspeople to stickle.

My newfound love for Hugo echoes this sentiment. It’s not the friendliest tool, but it’s speed and focus on doing one thing right makes it a joy to use.

That said, Sublime Text has -- in my experience -- only gotten faster. I love software that does this: Software that unbloats over time. This should be the goal of all software. The longer it’s around, the more elegant it should become. Smooth over like a river stone. I have full trust in the engineering of Sublime Text because I’ve used it for over a decade, but also because it always feels like a fast, focused tool (even though it’s actually very complicated) and has only become faster the longer I’ve used it.

Software that unbloats over time. What a beautiful idea.

Another excerpt that just had to be quoted:

Google Maps used to be a fast, focused tool. It’s now quite bovine. If you push the wrong button, it moos. Clunky, you could say. Overly complex. Unnecessarily layered.

Read the full essay on craigmod.com.

I first noticed webmentions in the wild on Hidde de Vries' blog about two years ago. Last week it finally happened, I added webmention support to my blog too! Well, partial support at least. I'm now receiving and displaying webmentions. Sending them out is a project for another day.

Read more

React components have always relied on lifecycle methods for side effects. While lifecycle methods get the job done, they're often overly verbose and have large margins for error.

It's easy to forget to "clean up" a side effect when a component unmounts, or update the side effect when props change. As Dan Abramov preaches: Don't stop the data flow.

React recently introduced a new way to deal with side effects: the useEffect hook. Translating lifecycle methods to useEffect calls can be confusing at first. It's confusing because we shouldn't be translating imperative lifecycle methods to declarative useEffect calls in the first place.

Read more

This blog was a custom Laravel application for the past few years. While I was happy with the Laravel solution, I'm slowly trying to move away from maintaining my own servers. I'm also drawn to the simplicity and stability of serving plain html, so I decided to look into static site generators.

I quickly discovered that Hugo was what I was looking for. Hugo is a very fast and very popular static site generator.

Read more

Some time last year, we released the latest iteration of the Spatie.be website.

There's a succinct description of what we're about, followed by a peculiar little block, dubbed "Latest insights from the team".

Unlike other agencies, we don't have a company blog. We encourage everyone to write on their own blog and put their latest articles in the spotlight.

Everyone keeps ownership of their content.

There's nothing fancy backing this feature, blog entries are synced via RSS. If you're interested in implementing something similar in PHP, our source code is available on GitHub.

For the past three years, I've been using both React and Vue in different projects, ranging from smaller websites to large scale apps.

Last month I wrote a post about why I prefer React over Vue. Shortly after I joined Adam Wathan on Full Stack Radio to talk about React from a Vue developer's perspective.

We covered a lot of ground on the podcast, but most things we talked about could benefit from some code snippets to illustrate their similaraties and differences.

This post is a succinct rundown of most Vue features, and how I would write them with React in 2019 with hooks.

Read more

I had the honor to be a guest on Full Stack Radio with Adam Wathan.

We talked about why I prefer React over Vue — which I wrote about two weeks ago — and how to implement some patterns that Vue provides out of the box but aren't explicitly available in React. Examples include computed properties, events and slots.

Adam's quote:

In this episode, Adam talks to Sebastian De Deyne about learning React from the perspective of a Vue developer, and how to translate all of the Vue features you're already comfortable with to React code.

Tune in on fullstackradio.com or on your favorite podcatcher!

When you visit a website, your browser connects to a server via TCP. With TCP, the first roundtrip can be up to 14 KB large.

In other words, the first 14 KB sent to the client will always be the quickest to render in the browser. The rest of the response is streamed afterwards.

This website's homepage is about 9.7 KB at the time of writing. Articles are roughly 4-10 KB, depending on their lengths. All CSS is inlined, so besides fonts and images everything is loaded withing the first roundtrip, making page loads fast and snappy.

Not all sites can be contained within 14 KB — most probably can't. But keep the number in mind, and try to optimize the first 14 KB instead.

Shawn Wang (@swyx) wrote about how React hooks work internally. The article is a deep dive into JavaScript closures, and builds up to a 28-line React clone with support for the useEffect and useState hooks.

In this article, we reintroduce closures by building a tiny clone of React Hooks. This will serve two purposes – to demonstrate the effective use of closures, and to show how you can build a Hooks clone in just 29 lines of readable JS. Finally, we arrive at how Custom Hooks naturally arise.

Understanding how React deals with hooks internally isn't a required to use them, but it's interesting material nonetheless!

You can read the full article on the Netlify blog.