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!
- How to Build Anything Extremely Quickly: Do outline speedrunning - Recursively outline an MVP, speedrun filling it in, and only then go back and perfect. by @dnbt777 / productivity / 7 min read
- From Chaos to Clarity - My Journey with Obsidian: Effectively using Obsidian with sync by Krystof Hilar / productivity, obsidian / 10 min read
📰 Good to know
- Prerender pages in Chrome for instant page navigations: You can use the new specification API in Chrome to pre-render pages. by Barry Pollard / chrome / 31 min read
- Morphing Arbitrary Paths in SVG: If you want to learn how to morph shapes in SVGs, this is the article you have to read. by Alexandru-Gabriel Ică / svgs / 14 min read
- Payments 101 for a Developer: All you need to know about payments. by Juspay Technologies / payments / 11 min read
- Creating Perfect Font Fallbacks in CSS: Important to have a fallback strategy! by Aleksandr Hovhannisyan / fonts / 9 min read
- What makes a great contribution to a codebase?: Great summary of what to do if you want to contribute to a code base. by Eli Perkins / guides, engineering / 10 min read
- Ship something every day: Full ack on - The dopamine rush of your code being shipped by Max Leiter / productivity / 2 min read
- Using Node.js’s test runner: Official Node.js test runner docs. by nodejs.org / node / 9 min read
- How To Hack Your Google Lighthouse Scores In 2024: 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. by Salma Alam-Naylor / performance, lighthouse / 23 min read
- Cross-Document View Transitions: That’s a really nice demo of how to use the new astro zero js transitions. by Bramus / astro, transitions / 0 min read
- Spreadsheet Superstars: 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. by theverge.com / spreadsheets / 38 min read
- Perfect Bug Report: Write Bug Reports That Developers Love! by Marker.io / bugs / 3 min read
- Why curl closes PRs on Github: 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. by Daniel Stenberg / curl / 12 min read
- A list of useful examples of the sed command on Linux: sed is extremely useful. by Dan Nanni / sed, cli / 0 min read
- FWIW: For whatever it’s worth - my advice on job hunting in tech by Josh Collinsworth / career / 70 min read
🧰 Tools
- activepieces: Your friendliest open source all-in-one automation tool by activepieces.com / workflows, automation
- Programming Fonts: Test different fonts for your IDE. by Koen Lageveen / fonts
- CideFlattener: CodeFlattener is a Node.js command-line tool designed to export the structure and code of a repository into a single flat text file. by Bill Christo / utils
- Flameshot: Powerful, yet simple to use open-source screenshot software. by flameshot.org / screenshots
- Web Interactions Gallery: Collection of animated elements from all over the Web by webinteractions.gallery / animations, gallery
- Font Interceptor: Font Interceptor downloads all fonts in use on a target website. Will you use it? by mschfmag.com / fonts
- restate: Restate is the platform for building resilient applications that tolerate all infrastructure faults w/o the need for a PhD. by Restate / workflows
- Share URL: Share a URL with Web Share, copy to clipboard or to social media by Nigel O Toole / sharing
- JsonTree.js: A lightweight JavaScript library that generates customizable tree views to better visualize JSON data. by William Troup / json
- Reshot: Free Icons & Illustrations by reshot.com / icons, illustrations
- Remeda: A utility library for JavaScript and TypeScript. by remedajs.com / typescript, utils
- DGM.js: An infinite canvas with smart shapes by DGM / canvas
- Pastel: Next.js-like framework for CLIs made with Ink by Vadim Demedes / cli
- Jsvectormap: A lightweight JavaScript library for creating interactive maps and pretty data visualization. by Mustafa Omar / maps
- starry-night: Syntax highlighting, like GitHub by Titus / highlighting
- Quartz: a fast, batteries-included static-site generator that transforms Markdown content into fully functional websites by Jacky Zhao / markdown
- Type Fluidity: Calculate fluid typography sizes by required.com / typography
- Adobe Alternatives: A list of alternatives for Adobe software by Kenney / adobe, directory
- Lexbor: Lexbor is development of an open source HTML Renderer library. by lexbor.com / browser-engine
- wired-elements: Collection of custom elements that appear hand drawn. Great for wireframes or a fun look. by wiredjs.com / ui
- ASCII Silhouettify: 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. by meatfighter.com / ascii, art
📚 Tutorials
- How To Use Corepack: Never think again what package manager to use in a project. by Matt Pocock / npm, corepack / 4 min read
- Apple Tab Pill Animation: Seen this effect of Apple WWDC24 by Surjith S M / css / 0 min read
- Full Stack Web Push API Guide: Try out push notifications! by Boaz Sender / notifications / 18 min read
- Generating ZIP Files With Javascript: Self-explanatory by Josh Martin / zip, javascript / 3 min read
- Using the Page Visibility API: Checking document visibility gives you insight into how visitors are interacting with your pages and can provide hints about the status of your applications. by Brian Smith / visibility / 10 min read
- Quick Trick - Using border-image to Apply and Overlay Gradient.: A one-liner for a nice effect. by Chris Coyier / css / 3 min read