Benevolent Bytes

This is a space where we can learn about JavaScript, animate React components and, navigate the ever-changing world of the web.

Scorecards

What are they and why am I creating them? (Click to expand)

I'm trying something a bit different.
I often stumble across some excellent tools, pacakges and services but I hardly ever write about them unless I want to create a tuorial or have a strong opinion on it. But what about all those things I end up using and having trouble fidning again months later?

This is why I'm creating a new type of writing on my blog, scorecards. They're a way of giving you a brief introduction or quick refresher on a package, service or tool. I hope they'll help me out when I'm wracking my brain for that one NPM package I used last year! I hope scorecards will help others out too, they contain links to useful resources, examples of usage, when you might want to use it and some other tidbits.

Experiments

What are experiments? (Click to expand)

I like to create little tools and have fun building things. This is a way to showcase them without going into too much detail that a full article might warrant.

CSS Background Blur Tool

Latest Articles

See all 67 articles

A screenshot of a browser window with a white page with the title "Framer Motion: Using `whileInView`"

Animate when scrolled into view

Triggering animations on scroll with Framer Motion

Learn how to use whileInView in Framer Motion for animation in React

Why I moved to Next.js

Saying goodbye to Gatsby

I'm saying goodbye to Gatsby and moving to Next.js, this is why I made the leap

A very small island in a gulf with a small dwelling on the rocks

Why I host my blog

A little island on the internet

I started out on Medium but here's why I think it's better to self-host your content instead

Elixir and Nerves logos on a blue circuit board

Trying out Nerves

Powering an IoT device with Elixir

That Raspberry Pi sitting in your desk draw still has some life in it. Why not put it to use with Elixir and Nerves!

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.

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