Digital Garden

By Rich Haines

Rich Haines GitHubRich Haines Twitter
All3DAnimationAtomic DesignCSSGITJavaScriptNextjsServerlessTutorialTypeScriptWhatever

Add texture to a cube

Add texture to a cube in three js using react-three-fiber

Our finished piece will look like this: Let's just cover basic setup real quick. Setup Use a codesandbox (for ease), choose the react preset and install the following: Open the index.css and remove…

Notes on react-three-fiber

Some notes on using react-three-fiber

This is a collection of notes im putting together to better understand how to work with 3D stuff in React. Im writing it as to myself, as that's who it is for, but if others find it useful then that's…

Notes on GSAP

Some notes on using GSAP

The basics I'm trying to up my css and animation game, this is a record of my notes taken while looking into GSAP . I'll constantly be adding to it as I go. The main purpose of this record is a…

Atomic design and Storybook

Initial thought on Atomic design and Storybook

Im currently drawing up a proposal at my work to introduce Storybook into our webui workflow. At the moment we have a huge TypeScript project with lots of components that have been built upon over…

CSS grid responsive cards

How to create responsive cards with css grid

Responsive cards with css grid. Whenever we want to display a bunch of cards on a page we want them to be responsive. We want the columns and rows to be dynamic depending on the screen width. To that…

CSS grid with theme-ui

Using css grid with theme-ui

When i started using theme-ui i was already an avid emotion user. I would splatter my files with styled components without really thinking about if they could (or should) be shared. It was a well…

Everyday GIT commands

Handy everyday git commands

This is a collection of notes for everyday git commands. Add an existing project to git Create a new repository on github, then from the projects root: First we are initializing the local directory as…

Notes on JavaScript

Some notes on Javascript stuff

Ive been taking the Beginner JavaScript course by a certain Wes Bos. These are my notes. This will be updated as and when i cover more ground in the course. I highly recommend you purchase it, its…

Date object snippet

Some handy little code snippets for the JavaScript Date object

Getting the locale date The toLocaleDateString method on the date object lets you pass in the locale of choice and returns a string formatted date with forward slash separators. Replacing the slash To…

Add Theme-ui to Next

Adding theme-ui to a Nextjs project

How to add theme-ui to NEXTjs Today i decided to finally take the plunge and start learning NEXTjs . I've been working with Gatsby for two over years now, have created many sites and themes and…

Custom FaunaDB hooks for new project

Some custom react hooks that abstract the faunadb client

I've got a new project on my mind. It's going to be a mobile app created with Expo and FaunaDB . I know that Fauna can handle user authentication, im currently unsure if I will use that or not as I…

FaunaDB CRUD hooks (WIP)

React hooks that abstract the faunadb client

While still a work in progress, learning in public is fun! With that in mind id like to share v1 of my FaunaDB CRUD hooks. Ive tested them locally and they work. They provide simple abstractions…

Setup Expo with FaunaDB via Vercel

Faunadb and mobile development with expo

Setup Im currently working on a project which will be a mobile app for parents to swap unused items. To do this im using Expo with a FaunaDB database. I had already setup a project with Fauna and…

Create a landing page with Next and MDX

A tutorial series covering making a landing page with Next and MDX

I recently received Colby Fayocks 50reactprojects and thought it would be a fun idea to run through some of the example projects as tutorials, while putting a little spin on them. So we begin with…

First look at RedwoodJS

A first look at the redwoodjs framework

Introduction to RedwoodJS RedwoodJS is a new opinionated full stack, serverless web app framework that takes all the good parts of what a JAMstack website offers and packages it up into something that…

How to make a gatsby ecommerce theme. Part 2

Part 2 of creating an ecommerce gatsby theme

We have setup our project but it doesn't do much right now. Lets add a backend to store our products! This is part 2 in a series of tutorials. The format is step by step. So lets recap what we have…

How to make a gatsby ecommerce theme. Part 1

Part 1 of creating an ecommerce gatsby theme

We're going to go from start to finish and create a gatsby theme that you can deploy as an npm package. In the first part we will cover the base setup of the project. This is part 1 in a series of…

Jamstack and the power of serverless with FaunaDB

Tutorial to create a harry potter site using faunadb and serverless functions

In this article we will create a Jamstack website powered by Gatsby, Netlify Functions, Apollo and FaunaDB. Our site will use the Harry Potter API for its data that will be stored in a FaunaDB…

Redwood ecommerce with Snipcart

A tutorial to create an ecommerce site with redwood and snipcart

Im my previous post First look at RedwoodJS i took a look at Redwood with fresh eyes and documented what i found interesting. I did have an idea to just outline adding snipcart to a RedwoodJS…

use-cloudinary - Controlling our folders

How to control the cloudinary folder via a serverless function

Following on from my article about the use-cloudinary - useSearch hook , this time we'll be streamlining our code and diving into some of whats possible with when manipulating our cloudinary folders…

use-cloudinary - useSearch

How to use the useSearch hook from the use-cloudinary lib

Following on from my article about the use-cloudinary useUpload hook - use-cloudinary - useUpload hook , this time we'll be taking a look at the useSearch hook, and its a powerful beast! My use case…

use-cloudinary - useUpload

Introduction to the cloudinary useUpload hook

Cloudinary is a great resource for handling and managing your images, with dynamic query string manipulation of the images you can deliver optimized, pictures to fit any applications needs. I've…

React context with TypeScript

Create a context that does away with null checks

When we create a context using TypeScript the compiler expects us to provide a default value, usually, but not always, this is set to null or undefined. This is fine in a JavaScript project but when…

A Separation of concerns

About breaking things up to make a whole

I was having a conversation with my wife about her career direction, not what she wanted to do but the supporting scaffolding around it. We reached the point where we started to discuss how to…

How I created a company then sold it

I once started a company, grew it then sold it

The idea Before I was a software developer I was a scaffolder, for 6 years. It wasn't what I wanted to do, I had moved to Sweden in 2010 having gone to university in London and met my would be wife…

A Digital Garden

Spilling my thoughts on what blogging means to me

I've spent the last few days trying to get some work done on a piece for FaunaDB in the few half hours I have while my baby son sleeps during the day. He's not yet 1 year old but we have him on a sort…

Pinned blog post

How to add a pinned blog post to your blog index

So let's say you have your Gatsby blog all setup using MDX for your blog posts. Perhaps you have written a post that you want to pin to the top of your list of posts in your blog index, this post is…

Side project distractions

A new side project idea

A couple of weeks ago I had an idea, I'd been in the process of updating my profile picture across my different social media platforms, as well as correcting some bio info. During the undertaking of…