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…
Chakra-ui external link with SVG icon
Use an SVG icon as an external link with Chakra-ui
I love using Chakra-ui , it's enabled me to develop faster and get my ideas down on the page so I can concentrate on other aspects of development. External links are not an issue to create, and…
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 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…
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…
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…