How MDN's site-search works

tl;dr; Periodically, the whole of MDN is built, by our Node code, in a GitHub Action. A Python script bulk-publishes this to Elasticsearch. Our Django server queries the same Elasticsearch via /api/v1/search . The site-search page is a static single-page ... more

The best and simplest way to parse an RSS feed in Node

There are a lot of 'rss' related NPM packages but I think I've found a combination that is great for parsing RSS feeds. Something that takes up the minimal node_modules and works great. I think the killer combination is got for downloading, and, fast-xml-parser ... more

Sneaky block-scoping variables in JavaScript that eslint can't even detect

What do you think this code will print out? function validateURL(url) { if (url.includes("://")) { const url = new URL(url); return url.protocol === "https:"; } else { return "dunno"; } } console.log(validateURL("http://www.peterbe.com")); ... more

Progressive CSS rendering with or without data URLs

You can write your CSS so that it depends on images. Like this: li.one { background-image: url("skull.png"); } That means that the browser will do its best to style the li.one with what little it has from the CSS. Then, it'll ask the browser ... more

Quick comparison between sass and node-sass

To transpile .scss (or .sass ) in Node you have the choice between sass and node-sass . sass is a JavaScript compilation of Dart Sass which is supposedly "the primary implementation of Sass" which is a pretty powerful statement. node-sass on ... more

Throw JavaScript errors with extra information

Did you know, if you can create your own new Error instance and attach your own custom properties on that? This can come in very handy when you, from the caller, want to get more structured information from the error without relying on the error message. ... more

How to install Node 12 on Ubuntu (Eoan Ermine) 19.10

I'm setting up a new Ubuntu (Eoan Ermine) 19.10 server and I noticed that apt install nodejs gives you Node v10 which is an LTS (Long Term Support) version that'll last till April 2021. However, I want Node v12 which is the most recent LTS release as ... more

Performance of truth checking a JavaScript object

Using a Map instead of an object can be thoundsands times faster if you need repeatedly find out if it's empty. ... more

JavaScript destructuring like Python kwargs with defaults

