Monitoring is usually at the end of a checklist when building an application, yet it’s crucial for making sure that it’s running smoothly and that any ...

End-to-End Monitoring with Grafana Cloud with Minimal Effort

This post ended up being incredibly long comprehensive. I’m afraid that many people won’t read enough to get everything that’s important, so here are the key points:

    When deriving the “real client IP address” from the X-Forwarded-For header, use the rightmost IP in the list.

    The leftmost IP in the XFF header is commonly considered to be “closest to the client” and “most real”, but it’s trivially spoofable. Don’t use it for anything even close to security-related.

The perils of the “real” client IP | adam-p

Many of us use TypeScript in our React applications to eliminate an entire class of runtime bugs. But surprisingly, one of the most commonly used types: React.ReactNode turns out to be unsafe, failing to detect objects that cannot be rendered by React. This post digs into what is going on and how to…

The React.ReactNode type is a black hole

Programming with dates, times, and timezones is hard. But here’s some help.

UTC is Enough for Everyone, Right?

What if you could host a web service with no ports exposed? With Cloudflare Tunnel, you can!

Exposing a web service with Cloudflare Tunnel

SSH to machines in private networks using an SSH key, from anywhere in the world, using Cloudflare Tunnel.

SSH into your private machines from anywhere, for free, using Cloudflare Tunnel

Or how we took an API endpoint from 16s to 3s.

Immutability isn’t free

A deep dive into the performance implications of using Google Fonts (good and bad) and whether self-hosting is better.

Should you self-host Google Fonts?

What is the Inverse of a Circle?

This story is a behind-the-scenes look at the process and drama created by a particularity interesting web security issue. It is also a perfect illustration of the efforts required to maintain popular pieces of open source software and the limitations of existing communication channels.

Prototype-Poisoning

On web3, Wordle and the radical concept of building things for free.

Make Free Stuff

After some discussion with Salma last week, I decided it was worthwhile to do a deep dive on Trailing Slashes in URLs. More specifically, which of these should I be using?

Trailing Slashes on URLs: Contentious or Settled?

At Contentsquare, we gather hundreds of metrics about user interactions on the websites of our customers. Having all this information can easily become cumbersome and hard to exploit. To make user…

Click and Swap, our alternative to Drag and Drop

Audio Sparklines! 3-bit digital wonders! A lofi waveform representation of audio buffers in tests and lldb debuggers!

Audio Sparklines

fastify-vite is a Fastify plugin, perhaps slowly evolving into a mini framework, that enables client application SSR for Fastify using a variety of client frameworks like Vue and React.

My Minimal Monorepo Setup with ZX

PlanetScale is an exciting new DBaaS geared towards serverless environments. They recently released connection string support with makes integration with Prisma a breeze. We’ll learn how to spin up a new Next.js & Prisma project, connect it to PlanetScale, and deploy it to production on Vercel.

Deploying a PlanetScale, Next.js & Prisma App to Vercel

Strategies for persisting UI elements across page transitions when working with Next.js.

Persistent Layout Patterns in Next.js

How to use Mapbox static image API and Node Canvas to generate custom sharing images

Generating Open Graph images with Mapbox & Canvas

Building a mapping platform with React and Mapbox GL

A practical guide for how to grow your developer tool startup’s Twitter presence.

Twitter Strategy for Devtool startups

While I enjoy working with MySQL (first database) both as a product and infrastructure engineer, lately, I have come to appreciate PostgreSQL as well. I recently read this post on why infrastructure engineers prefer MySQL, and I think it’s spot on.

Why I enjoy PostgreSQL - Infrastructure Engineer’s Perspective

A slight modification to traditional offset/limit pagination that can drastically boost performance.

Efficient Pagination Using Deferred Joins

Recording the way the User Agent string parsing is failing in scripts.

Encyclopedia Of Broken UserAgent String Detections

Slack is optimized for Firefox version 520

Visual interactive piano reference for major and minor scales, their notes/pitches (+ note placement on the piano keyboard) and their relative minor or major.

Interactive Piano Reference to All Major & Minor Scales

Figuring out how you work best, is a superpower.

How You Work

Web3 will be build on CRDTs, not Blockchain.

Serverless Collaborative Hierarchical TODO App in 200 LoC

Commit messages matter. Here’s how to write them well.

How to Write a Git Commit Message

Compared to other build tools, Esbuild is a radically more performant bundler. This post will look at setting up a build script to compile TypeScript projects for NPM.

Bundling TypeScript with Esbuild for NPM

If you want to migrate a Next app to Remix, you may be tempted to do a complete migration. Still, if your app is too complex, you may not be able to do it. In that case, a gradual migration is the best option.

