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 63 articles

Cartoon person halfway in a portal seeing 3 bottom halves of different people stuck in portals

Using Traefik for routing paths to web apps

Setup a reverse proxy to simplify routing

Working with a single web app that handles routing is pretty straightforward, but what about multiple web apps? Let's try Traefik to simplify it.

Magnifying glass on a pale red background with abstract shapes surrounding

The best option for picking one-off icons

Finding icons for your project

Heroicons are a great set of icons that are easy to integrate without the hassle.

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?

There's plenty more articles to choose from, 63 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.