React

Setting safe areas in React with CSS variables

Most apps and sites have elements or menus that overlap others and depending on the number of pages you have you might want to not set these safe areas manually. So here’s a little trick to set safe areas with React. Consider this simple interface: It contains a scrollable list of cards as well as […]

Leonardo
Feb 21, 2021

Animating page transitions in Next.js for Capacitor

Capacitor is a fantastic solution to running web apps as native. Unfortunately it can also be quite hard to give your front-end that extra polish to make it look truly native. In this article we’ll go over implementing page transitions in Capacitor and Next.js If you’re reading this I’m going to assume you’ve managed to […]

Leonardo
Dec 18, 2020

Do you need Redux? I didn’t, and you probably don’t either

After completely removing Redux from most of my codebases, I realised that it’s not half as important as most of the internet seems to believe. So do you need Redux really? Here’s a little exploration on why you should think about dropping it altogether. What is Redux? In case you’re not aware, Redux is a […]

Leonardo
Nov 29, 2020

How to return a 404 error in getServerSideProps with Next.js

After a lot of misunderstandings and frustration with the documentation on the Next.js docs I decided it might be worth explaining how to properly return a 404 error in getServerSideProps with Next.js. What’s the problem with Next.js and its error pages? If you’re reading this you’re probably aware that Next.js has a fairly clear page […]

Leonardo
Oct 25, 2020

Getting started with Capacitor using Next.js on iOS

We previously talked about how to get started with Next.js on Android. In that article though we had to skip over iOS setup as we didn’t have access to a Mac. This week I finally got my hands on a Mac mini, so I spent a couple days troubleshooting problems with Next.js and Capacitor on […]

Leonardo
Oct 20, 2020

Find element size in React with the useDimensions hook

Trying to find the size of an element in React can be quite annoying, especially if you want to keep track of any changes in size. The custom useDimensions hook should hopefully make this task much easier! Usually keeping track of a div in vanilla Javascript is fairly easy: just keep track of any changes […]

Leonardo
Sep 11, 2020