Stay ahead in web development: latest news, tools, and insights #37
Tags: webdev, weeklyfoo, javascript, node
Published: 2024-06-17 06:28:27


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

- <a href="https://learnhowtolearn.org/how-to-build-extremely-quickly/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vbGVhcm5ob3d0b2xlYXJuLm9yZy9ob3ctdG8tYnVpbGQtZXh0cmVtZWx5LXF1aWNrbHkvIiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozNywic2VjdGlvbiI6InJlYWRJdCIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">How to Build Anything Extremely Quickly</a>: Do outline speedrunning - Recursively outline an MVP, speedrun filling it in, and only then go back and perfect.<small> / </small><small>*productivity*</small><small> / </small><small>7 min read</small>
- <a href="https://kyry.cz/articles/get-organized.html?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8va3lyeS5jei9hcnRpY2xlcy9nZXQtb3JnYW5pemVkLmh0bWwiLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM3LCJzZWN0aW9uIjoicmVhZEl0Iiwic291cmNlIjoid2ViIn19">From Chaos to Clarity - My Journey with Obsidian</a>: Effectively using Obsidian with sync<small> / </small><small>*productivity*, *obsidian*</small><small> / </small><small>10 min read</small>


<Hr />

## 📰 Good to know

- <a href="https://developer.chrome.com/docs/web-platform/prerender-pages?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZGV2ZWxvcGVyLmNocm9tZS5jb20vZG9jcy93ZWItcGxhdGZvcm0vcHJlcmVuZGVyLXBhZ2VzIiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozNywic2VjdGlvbiI6Imdvb2RUb0tub3ciLCJzb3VyY2UiOiJ3ZWIifX0%3D">Prerender pages in Chrome for instant page navigations</a>: You can use the new specification API in Chrome to pre-render pages.<small> / </small><small>*chrome*</small><small> / </small><small>31 min read</small>
- <a href="https://minus-ze.ro/posts/morphing-arbitrary-paths-in-svg/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vbWludXMtemUucm8vcG9zdHMvbW9ycGhpbmctYXJiaXRyYXJ5LXBhdGhzLWluLXN2Zy8iLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM3LCJzZWN0aW9uIjoiZ29vZFRvS25vdyIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">Morphing Arbitrary Paths in SVG</a>: If you want to learn how to morph shapes in SVGs, this is the article you have to read.<small> / </small><small>*svgs*</small><small> / </small><small>14 min read</small>
- <a href="https://github.com/juspay/hyperswitch/wiki/Payments-101-for-a-Developer?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZ2l0aHViLmNvbS9qdXNwYXkvaHlwZXJzd2l0Y2gvd2lraS9QYXltZW50cy0xMDEtZm9yLWEtRGV2ZWxvcGVyIiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozNywic2VjdGlvbiI6Imdvb2RUb0tub3ciLCJzb3VyY2UiOiJ3ZWIifX0%3D">Payments 101 for a Developer</a>: All you need to know about payments.<small> / </small><small>*payments*</small><small> / </small><small>11 min read</small>
- <a href="https://www.aleksandrhovhannisyan.com/blog/perfect-font-fallbacks/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vd3d3LmFsZWtzYW5kcmhvdmhhbm5pc3lhbi5jb20vYmxvZy9wZXJmZWN0LWZvbnQtZmFsbGJhY2tzLyIsInByb2plY3QiOiJ3ZWVrbHlmb28iLCJpbmRleCI6MzcsInNlY3Rpb24iOiJnb29kVG9Lbm93Iiwic291cmNlIjoid2ViIn19">Creating Perfect Font Fallbacks in CSS</a>: Important to have a fallback strategy!<small> / </small><small>*fonts*</small><small> / </small><small>9 min read</small>
- <a href="https://blog.eliperkins.com/great-contributions-to-a-codebase?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vYmxvZy5lbGlwZXJraW5zLmNvbS9ncmVhdC1jb250cmlidXRpb25zLXRvLWEtY29kZWJhc2UiLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM3LCJzZWN0aW9uIjoiZ29vZFRvS25vdyIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">What makes a great contribution to a codebase?</a>: Great summary of what to do if you want to contribute to a code base.<small> / </small><small>*guides*, *engineering*</small><small> / </small><small>10 min read</small>
- <a href="https://maxleiter.com/blog/ship-every-day?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vbWF4bGVpdGVyLmNvbS9ibG9nL3NoaXAtZXZlcnktZGF5IiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozNywic2VjdGlvbiI6Imdvb2RUb0tub3ciLCJzb3VyY2UiOiJ3ZWIifX0%3D">Ship something every day</a>: Full ack on - The dopamine rush of your code being shipped<small> / </small><small>*productivity*</small><small> / </small><small>2 min read</small>
- <a href="https://nodejs.org/en/learn/test-runner/using-test-runner?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vbm9kZWpzLm9yZy9lbi9sZWFybi90ZXN0LXJ1bm5lci91c2luZy10ZXN0LXJ1bm5lciIsInByb2plY3QiOiJ3ZWVrbHlmb28iLCJpbmRleCI6MzcsInNlY3Rpb24iOiJnb29kVG9Lbm93Iiwic291cmNlIjoid2ViIn19">Using Node.js's test runner</a>: Official Node.js test runner docs.<small> / </small><small>*node*</small><small> / </small><small>9 min read</small>
- <a href="https://www.smashingmagazine.com/2024/06/how-hack-google-lighthouse-scores-2024/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vd3d3LnNtYXNoaW5nbWFnYXppbmUuY29tLzIwMjQvMDYvaG93LWhhY2stZ29vZ2xlLWxpZ2h0aG91c2Utc2NvcmVzLTIwMjQvIiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozNywic2VjdGlvbiI6Imdvb2RUb0tub3ciLCJzb3VyY2UiOiJ3ZWIifX0%3D">How To Hack Your Google Lighthouse Scores In 2024</a>: Do perfect Lighthouse scores mean the performance of your website is perfect? As it turns out, Lighthouse is influenced by a number of things that can be manipulated and bent to make sites seem more performant than they really are, as Salma Alam-Naylor demonstrates in several experiments.<small> / </small><small>*performance*, *lighthouse*</small><small> / </small><small>23 min read</small>
- <a href="https://x.com/bramus/status/1800632231066485191?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8veC5jb20vYnJhbXVzL3N0YXR1cy8xODAwNjMyMjMxMDY2NDg1MTkxIiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozNywic2VjdGlvbiI6Imdvb2RUb0tub3ciLCJzb3VyY2UiOiJ3ZWIifX0%3D">Cross-Document View Transitions</a>: That's a really nice demo of how to use the new astro zero js transitions.<small> / </small><small>*astro*, *transitions*</small><small> / </small><small>0 min read</small>
- <a href="https://www.theverge.com/c/24133822/microsoft-excel-spreadsheet-competition-championship?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vd3d3LnRoZXZlcmdlLmNvbS9jLzI0MTMzODIyL21pY3Jvc29mdC1leGNlbC1zcHJlYWRzaGVldC1jb21wZXRpdGlvbi1jaGFtcGlvbnNoaXAiLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM3LCJzZWN0aW9uIjoiZ29vZFRvS25vdyIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">Spreadsheet Superstars</a>: An elite handful of analysts, actuaries, and accountants have mastered Excel, arguably the most important software in the business world. So what do they do in Vegas? They open a spreadsheet.<small> / </small><small>*spreadsheets*</small><small> / </small><small>38 min read</small>
- <a href="https://www.perfectbugreport.io/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vd3d3LnBlcmZlY3RidWdyZXBvcnQuaW8vIiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozNywic2VjdGlvbiI6Imdvb2RUb0tub3ciLCJzb3VyY2UiOiJ3ZWIifX0%3D">Perfect Bug Report</a>: Write Bug Reports That Developers Love!<small> / </small><small>*bugs*</small><small> / </small><small>3 min read</small>
- <a href="https://daniel.haxx.se/blog/2024/06/11/why-curl-closes-prs-on-github/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZGFuaWVsLmhheHguc2UvYmxvZy8yMDI0LzA2LzExL3doeS1jdXJsLWNsb3Nlcy1wcnMtb24tZ2l0aHViLyIsInByb2plY3QiOiJ3ZWVrbHlmb28iLCJpbmRleCI6MzcsInNlY3Rpb24iOiJnb29kVG9Lbm93Iiwic291cmNlIjoid2ViIn19">Why curl closes PRs on Github</a>: Contributors to the curl project on GitHub tend to notice the above sequence quite quickly - pull requests submitted do not generally appear as merged with its accompanying purple blob, instead they are said to be closed.<small> / </small><small>*curl*</small><small> / </small><small>12 min read</small>
- <a href="https://x.com/xmodulo/status/1801584127436640765?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8veC5jb20veG1vZHVsby9zdGF0dXMvMTgwMTU4NDEyNzQzNjY0MDc2NSIsInByb2plY3QiOiJ3ZWVrbHlmb28iLCJpbmRleCI6MzcsInNlY3Rpb24iOiJnb29kVG9Lbm93Iiwic291cmNlIjoid2ViIn19">A list of useful examples of the sed command on Linux</a>: sed is extremely useful.<small> / </small><small>*sed*, *cli*</small><small> / </small><small>0 min read</small>
- <a href="https://joshcollinsworth.com/blog/fwiw?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vam9zaGNvbGxpbnN3b3J0aC5jb20vYmxvZy9md2l3IiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozNywic2VjdGlvbiI6Imdvb2RUb0tub3ciLCJzb3VyY2UiOiJ3ZWIifX0%3D">FWIW</a>: For whatever it's worth - my advice on job hunting in tech<small> / </small><small>*career*</small><small> / </small><small>70 min read</small>


