gaearon

Next.js client-only SPA example

Made this example to show how to use Next.js router for a 100% SPA (no JS server) app.

You use Next.js router like normally, but don't define getStaticProps and such. Instead you do client-only fetching with swr, react-query, or similar methods.

You can generate HTML fallback for the page if there's something meaningful to show before you "know" the params. (Remember, HTML is static, so it can't respond to dynamic query. But it can be different per route.)

Don't like Next? Here's how to do the same in Gatsby.

blargism

import { html, render } from 'lit-html';

export default class ComponentClass extends HTMLElement {
    constructor() {
        super();
        // set sane defaults if desired.
        this._value = null;
    }

    get values() {

ChrisShank

/**
  This gist is more or less pseudocode for how I think we should deal with routing. 
  The largest problem with routing is that is permates *all* layers of an application (business logic, rendering, ect.)
  and most routing library to be an all in one solution to this problem. As a result routing libraries are becoming more like
  state management libraries than routing libraries. I recommend that we break routing into three distinct concerns:
  
  1. Application-specific routing logic
    - Use any state management tool you want, xstate is a good fit here
  2. Serializing/deserializing the URL
    - Deals specifically with interacting with the broswers History API and extracting data from the URL

sibelius

import Redis, { KeyType, Ok } from 'ioredis';

const redis = new Redis(process.env.REDIS_HOST);

export const set = async (
  key: KeyType,
  seconds: number,
  value: Record<string, unknown>,
): Promise<Ok> =>
  // https://redis.io/commands/psetex

kyleshevlin

// One of my new favorite React Hook patternms is to create handler
// functions for a custom hook using `React.useMemo` instead of
// `React.useCallback`, like so:

function useBool(initialState = false) {
  const [state, setState] = React.useState(initialState)
  
  // Instead of individual React.useCallbacks gathered into an object
  // Let's memoize the whole object. Then, we can destructure the
  // methods we need in our consuming component.

JacobFischer

import React from 'react';
import {
  pdf,
  Document,
  Page,
  Text,
} from '@react-pdf/renderer';
import { saveAs } from 'file-saver';

const DocumentPdf = ({ someString }) => (

tannerlinsley

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

sibelius

import React, { useContext, useCallback } from 'react';

export const FeatureFlagContext = React.createContext<string[]>([]);

export const useFeatureFlag = () => {
  const features = useContext<string[]>(FeatureFlagContext);

  const hasFeature = useCallback(
    (feature: string) => {
      return features.includes(feature);

rockpunk

#!/usr/bin/env bash

# git select (branch select)
# a git command for checking out a branch or deleting a branch via
# a bash selection menu that uses up/down arrow keys
#
# usage:
# - git select
#
# set up:

swyxio

// // with thanks
// https://dev.to/emreloper/react-router-v6-in-two-minutes-2i96
// https://github.com/ReactTraining/react-router/blob/dev/docs/installation/getting-started.md
// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/9d29adedf662de685356f711951ef8b9e8342865/types/react-router/index.d.ts#L1
// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/9d29adedf662de685356f711951ef8b9e8342865/types/react-router-dom/index.d.ts#L1

// // release notes
// https://github.com/ReactTraining/react-router/releases/tag/v6.0.0-alpha.3

declare module "react-router-dom" {