Benevolent Bytes

Become a better React developer, CSS wizard, JAMStack master, library explorer.

This is a space to help you learn about JavaScript, animate React components and, navigate the ever-changing world of the web.

Latest Articles

See all 61 articles

Cartoon person seeing an idea lightbulb in their mind's eye on a light blue cloud background

Thoughts on Tailwind CSS

What CSS utility libraries gets right

Tailwind CSS might just be worth your time, especially in teams and in agencies.

The image gallery we'll add animations to with Framer Motion

Create an image gallery in Framer Motion

Animating between components in React

A simple interaction where the user can click on an image on the right side and it will expand over to the left, becoming the primary image. This technique could be used as an image gallery or a product chooser for an ecommerce site.

The importance of the README

What I look for in a library

There’s a library for everything and usually lot’s of alternatives but, how do you pick which one is right for your project?

How to organise React components

Embracing locality for react file structure

React’s popularity was its ease of use, it didn’t tell you where to put anything...

How it feels to write a web page from scratch in 2020

Shedding the burden of modern tooling

I coded like it was 1999 and it was great

4 logos in a diamond layout on a black background. In a clockwise direction starting from the top, the M1 chip, HTML5, JacaScript, CSS3

The implications of M1 Apple Silicon for Web Developers

How architecture will affect daily development and what the future holds

M1 has been released so what does this mean for web developers?

Page Transitions in Next.js with Framer Motion

Using AnimateSharedLayout in Next.js

Create shared layout transitions with Framer Motion on a Next.js app in a few minutes

How to create a React + Flask + GraphQL Project

Flask + React Tutorial

What we're making To demonstrate how to create a React frontend app that communicates with a GraphQL API served by a Fl…

There's plenty more articles to choose from, 61 in fact.
So why not check them out!

Read all articles

Coding in Framer series

Watch my free tutorial series on how to get started coding in Framer.
We'll use the popular design and prototyping Framer Web to craft beautiful user interfaces but we'll make them more rich and interactive with code. I'll take you from your first code component in React, smooth animations with Framer Motion and handoff into a code project.