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…
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.
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!
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.
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.
On a page there are some buttons.
There might be up to three buttons.
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);
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.
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!
Web Developer. Into podcasts, punk music, movies and video games.