Personal Bookmarks

Recommended

• panjiachen (opens new window) by panjiachen
• Programming Navigation (opens new window) by Yupi
• Self-Taught Programming Path (opens new window) by CodeSheep
• Frontend Knowledge Map + Bilibili Resources (opens new window) by Jishupang
• Dasheng's Self-Learning Site (opens new window) by Dasheng
• Developer Arsenal (opens new window)
• Tool Collection (opens new window)

Follow the WeChat account [Interesting Research Lab] and reply frontend resources to get frontend learning materials (opens new window)

Documentation

• MDN (opens new window) | MDN - JS Standard Built-in Objects (opens new window) Authoritative web technology documentation
• DevDocs (opens new window) Web development tech docs, an excellent learning reference!
• Modern JavaScript Tutorial (opens new window) JS tutorial based on the latest standards
• ES5 Tutorial (opens new window) Ruan Yifeng's JS tutorial
• ES6 Tutorial (opens new window) Ruan Yifeng's ES6 tutorial
• Bash Scripting Tutorial (opens new window) by Ruan Yifeng
• ECMA (opens new window) Official ECMA website
• Runoob (opens new window) Beginner tutorials covering multiple languages
• Tencent Cloud Developer Manual (opens new window)

Community

• Github (opens new window) The world's largest developer community
• Juejin (opens new window) A community to help developers grow
• Jianshu (opens new window) A content creation community with many channels
• SegmentFault (opens new window) A community for solving technical problems
• Stack Overflow (opens new window) Same purpose, international
• InfoQ (opens new window) Promoting the spread of knowledge and innovation in software development
• V2EX (opens new window) A community for creative workers
• Mo.fish (opens new window) Hot articles aggregator from many websites
• Maliquankai (opens new window) Comprehensive resources for indie developers, design, tools, and more

Community Interaction

• Gitter (opens new window)
• Tucao (opens new window)

Tips & Tricks

• Google Trends (opens new window) Check the popularity trend of a technology or keyword; useful for analyzing a technology's future prospects or comparing two technologies.
• Baidu Index (opens new window) Same as above, but Baidu data is limited to China.

Blogs

• Ruan Yifeng's Blog (opens new window)
• samanthaming (opens new window) Summaries of frontend tips with beautifully designed cards for each point.

E-Books

• Higher Education Press Books (opens new window) Books from the Higher Education Press, covering multiple disciplines.
• SoBooks (opens new window) Free e-book resources
• Shidian Guji (opens new window) Digital platform for classical texts

Great Articles

• My Principles for System Architecture (opens new window) The author's methodology for system architecture
• Creative Use of CSS Development Techniques (opens new window)
• Defensive CSS (opens new window)

Videos

• Bilibili (opens new window) Tons of free educational videos
• imooc (opens new window) Hands-on video tutorials
• Miaov (opens new window) Systematic frontend beginner video tutorials
• MOOC China (opens new window) Free courses in CS, foreign languages, psychology, and more
• Lifelong Learning Platform (opens new window) Free courses covering life, hobbies, career skills, and more
• egghead (opens new window) Quality short video tutorials, international

Github

• Repobeats (opens new window) Generate dynamic analytics charts for repositories

• GitHub Short URL Service (opens new window)
• Shields (opens new window) Badge icons
• Followers Global Ranking (opens new window)
• star-history (opens new window) Display a project's Star growth curve

Comment Systems

• Giscus (opens new window) A comment system powered by GitHub Discussions (opens new window)

Frontend Tools

• Can I Use (opens new window) Check browser compatibility for properties and methods
• 30 Seconds of Code (opens new window) A collection of useful code snippets

Code Editors

• CodePen (opens new window) Online code editing and demos
• CodeSandbox (opens new window) An online IDE with embedded VSCode

Emoji

• Emojipedia (opens new window)
• Emoji Cheat Sheet (opens new window)
• Text-to-Emoji Matcher (opens new window)
• gitmoji (opens new window) Express git operations through emoji

Quick emoji access in any input field:
Windows: Win + .
Mac: Control + Command + Space

Image Tools

• TinyPNG (opens new window) Great for compressing PNG images
• Wetu (opens new window) Browser-based image compression without server upload
• Squoosh (opens new window) Google's free online image compressor (jpg, png, etc.; slightly better than TinyPNG)
• waifu2x (opens new window) Upscale images using convolutional neural networks
• VectorMagic (opens new window) Convert to vector graphics
• Vectorizer (opens new window) A true PNG-to-SVG converter
• AI Image Processing (opens new window) B&W restoration, lossless upscaling, anime-style conversion, pencil sketch, etc.
• Remove.bg (opens new window) AI background removal
• Magic Eraser (opens new window) AI foreground extraction
• BackgroundRemover (opens new window) Another background removal tool

