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


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

- <a href="https://stackoverflow.blog/2024/05/22/you-should-keep-a-developer-s-journal/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-36&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vc3RhY2tvdmVyZmxvdy5ibG9nLzIwMjQvMDUvMjIveW91LXNob3VsZC1rZWVwLWEtZGV2ZWxvcGVyLXMtam91cm5hbC8iLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM2LCJzZWN0aW9uIjoicmVhZEl0Iiwic291cmNlIjoid2ViIn19">You should keep a developer’s journal</a>: A developer’s journal is a place to define the problem you’re solving and record what you tried and what worked.<small> / </small><small>*productivity*</small><small> / </small><small>15 min read</small>


<Hr />

## 📰 Good to know

- <a href="https://www.thesweekly.com/p/my-3-step-process-for-writing-clean?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-36&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vd3d3LnRoZXN3ZWVrbHkuY29tL3AvbXktMy1zdGVwLXByb2Nlc3MtZm9yLXdyaXRpbmctY2xlYW4iLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM2LCJzZWN0aW9uIjoiZ29vZFRvS25vdyIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">My 3 Step Process for Writing Clean Code</a>: Should be the default for everyone.<small> / </small><small>*productivity*</small><small> / </small><small>5 min read</small>
- <a href="https://www.erikheemskerk.nl/htmx-simplicity/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-36&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vd3d3LmVyaWtoZWVtc2tlcmsubmwvaHRteC1zaW1wbGljaXR5LyIsInByb2plY3QiOiJ3ZWVrbHlmb28iLCJpbmRleCI6MzYsInNlY3Rpb24iOiJnb29kVG9Lbm93Iiwic291cmNlIjoid2ViIn19">htmx: Simplicity in an Age of Complicated Solutions</a>: Another good article about how htmx simplifies things.<small> / </small><small>*htmx*</small><small> / </small><small>23 min read</small>
- <a href="https://ishadeed.com/article/the-gap/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-36&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vaXNoYWRlZWQuY29tL2FydGljbGUvdGhlLWdhcC8iLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM2LCJzZWN0aW9uIjoiZ29vZFRvS25vdyIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">The Gap</a>: An exploration of the pain points that CSS gap solves.<small> / </small><small>*css*</small><small> / </small><small>13 min read</small>
- <a href="https://www.alanbsmith.dev/writing/on-constraints-and-freedom?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-36&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vd3d3LmFsYW5ic21pdGguZGV2L3dyaXRpbmcvb24tY29uc3RyYWludHMtYW5kLWZyZWVkb20iLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM2LCJzZWN0aW9uIjoiZ29vZFRvS25vdyIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">On Constraints and Freedom</a>: Lessons learned from component styling APIs<small> / </small><small>*engineering*</small><small> / </small><small>3 min read</small>
- <a href="https://technicalwriting.dev/a11y/skip.html?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-36&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vdGVjaG5pY2Fsd3JpdGluZy5kZXYvYTExeS9za2lwLmh0bWwiLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM2LCJzZWN0aW9uIjoiZ29vZFRvS25vdyIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">Please support skip to main content on your docs site</a>: A journey to get comfortable with keyboard-based computer navigation.<small> / </small><small>*docs*</small><small> / </small><small>4 min read</small>
- <a href="https://applied-llms.org/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-36&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vYXBwbGllZC1sbG1zLm9yZy8iLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM2LCJzZWN0aW9uIjoiZ29vZFRvS25vdyIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">What We’ve Learned From A Year of Building with LLMs</a>: A practical guide to building successful LLM products.<small> / </small><small>*llm*, *ai*</small><small> / </small><small>75 min read</small>
- <a href="https://snyk.io/blog/10-modern-node-js-runtime-features/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-36&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vc255ay5pby9ibG9nLzEwLW1vZGVybi1ub2RlLWpzLXJ1bnRpbWUtZmVhdHVyZXMvIiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozNiwic2VjdGlvbiI6Imdvb2RUb0tub3ciLCJzb3VyY2UiOiJ3ZWIifX0%3D">10 modern Node.js runtime features to start using in 2024</a>: New features in Node you need to know.<small> / </small><small>*nodejs*</small><small> / </small><small>29 min read</small>
- <a href="https://www.epicweb.dev/skip-sdks-in-simple-integrations?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-36&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vd3d3LmVwaWN3ZWIuZGV2L3NraXAtc2Rrcy1pbi1zaW1wbGUtaW50ZWdyYXRpb25zIiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozNiwic2VjdGlvbiI6Imdvb2RUb0tub3ciLCJzb3VyY2UiOiJ3ZWIifX0%3D">Skip SDKs in Simple Integrations</a>: Kent writes about that it's not always benificial to use SDKs but direct API calls instead.<small> / </small><small>*engineering*</small><small> / </small><small>5 min read</small>
- <a href="https://turbo.build/blog/turbo-2-0?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-36&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vdHVyYm8uYnVpbGQvYmxvZy90dXJiby0yLTAiLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM2LCJzZWN0aW9uIjoiZ29vZFRvS25vdyIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">Turborepo 2.0</a>: Next major release of Turbo<small> / </small><small>*turbo*, *monorepo*</small><small> / </small><small>6 min read</small>
- <a href="https://developer.chrome.com/blog/devtools-customization?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-36&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZGV2ZWxvcGVyLmNocm9tZS5jb20vYmxvZy9kZXZ0b29scy1jdXN0b21pemF0aW9uIiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozNiwic2VjdGlvbiI6Imdvb2RUb0tub3ciLCJzb3VyY2UiOiJ3ZWIifX0%3D">3 new features to customize your performance workflows in DevTools</a>: New features from the Chrome team for Devs.<small> / </small><small>*chrome*</small><small> / </small><small>12 min read</small>
- <a href="https://newsletter.weskao.com/p/how-i-give-the-right-amount-of-context?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-36&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vbmV3c2xldHRlci53ZXNrYW8uY29tL3AvaG93LWktZ2l2ZS10aGUtcmlnaHQtYW1vdW50LW9mLWNvbnRleHQiLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM2LCJzZWN0aW9uIjoiZ29vZFRvS25vdyIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">How I give the right amount of context (in any situation)</a>: Most people suck at managing up. They waste their manager's time with too much (or too little) information. Here’s how to give the right amount of context.<small> / </small><small>*productivity*</small><small> / </small><small>13 min read</small>


