urban weekly #18

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

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

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

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

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

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

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