Skip to content

Instantly share code, notes, and snippets.

gaearon / Wordle.js
Created Jan 22, 2022
wordle v3 (tiny wordle clone i built during a stream)
View Wordle.js
import { useState, useEffect, useRef, useMemo } from 'react'
export default function Wordle() {
let [currentAttempt, setCurrentAttempt] = useState('')
let [bestColors, setBestColors] = useState(() => new Map())
let [history, setHistory] = usePersistedHistory(h => {
useEffect(() => {
gaearon / index.html
Last active Aug 3, 2022
wordle v2 (tiny wordle clone i built during a stream)
View index.html
<div id="screen">
<div id="grid"></div>
<div id="keyboard"></div>
body, html {
background: #111;
color: white;
font-family: sans-serif;
View index.html
<div id="grid"></div>
body, html {
background: #111;
color: white;
font-family: sans-serif;
text-align: center;
text-transform: uppercase;
gaearon / minesweeper.html
Last active Jul 10, 2022
minesweeper (incomplete/simplfied). stream:
View minesweeper.html
<!DOCTYPE html>
<meta charset="UTF-8">
<div id="canvas"></div>
<button id="restart">Restart</button>
<script src="minesweeper.js"></script>
* {
View snake.html
<div id="canvas"></div>
#canvas {
width: 500px;
height: 300px;
border: 5px solid black;
position: relative;
box-sizing: content-box;
gaearon / CurvedArrow.js
Last active Oct 26, 2021
Curved SVG arrow between two objects (rects or circles)
View CurvedArrow.js
// from/to: { left, top, width, height, shape: 'circle' | 'rect' }
function CurvedArrow({ from, to }) {
function curvedHorizontal(x1, y1, x2, y2) {
function pos(t) {
let mx = x1 + (x2 - x1) / 2;
let p1 = {x: x1, y: y1};
let p2 = {x: mx, y: y1};
let p3 = {x: mx, y: y2};
let p4 = {x: x2, y: y2};
return {
gaearon / Classes.js
Created May 27, 2020
Beneath Classes: Prototypes
View Classes.js
class Spiderman {
lookOut() {
alert('My Spider-Sense is tingling.');
let miles = new Spiderman();
View node_hot_reload.js
const express = require('express');
const app = express();
// Application
app.get('/', function(req, res) {
if (process.env.NODE_ENV === 'development') {
for (var key in require.cache) {
delete require.cache[key];
gaearon /
Last active Aug 16, 2022
useLayoutEffect and server rendering

If you use server rendering, keep in mind that neither useLayoutEffect nor useEffect can run until the JavaScript is downloaded.

You might see a warning if you try to useLayoutEffect on the server. Here's two common ways to fix it.

Option 1: Convert to useEffect

If this effect isn't important for first render (i.e. if the UI still looks valid before it runs), then useEffect instead.

function MyComponent() {
gaearon / MyResponsiveComponent.js
Created Nov 1, 2018
Examples from "Making Sense of React Hooks"
View MyResponsiveComponent.js
function MyResponsiveComponent() {
const width = useWindowWidth(); // Our custom Hook
return (
<p>Window width is {width}</p>