<Hr />

## 🧰 Tools

- <a href="https://github.com/activepieces/activepieces?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZ2l0aHViLmNvbS9hY3RpdmVwaWVjZXMvYWN0aXZlcGllY2VzIiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozNywic2VjdGlvbiI6InRvb2xzIiwic291cmNlIjoid2ViIn19">activepieces</a>: Your friendliest open source all-in-one automation tool<small> / </small><small>*workflows*, *automation*</small>
- <a href="https://www.programmingfonts.org/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vd3d3LnByb2dyYW1taW5nZm9udHMub3JnLyIsInByb2plY3QiOiJ3ZWVrbHlmb28iLCJpbmRleCI6MzcsInNlY3Rpb24iOiJ0b29scyIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">Programming Fonts</a>: Test different fonts for your IDE.<small> / </small><small>*fonts*</small>
- <a href="https://github.com/bchr02/CodeFlattener?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZ2l0aHViLmNvbS9iY2hyMDIvQ29kZUZsYXR0ZW5lciIsInByb2plY3QiOiJ3ZWVrbHlmb28iLCJpbmRleCI6MzcsInNlY3Rpb24iOiJ0b29scyIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">CideFlattener</a>: CodeFlattener is a Node.js command-line tool designed to export the structure and code of a repository into a single flat text file.<small> / </small><small>*utils*</small>
- <a href="https://flameshot.org/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZmxhbWVzaG90Lm9yZy8iLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM3LCJzZWN0aW9uIjoidG9vbHMiLCJzb3VyY2UiOiJ3ZWIifX0%3D">Flameshot</a>: Powerful, yet simple to use open-source screenshot software.<small> / </small><small>*screenshots*</small>
- <a href="https://www.webinteractions.gallery/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vd3d3LndlYmludGVyYWN0aW9ucy5nYWxsZXJ5LyIsInByb2plY3QiOiJ3ZWVrbHlmb28iLCJpbmRleCI6MzcsInNlY3Rpb24iOiJ0b29scyIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">Web Interactions Gallery</a>: Collection of animated elements from all over the Web<small> / </small><small>*animations*, *gallery*</small>
- <a href="https://fontinterceptor.mschfmag.com/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZm9udGludGVyY2VwdG9yLm1zY2hmbWFnLmNvbS8iLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM3LCJzZWN0aW9uIjoidG9vbHMiLCJzb3VyY2UiOiJ3ZWIifX0%3D">Font Interceptor</a>: Font Interceptor downloads all fonts in use on a target website. Will you use it?<small> / </small><small>*fonts*</small>
- <a href="https://restate.dev/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vcmVzdGF0ZS5kZXYvIiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozNywic2VjdGlvbiI6InRvb2xzIiwic291cmNlIjoid2ViIn19">restate</a>: Restate is the platform for building resilient applications that tolerate all infrastructure faults w/o the need for a PhD.<small> / </small><small>*workflows*</small>
- <a href="https://nigelotoole.github.io/share-url/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vbmlnZWxvdG9vbGUuZ2l0aHViLmlvL3NoYXJlLXVybC8iLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM3LCJzZWN0aW9uIjoidG9vbHMiLCJzb3VyY2UiOiJ3ZWIifX0%3D">Share URL</a>: Share a URL with Web Share, copy to clipboard or to social media<small> / </small><small>*sharing*</small>
- <a href="https://github.com/williamtroup/JsonTree.js?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZ2l0aHViLmNvbS93aWxsaWFtdHJvdXAvSnNvblRyZWUuanMiLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM3LCJzZWN0aW9uIjoidG9vbHMiLCJzb3VyY2UiOiJ3ZWIifX0%3D">JsonTree.js</a>: A lightweight JavaScript library that generates customizable tree views to better visualize JSON data.<small> / </small><small>*json*</small>
- <a href="https://www.reshot.com/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vd3d3LnJlc2hvdC5jb20vIiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozNywic2VjdGlvbiI6InRvb2xzIiwic291cmNlIjoid2ViIn19">Reshot</a>: Free Icons & Illustrations<small> / </small><small>*icons*, *illustrations*</small>
- <a href="https://github.com/remeda/remeda?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZ2l0aHViLmNvbS9yZW1lZGEvcmVtZWRhIiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozNywic2VjdGlvbiI6InRvb2xzIiwic291cmNlIjoid2ViIn19">Remeda</a>: A utility library for JavaScript and TypeScript.<small> / </small><small>*typescript*, *utils*</small>
- <a href="https://github.com/dgmjs/dgmjs?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZ2l0aHViLmNvbS9kZ21qcy9kZ21qcyIsInByb2plY3QiOiJ3ZWVrbHlmb28iLCJpbmRleCI6MzcsInNlY3Rpb24iOiJ0b29scyIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">DGM.js</a>: An infinite canvas with smart shapes<small> / </small><small>*canvas*</small>
- <a href="https://github.com/vadimdemedes/pastel?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZ2l0aHViLmNvbS92YWRpbWRlbWVkZXMvcGFzdGVsIiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozNywic2VjdGlvbiI6InRvb2xzIiwic291cmNlIjoid2ViIn19">Pastel</a>: Next.js-like framework for CLIs made with Ink<small> / </small><small>*cli*</small>
- <a href="https://github.com/themustafaomar/jsvectormap?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZ2l0aHViLmNvbS90aGVtdXN0YWZhb21hci9qc3ZlY3Rvcm1hcCIsInByb2plY3QiOiJ3ZWVrbHlmb28iLCJpbmRleCI6MzcsInNlY3Rpb24iOiJ0b29scyIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">Jsvectormap</a>: A lightweight JavaScript library for creating interactive maps and pretty data visualization.<small> / </small><small>*maps*</small>
- <a href="https://github.com/wooorm/starry-night?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZ2l0aHViLmNvbS93b29vcm0vc3RhcnJ5LW5pZ2h0IiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozNywic2VjdGlvbiI6InRvb2xzIiwic291cmNlIjoid2ViIn19">starry-night</a>: Syntax highlighting, like GitHub<small> / </small><small>*highlighting*</small>
- <a href="https://github.com/jackyzha0/quartz?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZ2l0aHViLmNvbS9qYWNreXpoYTAvcXVhcnR6IiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozNywic2VjdGlvbiI6InRvb2xzIiwic291cmNlIjoid2ViIn19">Quartz</a>: a fast, batteries-included static-site generator that transforms Markdown content into fully functional websites<small> / </small><small>*markdown*</small>
- <a href="https://wearerequired.github.io/fluidity/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vd2VhcmVyZXF1aXJlZC5naXRodWIuaW8vZmx1aWRpdHkvIiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozNywic2VjdGlvbiI6InRvb2xzIiwic291cmNlIjoid2ViIn19">Type Fluidity</a>: Calculate fluid typography sizes<small> / </small><small>*typography*</small>
- <a href="https://github.com/KenneyNL/Adobe-Alternatives?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZ2l0aHViLmNvbS9LZW5uZXlOTC9BZG9iZS1BbHRlcm5hdGl2ZXMiLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM3LCJzZWN0aW9uIjoidG9vbHMiLCJzb3VyY2UiOiJ3ZWIifX0%3D">Adobe Alternatives</a>: A list of alternatives for Adobe software<small> / </small><small>*adobe*, *directory*</small>
- <a href="https://github.com/lexbor/lexbor?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZ2l0aHViLmNvbS9sZXhib3IvbGV4Ym9yIiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozNywic2VjdGlvbiI6InRvb2xzIiwic291cmNlIjoid2ViIn19">Lexbor</a>: Lexbor is development of an open source HTML Renderer library.<small> / </small><small>*browser-engine*</small>
- <a href="https://github.com/rough-stuff/wired-elements?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZ2l0aHViLmNvbS9yb3VnaC1zdHVmZi93aXJlZC1lbGVtZW50cyIsInByb2plY3QiOiJ3ZWVrbHlmb28iLCJpbmRleCI6MzcsInNlY3Rpb24iOiJ0b29scyIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">wired-elements</a>: Collection of custom elements that appear hand drawn. Great for wireframes or a fun look.<small> / </small><small>*ui*</small>
- <a href="https://meatfighter.com/ascii-silhouettify/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vbWVhdGZpZ2h0ZXIuY29tL2FzY2lpLXNpbGhvdWV0dGlmeS8iLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM3LCJzZWN0aW9uIjoidG9vbHMiLCJzb3VyY2UiOiJ3ZWIifX0%3D">ASCII Silhouettify</a>: ASCII Silhouettify is an app that converts images into ASCII silhouettes, a style of ASCII art distinguished by uniformly filled geometric shapes rather than lines or textures.<small> / </small><small>*ascii*, *art*</small>