SVG

• SVG Editor - E2.Cool (opens new window)
• SVG Editor - iPaiban (opens new window)

Audio & Video Tools

• Xunjie Video Converter (opens new window) Online video format conversion
• Xunjie Audio Converter (opens new window) Online audio format conversion
• Audio Trimmer (opens new window) Online audio trimming and cutting

Mind Maps

• ProcessOn (opens new window) Flowcharts, mind maps, prototypes, and more
• Baidu Brain Map (opens new window) Mind maps
• Plectica Knowledge graph drawing

CSS

• Various CSS Generators and JS Snippets (opens new window)

• CSS Tricks (opens new window) CSS tricks collection and demos
• CSS Generator (opens new window)
• CSS Gradient Generator (opens new window)
• CSS3 Box Shadow (opens new window)
• Cubic Bezier Generator (opens new window)
• Pattern Background Generator (opens new window)
• Pattern.css (opens new window)
• 3D Fonts (opens new window)
• CSS-Tricks (opens new window) CSS tips and articles
• You Need to Know CSS (opens new window) Comprehensive CSS demos
• Animista (opens new window) CSS animation visual tool — copy and use
• NavNav (opens new window) Cool CSS animation components

CDN

• jsDelivr (opens new window) Excellent public CDN service provider
• unpkg (opens new window) CDN service

Website Hosting

• Vercel (opens new window) Great website hosting service

Regex

• Regex Visualizer (opens new window)
• iHateRegex (opens new window) Regex search with excellent details
• Regex Mini Book (opens new window) A small handbook for learning regex

Other

• Linux Command Manual (opens new window)
• Carbon (opens new window) Generate beautiful code images

Design

• Creator Navigation (opens new window)
• Designer URL Navigation (opens new window)
• Remove.bg (opens new window) AI background removal with excellent algorithms
• Manypixels (opens new window) Illustrations
• Undraw (opens new window) Illustrations
• Storytale (opens new window) Illustrations with rich variety, including 3D
• UI Movement (opens new window) Great animation interaction inspiration
• Awwwards (opens new window) Awards for beautifully designed and creative websites
• Dribbble (opens new window) Great creative GIFs and images
• Behance (opens new window) If Dribbble is designers' Twitter, Behance is designers' blog
• LogoJoy (opens new window) AI-powered logo maker with decent quality
• BrandMark (opens new window) Another online logo maker
• Instant Logo Design (opens new window) Yet another logo maker
• Namecheap (opens new window) Another logo maker
• Logo Maker (opens new window) Simpler logo maker — pick a template and adjust
• Coolors (opens new window) Online color palette tool
• ColorHunt (opens new window) Another color palette site
• UIGradients (opens new window) Gradient color website
• DesignCap (opens new window) Online poster design
• Flat UI Colors (opens new window) Flat UI color palette
• 0to255 (opens new window) Color gradients
• Ikonate (opens new window) Free icon library
• Remix Icon (opens new window) Another free icon library
• Feather (opens new window) Free icons
• Nord (opens new window) Nordic minimalist theme colors
• Unsplash (opens new window) Free high-quality photos
• Pexels (opens new window) Free high-quality photos
• ColorKitty (opens new window) Extract color palettes from images
• Youzan Design (opens new window) Youzan design principles
• Iconfont (opens new window) Alibaba vector icon library
• Undraw (opens new window) Free vector illustrations
• IcoMoon (opens new window) Vector icon library
• CSS Icon (opens new window) Pure CSS icons — limited selection but creative
• CSS Triangle Generator (opens new window) Quickly create CSS triangles
• Clippy (opens new window) Online CSS clip-path shape maker
• Lorem Picsum (opens new window) Free placeholder images
• Canva (opens new window) Generate illustrations, covers, posters, avatars, and more
• 404 Pages (opens new window) 404 page resources
• Collect UI (opens new window) Design inspiration organized by component type
• Smartmockups (opens new window) Product mockup generation tool

Image Libraries

