Staticman

I’m a big fan of static site generators. I’ve used Jekyll to power numerous websites, including this one. But despite the clear advantages static sites can have over their database-driven, dynamic counterparts, it didn’t take long for me to feel a paradigmatic pain point: if there is no back-end to receive and process forms with user input, how can I add user-generated content? To address that, I built Staticman, a service that receives, processes and transforms content into data files, pushed to a GitHub repository where the rest of your content lives. Staticman creates a pull request whenever an entry is submitted: merge it to accept the submission, or close it to send it away.

Open site View on GitHub

SpeedTracker

I’m very interested in web performance. Making sure websites load and become responsive as quickly as possible is a determinant factor in user experience, engagement and even revenue. As a developer, this is something that I take into consideration at all times when working on a project, but I feel it’s equally important that performance data can be something that everyone in a team or organisation, regardless of their technical background, can access and act upon. SpeedTracker is a service that constantly monitors various performance metrics of a website and displays them in an easy-to-consume dashboard, allowing people to quickly assess how new features or infrastructural changes have impacted the perceived performance for users across the world.

Open site View on GitHub

include-media

include-media came about as a result of intense research and experimentation with how Sass can help front-end developers write responsive sites in a simple and maintainable way. I documented the process and the findings in an article on CSS-Tricks and published include-media, a library focused on providing a simple, intuitive and natural syntax for maintaining breakpoints and writing media queries. It currently has over 12,000 downloads a month on npm and there’s an interesting ecosystem of community-built plugins and extensions around it.

Open site View on GitHub

Static API generator

Static API generator is a Node.js application that creates a basic JSON API from a tree of directories and files. Think of a static site generator, like Jekyll or Hugo, but for APIs. It takes your existing data files, which you may already be using to feed a static site generator or similar, and creates an API layer with whatever structure you want, leaving the original files untouched. Static API generator helps you deliver your data to client-side applications or third-party syndication services.
View on GitHub

CSSential

Inlining critical path CSS is one of many techniques available to front-end developers to improve the perceived performance of a website. The idea is to remove a render-blocking stylesheet from the head of a document and inline the essential declarations for an instant load. Having experimented with several tools that automatically determine which parts of the stylesheet are considered essential, I built a PostCSS plugin that gives developers the power to prioritise selectors by annotating them with comments. The critical CSS is automatically injected in a template and the remaining is saved to a normal CSS file.
View on GitHub

Haiku

Haiku is a small Node.js app that watches a branch on your GitHub repository and deploys every pull request to a new Heroku application. You will get a URL that represents a snapshot of the state of your project as per the contents of the pull request, useful to test or to share features with colleagues/clients before rolling out to production.
View on GitHub