<Hr />

## 📚 Tutorials

- <a href="https://www.totaltypescript.com/how-to-use-corepack?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vd3d3LnRvdGFsdHlwZXNjcmlwdC5jb20vaG93LXRvLXVzZS1jb3JlcGFjayIsInByb2plY3QiOiJ3ZWVrbHlmb28iLCJpbmRleCI6MzcsInNlY3Rpb24iOiJ0dXQiLCJzb3VyY2UiOiJ3ZWIifX0%3D">How To Use Corepack</a>: Never think again what package manager to use in a project.<small> / </small><small>*npm*, *corepack*</small><small> / </small><small>4 min read</small>
- <a href="https://x.com/surjithctly/status/1800473343692591475?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8veC5jb20vc3Vyaml0aGN0bHkvc3RhdHVzLzE4MDA0NzMzNDM2OTI1OTE0NzUiLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM3LCJzZWN0aW9uIjoidHV0Iiwic291cmNlIjoid2ViIn19">Apple Tab Pill Animation</a>: Seen this effect of Apple WWDC24<small> / </small><small>*css*</small><small> / </small><small>0 min read</small>
- <a href="https://www.bocoup.com/blog/full-stack-web-push-api-guide?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vd3d3LmJvY291cC5jb20vYmxvZy9mdWxsLXN0YWNrLXdlYi1wdXNoLWFwaS1ndWlkZSIsInByb2plY3QiOiJ3ZWVrbHlmb28iLCJpbmRleCI6MzcsInNlY3Rpb24iOiJ0dXQiLCJzb3VyY2UiOiJ3ZWIifX0%3D">Full Stack Web Push API Guide</a>: Try out push notifications!<small> / </small><small>*notifications*</small><small> / </small><small>18 min read</small>
- <a href="https://www.cjoshmartin.com/blog/creating-zip-files-with-javascript?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vd3d3LmNqb3NobWFydGluLmNvbS9ibG9nL2NyZWF0aW5nLXppcC1maWxlcy13aXRoLWphdmFzY3JpcHQiLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM3LCJzZWN0aW9uIjoidHV0Iiwic291cmNlIjoid2ViIn19">Generating ZIP Files With Javascript</a>: Self-explanatory<small> / </small><small>*zip*, *javascript*</small><small> / </small><small>3 min read</small>
- <a href="https://developer.mozilla.org/en-US/blog/using-the-page-visibility-api/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZGV2ZWxvcGVyLm1vemlsbGEub3JnL2VuLVVTL2Jsb2cvdXNpbmctdGhlLXBhZ2UtdmlzaWJpbGl0eS1hcGkvIiwicHJvamVjdCI6IndlZWtseWZvbyIsImluZGV4IjozNywic2VjdGlvbiI6InR1dCIsInNvdXJjZSI6IndlYiJ9fQ%3D%3D">Using the Page Visibility API</a>: Checking document visibility gives you insight into how visitors are interacting with your pages and can provide hints about the status of your applications.<small> / </small><small>*visibility*</small><small> / </small><small>10 min read</small>
- <a href="https://frontendmasters.com/blog/quick-trick-using-border-image-to-apply-and-overlay-gradient/?utm_source=weeklyfoo&utm_medium=web&utm_campaign=weeklyfoo-37&ref=weeklyfoo" target="_blank" rel="noopener" ping="https://api.weeklyfoo.com/api/foo/bar?foo=eyJldmVudCI6InVybC1jbGljayIsInByb3BzIjp7InVybCI6Imh0dHBzOi8vZnJvbnRlbmRtYXN0ZXJzLmNvbS9ibG9nL3F1aWNrLXRyaWNrLXVzaW5nLWJvcmRlci1pbWFnZS10by1hcHBseS1hbmQtb3ZlcmxheS1ncmFkaWVudC8iLCJwcm9qZWN0Ijoid2Vla2x5Zm9vIiwiaW5kZXgiOjM3LCJzZWN0aW9uIjoidHV0Iiwic291cmNlIjoid2ViIn19">Quick Trick - Using border-image to Apply and Overlay Gradient.</a>: A one-liner for a nice effect.<small> / </small><small>*css*</small><small> / </small><small>3 min read</small>


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

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