Using Cloudflare Workers and reCAPTCHA v3 for a Static Site Contact Form
Build a secure Eleventy (11ty) contact form using Cloudflare Pages Functions, reCAPTCHA v3, Resend, and as an alternative Cloudflare Turnstile to reduce spam.
All my blog posts
Find all my blog posts sorted by latest date below, or you can explore a variety of amazing content creators on my Blogroll.
Precompressed HTML at the Edge: Eleventy Meets Cloudflare Workers
In this post, I will show you how I integrate Brotli level 11 compression directly into my 11ty build process to squeeze every possible byte out of my blog’s HTML.
Asset fingerprinting and the preload response header in 11ty
I’ll be building on my earlier post about CSS asset fingerprinting, this time adding the preload response header into the mix. Together, these techniques make sure your browser grabs my blog’s CSS right away, keeping things fast and seamless.
Hack to the Future - Frontend
Frontend development never stands still. By looking back at the legacy techniques and tools that once shaped the web, we gain perspective on why today’s best practices exist and how to avoid repeating past mistakes. This post takes a trip down memory lane to uncover lessons from the early days of web development, and considers how they might guide us as we stand on the verge of another shift with the rise of AI and the evolving web platform.
Configuring your Content-Security-Policy on your development environment in 11ty
In this post, I investigate how you can use a mixture of dynamic and static Brotli compression with the Cloudflare Pro plan, for optimal web performance.
Lets create a plaintext RSS feed with 11ty
In this post I tackle something from my post-MVW (Minimum Viable Website) functionality to do list, by adding a plaintext RSS Feed. I'll take you through my reasons for adding it, the implementation, and the code I used to create it.
The Speed Trifecta: 11ty, Brotli 11, and CSS Fingerprinting
In this post I bring two previous blog posts together to create the perfect CSS setup for my little blog.
Using an 11ty Shortcode to craft a custom CSS pipeline
In this blog post, I'll show you how I've written an 11ty Shortcode to manipulate my CSS file, thus allowing for optimal long-life cache-control response headers. Any feedback on this build process would be greatly appreciated.
Cloudflares Mirage 2.0 broke my images on all mobile devices
In this post, I review Cloudflare's image optimisation library, Mirage 2.0, and explain how it caused images on my blog to fail on all mobile devices for three weeks. I'll also offer suggestions to Cloudflare on how they can prevent this issue from impacting other Pro plan customers.
Cranking Brotli up to 11 with Cloudflare Pro and 11ty
In this post I investigate how you can use a mixture of dynamic and static Brotli compression with the Cloudflare Pro plan, for optimal web performance.
Refactoring a Web Performance Snippet for Security and Best Practice
This post explores refactoring a web performance snippet to improve security and align with modern best practices using the PerformanceObserver and PerformanceNavigationTiming API's.
Securing your static website with HTTP response headers
In this post, I go through why you should improve the security of your static website and how to do it on various static hosting platforms. This includes Cloudflare Pages, Netlify, Vercel, Surge, Render, Firebase Hosting, Heroku, InfinityFree, and DigitalOcean.
Migrating to 11ty
It's been a while coming, but I've finally managed to get around to migrating to 11ty and Cloudflare Pages. I go over the ups and downs of the migration process in this blog post.
The History of Nooshu.com
A lot can happen on the web platform and in life over 16-years. In this post I remanice about all the changes the web has gone through and try to figure out how nooshu.com came to be.
GOV.UK Cookie banner and why it won't go away
This is a blog post about the GOV.UK cookie banner and the reason it won't go away when navigating across UK government services. I also touch on security and privacy features available in modern browsers.
Remove Subresource Integrity (SRI) from the GOV.UK assets domain
This is an RFC I wrote to persuade the GOV.UK Senior Technology team to remove Subresource Integrity (SRI) from GOV.UK's assets being served from the assets domain and allow for greater HTTP/2 performance.
Enabling HTTP/2 on GOV.UK
This is an RFC I wrote to persuade the GOV.UK Senior Technology team to enable HTTP/2 on GOV.UK. It was accepted and merged into the repository, and enabled in June 2020.
Enabling Brotli compression on GOV.UK
This is an RFC I wrote to persuade the GOV.UK Senior Technology team to enable Brotli compression on GOV.UK. It was accepted and merged into the repo, and enabled in March 2021.
Enabling HTTP/3 on GOV.UK
This is an RFC I wrote to persuade the GOV.UK Senior Technology team to enable HTTP/3 on GOV.UK. It was accepted and merged into the repo, and as of 11th Jan 2024 it has now been enabled!
Migrating from Github Pages to Netlify & Cloudflare
I've finally had time to clean up some tech debt, so I migrated this blog onto Netlify fronted by Cloudflare and fixed the web performance issues I spotted.
We've spotted something on your scan...
Wednesday 21st April 2021 was a day like no other. This certainly isn't my usual web performance related blog post!
How to use WebPageTest's Graph Page Data view
The 'Graph Page Data' view is a one of those WebPageTest features that is hidden in plain sight. So lets shine a light on it and see what it can do.
Setting up Cloudflare Workers for web performance optimisation and testing
A step by step guide on how to get started with using Cloudflare Workers for web performance optimisation.
Cloudflare Worker recipes for frontend performance testing
Cloudflare Workers are an awesome tool for rapid prototyping and observing web performance changes, here are a few recipes you may find useful.
Testing priority hints with WebPageTest
Priority hints may be on hold, but you can still enable them and investigate what they can do. And in one instance I found a nice set of improvements to visual metrics.
Using Puppeteer and Squoosh to fix the web performance of embedded tweets
Twitter embeds are bad for web performance. They cause so many extra requests, and a huge amount of data added to a page, so how can we fix it?
The web performance of internal systems is important, so optimise them too
It's important to remember staff members are users too, so optimise your internal tools for performance for more productive and less stressed workforce! Here are some tools and resources to help you out.
The importance of `@font-face` source order when used with preload
A small change in the ordering of your font sources in the `@font-face` rule can have a big impact on data and web performance, especially when used in conjunction with the `preload` resource hint.
How to run a WebPageTest test
Let's examine the WebPageTest homepage and investigate what all the settings do, including examples of what you can use them for.
Fixing a legacy HTTP/1.1 server configuration with Cloudflare Workers a CDN
It's amazing what a difference a single little response header can have on web performance. Lets 'fix' it at the edge with a <s>Cloudflare Worker</s> CDN.
Using jq with the WebPageTest API
WebPageTest exposes all its data via an easy to access API, but the data listed can be overwhelming. Using a tool like jq can help. Here's how you use it.
Why you should be testing your 404 pages web performance
Your may not think it, but your 404 page is an important part of your potential user journey. You should test its web performance as it can have a big impact on your users experience.
A 'Vary' unusual waterfall
Weird things can happen to waterfalls when you don't set the correct response headers.
Measuring and examining TLS 1.3, IPv4, and IPv6 performance
TLS 1.3 is the new kid on the cryptographic protocols block. It offers better security and better initial connection web performance. And IPv6 is a 'new' internet protocol. Lets examine some shiny new things!
Bringing HTTP/2 to GOV.UK - Resources
A simple blog post bringing all the resources I used and created in the GOV.UK HTTP/2 work.
Example synthetic web performance monitoring dashboards using SpeedCurve
Custom dashboards and graphs are a really powerful feature of SpeedCurve. Here's a few examples of how we at GDS are using them for synthetic web performance monitoring.
WebPageTest comparison URL generator
The best way to benchmark improvements using WebPageTest is by comparing results. Here's a tool to help you do that.
Improving perceived performance with the CSS `font-display` property
The `font-display` property is a great way to tweak the way your fonts load, especially useful as fonts have a large effect on the perceived performance of your website.
The impact of SSL certificate revocation on web performance
SSL certificate revocation is complex, but absolutely necessary. And your choice of what certificate to use for your site is important, and you should consider its impact on web performance when doing so too.
How to read a WebPageTest Connection View chart
There's more to WebPageTest than the Waterfall View. In this post I look at the the 'Connection View' and how it can be used to spot web performance issues.
HTTP/2 and Subresource Integrity don't always get on
Enabling HTTP/2 doesn't always lead to web performance gains. I believe I may have finally solved a mystery of why performance got worse in some cases.
Implementing Webmentions on this blog
I don't have any comment functionality on this blog, but I now have Webmentions available. Here's how I did it.
How to read a WebPageTest Waterfall View chart
WebPageTest waterfall charts are a very powerful web performance tool, but can sometimes be a little confusing. Maybe this post can change that.
Speeding up the web with the Save-Data header
The `Save-Data` allows users to choose a data optimised browsing experience (if you put in the work).
Lighthouse score of 100: not always for the better
Is a performance score of 100 in Lighthouse always for the better?
Why we focus on frontend performance
Frontend performance is important, especially for government services.
Joining the 100 club (#webperf)
It's amazing what a few font tweaks can do to perceived performance. Now lighthouse hits 100/100 for performance!
Making GOV.UK pages load faster and use less data
Optimising the font loading method on GOV.UK to improve performance.
Changing our testing requirements for Internet Explorer 8, 9 and 10
Old versions of Internet Explorer are in decline, so let's reconsider the testing requirements.
Cloudless Chrome - Broken CSS filters
Recently something has gone slightly awry with the clouds in the header on Chrome. I wonder what it could be?
Workbox - Generate a service worker with ease
Service workers are all the rage at the moment, but how do we simplify their creation?
We've added Samsung Internet to our browser testing recommendations
GDS: The Service Manual gets an update to add Samsung Internet to the testing matrix.
Removing Accelerated Mobile Pages (AMP)
After over a year of using AMP, it's time to back out and remove it.
Opening Atlassian JIRA tickets with iTerm2
If you have a dig around inside the iTerm2 settings you will find lots to play with like 'Smart Selection'. We can use it to our advantage.
A boilerplate module setup using Browserify, Babel, Mocha, and Chai
Time to have a little play around with the future of JavaScript, ES2015 (and beyond!)
Accelerated Mobile Pages (AMP)
Could the future of the mobile Web be upon us? Speed up your mobile pages using AMP!
Implementing a Service Worker
Progressive web apps and Service Workers are the next big thing. Time to have a play with some tech!
HTML Email Countdown
With a little bit of Node.js you can create a countdown for a HTML email. Magic!
Reasons to be Bashful
Using a UNIX shell is all the rage nowadays, even Windows 10 are doing it!
Keyframe animations and media queries
I ran into a slight hiccup with IE and CSS3 animations, turned out to be a simple fix.
Using Wordpress with Foundation Interchange
Interchange is an excellent responsive image utility that comes with Foundation. Time to hook it up to Wordpress!
Site update using Zurb Foundation 4
A lot can happen in two and a half years since my original build. Time to pull my sleeves up and make the old website responsive!
Marker Cluster Calculator for Google Maps v3
MarkerCluster is a handy helper for the Google Maps API, but how does its setCalculator method work?
Auto-spacing input field text
I've never seen this functionality in any page I've used. Auto-spacing a credit card number as you type. I must admit I'm not a big fan of the idea, but lets build it anyway!
HTML5 date input type on mobile
While developing a new mobile website I ran into an annoying issue while validating the input. Here's a solution, not nice but it works!
Sublime Text 2, a truly sublime text editor
Time to say goodbye to all other text editors. Sublime Text 2 has a killer set of features and it's quick too!
New country, new job!
After traveling through South East Asia for three months I've finally settled back into work. I've started a new job at an excellent digital agency called Visual Jazz Isobar!
Writing efficient CSS selectors
With browsers getting faster all the time it's a good idea to remember that not everyone uses them. Writing efficient code is key to maximising device accessibility.
Design for Developers
Design is hard! Well it is for me anyway. Here's a brilliant slideshow for developers to point you in the right direction.
Embracing Git for version control
Who would have thought version control could be so easy and fun? It can be with Git!
Remote Loading HTML5 Elements with jQuery
Working with Internet Explorer is never easy. jQuery takes some of the pain out of it, but not always!
Back to my desk (down under)
As anyone who has worked on the web knows, a lot can change in three months. Time to get back to work and catch up with the latest goings on.
Hanging up my Web Dev boots (for three months)
It's time to travel the globe, very nervous but extremely excited! SE Asia and Oz here we come!
There ain't no party like a DemoJS party
What can be more fun than some cutting edge web technology and a bunch of people who love to create interesting demos!
WordPress 3.2, auto update fail
The Wordpress auto update feature is superb; when it works. When it doesn't it can make you cry. Luckily there can be a quick fix.
Aloha Editor and WordPress
What could make Wordpress any better? What about the ability to edit your posts directly in the page? Yay!
A little bit of MicroJS
For some projects you may not need a fully featured JavaScript library. But what are the alternatives?
Chrome Developer Tools at Google IO 2011
As a long time user of Firebug for Firefox, Google Chrome's Developer Tools are making me think about changing my debug tool!
WordPress Stats broken? Grab yourself a Jetpack!
Have your Wordpress Stats broke? Feel a little lost without that friendly graph on the Dashboard? You need Jetpack!
Fractal magic with WebGL
When you cross fractals with WebGL you're sure to catch my attention. Fractal Lab is a work of art!
The developing WebGL demoscene
Cool graphics in the browser, the demoscene has woken up to WebGL. Bring on the amazing demos!
Human History in 100 Seconds
What happens when you visualise 424,000 Wikipedia articles? A bloody good visualisation, that's what!
Auto-resize a Facebook Application iframe
Automatically resizing an iframe inside a Facebook application was a bit of a hassle, but simple when you know how.
Google Fractalmaps
Google Labs hard at work on a particular interest of mine, fractal rendering.
Monitoring a value change on an input element
For a small project I was changing the value of a disabled input box programmatically and needed an event to fire if a value changed.
A three.js community on Reddit
Three.js now has a community on reddit, so why not submit a few links and experiments!
Alteredq: A WebGL Ninja
WebGL really is starting to take off now that more browser support is being added. There are some very impressive demos out there.
Game On London 2010
Mozilla Labs and Six to Start put on a great evening event in Shoreditch dedicated to the future of Open Web Gaming.
Periodic Mashup
The web is becoming very exciting at the moment. Come up with an interesting idea and just build it. Open data is the future!
Nasty Canvas Image Data Error
Revisited an old experiment that looks to have been broken for a while. Luckily it was a quick fix.
Full Frontal 2010
After attending Full Frontal 2009 I didn't want to miss out on this great conference in 2010.
Internet Explorer 9 Preview 6, we have a winner
Microsoft have finally pulled their finger out and produced a respectable browser* (*Only for Vista and Windows 7 users)
WordPress plug-ins and svn:externals
So you have your Wordpress install in Subversion. What about those pesky plug-ins that always need updating.
SVN post-commit hook on Dreamhost
Using the post-commit hook with SVN makes updating a website dead simple... once you get it to work.
Page not found with custom post types
I hope other people find this fix useful, I wish I'd known about it a few hours earlier...
In memory of Benoit Mandelbrot
Today is a sad day for Mathematics, the maths genius Benoit Mandelbrot lost his battle with cancer.
jCarousel missing item width
jQuery has a host of carousel plug-ins available to use. jCarousel seems to be the most popular. A small error cause a few issues...
Goodbye Aptana, hello Komodo Edit
I've finally taken the plunge and I'm ditching Aptana IDE. I've been wanting to for a while but haven't found the right alternative.. until now.
JS1k: We have a winner!
Looking at the winners of the JS1k competition I really can't see how some of the entries have been produced! 1024 bytes goes a long way in JavaScript.
Adding a custom header image to your WordPress theme
Adding a custom header image to a Wordpress theme has never been so easy. Simply copy / paste and edit the code listed.
Drupal Love! Stuff I've learnt!
A little bit of Drupal knowledge goes a long way! This amazing open source CMS allows you to build large scale websites easily.
The beauty of the Mandelbrot set
The Mandelbrot set seems to pop up everywhere as it's without a doubt the most famous fractal. So heres a video.
Aloha Editor - Content editing the HTML5 way
There are many ways to edit and update content on a website, but none of them look quite a easy as Aloha Editor.
JS1k: Original source
Here's the original source code for my entry into JS1k for anybody who wishes to see how the simple particle demo was created.
JS1k: JavaScript Optimisations
How much functionality can you achieve using only 1024 bytes of JavaScript? Quite a lot it seems, you just have to slim down the code.
Learning HTML5 Canvas
You can buy all the books on visualisation technologies but what's the point if you never read them? Time to change that.
Nooshu.com now with added HTML5 goodness
Finally got round to HTML5ing my Wordpress theme. Lots to learn with the (ongoing) HTML5 specifications.
Looking for a new CMS for small websites
I've had a couple of security scares with FrogCMS recently so have decided to look for another small CMS solution.
New to Drupal? Here are a few helpful links
Decided to dip my toe in the murky world of the Drupal CMS (it's not that murky really), lots to learn about this very powerful framework. Here are a few links that fellow beginners may find useful.
WordPress plug-in: Snipplr Snippets
Having a little time to spare I decided to update the Snipplr Plug-in for Wordpress, originally by Tyler Hall.
Using the DeviceAtlas API with WordPress
Building a mobile site can be quite painful, but it's made much easier using the DeviceAtlas API.
Headspace2 JavaScript error
Post Thesaurus is broken.... oh wait no it isn't. Just a pesky JavaScript error from another plugin!
Snipplr under new management!
Snipplr was one of my favorite online coding tools until the new owners ruined it and let it stagnate. Now it's under new management!
High Resolution Icons for Google Chrome
Google Chrome has a superb feature called 'Create application shortcut...'. To polish off this feature with your web application use high resolution icons.
Converting a WordPress post to a custom post type
Converting your current posts isn't as easy as it looks. If you are comfortable editing the DB directly it's fairly simple.
WordPress 3.0 RC1 blank page error
Upgrading to the latest version of Wordpress on my development server didn't quite go as smoothly as expected.
Visualising Subversion with Gource
Subversion is usually quite boring; why not add a little bit of Gource to make it a little more interesting!
NextGEN Gallery + WordPress custom fields = happy developer
When combining NextGEN gallery and built in Wordpress custom fields you can add some superb functionality which is easy to use.
Wolf CMS: A fork of Frog CMS
I've used Frog CMS on small projects in the past and have been very impressed, but there looks to be a fork on the horizon...
Aptana on Steroids using Zen Coding
Zen Coding really is an incredibly simple idea, use CSS selectors to write HTML. It sounds like a chicken egg argument, but it really works.
Recommended books for Front End Web Developers
Here's a list I recommend for any Front End Web Developer just starting out in the big wild virtual world or web development.
Adding Content using CSS3
With CSS3 it is now possible to add content to the page only using CSS. The content / layout lines are blurring just a little...
CodeColorer Auto Expanding Code
Added a little feature to the CodeColourer Wordpress plug-in on my website that I'd thought I'd share with people.
WordPress plug-in: Post Thesaurus
I created this plug-in for Wordpress as I have a tendency of using the word 'great' a little to much...
Shadowbox and NextGEN Gallery Sitting in a Tree
NextGEN gallery just got a little smoother with this fine addition.
jQuery Plug-in: Tab Down
Simple plug-in for hiding content above the page which is shown by clicking a tab.
NASA Picture of the Day CSS Design Challenge
NASA's Astronomy Picture of the Day website looks terrible, using some CSS3 and Firefox you can make it a little more presentable.
p01.org: Amazing Experiments using JavaScript
Here's a site that will make you go "wow". A raytracer in JavaScript and Canvas using only 512 bytes.... amazing.
Internet Explorer 9: Is that light at the end of the tunnel?
It looks like Microsoft are finally getting their act together with their up and coming version of Internet Explorer.
Coolclock: HTML5 Clock that is Actually Quite Cool*
Looking for a Canvas based JavaScript clock that also supports Time zones...
Snipplr: How to Annoy Your Site Users
Things have stagnated on Snipplr.com, it's time to look for another tool for my code snippets.
Book Review: jQuery Enlightenment
jQuery Enlightenment is an excellent book by Cody Lindley
Formula One 2010 Season, people to follow on Twitter
Get all the latest inside information of the new Formula One season via Twitter.
Preview Post Broke in WordPress?
Finally solved an issue I'd been having with a couple of themes and the preview post functionality...
Changing your WordPress Sidebar Markup
Sometimes the default markup for for the Wordpress sidebar isn't quite what you need. Here's how you change it.
Useful websites for a Front-End Web Developer
Here are a few websites I'd like to share with you, they can really speed up your working process.
jsFiddle: My new favourite website
jsFiddle just keeps getting better and better, the perfect tool for demonstrating your code snippets.
WordPress and Feedburner Woes
For a while now Feedburner and the blogs RSS feed haven't been playing nicely, I finally figured out why.
The append and appendTo jQuery methods
jQuery has a wealth of methods for manipulating the DOM. The append() and prepend() methods i tend to use all the time.
SWFObject 2.2 and wmode transparent
A little snippet of code involving swfobject 2.2 and wmode that I always forget how to do.
New jQuery delay() method
Lots of improvements came with the latest version of jQuery. The delay method is one of my favourite.
Google broke my Gmail Labels
Google have been tweaking Gmail again. Labels disappeared? Here's a quick fix.
Finding WordPress Administrator User IDs
While adding a few features to Post Ideas+ I needed to find all the administrator IDs in Wordpress.
Firefox Extensions for Web Developers
A few extensions I use with Firefox to make my Web Development life easier.
More Frog CMS Magic
Frog CMS can be made even simpler to implement with a couple of handy little code snippets.
Frog CMS - Nice and simple CMS
Searching for a simple CMS for a client? Why not give Frog CMS a try.
Flot and chaos
With a little JavaScript and HTML5 it is possible to plot chaos using your browser.
WordPress plug-in: Post Ideas+
Got a great idea for a blog post you don't want to forget? Use Post Ideas+ to keep track of them.
A little Google Chrome search tip
A quick and easy way to search websites from Google Chromes address bar.
The tools of my trade
You don't need a hammer and nails when you're a web developer. You do need your own set of tools thought . And maybe a tool belt...
WordPress: Are you sure you want to do this?
Writing a plug-in for Wordpress it gave me a strange error. Solved it in the end though.
IE6 and the Abbreviation tag
Internet Explorer 6 and the abbreviation tag don't play well together.
Processing & Aptana make a good couple
The Processing IDE (PDE) can be quite limited. As an alternative you can use Aptana or Eclipse. Here's how.
Full Frontal 2009
A wet and rainy day in Brighton for the Full Frontal JavaScript conference.
jQuery, WordPress and your functions.php
Add this little bit of code to your functions.php file to remove jQuery.
Equal height columns using jQuery
Created a very simple plug-in to set all column heights on a page to the same height.
Decode at the V&A
Took a little trip to V&A to see an excellent collection of digital artworks.
My first blog post
Huzzah! Finally decided to do something with this domain. You have to start somewhere, my first blog post.