Simon Willison simonw

React debouncing pattern for API calls

Classic debounce function:

const debounce = (fn, delay) => {
      let timer = null;
      return function (...args) {
          const context = this;
          timer && clearTimeout(timer);

timer = setTimeout(() => {

How to run a redis server using Docker-for-Mac

This will work with other flavours of Docker as well.

Run the following command:

docker run --name my-redis -p 6379:6379 --restart always --detach redis

This will download and run redis, set to auto-restart when your machine starts and bound to port 6379 on your machine.

How to upgrade a Heroku PostgreSQL database to a new plan

I started a project on a Hobby Dev plan (free, limit 10,000 rows), and then later needed to upgrade it to Hobby Basic ($9/month, limit 10,000,000 rows).

After assigning the new database, I had two databases attached to the application. They looked something like this:

HEROKU_POSTGRESQL_OLIVE (postgresql-dimensional-3321) Old, free-tier (Hobby Dev) database

	from django.db.models import Value, CharField


	def combined_recent(limit, **kwargs):
	datetime_field = kwargs.pop('datetime_field', 'created')
	querysets = []
	for key, queryset in kwargs.items():
	querysets.append(
	queryset.annotate(
	recent_changes_type=Value(

	{
	"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
	"width": 500,
	"height": 500,
	"data": {
	"url": "https://vice-police-shootings.now.sh/vice-bc7c892.jsono?sql=select+ViceNews_FullOISData.rowid%2CDate%2C+NumberOfSubjects%2C%0D%0A++Fatal.value+as+Fatal%2C%0D%0A++SubjectArmed.value+as+SubjectArmed%2C%0D%0A++SubjectRace.value+as+SubjectRace%2C%0D%0A++SubjectGender.value+as+SubjectGender%2C%0D%0A++Department.value+as+Department%2C%0D%0A++city.value+as+city%0D%0Afrom+ViceNews_FullOISData%0D%0A++join+Fatal+on+ViceNews_FullOISData.Fatal+%3D+Fatal.id%0D%0A++join+SubjectArmed+on+ViceNews_FullOISData.SubjectArmed+%3D+SubjectArmed.id%0D%0A++join+SubjectRace+on+ViceNews_FullOISData.SubjectRace+%3D+SubjectRace.id%0D%0A++join+SubjectGender+on+ViceNews_FullOISData.SubjectGender+%3D+SubjectGender.id%0D%0A++join+Department+on+ViceNews_FullOISData.Department+%3D+Department.id%0D%0A++join+city+on+ViceNews_FullOISData.city+%3D+city.id%0D%0Aorder+by+ViceNews_FullOISData.rowid+limit+1000",
	"format": {

	{
	"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
	"width": 500,
	"height": 500,
	"data": {
	"url": "https://vice-police-shootings.now.sh/vice-bc7c892.jsono?sql=select+ViceNews_FullOISData.rowid%2CDate%2C+NumberOfSubjects%2C%0D%0A++Fatal.value+as+Fatal%2C%0D%0A++SubjectArmed.value+as+SubjectArmed%2C%0D%0A++SubjectRace.value+as+SubjectRace%2C%0D%0A++SubjectGender.value+as+SubjectGender%2C%0D%0A++Department.value+as+Department%2C%0D%0A++city.value+as+city%0D%0Afrom+ViceNews_FullOISData%0D%0A++join+Fatal+on+ViceNews_FullOISData.Fatal+%3D+Fatal.id%0D%0A++join+SubjectArmed+on+ViceNews_FullOISData.SubjectArmed+%3D+SubjectArmed.id%0D%0A++join+SubjectRace+on+ViceNews_FullOISData.SubjectRace+%3D+SubjectRace.id%0D%0A++join+SubjectGender+on+ViceNews_FullOISData.SubjectGender+%3D+SubjectGender.id%0D%0A++join+Department+on+ViceNews_FullOISData.Department+%3D+Department.id%0D%0A++join+city+on+ViceNews_FullOISData.city+%3D+city.id%0D%0Aorder+by+ViceNews_FullOISData.rowid+limit+1000",
	"format": {

	{
	"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
	"data": {
	"url": "data/seattle-weather.csv",
	"format": {
	"type": "csv"
	}
	},
	"vconcat": [
	{

	{
	"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
	"vconcat": [
	{
	"width": 600,
	"height": 300,
	"mark": "bar",
	"data": {
	"url": "data/population.json",
	"format": {

	{
	"$schema": "https://vega.github.io/schema/vega-lite/v2.1.json",
	"width": 700,
	"height": 800,
	"data": {
	"url": "https://san-francisco.datasettes.com/sf-trees-ebc2ad9.jsono?sql=select+latitude%2C+longitude%2C+qSpecies+from+Street_Tree_List+where+latitude+is+not+null and Latitude > 37.77 and Longitude < -122.45",
	"format": {
	"type": "json",
	"property": "rows"
	}