Stay ahead in web development: latest news, tools, and insights #36

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!

• You should keep a developer’s journal: A developer’s journal is a place to define the problem you’re solving and record what you tried and what worked. / productivity / 15 min read

📰 Good to know

• My 3 Step Process for Writing Clean Code: Should be the default for everyone. / productivity / 5 min read
• htmx: Simplicity in an Age of Complicated Solutions: Another good article about how htmx simplifies things. / htmx / 23 min read
• The Gap: An exploration of the pain points that CSS gap solves. / css / 13 min read
• On Constraints and Freedom: Lessons learned from component styling APIs / engineering / 3 min read
• Please support skip to main content on your docs site: A journey to get comfortable with keyboard-based computer navigation. / docs / 4 min read
• What We’ve Learned From A Year of Building with LLMs: A practical guide to building successful LLM products. / llm, ai / 75 min read
• 10 modern Node.js runtime features to start using in 2024: New features in Node you need to know. / nodejs / 29 min read
• Skip SDKs in Simple Integrations: Kent writes about that it's not always benificial to use SDKs but direct API calls instead. / engineering / 5 min read
• Turborepo 2.0: Next major release of Turbo / turbo, monorepo / 6 min read
• 3 new features to customize your performance workflows in DevTools: New features from the Chrome team for Devs. / chrome / 12 min read
• How I give the right amount of context (in any situation): 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. / productivity / 13 min read

🧰 Tools

• manifest: Manifest is a complete backend that fits into one file of simple code. / backend
• ffmpeg.app: Get help to use ffmpeg! / ffmpeg
• Squoosh: Compress and resize images online / images
• WebX: 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. / web
• ht: headless terminal - wrap any binary with a terminal interface for easy programmatic access. / cli
• yamada-ui: React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion. / ui, react
• tlbrowse: Generate imagined websites on an infinite canvas / canvas
• The React Native Boilerplate: A React Native template for building solid applications. / react
• React Glow: Add a mouse-tracing glow effect to React components. / react, glow
• Chromicons: Handcrafted open source icons from LifeOmic / icons
• PKI.js: 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. / pki, crypto
• KaTeX: Fast math typesetting for the web. / latex
• Design Everywhere: An ever-growing collection of carefully curated works from around the world. / design, library
• Rotato: Stunning 3D mockups with your own app and web designs on the device screens. No 3D experience needed. / animations, video

🎨 Design

• Learn the logic of great typography: An interactive type tutorial / typography / 13 min read
• Designer engagement report: Top 3 problems for designers - no research, no design strategy, and no career progression / career / 16 min read
• Open Database of Design Salaries: Promoting salary transparency & pay equity amongst design professionals across industries, experience levels & geographies. / career / 42 min read

📚 Tutorials

• Grid Garden: 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. / css, grid / 1 min read
• Node.js Test Runner: A Beginner's Guide / nodejs, tests / 23 min read
• Using Vectorize to build an unreasonably good search engine in 160 lines of code: The tl;dr is that search got really good suddenly and really easy to build because of AI. / search / 11 min read
• Brisk VS Code extension 5 minute Development Speedrun: Create a VS Code extension. / vscode / 16 min read
• Animated sign-in disclosure with only HTML and CSS using the Popover API: Thanks @jh3yy / html, css, popover / 0 min read

Want to read more? Check out the full article here.

To sign up for the weekly newsletter, visit weeklyfoo.com.