Skip to content

Instantly share code, notes, and snippets.

@gaearon
gaearon / Wordle.js
Created Jan 22, 2022
wordle v3 (tiny wordle clone i built during a stream) https://www.youtube.com/watch?v=Qxn4-bTOx0g
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 => {
waitForAnimation(h)
})
useEffect(() => {
@gaearon
gaearon / index.html
Last active Aug 3, 2022
wordle v2 (tiny wordle clone i built during a stream) https://www.youtube.com/watch?v=xGyUyGbfOBo
View index.html
<div id="screen">
<h1>Wordle</h1>
<div id="grid"></div>
<div id="keyboard"></div>
</div>
<style>
body, html {
background: #111;
color: white;
font-family: sans-serif;
View index.html
<h1>Wordle</h1>
<div id="grid"></div>
<style>
body, html {
background: #111;
color: white;
font-family: sans-serif;
text-align: center;
text-transform: uppercase;
}
@gaearon
gaearon / minesweeper.html
Last active Jul 10, 2022
minesweeper (incomplete/simplfied). stream: https://www.youtube.com/watch?v=CL01_m50TYY
View minesweeper.html
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="canvas"></div>
<button id="restart">Restart</button>
<script src="minesweeper.js"></script>
<style>
* {
View snake.html
<div id="canvas"></div>
<style>
#canvas {
width: 500px;
height: 300px;
border: 5px solid black;
position: relative;
box-sizing: content-box;
}
@gaearon
gaearon / CurvedArrow.js
Last active Oct 26, 2021
Curved SVG arrow between two objects (rects or circles) https://twitter.com/dan_abramov/status/1362255543721672704
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
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();
miles.lookOut();
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
gaearon / uselayouteffect-ssr.md
Last active Aug 16, 2022
useLayoutEffect and server rendering
View uselayouteffect-ssr.md

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
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>
);
}