Run Next and Remix on the same server

Have you ever noticed that gradients tend to look a little gray and washed-out in the middle? This happens because of a mathematical quirk with RGB colors. Fortunately, we can work around this quirk, and create beautiful, lush, saturated gradients.

Make Beautiful Gradients

There is a social contract to Open Source. But who really violates the social contract more: companies or FOSS maintainers?

The Social Contract of Open Source

Pin your npm/yarn dependencies

“TypeScript and I are never going to be friends”. Oh wow, how often have I heard this phrase? Learning TypeScript, even in 2022, can be frustrating it seems. And for so many different reasons. People who write Java or C# and find out things are working differently than they should. Folks who have do…

How not to learn TypeScript

Craig’s year end wrap-up of 5 things you can do for a healthier Postgres database next year.

Five Tips For a Healthier Postgres Database in the New Year

Encryption, encoding, and hashing are three related but distinct concepts. It’s important for you to understand all three.

Hashing is not encryption

And a really quick lesson on the Node require.cache. Recently I was working on a NextJs project with a custom Node server. I was running the server with Nodemon, which is pretty normal, but every time I change a server file, the whole http server has to reload. And even worse as a Next server it has to spin up the Next app as well. This all meant that every file change was about a 5-10 second wait before I could test even the smallest change.

How to Hot (or Live) Reload a NodeJS Server App

People expect companies/services to tell them when untoward things could be happening to their accounts: Their account has logged in on a new device Their password has been changed An export of their data was started These examples are things you should probably be notified about. But, if you go o…

Are you building features for phishers?

The web0 manifesto is a short and sweet middle finger to web3.

The web0 manifesto

Table of contents are nice to have on a site full of complex information. However, writing an entire post then later formatting the HTML is time consuming. In this post, I walk through an algorithm I designed to parse your blog posts dynamically and generate a table of contents for you at runtime or buildtime.

Dynamic Table of Contents Using Recursion Trees

A long time ago every website was closed off. There was no way to know if a website was updated other than to go there. There were various attempts to come u...

I Miss RSS

What UUIDs and ULIDs are under the hood, and how to encode and use them.

Understanding UUIDs, ULIDs and String Representations

An acquaintance of mine recently complained in a QQ group that the text in GitHub has recently become “exceptionally bold.” Then he or she hit F12, deleted the value system-ui from the font-family property in the Chrome developer tools, and found that all had suddenly gone fine. How come?

Never, ever use system-ui as the value of font-family

If you were creating a web app from scratch today, what database would you use? Probably the most frequent answer I see to this is Postgres, although there are a wide range of common answers: MySQL, MariaDB, Microsoft SQL Server, MongoDB, etc. Today I want you to consider: what if SQLite would do just fine?

Consider SQLite

Supposedly today we have a lot of browsers to choose from - Google Chrome, Safari, Microsoft Edge, Firefox, Brave, Opera, Vivaldi, etc. Having choices is a good thing, right? Nobody wants to relive the time of almost complete Internet Explorer domination again. Unfortunately our choices are signific…

Firefox is the Only Alternative

I’ve been having this thought on the back of my mind for a long time to write about why it’s often a bad idea to start with microservices for a brand new project.

Don’t start with microservices – monoliths are your friend

Beautifying and modernizing your command line experience. A tour of emulators, text options, and prompt styling.

Text Aesthetics: Command Line UI/UX

TypeScript's interface has gotten a bit of a bad rap lately, largely because of declaration merging, a behavior of interface that's quite surprising when you first see it. This post explains what declaration merging is, why it is, and how you can use it to iron out some of JavaScript's a…

Effective TypeScript › In defense of interface: Using declaration merging to disable “bad parts”

A comprehensive guide to funding open source software projects

The Asymmetry of Open Source

In this article, Nirmalya discusses some of the complex problems that he faced while building and maintaining large Next.js applications. He always explains how these problems can be solved by using various tools.

How To Maintain A Large Next.js Application

Over the years, I've accumulated quite a collection of websites, web applications, APIs, and other services that I've built and continue to host publicly. I've experimented with a lot of different hosting methods for them, switched between several different providers, and have finally arrived at something that I feel comfortable with that meets all my needs.

My Setup for Self-Hosting Dozens of Web Applications + Services on a Single Server

LastPass fanboys often claim that a breach of the LastPass server isn’t a big deal because all data is encrypted. In reality, somebody able to compromise the LastPass server will likely gain access to the decrypted data as well.

Is your LastPass data really safe in the encrypted online vault?

LastPass accounts are under attack. I look into how user’s master passwords might have leaked.

How did LastPass master passwords get compromised?

