仓库源文站点原文


layout: "../layouts/BlogPost.astro" title: "Curated link collection" slug: curated-link-collection description: "" added: "" top: true

order: 2

Worth learning repeatedly

baseCS: https://github.com/vaidehijoshi/basecs-series

Stanford CS 106B Lectures: https://www.youtube.com/playlist?list=PL-h0BZdG_K4mfItKR5nUChmnuus-q-Tbc

Web Security: https://web.stanford.edu/class/cs253

How DNS works: https://howdns.works

How HTTPS works: https://howhttps.works

Inside look at modern web browser (4 parts): https://developers.google.com/web/updates/2018/09/inside-browser-part1

Intro to Computer Systems: https://www.cs.cmu.edu/afs/cs/academic/class/15213-f19/www/schedule.html

The Missing Semester of Your CS Education: https://missing.csail.mit.edu

High Performance Browser Networking: https://hpbn.co

Modern JavaScript-based web development: https://fullstackopen.com

Bash Commands and Tips: https://dev.to/awwsmm/101-bash-commands-and-tips-for-beginners-to-experts-30je

Learn Node.js: https://nodejs.org/en/learn

Docker Guide: https://www.robertcooper.me/docker-guide

Tail Call Optimization: https://www.youtube.com/watch?v=-PX0BV9hGZY

Modern Web App Design Patterns: https://www.patterns.dev

What happens when we type google.com in a browser: https://github.com/vasanthk/how-web-works

Machine Learning for Beginners: https://github.com/microsoft/ML-For-Beginners

Artificial Intelligence for Beginners: https://github.com/microsoft/AI-For-Beginners

Generative AI for Beginners: https://github.com/microsoft/generative-ai-for-beginners

90DaysOfDevOps: https://github.com/MichaelCade/90DaysOfDevOps

Beginner's TypeScript tutorial: https://www.totaltypescript.com/tutorials

Total TypeScript Essentials: https://www.totaltypescript.com/books/total-typescript-essentials

Why web tech is like this: https://www.youtube.com/watch?v=3QEoJRjxnxQ

A year-end celebration of fundamental web technologies: https://12daysofweb.dev

B-trees and database indexes: https://planetscale.com/blog/btrees-and-database-indexes

MySQL isolation levels and how they work: https://planetscale.com/blog/mysql-isolation-levels-and-how-they-work

A Beginner’s Guide to the True Order of SQL Operations: https://blog.jooq.org/a-beginners-guide-to-the-true-order-of-sql-operations

Falsehoods programmers believe in: https://github.com/kdeldycke/awesome-falsehood


Tools and Cool websites

Chrome urls: chrome://chrome-urls

Let Me DuckDuckGo That For You: https://lmddgtfy.net

A collective list of free APIs: https://github.com/public-apis/public-apis

Console Utilities API reference: https://developer.chrome.com/docs/devtools/console/utilities/

Tips to get more comfortable with DevTools: https://devtoolstips.org/

Frontend build config generator: https://createapp.dev/

Web Page Test: https://www.webpagetest.org/

Chrome DevTools tips: https://umaar.com/dev-tips/

Devhints for developer documentation: https://devhints.io/

Quick Reference Cheat Sheet: https://quickref.me/

Sketch UI with a hand-drawn look: https://excalidraw.com/

A tiny little drawing app: https://tldraw.com/

Images of source code: https://carbon.now.sh/

Manage node_modules in the system: https://github.com/voidcosmos/npkill

Interactive website with live coding: https://www.strml.net/

Driving game run in a browser: https://slowroads.io/

Summer Afternoon: https://summer-afternoon.vlucendo.com/

Neal.Fun: https://neal.fun/

HTTP Cats: https://http.cat/

Doodles-as-A-Service Repo: https://github.com/girliemac/a-picture-is-worth-a-1000-words

Github contributions in 3D: https://skyline.github.com

wenyan‑lang: https://wy-lang.org/

