A recent trend in AI has become this idea of "loops". Rather than you doing prompting and working with the AI to design and implement, you instead give it a higher level goal and let it roll. You build a system to let the AI make decisions, build and verify its work, all with the aim of completing your goal. As Addy Osmani puts it : A loop here can be thought of a recursive goal where you define a…
Over the years I have become very comfortable as a developer who spends most of his time in the terminal. I've spent far too long tweaking my dotfiles to make things just how I like, and I have been a Vim/Neovim user for the best part of fifteen years. This trend has continued into the AI era. I've tried various IDEs and UI tools, but I always come back to Claude Code, Gemini CLI, and others. The…
I've been using Claude Code as a pair programmer, debugger, and feedback collector while I playtest my game, OnTrack . The setup has worked so well that I ended up building a small custom skill to make it scale and in this post I'll take you through how it works. (That last DevBlog was in 2024 (!), but I have continued to work on the game — with AI my pace and progress has quickened, even if…
I wear headphones a lot and I like the option of wearing over-ear and in-ear headphones at any one time; I find that I prefer my over-ear for deep work sessions but in-ear are much easier for video calls or casual listening as I'm cooking dinner, walking the dog or on the train to the office. One thing I have always struggled with is comfort, particularly for in-ear headphones. I am an Android…
Since ChatGPT burst onto the scene in November 2022 it and its competitors have taken software development by storm. We've seen companies go all in on AI and set expectations that new hires will only be prioritised if AI can't do the job. This has caused a general level of anxiety amongst software engineers that their roles and disciplines could be under threat. Avoiding the initial hype train I…
As 2024 comes to a close, I wanted to take a moment to reflect on what has been the most incredible and challenging year of my life. In January our child Leo was born and our lifes as we knew them were changed forever. There is plenty to be written on the highs and lows of being new parents and without doubt it has been the most difficult and rewarding year of my life. This year it has been…
I recently lost an evening to debugging a subtle issue which highlights a potential pitfall in the interaction between TypeScript enums and "falsy" values in JavaScript. Let’s look at a scenario that illustrates this problem: Spot the Bug Consider the following code where a function returns either an enum value or null depending on whether a user is logged in: const enum Status { Inactive , Active…
As I write this blog post I am sat in an AirBnB in Utrecht reflecting on two incredibly inspiring days at performance.now() 2024 . I was not only fortunate to attend but to be asked to talk, and it was a real privilege to get the chance to update the attendees on all our recent work updating the performance panel with a myriad of new features. Image courtesy of Estela Franco on Bluesky Being…
If you were to look at my Steam library you would see that most of my games are strategy and logistics based (think Factorio) but with a healthy dose of transport methods and networks (think Transport Fever 2 and OpenTTD). I've always wanted a very specific, niche game focusing on building passenger networks that simulate how passengers travel - something I have never quite been satisifed with in…
It's very common when working with TypeScript that you will have a type that declares a list of values, such as an enum or union type: enum SupportedColour1 { RED , YELLOW , BLUE , } type SupportedColour2 = 'RED' | 'YELLOW' | 'BLUE' And then you will often have functions that need to run differently or return different values based on what variant is passed in: function codeForColour1 ( colour :…
I have used Vim or variants like Neovim ever since the second year of university, which means I've been using Vim for nearly 13 years (!). In that time I have gotten very comfortable navigating my way through code and codebases using Vim, and migrating to Neovim and its LSP setup has replicated an experience very close to what VS Code provides, but with all the benefits (in my opinion) of Vim. One…
Recently a computer upgrade went from one graphics card to a new case, new fans and a new graphics card. Along the way I learned a bunch and I'm writing this blog post for future reference when I next perform a PC upgrade. Check your graphics card fits the case I was upgrading from a very old, and small, GTX 1060 up to a very large GTX3080...naively assuming that my existing case would fit. It did…
My daily workflow often involves repeatedly running tasks, whether that be build commands, unit tests, or some other scripts. My ideal workflow is to have a terminal split on the right hand side, and then be able to send tasks to it. The built in terminal Neovim's built in :terminal allows me to easily open a terminal as a split in Neovim, and I have a few custom keymaps to jump to and from it.…
In October 2021 I took on a new role within the Chrome DevTools team as a Technical Lead (TL) of the DevTools Performance Tooling team, who are responsible for all things website performance inside of DevTools, the most well known being the Performance Panel. My journey to this point had begun a year prior when we started building a new panel that would come to be named Performance Insights. I was…
Just over two years ago I left a role at a London based startup where I lead development of a large, React based e-commerce frontend to join Google to work on Chrome DevTools. My initial focus was to introduce Web Components as the new fundamental building block of all new DevTools features and UI. With the recently launched Recorder panel along with others, there are now large parts of DevTools…
On every team at every company I've been at prior to my current role, the advice was simple: don't check your node_modules folder into your version control system (which I'll refer to as “Git” for the rest of this article…). This seemed like solid advice for multiple reasons: The code within node_modules isn't authored by the team directly. The code within node_modules is often quite large and…
Although occasionally you'll be given a task to complete which can be completed in no more than a few hours, most of your work is likely going to consist of features that will take multiple days or even weeks to complete. I've found that the longer a piece of work takes, the more likely I am to lose track of my progress, forget which part of the feature I was going to build next, or realise I've…
Last year I created Pomodone , a small time tracking application based on the Pomodoro technique of working in 25 minute intervals. It's a pretty basic app; it has a 25 minute timer (that runs in a Web Worker) and saves a history of your "poms" to a small Firebase database. I initially built it using React (well, Preact actually) but I then started to play around with Svelte, and decided…
Over the next few weeks I'm going to be sharing some videos demonstrating parts of my workflow in VSCode - from managing changes with git (today's video), to reviewing pull requests, to running tests, and so on. Today I want to share how I use the VSCode Breadcrumbs with a handy keyboard shortcut and a bit of configuration to make jumping between files in the same directory really efficient: You…
Since moving to Windows 10 something I've always struggled with is how to remap keys on a keyboard. I don't remap much, but one remapping that I've used now for about ten years is that I remap Caps Lock to ESC . This started when I was learning Vim, and has become so commited to muscle memory that I can't go back from it and I'm rendered useless on any machine that doesn't have this mapped! On Mac…
Back in October 2019 I'd taken the plunge and tried Windows for my development work . It was largely a succesful experiment. By using the Windows Subsystem for Linux (WSL) , I was able to run most of my tools effectively in Linux, something I'm familiar with, and with VSCode's WSL Remote plugin , I could run VSCode in Windows connected to the Linux environment provided by WSL, and things felt very…
Code comments often get a bad reputation amongst developers as a waste of time, or a sign that your code could be improved. Here's a quote from a CONTRIBUTING.md file I found on GitHub (and there's many, many more like it): Comments should be avoided. If the code cannot be understood without comments, re-write the code to make it self-explanatory. I think this is pretty poor, incorrect advice the…
Testing JavaScript code that's asynchronous can prevent its own set of challenges that you have to ensure you deal with when writing your tests. I recently came across a test that fell foul to the asynchronous code it was trying to test and in this post I'll show you how to look out for these tests and how to fix it. The problem Let's imagine we're working on an API that lets you make requests to…
When you get a code review request from a colleague, what do you focus on? What reaches the bar for what you consider something that's worth commenting on? And do you make it clear when you're making a comment on something vs considering something so important to change that the code review shouldn't be merged without it? Code review is hard. I've seen people do it really well and people do it…
We've all been there. The one corner (or maybe there's multiple!) of your application that makes you cringe every time you have to touch that part of the code. The proposed feature that you hope doesn't make it into the prioritised list of work because implementing it means diving deep into the guts of the nasty corner of your codebase that is hard if not impossible to work on with confidence. At…
Over the next few weeks I'm going to be sharing some videos demonstrating parts of my workflow in VSCode - from managing changes with git (today's video), to reviewing pull requests, to running tests, and so on. Today I want to share the rewrap plugin for VSCode. It's a fantastic tool for easily wrapping code comments, Git commits, or Markdown files to a certain line length and I use it all the…
When I think about keeping code simple, I think about the progression of your average software engineer from junior to mid to senior, and this one commonly mentioned part of that journey: Junior engineer : writes function implementation over multiple lines, favouring simple method calls and comments over succinctness. Probably misses some chances to improve the performance or readability, or…
Over the next few weeks I'm going to be sharing some videos demonstrating parts of my workflow in VSCode - from managing changes with git (today's video), to reviewing pull requests, to running tests, and so on. Today I want to share the Magit plugin for VSCode. It's based on the Magit plugin in Emacs (which I have not used) and aims to provide an easy to use interface to manage git changes and…
Today I'm kicking off a new series on writing and maintaining JavaScript software titled "Designing Good JavaScript" by looking at learning at our mistakes. I hope you enjoy this post and the series! How many times have you loaded up a file in your codebase to make some quick changes, only to be confused by the choices you made six months ago? How many times has that architecture you worked so…
In the last post we tackled writing tests for bad JavaScript code and now we have tests covering the behaviour of our code we are ready to do some refactoring and improve the code to make it easier to work with. The code at hand generates filenames for media associated with a book. Here's one of the tests to jog your memory: const fileName = Publisher . generateFilename ( { publishOn : new Date (…
I like refactoring code and thinking about software design. It's something I speak about, blog about and enjoy doing as part of my job day to day. A core part of any refactoring is knowing that you haven't broken any functionality and the best way to have confidence in that is by having a set of tests you can run to ensure you've not broken anything. But what do you do when there are no tests? You…
I've been working recently on Puppeteer and migrating it to TypeScript. This has presented the opportunity to do some refactoring and today I want to share a recent refactoring I did to remove passthrough variables . What is a passthrough variable? A passthrough variable is a variable that gets passed through multiple method calls before it gets given to the actual place in which it's used.…
I like keyboard shortcuts. I use Vim to edit code, which is entirely keyboard based, and generally I feel better and more productive if I can use the keyboard to get things done on my computer. But I've always found learning new keyboard shortcuts hard, particularly if I've already found another way to solve my problem already. Let's say I use an app and a core piece of my workflow involves two…
I've used Vim on and off for a long time. I got introduced to it at University by a lecturer, tried it, didn't get it, and moved on. I then decided to learn it more seriously and spent a lot of time configuring it, as my dotfiles repository shows. It's on 1203 commits! Often in Vim you'll want to have different settings for different filetypes. Foexample I want to configure Markdown files to have…
Have you ever come across code that you wrote six months ago and thought "what was I doing?". I know I have! And I know that in the past I've been too easy to beat myself about past mistakes instead of reflecting on why the code I wrote six months ago is now causing me problems. Worse still I've caught myself criticising someone else's code that they wrote six months ago. "I can't believe Bob…
In my first post of the year about technical choices I'm making in 2020 I finished with a point about letting tools make choices for you: I've become a fan of putting more of that burden onto the technologies I'm choosing such that I can focus in on the actual application. I would be surprised if the tools that catch my eye in 2020 aren't ones that follow this pattern. This has been a trend for me…
Back in April 2012 I registered and put the JavaScript Playground online with a first blog post about using objects in jQuery's .css() method . Over the years I've written over 100 posts (admittedly far less than I'd like!) about a variety of topics and have been fortunate enough to have many people say very kind things about my content and how they've found it useful. I've always found that the…
Happy New Year! The world of frontend web development is continually changing with new technologies, ideas and frameworks springing up all the time. Whilst this can get overwhelming, it's also an exciting space to be in with so much opportunity to try new things. Today I've picked out a few libraries, languages or ideas that I'm looking foward to trying in 2020. Some of these aren't necessarily…
I've been an exclusively Mac developer ever since I bought a second hand MacBook (remember the all white, plastic ones?). I absolutely loved it and as I got more into software development and discovered the terminal it became hard for me to see how I could go back to Windows. When I started my first full time engineering role the company provided a MacBook Pro and a Cinema Display. This was so…
When working on a part of a user interface I like to constantly try to think about potential bugs that could occur, potentially when looking at taking input from users. Most components that take input will have code to prevent invalid input and bugs and you can't ever avoid this, but sometimes the right data structure can remove the amount of bugs you'll have to write code to deal with. To…
If you've followed me on the internet for a while you'll know that I'm a big fan of Elm and I've written and spoken a fair bit about it. There are some great guides for Elm out there but when I was learning I struggled with being unable to find examples of how Elm apps were put together, particularly as they got bigger. So, now I'm a little more comfortable with Elm than I once was, I set about…
When I first started working with GraphQL APIs my first challenge was to decide what GraphQL frontend library I wanted to use. I can remember spending all morning exploring all sorts of options, from small libraries like graphql-request to slightly larger ones like urql and finally the most well known like Apollo . These are all great libraries - in fact we use urql at work - but at this point in…
One of the things I like to spend a lot of time on is data structures. It's one of the first things I think about when building something: what data do I have to work with, and what's the best format for it to be in? In my experience if you can get the data format correct everything else should fall into place; a data structure that allows you to read and manipulate the data easily is going to be…
babel-plugin-macros is a project that I've followed with interest even though I'd never had a chance to use it. Today that changed and I wanted to share my use case and my very positive experience using it. What is babel-plugin-macros? The key feature of a Babel Macro is that they run at compile time . Rather than writing JavaScript that gets bundled and executed in the browser, writing JavaScript…
One of the best features of React is that it doesn't force much convention and leaves a lot of decisions up to the developer. This is different from say, EmberJS or Angular, which provide more out of the box for you, including conventions on where and how different files and components should be named. My personal preference is the React approach as I like the control, but there are many benefits…
If you missed the prior videos, you can find them here: Part 1 and Part 2 . Today we're implementing more of test-data-bot's API in TypeScript and diving into using 3rd party libraries, specifically the FakerJS library. We'll see how best to think about and model types by recognising a situation where our first typed approach has failed to provide clarity, and see how time thinking about…
It's fair to say that React 16.8 and the introduction of hooks has really changed how we write React. Hooks are one of those APIs that make you realise the flaws of the previous approach after you stop using it. I remember being very skeptical of hooks when they were first released, not thinking that the previous class based design had many flaws, but I've since come to realise I was very wrong,…
If you missed part one, you can find it here . Today we're implementing more of test-data-bot's API in TypeScript and diving more into types, interfaces and figuring out how best to model our API through TypeScript. I talk through the pros and cons and my thought process as we figure out the right approach. You can watch it on YouTube, either by clicking here to view it directly or using the…
When I got my first job after university I was ready to get stuck in. Through university and side projects I'd done a good amount of programming and thought that I was more than ready for my full time career to start. Recently I've been looking back and thinking that I definitely had some misconceptions, weird approaches and inefficient ways of working. These are all things I wish I could go back…
I've been wanting a project to dive into to help me learn TypeScript, and the other day on an issue for test-data-bot , someone asked if TypeScript definitions were available. I decided this was a good way for me to dive in and try converting a library to TS, and I decided to record it and share for anyone else wondering what the process looks like! Rather than create streamlined, snappy, short…