Software engineer and consultant with >15 years experience. Specializing in product engineering, design systems, and full-stack web development with React and TypeScript.
WordPress sites are steadily becoming more accessible out of the box with the increasing adoption of Full Site Editing (FSE) . This is great news for the web, as it reduces the responsibility of making sites accessible on individual developers and site owners, shifting more of that burden onto the platform itself. One a11y feature that is available by default in WordPress 5.8 and later is the…
Many routing packages for React don’t include any sort of focus management out of the box (including the most popular, React Router). This means that after a route change the browser’s focus will linger on the most recently focused element, even if that element is no longer in the DOM. This can be confusing for users who are navigating using a screen reader and/or their keyboard. If you’re…
[ Skip straight to the code ] In a React application, an error boundary catches JavaScript errors thrown during the rendering of other components and optionally displays some fallback UI, typically an apologetic message and next steps to try. It may have other functional responsibilities like passing details of the error along to a monitoring service such as Sentry or New Relic. Without an error…
If you’re a JavaScript developer you will be familiar with console.log , a function for printing a value to the console. console.log is often used for debugging, and if you’re a great JavaScript developer like me, you mostly use it to determine whether your code is working by printing things like 'asdasdsds' or 'HELLO IS THIS RUNNING?!?!' . const msg = 'JavaScript is fun' ; console . log ( msg );…
A former coworker and I had a system for letting each other know about dependency changes in shared codebases. We wrote npm install on a post-it note and would stick it to the other person’s monitor. Once the post-it note eventually lost its stickiness, we just screwed up and threw it at each other. By the end of the project, the universal sign for ‘update your dependencies’ was to throw a random…
Say you want to display a numeric value on a webpage with a count-up animation, like this: There are a few popular libraries that will do this for you, often with lots of configurable bells and whistles. I’m always reluctant to add a dependency to my application that I could write myself in under an hour ( and you should be too ), so I did just that. Here’s the code in vanilla JavaScript using the…
Do you have a link on your website that looks like this? < a href = 'mailto:yourname@yoursite.com' > Contact </ a > If so, you are probably frustrating a lot of your users. Mailto links instruct the operating system to open the default email client and create a new draft email with the ‘to’ field already populated. That’s fairly presumptuous behavior at the best of times, but it’s especially…
If you had been watching BBC One at 11pm on 25 October 2003, you would have witnessed one of the most talked about moments in British television history. This was the time-slot of Parkinson , then the BBC’s flagship chat show, hosted by veteran interviewer and national treasure Michael ‘Parky’ Parkinson. That night’s top-billed guest was Meg Ryan, fresh from a messy divorce and in the midst of a…
Writers sometimes talk about finding their ‘voice’, a writing style that allows them to tell a story effectively. Every writer’s voice is different; you could probably identify your favorite author given just a few paragraphs of their writing. I’ve been keeping a blog for about seven years, which is to say that I wrote my first blog post seven years ago and have published about thirty more posts…
Last summer my girlfriend and I spent a week in Iceland. We flew from Reykjavik to Akureyri and drove back via the Hringvegur - the ring road that encircles the island’s volcanic, inhospitable inner territory. Iceland is sparsely habited to a degree that makes it feel otherworldly, but is nonetheless a highly popular tourist destination. We were two of over 2 million tourists that visit Iceland…
In digital product development, the process of turning visual mockups into code is sometimes called ‘translating’ a design. This choice of words highlights the fact that the design-to-code stage is not a rote formula that takes in pixels and spits out code, but an interpretation of meaning from one language to another. A translator must be proficient in both languages if she is to effectively…
Online ads account for a staggering amount of the data that our browsers consume. They increase load times by an average of five seconds per page viewed on a mobile phone. By some accounts , downloading ads and trackers costs the average user up to $23 per month in data fees alone. Behind the scenes, ad exchanges like AppNexus and Google DoubleClick suck up and analyze personal information from…
I’ve had varying opinions about keeping a diary throughout my life, ranging from ‘it’s for girls’ at ages c.7-10 years old through to ‘it’s very difficult and I’m much too busy playing Final Fantasy’ for most of my life since then. The latter of these sentiments is probably shared by most people, wherein Final Fantasy is replaced by sleeping, working…
There are only two file types required to natively play video in any modern browser with HTML5: WebM and MP4. Currently all major browsers support MP4 , but WebM allows for a much better quality-to-filesize ratio. Using ffmpeg you can transcode any multimedia file into WebM and MP4 from your command line. The same file transcoded to H.264-MP4 and VP9-WebM with the same bitrate. The WebM filesize…
You may have heard someone describe a piece of software as being addictive. As in, “I’m so addicted to this balloon-popping game on my phone that I got fired from my job as an air traffic controller”. As the amount of software vying for our attention has exploded in recent years, companies are increasingly hot-wiring our brain’s reward center to make their product successful. It…
When we design an interface for a product there are two questions we should ask before doing anything else: How much time does the user have to comprehend the product? How much potential proficiency should the product offer the user? These factors are important because they can be used to plot learning curves: experience on the x axis and proficiency on the y axis. Once we know the shape of the…
Any seasoned programmer will have some experience of technical debt, the metaphor used to analogize how corner-cutting and skimping on process early in a project’s lifecycle results in a debt that must be paid off later. It is not necessarily a bad thing, but anyone who has inherited legacy code will know the frustrations of working with an indebted project. Sometimes a development team is able to…
Here’s a common problem amongst freelance web developers. You’ve built a client a website and are dutifully hosting it on your low-end Linux VPS (you know, the one you munged into a web-server by copy-pasting several hundred commands you don’t understand from Stack Overflow answers and Ubuntu forums). But what happens when that client sends you an email asking for access to those files so their…
If you’ve got a few Backbone/Marionette or Ember projects under your belt you’ll know that it’s often necessary to render HTML server-side that might later become dynamic. This is so that the user sees some kind of content before the Javascript loads (or if they have it turned off) and search engines see some content when they crawl your site. This can mean having to maintain two sets of templates…
Writing and maintaining media queries has become a snap since version 3.2 of Sass. This was the release that debuted @content , which lets us pass custom styles to mixin inclusions. This made writing media queries much easier because we could define mixins for smaller-than-n and larger-than-n. These mixins act as filters that let us easily add width, height or resolution specific styles to…
It’s a simple Newtonian law that explains why the faster you’re travelling before a crash, the slower your life becomes after it. When I was cut up on my bike by an SUV two weeks ago I hit the side of the car with just the right momentum to fracture and displace my collarbone by an inch. And, true to our physicist friend’s theory, my pace of life has been considerably slower since then. I have to…
If you work in the creative industries, it’s inviting to think that someday people might look back on the things you made and marvel at the genius that sculpted them. Just as we look at the masterful brush strokes of Starry Night or the sweeping arches of the Brooklyn Bridge, we dream that our own creations too will outlive us. What we are dreaming of is called legacy. But on the web, the nature…
Ernest Hemingway’s masterfully uncluttered prose made for some of the best novels to come out of America in the 20th century. He sought to achieve truthfulness of language, primarily by eschewing ornament and flamboyance in his writing. Of his 1964 novel A Moveable Feast he said “If I started to write elaborately, or like someone introducing or presenting something, I found that I could cut…
Using icons on the web has become exactly 9000% better since the arrival of Icomoon , a web app that lets you easily create icon fonts from vector files. Trouble is, implementing the icons that Icomoon gives you is still a bit of a pain. It requires adding the .icon and .icon-fontname classes to your elements, which is non-semantic and not DRY-friendly. Modification of the icon requires more CSS…
Don’t set aside time for writing, but rather panic every couple of weeks about how little you write. Once every few months, publish an apologetic post about how you haven’t written for ages and tell your friends you have ’something in the pipeline’. Over time, the frequency of these crises will diminish and normalise. Only read books when you get into bed at night after a long day’s work,…
One of the most exciting things about being involved with the web is that new technologies are emerging all the time. The thing that sucks about that is new things are emerging all the damn time . If a developer is to remain competitive, pioneering and most importantly, in a job, then learning must be a core part of her career. But learning purely to avoid atrophy won’t ever help you achieve…
“A Blog Without Comments Is Not a Blog”. So reads the title of an article by Jeff Atwood published in 2006, in which he argues that disabling comments on a blog is tantamount to preaching a sermon; it is a one way delivery of content that doesn’t facilitate further discussion or user engagement. But let’s think about what value a comment form actually adds to a site. Should we…
Recently the Barbican museum in London held an exhibition called the Rain Room. It was an installation in which water poured from the ceiling, but sensors detected where people were standing and would turn off the taps above their heads so they didn’t get wet. It was a clever and engaging piece of interactive art and was immensely popular. During the time this installation was open, my…
“I saw my life branching out before like the green fig-tree in the story… I saw myself sitting there in the crotch of this fig-tree, starving to death, just because I couldn’t make up my mind which of the figs I would choose. I wanted each and every one of them, but choosing one meant losing all the rest, and, as I sat there, unable to decide, the figs began to wrinkle and go black,…
Wordpress powers a massive tranche of the world’s websites - 17.4% of them in fact, at the time of writing. Over the years its huge community and ease-of-use as a CMS has won it favour with web developers looking for out-of-the-box solutions to homogeneous client briefs. The admin is friendly and clients tend to get to grips with it quickly, making it a good choice for agency environments…
A fellow developer friend and I often used to enjoy validating our career choices by comparing them to the ‘unproductive’ careers of our investment banker friends who were earning twice as much as us. We would scoff at the life choice of someone to pursue a career so utterly vacuous and money-driven. How could anyone be content to just earn ? Surely the great calling of humankind is to…
The greatest successes in the field of HCI are those that bend technology to the will of human need. But bridging the gap of silicon and flesh is arguably one of the hardest challenges that faces those working in the tech industry. Building anything technical requires technical thinking, but to step away from that and consider human factors, then back into the technical realm to serve those…
“Think about it really hard, then forget about it” —Don Draper, Mad Men This oft-quoted soundbite may well be the essence of the creative process. Great ideas do not come whilst sitting at a desk for eight hours a day but whilst taking a shower or immediately before falling asleep. It’s the methodology of the ‘creative soak’: just as dishes are easier to clean when…
With great movie franchises come great advertising opportunities, and few are more lucrative than James Bond. Skyfall , being the most expensive Bond film to date, has had a heavy and controversial reliance on product placement that has seen historic advertising contracts (Heineken having paid a reported £28 million for the usurping of the iconic vodka martini). This isn’t going to be…
People that have known me for a few years will know that I never planned to be a web developer, but rather to go into graphic and print design. In fact, until about six months ago the header on this site still read ‘portfolio of web and graphic designer James Shakespeare’. It was always my dream to design great logos, books, magazines and typefaces, one day having my own graphic design…
I’ll start out by saying that while this post will probably come across as cynical, I do genuinely want App.net to work. Competition is always healthy and what I’ve seen of the Alpha platform so far is encouraging. Anyone who can raise $750,000 on Kickstarter is clearly onto something and should be taken seriously. There are, however, fundamental issues with the project’s…