Forget about component lifecycles and start thinking in effects

| 3 min read

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


Migrating my site to Hugo

| 1 min read

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


My favorite part of our company website

| 1 min read

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

Our company homepage, screenshot taken on 2019-06-17

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.


React for Vue developers

| 14 min read

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


Full Stack Radio 114: React for Vue developers

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!


14 KB

| 1 min read

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.


Understand React hooks internals with a 28-line React clone

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.


Running PHP CS Fixer on every commit with husky and lint-staged

| 2 min read

Last month, I wrote a post about automatically running prettier before every commit. This ensures that all JavaScript and CSS are formatted correctly before they’re stored in the project’s repository.

Husky and lint-staged have been working hard keeping our front-end assets clean as Spatie, so we decided to expand their responsibilities to keep our PHP files clean too. This is a modified version of my previous post using PHP CS Fixer instead of prettier. There’s also an example of a conmbined configuration to run prettier and PHP CS Fixer simultaneously at the end of the post.

Read more


Web components

| 5 min read

Every now and then, web components hype seems to resurface. Judging by my Twitter feed, it’s a bull market period now. Seems like a good time to share some thoughts.

Read more


Why I prefer React over Vue

| 5 min read

Vue is the default JavaScript framework for Laravel apps. Being part of the Laravel community, I often get the question why I prefer React, so I’ve decided to write down a few standout reasons.

Read more