<Hr />

## 🧰 Tools

- <a href="https://manifest.build/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-36&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vbWFuaWZlc3QuYnVpbGQvIiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozNiwic2VjdGlvbiI6InRvb2xzIiwic291cmNlIjoid2ViIn19">manifest</a>: Manifest is a complete backend that fits into one file of simple code.<small> / </small><small>*backend*</small>
- <a href="https://ffmpeg.app/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-36&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZmZtcGVnLmFwcC8iLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM2LCJzZWN0aW9uIjoidG9vbHMiLCJzb3VyY2UiOiJ3ZWIifX0%3D">ffmpeg.app</a>: Get help to use ffmpeg!<small> / </small><small>*ffmpeg*</small>
- <a href="https://squoosh.app/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-36&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vc3F1b29zaC5hcHAvIiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozNiwic2VjdGlvbiI6InRvb2xzIiwic291cmNlIjoid2ViIn19">Squoosh</a>: Compress and resize images online<small> / </small><small>*images*</small>
- <a href="https://github.com/face-hh/webx?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-36&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZ2l0aHViLmNvbS9mYWNlLWhoL3dlYngiLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM2LCJzZWN0aW9uIjoidG9vbHMiLCJzb3VyY2UiOiJ3ZWIifX0%3D">WebX</a>: An alternative for the World Wide Web - browse websites such as buss://yippie.rizz made in HTML, CSS and Lua. Custom web browser, custom HTML rendering engine, custom search engine, and more.<small> / </small><small>*web*</small>
- <a href="https://github.com/andyk/ht?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-36&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZ2l0aHViLmNvbS9hbmR5ay9odCIsInByb2plY3QiOiJ3ZWVrbHlmb28iLCJpbmRleCI6MzYsInNlY3Rpb24iOiJ0b29scyIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">ht</a>: headless terminal - wrap any binary with a terminal interface for easy programmatic access.<small> / </small><small>*cli*</small>
- <a href="https://github.com/yamada-ui/yamada-ui?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-36&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZ2l0aHViLmNvbS95YW1hZGEtdWkveWFtYWRhLXVpIiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozNiwic2VjdGlvbiI6InRvb2xzIiwic291cmNlIjoid2ViIn19">yamada-ui</a>: React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion.<small> / </small><small>*ui*, *react*</small>
- <a href="https://github.com/SawyerHood/tlbrowse?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-36&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZ2l0aHViLmNvbS9TYXd5ZXJIb29kL3RsYnJvd3NlIiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozNiwic2VjdGlvbiI6InRvb2xzIiwic291cmNlIjoid2ViIn19">tlbrowse</a>: Generate imagined websites on an infinite canvas<small> / </small><small>*canvas*</small>
- <a href="https://github.com/thecodingmachine/react-native-boilerplate?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-36&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZ2l0aHViLmNvbS90aGVjb2RpbmdtYWNoaW5lL3JlYWN0LW5hdGl2ZS1ib2lsZXJwbGF0ZSIsInByb2plY3QiOiJ3ZWVrbHlmb28iLCJpbmRleCI6MzYsInNlY3Rpb24iOiJ0b29scyIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">The React Native Boilerplate</a>: A React Native template for building solid applications.<small> / </small><small>*react*</small>
- <a href="https://github.com/codaworks/react-glow?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-36&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZ2l0aHViLmNvbS9jb2Rhd29ya3MvcmVhY3QtZ2xvdyIsInByb2plY3QiOiJ3ZWVrbHlmb28iLCJpbmRleCI6MzYsInNlY3Rpb24iOiJ0b29scyIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">React Glow</a>: Add a mouse-tracing glow effect to React components.<small> / </small><small>*react*, *glow*</small>
- <a href="https://github.com/lifeomic/chromicons?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-36&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZ2l0aHViLmNvbS9saWZlb21pYy9jaHJvbWljb25zIiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozNiwic2VjdGlvbiI6InRvb2xzIiwic291cmNlIjoid2ViIn19">Chromicons</a>: Handcrafted open source icons from LifeOmic<small> / </small><small>*icons*</small>
- <a href="https://github.com/PeculiarVentures/PKI.js?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-36&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZ2l0aHViLmNvbS9QZWN1bGlhclZlbnR1cmVzL1BLSS5qcyIsInByb2plY3QiOiJ3ZWVrbHlmb28iLCJpbmRleCI6MzYsInNlY3Rpb24iOiJ0b29scyIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">PKI.js</a>: PKI.js is a pure JavaScript library implementing the formats that are used in PKI applications (signing, encryption, certificate requests, OCSP and TSP requests/responses). It is built on WebCrypto (Web Cryptography API) and requires no plug-ins.<small> / </small><small>*pki*, *crypto*</small>
- <a href="https://github.com/KaTeX/KaTeX?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-36&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZ2l0aHViLmNvbS9LYVRlWC9LYVRlWCIsInByb2plY3QiOiJ3ZWVrbHlmb28iLCJpbmRleCI6MzYsInNlY3Rpb24iOiJ0b29scyIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">KaTeX</a>: Fast math typesetting for the web.<small> / </small><small>*latex*</small>
- <a href="https://designeverywhere.co/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-36&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZGVzaWduZXZlcnl3aGVyZS5jby8iLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM2LCJzZWN0aW9uIjoidG9vbHMiLCJzb3VyY2UiOiJ3ZWIifX0%3D">Design Everywhere</a>: An ever-growing collection of carefully curated works from around the world.<small> / </small><small>*design*, *library*</small>
- <a href="https://rotato.app/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-36&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vcm90YXRvLmFwcC8iLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM2LCJzZWN0aW9uIjoidG9vbHMiLCJzb3VyY2UiOiJ3ZWIifX0%3D">Rotato</a>: Stunning 3D mockups with your own app and web designs on the device screens. No 3D experience needed.<small> / </small><small>*animations*, *video*</small>