Build your own X: https://github.com/danistefanovic/build-your-own-x

You Don't Need: https://github.com/you-dont-need/You-Dont-Need

All the Ways to Make a Web Component: https://webcomponents.dev/blog/all-the-ways-to-make-a-web-component/

The Timeline of The Web: https://thehistoryoftheweb.com/timeline/

Visual history of your favorite technology: https://www.versionmuseum.com/

Floating Point Math: https://0.30000000000000004.com/ (`https://${0.1 + 0.2}.com`)

Web based macOS and Windows XP desktop recreation: https://macos-web.app, https://winxp.vercel.app

Windows 11 in React: https://github.com/blueedgetechno/win11React

Windows 95 style UI component library for React: https://github.com/react95-io/React95

Discover the apps everyone is docking about: https://www.dockhunt.com

Chrome-style tabs in HTML/CSS: https://github.com/adamschwartz/chrome-tabs

The Steve Jobs Archive: https://stevejobsarchive.com

A web scraping and browser automation library: https://crawlee.dev

Console for mobile browsers: https://github.com/liriliri/eruda

Get an insight into the inner-workings of a given website: https://web-check.xyz

Astro starter powered by MPA view transitions: https://github.com/argyleink/morphull

Web accessibility interactive quizzes: https://www.a11yiseverything.com/quizzes/aria-label

DGM is an online diagramming app: https://dgm.sh/home

A tool for writing better scripts: https://github.com/google/zx

The resource you’ll ever need for mechanical keyboards: https://www.keyboard.university

Sleek Framer UI components: https://drams.framer.website

Remote desktop environment in the browser: https://github.com/HeyPuter/puter

See Core Web Vitals and PageSpeed Insights results simply and easily: https://page-speed.dev

Feature management for developers with GitOps: https://github.com/featurevisor/featurevisor

Awesome Web Apps that work without login: https://github.com/aviaryan/awesome-no-login-web-apps

A powerful media downloader with no bullshit: https://cobalt.tools

A high-performance HTTP benchmarking tool written in Golang: https://github.com/six-ddc/plow

Netlify Celebrates 5 Million Developers | 3D Game: https://5-million-devs.netlify.com

Utilities to work with PDFs in Node.js, browser and workers: https://github.com/unjs/unpdf

The web-platform-tests Interop project: https://github.com/web-platform-tests/interop

Code transformer based on AST but providing a more intuitive API: https://github.com/thx/gogocode

Guidance on choosing a license for your open source project: https://choosealicense.com

Bare metal to production ready in minutes: https://github.com/MightyMoud/sidekick


CSS related

Modern CSS Solutions for Old CSS Problems: https://moderncss.dev

100 Days Of More Or Less Modern CSS: https://www.matuzo.at/blog/2022/100-days-of-more-or-less-modern-css

Defensive CSS - writing CSS that is protected: https://ishadeed.com/article/defensive-css

Understanding Layout Modes: https://www.joshwcomeau.com/css/understanding-layout-algorithms

CSS Dinner Selectors: https://flukeout.github.io

CSS percentage: https://wattenberger.com/blog/css-percents

Centering in CSS: https://ishadeed.com/article/learn-css-centering

Learn CSS Positioning: https://ishadeed.com/article/learn-css-positioning

Everything About Auto in CSS: https://ishadeed.com/article/auto-css

Box alignment in Grid and Flexbox: https://ishadeed.com/article/learn-box-alignment

Understanding Z-Index: https://ishadeed.com/article/understanding-z-index

Digging Into CSS Logical Properties: https://ishadeed.com/article/css-logical-properties

Basic styles for HTML Elements without classes: https://boltcss.com

CSS Flexbox: https://github.com/samanthaming/Flexbox30

CSS Grid: https://css-tricks.com/snippets/css/complete-guide-grid

Scroll Snap: https://oh-snap.netlify.app

Simple CSS scrollbar editor: https://scrollbar.app

Incomplete List of Mistakes in the Design of CSS: https://wiki.csswg.org/ideas/mistakes

