Vladislav Gapurov gapurov

Replacing Create React App with the Next.js CLI

How dare you make a jab at Create React App!?

Firstly, Create React App is good. But it's a very rigid CLI, primarily designed for projects that require very little to no configuration. This makes it great for beginners and simple projects but unfortunately, this means that it's pretty non-extensible. Despite the involvement from big names and a ton of great devs, it has left me wanting a much better developer experience with a lot more polish when it comes to hot reloading, babel configuration, webpack configuration, etc. It's definitely simple and good, but not amazing.

Now, compare that experience to Next.js which for starters has a much larger team behind it provided by a world-class company (Vercel) who are all financially dedicated to making it the best DX you could imagine to build any React application. Next.js is the 💣-diggity. It has amazing docs, great support, can grow with your requirements into SSR or static site generation, etc.

So why

👀📎 It looks like you're preparing to MC a conference...

🚨 GIANT DISCLAIMER: This stuff is far from authoritative. But it's what I think works for me, and what I enjoy in an MC when I'm attending a conference.

Biggest tip - enjoy yourself.

'Users hate change'

This week NN Group released a video by Jakob Nielsen in which he attempts to help designers deal with the problem of customers being resistant to their new site/product redesign. The argument goes thusly:

Humans naturally resist change
Your change is for the better
Customers should just get used to it and stop complaining

There's slightly more to it than that, he caveats his argument with requiring you to have of course followed their best practices on product design, and allows for a period of customers being able to elect to continue to use the old site, although he says this is obviously only a temporary solution as you don't want to support both.

2019 update: this essay has been updated on my personal site, together with a followup on how to get started

2020 update: I'm now writing a book with updated versions of all these essays and 35 other chapters!!!!

1. Learn in public

If there's a golden rule, it's this one, so I put it first. All the other rules are more or less elaborations of this rule #1.

You already know that you will never be done learning. But most people "learn in private", and lurk. They consume content without creating any themselves. Again, that's fine, but we're here to talk about being in the top quintile. What you do here is to have a habit of creating learning exhaust. Write blogs and tutorials and cheatsheets. Speak at meetups and conferences. Ask and answer things on Stackoverflow or Reddit. (Avoid the walled gardens like Slack and Discourse, they're not public). Make Youtube videos

	export default function createCrudHooks({
	baseKey,
	indexFn,
	singleFn,
	createFn,
	updateFn,
	deleteFn,
	}) {
	const useIndex = (config) => useQuery([baseKey], indexFn, config)
	const useSingle = (id, config) =>

	// put markdown files in articles/*.md
	// run `node build.mjs`
	// upload to a host
	import path from "path";
	import { promises as fs } from "fs";
	import shell from "shelljs";
	import cheerio from "cheerio";
	import remark from "remark";
	import html from "remark-html";
	import report from "vfile-reporter";

	#!/bin/bash

	while :; do

	verf=$(cat /dev/urandom \| tr -dc '0-9' \| fold -w 8 \| head -n 1)
	pin=$(cat /dev/urandom \| tr -dc '0-9' \| fold -w 5 \| head -n 1)

	ip=$(printf "%d.%d.%d.%d\n" "$((RANDOM % 256))" "$((RANDOM % 256))" "$((RANDOM % 256))" "$((RANDOM % 256))")

	# (c) 2020 Humu
	# MIT License

	from typing import Any

	import github

	AUTOMERGE_LABEL_NAME = 'automerge'

	// this is a big array of 76 items I need to split into groups of 10
	const hugeArray = Array.from({ length: 76 }, (_, i) => i);

	function chunkify(array, chunkSize = 10) {
	// make a new array
	const chunks = Array.from(
	// give it however many slots are needed - in our case 8
	// 1-7 with 10 items, and 8th slot will have 6
	{ length: Math.ceil(array.length / chunkSize) },
	// this is a map function that will fill up our slots

	""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
	" Font
	:set guifont=Source\ Code\ Pro:h14

	""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
	" Hide pointless junk at the bottom, doesn't work in .vimrc for some reason?
	:set laststatus=0
	:set noshowmode "don't show --INSERT--
	:set noruler "don't show line numbers/column/% junk