A darn good search filter function in JavaScript

Demo here. The demo uses React and a list of blog post titles that get immediately filtered when you type in a search. I.e. you have the whole list but show less when a search term is entered. That the demo uses React isn't important. What's important ... more

Replace an item in an array, by number, without mutation in JavaScript (ES6)

Suppose you have an array like this: const items = ["B", "M", "X"]; And now you want to replace that second item ( "J" instead of "M" ) and suppose that you already know it's position as opposed to finding ... more

django-pipeline and Zopfli

tl;dr; I wrote my own extension to django-pipeline that uses Zopfli to create .gz files from static assets collected in Django. Here's the code. Nginx and Gzip What I wanted was to continue to use django-pipeline which does a great job of reading a settings.BUNDLES ... more

Django lock decorator with django-redis

Here's the code. It's quick-n-dirty but it works wonderfully: import functools import hashlib from django.core.cache import cache from django.utils.encoding import force_bytes def lock_decorator(key_maker=None): """ When you want to lock ... more

django-html-validator now supports Django 2.x

django-html-validator is a Django project that can validate your generated HTML. It does so by sending the HTML to https://html5.validator.nu/ or you can start your own Java server locally with vnu.jar from here. The output is that you can have validation ... more

To defer or to async JavaScript tags. That's the question.

tl;dr; async scores slightly better that defer (on script tags) in this experiment using Webpagetest. Much has been written about the difference between <script defer src="..."> and <script async src="..."> but nothing ... more

A good Django view function cache decorator for http.JsonResponse

I use this a lot. It has served me very well. The code: import hashlib import functools import markus # optional from django.core.cache import cache from django import http from django.utils.encoding import force_bytes, iri_to_uri metrics = markus.get_metrics(__name__) ... more

To CDN assets or just HTTP/2

tl;dr; I see little benefit in using a CDN at this point. I took two random pages here on my blog. One and Another. Doesn't matter what they say but it's important to notice that they're extremely similar. No big pictures. Both have 1 banner ad each. ... more

Rust > Go > Python ...to parse millions of dates in CSV files

It all started so innocently. The task at hand was to download an inventory of every single file ever uploaded to a public AWS S3 bucket. The way that works is that you download the root manifest.json . It references a boat load of .csv.gz files. So ... more

Webpack Bundle Analyzer for create-react-app

webpack-bundle-analyzer is an awesome little program for understanding why and which parts of your bundled .js files are so big. It's a lot more advanced (and pretty) than source-map-explorer. Thanks to this tip by @trevorwhealy you can now use webpack-bundle-analyzer ... more

Real minimal example of going from setState to MobX

This is not meant as a tutorial on MobX but hopefully it can be inspirational for people who have grokked how React's setState works but now feel they need to move the state management in their React app out of the components. To jump right in, here ... more

filterToQueryString - JavaScript function to turn current filter into a query string

tl;dr; this function: export const filterToQueryString = (filterObj, overrides) => { const copy = Object.assign(filterObj, overrides || {}) const searchParams = new URLSearchParams() Object.entries(copy).forEach(([key, value]) => { if (Array.isArray(value) ... more

Now using minimalcss

tl;dr; minimalcss is much better than mincss to slew out the minimal CSS your page needs to render. More accurate and more powerful features. This site now uses minimalcss in inline the minimum CSS needed to render the page. I started minimalcss back ... more

Docker gotcha with building a Dockerfile in sub directory

tl;dr; Watch out for .dockerignore causing no such file or directory when building Docker images First I tried to use docker-compose : ▶ docker-compose build ui Building ui Step 1/8 : FROM node:9 ---> 29831ba76d93 Step 2/8 : ADD ui/package.json /package.json ... more

How to throttle AND debounce an autocomplete input in React

Let's start with some best practices for a good autocomplete input: You want to start suggesting something as soon user starts typing. Apparently the most common search term on Google is f because people type that and Google's autocomplete starts suggesting ... more

csso and django-pipeline

This is a quick-and-dirty how-to on how to use csso to handle the minification/compression of CSS in django-pipeline . First create a file called compressors.py somewhere in your project. Make it something like this: import subprocess from pipeline.compressors ... more

Items function in JavaScript for looping over dictionaries like Python

Too many times I've written code like this: class MyComponent extends React.PureComponent { render() { return <ul> {Object.keys(this.props.someDictionary).map(key => { return <li key={key}><b>{key}:</b> {this.props.someDictionary[key]}</li> ... more

Component, component function or plain function in React

tl;dr; Use React.PureComponent (or React.Component ) if your component contains, or might contain, non-trivial logic that might affect it rendering or not. For all other cases, use a function, especially if it's not React specific. Your choices When ... more

Even more aggressively trying to preload your next page load

In 2014 I tried out an experiment to "Aggressively prefetching everything you might click". It was received with mixed reviews. Today, 4 years later, I stand by that experiment/solution and I even like it so much that I've decided to extend ... more

minimalcss 0.6.2 now strips all unused font faces

minimalcss is a Node API and cli app to analyze the minimal CSS needed for initial load. One of it's killer features is that all CSS parsing is done the "proper way". Meaning, it's reduced down to an AST that can be iterated over, mutated and ... more

Display current React version

Usually you know what version of React your app is using by opening the package.json , or poking around in node_modules/react/index.js . But perhaps there are many packaging abstractions in between your command line and the server. Especially if you ... more

CSS selector simplifier regular expression in JavaScript

The Problem I'm working on a project where it needs to evaluate CSS as a string. Basically, it compares CSS selectors against a DOM to see if the CSS selector is used in the DOM. But CSS has pseudo classes. A common one a lot of people are familiar with ... more

Msgpack vs JSON (with gzip)

tl;dr; I see no reason worth switching to Msgpack instead of good old JSON. I was curious, how much more efficient is Msgpack at packing a bunch of data into a file I can emit from a web service. In this experiment I take a massive JSON file that is ... more

How's My WiFi?

This was one of those late-evening-after-the-kids-are-asleep project. Followed by some next-morning-sober-readme-fixes-and-npmjs-paperwork. It's a little Node script that will open https://fast.com with puppeteer, and record, using document.querySelector('#speed-value') ... more

Synonyms with elasticsearch-dsl

The documentation about how to use synonyms in Elasticsearch is good but because it's such an advanced topic, even if you read the documentation carefully, you're still left with lots of questions. Let me show you some things I've learned about how to ... more

How to create-react-app with Docker

Why would you want to use Docker to do React app work? Isn't Docker for server-side stuff like Python and Golang etc? No, all the benefits of Docker apply to JavaScript client-side work too. So there are three main things you want to do with create-react-app ... more

To enable Tracking Protection for performance

In Firefox it's really easy to switch Tracking Protection on and off. I usually have it off in my main browser because, as a web developer, it often gives me an insight into what others would see and that's often helpful. Tracking Protection as a means ... more

Ultrafast loading of CSS

tl;dr; The ideal web performance, with regards to CSS, is to inline the minimal CSS and lazy load the rest after load. Two key things to understand/appreciate: The fastest performing web page is one that isn't blocked on rendering. You use some CSS framework ... more

A neat trick to zip a git repo with a version number

I have this WebExtension addon. It's not very important. Just a web extension that does some hacks to GitHub pages when I open them in Firefox. The web extension is a folder with a manifest.json , icons/icon-48.png , tricks.js , README.md etc. To upload ... more

Find static files defined in django-pipeline but not found

If you're reading this you're probably familiar with how, in django-pipeline, you define bundles of static files to be combined and served. If you're not familiar with django-pipeline it's unlike this'll be of much help. The Challenge (aka. the pitfall) ... more