Build faithful recreations of old UIs: https://jdan.github.io/98.css, https://botoxparty.github.io/XP.css, https://khang-nd.github.io/7.css

How to create high-performance CSS animations: https://web.dev/animations-guide

CSS clip-path defining the visible region: https://ishadeed.com/article/clip-path

Intro to CSS 3D transforms: https://3dtransforms.desandro.com

Color Formats in CSS: https://www.joshwcomeau.com/css/color-formats

It's time to learn oklch color: https://keithjgrant.com/posts/2023/04/its-time-to-learn-oklch-color

Open Source CSS Variables: https://open-props.style

Across pages view transitions: https://smashing-transitions.netlify.app

CSS Wrapped 2023 from Chrome for Developers: https://developer.chrome.com/blog/css-wrapped-2023

What You Need to Know about Modern CSS: https://frontendmasters.com/blog/what-you-need-to-know-about-modern-css-spring-2024-edition

Compare web animation techniques by bouncing a ball: https://sparkbox.github.io/bouncy-ball

A Friendly Introduction to Spring Physics: https://www.joshwcomeau.com/animation/a-friendly-introduction-to-spring-physics

The Collection of CSS-only Shapes: https://css-shape.com

Styling Tables the Modern CSS Way: https://piccalil.li/blog/styling-tables-the-modern-css-way

Visual design rules you can safely follow every time: https://anthonyhobday.com/sideprojects/saferules


FE dev resources

GUI Challenges: https://www.youtube.com/playlist?list=PLNYkxOF6rcIAaV1wwI9540OC_3XoIzMjQ

Web Interface Guidelines: https://github.com/raunofreiberg/interfaces

The react library to build dashboards fast: https://github.com/tremorlabs/tremor

Copy & Paste React Components for Dashboards: https://github.com/tremorlabs/tremor-raw

SVG spinners: https://github.com/n3r4zzurr0/svg-spinners

The Biggest Collection of Loading Animations: https://css-loaders.com

Understanding SVG Paths: https://www.nan.fyi/svg-paths

CSS animations on demand: https://animista.net

A lightweight JavaScript animation library: https://github.com/juliangarnier/anime

Buttons Generator: https://markodenic.com/tools/buttons-generator

Box-shadow: https://neumorphism.io

Beautiful hand-crafted SVG icons: https://heroicons.com

Drive user's focus across the page: https://driverjs.com

Split an element by words, characters, children and more: https://splitting.js.org

Lightweight fuzzy-search library: https://fusejs.io

Tiny and powerful in-memory JavaScript full-text search engine: https://github.com/lucaong/minisearch

Create full screen pages fast and simple: https://github.com/alvarotrigo/fullPage.js

A collection of free Tailwind CSS components: https://www.hyperui.dev

daisyUI components - Use Tailwind CSS but write fewer class names: https://daisyui.com

Easy visualizer for JavaScript KeyCodes: https://keycode.info

Scroll-driven Animations: https://scroll-driven-animations.style

A library that helps you create floating elements such as tooltips: https://floating-ui.com

Accessible color combinations: https://randoma11y.com

Color palette inspiration site: https://www.happyhues.co

Delightful JavaScript plugins: https://metafizzy.co

The next open source file uploader for web browsers: https://uppy.io

Draggable objects: https://www.redblobgames.com/making-of/draggable

Add motion to your apps with a single line of code: https://auto-animate.formkit.com

PartyKit at ViteConf 2023: https://blog.partykit.io/posts/partykit-at-viteconf

Typing Animation Library. Enter in any string, and watch it type: https://github.com/mattboldt/typed.js

What PWA Can Do Today: https://whatpwacando.today

OCR PDFs and images directly in your browser: https://tools.simonwillison.net/ocr

Comlink makes WebWorkers enjoyable: https://github.com/GoogleChromeLabs/comlink

Web component JS frameworks overview by their syntax and features: https://component-party.dev