In Python I'm sure it's been blogged about a buncha times before but, I couldn't find it, and I had to search too hard to find an example of this. Basically, what I'm trying to do is what Python does in this case, but in JavaScript: def do_something(arg="notset", ... more

How depend on a local Node package without npmjs.com

Suppose that you're working on ~/dev/my-cool-project and inside ~/dev/my-cool-project/package.json you might have something like this: "dependencies": { "that-cool-lib": "1.2.3", ... But that that-cool-lib is one of your ... more

How to split a block of HTML with Cheerio in NodeJS

cheerio is a great Node library for processing HTML. It's faster than JSDOM and years and years of jQuery usage makes the API feel yummily familiar. What if you have a piece of HTML that you want to split up into multiple blocks? For example, you have ... more

A Python and Preact app deployed on Heroku

Heroku is great but it's sometimes painful when your app isn't just in one single language. What I have is a project where the backend is Python (Django) and the frontend is JavaScript (Preact). The folder structure looks like this: / - README.md - manage.py ... more

Avoid async when all you have is (SSD) disk I/O in NodeJS

tl;dr; If you know that the only I/O you have is disk and the disk is SSD, then synchronous is probably more convenient, faster, and more memory lean. ... more

uwsgi weirdness with --http

Instead of upgrading everything on my server, I'm just starting from scratch. From Ubuntu 16.04 to Ubuntu 19.04 and I also upgraded everything else in sight. One of them was uwsgi . I copied various user config files but for uwsgi things didn't very ... more

NodeJS fs walk() or glob or fast-glob

It started with this: function walk(directory, filepaths = []) { const files = fs.readdirSync(directory); for (let filename of files) { const filepath = path.join(directory, filename); if (path.extname(filename) === '.md') { filepaths.push(filepath); ... more

A React vs. Preact case study for a widget

tl;dr; The previous (React) total JavaScript bundle size was: 36.2K Brotli compressed. The new (Preact) JavaScript bundle size was: 5.9K. I.e. 6 times smaller. Also, it appears to load faster in WebPageTest. ... more

SongSearch autocomplete rate now 2+ per second

By analyzing my Nginx logs, I've concluded that SongSearch's autocomplete JSON API now gets about 2.2 requests per second. I.e. these are XHR requests to /api/search/autocomplete?q=... . Roughly, 1.8 requests per second goes back to the Django/Elasticsearch ... more

From jQuery to Cash

tl;dr; The main JavaScript bundle goes from 29KB to 6KB by switching from JQuery to Cash. Both with Brotli compression. ... more

KeyCDN vs AWS CloudFront

Before I commit to KeyCDN for my little blog I wanted to check if CloudFront is better. Why? Because I already have an AWS account set up, familiar with boto3 , it's what we use for work, and it's AWS so it's usually pretty good stuff. As an attractive ... more

Whatsdeployed rewritten in React

A couple of months ago my colleague Michael @mythmon Cooper wanted to add a feature to the front-end code of Whatsdeployed and learned that the whole front-end is spaghetti jQuery code. So, instead, he re-wrote it in React. My only requirements were ... more

create-react-app, SCSS, and Bulmaswatch

1. Create a create-react-app first: create-react-app myapp 2. Enter it and install node-sass and bulmaswatch cd myapp yarn add bulma bulmaswatch node-sass 3. Edit the src/index.js to import index.scss instead: -import "./index.css"; +import ... more

Displaying fetch() errors and unwanted responses in React

tl;dr; You can use error instanceof window.Response to distinguish between fetch exceptions and fetch responses . When you do something like... const response = await fetch(URL); ...two bad things can happen. The XHR request fails entirely. I.e. there's ... more

An example of using Immer to handle nested objects in React state

When Immer first came out I was confused. I kinda understood what I was reading but I couldn't really see what was so great about it. As always, nothing beats actual code you type yourself to experience how something works. Here is, I believe, a great ... more

React.memo instead of React.PureComponent

React Hooks isn't here yet but when it comes I'll be all over that, replacing many of my classes with functions. However, as of React 16.6 there's this awesome new React.memo() thing which is such a neat solution. Why didn't I think of that, myself, ... more

React 16.6 with Suspense and lazy loading components with react-router-dom

If you're reading this, you might have thought one of two thoughts about this blog post title (or both); "Cool buzzwords!" or "Yuck! So much hyped buzzwords!" Either way, React v16.6 came out a couple of days ago and it brings with ... more

How much HTML is too much for optimal web performance

Right off the bat; I don't know. All I know is that it's complicated. I have this page which is just a blog post page. It's entirely rendered on the server, comments and all. At the time of writing, the total size of the HTML document is 119KB (30KB ... more

Switching from AWS S3 (boto3) to Google Cloud Storage (google-cloud-storage) in Python

I'm in the midst of rewriting a big app that currently uses AWS S3 and will soon be switched over to Google Cloud Storage. This blog post is a rough attempt to log various activities in both Python libraries: Disclaimer: I'm manually copying these snippets ... more

The ideal number of workers in Jest

tl;dr; Use --runInBand when running jest in CI and use --maxWorkers=3 on your laptop. We have a test suite that covers 236 tests across 68 suites and runs mainly a bunch of enzyme rendering of React component but also some plain old JavaScript function ... more

Inline scripts in create-react-app 2.0 and CSP hashes

UPDATE (1) My understanding of how to generate the CSP nonces was wrong. What I initially posted was a confusion between nonces and hashes. Sorry. The blog post has been updated to use hashing. UPDATE (2) Shortly after publishing this I changed my mind ... more

Merge two arrays without duplicates in JavaScript

Here's how you do it if you don't care about the order: const array1 = [1, 2, 3]; const array2 = [2, 3, 4]; console.log([...new Set([...array1, ...array2])]); // prints [1, 2, 3, 4] It merges two arrays first. Then it creates a set out of that merged ... more