0DE5
📚 Tutorials
A beautiful bit of TypeScript to turn an array into a keyed object
A Beginner's Guide to Node.js Worker Threads
I like nodes general single thread policy but if you really really need more than one thread that’s a good starting point.
weeklyfoo #25 / 2024-03-25nodejsthreads
A CSS scroll version of the gooey island
A CSS-Only Star Rating Component and More! (Part 1)
A Deep Dive into the Inline Background Overlap Problem
A tweet by Lucas Bonomi got me thinking about this problem: how to get a semitransparent background following some inline text with padding, but without the overlap problem that can be seen in the image below.
weeklyfoo #77 / 2025-03-24css
A flowing WebGL gradient, deconstructed
In this post, I’ll break it down step by step. You need no prior knowledge of WebGL or shaders — we’ll start by building a mental model for writing shaders and then recreate the effect from scratch.
weeklyfoo #81 / 2025-04-21webglshaders
A formula for responsive font-size
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.
weeklyfoo #18 / 2024-02-05cssswitch
A practical guide to Llama Stack for Node.js developers
Over the last few months, our Node.js team has explored how to leverage large language models (LLMs) using JavaScript, TypeScript, and Node.js. With TypeScript/JavaScript often being the second language supported by frameworks used to leverage LLMs, we investigated various frameworks to see how easy they are to use and how they might affect the results we get.
weeklyfoo #80 / 2025-04-14nodejsllm
Anchoreum
Animate hero elements with scroll-driven CSS animations
Animated sign-in disclosure with only HTML and CSS using the Popover API
Animation in the browser console
Anthropic courses
Apple style blow out text effect.
Apple Tab Pill Animation
as const to union of routes
ASCII Webcam
Balanced Slider with CSS
Balancing Text In CSS
Best Happy New Year animation using HTML and CSS
Bit late, nevertheless nice to learn how they’ve been made.
weeklyfoo #67 / 2025-01-13animations
bg-remover
Blazing Fast Websites with Speculation Rules
This post introduces speculation rules, a new web platform feature that allows developers to deliver instant page navigations after the initial page load.
weeklyfoo #38 / 2024-06-24chromespeculation-rules
Brisk VS Code extension 5 minute Development Speedrun
Build a Node App with TypeScript
Build a SolidJS app with Deno
SolidJS is a declarative JavaScript library for creating user interfaces that emphasizes fine-grained reactivity and minimal overhead. When combined with Deno’s modern runtime environment, you get a powerful, performant stack for building web applications.
weeklyfoo #63 / 2024-12-16denosolidjs
Build an API to Keep Your Marketing Emails Out of Spam
Build Your Own React.js in 400 Lines of Code
Build your own X
This repository is a compilation of well-written, step-by-step guides for re-creating our favorite technologies from scratch.
weeklyfoo #27 / 2024-04-08byo
Building a CLI from scratch with TypeScript and oclif
Building a Generic RSS Parser Service with Cloudflare Workers
Building a GitHub activity feed with Node.js and Socket.io
Building a Micro HTMX SSR Framework
Building a PasteBin in Rust - A Step-by-Step Tutorial
Building a progress-indicating scroll-to-top button in HTML and CSS
Building a Single-Page App with htmx
People talk about htmx as though it’s saving the web from single-page apps. React has mired developers in complexity (so the story goes) and htmx is offering a desperately-needed lifeline.
weeklyfoo #54 / 2024-10-14htmx
Building AI Applications with LangChain and Node.js
Building an Article Recommendation System with Upstash
Makes use of upstash, remix, openai, langchain, vercel ai, tailwind and fly.io.
weeklyfoo #28 / 2024-04-15ai
Building an interactive 3D event badge with React Three Fiber
Building Interactive Data Visualizations with D3.js and React
Data visualizations are a powerful way to represent complex information in a digestible and engaging manner. React, a popular JavaScript library for building user interfaces, can be integrated with D3.js to create stunning and interactive data visualizations.
weeklyfoo #21 / 2024-02-26reactd3
Building scalable ML workflows
Bulletproof React
A simple, scalable, and powerful architecture for building production ready React applications.
weeklyfoo #33 / 2024-05-20react
Change scrollbar position
City In A Bottle – A 256 Byte Raycasting System
Clean up HTML Content for Retrieval-Augmented Generation with Readability.js
Scraping web pages is one way to fetch content for your retrieval-augmented generation (RAG) application. But parsing the content from a web page can be a pain.
weeklyfoo #68 / 2025-01-19content
CLI Chatbot with LangChain and OpenAI in Node.js
Want to build a chatbot in your Node.js terminal using JavaScript? We will walk through the most basic scenario when using LangChain and OpenAI. In this guide, we’ll walk through creating a simple CLI chatbot using Node.js. You’ll learn how to interact with OpenAI’s language model and process user input in a terminal-based interface.
weeklyfoo #75 / 2025-03-10ailangchainopenai
Compiling a standalone executable using modern JavaScript/TypeScript runtimes
Create an internal CLI
Creating a Fun CSS Party Popper Animation
Creating a Keyboard Shortcut Hook in React (Deep Dive)
Make a custom React hook to handle keyboard shortcuts.
weeklyfoo #57 / 2024-11-04reactshortcuts
Creating a LLM-as-a-Judge That Drives Business Results
A step-by-step guide with my learnings from 30+ AI implementations.
weeklyfoo #57 / 2024-11-04aillms
Creating a TypeScript CLI for Your Monorepo
Creating an Angled Slider
Let’s walk through how this slider with angled content and hover effect works.
weeklyfoo #71 / 2025-02-10cssslider
Creating an ASCII Shader Using OGL
Explore the world of shaders with this easy-to-follow guide to creating a custom ASCII art animation using WebGL, Perlin noise, and GLSL.
weeklyfoo #59 / 2024-11-18asciigenerative-art
Creating Animated Accordions with the Details Element and Modern CSS
Accordions are everywhere these days. GitHub has them on their home page right now. Figma ships them, too. I’ve implemented so many custom accordions that I can’t count them.
weeklyfoo #77 / 2025-03-24css
Creating Generative Artwork with Three.js
Develop a dynamic, generative artwork using Three.js and grid systems, inspired by Lygia Clark’s minimalist geometric designs.
weeklyfoo #68 / 2025-01-19art
CSS @property and the New Style
CSS Blurry Shimmer Effect
CSS Bursts with Conic Gradients
CSS display contents
CSS Kaleidoscopes
Gradients are so fun, so complex, so powerful. I just can’t get enough of messing with them.
weeklyfoo #75 / 2025-03-10css
CSS Scroll Snap
CSS scroll-triggered animations with style queries
CSS Surprise Manga Lines
When a manga or anime character is surprised, lines focus on and highlight their face. Is it possible to create a similar effect with HTML and CSS?
weeklyfoo #40 / 2024-07-08css
CSS view-timeline shine effect
Data Engineering Zoomcamp
Delicious Donut Components
An interactive guide to component composition with React Server Components
weeklyfoo #57 / 2024-11-04react
Designing backgrounds with LLMs and React
Docker app hosting
Drag to Select
Read the journey of Joshua on how to implement a way to select many objects via drag.
weeklyfoo #55 / 2024-10-21drag
Dual Publishing ESM and CJS Modules with tsup and Are the Types Wrong?
DuckDB as the New jq
Dynamic Github profile with Bun and Typescript
Get a list of your latest blog posts automatically updated on your Github profile.
weeklyfoo #33 / 2024-05-20githubbun
Email Headers can drastically impact deliverability.
Eurovision Gradients
Expanding scroll indicators
Explode on scroll effect
Fading content using transparent gradient in CSS
Frontend Security Checklist
Frosted Glass from Games to the Web
Full Stack Web Push API Guide
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.
weeklyfoo #18 / 2024-02-05satori
Generating Random Mazes with JavaScript
I didn’t get a chance to hit the pumpkin patch this year, so I missed out on seeing any corn mazes. To make up for it, I decided to make some mazes of my own! Being a programmer, I over-engineered it and built a random maze generator!
weeklyfoo #58 / 2024-11-11maze
Generating SVG Avatars From Identifiers
Generating ZIP Files With Javascript
Getting Started with Axum - Rust's Most Popular Web Framework
Glowy Border Shimmer Button
Going full-stack on Astro with Cloudflare D1 and Drizzle
A step-by-step guide to adding a back-end to your Astro project using Cloudflare D1 and Drizzle ORM
weeklyfoo #49 / 2024-09-09astrocloudflare
Gooey effect
Grid by Example
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.
weeklyfoo #36 / 2024-06-10cssgrid
HLS Video Transcoder
How to build a library in React
In this post, I quickly wanna go over how to build a library in React.
weeklyfoo #72 / 2025-02-17reactlibraries
How to Build an Image Search Application With OpenAI CLIP & PostgreSQL in JavaScript
How to build an offline-first app using Expo & Legend State
Learn how to build and assess the effectiveness of an offline first application using Legend State and Expo.
weeklyfoo #22 / 2024-03-04expo
How to center an element in CSS without adding a wrapper in HTML
Another article to solve the problem of centering elements in css
weeklyfoo #16 / 2024-01-22css
How to code-sign and notarize an Electron application for macOS
How to Create a Chrome Extension with React, TypeScript, TailwindCSS, and Vite
In this article, we’ll walk you through the entire process step-by-step, ensuring you have a clear understanding of how to build your own Chrome extension in 2024.
weeklyfoo #52 / 2024-09-30chromeextension
How to Create an AI-Powered Newsletter Aggregator with React and AI Agents
Get started with AI agents in this practical tutorial and learn to build an AI-powered newsletter aggregator using React and KaibanJS.
weeklyfoo #58 / 2024-11-11aikaibanjs
How To Create An NPM Package
In this guide, we’ll go through every single step you need to take to publish a package to npm.
weeklyfoo #48 / 2024-09-02npmtypesript
How to create rounded gradient borders with any background in CSS
How to Dockerize a React App
How to get deep traces in your Node.js backend with OTel and Deno
One important facet of running production software is observability—monitoring logs, traces, and metrics so you can identify and fix issues quickly.
weeklyfoo #77 / 2025-03-24denoopentelemetry
How to Make a Chrome Extension: Step-by-Step Guide
Always good to know how to build your own Chrome extension to automate things.
weeklyfoo #23 / 2024-03-11chrome
How to Make a Scroll-to-Select Form Control
A scroll-to-select form control is a form control that allows users to scroll through a list of options and select one. This is a common pattern in mobile apps, but it can also be useful on the web.
weeklyfoo #53 / 2024-10-07cssforms
How to make complex Chrome extensions - a zero gravity guide
Building a complex browser extension isn’t exactly easy—especially for first-timers or folks who feel unsure of what they’re doing! Not to worry. We’ll show you the essentials for building a full-featured Chrome extension using a real example from the Evil Martians casebook! We’ll also share some other useful tips and cool recommendations, so read on!
weeklyfoo #43 / 2024-07-29chromeextensions
How to Perform Data Validation in Node.js
How to roll your own auth in JavaScript & TypeScript
Authentication is an important topic of any application. It’s the gatekeeper that ensures only the right people can access the right resources. But how do you roll your own authentication in JavaScript & TypeScript? In this tutorial, we’ll explore how to build a session-based authentication system.
weeklyfoo #57 / 2024-11-04auth
How to set up TypeScript with Node.js and Express
How to split JavaScript strings into sentences, words or graphemes with Intl.Segmenter
How To Use Corepack
Never think again what package manager to use in a project.
weeklyfoo #37 / 2024-06-17npmcorepack
How To Use Google Sheets as a Database With React via Next.js
Choose this method over a more traditional database for one reason - data retrieval.
weeklyfoo #38 / 2024-06-24spreadsheetsreactnode
How to Use Lazygit to Improve Your Git Workflow
Lazygit is an open-source command line terminal UI for Git commands that I’ve used for the last couple of years, and it’s become my new best friend.
weeklyfoo #80 / 2025-04-14gitcli
How to use the Reddit API for a JavaScript application
Reddit is a news aggregation, communication, and discussion application. If you want to get more information about a particular topic or have a question, Reddit is the place to be. The data on Reddit are provided to the public through both the website and its API.
weeklyfoo #53 / 2024-10-07reddit
I created a CLI-Music Player in Rust!
Implementing Concurrency in Shell Scripts
Quick read if you need some advice how to run tasks in parallel in your shell script.
weeklyfoo #33 / 2024-05-20clishell
Implementing Filtered Semantic Search Using Pgvector and JavaScript
Good introduction with practical examples how to use pgvector.
weeklyfoo #63 / 2024-12-16postgrespgvector
Implementing SAML SSO in Node.js with Microsoft Entra ID
SAML is one of the commonly used standards for implementing SSO in enterprise environments. Even though OIDC is rapidly gaining traction, not everyone supports it, or there are compliance requirements that mandate SAML.
weeklyfoo #47 / 2024-08-26samlnodejs
Infinite-Scrolling Logos In Flat HTML And Pure CSS
Intro to Wasm in Deno
JavaScript is a scripting language—distant from the machine code your CPU actually consumes. But JavaScript has a way to execute binary machine code, or something close to it, called WebAssembly. WebAssembly, or Wasm, is a low-level, portable binary format that runs at near-native speeds in the browser.
weeklyfoo #72 / 2025-02-17denowasm
Langchain Tutorial For Typescript and Javascript Developers
Learn D3.js from the ground up
Learn SVG by drawing an arrow
If you ever wanted to draw elements programatically in svg, try this article.
weeklyfoo #16 / 2024-01-22svgs
Learn yjs
Interactive tutorial series on building realtime collaborative applications using the Yjs CRDT library.
weeklyfoo #68 / 2025-01-19collab
LLM course
Course to get into Large Language Models (LLMs) with roadmaps and Colab notebooks.
weeklyfoo #17 / 2024-01-28llm
Make an Animated Menu like Stripe with React, Tailwind, and AI
Make creative borders with background-clip border-area
How’d you like to use CSS to easily create a border from an image or gradient?
weeklyfoo #61 / 2024-12-02css
Making a REST API typesafe with React Query and Zod
Especially zod helps you to keep your objects in the right shape.
weeklyfoo #47 / 2024-08-26zodreact
Making content-aware components using CSS :has(), grid, and quantity queries
The idea here is that you then preemptively provide sensible behavior and safeguards to keep things working well.
weeklyfoo #57 / 2024-11-04css
Making noisy SVGs
Making SVG Loading Spinners: An Interactive Guide
Micro Frontends with Native Federation
Detailed introduction to micro frontends with Native Federation.
weeklyfoo #28 / 2024-04-15microfrontends
Midjourney-inspired gallery scroller with CSS scroll animation
Modern CSS Tooltips And Speech Bubbles
New way to animate borders
Next AI News
HackerNews rewritten in nextjs - not really a tutorial, but you get working examples of AppRouter, …
weeklyfoo #15 / 2024-01-14nextjs
Next.js App Router Training
Introducing various basic patterns of app router with simplified code.
weeklyfoo #17 / 2024-01-28nextjs
Nice header effect
Node.js Test Runner
Node.js, TypeScript and ESM: it doesn't have to be painful
NodeJS: Blurring Human Faces in Photos
On-Scroll Animation Ideas for Sticky Sections
Some ideas of how sticky sections can be animated while exiting the viewport.
weeklyfoo #21 / 2024-02-26animations
On-Scroll Sliced Text Animation
A scroll-triggered sliced text animation, where segmented elements reunite while scrolling.
weeklyfoo #10 / 2023-12-13css
Plain Vanilla
An explainer for doing web development using only vanilla techniques. No tools, no frameworks - just HTML, CSS, and JavaScript.
weeklyfoo #54 / 2024-10-14javascript
Popovers Work Pretty Nicely as Slide-Out Drawers
Practical Deep Learning for Coders
A free course designed for people with some coding experience, who want to learn how to apply deep learning and machine learning to practical problems.
weeklyfoo #40 / 2024-07-08ai
Practical SVG
Profiling Node.js Applications
Prompt engineering
Pure CSS Circular Text (without Requiring a Monospace Font)
There is no simple and obvious way to set text on a circle in CSS. Good news though! You can create a beautiful, colorful, and even rotating circular text with pure CSS. It just takes a bit of work and we’ll go over that here.
weeklyfoo #39 / 2024-07-01css
Pure CSS Halftone Effect in 3 Declarations
Quick Trick - Using border-image to Apply and Overlay Gradient.
Remix Todo App
Remove all git local branches except main
Responsive app switcher or carousel UI with CSS view()
Running OCR against PDFs and images directly in your browser
Rustcrab
An Open source project with everything you need to learn about Rust
weeklyfoo #42 / 2024-07-22rust
Scroll-driven animations and 3D perspective
The trick is driving the animation with list items that are smaller in height than the images
weeklyfoo #30 / 2024-04-29css
Securing APIs - Express rate limit and slow down
As soon as an API gets used more frequently, definitely something to consider.
weeklyfoo #39 / 2024-07-01express
serverless-postgres
MVP for a Serverless Postgres using Oriole, Fly Machines, and Tigris for S3 Storage.
weeklyfoo #35 / 2024-06-03postgresserverless
Set Up a $4/mo Hetzner VM to Skip the Serverless Tax
Follow the latest trend to manage your own infra for your app.
weeklyfoo #50 / 2024-09-16infrahetzner
Shape Lens Blur Effect with SDFs and WebGL
An introduction on harnessing the power of Signed Distance Fields (SDFs) to draw shapes in WebGL and create interactive effects, such as lens blur.
weeklyfoo #38 / 2024-06-24webglblur
Siblings Fade
Slack AI
This directory contains code on how to build your own Slack AI to chat with the unstructured data lying in your slack channels.
weeklyfoo #15 / 2024-01-14slackai
SVG Tutorial
Tab Controls with CSS
Template literals inside generic functions
The Different (and Modern) Ways to Toggle Content
TIP: add the `data-1p-ignore` attribute to your input field to disable 1Password on it ✖︎
Todo Example with Apico Google Sheets
Sample repository showcasing how to create a Todo app with React and Google Sheets as the backend
weeklyfoo #20 / 2024-02-19reactspreadsheets
Transcribe audio to text on Cloudflare Workers with AssemblyAI and TypeScript
In this tutorial, you’ll learn how to create an application that transcribes the audio files (and video files) to text. You’ll create a TypeScript backend on top of Cloudflare Workers and use the AssemblyAI APIs to transcribe the audio.
weeklyfoo #16 / 2024-01-22cloudflareassemblyaiai
Trigger text highlights on scroll
Types from an array of strings
Typescript example to infer pattern matching
Usage-based billing for your Software-as-a-Service product
Example from Cloudflare how to implement metered billing for your SaaS.
weeklyfoo #28 / 2024-04-15cloudflarebilling
Use CSS shape-outside to wrap text around shapes
useStateObject
Using AI in the Browser for Typo Rewriting
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.
weeklyfoo #37 / 2024-06-17visibility
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.
weeklyfoo #36 / 2024-06-10search
using your Kindle as an e-ink monitor
View transitions - Demo
Vite with TypeScript
A brief walkthrough on how to upgrade Vite from JavaScript to TypeScript.
weeklyfoo #71 / 2025-02-10vitetypescript
Wasp - The JavaScript Answer to Django for Web Development
Web Workers, Comlink, Vite and TanStack Query
You can create these landing page effects with CSS scroll-driven animations and zero JavaScript 🔥
You can use custom properties to control motion rate in your transitions and animations
You can use mask-composite and some JavaScript to create this pointer proximity following glow border