Open Source Tailwind components tailored for your AI and GPT: https://github.com/LangbaseInc/langui

Converting any layout you have to drag-to-swap layout: https://github.com/TahaSh/swapy

Drag and drop for any experience on any tech stack: https://github.com/atlassian/pragmatic-drag-and-drop

Leaflet extension for various free tile providers: https://github.com/leaflet-extras/leaflet-providers

Modular data visualization framework: https://github.com/f5/unovis

Image comparison slider to compare images before and after: https://github.com/sneas/img-comparison-slider

CSS Custom Highlight API: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API

Highlight your plaintext via Shiki: https://github.com/KazariEX/plain-shiki

A headless UI library that works for a wide range of JS frameworks: https://github.com/chakra-ui/ark

A growing collection of over 50 input components: https://origin-ui-alpha.vercel.app

Good web design inspiration: https://godly.website

Stack Overflow's Combination Rich Text / Markdown Editor: https://github.com/StackExchange/Stacks-Editor


React ecosystem

The Beginner's Guide to React: https://egghead.io/courses/the-beginner-s-guide-to-react or https://www.youtube.com/watch?v=7_x4AuqHxlg

Epic Web React Fundamentals: https://react-fundamentals.epicweb.dev

Getting Closure on React Hooks by Shawn Wang: https://www.youtube.com/watch?v=KJP1E-Y-xyo

Building a Custom React Renderer by Sophie Alpert: https://www.youtube.com/watch?v=CGpMlWVcHok

All Developer Way Articles about React: https://www.developerway.com

Build your own React: https://pomb.us/build-your-own-react

A collection of React hooks from the ui.dev team: https://usehooks.com

React hook library, ready to use, written in Typescript: https://github.com/juliencrn/usehooks-ts

50 react hooks from scratch: https://github.com/tigerabrodi/50-react-hooks

How styled-components works: https://medium.com/styled-components/how-styled-components-works-618a69970421

Start developing websites like it's 2025: https://react2025.com

Up and Running with Remix: https://egghead.io/courses/up-and-running-with-remix-b82b6bb6

Next vs Remix (FULL STACK FRAMEWORK QUICKSTART): https://www.brenelz.com/posts/next-vs-remix

Learn Next.js Server Side Rendering: https://dev.to/skirianov/learn-nextjs-server-side-rendering-by-building-your-own-implementation-41m8

React from Another Dimension by Dan Abramov at RemixConf: https://www.youtube.com/watch?v=zMf_xeGPn6s

Learn Next.js course by Vercel: https://nextjs.org/learn

React's evolution from Hooks to Concurrent React: https://tigerabrodi.blog/reacts-evolution-from-hooks-to-concurrent-react

Build Your Own React.js in 400 Lines of Code: https://webdeveloper.beehiiv.com/p/build-react-400-lines-code

Zero-dependency and lightweight React implementation: https://github.com/MarufZak/react-simplified

Modern UI components to build your React app: https://dotui.org

Type-safe search params state manager for Next.js: https://nuqs.47ng.com

React and the Vanishing Network: https://vanishing-network.epicreact.dev

UI Library for Design Engineers: https://github.com/magicuidesign/magicui


Vue and Vite ecosystem

Updates, tips & opinions from the maintainers of Vue.js: https://blog.vuejs.org

Projects - Anthony Fu: https://antfu.me/projects

Opinionated Vite + Vue Starter Template: https://github.com/antfu/vitesse

A curated list of awesome things related to Vite.js: https://github.com/vitejs/awesome-vite

Collection of essential Vue Composition Utilities: https://vueuse.org

VitePress - Vite & Vue Powered Static Site Generator: https://vitepress.vuejs.org

Vue Composables putting your components in motion: https://github.com/vueuse/motion

Declarative ThreeJS using Vue Components: https://tresjs.org

Unified plugin system for build tools: https://github.com/unjs/unplugin

On-demand components auto importing for Vue: https://github.com/unplugin/unplugin-vue-components