<Hr />

## 🎨 Design

- <a href="https://www.learnui.design/tools/typography-tutorial.html?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-36&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vd3d3LmxlYXJudWkuZGVzaWduL3Rvb2xzL3R5cG9ncmFwaHktdHV0b3JpYWwuaHRtbCIsInByb2plY3QiOiJ3ZWVrbHlmb28iLCJpbmRleCI6MzYsInNlY3Rpb24iOiJkZXNpZ24iLCJzb3VyY2UiOiJ3ZWIifX0%3D">Learn the logic of great typography</a>: An interactive type tutorial<small> / </small><small>*typography*</small><small> / </small><small>13 min read</small>
- <a href="https://matejlatin.com/blog/designer-engagement-report/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-36&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vbWF0ZWpsYXRpbi5jb20vYmxvZy9kZXNpZ25lci1lbmdhZ2VtZW50LXJlcG9ydC8iLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM2LCJzZWN0aW9uIjoiZGVzaWduIiwic291cmNlIjoid2ViIn19">Designer engagement report</a>: Top 3 problems for designers - no research, no design strategy, and no career progression<small> / </small><small>*career*</small><small> / </small><small>16 min read</small>
- <a href="https://designx.community/salary/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-36&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZGVzaWdueC5jb21tdW5pdHkvc2FsYXJ5LyIsInByb2plY3QiOiJ3ZWVrbHlmb28iLCJpbmRleCI6MzYsInNlY3Rpb24iOiJkZXNpZ24iLCJzb3VyY2UiOiJ3ZWIifX0%3D">Open Database of Design Salaries</a>: Promoting salary transparency & pay equity amongst design professionals across industries, experience levels & geographies.<small> / </small><small>*career*</small><small> / </small><small>42 min read</small>


