React

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: Left - Interface without safe areas, Right - with safe areas It contains a scrollable list of cards as well as

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 None of the examples in this article actually require you to use Capacitor, so if you're just looking to jazz up your Next.js app this article is

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 state management library for React. It's now been out for a while, with

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 about showing custom error pages. I suppose most people will be absolutely fine with the solutions provided

We previously talked about [how to get started with Next.js on Android](https://api.ironeko.com/posts/getting-started-with-capacitor-using-next-js/(opens in a new tab)). 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 iOS. How to use Next.js and Capacitor together on iOS Before doing anything else, start setting up your app by following

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 to the size of the window and check the size of the div whenever you need to. This is complicated a bit by React as you actually need to be able to understand a couple of hooks before you can find the height and width of an element

Ever wondered how to run a Next.js app natively on a mobile device? It requires some setup but it's actually very easy thanks to Ionic's Capacitor! We also have a Capacitor + Next.js + iOS guide! What is Capacitor? Capacitor is Ionic's solution to running web apps natively on your device. To put it simply, if your app works on the web, Capacitor is an easy solution to use your already existing front-end while still being a

A couple of weeks ago I struggled with figuring out how to add an RSS feed to my Next.js site, so I thought I'd write up a short guide on how I achieved it. Working with Next.js Next.js pages are made to output HTML markup and Javascript. You can use workarounds to output other types of files, yes, but there's actually a much simpler way to achieve this. The easy solution to outputting an RSS feed with Next.js Ne

When I built this site, Next.js' built-in server wasn't great... so I had to rely on Express. But have the recent updates to Next.js 9 changed my mind? Let's compare. I created Ironeko during the few months before Next.js 8.1 was released. At that point the only realistic way to actually run Next.js was with a custom Express server and using something like next-routes to handle routing.

React Spring is a fantastic animation tool, but it's not the most straight forward. In this article we'll go through how to build an infinite React Spring carousel. Edit 8/9/2020: I've made some significant improvements to the carousel script in this article. These include: Autofitting the carousel to its container Back and Forward buttons More clear options Better logic Before we go any further let me show you what the final product of an infinite react spring carou

Ever wondered how to create a parallax effect with React Spring? This is one of my favourite effects to use when sprucing up a page with some motion. However, due to how React works, tracking the scroll position is a bit harder than it would be on a standard website. So let me show you how we can achieve this effect with React Spring, an animation library for React. Animating React with React Spring There's a lot to say about React Spring, much more than one article could cover, but in case you're unfami

There is one thing that I see people asking for over and over in all the communities I post in: realistic examples for web design inspiration. These are really hard to come by. I'll usually see suggestions from sites such as Awwwards - and while these sites can be beautiful, more often than not their usabilty falls short. Of course there's a place for both beautiful and functional websites, but I think people have a harder time pinpointing good UX. This is why I want to start this Web Design Inspi