A lightweight, customizable Vue UI library for mobile web apps: https://vant-ui.github.io

Modular and Accessible UI Components for your Vue Applications (Made for Vue 2.x): https://vue.chakra-ui.com

Vue port of Radix UI Primitives: https://www.radix-vue.com

Vue port of shadcn-ui: https://github.com/radix-vue/shadcn-vue

Vue UI Component Library: https://primevue.org

Integrate Clerk into your Vue application: https://vue-clerk.vercel.app

Drag and drop components that support Vue2 and Vue3: https://alfred-skyblue.github.io/vue-draggable-plus

Vue3 wrapper components for smooth-dnd: https://gilnd.github.io/vue3-smooth-dnd

Vue.js and Nuxt Tips, Tricks and good practice: https://vuejstips.com

A type safe router for vuejs: https://github.com/kitbagjs/router

Build beautiful website using Vue & Nuxt: https://github.com/unovue/inspira-ui, https://github.com/selemondev/spark-ui


Browsers related

Google Chrome upcoming schedule: https://chromiumdash.appspot.com/schedule

New in Chrome: https://developer.chrome.com/tags/new-in-chrome

What's New in DevTools (Articles): https://developer.chrome.com/tags/new-in-devtools

What's New in DevTools (Videos): https://www.youtube.com/playlist?list=PLNYkxOF6rcIBDSojZWBv4QJNoT4GNYzQD

Safari Release Notes: https://developer.apple.com/documentation/safari-release-notes/

Firefox release notes: https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases

New to the web platform (every month): https://web.dev/blog/web-platform-01-2024

Monitor and track the status of all Web Platform features: https://webstatus.dev


Awesome LLMs

OpenAI Cookbook: https://github.com/openai/openai-cookbook

Awesome ChatGPT Prompts: https://prompts.chat

Prompt Engineering Guide: https://github.com/dair-ai/Prompt-Engineering-Guide

An open-source ChatGPT UI: https://github.com/mckaywrigley/chatbot-ui

A universal local knowledge base solution: https://github.com/GanymedeNil/document.ai

Local knowledge based ChatGLM with langchain: https://github.com/imClumsyPanda/langchain-ChatGLM

Share your wildest ChatGPT conversations with one click: https://sharegpt.com

A chat assistant fine-tuned from LLaMA on user-shared conversations: https://vicuna.lmsys.org

Chatbot Arena - Benchmarking LLMs in the Wild: https://chat.lmsys.org

Interact privately with your documents using LLMs: https://github.com/imartinez/privateGPT

Understanding GPT tokenizers: https://simonwillison.net/2023/Jun/8/gpt-tokenizers/

Catching up on the weird world of LLMs: https://simonwillison.net/2023/Aug/3/weird-world-of-llms/

[1hr Talk] Intro to Large Language Models: https://www.youtube.com/watch?v=zjkBMFhNj_g

Vercel AI SDK: https://sdk.vercel.ai/docs

AI chatbot app template built with the Vercel AI SDK: https://github.com/vercel/ai-chatbot

LangChain + Next.js starter template: https://github.com/langchain-ai/langchain-nextjs-template

Fine-tuning GPT with OpenAI, Next.js and Vercel AI SDK: https://vercel.com/guides/fine-tuning-openai-nextjs

How to make a QR code with Stable Diffusion: https://stable-diffusion-art.com/qr-code/

An alternative take on OpenAI Chat Completion API: https://gpt.pomb.us

LlamaIndex.TS offers the core features of LlamaIndex for popular runtimes like Node.js: https://github.com/run-llama/LlamaIndexTS

LlamaIndex Chat is an example chatbot application for LlamaIndexTS: https://github.com/run-llama/chat-llamaindex

Get up and running with large language models locally: https://ollama.com

Fully client-side chat over documents: https://github.com/jacoblee93/fully-local-pdf-chatbot

Real-time image generation with Latent Consistency: https://www.fal.ai/dynamic