Range requests allow a <video> tag to seek through a video file. Adding support to your dev server is a fun challenge and taught me some interesting things about WHATWG Streams.

<video>, HTTP range requests & WHATWG streams

Node.js now supports a node: protocol for built-in modules.

New in Node.js: `node:` protocol imports

Let me explain my missing, share you my vision for Leon and what’s going on in my head.

I Ran Away From Open Source

One of the biggest causes of layout shifts for my clients is late-loading web fonts, let’s look at how to optimise them!

How to avoid layout shifts caused by web fonts

If you read tech journalism you’ll probably hear the fuzzy term web3 bandied about in the press. Sprinkled around all these articles are all manner of idealistic and utopian ideas about how we can rebuild the internet to reflect our aspirations of a more humane and egalitarian society. However the journalists never quite drill down into the details on the mechanisms of how the internet will be remade. Because after all tech writers are in the storytelling business and a myth about the rebirth of cyberspace makes for a ripping yarn far more than mundane skepticism of a hyped technology.

Web3 is Bullshit

WebAssembly and WASI show great promise for the future of computing outside the browser, and the WebAssembly component model aims to improve the portability, cross-language, and composition story for Wasm. This article explains the goals of the component model, and showcases how to use tooling from …

Introduction to WebAssembly components

If you've ever worked on a team of developers of any size, your team has undoubtedly reached an agreement among your team about how your code will be branched and integrated.

How I Learned To Stop Worrying and Push To Master

Earlier this year, Citizen Lab managed to capture an NSO iMessage-based zero-click exploit being used to target a Saudi activist. In this two-part blog post series we will describe for the first time how an in-the-wild zero-click iMessage exploit works

A deep dive into an NSO zero-click iMessage exploit: Remote Code Execution

Reflections on my time at Electronic Arts and techniques used to improve iteration times in video game development

3 Lines of Code Shouldn’t Take All Day

Decomposition of UI applications into self-contained widgets leveraging streamlined Data Management

Widget Driven Development

A comparison between scrt.link and onetimesecret.com - two online services to share secrets.

Scrt.link vs. One-Time Secret

If you’ve never had to wrangle a difficult client, this blog post is your opportunity to prepare. Disagreements happen, some people handle them better than others, how we conduct ourselves in these situations have a profound impact on the trajectory of our careers.

How to handle difficult clients

The health and stability of the open-source ecosystem is back in the ~discourse~, in no small part thanks to the ongoing nightmare with Log4j2 and CVE-2021-44228.

Calculating my open source blast radius

A list of defensive CSS techniques to avoid potential future issues

Defensive CSS

A deep dive into the math behind Bézier curves, from simple linear interpolations to Cubic Bézier and how they are used to describe motion. This article introduces the concepts underneath cubic-bezier and easing timing functions that are used in CSS and Framer Motion transitions through easy-to-unde…

Cubic Bézier: from math to motion

Maybe I’m paranoid, but I think there’s a lot of smart people out there dedicating their life’s work to make others keep watching videos. Since YouTube’s incomprehensible decision to remove dislikes count it’s become even easier to waste time on worthless content. In this blog post, I’ll describe a …

How to Spend Less Time on YouTube - Self control for addiction

I found my son's killer. It took three years. But we did it. I should clarify one point: my son is very much alive. Yet, my wife Cristina and I have been found responsible for his death. 

Hunting down my son’s killer

Some mobile apps offer a feature to share local device content to other devices using the Cast or AirPlay protocols. Some apps implement this feature, in part, by running a web server that provides access to local files.

Web servers in mobile apps leak sensitive data

On Rails

Best practices when adding a JSON output option to your command-line application.

Tips on Adding JSON Output to Your CLI App

I love useRef, but it lacks the lazy initializer functionality found in other hooks (useState / useReducer / useMemo).

Make useRef lazy — 4 ways

This is a list of recurring anti-patterns that I see when I help folks with their container build pipelines, and suggestions to avoid them or refactor them into something better. And since only a Sith deals in absolutes, keep in mind that these anti-patterns aren’t always bad.

Anti-Patterns When Building Container Images

Next.js-inspired file-based routing for client-side React with React Router and Vite

File-based routing with React Router

An exploration of the projects, teams and individuals collaborating to push Vite and the DX of our frontend tooling forward

The Vite Ecosystem

Many folders have them. They’re so invisible that you can’t even see them when you show hidden files. And the only way you know they’re there is when they cause problems.

Explainer: .DS_Store files

A series of blog posts on advanced TypeScript features and how it all works under the hood.

TypeScript Evolution

