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.

bryanmylee

const path = require('path');
const postcss = require('postcss');
const preprocess = require('svelte-preprocess');

const replaceFileExtension = (filePath, newExtension) => {
  const { name, root, dir } = path.parse(filePath);
    return path.format({
      name,
      root,
      dir,

rmcfadzean

import { createMachine } from 'xstate';

interface Booking {
  id: string;
  flight: Flight;
  paid: boolean;
}

interface Passenger {
  name: string;

ef4

Webpack 5 Node Polyfills Upgrade Cheatsheet

Webpack 4 automatically polyfilled many Node APIs in the browser. This was not a great system, because it could lead to surprisingly giant libraries getting pulled into your app by accident, and it gave you no control over the exact versions of the polyfills you were using.

So Webpack 5 removed this functionality. That means you need to make changes if you were relying on those polyfills. This is a quick reference for how to replace the most common patterns.

List of polyfill packages that were used in webpack 4

For each automatically-polyfilled node package name on the left, this shows the name of the NPM package that was used to polyfill it on the right. Under webpack 5 you can manually install these packages and use them via resolve.fallback.

patrickmatte

$easeLinear: cubic-bezier(0, 0, 1, 1);
$easeSineInOut: cubic-bezier(0.37, 0, 0.63, 1);
$easeSineIn: cubic-bezier(0.12, 0, 0.39, 0);
$easeSineOut: cubic-bezier(0.61, 1, 0.88, 1);
$easeQuadraticInOut: cubic-bezier(0.45, 0, 0.55, 1);
$easeQuadraticIn: cubic-bezier(0.11, 0, 0.5, 0);
$easeQuadraticOut: cubic-bezier(0.5, 1, 0.89, 1);
$easeCubicInOut: cubic-bezier(0.65, 0, 0.35, 1);
$easeCubicIn: cubic-bezier(0.32, 0, 0.67, 0);
$easeCubicOut: cubic-bezier(0.33, 1, 0.68, 1);

tomhicks

/*
Copy this into the console of any web page that is interactive and doesn't
do hard reloads. You will hear your DOM changes as different pitches of
audio.

I have found this interesting for debugging, but also fun to hear web pages
render like UIs do in movies.
*/

const audioCtx = new (window.AudioContext || window.webkitAudioContext)()

WorldSEnder

// The two main components are the interfaces
// Generic<T, Context> and GenericArg<"identifier">

// Generic basically structurally replaces types in T that are GenericArg<S>
// for some `S extends keyof Context` with `Context[S]`
// See the test cases for specific uses.

// ====== TESTING
// Pass through for trivial types
type Test00 = Generic<number>;

developit

🐻 valoo

just the bare necessities of state management.

Usage

Hotlink it from https://unpkg.com/valoo.

See Interactive Codepen Demo.

hubgit

import { FieldProps } from 'formik'
import React from 'react'
import Select, { Option, ReactSelectProps } from 'react-select'

export const SelectField: React.SFC<ReactSelectProps & FieldProps> = ({
  options,
  field,
  form,
}) => (
  <Select

seanf

You can use the tuple() function in tuple.ts to infer tuple types in TypeScript and cut down on the need to repeat yourself. Without tuple(), declaring a constant of a tuple type looks like this:

const daysOfTheWeek: ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"] = 
  ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];

You can't do this:

const daysOfTheWeek = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];