Simple icon systems using SVG sprites
SVG sprites are a native way to group all your icons together and reference them from HTML without needing a templating system…
oli
- weird web person
- previously @founderscoders
- previously @ticketmaster
- he/him
Deploying web apps to Fly.io
With the demise of the Heroku free tier looming I've been searching for an alternative place to deploy simple web apps. It looks like Fly.io is emerging as a frontrunner, so I thought I'd play around with it and document my experience…Frontend testing in Node with jsdom
Sometimes you want to write some simple tests for a JS app that runs in the browser. Unfortunately this can be quite difficult, for a number of reasons. However with the right configuration the jsdom library can help us easily test our DOM code using Node so the tests run right in our terminal…Using JSDoc to check your code
It can be difficult to keep track of what each value is while you're writing code. This becomes a bigger problem in larger codebases with lots of abstraction—when data passes through several functions it's easy to forget what you're expecting to get back. JSDoc is a tool/convention that can help solve this problem…Making Git push a bit friendlier
I have always found pushing my local Git branches to a remote repository a bit confusing. In my experience mentoring beginners this definitely confuses them too. I decided to sit down and figure out practical recommendations for working with it…Building boring websites with Next.js
So Next.js is a great framework for working with React. It comes with a bunch of stuff configured out of the box that you really don't want to worry about when you're starting a project. However it has inherited a major problem from the wider React ecosystem: it massively overcomplicates making what should be a simple bloody website…Avoiding 404 errors with Single-Page Apps
I see the same problem happen again and again to juniors building their first Single-Page App (SPA). Everything works fine locally, but as soon as they deploy to a hosting platform like Netlify they get loads of "404 Not found" errors trying to load pages. There are lots of resources documenting how to fix this, so I'm also going to try to explain why this happens too…Better dev environments with npm workspaces
As of version 7 npm now includes a feature called "workspaces". This is designed to help you manage multiple separate packages within a single project…How to make your own Git hooks
It turns out Git hooks are pretty simple when you strip them back to basics. I always thought they were a sort of arcane magic. My only experience with them was trying (and often failing) to chant the right combination of Husky, lint-staged and Prettier commands required to ensure new code is formatted consistently…Responsive CSS For Beginners
Responsive Design can be a scary thing to a beginner. It's got a special name, which makes people think they need to do special things to achieve it. I'm going to explain a bit about how responsive design developed, then demonstrate making a simple web page work on any screen size with very little CSS…How to make your terminal nicer to use
I mentor a lot of junior developers, and it makes me sad to see so many stuck with the ugly, hard-to-use default terminal setup their machine came with. As a developer you probably spend a large chunk of your day using it, so it's a good idea to invest a little bit of time in making it look prettier and work more like a modern application…Better native form validation
All but the simplest forms need some validation to help users enter the right information. I usually want slightly more control than native HTML5 validation, but without re-implementing everything in JavaScript. I recently discovered a great technique for enhancing the browser's built-in validation…Build your own analytics with Netlify Functions
I recently decided I would be more motivated to write blog posts if I had some indication that people were reading them. This meant setting up some kind of analytics…Pitfalls of async functions
Async functions can seem like the holy grail for JavaScript developers who struggle to manage their asynchronous code with callbacks or promises. However there are some pitfalls that aren't necessarily obvious at first…Schedule Netlify deploys using GitHub Actions
I recently rebuilt the Founders and Coders website using the Eleventy static site generator. I hit an interesting problem making an events page: I wanted the page to be up-to-date every day, which is hard when your site is just a collection of HTML files. I could have used client-side JS to fetch the event schedule and render them, but that felt like cheating when the rest of the site is fully static. Instead I decided to rebuild and re-deploy the site at midnight every day…Where we're going, we don't need servers
One of the nicest things about building a single-page app is that you don't need a server. All your application logic can happen client-side, which means you only have to deploy some static HTML, CSS and JS files. There are a plethora of great (free!) options for this. My favourite is Netlify…Setting up a project from scratch
Setting up a project can be as daunting as starting an essay. You sit staring at the blank white page (or dark mode editor) wondering where to begin. I'm going to describe the steps I would take to create a new web project. It will be JavaScript focused, since that's the ecosystem I'm comfortable in…First-class functions in JavaScript
In JavaScript functions are treated like any other variable. This is sometimes referred to as “first-class functions”. The concept can be tricky for beginners, so I'm going to try and explain exactly what it means…A complete guide to making web pages from scratch
It can feel confusing when you're first learning to code for the web. You can get pretty good at HTML, CSS & JavaScript in isolation (using online tools like freeCodeCamp, CodePen and repl.it but struggle to put all the pieces together and create an entire web page on your own…Minimum viable GraphQL: the client
GraphQL tutorials often assume you'll be using a client-side library like Apollo or Urql to manage your data-fetching. This can make it hard to separate what's GraphQL itself from stuff implemented by the library…Minimum viable GraphQL: the concepts
GraphQL is a specification for APIs developed at Facebook. It consists of a language for querying data and a runtime that understands those queries and gets the right data. In effect it's an agreed-upon convention with well-defined rules for fetching and serving data…Two ways to conditionally set object properties
A junior developer recently asked me how they could conditionally set a property on an object. They didn't want an always-present key with a value of `undefined`, they wanted the property not to exist at all…Testing your UI with React Testing Library
Testing Library is a fantastic tool for writing UI tests. The base library works for testing anything, but there are framework-specific versions—I'll be talking about React Testing Library here…Stop exporting things, I'm begging you
I honestly believe the "one component per file" ESLint rule is the smallest thing with the most negative impact on React codebases I've worked in…Gatsby is the future
I think Gatsby is the future of the web. I'm going to explain why by comparing it to WordPress, the go-to platform for websites over the last fifteen years. I think Gatsby already meets or exceeds most of the things that make WordPress so popular, so it's well placed to become the next huge thing…Static typing in JavaScript with Flow
Flow is a library for adding types to your JavaScript. It's a way to get some of the benefits of a statically typed language whilst still writing the JavaScript you know and love…Introduction to the DOM
When I first learnt JavaScript I struggled to understand how to apply that knowledge to practical web pages. I wanted to build things that actually did stuff, rather than static HTML/CSS pages or JavaScript things that only logged text to the console…Introduction to Redux
Redux attempts to make state changes predictable by restricting how and when they happen. It separates your state management code from your UI code…Create a flickering image effect using CSS sprites
I just added a flickering faux-motion effect avatar to my About page. The technique behind it is fun (and requires relatively little code)…How to create a Ken Burns hero image effect
Lick are a shopper marketing agency with a strong focus on creative design, which meant their site needed to be visual-heavy. They wanted the top of the homepage to communicate this, whilst also subtly nodding to some of the big brands the agency works with…Why I donate 10% of my income to charity
If it is in our power to prevent something bad from happening, without thereby sacrificing anything of comparable moral importance, then we ought, morally, to do it…A readable guide to writing more readable content
Writing informative articles for the web is not like writing for other mediums. People read differently online — they open lots of links at once and flick from tab to tab, scanning up and down each page to find the information they want as quickly as possible. The easier to read and absorb your writing is, the more people you will reach…