Learn more about Web Development

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 . When plugins and GraphQL aren't enough to justify the cost.

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. It makes building easy and is a lightweight design system to get you started.

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.

React’s popularity was its ease of use, it didn’t tell you where to put anything but here's one way that might help

I coded like it was 1999 and it was great. The web has come a long way and it was nice to just code without having to install build tools.

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

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.

Take a look at the upcoming version of Framer Motion and see how you can create compelling animations in React.

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

Make a loading animation in React that's fully customisable with Framer Motion, an animation library that's easy to use and very powerful.

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.

To help JavaScript developers get started with Reason, I'm going to guide you through bootstrapping a minimum viable Reason project for the web.

The Resize Observer API allows you to detect when a particular element changes size and how large it is.

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.

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?

Pose makes animations in React easy. Why not give it a go and breath some life into your app today.

So what are Hooks and why should you take note?

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.

This site uses cookies and we’re going to let you know about it whether you like it or not, the lasting effect of GDPR on the web and why it doesn’t have to be this way

If you are using Redux just to avoid passing props down the tree, the React Context API could replace Redux.

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?