Get started with the Gemini API: https://ai.google.dev/gemini-api/docs

Google AI SDK for JavaScript: https://github.com/google/generative-ai-js

Generative UI chatbot using the Vercel AI SDK and Google Gemini: https://github.com/vercel-labs/gemini-chatbot

Hugging Chat Assistant (similar to OpenAI GPTs): https://huggingface.co/chat/assistants

Pi, your personal AI from Inflection: https://pi.ai

Power your apps with real-time speech-to-text APIs: https://deepgram.com

Run Hugging Face Transformers directly in the browser: https://github.com/xenova/transformers.js

Announce the release of Transformers.js v3: https://huggingface.co/blog/transformersjs-v3

A collection of Transformers.js demos: https://github.com/huggingface/transformers.js-examples

A collection of guides and examples for the Gemini API: https://github.com/google-gemini/cookbook

Hands on with the Vercel AI SDK: https://github.com/nicoalbanese/ai-sdk-fundamentals

AI agent stdlib that works with any LLM and AI SDK: https://github.com/transitive-bullshit/agentic

An AI chatbot in Win95 style: https://wingpt.vercel.app

A Webapp that uses RAG to interact with a PDF directly in the browser: https://pdf.nico.dev

High-Performance In-Browser LLM Inference Engine: https://github.com/mlc-ai/web-llm

Starter project for the Vercel AI SDK RAG guide: https://github.com/vercel/ai-sdk-rag-starter

Build AI apps locally that can do document Q&A: https://github.com/ykhli/local-ai-stack

Semantic Image Search with Vercel AI SDK: https://github.com/vercel-labs/semantic-image-search

Anthropic's educational courses: https://github.com/anthropics/courses

Quickly get started with building applications using the Anthropic API: https://github.com/anthropics/anthropic-quickstarts

Find the best cursor rules for your framework and language: https://cursor.directory

Internal Knowledge Base Preview: https://github.com/vercel-labs/ai-sdk-preview-internal-knowledge-base

React Components for AI Chat: https://github.com/Yonom/assistant-ui

Chatbot components based on shadcn/ui: https://github.com/Blazity/shadcn-chatbot-kit

Introducing the Realtime API: https://openai.com/index/introducing-the-realtime-api

Audio input and output for the OpenAI Chat Completion API: https://simonwillison.net/2024/Oct/18/openai-audio

For LLMs to better code with Jina API: https://github.com/jina-ai/meta-prompt


Machine Learning

Gain the skills you need to do independent data science projects: https://www.kaggle.com/learn

Stanford CS229 Machine Learning: https://cs229.stanford.edu

Linear Algebra Review and Reference: https://cs229.stanford.edu/summer2023/cs229-linalg.pdf

Review of Probability Theory: https://cs229.stanford.edu/summer2023/cs229-prob.pdf

CS 229 illustrated Machine Learning cheatsheets: https://stanford.edu/~shervine/teaching/cs-229/

Stanford CS224N - Natural Language Processing with Deep Learning: https://web.stanford.edu/class/cs224n/index.html

Princeton Natural Language Processing: https://princeton-nlp.github.io/cos484

Understanding Large Language Models: https://www.cs.princeton.edu/courses/archive/fall22/cos597G

Big Data Machine Learning Algorithms: https://yishuai.github.io/bigalgo

Transformers from Scratch: https://e2eml.school/transformers.html

ML for front-end developers: https://docs.google.com/presentation/d/1f--c4Ui1VcmVgW4Gj3v-e_17GYfxRlbUSMnyk4sOVjg

Machine Learning for Web Developers: https://www.youtube.com/playlist?list=PLOU2XLYxmsILr3HQpqjLAUkIPa5EaZiui

Machine Learning 101 from Jason Mayes: https://docs.google.com/presentation/d/1kSuQyW5DTnkVaZEjGYCkfOxvzCqGEFzWBy4e9Uedd9k

Teachable Machine: https://teachablemachine.withgoogle.com