urban weekly #102
weekly tech news so you don't have to read all the internet
Good to know
Web Components in Earnest - Good intro into web components. But bring some time with you, it's a detailed article. ui
How to start a React Project in 2024 - I love react with Vite and can only recommend it. react, vite, nextjs
The Easiest Way to Get Started with Three.js Web Animations - A good starting point if you're interested in three.js threejs
Modern JavaScript library starter - How to publish a package with TypeScript, testing, GitHub Actions, and auto-publish to NPM npm, package, starter
Inside .git - If you ever wondered how .git is structured: Julia Evans gives a very entertaining introduction. git
How TypeScript can help in modelling business workflows - Interesting approach to implement workflows. Feels kind of overengineered but I like the concept. Especially if applications and workflows grow this would be very benificial. typescript, workflows
The New CSS Color Format You Didn't Know You Needed; OKLCH() - Saw it the first time in the Tailwind docs - so good to get some insights about it. colors, oklch
ICANN proposes creating .INTERNAL domain to do the same job as 192.168.x.x - Not really related to web dev but quite interesting in the DNS space. icann, .internal
Adding type safety to object IDs in TypeScript - That's a neat approach: for example if you prefix your user ids with user_ you can implement a type check for it. typescript
Multi-Database Support in DuckDB - TL;DR: DuckDB can attach MySQL, Postgres, and SQLite databases in addition to databases stored in its own format. This allows data to be read into DuckDB and moved between these systems in a convenient manner. duckdb, db
FerretDB - A truly Open Source MongoDB alternative - using postgres ferretdb, postgres
The promise and challenges of crypto + AI applications - Not (that) web dev relevant, but anyways a good read how AI and Blockchain can benefit from each other ai, blockchain
Benchmarks of JavaScript Package Managers - Was not aware of that: pnpm regularly updates this benchmarks that compares npm, yarn and pnpm benchmark, pnpm, yarn, npm
Event Loop. Myths and reality - Going down the rabbit hole of the event loop. javascript
Read it! Read it! Read it!
Speaking for Hackers - How to keep a roomful of programmers entertained when your competition is the internet. Awesome guide how to do public speaking the right way. talks
Please, don’t force me to log in - I'm so with Juha-Matti Santala login, account
Becoming an Engineering Manager - Is It For You? - Great and entertaining read! Just a five question quiz. Simple. Quick. True! career
Code and Tools
Zen - Simple, free and efficient ad-blocker and privacy guard for Windows, macOS and Linux adblocker
ShellCheck - Finds bugs in your shell scripts. shell, script
Expressive Code - Present your source code on the web, making it easy to understand and visually stunning. code
Keyv - Simple key-value storage with support for multiple backends kv
Foundations - Cloudflare's Rust service foundations library. rust
open-saas - A free, open-source SaaS app template for React & Node.js with superpowers. Production-ready. Community-driven. saas
react resizable panels - React components for resizable panel groups/layouts. resize, react
react-curved-text - React library to create curved text including a playground react, curved
Variable Fonts - A simple resource for finding and trying variable fonts fonts
unlazy - Universal lazy loading library for placeholder images placeholder
WebGPU-kit - WebGPU-kit is a collection of libraries that make it easy to build high-performance, cross-platform, web-based graphics applications. webgpu
Palettify - Get an instant preview for your theme with palettify. Export your theme in one click. themes
Shakker - Image to image AI generation tool images, ai
Cytoscape.js - Graph theory (network) library for visualisation and analysis visualizations, javascript
OverlayScrollbars - A javascript scrollbar plugin that hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling. scrollbars, javascript
VersionFox - A cross-platform and extendable version manager with support for Java, Node.js, Flutter, .Net & more cli
Physical - True Icons - Icon set representing fitness items and concepts. icons
Deck.Gallery - Curated list of beautiful slide decks slidedecks
tembo - Managed postgres postgres, databases
All about Design
Handheld Design - Discover best-in-class mobile design inspiration. mobile design
Checkbox UI design: Best practices and examples - Using checkboxes the right way if you consider the best practices in this article. checkboxes
Wall of portfolios - A curated showcase of beautifully designed & super effective portfolios portfolio
Disabled Buttons UX – Usability Issues and How to Avoid Them - Conclusion: don't use disabled buttons at all ui, buttons
In Praise of Buttons – Part One - Form is Function in Graphical User Interfaces ui, buttons
standards - Online brand guidelines guidelines
Going beyond pixels and (r)ems in CSS - Relative length units based on font - Learn all about relative lengths css
Everything you need to know about Dev Mode - I'm a Figma consumer, but I've always wanted to learn more about Figmas Dev mode. That's a great overview. Didn't know there's a VSCode extension to open Figma designs in VSCode. figma
8 exciting visual trends you should know about in 2024 - I only count 7, whatever, good to know all of them. trends
How should designers code? - I'm a big fan of designers that code as well. This article shows some practical paths toward shipping to production coding
Wireframe Examples - Find all the wireframe examples you need as inspiration for your next project. Safe hours coming up with layouts on your own. wireframes
Fun
Booleanish ftw xD - true, false, or maybe something different? ;) typescript
Pong Wars - Great side project by Koen van Gilst. And the most beautiful thing: it's all inside one html file <3 pong
httpareacodes - Mapping http status codes on US area codes - I think I'll use it for one of my next projects ;) http
ascii theater - stream free text-based movies in your terminal ascii, movies
Bouncy Ball - 22 ways how to implement a bouncy ball javascript
Labyrinthos.js - A JavaScript procedural generator for Mazes, Terrains, and Biomes maze, javascript
Tutorials
Trigger text highlights on scroll - Thanks @jh3yy! css
Generate Image From HTML Using Satori and Resvg - I was trying some ways to auto-generate images: programmatically create svgs, or using (node) canvas. The satori approach has many advantages. This tutorial describes how to use it. satori
CSS Blurry Shimmer Effect - <3 css, blurry
A highly configurable switch component using modern CSS techniques - Learn how build a highly configurable switch component using modern CSS, such as :has(), container queries, Logical Properties and Custom Properties. css, switch
New way to animate borders - Thanks @jh3yy! css
Explode on scroll effect - Thanks @jh3yy! css
Videos
Easily Deploy Full Stack Node.js Apps on AWS EC2 - Learn to deploy a Node.js or Bun app connected to a PostgreSQL or MySQL database on AWS EC2 Ubuntu Instance. aws, ec2, nodejs
Debugging Fetch Priority - Just 7 minutes, super entertaining fetch
Published on 2024-02-05, last updated on 2025-09-14 by Adam
Comments or questions? Open a new discussion on
github.
Adam Urban is fullstack engineer, loves serverless and generative art, and is building side projects like weeklyfoo.com, flethy.com and diypunks.xyz in his free time.