• UIGradients (opens new window) Gradient generator
• Freepik (opens new window) Banner image library
• 51yuansu (opens new window) Free PSD downloads (cutout elements)
• Gaoding (opens new window) Image cutout tool
• Vectorizer (opens new window) True PNG-to-SVG converter
• Zcool (opens new window) Excellent Chinese design showcase
• Huaban (opens new window)
• Huke88 (opens new window) Photoshop learning tutorials
• beTheme (opens new window)
• UI China (opens new window)
• Wallhaven (opens new window) Wallpaper website

3D

• Sketchfab (opens new window) 3D models

Interaction

• Micro Interactions (opens new window) Collection of great micro-interaction examples

• Little Big Details (opens new window) International micro-interaction collection

• Cruip (opens new window) Various login page designs with free downloadable templates

• Comixify (opens new window) A Polish team created a tool that automatically converts video to comics

• Taiko Web (opens new window) Taiko no Tatsujin web version

Fun

• Computer Pranks (opens new window) Collection of prank web pages like XP blue screen, hacker interface, etc.
• Neocities (opens new window) Hosts many fun websites
• Interesting Website Collector (opens new window) Collection of fun websites
• FC Online Emulator (opens new window) Childhood nostalgia
• Let Me Baidu That For You (opens new window) — Try it (opens new window)
• LMGTFY (opens new window) International version — Try it (opens new window)
• URL Emoji Animation (opens new window) Play emoji animations in the address bar
• Can't Unsee (opens new window) Strongly recommended for frontend, client, and UI developers — test your design sensitivity
• ggtalk (opens new window) A tech podcast
• Awesome Comments (opens new window) Collection of funny code comments
• Text to Image (opens new window) Convert images to ASCII art for comments
• ASCII Video (opens new window) Generate video animations using ASCII encoding
• Weird Fonts (opens new window) Convert regular letters to special Unicode characters
• Snake (opens new window) Play Snake in the address bar
• Zero Width Lib (opens new window) Use zero-width characters for invisible watermarks, encrypted sharing, and evading word matching
• Abbreviations (opens new window) Look up what abbreviations mean
• Magi (opens new window) AI-powered search engine
• Online Name Generator (opens new window) Solve the naming problem with tons of generated names
• Pixel Art GIF (opens new window)
• Cat Generator (opens new window)

Generators

• Cartoon Avatar Generator (opens new window) Upload a real photo to generate a cartoon avatar

• ArtBreeder (opens new window) Generate realistic images from anime-style images

• Ambient Sound Generator (opens new window) Generate rain, coffee shop, ocean waves, train sounds — mix and match

• Nokia SMS Image Generator (opens new window)

• Payment Voice Generator (opens new window) "Alipay received 100 million yuan"

Metaverse

Websites matching metaverse characteristics where users can own virtual land and build their own worlds:

• The Sandbox (opens new window)
• Somnium Space (opens new window)
• Decentraland (opens new window)

Tutorials

• npx (opens new window) Learn how to use npx properly
• Hacksplaining (opens new window) Cybersecurity learning
• Mobile Web Best Practice (opens new window) Mobile web best practices

Products

• Product Hunt (opens new window) Great product recommendations

• Product Daniu (opens new window) Many complete product prototypes for reference

• Modao (opens new window) Quick UI prototyping

Practical

• WebDen (opens new window) Lightweight online web editor
• Browser Update (opens new window) Browser version update notification plugin
• Typeform (opens new window) International online survey platform
• VideoFk (opens new window) Online video parsing and download
• All History (opens new window) Historical content aggregator
• UzerMe (opens new window) Cloud office tools
• SoBooks (opens new window) Powerful e-book resources
• Gaoding Design (opens new window) One-click design tool + smart background removal
• Dalipan (opens new window) Baidu cloud drive search
• ENFI Downloader (opens new window) Unlimited speed downloader
• Laihua Video (opens new window) Make short videos like making PPTs
• Arkie Poster Maker (opens new window)
• Youppin PPT (opens new window)
• Biger PPT (opens new window)
• Free HD Photos (opens new window)
• Free HD Photos 2 (opens new window)
• Shape Divider (opens new window) Generate wave divider lines
• Notion (opens new window) Knowledge base, quick notes, task lists, journals, reading lists — everything you need

Talks

• Peerigon Talks (opens new window) Collection of interesting tech talks

Algorithms

• LeetCode Solutions (opens new window) Solving LeetCode problems with JS

Nginx

• Nginx Visual Configuration (opens new window)

Life

• Ventusky (opens new window) Wind, rain, and temperature maps