Stay ahead in web development: latest news, tools, and insights #38
Tags: webdev, weeklyfoo, javascript, node
Published: 2024-06-24 05:59:20


weeklyfoo #38 is here: your weekly digest of all webdev news you need to know! This time you'll find 48 valuable links in 6 categories! Enjoy!
## 🚀 Read it!

- <a href="https://luminousmen.com/post/senior-engineer-fatigue?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vbHVtaW5vdXNtZW4uY29tL3Bvc3Qvc2VuaW9yLWVuZ2luZWVyLWZhdGlndWUiLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM4LCJzZWN0aW9uIjoicmVhZEl0Iiwic291cmNlIjoid2ViIn19">Senior Engineer Fatigue</a>: As you move deeper into your engineering career, a peculiar phenomenon starts to set in — a phase I like to call the onset of Senior Wisdom.<small> / </small><small>*productivity*</small><small> / </small><small>5 min read</small>


<Hr />

## 📰 Good to know

- <a href="https://www.alexmolas.com/2024/06/06/good-code.html?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vd3d3LmFsZXhtb2xhcy5jb20vMjAyNC8wNi8wNi9nb29kLWNvZGUuaHRtbCIsInByb2plY3QiOiJ3ZWVrbHlmb28iLCJpbmRleCI6MzgsInNlY3Rpb24iOiJnb29kVG9Lbm93Iiwic291cmNlIjoid2ViIn19">Good code is rarely read</a>: Write code that is rarely read!<small> / </small><small>*engineering*</small><small> / </small><small>3 min read</small>
- <a href="https://bradfrost.com/blog/post/enforcing-accessibility-best-practices-with-automatically-generated-ids/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vYnJhZGZyb3N0LmNvbS9ibG9nL3Bvc3QvZW5mb3JjaW5nLWFjY2Vzc2liaWxpdHktYmVzdC1wcmFjdGljZXMtd2l0aC1hdXRvbWF0aWNhbGx5LWdlbmVyYXRlZC1pZHMvIiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozOCwic2VjdGlvbiI6Imdvb2RUb0tub3ciLCJzb3VyY2UiOiJ3ZWIifX0%3D">enforcing accessibility best practices with automatically-generated ids</a>: So you don't have to think about all the ids again.<small> / </small><small>*engineering*</small><small> / </small><small>5 min read</small>
- <a href="https://github.com/nicanorflavier/spf-dkim-dmarc-simplified?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZ2l0aHViLmNvbS9uaWNhbm9yZmxhdmllci9zcGYtZGtpbS1kbWFyYy1zaW1wbGlmaWVkIiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozOCwic2VjdGlvbiI6Imdvb2RUb0tub3ciLCJzb3VyY2UiOiJ3ZWIifX0%3D">Understanding SPF, DKIM, and DMARC - A Simple Guide</a>: About Email security is a key part of internet communication. But what are SPF, DKIM, and DMARC, and how do they work? This guide will explain it all in simple terms to make these concepts clearer.<small> / </small><small>*email*, *spf*, *dkim*, *dmarc*</small><small> / </small><small>18 min read</small>
- <a href="https://www.figma.com/blog/36-questions-to-fall-back-in-love-with-tech/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vd3d3LmZpZ21hLmNvbS9ibG9nLzM2LXF1ZXN0aW9ucy10by1mYWxsLWJhY2staW4tbG92ZS13aXRoLXRlY2gvIiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozOCwic2VjdGlvbiI6Imdvb2RUb0tub3ciLCJzb3VyY2UiOiJ3ZWIifX0%3D">36 questions to fall (back) in love with tech</a>: Divided into three sets, worth quickly reading it!<small> / </small><small>*career*</small><small> / </small><small>12 min read</small>
- <a href="https://htmx.org/posts/2024-06-17-htmx-2-0-0-is-released/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vaHRteC5vcmcvcG9zdHMvMjAyNC0wNi0xNy1odG14LTItMC0wLWlzLXJlbGVhc2VkLyIsInByb2plY3QiOiJ3ZWVrbHlmb28iLCJpbmRleCI6MzgsInNlY3Rpb24iOiJnb29kVG9Lbm93Iiwic291cmNlIjoid2ViIn19">htmx 2.0.0 has been released!</a>: Next major version of htmx<small> / </small><small>*frameworks*</small><small> / </small><small>3 min read</small>
- <a href="https://tidyfirst.substack.com/p/the-documentation-tradeoff?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vdGlkeWZpcnN0LnN1YnN0YWNrLmNvbS9wL3RoZS1kb2N1bWVudGF0aW9uLXRyYWRlb2ZmIiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozOCwic2VjdGlvbiI6Imdvb2RUb0tub3ciLCJzb3VyY2UiOiJ3ZWIifX0%3D">The Documentation Tradeoff</a>: A little, sure, but be careful about more<small> / </small><small>*docs*</small><small> / </small><small>6 min read</small>
- <a href="https://adventures.nodeland.dev/archive/what-happens-when-a-major-npm-library-goes/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vYWR2ZW50dXJlcy5ub2RlbGFuZC5kZXYvYXJjaGl2ZS93aGF0LWhhcHBlbnMtd2hlbi1hLW1ham9yLW5wbS1saWJyYXJ5LWdvZXMvIiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozOCwic2VjdGlvbiI6Imdvb2RUb0tub3ciLCJzb3VyY2UiOiJ3ZWIifX0%3D">What happens when a major npm library goes commercial?</a>: This edition covers the switch of a popular library to a restrictive license, Node.js performance tips, and new releases.<small> / </small><small>*license*</small><small> / </small><small>5 min read</small>
- <a href="https://developers.facebook.com/blog/post/2024/06/18/the-threads-api-is-finally-here?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZGV2ZWxvcGVycy5mYWNlYm9vay5jb20vYmxvZy9wb3N0LzIwMjQvMDYvMTgvdGhlLXRocmVhZHMtYXBpLWlzLWZpbmFsbHktaGVyZSIsInByb2plY3QiOiJ3ZWVrbHlmb28iLCJpbmRleCI6MzgsInNlY3Rpb24iOiJnb29kVG9Lbm93Iiwic291cmNlIjoid2ViIn19">The Threads API is finally here!</a>: Threads API is now available to all developers.<small> / </small><small>*threads*, *meta*</small><small> / </small><small>1 min read</small>
- <a href="https://matduggan.com/reviewing-github-copilot-workspaces/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vbWF0ZHVnZ2FuLmNvbS9yZXZpZXdpbmctZ2l0aHViLWNvcGlsb3Qtd29ya3NwYWNlcy8iLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM4LCJzZWN0aW9uIjoiZ29vZFRvS25vdyIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">GitHub Copilot Workspace Review</a>: Ouch - big fail in this review.<small> / </small><small>*github*</small><small> / </small><small>13 min read</small>
- <a href="https://www.corbado.com/blog/passkey-implementation-pitfalls-misconceptions-unknowns?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vd3d3LmNvcmJhZG8uY29tL2Jsb2cvcGFzc2tleS1pbXBsZW1lbnRhdGlvbi1waXRmYWxscy1taXNjb25jZXB0aW9ucy11bmtub3ducyIsInByb2plY3QiOiJ3ZWVrbHlmb28iLCJpbmRleCI6MzgsInNlY3Rpb24iOiJnb29kVG9Lbm93Iiwic291cmNlIjoid2ViIn19">Why Passkey Implementation is 100x Harder Than You Think – Misconceptions, Pitfalls and Unknown Unknowns</a>: Read about the challenges, pitfalls and misconceptions we faced while developing our passkey-first authentication solution and passkey intelligence.<small> / </small><small>*passkeys*</small><small> / </small><small>48 min read</small>
- <a href="https://avi.im/blag/2024/sqlite-bad-rep/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vYXZpLmltL2JsYWcvMjAyNC9zcWxpdGUtYmFkLXJlcC8iLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM4LCJzZWN0aW9uIjoiZ29vZFRvS25vdyIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">Why does SQLite (in production) have such a bad rep?</a>: SQLite, like any other database, has its pros and cons. For the majority of applications and scales, it is perfect. You always have PostgreSQL for anything else.<small> / </small><small>*sqlite*</small><small> / </small><small>2 min read</small>
- <a href="https://dev.to/digitalpollution/why-experienced-developers-struggle-to-land-jobs-33mg?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZGV2LnRvL2RpZ2l0YWxwb2xsdXRpb24vd2h5LWV4cGVyaWVuY2VkLWRldmVsb3BlcnMtc3RydWdnbGUtdG8tbGFuZC1qb2JzLTMzbWciLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM4LCJzZWN0aW9uIjoiZ29vZFRvS25vdyIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">Why experienced developers struggle to land jobs</a>: A view on what experienced devs can do to land a job.<small> / </small><small>*career*</small><small> / </small><small>18 min read</small>
- <a href="https://2023.stateofjs.com/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vMjAyMy5zdGF0ZW9manMuY29tLyIsInByb2plY3QiOiJ3ZWVrbHlmb28iLCJpbmRleCI6MzgsInNlY3Rpb24iOiJnb29kVG9Lbm93Iiwic291cmNlIjoid2ViIn19">State of JavaScript 2023</a>: Results of the popular annual JS survey.<small> / </small><small>*javascript*, *survey*</small><small> / </small><small>6 min read</small>
- <a href="https://colinhacks.com/essays/live-types-typescript-monorepo?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vY29saW5oYWNrcy5jb20vZXNzYXlzL2xpdmUtdHlwZXMtdHlwZXNjcmlwdC1tb25vcmVwbyIsInByb2plY3QiOiJ3ZWVrbHlmb28iLCJpbmRleCI6MzgsInNlY3Rpb24iOiJnb29kVG9Lbm93Iiwic291cmNlIjoid2ViIn19">Live types in a TypeScript monorepo</a>: Propagate type changes to other code locations.<small> / </small><small>*monorepo*</small><small> / </small><small>14 min read</small>
- <a href="https://www.mikejohnson.dev/posts/2024/06/mobx-react-compiler?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vd3d3Lm1pa2Vqb2huc29uLmRldi9wb3N0cy8yMDI0LzA2L21vYngtcmVhY3QtY29tcGlsZXIiLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM4LCJzZWN0aW9uIjoiZ29vZFRvS25vdyIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">MobX memoizes components (you don't need React compiler)</a>: If you're using Mobx and React, you might be tempted to use the React Compiler to auto-memoize your components. But you don't need it. Mobx already does this for you.<small> / </small><small>*mobx*, *react*</small><small> / </small><small>10 min read</small>
- <a href="https://yoan-thirion.gitbook.io/knowledge-base/software-craftsmanship/the-programmers-brain?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8veW9hbi10aGlyaW9uLmdpdGJvb2suaW8va25vd2xlZGdlLWJhc2Uvc29mdHdhcmUtY3JhZnRzbWFuc2hpcC90aGUtcHJvZ3JhbW1lcnMtYnJhaW4iLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM4LCJzZWN0aW9uIjoiZ29vZFRvS25vdyIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">The Programmer's Brain</a>: Your brain responds in a predictable way when it encounters new or difficult tasks. This unique book teaches you concrete techniques rooted in cognitive science that will improve the way you learn and think about code.<small> / </small><small>*learning*</small><small> / </small><small>54 min read</small>
- <a href="https://dev.to/stripe/common-design-patterns-at-stripe-1hb4?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZGV2LnRvL3N0cmlwZS9jb21tb24tZGVzaWduLXBhdHRlcm5zLWF0LXN0cmlwZS0xaGI0IiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozOCwic2VjdGlvbiI6Imdvb2RUb0tub3ciLCJzb3VyY2UiOiJ3ZWIifX0%3D">Common design patterns at Stripe</a>: Best practices from Stripe<small> / </small><small>*engineering*</small><small> / </small><small>20 min read</small>
- <a href="https://x.com/nima_owji/status/1804167836329197660?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8veC5jb20vbmltYV9vd2ppL3N0YXR1cy8xODA0MTY3ODM2MzI5MTk3NjYwIiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozOCwic2VjdGlvbiI6Imdvb2RUb0tub3ciLCJzb3VyY2UiOiJ3ZWIifX0%3D">Did you know that you can use the link below to ask the people who open it to follow your X account?!</a>: Nice quick tip!<small> / </small><small>*twitter*, *x*</small><small> / </small><small>0 min read</small>
- <a href="https://x.com/mattpocockuk/status/1804457055463326185?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8veC5jb20vbWF0dHBvY29ja3VrL3N0YXR1cy8xODA0NDU3MDU1NDYzMzI2MTg1IiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozOCwic2VjdGlvbiI6Imdvb2RUb0tub3ciLCJzb3VyY2UiOiJ3ZWIifX0%3D">This new video setup is so freaking cool.</a>: I'm loving it. Will try it out this week!<small> / </small><small>*remotion*, *codehike*, *twoslash*</small><small> / </small><small>0 min read</small>


<Hr />

## 🧰 Tools

- <a href="https://github.com/pmndrs/uikit?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZ2l0aHViLmNvbS9wbW5kcnMvdWlraXQiLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM4LCJzZWN0aW9uIjoidG9vbHMiLCJzb3VyY2UiOiJ3ZWIifX0%3D">uikit</a>: user interfaces for react-three-fiber<small> / </small><small>*react*</small>
- <a href="https://github.com/EricLBuehler/mistral.rs?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZ2l0aHViLmNvbS9FcmljTEJ1ZWhsZXIvbWlzdHJhbC5ycyIsInByb2plY3QiOiJ3ZWVrbHlmb28iLCJpbmRleCI6MzgsInNlY3Rpb24iOiJ0b29scyIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">mistral.rs</a>: Blazingly fast LLM inference.<small> / </small><small>*llm*</small>
- <a href="https://github.com/hcengineering/platform?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZ2l0aHViLmNvbS9oY2VuZ2luZWVyaW5nL3BsYXRmb3JtIiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozOCwic2VjdGlvbiI6InRvb2xzIiwic291cmNlIjoid2ViIn19">huly</a>: All-in-One Project Management Platform (alternative to Linear, Jira, Slack, Notion, Motion)<small> / </small><small>*projects*</small>
- <a href="https://github.com/eicrud/eicrud?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZ2l0aHViLmNvbS9laWNydWQvZWljcnVkIiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozOCwic2VjdGlvbiI6InRvb2xzIiwic291cmNlIjoid2ViIn19">Eicrud</a>: A CRUD/Authorization framework based on NestJS. Get your CRUD app up and running in no time!<small> / </small><small>*typescript*</small>
- <a href="https://github.com/privatenumber/tsx?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZ2l0aHViLmNvbS9wcml2YXRlbnVtYmVyL3RzeCIsInByb2plY3QiOiJ3ZWVrbHlmb28iLCJpbmRleCI6MzgsInNlY3Rpb24iOiJ0b29scyIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">tsx</a>: TypeScript Execute - The easiest way to run TypeScript in Node.js<small> / </small><small>*typescript*</small>
- <a href="https://www.awwwards.com/awwwards/collections/transitions/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vd3d3LmF3d3dhcmRzLmNvbS9hd3d3YXJkcy9jb2xsZWN0aW9ucy90cmFuc2l0aW9ucy8iLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM4LCJzZWN0aW9uIjoidG9vbHMiLCJzb3VyY2UiOiJ3ZWIifX0%3D">Transitions</a>: Transitions are the animated changes between two pages, states or views to provide visual continuity to the user interface. Transitions can use any kind of visual effects and motion techniques like fade, slide, fold, scale, or mask transitions.<small> / </small><small>*transitions*</small>
- <a href="https://github.com/i-like-robots/react-tag-autocomplete?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZ2l0aHViLmNvbS9pLWxpa2Utcm9ib3RzL3JlYWN0LXRhZy1hdXRvY29tcGxldGUiLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM4LCJzZWN0aW9uIjoidG9vbHMiLCJzb3VyY2UiOiJ3ZWIifX0%3D">React tag Autocomplete</a>: A simple, accessible, tagging component ready to drop into your React projects<small> / </small><small>*react*, *tags*</small>
- <a href="https://github.com/Rapsssito/react-native-background-actions?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZ2l0aHViLmNvbS9SYXBzc3NpdG8vcmVhY3QtbmF0aXZlLWJhY2tncm91bmQtYWN0aW9ucyIsInByb2plY3QiOiJ3ZWVrbHlmb28iLCJpbmRleCI6MzgsInNlY3Rpb24iOiJ0b29scyIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">React Native background service</a>: React Native background service library for running background tasks forever in Android & iOS.<small> / </small><small>*react-native*</small>
- <a href="https://entitycode.com/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZW50aXR5Y29kZS5jb20vIiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozOCwic2VjdGlvbiI6InRvb2xzIiwic291cmNlIjoid2ViIn19">EntityCode</a>: A Clear and Quick Reference to HTML Symbol Entities Codes<small> / </small><small>*html*</small>
- <a href="https://api-fiddle.com/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vYXBpLWZpZGRsZS5jb20vIiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozOCwic2VjdGlvbiI6InRvb2xzIiwic291cmNlIjoid2ViIn19">api-fiddle</a>: API Fiddle is a playground for REST(ish) APIs. Design endpoints and specifications for technical documents.<small> / </small><small>*apis*</small>
- <a href="https://github.com/josdejong/jsoneditor?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZ2l0aHViLmNvbS9qb3NkZWpvbmcvanNvbmVkaXRvciIsInByb2plY3QiOiJ3ZWVrbHlmb28iLCJpbmRleCI6MzgsInNlY3Rpb24iOiJ0b29scyIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">JSON Editor</a>: A web-based tool to view, edit, format, and validate JSON<small> / </small><small>*json*, *editor*</small>
- <a href="https://github.com/toss/es-toolkit?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZ2l0aHViLmNvbS90b3NzL2VzLXRvb2xraXQiLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM4LCJzZWN0aW9uIjoidG9vbHMiLCJzb3VyY2UiOiJ3ZWIifX0%3D">es-toolkit</a>: A modern JavaScript utility library that's 2-3 times faster and up to 97% smaller—a major upgrade to lodash.<small> / </small><small>*tools*</small>
- <a href="https://github.com/microsoft/roosterjs?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZ2l0aHViLmNvbS9taWNyb3NvZnQvcm9vc3RlcmpzIiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozOCwic2VjdGlvbiI6InRvb2xzIiwic291cmNlIjoid2ViIn19">Rooster</a>: roosterjs is a framework-independent javascript rich text editor.<small> / </small><small>*editors*</small>
- <a href="https://github.com/slevithan/regex?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZ2l0aHViLmNvbS9zbGV2aXRoYW4vcmVnZXgiLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM4LCJzZWN0aW9uIjoidG9vbHMiLCJzb3VyY2UiOiJ3ZWIifX0%3D">regex</a>: Context-aware regex template tag with advanced features and best practices built-in<small> / </small><small>*regex*</small>
- <a href="https://github.com/gchq/CyberChef?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZ2l0aHViLmNvbS9nY2hxL0N5YmVyQ2hlZiIsInByb2plY3QiOiJ3ZWVrbHlmb28iLCJpbmRleCI6MzgsInNlY3Rpb24iOiJ0b29scyIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">CyberChef</a>: The Cyber Swiss Army Knife - a web app for encryption, encoding, compression and data analysis<small> / </small><small>*tools*</small>
- <a href="https://eidos.space/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZWlkb3Muc3BhY2UvIiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozOCwic2VjdGlvbiI6InRvb2xzIiwic291cmNlIjoid2ViIn19">Eidos</a>: Offline Alternative to Notion<small> / </small><small>*Eidos is an extensible framework for managing your personal data throughout your lifetime in one place*</small>
- <a href="https://www.farmfe.org/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vd3d3LmZhcm1mZS5vcmcvIiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozOCwic2VjdGlvbiI6InRvb2xzIiwic291cmNlIjoid2ViIn19">Farm</a>: Farm is a Rust-Based Web Building Engine to Facilitate Your Web Program and JavaScript Library<small> / </small><small>*bundler*</small>


<Hr />

## 🎨 Design

- <a href="https://andrepeat.com/projects/colordots?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vYW5kcmVwZWF0LmNvbS9wcm9qZWN0cy9jb2xvcmRvdHMiLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM4LCJzZWN0aW9uIjoiZGVzaWduIiwic291cmNlIjoid2ViIn19">The Color Dot Font</a>: In the font, each Latin character is replaced with a circle of a certain color.<small> / </small><small>*fonts*</small><small> / </small><small>1 min read</small>
- <a href="https://www.itsnicethat.com/articles/ryan-todd-365-days-illustration-project-170624?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vd3d3Lml0c25pY2V0aGF0LmNvbS9hcnRpY2xlcy9yeWFuLXRvZGQtMzY1LWRheXMtaWxsdXN0cmF0aW9uLXByb2plY3QtMTcwNjI0IiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozOCwic2VjdGlvbiI6ImRlc2lnbiIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">Ryan Todd’s 365 days of drawing delivers a witty collection of inventions, and some thought-provoking observations</a>: The artist’s diverse collection of doodles encapsulate a year-long exploration into the practice of visual thinking.<small> / </small><small>*creativity*</small><small> / </small><small>7 min read</small>


<Hr />

## 📚 Tutorials

- <a href="https://johnnyreilly.com/dual-publishing-esm-cjs-modules-with-tsup-and-are-the-types-wrong?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vam9obm55cmVpbGx5LmNvbS9kdWFsLXB1Ymxpc2hpbmctZXNtLWNqcy1tb2R1bGVzLXdpdGgtdHN1cC1hbmQtYXJlLXRoZS10eXBlcy13cm9uZyIsInByb2plY3QiOiJ3ZWVrbHlmb28iLCJpbmRleCI6MzgsInNlY3Rpb24iOiJ0dXQiLCJzb3VyY2UiOiJ3ZWIifX0%3D">Dual Publishing ESM and CJS Modules with tsup and Are the Types Wrong?</a>: Thanks John!<small> / </small><small>*typescript*</small><small> / </small><small>9 min read</small>
- <a href="https://www.debugbear.com/blog/speculation-rules?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vd3d3LmRlYnVnYmVhci5jb20vYmxvZy9zcGVjdWxhdGlvbi1ydWxlcyIsInByb2plY3QiOiJ3ZWVrbHlmb28iLCJpbmRleCI6MzgsInNlY3Rpb24iOiJ0dXQiLCJzb3VyY2UiOiJ3ZWIifX0%3D">Blazing Fast Websites with Speculation Rules</a>: This post introduces speculation rules, a new web platform feature that allows developers to deliver instant page navigations after the initial page load.<small> / </small><small>*chrome*, *speculation-rules*</small><small> / </small><small>20 min read</small>
- <a href="https://thenewstack.io/how-to-use-google-sheets-as-a-database-with-react-and-ssr/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vdGhlbmV3c3RhY2suaW8vaG93LXRvLXVzZS1nb29nbGUtc2hlZXRzLWFzLWEtZGF0YWJhc2Utd2l0aC1yZWFjdC1hbmQtc3NyLyIsInByb2plY3QiOiJ3ZWVrbHlmb28iLCJpbmRleCI6MzgsInNlY3Rpb24iOiJ0dXQiLCJzb3VyY2UiOiJ3ZWIifX0%3D">How To Use Google Sheets as a Database With React via Next.js</a>: Choose this method over a more traditional database for one reason - data retrieval.<small> / </small><small>*spreadsheets*, *react*, *node*</small><small> / </small><small>29 min read</small>
- <a href="https://tympanus.net/codrops/2024/06/12/shape-lens-blur-effect-with-sdfs-and-webgl/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vdHltcGFudXMubmV0L2NvZHJvcHMvMjAyNC8wNi8xMi9zaGFwZS1sZW5zLWJsdXItZWZmZWN0LXdpdGgtc2Rmcy1hbmQtd2ViZ2wvIiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozOCwic2VjdGlvbiI6InR1dCIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">Shape Lens Blur Effect with SDFs and WebGL</a>: An introduction on harnessing the power of Signed Distance Fields (SDFs) to draw shapes in WebGL and create interactive effects, such as lens blur.<small> / </small><small>*webgl*, *blur*</small><small> / </small><small>8 min read</small>


<Hr />

## 📺 Videos

- <a href="https://www.youtube.com/watch?v=AaCMvEXM-HQ?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vd3d3LnlvdXR1YmUuY29tL3dhdGNoP3Y9QWFDTXZFWE0tSFEiLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM4LCJzZWN0aW9uIjoidmlkcyIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">The Future of Astro is...</a>: Hear Fred K. Schott discuss the future of Astro, and how the web framework is innovating with new features and announcements across these three foundational primitives.<small> / </small><small>*astro*</small>
- <a href="https://www.youtube.com/watch?v=K1xEkA46CuM?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vd3d3LnlvdXR1YmUuY29tL3dhdGNoP3Y9SzF4RWtBNDZDdU0iLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM4LCJzZWN0aW9uIjoidmlkcyIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">3D in TypeScript using Ray Casting</a>: See how to use ray casting to create 3D objects with TypeScript.<small> / </small><small>*3d*</small>
- <a href="https://www.youtube.com/watch?v=Yr0M42KXtFs?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vd3d3LnlvdXR1YmUuY29tL3dhdGNoP3Y9WXIwTTQyS1h0RnMiLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM4LCJzZWN0aW9uIjoidmlkcyIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">10 Years of Independent OSS - A Retrospective</a>: JSNation 2024<small> / </small><small>*oss*</small>
- <a href="https://www.youtube.com/watch?v=9ZhmnfKD5PE?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vd3d3LnlvdXR1YmUuY29tL3dhdGNoP3Y9OVpobW5mS0Q1UEUiLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM4LCJzZWN0aW9uIjoidmlkcyIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">htmx Is Pro-JavaScript</a>: JSNation 2024<small> / </small><small>*htmx*</small>
- <a href="https://www.youtube.com/watch?v=4hJomamEBfs?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-38&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vd3d3LnlvdXR1YmUuY29tL3dhdGNoP3Y9NGhKb21hbUVCZnMiLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM4LCJzZWN0aW9uIjoidmlkcyIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">Install Nothing - App UIs With Native Browser APIs</a>: JSNation 2024<small> / </small><small>*browser-api*</small>


Want to read more? Check out the full article [here](https://weeklyfoo.com/foos/foo-038/).

To sign up for the weekly newsletter, visit [weeklyfoo.com](https://weeklyfoo.com).