A series based on a Gatsby talk I gave at BrumJS, a Javascript Meetup in Birmingham, UK.

In this series I’ll be looking a bunch of different aspects of Gatsby, a Static Site Generator based on React.js and GraphQL.

This post is an introduction to the series and to Gatsby. What is it and why is it good?

I previously wrote a tutorial about setting up ESLint in a React project. We initialised the project, added the linter, created an npm script and looked at different linting rules. Now I’m interested in another extra.

This is one of the best parts of my workflow. It started actually as something that I used in my day-job. When I’m not a masked React vigilante I work for an agency on one much larger React app, and ever since I joined the project back in December, I could not commit code that had linting errors. Great, right? All my lines have…

I love ESLint. It’s a pluggable linter that’s going to tell you if you’ve imported something and not used it, if your function could be short-handed, and loads of other little gotchas that you can fully configure. I really think that it makes me a better developer — I know the things it normally picks me up on, so I learn not to do them! Let’s go through how I get up and running in a new React project with ESLint installed. In reality though, this setup could be used for any Javascript application. …

How about that title there? Yeah it’s rough.
The other day I went through the process of adding new code to a large commercial GitHub repository. I sort of stumbled through it, so I wanted to make a quick tutorial in case you’re lost too! Or in the much more likely event that I get lost doing it in the future — it’s pretty straightforward.

Local Git Flow

First of all let’s look at Git Flow, the process by which we add code to a website in Git. I’ll go through a pretty common branch model, but lots of people and teams run…

A little while ago I had the six-monthly itch to redo my portfolio site, and I decided I was going to learn to use Gatsby. But that seems to be only half the battle. After you’ve built your front-end, how do you decide on the back-end? There’s so many out there!

Background — Why Gatsby?

The only thing as abundant than Headless CMS options is Static Site Generator options. From Hugo (built on Google’s Go language) to Jekyll (Ruby) and even Nuxt which is based on VueJS. I picked Gatsby out of the pack for a number of reasons, chief amongst which is that…

This January I, like many others am Running Every Day to get fitter, step up to a challenge and raise money for Mind – the mental health charity. Running every day is not only challenging, it’s also dangerous. As injury and fatigue are knocking at the door I aim to write about what I think the right way to go about it is, from a purely amateur position.

About Me

I’ve run a few times in the past but certainly not regularly or recently. …

This should be just a short blog to show you guys something pretty cool that I learned recently.

Here goes:

On a page there are some buttons.

There might be up to three buttons.

Style appropriately.

Option One: Javascript

So we count the number of boxes, then add a class such as one-of-three to assign some width-dependent CSS. Something like this:

var wrapper = document.getElementById('div.buttonWrap');
var count = wrapper.childElementCount();
wrapper.classList.add('children-' + count);

This isn’t bad. Sure, it’ll work, but what if we could remove that JavaScript altogether? What if we can do this with just HTML and CSS?

A Better Way

Or at least more interesting.

This is going to be my first tutorial (and first Medium post) going through my first couple of forays with ReactJS. I’m going to update it as I go as I’m new to this myself.

Let’s get going.

Getting Started

React is a Front-end Javascript Framework not-dissimilar to Angular2 or Vue.js. So we’re talking components, we’re talking ES6, we’re talking folders.

To start off, here’s some really useful links to docs and tuts. If you have the patience to read through all of the docs… Then good on you. If not, they’re great for a reference if you get stuck!

Ross Whitehouse

Web Developer. Into podcasts, punk music, movies and video games.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store