With the most recent type system features like conditional types or variadic tuple types, one technique to describe a function’s interface has faded into the background: Function overloads. And there’s a good reason for that. Both features have been implemented to deal with the shortcomings of regul…

TypeScript: The humble function overload

Hi, my name is Alex, I’ve been an IT security professional since 2007 and I’ve recently entered the start-up world with my project bughuntr.io. In putting together this project, security has been a primary concern for me. This is both due to my background and the nature of the project, being a train…

Practical Security Recommendations for Start-ups with Limited Budgets

Proof of stake is a scam. When I say that, I mean that proof of stake is (1) claimed to be a consensus system, and (2) constitutionally incapable of actually producing a consensus. To understand why this is the case, we must first study how proof of work works, to be able to see why proof of stake is not an adequate drop-in replacement for it.

Proof of stake is a scam and the people promoting it are scammers

State management is one of the most important aspects of React development. However, not every state update should result in a re-render. This article covers how to prevent unnecessary state update re-renders by avoiding the state update or triggering the state update with the existing state.

How To Prevent Unnecessary React State Update Re-renders

A while ago, i wrote an article called "Never update anything" that brought to light some of the issues with our current approaches to versioning software and the shortcomings of semantic versioning in particular. However, while i did offer some suggestions for creating more stable software at a slower pace, it feels to me that it'd require its own versioning system.

Stable Software Release System

npm’s culture presents a major problem for global software security. It’s grossly irresponsible to let dependency trees grow to thousands of dependencies, from vendors you may have never heard of and likely have not critically evaluated, to solve trivial tasks which could have been done from scratch in mere seconds, or, if properly considered, might not even be needed in the first place.

I will pay you cash to delete your npm module

The different uses of feature flags, and building a new feature flags system.

Flags v. gates

 Paper Website launched on Product Hunt and ended up getting #4 Product of the day! I had some incredible support - thank you so much if you checked it out. The day was bittersweet though - and I wouldn't usually say anything, but there is definitely some foul play going on with upvote rigging on Product Hunt. 

Product Hunt is Doomed

This article attempts to reflect back on the most meaningful lessons learned by building electricityMap, Bloom and North at Tomorrow.

Lessons learnt after 5 years of climate tech entrepreneurship

Integrate Storybook with Next.js in four simple steps

Get started with Storybook and Next.js

The Node.js ecosystem is shifting towards ESM. We examine what lies in store for application and library authors, learn some of challenges and opportunities that lie ahead for Node.js developers, and provide tips and tricks for surviving the bumpy transition ride ahead.

Getting Started with (and Surviving) Node.js ESM

Colocation

A few months ago we saw a post on the r/programminghorror subreddit: A developer describes the struggle of identifying a syntax error resulting from an invisible Unicode character hidden in JavaScript source code. This post inspired an idea: What if a backdoor literally cannot be seen and thus evades detection even from thorough code reviews?

The Invisible JavaScript Backdoor

React Query brings the ergonomics of GraphQL clients to RESTful APIs. It scratched my itch.

You can use React Query for slow computation, not just API

You could not claim to have lived a vibrant life if you did not suffer from burnout at least once and then grew from that phase.

Recovering from a burnout

It’s been a couple of years since the post where I first introduced the new game I was working on, Vectron. Although I finished the game nearly a year ago, I was putting of releasing it. Compiling it

Simulating an XY oscilloscope on the GPU

I saw the article in Communications of the ACM “What Does Saying That ‘Programming Is Hard’ Really Say, and About Whom?” and as a twenty-six year veteran of the profession, I thought “of course programming is hard! Duh!” I then spoke with a friend where after a bit said “Do they mean like writing? Writing isn’t hard, but writing a book is”.

Yes, Programming is Hard

I think we’ve all been in this situation: whilst navigating the pages of a website, following links by opening new tabs, we ultimately end up with an unnavigable mess:

The ultimate solution to the nightmare of truncated tab titles

ssh-keygen can sign and verify signatures, and it’s way better than PGP.

It’s Now Possible To Sign Arbitrary Data With Your SSH Keys

The book Antifragile is pretty bad. Like most popular management books, it’s a single useful idea padded out with anecdotes. Some organisations are overly reliant on the status quo. If a sing…

No one knows what’s coming next

In part 1 I dove into Spotify Codes and explained the general technical concepts of how they work. If you haven’t read that post you should check it out. I shared it on reddit where it generated a lot of interesting discussion. Ludvig Strigeus, a key early developer at Spotify and the person who inv…

Key	Action
`D`	Today
`W`	This week
`M`	This month
`↑`	Zoom out
`←`	Previous period
`→`	Next period
`Shift` + `←`	Previous period (fine)
`Shift` + `→`	Next period (fine)

Reading List Stats