anthowave

import React from 'react'

import { createClient } from 'urql';

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

const query = `
  query {

anthowave

<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."

anthowave

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;

anthowave

import React, { Suspense } from "react";
import { proxy, useProxy } from "valtio";
import { a, useSpring } from "@react-spring/web";

const fetchData = async (id) => {
  const response = await fetch(
    `https://hacker-news.firebaseio.com/v0/item/${id}.json`
  );
  return await response.json();
};

anthowave

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

anthowave

function* search(node) {
  if (!node) return;
  yield node;
  yield* search(node.firstChild);
  yield* search(node.nextSibling);
}

// example usage
for (let node of search(document)) {
  if (node.localName === 'title') {

anthowave

const matchDark = '(prefers-color-scheme: dark)'

function useDarkMode() {
  const [isDark, setIsDark] = React.useState(
    () => window.matchMedia && window.matchMedia(matchDark).matches
  );

  React.useEffect(() => {
    const matcher = window.matchMedia(matchDark);
    const onChange = ({ matches }) => setIsDark(matches);

anthowave

const stringLitArray = <L extends string>(arr: L[]) => arr;
const linkTypes = stringLitArray(['a', 'link']);
export type LinkType = (typeof linkTypes)[number];

const isLinkType = (x: any): x is LinkType => linkTypes.includes(x);

let link = 'a';
if (isLinkType('a')) {
  console.log("The current link is of type 'LinkType'");
}

anthowave

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

anthowave

import React from 'react'

export default function CountdownTimer({ startSeconds }) {

  const [seconds, setSeconds] = React.useState(startSeconds);

  const timeoutCallback = React.useCallback(() => {
    if(seconds >= 1)
      setSeconds(seconds - 1);
  }, [seconds]);