Learn how to use whileInView in Framer Motion for animation in React
Here are all the articles on Benevolent Bytes, so far there's 67 of them. I hope you gain something useful from the topics I cover and you use these articles, videos and code snippets to learn new skills to succeed in your web development journey.
Learn how to use whileInView in Framer Motion for animation in React
I'm saying goodbye to Gatsby and moving to Next.js, this is why I made the leap
I started out on Medium but here's why I think it's better to self-host your content instead
That Raspberry Pi sitting in your desk draw still has some life in it. Why not put it to use with Elixir and Nerves!
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.
Heroicons are a great set of icons that are easy to integrate without the hassle.
Tailwind CSS might just be worth your time, especially in teams and in agencies.
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 a library for everything and usually lot’s of alternatives but, how do you pick which one is right for your project?
React’s popularity was its ease of use, it didn’t tell you where to put anything...
I coded like it was 1999 and it was great
M1 has been released so what does this mean for web developers?
Create shared layout transitions with Framer Motion on a Next.js app in a few minutes
Having a website is great and there's nothing more satisfying than seeing people read visit your site but Google Analytics isn't the only option. Here's why I chose another option.
Blitz.js is a new framework that's built on Next.js. It's positioned as a Rails-like framework, it's monolithic and easy to use.
Just because Facebook uses it doesn’t mean you have to too
Take a look at the upcoming version of Framer Motion and see how you can create compelling animations in React.
When I first learned to program, it was easy to know where I was going and how to get there. Everything was laid out and there was a logical progression to take. It's easy to progress with a structured course but what happens when you reach the end?
Make a custom circle loading animation in React with Framer Motion.
Hero animations and animating between different view states can be done easily with the useCycle react hook in Framer Motion and a bit of time.
Create a bouncing animation in React
What does the future of web monetization look like and how can we steer it?
Make a loading animation in React that's fully customizable.
You may not think about it but web compatibility can be tricky. This is exacerbated by Internet Explorer, find out what you should do about the IE problem.
Transitions in React Router doesn't have to be difficult. Let's make a page transition with Framer Motion.
Take the first step to animating a react component and recreate a common fade-in animation with framer-motion. A new animation library from Framer which is easy to use and allows you to make animation in react easy.
The United Kingdom of Great Britain and Northern Ireland leaving the European Union is a contentious topic. Brexit has sparked divisions throughout the UK but as a software developer and a foreigner living in the UK, I wanted to know how people in tech felt about what was going on.
The Resize Observer API allows you to detect when a particular element changes size and how large it is.
Reason - a syntax and set of tools packaged up into an easy to use bundle.
The web is a powerful platform that has more to offer than you might expect. Take advantage of the Fullscreen API to craft unique web experiences.
Take a look at how to use the Page Visibility API with a React hook
CSS has a stigma. As web developers we should embrace CSS and design as a whole.
CSS is an essential part of the web and is easy to learn but can be very difficult to master. Why is it so difficult to right?
Can you gain insights without sacrificing user privacy? Yes, take a look at how you can setup web analytics without compromise.
Getting into tech is popular but you shouldn't just study to pass the interview. Cheating the system doesn't help anyone.
Turn a static SVG into something exceptional with React and Pose.
There are many reasons for wanting to host your own blog but why bother when Medium does a great job already? Here are the reasons I chose to take the plunge and give self-hosting a shot.
Pose makes animations in React easy. Why not give it a go and breath some life into your app today.
The reason I started a blog for programming.
So what are Hooks and why should you take note?
Dark mode is in right now. How do you take advantage of this on the web using CSS?
Apple announced its upcoming gaming platform, Apple Arcade, a subscription service that promises no ads and no in-app purchases. I am tentatively excited.
React has great rendering performance yet when it comes to huge amounts of data, like any framework, it can become bogged down. Let's use react-window to improve performance
Code-splitting is now easier than ever thanks to the work the React team has done on Suspense.
Metronome is a small side project I came up with last year to experiment with iOS development.
It’s sometimes difficult to admit when we’re wrong or when we make mistakes but it's okay.
How does Brave stack up against other browsers?
I’ve been trying to cut down on distractions in my own life and I thought I’d share what I do to tame digital distractions, reduce stress and get some productivity back.
I love using React but it can be a weighty framework for smaller projects and that’s why I decided to investigate Preact.
Houdini will give developers access to the browser’s CSS rendering pipeline. This is the future of CSS.
MobX is a state management library which can be used with React much like Redux, its tagline is “Simple, scalable state management” and it definitely delivers on the first promise.
If you are using Redux just to avoid passing props down the tree, the React Context API could replace Redux.
Elixir is a dynamic functional language with a couple of things I really enjoy using, pattern matching and guards are the coolest things I’ve seen.
Elixir is a functional programming language which runs on the Erlang VM, it’s touted as being “designed for building scalable and maintainable applications” and if you squint, it has a very Ruby-esque syntax on the surface.
Linting is a great productivity tool, tools such as ESLint can find potential errors and help foster a consistent style across teams.
Playing around with some of CSS most fun but not very well supported features.
How does one of the most ubiquitous actions on desktop translate to the web? See why context menus are so difficult to achieve and where browser support sits.
Is Internet Explorer still relevant? Do I need to support it and how do I support IE?