diff --git a/app/VideoAsGif.js b/app/VideoAsGif.js new file mode 100644 index 000000000..edcebe1c9 --- /dev/null +++ b/app/VideoAsGif.js @@ -0,0 +1,16 @@ +"use client" +import { useEffect, useState } from "react"; + +export function VideoAsGif(props) { + const {src, ariaLabel} = props + const [mounted, setMounted] = useState(false) + useEffect(()=>{ + setMounted(true) + }, []) + + if(!mounted){ + return null + } +return + +} diff --git a/app/[slug]/page.js b/app/[slug]/page.js index e3c8bbaaf..f01853e5e 100644 --- a/app/[slug]/page.js +++ b/app/[slug]/page.js @@ -8,6 +8,7 @@ import rehypePrettyCode from "rehype-pretty-code"; import { remarkMdxEvalCodeBlock } from "./mdx.js"; import overnight from "overnight/themes/Overnight-Slumber.json"; import "./markdown.css"; +import { VideoAsGif } from "../VideoAsGif.js"; overnight.colors["editor.background"] = "var(--code-bg)"; @@ -53,6 +54,7 @@ export default async function PostPage({ params }) { source={content} components={{ a: Link, + VideoAsGif: VideoAsGif, ...postComponents, }} options={{ diff --git a/public/a-complete-guide-to-useeffect/counter.gif b/public/a-complete-guide-to-useeffect/counter.gif deleted file mode 100644 index 8fc7acd6c..000000000 Binary files a/public/a-complete-guide-to-useeffect/counter.gif and /dev/null differ diff --git a/public/a-complete-guide-to-useeffect/counter.mp4 b/public/a-complete-guide-to-useeffect/counter.mp4 new file mode 100644 index 000000000..4eaa0fbab Binary files /dev/null and b/public/a-complete-guide-to-useeffect/counter.mp4 differ diff --git a/public/a-complete-guide-to-useeffect/deja_vu.gif b/public/a-complete-guide-to-useeffect/deja_vu.gif deleted file mode 100644 index d2508b5fa..000000000 Binary files a/public/a-complete-guide-to-useeffect/deja_vu.gif and /dev/null differ diff --git a/public/a-complete-guide-to-useeffect/deja_vu.mp4 b/public/a-complete-guide-to-useeffect/deja_vu.mp4 new file mode 100644 index 000000000..64134e2cb Binary files /dev/null and b/public/a-complete-guide-to-useeffect/deja_vu.mp4 differ diff --git a/public/a-complete-guide-to-useeffect/deps-compare-correct.gif b/public/a-complete-guide-to-useeffect/deps-compare-correct.gif deleted file mode 100644 index bf7786f96..000000000 Binary files a/public/a-complete-guide-to-useeffect/deps-compare-correct.gif and /dev/null differ diff --git a/public/a-complete-guide-to-useeffect/deps-compare-correct.mp4 b/public/a-complete-guide-to-useeffect/deps-compare-correct.mp4 new file mode 100644 index 000000000..3858f764c Binary files /dev/null and b/public/a-complete-guide-to-useeffect/deps-compare-correct.mp4 differ diff --git a/public/a-complete-guide-to-useeffect/deps-compare-wrong.gif b/public/a-complete-guide-to-useeffect/deps-compare-wrong.gif deleted file mode 100644 index 0d20a8075..000000000 Binary files a/public/a-complete-guide-to-useeffect/deps-compare-wrong.gif and /dev/null differ diff --git a/public/a-complete-guide-to-useeffect/deps-compare-wrong.mp4 b/public/a-complete-guide-to-useeffect/deps-compare-wrong.mp4 new file mode 100644 index 000000000..52c6b010d Binary files /dev/null and b/public/a-complete-guide-to-useeffect/deps-compare-wrong.mp4 differ diff --git a/public/a-complete-guide-to-useeffect/exhaustive-deps.gif b/public/a-complete-guide-to-useeffect/exhaustive-deps.gif deleted file mode 100644 index 68097d94d..000000000 Binary files a/public/a-complete-guide-to-useeffect/exhaustive-deps.gif and /dev/null differ diff --git a/public/a-complete-guide-to-useeffect/exhaustive-deps.mp4 b/public/a-complete-guide-to-useeffect/exhaustive-deps.mp4 new file mode 100644 index 000000000..1837f724a Binary files /dev/null and b/public/a-complete-guide-to-useeffect/exhaustive-deps.mp4 differ diff --git a/public/a-complete-guide-to-useeffect/index.md b/public/a-complete-guide-to-useeffect/index.md index c49076cf3..f57bb3327 100644 --- a/public/a-complete-guide-to-useeffect/index.md +++ b/public/a-complete-guide-to-useeffect/index.md @@ -23,7 +23,7 @@ To *see* the answers, we need to take a step back. The goal of this article isn >“Unlearn what you have learned.” — Yoda -![Yoda sniffing the air. Caption: “I smell bacon.”](./yoda.jpg) +![Yoda sniffing the air. Caption: “I smell bacon.”](./yoda.webp) --- @@ -178,7 +178,9 @@ Let’s say I do this sequence of steps: * **Press** “Show alert” * **Increment** it to 5 before the timeout fires -![Counter demo](./counter.gif) + + + What do you expect the alert to show? Will it show 5 — which is the counter state at the time of the alert? Or will it show 3 — the state when I clicked? @@ -465,7 +467,9 @@ If I click several times with a small delay, what is the log going to look like? You might think this is a gotcha and the end result is unintuitive. It’s not! We’re going to see a sequence of logs — each one belonging to a particular render and thus with its own `count` value. You can [try it yourself](https://codesandbox.io/s/lyx20m1ol): -![Screen recording of 1, 2, 3, 4, 5 logged in order](./timeout_counter.gif) + + + You may think: “Of course that’s how it works! How else could it work?” @@ -481,7 +485,9 @@ Well, that’s not how `this.state` works in classes. It’s easy to make the mi However, `this.state.count` always points at the *latest* count rather than the one belonging to a particular render. So you’ll see `5` logged each time instead: -![Screen recording of 5, 5, 5, 5, 5 logged in order](./timeout_counter_class.gif) + + + I think it’s ironic that Hooks rely so much on JavaScript closures, and yet it’s the class implementation that suffers from [the canonical wrong-value-in-a-timeout confusion](https://wsvincent.com/javascript-closure-settimeout-for-loop/) that’s often associated with closures. This is because the actual source of the confusion in this example is the mutation (React mutates `this.state` in classes to point to the latest state) and not closures themselves. @@ -540,7 +546,9 @@ function Example() { // ... ``` -![Screen recording of 5, 5, 5, 5, 5 logged in order](./timeout_counter_refs.gif) + + + It might seem quirky to mutate something in React. However, this is exactly how React itself reassigns `this.state` in classes. Unlike with captured props and state, you don’t have any guarantees that reading `latestCount.current` would give you the same value in any particular callback. By definition, you can mutate it any time. This is why it’s not a default, and you have to opt into that. @@ -580,7 +588,9 @@ You might be wondering: but how can the cleanup of the previous effect still “ We’ve been here before... 🤔 -![Deja vu (cat scene from the Matrix movie)](./deja_vu.gif) + + + Quoting the previous section: @@ -802,7 +812,9 @@ If deps contain every value used by the effect, React knows when to re-run it: }, [name]); ``` -![Diagram of effects replacing one another](./deps-compare-correct.gif) + + + *(Dependencies are different, so we re-run the effect.)* @@ -814,7 +826,9 @@ But if we specified `[]` for this effect, the new effect function wouldn’t run }, []); // Wrong: name is missing in deps ``` -![Diagram of effects replacing one another](./deps-compare-wrong.gif) + + + *(Dependencies are equal, so we skip the effect.)* @@ -897,7 +911,9 @@ Our effect uses `count` — a value inside the component (but outside the effect Therefore, specifying `[]` as a dependency will create a bug. React will compare the dependencies, and skip updating this effect: -![Diagram of stale interval closure](./interval-wrong.gif) + + + *(Dependencies are equal, so we skip the effect.)* @@ -956,7 +972,9 @@ function Counter() { That would [fix the problem](https://codesandbox.io/s/0x0mnlyq8l) but our interval would be cleared and set again whenever the `count` changes. That may be undesirable: -![Diagram of interval that re-subscribes](./interval-rightish.gif) + + + *(Dependencies are different, so we re-run the effect.)* @@ -998,7 +1016,9 @@ That’s exactly what `setCount(c => c + 1)` does. You can think of it as “sen **Note that we actually _did the work_ to remove the dependency. We didn’t cheat. Our effect doesn’t read the `counter` value from the render scope anymore:** -![Diagram of interval that works](./interval-right.gif) + + + *(Dependencies are equal, so we skip the effect.)* @@ -1266,7 +1286,10 @@ By adding this dependency, we’re not just “appeasing React”. It *makes sen Thanks to the `exhaustive-deps` lint rule from the `eslint-plugin-react-hooks` plugin, you can [analyze the effects as you type in your editor](https://github.com/facebook/react/issues/14920) and receive suggestions about which dependencies are missing. In other words, a machine can tell you which data flow changes aren’t handled correctly by a component. -![Lint rule gif](./exhaustive-deps.gif) + + + + Pretty sweet. diff --git a/public/a-complete-guide-to-useeffect/interval-right.gif b/public/a-complete-guide-to-useeffect/interval-right.gif deleted file mode 100644 index d375812c8..000000000 Binary files a/public/a-complete-guide-to-useeffect/interval-right.gif and /dev/null differ diff --git a/public/a-complete-guide-to-useeffect/interval-right.mp4 b/public/a-complete-guide-to-useeffect/interval-right.mp4 new file mode 100644 index 000000000..cb7bb7bcd Binary files /dev/null and b/public/a-complete-guide-to-useeffect/interval-right.mp4 differ diff --git a/public/a-complete-guide-to-useeffect/interval-rightish.gif b/public/a-complete-guide-to-useeffect/interval-rightish.gif deleted file mode 100644 index 2fd27aeab..000000000 Binary files a/public/a-complete-guide-to-useeffect/interval-rightish.gif and /dev/null differ diff --git a/public/a-complete-guide-to-useeffect/interval-rightish.mp4 b/public/a-complete-guide-to-useeffect/interval-rightish.mp4 new file mode 100644 index 000000000..71226702f Binary files /dev/null and b/public/a-complete-guide-to-useeffect/interval-rightish.mp4 differ diff --git a/public/a-complete-guide-to-useeffect/interval-wrong.gif b/public/a-complete-guide-to-useeffect/interval-wrong.gif deleted file mode 100644 index 80a98d949..000000000 Binary files a/public/a-complete-guide-to-useeffect/interval-wrong.gif and /dev/null differ diff --git a/public/a-complete-guide-to-useeffect/interval-wrong.mp4 b/public/a-complete-guide-to-useeffect/interval-wrong.mp4 new file mode 100644 index 000000000..205da5d2f Binary files /dev/null and b/public/a-complete-guide-to-useeffect/interval-wrong.mp4 differ diff --git a/public/a-complete-guide-to-useeffect/timeout_counter.gif b/public/a-complete-guide-to-useeffect/timeout_counter.gif deleted file mode 100644 index 5fe4c6125..000000000 Binary files a/public/a-complete-guide-to-useeffect/timeout_counter.gif and /dev/null differ diff --git a/public/a-complete-guide-to-useeffect/timeout_counter.mp4 b/public/a-complete-guide-to-useeffect/timeout_counter.mp4 new file mode 100644 index 000000000..7d04b0842 Binary files /dev/null and b/public/a-complete-guide-to-useeffect/timeout_counter.mp4 differ diff --git a/public/a-complete-guide-to-useeffect/timeout_counter_class.gif b/public/a-complete-guide-to-useeffect/timeout_counter_class.gif deleted file mode 100644 index c5bde5a48..000000000 Binary files a/public/a-complete-guide-to-useeffect/timeout_counter_class.gif and /dev/null differ diff --git a/public/a-complete-guide-to-useeffect/timeout_counter_class.mp4 b/public/a-complete-guide-to-useeffect/timeout_counter_class.mp4 new file mode 100644 index 000000000..9735c5af2 Binary files /dev/null and b/public/a-complete-guide-to-useeffect/timeout_counter_class.mp4 differ diff --git a/public/a-complete-guide-to-useeffect/timeout_counter_refs.gif b/public/a-complete-guide-to-useeffect/timeout_counter_refs.gif deleted file mode 100644 index 4d2fdcb35..000000000 Binary files a/public/a-complete-guide-to-useeffect/timeout_counter_refs.gif and /dev/null differ diff --git a/public/a-complete-guide-to-useeffect/timeout_counter_refs.mp4 b/public/a-complete-guide-to-useeffect/timeout_counter_refs.mp4 new file mode 100644 index 000000000..8067b0283 Binary files /dev/null and b/public/a-complete-guide-to-useeffect/timeout_counter_refs.mp4 differ diff --git a/public/a-complete-guide-to-useeffect/yoda.jpg b/public/a-complete-guide-to-useeffect/yoda.jpg deleted file mode 100644 index ce278e8f9..000000000 Binary files a/public/a-complete-guide-to-useeffect/yoda.jpg and /dev/null differ diff --git a/public/a-complete-guide-to-useeffect/yoda.webp b/public/a-complete-guide-to-useeffect/yoda.webp new file mode 100644 index 000000000..d19b503ce Binary files /dev/null and b/public/a-complete-guide-to-useeffect/yoda.webp differ diff --git a/public/algebraic-effects-for-the-rest-of-us/effects.jpg b/public/algebraic-effects-for-the-rest-of-us/effects.jpg deleted file mode 100644 index d0655a7e0..000000000 Binary files a/public/algebraic-effects-for-the-rest-of-us/effects.jpg and /dev/null differ diff --git a/public/algebraic-effects-for-the-rest-of-us/effects.webp b/public/algebraic-effects-for-the-rest-of-us/effects.webp new file mode 100644 index 000000000..60244d81e Binary files /dev/null and b/public/algebraic-effects-for-the-rest-of-us/effects.webp differ diff --git a/public/algebraic-effects-for-the-rest-of-us/index.md b/public/algebraic-effects-for-the-rest-of-us/index.md index d71aea5ff..e5edd42d2 100644 --- a/public/algebraic-effects-for-the-rest-of-us/index.md +++ b/public/algebraic-effects-for-the-rest-of-us/index.md @@ -11,7 +11,7 @@ My first attempts to figure out what they are or why I should care about them we But my colleague Sebastian [kept](https://mobile.twitter.com/sebmarkbage/status/763792452289343490) [referring](https://mobile.twitter.com/sebmarkbage/status/776883429400915968) [to](https://mobile.twitter.com/sebmarkbage/status/776840575207116800) [them](https://mobile.twitter.com/sebmarkbage/status/969279885276454912) as a mental model for some things we do inside of React. (Sebastian works on the React team and came up with quite a few ideas, including Hooks and Suspense.) At some point, it became a running joke on the React team, with many of our conversations ending with: -!["Algebraic Effects" caption on the "Ancient Aliens" guy meme](./effects.jpg) +!["Algebraic Effects" caption on the "Ancient Aliens" guy meme](./effects.webp) It turned out that algebraic effects are a cool concept and not as scary as I thought from those pdfs. **If you’re just using React, you don’t need to know anything about them — but if you’re feeling curious, like I was, read on.** diff --git a/public/how-are-function-components-different-from-classes/bug.gif b/public/how-are-function-components-different-from-classes/bug.gif deleted file mode 100644 index b6289c4e7..000000000 Binary files a/public/how-are-function-components-different-from-classes/bug.gif and /dev/null differ diff --git a/public/how-are-function-components-different-from-classes/bug.mp4 b/public/how-are-function-components-different-from-classes/bug.mp4 new file mode 100644 index 000000000..7fa5184a5 Binary files /dev/null and b/public/how-are-function-components-different-from-classes/bug.mp4 differ diff --git a/public/how-are-function-components-different-from-classes/fix.gif b/public/how-are-function-components-different-from-classes/fix.gif deleted file mode 100644 index d8caf1fdb..000000000 Binary files a/public/how-are-function-components-different-from-classes/fix.gif and /dev/null differ diff --git a/public/how-are-function-components-different-from-classes/fix.mp4 b/public/how-are-function-components-different-from-classes/fix.mp4 new file mode 100644 index 000000000..5df429fac Binary files /dev/null and b/public/how-are-function-components-different-from-classes/fix.mp4 differ diff --git a/public/how-are-function-components-different-from-classes/index.md b/public/how-are-function-components-different-from-classes/index.md index 6318d27c1..b358fce6b 100644 --- a/public/how-are-function-components-different-from-classes/index.md +++ b/public/how-are-function-components-different-from-classes/index.md @@ -67,7 +67,7 @@ class ProfilePage extends React.Component { It is common to think these two snippets of code are equivalent. People often freely refactor between these patterns without noticing their implications: -![Spot the difference between two versions](./wtf.gif) + **However, these two snippets of code are subtly different.** Take a good look at them. Do you see the difference yet? Personally, it took me a while to see this. @@ -97,7 +97,7 @@ You will notice a peculiar difference: * With the above `ProfilePage` **class**, it would alert `'Followed Sophie'`: -![Demonstration of the steps](./bug.gif) + --- @@ -214,7 +214,7 @@ class ProfilePage extends React.Component { **You’ve “captured” props at the time of render:** -![Capturing Pokemon](./pokemon.gif) + This way any code inside it (including `showMessage`) is guaranteed to see the props for this particular render. React doesn’t “move our cheese” anymore. @@ -266,7 +266,7 @@ When the parent component renders `ProfilePage` with different props, React will This is why, in the function version of [this demo](https://codesandbox.io/s/pjqnl16lm7), clicking Follow on Sophie’s profile and then changing selection to Sunil would alert `'Followed Sophie'`: -![Demo of correct behavior](./fix.gif) + This behavior is correct. *(Although you might want to [follow Sunil](https://mobile.twitter.com/threepointone) too!)* @@ -397,6 +397,6 @@ Functions are no exception to this rule. It will take some time for this to be c React functions always capture their values — and now we know why. -![Smiling Pikachu](./pikachu.gif) + They’re a whole different Pokémon. diff --git a/public/how-are-function-components-different-from-classes/pikachu.gif b/public/how-are-function-components-different-from-classes/pikachu.gif deleted file mode 100644 index a7cd0bd1c..000000000 Binary files a/public/how-are-function-components-different-from-classes/pikachu.gif and /dev/null differ diff --git a/public/how-are-function-components-different-from-classes/pikachu.mp4 b/public/how-are-function-components-different-from-classes/pikachu.mp4 new file mode 100644 index 000000000..e03a26665 Binary files /dev/null and b/public/how-are-function-components-different-from-classes/pikachu.mp4 differ diff --git a/public/how-are-function-components-different-from-classes/pokemon.gif b/public/how-are-function-components-different-from-classes/pokemon.gif deleted file mode 100644 index a3359a6fa..000000000 Binary files a/public/how-are-function-components-different-from-classes/pokemon.gif and /dev/null differ diff --git a/public/how-are-function-components-different-from-classes/pokemon.mp4 b/public/how-are-function-components-different-from-classes/pokemon.mp4 new file mode 100644 index 000000000..e26ec8192 Binary files /dev/null and b/public/how-are-function-components-different-from-classes/pokemon.mp4 differ diff --git a/public/how-are-function-components-different-from-classes/wtf.gif b/public/how-are-function-components-different-from-classes/wtf.gif deleted file mode 100644 index 3a696a4fb..000000000 Binary files a/public/how-are-function-components-different-from-classes/wtf.gif and /dev/null differ diff --git a/public/how-are-function-components-different-from-classes/wtf.mp4 b/public/how-are-function-components-different-from-classes/wtf.mp4 new file mode 100644 index 000000000..65899a73e Binary files /dev/null and b/public/how-are-function-components-different-from-classes/wtf.mp4 differ diff --git a/public/how-does-the-development-mode-work/devmode.png b/public/how-does-the-development-mode-work/devmode.png deleted file mode 100644 index 2ab1b1b0c..000000000 Binary files a/public/how-does-the-development-mode-work/devmode.png and /dev/null differ diff --git a/public/how-does-the-development-mode-work/devmode.webp b/public/how-does-the-development-mode-work/devmode.webp new file mode 100644 index 000000000..d49452ea5 Binary files /dev/null and b/public/how-does-the-development-mode-work/devmode.webp differ diff --git a/public/how-does-the-development-mode-work/index.md b/public/how-does-the-development-mode-work/index.md index 80b46fcf5..43f7bd293 100644 --- a/public/how-does-the-development-mode-work/index.md +++ b/public/how-does-the-development-mode-work/index.md @@ -131,7 +131,7 @@ That’s bad because it makes the website load and run slower. In the last two years, the situation has significantly improved. For example, webpack added a simple `mode` option instead of manually configuring the `process.env.NODE_ENV` replacement. React DevTools also now displays a red icon on sites with development mode, making it easy to spot and even [report](https://mobile.twitter.com/BestBuySupport/status/1027195363713736704). -![Development mode warning in React DevTools](devmode.png) +![Development mode warning in React DevTools](devmode.webp) Opinionated setups like Create React App, Next/Nuxt, Vue CLI, Gatsby, and others make it even harder to mess up by separating the development builds and production builds into two separate commands. (For example, `npm start` and `npm run build`.) Typically, only a production build can be deployed, so the developer can’t make this mistake anymore. diff --git a/public/making-setinterval-declarative-with-react-hooks/counter_delay.gif b/public/making-setinterval-declarative-with-react-hooks/counter_delay.gif deleted file mode 100644 index 64abd1a67..000000000 Binary files a/public/making-setinterval-declarative-with-react-hooks/counter_delay.gif and /dev/null differ diff --git a/public/making-setinterval-declarative-with-react-hooks/counter_delay.mp4 b/public/making-setinterval-declarative-with-react-hooks/counter_delay.mp4 new file mode 100644 index 000000000..5423217c8 Binary files /dev/null and b/public/making-setinterval-declarative-with-react-hooks/counter_delay.mp4 differ diff --git a/public/making-setinterval-declarative-with-react-hooks/counter_inception.gif b/public/making-setinterval-declarative-with-react-hooks/counter_inception.gif deleted file mode 100644 index d8dc2b6c6..000000000 Binary files a/public/making-setinterval-declarative-with-react-hooks/counter_inception.gif and /dev/null differ diff --git a/public/making-setinterval-declarative-with-react-hooks/counter_inception.mp4 b/public/making-setinterval-declarative-with-react-hooks/counter_inception.mp4 new file mode 100644 index 000000000..79011e7a2 Binary files /dev/null and b/public/making-setinterval-declarative-with-react-hooks/counter_inception.mp4 differ diff --git a/public/making-setinterval-declarative-with-react-hooks/index.md b/public/making-setinterval-declarative-with-react-hooks/index.md index 4c114aaff..8fd9a61fc 100644 --- a/public/making-setinterval-declarative-with-react-hooks/index.md +++ b/public/making-setinterval-declarative-with-react-hooks/index.md @@ -122,7 +122,7 @@ I’ll illustrate this point with a concrete example. Let’s say we want the interval delay to be adjustable: -![Counter with an input that adjusts the interval delay](./counter_delay.gif) + While you wouldn’t necessarily control the delay with an *input*, adjusting it dynamically can be useful — for example, to poll for some AJAX updates less often while the user has switched to a different tab. @@ -620,7 +620,7 @@ This `useInterval()` Hook is really fun to play with. When the side effects are **For example, we can have a `delay` of one interval be controlled by another:** -![Counter that automatically speeds up](./counter_inception.gif) + ```jsx {10-15} function Counter() { diff --git a/public/preparing-for-tech-talk-part-1-motivation/cauldron.jpg b/public/preparing-for-tech-talk-part-1-motivation/cauldron.jpg deleted file mode 100644 index bf9a2da83..000000000 Binary files a/public/preparing-for-tech-talk-part-1-motivation/cauldron.jpg and /dev/null differ diff --git a/public/preparing-for-tech-talk-part-1-motivation/cauldron.webp b/public/preparing-for-tech-talk-part-1-motivation/cauldron.webp new file mode 100644 index 000000000..25971feb0 Binary files /dev/null and b/public/preparing-for-tech-talk-part-1-motivation/cauldron.webp differ diff --git a/public/preparing-for-tech-talk-part-1-motivation/index.md b/public/preparing-for-tech-talk-part-1-motivation/index.md index c38190d10..b2acdfe04 100644 --- a/public/preparing-for-tech-talk-part-1-motivation/index.md +++ b/public/preparing-for-tech-talk-part-1-motivation/index.md @@ -47,7 +47,7 @@ Combining these two internal motivations gives me a recipe for a personally sati That is my formula. Yours might be different — think about it! Which talks made you feel in a special way? What are the structural similarities between them? (We’ll discuss the talk structure more in the next posts in this series.) -![Luna Lovegood invoking a Patronus Charm. Image © 2007 Warner Bros. Ent](./patronus.jpg) +![Luna Lovegood invoking a Patronus Charm. Image © 2007 Warner Bros. Ent](./patronus.webp) Giving a talk that’s aligned with your motivations is helpful in several ways: @@ -73,7 +73,7 @@ For me, a talk is just a way to generalize those conversations and make them one So if you want to give a great talk, *talking* to people is a good way to start. -![Hermione Granger making a potion. Vials have text imposed on top: "motivations" and "conversations". Cauldron is a metaphor for your talk. Image © 2001 Warner Bros. Ent](./cauldron.jpg) +![Hermione Granger making a potion. Vials have text imposed on top: "motivations" and "conversations". Cauldron is a metaphor for your talk. Image © 2001 Warner Bros. Ent](./cauldron.webp) --- diff --git a/public/preparing-for-tech-talk-part-1-motivation/patronus.jpg b/public/preparing-for-tech-talk-part-1-motivation/patronus.jpg deleted file mode 100644 index 837a5826e..000000000 Binary files a/public/preparing-for-tech-talk-part-1-motivation/patronus.jpg and /dev/null differ diff --git a/public/preparing-for-tech-talk-part-1-motivation/patronus.webp b/public/preparing-for-tech-talk-part-1-motivation/patronus.webp new file mode 100644 index 000000000..f7ebb0696 Binary files /dev/null and b/public/preparing-for-tech-talk-part-1-motivation/patronus.webp differ diff --git a/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why-beyond-react-16.es.png b/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why-beyond-react-16.es.png deleted file mode 100644 index 10bbb4d38..000000000 Binary files a/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why-beyond-react-16.es.png and /dev/null differ diff --git a/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why-beyond-react-16.es.webp b/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why-beyond-react-16.es.webp new file mode 100644 index 000000000..69bda7bd6 Binary files /dev/null and b/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why-beyond-react-16.es.webp differ diff --git a/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why-beyond-react-16.png b/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why-beyond-react-16.png deleted file mode 100644 index 1179d9a21..000000000 Binary files a/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why-beyond-react-16.png and /dev/null differ diff --git a/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why-beyond-react-16.webp b/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why-beyond-react-16.webp new file mode 100644 index 000000000..f133a6eab Binary files /dev/null and b/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why-beyond-react-16.webp differ diff --git a/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why-hot-reloading.es.png b/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why-hot-reloading.es.png deleted file mode 100644 index c79353dd2..000000000 Binary files a/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why-hot-reloading.es.png and /dev/null differ diff --git a/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why-hot-reloading.es.webp b/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why-hot-reloading.es.webp new file mode 100644 index 000000000..0dfd6305b Binary files /dev/null and b/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why-hot-reloading.es.webp differ diff --git a/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why-hot-reloading.png b/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why-hot-reloading.png deleted file mode 100644 index 99b7bedd5..000000000 Binary files a/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why-hot-reloading.png and /dev/null differ diff --git a/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why-hot-reloading.webp b/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why-hot-reloading.webp new file mode 100644 index 000000000..4be879792 Binary files /dev/null and b/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why-hot-reloading.webp differ diff --git a/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why-introducing-hooks.es.png b/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why-introducing-hooks.es.png deleted file mode 100644 index f34ccc21e..000000000 Binary files a/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why-introducing-hooks.es.png and /dev/null differ diff --git a/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why-introducing-hooks.es.webp b/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why-introducing-hooks.es.webp new file mode 100644 index 000000000..62b9238c7 Binary files /dev/null and b/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why-introducing-hooks.es.webp differ diff --git a/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why-introducing-hooks.png b/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why-introducing-hooks.png deleted file mode 100644 index d3173310e..000000000 Binary files a/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why-introducing-hooks.png and /dev/null differ diff --git a/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why-introducing-hooks.webp b/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why-introducing-hooks.webp new file mode 100644 index 000000000..d20bfc8dc Binary files /dev/null and b/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why-introducing-hooks.webp differ diff --git a/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why.es.png b/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why.es.png deleted file mode 100644 index 5e0b284d8..000000000 Binary files a/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why.es.png and /dev/null differ diff --git a/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why.es.webp b/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why.es.webp new file mode 100644 index 000000000..2daace6b2 Binary files /dev/null and b/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why.es.webp differ diff --git a/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why.png b/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why.png deleted file mode 100644 index 4a2cf1417..000000000 Binary files a/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why.png and /dev/null differ diff --git a/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why.webp b/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why.webp new file mode 100644 index 000000000..2e6b1001d Binary files /dev/null and b/public/preparing-for-tech-talk-part-2-what-why-and-how/how-what-why.webp differ diff --git a/public/preparing-for-tech-talk-part-2-what-why-and-how/index.md b/public/preparing-for-tech-talk-part-2-what-why-and-how/index.md index 101ab67e6..28cc9b7c4 100644 --- a/public/preparing-for-tech-talk-part-2-what-why-and-how/index.md +++ b/public/preparing-for-tech-talk-part-2-what-why-and-how/index.md @@ -31,7 +31,7 @@ That movie is about putting ideas into other people’s heads while they sleep. **What is the one thing that you want people to take away from your talk?** I try to formulate it as a sentence early on. This idea shouldn’t be longer than a dozen words. People will forget most of what you say so you need to pick carefully *what* you want to stick. It’s the seed you want to plant in their heads. -![Spinning top from the Inception movie](./totem.jpg) +![Spinning top from the Inception movie](./totem.webp) For example, here’s the core ideas of my talks. @@ -47,7 +47,7 @@ I don’t always explicitly *say* the central idea out loud or write it on a sli An idea is the **“What”** of my talk. But there is also **“How”** and **“Why”**: -![Pyramid: “How” is on top of “What”. “What” is on top of “Why”.](./how-what-why.png) +![Pyramid: “How” is on top of “What”. “What” is on top of “Why”.](./how-what-why.webp) **“How”** is my method for delivering the idea to the audience. Personally, I prefer live demos, but there are many things that can work. I will talk more about “How” in the later blog posts in this series. @@ -83,16 +83,16 @@ But there must be a [reason](/preparing-for-tech-talk-part-1-motivation/) you ge Here’s the example “What”, “Why”, and “How” from my talks. -![How: “Live demo”. What: “Functional principles improve the developer experience”. Why: “Create your own tools to make programming fun”.](how-what-why-hot-reloading.png) +![How: “Live demo”. What: “Functional principles improve the developer experience”. Why: “Create your own tools to make programming fun”.](how-what-why-hot-reloading.webp) *(The above pyramid is for [Hot reloading with time travel](https://www.youtube.com/watch?v=xsSnOQynTHs))* -![How: “Live demo”. What: “Waiting for CPU and IO has a unified solution”. Why: “React cares about both user and developer experience”.](how-what-why-beyond-react-16.png) +![How: “Live demo”. What: “Waiting for CPU and IO has a unified solution”. Why: “React cares about both user and developer experience”.](how-what-why-beyond-react-16.webp) *(The above pyramid is for [Beyond React 16](https://www.youtube.com/watch?v=nLF0n9SACd4))* -![How: “Live demo”. What: “Hooks make stateful logic reusable. Why: “Hooks reveal the true nature of React”.](how-what-why-introducing-hooks.png) +![How: “Live demo”. What: “Hooks make stateful logic reusable. Why: “Hooks reveal the true nature of React”.](how-what-why-introducing-hooks.webp) *(The above pyramid is for [Introducing Hooks](https://www.youtube.com/watch?v=dpw9EHDh2bM))* diff --git a/public/preparing-for-tech-talk-part-2-what-why-and-how/totem.jpg b/public/preparing-for-tech-talk-part-2-what-why-and-how/totem.jpg deleted file mode 100644 index 5b7a21859..000000000 Binary files a/public/preparing-for-tech-talk-part-2-what-why-and-how/totem.jpg and /dev/null differ diff --git a/public/preparing-for-tech-talk-part-2-what-why-and-how/totem.webp b/public/preparing-for-tech-talk-part-2-what-why-and-how/totem.webp new file mode 100644 index 000000000..d01a816cc Binary files /dev/null and b/public/preparing-for-tech-talk-part-2-what-why-and-how/totem.webp differ diff --git a/public/react-as-a-ui-runtime/index.md b/public/react-as-a-ui-runtime/index.md index c4718982f..f39b64cf5 100644 --- a/public/react-as-a-ui-runtime/index.md +++ b/public/react-as-a-ui-runtime/index.md @@ -7,7 +7,7 @@ cta: 'react' Most tutorials introduce React as a UI library. This makes sense because React *is* a UI library. That’s literally what the tagline says! -![React homepage screenshot: "A JavaScript library for building user interfaces"](./react.png) +![React homepage screenshot: "A JavaScript library for building user interfaces"](./react.webp) I’ve written about the challenges of creating [user interfaces](/the-elements-of-ui-engineering/) before. But this post talks about React in a different way — more as a [programming runtime](https://en.wikipedia.org/wiki/Runtime_system). diff --git a/public/react-as-a-ui-runtime/react.png b/public/react-as-a-ui-runtime/react.png deleted file mode 100644 index 335eea331..000000000 Binary files a/public/react-as-a-ui-runtime/react.png and /dev/null differ diff --git a/public/react-as-a-ui-runtime/react.webp b/public/react-as-a-ui-runtime/react.webp new file mode 100644 index 000000000..44674e55a Binary files /dev/null and b/public/react-as-a-ui-runtime/react.webp differ diff --git a/public/the-wet-codebase/index.md b/public/the-wet-codebase/index.md index 044cc0fca..d4af674f1 100644 --- a/public/the-wet-codebase/index.md +++ b/public/the-wet-codebase/index.md @@ -12,7 +12,7 @@ But as any Phish fan can tell you, [wasting time](https://www.youtube.com/watch? A year ago, I gave a conference talk, and I want to share it today with those of you who haven’t watched it. This talk isn’t about React, or even JavaScript. -![Slide from the talk](./wet_codebase.png) +![Slide from the talk](./wet_codebase.webp) **[Watch: The Wet Codebase](https://www.deconstructconf.com/2019/dan-abramov-the-wet-codebase)** *(includes transcript)* diff --git a/public/the-wet-codebase/wet_codebase.png b/public/the-wet-codebase/wet_codebase.png deleted file mode 100644 index fadc28cb8..000000000 Binary files a/public/the-wet-codebase/wet_codebase.png and /dev/null differ diff --git a/public/the-wet-codebase/wet_codebase.webp b/public/the-wet-codebase/wet_codebase.webp new file mode 100644 index 000000000..f8bf60d42 Binary files /dev/null and b/public/the-wet-codebase/wet_codebase.webp differ diff --git a/public/why-do-hooks-rely-on-call-order/hooks-hn1.png b/public/why-do-hooks-rely-on-call-order/hooks-hn1.png deleted file mode 100644 index 9bcc992c4..000000000 Binary files a/public/why-do-hooks-rely-on-call-order/hooks-hn1.png and /dev/null differ diff --git a/public/why-do-hooks-rely-on-call-order/hooks-hn1.webp b/public/why-do-hooks-rely-on-call-order/hooks-hn1.webp new file mode 100644 index 000000000..9b534f0ed Binary files /dev/null and b/public/why-do-hooks-rely-on-call-order/hooks-hn1.webp differ diff --git a/public/why-do-hooks-rely-on-call-order/hooks-hn2.png b/public/why-do-hooks-rely-on-call-order/hooks-hn2.png deleted file mode 100644 index e022b96dd..000000000 Binary files a/public/why-do-hooks-rely-on-call-order/hooks-hn2.png and /dev/null differ diff --git a/public/why-do-hooks-rely-on-call-order/hooks-hn2.webp b/public/why-do-hooks-rely-on-call-order/hooks-hn2.webp new file mode 100644 index 000000000..45a5dd87f Binary files /dev/null and b/public/why-do-hooks-rely-on-call-order/hooks-hn2.webp differ diff --git a/public/why-do-hooks-rely-on-call-order/index.md b/public/why-do-hooks-rely-on-call-order/index.md index 6e894c285..522a73e6c 100644 --- a/public/why-do-hooks-rely-on-call-order/index.md +++ b/public/why-do-hooks-rely-on-call-order/index.md @@ -11,11 +11,11 @@ If you’d like to understand what Hooks are and what problems they solve, check Chances are you won’t like Hooks at first: -![Negative HN comment](./hooks-hn1.png) +![Negative HN comment](./hooks-hn1.webp) They’re like a music record that grows on you only after a few good listens: -![Positive HN comment from the same person four days later](./hooks-hn2.png) +![Positive HN comment from the same person four days later](./hooks-hn2.webp) When you read the docs, don’t miss [the most important page](https://reactjs.org/docs/hooks-custom.html) about building your own Hooks! Too many people get fixated on some part of our messaging they disagree with (e.g. that learning classes is difficult) and miss the bigger picture behind Hooks. And the bigger picture is that **Hooks are like *functional mixins* that let you create and compose your own abstractions.** diff --git a/public/writing-resilient-components/index.md b/public/writing-resilient-components/index.md index 3ef939f75..2b7576d0c 100644 --- a/public/writing-resilient-components/index.md +++ b/public/writing-resilient-components/index.md @@ -422,7 +422,7 @@ Note how this array of “effect dependencies” isn’t really a new concept. I This, in turn, lets us validate them automatically: -![Demo of exhaustive-deps lint rule](./useeffect.gif) + *(This is a demo of the new recommended `exhaustive-deps` lint rule which is a part of `eslint-plugin-react-hooks`. It will soon be included in Create React App.)* diff --git a/public/writing-resilient-components/useeffect.gif b/public/writing-resilient-components/useeffect.gif deleted file mode 100644 index f6803292f..000000000 Binary files a/public/writing-resilient-components/useeffect.gif and /dev/null differ diff --git a/public/writing-resilient-components/useeffect.mp4 b/public/writing-resilient-components/useeffect.mp4 new file mode 100644 index 000000000..5898e6031 Binary files /dev/null and b/public/writing-resilient-components/useeffect.mp4 differ