| #!/usr/bin/env node | |
| // Supported by Chrome and Edge (based on Chromium). See https://github.com/WICG/ScrollToTextFragment | |
| const [scriptname, path, url, text] = process.argv; | |
| if (url === undefined || text === undefined) | |
| console.error(`Usage: ${scriptname} url "text to find"`); | |
| else console.info(`${url}#:~:text=${encodeURIComponent(text)}`); |
Some quotes about Test Driven Development (TDD) from DHH and Kent Beck. They made a debate video or something. Source: https://martinfowler.com/articles/is-tdd-dead/
Code is not complete without tests, but that doesn't mean you need to write your tests first -- DHH
Examples, think of examples. Work from specific to general. But maybe not everybody is like that. -- Kent Beck
A design insight can allow you to do more fine-grained testing. -- Kent Beck
| import React from "react"; | |
| export default function useThrottle(val, ms) { | |
| const [throttledVal, setThrottledVal] = React.useState(val); | |
| const latestVal = React.useRef(val); | |
| React.useEffect(() => { | |
| latestVal.current = val; | |
| }, [val]); |
If you're feeling lost in React land check these wonderful resources:
Thinking in React. Create an app from scratch in a few minutes to understand the mindset behind React. Absolutely recommended.
Basic theorethical concepts Sebastian Markbåge's attempt to documment the thinking on UI building that inspired React. Spoiler: React will be gone at some point, but these are important concepts that are here to stay.
React patterns. Great summary of the patterns that are often used throughout React apps. Going over these will get you up to speed pretty fast.
Remember, to play with React great sandboxes are CodeSandbox or a new project created with the Create React App generator.
This walkthrough explains how to prepare animated GIF images of UI interactions for the purpose of demoing. I'm assuming a MacOS setup but this could also be useful for other setups.
Note: If your GIFs will be just a few seconds long you can use a MacOS app called GIPHY capture.
We'll be using Quicktime Player for video recording, ffmpeg for video conversion and gifsicle to generate the animated GIFs. Let's first install the tooling:
brew install ffmpeg
| // A higher order function that makes a promise time out after X ms | |
| const timeoutAfter = ms => promise => { | |
| const rejectOnTimeout = new Promise((resolve, reject) => | |
| setTimeout(() => reject(new Error(`Timed out after ${ms} ms waiting for promise to resolve`)), ms) | |
| ) | |
| return Promise.race([promise, rejectOnTimeout]) | |
| } | |
| // Here's how you use it |
| import React, { Component } from 'react' | |
| import initialState from './initialState.js' | |
| import reducer from './reducer.js' | |
| export class Layout extends Component { | |
| state = initialState | |
| reduce = (action) => | |
| this.setState(reducer(action, this.state)) |
This example aims to demonstrate our inability to fully grasp [exponential functions][wikg]. As [Albert Bartlett][barl] once said, "The greatest shortcoming of the human race is our inability to understand the exponential function." This little D3 animation is based on a paper by Dr Bartlett.
Our action hero, a pixelated version of [Chris Martenson][chrs], stands on a platform inside an empty 4000 litre water tank. At the very bottom of the tank lies a magic drop of water. Invisible to the eye now, it doubles in size every 10 seconds.
Although the growth rate is constant, for a long time we see no change. But there's a well known limit, the capacity of the tank. Once he realises that water is rising exponentially, poor pixellated Chris has no time left to react.
Our brains are wired to predict future behaviour based on past behaviour (see [here][psyc]). But what happens when something growths exponentially? For a long time, the numbers are so little in relation to the scale that we hardly see the ch
| gistup |