Fraser Boag

Some new toys (exploring Next.js, Framer Motion, Tailwind and Mockend)

Back to all notes
Archive
1st March '21

Some random solidifying thoughts on some of the new technologies I've been working with over the last 6 months or so.

Next.js

I've had an eye firmly on Next.js for a while now, and have dabbled a couple of times over the last couple of years, but it's only in the last 6 months or so that it's properly clicked and I've started building a few projects in.

I must say, I love it. There's no point in me repeating the very clear benefits which Vercel themselves describe in their tutorial - but the performance, flexibility, ease of development and sheer robustness it gives to React development make me wonder why I would ever build a pure-React app again.

Framer Motion

One thing that always niggled at the back of my mind when working with Next.js was the apparent loss of one of the nice draws of an SPA library like React - animated page transitions. Not always necessary but, since I plan to use Next a lot more going forward, I wanted to at least feel like I had a solution to this in my back pocket when the time comes.

I tried out a few options, but Framer Motion seems to easily be the most complementary with its simple animation interface and ability to easily animate components when they're removed from the DOM. I found this YouTube video a particularly useful introduction to the basics.

TailwindCSS

Another technology which has been doing the rounds for a while now, but I've only really properly committed to in the last few months. As someone who feels pretty comfortable with "proper" CSS I'm in that camp of developers who always saw Tailwind as an unnecessary solution to a problem that doesn't exist - but then I gave it a go on a real project, and now I'm hooked.

I'm finding it massively speeds up my development, and pairs beautifully with a component based framework like Next. I'm also finding it actually encourages good React development (at least componentisation) since you're typing out such a ludicrous number of classes, the last thing you want is to add any more than you have to.

On top of all this, CSS, especially in teams, just tends to get a bit messy. Tailwind seems to go a long way towards solving that.

Mockend

And, finally, a little bonus tool which I stumbled across when working on my Next.js/Framer Motion demo project - Mockend is a plugin for Github which lets you create a simple JSON file which will then be exposed as a dummy GraphQL (or REST) API instantly, just by pushing this file to a git repo. Super simple, clean, and easy to use. The only thing I wish it offered is the option to expose longer text strings via your API, instead of just single words, to help with the prototyping of different components.

More notesAll notes

Get in touch  —  fraser.boag@gmail.com
Copyright © Fraser Boag 2013 - 2024. All rights reserved.