anthowen

ruby '2.7.1'

gem 'rails', github: 'rails/rails'
gem 'tzinfo-data', '>= 1.2016.7'  # Don't rely on OSX/Linux timezone data

# Action Text
gem 'actiontext', github: 'basecamp/actiontext', ref: 'okra'
gem 'okra', github: 'basecamp/okra'

# Drivers

anthowen

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

anthowen

Create New App

JavaScript Template

npx create-react-app@next --scripts-version=@next --template=cra-template@next my-js-app

TypeScript Template

npx create-react-app@next --scripts-version=@next --template=typescript@next my-ts-app

anthowen

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

anthowen

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

anthowen

CREATE SEQUENCE IF NOT EXISTS public.global_id_sequence;

CREATE OR REPLACE FUNCTION id_generator(OUT result BIGINT) AS $$
DECLARE
    epoch BIGINT := 1610850820000;
    seq_id BIGINT;
    now_millis BIGINT;
    shard_id INT := 1;
BEGIN
    SELECT nextval('public.global_id_sequence') % 1024 INTO seq_id;

anthowen

<LoadingButton
  ariaErrorAlert={"There was an error creating your account"}
  ariaLoadingAlert={
    authState === AuthState.CreatingUser
      ? "Registering account, please wait..."
      : authState === AuthState.FulfillingPurchase
      ? "Generating license, please wait..."
      : "Loading..."
  }
  ariaSuccessAlert="Account created! Redirecting."

anthowen

import React from 'react'

import { createClient } from 'urql';

const client = createClient({
  url: 'https://api.thegraph.com/subgraphs/name/dabit3/zoranftsubgraph'
})

const query = `
  query {

anthowen

const { expect } = require("chai");

describe("NFTOptions", function () {
    const penguAddr = "0xBd3531dA5CF5857e7CfAA92426877b022e612cf8";
    const penguOwner = "0x2c2c2F6DBe08942280d4F7626b6BAd5C11D20215";
    const ids = ["2036", "4205"];
    const buyer = "0xe5ee2B9d5320f2D1492e16567F36b578372B3d9F";

    const erc721Abi = [
        "function approve(address to, uint256 tokenId)"

anthowen

/**
 * 1. Initialize new node project (npm init -y)
 * 2. Run: npm install ethers
 * 3. Add private key where PRIVATE_KEY
 * 4. Optionally, update gas price (line 29) or chosen gas limit
 * 4. Run: node score-claim.js
 */
// Imports
const ethers = require("ethers");
const { parseUnits } = require("@ethersproject/units");