personal favorites
Recommended
- Ruan Yifeng's web log
- The road to self-study programming by Program Sheep
- Front-end Knowledge Graph + B Station Resource Integration by Technology Fat
- Developer Arsenal
- Tool Encyclopedia
- samanthaming summarizes the front-end knowledge points and creates exquisite little cards for each knowledge point.
Documentation
- MDN | MDN-JS standard built-in objects Web technology authoritative document
- DevDocs Web development technical documentation, a very good learning manual!
- Modern JavaScript Tutorial JS tutorial based on the latest standards
- ES5 tutorial Ruan Yifeng’s JS tutorial
- ES6 tutorial Ruan Yifeng’s ES6 tutorial
- Bash script tutorial Written by Ruan Yifeng
- ECMA ECMA official website
- Rookie Tutorial Basic tutorial covering multiple languages
- Tencent Cloud Developer Manual
community
- Github
- Nuggets A community that helps developers grow
- Jianshu A creative community with many channels
- Segmentfault A community for solving technical problems
- stack overflow Same as above, external network
- InfoQ Promote the dissemination of knowledge and innovation in software development and related fields
- V2EX A community for creative workers
- Fish Pond Hot List Paddling website, collects many websites, popular articles of the day
- Full code resource library is very comprehensive and powerful, independent developers/design essentials/high-quality tools/tool resources...
- Electronic Duck Community Remote work
- Dengchain Community
- smartdeer
- dapp learning
- TinTinLand
- Abetter Web3
- tanstack Headless, type-safe, & powerful utilities for Web Applications, Routing, State Management, Data Visualization, Datagrids/Tables, and more. https://tanstack.com/
Skills
- Google Trends View the popularity trend of a certain technology or keyword, which can be used to analyze the development prospects of a certain technology, or to compare the popularity of two technologies.
- Baidu Index Same as above, but Baidu’s data is only domestic.
Excellent article
- Some of my principles for system architecture The author’s methodology summary of system architecture
- Flexible use of CSS development skills
- Defensive CSS
Github
- Repobeats Generate dynamic data charts of the warehouse
- github short domain name service
- shields badge icon
- followers global ranking
- star-history Shows a project Stars growth curve
Comment system
- giscus Comment system powered by GitHub Discussions
Front-end widgets
- Can I use Check the compatibility of properties and methods
- 30 seconds of code collects many useful code snippets
Code editing
- codepen Online code editing and demonstration
- codesandbox Online IDE with embedded VSCode
Emoji
- emoji expression
- emoji cheat sheet
- Match emoji based on text
- gitmoji Express git operation content through emoji
How to quickly open emoji expressions in any input box:
Under Windows system, press Win + .
Under Mac system, press Control + Command + Space
Picture tools
- tinypng image compression Compressing png is very useful
- Micro Image Browser-side image compression, images will not be uploaded to the server
- Squoosh A free online image compression tool produced by Google (jpg, png, etc., the compression effect is slightly better than tinypng)
- waifu2x Enlarge images through convolutional network
- vectormagic Convert vector graphics
- vectorizer Real png to svg artifact
- Online AI image processing Black and white restoration, lossless enlargement, animation, pencil drawing, etc.
- remove AI cutout (background cutout)
- magic eraser AI cutout (foreground cutout)
- backgroundremover Another cutout
SVG
Audio and video tools
- Swift Audio Converter Convert various audio formats online
- Trim Audio Trim or cut any audio file online
mind map
- processon online drawing flow charts, mind maps, prototype diagrams, etc.
- Baidu Mind Map Mind Map
- plectica Draw knowledge graph
CSS
- CSS Tricks Collection and demonstration of CSS techniques
- CSS Generator
- CSS Gradient Generator
- CSS3-Box Shadow (shadow)
- Bezier Curve Generator
- Pattern Background Generator
- Pattern background-pattern.css
- 3D font
- css-tricks css tips article
- You-need-to-know-css Various DEMOs of CSS, very comprehensive
- animista CSS animation visualization tool, just copy the code and use it
- navnav Various cool CSS animation components
CDN acceleration/code deployment
- jsDelivr An excellent foreign public CDN service provider
- unpkg cdn service
- cloudflare
- vercel Easy-to-use website hosting service
regular
- Regular Visualization
- iHateRegex Regular search, the details are well done
- Regex Mini Book A small manual for learning regular expressions
Others
- Linux Command Manual
- carbon code picture generator generates good-looking code pictures
design
- mastergo
- Creator Navigation
- Designer website navigation
- remove AI cutout, the cutout algorithm is very powerful
- Manypixels illustration
- Undraw illustrations
- storytale Illustrations, rich in types, including 3D illustrations
- uimovement You can find a lot of inspiration for animation interaction from this website
- awwwards is a website that awards awards to beautifully designed websites and creative websites.
- dribbble You can often find many creative and beautiful gifs or pictures on it
- Bēhance dribbble is the designer’s Weibo, Bēhance is the designer’s blog
- Logojoy A website that uses AI to make logos, and the quality of the logos it makes is pretty good.
- brandmark Another online logo creation website
- instant Another logo production website
- namecheapAnother logo making website
- logo-maker Another logo making website. This one is simpler. Just select a template and fine-tune it.
- coolors A website that helps you with color matching online. You can find a lot of color matching inspiration.
- colorhunt Another color matching website
- uigradients Gradient color website
- designcap Online poster design
- Flat UI color table Flat UI color table
- 0to255 Color gradient
- Ikonate provides free icons icons
- remixicon Another free icon icons
- feather free icons
- nord Nordic frigid theme color matching
- Unsplash provides free high-definition pictures
- Pexels provides free high-definition pictures
- colorkitty Extract color colors from your images
- design.youzan Youzan design principles
- iconfont Alibaba vector icon library
- undraw Free vector illustrations
- icomoon vector icon library
- cssicon All icons are drawn using pure CSS. Disadvantages: Not enough icons.
- CSS triangle generator helps you quickly make triangles with css
- clippy helps you use css clip-path to create graphics of various shapes online
- Lorem Picsum provides free placeholder images
- Canva can draw Generate illustrations, covers, posters, avatars, etc.
- Page 404 Page 404 material
- collectui Design drawings classified by functional components
- smartmockups Product template generation tool
Gallery
- uigradients Gradient color generation tool
- freepik banner gallery
- Looking for Elements Download ten psds a day for free (no need to cut out elements)
- Get the design done You can cut out pictures
- vectorizer Real png to svg artifact
- Zcool Display of outstanding domestic design works
- Petals
- Huke ps learning tutorial
- beTheme
- UI China
- wallhaven wallpaper website-
3D
- sketchfab 3D model
interaction
Microinteraction has collected many good microinteraction examples on the market and is worth learning.
Little Big Details Same as above, a foreign micro-interaction collection website
cruip Various page designs for login pages, you can download templates for free
Comixify A Polish team has made a very interesting tool that can automatically convert videos into comics. The picture above is the demo they provided, and the effect is great.
taiko-web Taiko Master web version I can only say very 6
interesting
- Computer Spoof has collected some small spoof web pages, such as XP system blue screen, hacker interface, etc.
- neocities hosts many interesting websites
- Funny website collector has collected many interesting websites
- FC Online Simulator (Xiaobawang Game Console) Childhood Memories
- Let me help you with Baidu OK Click me to test it -
- International version Same
帮我百度一下- Click me to test it - - URL address to play Emojis animation Play emojis in the address bar
- Can't Unsee It is strongly recommended that students in front-end, client, and UI development play it and check their sensitivity to design drafts.
- ggtalk A technical blog that I have been listening to
- awesome-comment collects many interesting code comments
- text-img converts images into ascii for writing comments
- ascii video Use ascii encoding to generate video animations
- weird-fonts Convert ordinary letters into special unicode
- snake Play with Snake in the address bar
- zero-width-lib uses zero-width characters to achieve invisible watermarks, encrypted information sharing, and escape word matching. It is very creative.
- abbreviations Check out a website about what the abbreviations mean
- magi AI search artifact, super cool
- Online naming Solve the problem of difficult naming, generate a lot of names
- Pixel Art GIF
- Cat Generator
generator
Cartoon avatar generator Upload a real person avatar to generate a cartoon avatar
artbreeder Generate real-life images from animation pictures
Sound Generator Generates sounds such as rain, cafe, waves, trains, etc., and can synthesize several sounds
Acceptance Voice Generator Alipay received 100 million yuan
metaverse
Several websites that conform to the characteristics of the Metaverse allow users to own virtual land and build their own worlds on it:
Tutorial
- npx teaches you how to use npx reasonably
- hacksplaining Network security learning website
- mobile-web-best-practice Mobile web best practice
Products
Product Hunt Good product recommendations
Product Daniel There are many complete product prototypes that we can learn from.
Modao Quickly produce UI prototypes
Practical
- webden Online web editor, light and fast
- browser-update Browser version update prompt plug-in
- typeform A foreign online questionnaire website
- VideoFk VideoFk video online analysis and download
- All History Historical content aggregation website
- UzerMe Cloud office tools
- SoBooks Powerful e-book resource website
- Draft Design Key-type design tool + intelligent cutout
- Dalipan Baidu network disk search
- ENFI Downloader Unlimited speed downloader
- Laihua Video Make short videos like PPT
- Arkie Poster Making Tool
- Excellent PPT
- Big PPT
- HD free pictures
- HD free pictures 2
- shapedivider Generate wavy dividing lines
- Notion Knowledge base, quick notes, TaskList, diary, reading list, various types, everything you need
Talk
- peerigon-talks has collected many interesting talks
algorithm
- leetcode Use js to brush leetcode
nginx
life
- Ventusky Wind, rain and temperature map