Skip to content

Instantly share code, notes, and snippets.

@gaearon
gaearon / 00-README-NEXT-SPA.md
Last active September 22, 2024 20:11
Next.js SPA example with dynamic client-only routing and static hosting

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.

@gaearon
gaearon / Wordle.js
Created January 22, 2022 20:49
wordle v3 (tiny wordle clone i built during a stream) https://www.youtube.com/watch?v=Qxn4-bTOx0g
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 August 3, 2022 19:06
wordle v2 (tiny wordle clone i built during a stream) https://www.youtube.com/watch?v=xGyUyGbfOBo
<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;
@gaearon
gaearon / index.html
Created January 15, 2022 03:26
tiny worldle clone i built during a stream https://www.youtube.com/watch?v=K77xThbu66A
<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 October 9, 2023 12:15
minesweeper (incomplete/simplfied). stream: https://www.youtube.com/watch?v=CL01_m50TYY
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="canvas"></div>
<button id="restart">Restart</button>
<script src="minesweeper.js"></script>
<style>
* {
<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 October 26, 2021 14:14
Curved SVG arrow between two objects (rects or circles) https://twitter.com/dan_abramov/status/1362255543721672704
// 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 17:38
Beneath Classes: Prototypes
class Spiderman {
lookOut() {
alert('My Spider-Sense is tingling.');
}
}
let miles = new Spiderman();
miles.lookOut();
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 August 18, 2024 23:29
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() {