Skip to content

Instantly share code, notes, and snippets.

@devinrhode2
devinrhode2 / next.config.js
Last active July 21, 2022 04:11
next.config.js typed with jsdoc, and shared modules. Next 12 + webpack 5. See prior revisions for next 11 support.
const { safeEnv } = require('./src/env')
// Note: NextConfig type allows any keys, so we are plucking the specific keys we want to type-check.
/**
* @type {Pick<
* import('next').NextConfig,
* | 'webpack'
* | 'env'
* >}
*/
@tannerlinsley
tannerlinsley / useBroadcastLeader.ts
Created June 4, 2021 14:37
A React Hook to determine if a tab of your application is the "leader" using BroadcastChannel and leader election
import { BroadcastChannel, createLeaderElection } from 'broadcast-channel'
import React from 'react'
const channels = {}
export function useBroadcastLeader(id = 'default') {
const [isBroadcastLeader, setIsBroadcastLeader] = React.useState(false)
React.useEffect(() => {
if (!channels[id]) {

assert() (sometimes called invariant())

Instead of checks like:

if (value === null) {
  throw new Error("missing value")
}
doSomethingThatNeedsValue(value)
@tannerlinsley
tannerlinsley / README.md
Last active April 12, 2024 17:04
Replacing Create React App with the Next.js CLI

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

Using JSDOC-Based TypeScript

Get Started

Choose your editor

  • WebStorm, Rider
    • Partial support, not enough intelli hints
    • Toggle on TypeScript language service
  • VSCode
@addyosmani
addyosmani / README.md
Last active July 13, 2024 21:26 — forked from 140bytes/LICENSE.txt
108 byte CSS Layout Debugger

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version