<Hr />

## 📚 Tutorials

- <a href="https://cssgridgarden.com/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-36&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vY3NzZ3JpZGdhcmRlbi5jb20vIiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozNiwic2VjdGlvbiI6InR1dCIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">Grid Garden</a>: Welcome to Grid Garden, where you write CSS code to grow your carrot garden! Water only the areas that have carrots by using the grid-column-start property.<small> / </small><small>*css*, *grid*</small><small> / </small><small>1 min read</small>
- <a href="https://betterstack.com/community/guides/testing/nodejs-test-runner/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-36&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vYmV0dGVyc3RhY2suY29tL2NvbW11bml0eS9ndWlkZXMvdGVzdGluZy9ub2RlanMtdGVzdC1ydW5uZXIvIiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozNiwic2VjdGlvbiI6InR1dCIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">Node.js Test Runner</a>: A Beginner's Guide<small> / </small><small>*nodejs*, *tests*</small><small> / </small><small>23 min read</small>
- <a href="https://blog.partykit.io/posts/using-vectorize-to-build-search?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-36&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vYmxvZy5wYXJ0eWtpdC5pby9wb3N0cy91c2luZy12ZWN0b3JpemUtdG8tYnVpbGQtc2VhcmNoIiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozNiwic2VjdGlvbiI6InR1dCIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">Using Vectorize to build an unreasonably good search engine in 160 lines of code</a>: The tl;dr is that search got really good suddenly and really easy to build because of AI.<small> / </small><small>*search*</small><small> / </small><small>11 min read</small>
- <a href="https://github.com/brisktest/brisk-extension/blob/main/WALKTHROUGH.md?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-36&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZ2l0aHViLmNvbS9icmlza3Rlc3QvYnJpc2stZXh0ZW5zaW9uL2Jsb2IvbWFpbi9XQUxLVEhST1VHSC5tZCIsInByb2plY3QiOiJ3ZWVrbHlmb28iLCJpbmRleCI6MzYsInNlY3Rpb24iOiJ0dXQiLCJzb3VyY2UiOiJ3ZWIifX0%3D">Brisk VS Code extension 5 minute Development Speedrun</a>: Create a VS Code extension.<small> / </small><small>*vscode*</small><small> / </small><small>16 min read</small>
- <a href="https://x.com/jh3yy/status/1799265359742337413?s=43?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-36&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8veC5jb20vamgzeXkvc3RhdHVzLzE3OTkyNjUzNTk3NDIzMzc0MTM%2Fcz00MyIsInByb2plY3QiOiJ3ZWVrbHlmb28iLCJpbmRleCI6MzYsInNlY3Rpb24iOiJ0dXQiLCJzb3VyY2UiOiJ3ZWIifX0%3D">Animated sign-in disclosure with only HTML and CSS using the Popover API</a>: Thanks @jh3yy<small> / </small><small>*html*, *css*, *popover*</small><small> / </small><small>0 min read</small>


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

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