Hello, I’m your cat brother, or the super cat who doesn’t like fish or cats
FrontEndGitHub has been up and running for more than half a year now.
Focus on mining good front-end open source projects, smooth out your front-end information asymmetry, covering JavaScript, Vue, React, Node, miniprograms, Flutter, Deno, HTML, CSS, etc.
Although the frequency of the updated article is not high, the average one week more, but still has been updated, and the updated article content is still very quality.
FrontEndGitHub also got 2K stars! Thank you for your affirmation and encouragement.
In the past half a year, Cat brother has recommended more than 50 topics, 450 super good open source projects, today recommended articles and projects to do a collection, so that you can quickly look up the project you want.
How to find a good open source project? Check out this article: GitHub Mining Tips – How to Find a Good Open source Project
Soft skills
- Since the mastery of Google and Baidu’s 16 advanced search skills, I no longer can not solve the bug
- With all due respect, you probably don’t even know how to use GitHub search
- Wonderful to be continued…
| project | address |
|---|---|
| GitHub documentation: Using, searching, and managing open source projects | docs.github.com/cn |
Front trend list
- 20 milestone top open source projects that have influenced generations of front end people!
- 1534 k Star! Top 10 front end Top Open source projects!
- Jump 110K Star! Top 10 front-end learning resource projects with the largest annual growth!
- Top 10 most popular open source projects on the front end! 174K Star jump!
- Front End Monthly Trend list: The top 20 front end open Source projects of May – so many more good open source projects! – 2105.
- Front End Monthly Trend list: Top 20 front end Open Source projects for April – so many more good open source projects! – 2104.
- Web Trends list: Last week’s top 10 Most interesting and hottest Web projects – 210625
- Web Trends list: Last week’s Top 10 Hottest Web Projects – 210410
- Front End Trend list: last week’s top 10 hottest front end projects – 210327
- Wonderful to be continued…
Vue3
- Vue3 tutorial summary, source code explanation project, UI component library support, quality practical projects
- Wonderful to be continued…
| project | address |
|---|---|
| Vue3 Chinese documents | vue3js.cn/docs/zh/ |
| Vue3 design concept | Vue3js. Cn/vue – composi… |
| Vue3 related project aggregation site | vue3js.cn/ |
| Vue3 source | vue3js.cn/start/ |
| Ant-design-vue | Antdv.com/docs/vue/in… |
| Vant 3.0 | vant-contrib.gitee.io/vant/v3/ |
| Element-plus | element-plus.org/#/zh-CN |
| element 3 | Github.com/hug-sun/ele… |
| vue-vben-admin | Github.com/anncwb/vue-… |
| vue-admin-beautiful | Github.com/chuzhixin/v… |
| vue-cli | Github.com/Wscats/vue-… |
| movie-trailer | Github.com/lhz960904/m… |
| newbee-mall-vue3-app | Github.com/newbee-ltd/… |
| vue3-jd-h5 | Github.com/GitHubGanKa… |
Vue Source decryption
- Recommend 7 Vue2, Vue3 source decrypting analysis of open source projects 👍
- Wonderful to be continued…
| project | address |
|---|---|
| Vue-analysis: source analysis of vue.js | Github.com/ustbhuangyi… |
| Vue-design: Analysis at a line-by-line level | Hcysun. Me/vue – design /… |
| Vue-family-mindmap: a mindmap that summarizes the source code and architecture of vue, vue-router, and Vuex | Github.com/biaochenxuy… |
| LearnVue: vue.js source code analysis | Github.com/answershuto… |
| Vue: Vue source code line by line comment analysis | Github.com/qq281113270… |
| Vue2.0-source: Vue source analysis | Github.com/liutao/vue2… |
| Vue3 source code: Vue3 source series | vue3js.cn/start/ |
React source decryption
- Recommend a React technology debunking project, top down React source analysis
- Wonderful to be continued…
| project | address |
|---|---|
| Just – React: Rigorous, understandable react source analysis tutorial | Github.com/BetaSu/just… |
The interview panel
- Build your own raise trove with these 10 GitHub hot front-end interview projects!
- Wonderful to be continued…
| project | address |
|---|---|
| There are a lot of front-end-developer-questions | H5bp.org/Front-end-D… |
| Javascript-questions: Lists of advanced javascript questions | Github.com/lydiahallie… |
| Daily-question: one daily-factory noodle is pushed every day | Github.com/shfshanyue/… |
| Cs-interview-knowledge-map: Interview questions for leading manufacturers | Github.com/InterviewMa… |
| Daily-interview-question: Do one Daily Interview Question | Github.com/Advanced-Fr… |
| Fe-interview: A review project for a front end interview | Lucifer. Ren/fe – intervie… |
| Fe-interview: Front end interview topic | Github.com/biaochenxuy… |
| Fe-interview: Front end knowledge question bank | Github.com/haizlin/fe-… |
| -Rufus: Nod-interview | Github.com/ElemeFE/nod… |
| -Howard: Well, it’s a front-end-interview-notebook | Github.com/CavsZhouyou… |
| Fe-interview: A prerequisite for the front end Interview | Github.com/lgwebdream/… |
| Web-interview: Vue Interview question bank | Github.com/febobo/web-… |
Resume project
- The 10 most popular Programmer resume projects on GitHub
- Wonderful to be continued…
| project | address |
|---|---|
| ResumeSample: Programmer resume template series | Github.com/geekcompany… |
| Markdown-resume: A template for writing a Resume using the Markdown grammar. It is very short and generic | Github.com/CyC2018/Mar… |
| Example sentences, examples of awesome-resume for a programmer | Github.com/resumejob/a… |
| DeerResume: A handy MarkDown online resume tool that allows you to preview, edit, set an access password, and generate a PDF | Github.com/geekcompany… |
| Markdown-resume: An online resume layout tool that supports four types of templates, customization, and export | Github.com/mdnice/mark… |
| Best-resume-ever: A quick tool for generating great resumes based on Vue and LESS | Github.com/salomonelli… |
| Awesome -resume-for- Chinese: Resume templates for Chinese | Github.com/dyweb/aweso… |
| Resume: An elegant, simple resume | Github.com/gwuhaolin/r… |
| Biaochenxuying: Very free custom front-end programmer template | Github.com/biaochenxuy… |
| Github – readME-stats: Get dynamically generated Github stats in your ReadME | Github.com/anuraghazra… |
JavaScript
- Find inspiration to write JavaScript in 12 GitHub hot JavaScript projects!
- Wonderful to be continued…
| project | address |
|---|---|
| 30-seconds of code: short snippets of code that are often used and very classic | Github.com/30-seconds/… |
| 33-js-concepts: 33 concepts that JavaScript developers should understand | Github.com/leonardomso… |
| Javascript-questions: Lists of advanced javascript questions | Github.com/lydiahallie… |
| JavaScript 30: Complete 30 projects in 30 days using native JavaScript | Github.com/wesbos/Java… |
| Codewars: Similar to LeetCode, it’s a platform where you work with others to complete real code challenges to improve your skills | www.codewars.com/ |
| ES6: An open source JavaScript language tutorial that fully introduces the new syntactic features introduced in ECMAScript 6 | es6.ruanyifeng.com/ |
| JavaScript Tutorial: A comprehensive introduction to the core JavaScript syntax, covering all aspects of the ES5 and DOM specifications | wangdoc.com/javascript/ |
| Modern JavaScript tutorials: Based on the latest JavaScript standards. From basic to advanced knowledge of JavaScript | zh.javascript.info/ |
| MDN: Provides information about Open Web technologies, including HTML, CSS, and apis for Web sites and progressive Web applications | developer.mozilla.org/zh-CN/ |
| Clean -code-javascript: excellent JS code specification | Github.com/ryanmcdermo… |
| Introduction to TypeScript: A step-by-step guide to understanding TypeScript from the JavaScript programmer’s perspective | ts.xcatliu.com |
| W3school: Web technology tutorial platform that front-end must know | www.w3school.com.cn/js/index.as… |
| Three.js: JavaScript editing 3D models, all sorts of cool effects and Documentation are worth learning aboutthree.js | three.js] (threejs.org/) |
Flutter
- Recommend 4 blockbuster open source projects based on Flutter
- Wonderful to be continued…
| Web site | instructions |
|---|---|
| dy_flutter | Bettas APP |
| flutter_tiktok | Pure imitation trill |
| flutter-osc | Open source Chinese client |
| FlutterDouBan | Douban client |
TypeScript
- It’s time to give yourself a raise in 2021!
- Wonderful to be continued…
| Web site | instructions |
|---|---|
| TypeScript | TypeScript’s official website, TS extends JavaScript by adding type support |
| typescript-tutorial | Introduction to TypeScript: a step-by-step guide to understanding TypeScript |
| TypeScript | TypeScript user manual |
| typescript-book-chinese | Learn more about TypeScript |
| clean-code-typescript | Concise code concepts that apply to TypeScript |
| Introduction to TypeScript | Get started with TypeScript |
| typescript-tutorial | TypeScript Tutorial (2 hours) |
Front-end mandatory online tools
- White whoring 11 super hot front-end necessary online tools, finally have time to go to work to touch fish
- Recommend 12 fairy level tools and websites for learning front-end
- Wonderful to be continued…
| project | address |
|---|---|
| LightHouse: An open source automation tool for improving the quality of web applications | Github.com/GoogleChrom… |
| Can I Use: query CSS, Js in the popular browser clock features and compatibility sites | caniuse.com/ |
| Ios Font: Supports ios font query and ios font query | iosfonts.com/ |
| Web security color: Ensure that users see pages with the same color. Use 216 web security colors as much as possible | www.bootcss.com/p/websafeco… |
| TinyPNG: PNG/JPG image compression tool, smart PNG and JPEG image compression | tinypng.com/ |
| Two-dimensional code generator: straw two-dimensional code generator | cli.im/ |
| Shape Divider: A tool to customize the SVG of web site partitions of various shapes | www.shapedivider.app/ |
| Json format: Online PARSING of JSON sites | json.cn/ |
| Sojson: A collection of front-end WEB tools | www.sojson.com/ |
| Webmaster tools: essential tools for webmaster | tool.chinaz.com/ |
| Codelf: Intelligent recommendation for naming variables | unbug.github.io/codelf/ |
| Evernote: Web front-end developers provide quality Chinese documentation | www.docschina.org |
| Regexr: matches the regular expression | regexr.com/ |
| Any-rule: regular expression library, very complete, easy to use | Github.com/any86/any-r… |
| Bootcdn: domestic CDN library with high speed | www.bootcdn.cn 或 cdn.baomitu.com |
| Jsdelivr: Foreign CDN library, support github, NPM, WordPress | www.jsdelivr.com |
| Gitignore: Depending on the selection, the.gitignore file is generated | www.gitignore.io/ |
| Codesandbox: Edit code online | codesandbox.io/ |
| Typora: A practical Markdown writing tool, what you see is what you get | www.typora.io |
| Mdnice: Make Markdown grammar more beautiful, writing tool (highly recommended) | mdnice.com |
| Toptal: Multiple images are combined into Sprite images and the corresponding CSS is generated | www.toptal.com/developers/… |
| Tool: a collection of tools, including timestamp conversion, base conversion, etc | tool.lu/ |
The inner workings of the computer
- Recommend 7 Github on nearly 200K Star computer learning resources, practice good front-end internal skills of the secret book!
- B station collection 12.5w+! GitHub 标 star This course saved my weak computer foundation
- Wonderful to be continued…
| project | address |
|---|---|
| Crash-course -Computer-Science-Chinese | Github.com/1c7/Crash-C… |
| Computer-science: The Road to free Self-study education in Computer Science! | Github.com/ossu/comput… |
| Cs-notes: technical interview basics, Leetcode, computer operating system, computer network, system design, Java, Python, C++ | Github.com/CyC2018/CS-… |
| Rekcarc-tsc-uht: Curriculum guide for The Department of Computer Science, Tsinghua University | Github.com/PKUanonym/R… |
| Zju-icicles: Zhejiang University Course Strategy sharing program | Github.com/QSCTech/zju… |
| Teachyourselfcs-cn: You can get a world-class education just by yourself | Github.com/keithnull/T… |
| Cs-xmind-note: Computer Science (408) Mind mapping and Notes | Github.com/SSHeRun/CS-… |
| Awesome – Books: 160+ This open source technology elite ebook, including front end, back end, data structures and algorithms, computer fundamentals, design patterns, databases and other books | Github.com/biaochenxuy… |
Online code to pictures
| project | address |
|---|---|
| Carbon: Online code-to-picture tool | carbon.now.sh/ |
| Glorious. Codes: an online code-to-picture tool | glorious.codes/demo |
| Codezen: Online code-to-picture tool | codezen.rishimohan.me/ |
| Codeimg: Online code-to-image tool | codeimg.io/ |
Management background admin
- The 10 most popular and beautiful admin background templates on GitHub have been selected for the admin background project
- Wonderful to be continued…
| project | address |
|---|---|
| Vue-element-admin: Back-end front-end solution based on vUE and Element-UI implementations | Github.com/PanJiaChen/… |
| Iview-admin: based on vue. js, with iView UI component library formed a set of background integration solution | Github.com/iview/iview… |
| Vue-admin-template: A minimalist vue admin management back end | Github.com/PanJiaChen/… |
| Ant-design-pro: Ant Design Pro is a complete set of enterprise-level mid-backend front-end/design solutions based on Ant Design and UMI packaging | Github.com/ant-design/… |
| Ngx-admin: Customizable management dashboard module based on Angular 10+ with six amazing visual themes | Github.com/akveo/ngx-a… |
| Vue-admin-beautiful: VUE + Element-UI based on the excellent backend front-end development management framework | Github.com/chuzhixin/v… |
| Vuestic-admin: Free management template with wonderful vue.js, including more than 38 customized user interface components | Github.com/epicmaxco/v… |
| Antd-admin: a set of excellent backend front-end solution | Github.com/zuiidea/ant… |
| Eladmin: SpringBoot, Jpa, Security, Redis, Vue and other front-end cutting-edge technology development | Github.com/elunez/elad… |
| AdminLTE: is a fully responsive administration template. Based on Bootstrap 4.5 framework and JS/jQuery plug-in | Github.com/almasaeed20… |
Fill the space with PPT
- GitHub star 54K + 2K! This is the correct posture for a programmer to write a full powerpoint!
- Wonderful to be continued…
| project | address |
|---|---|
| Reveal-md: Open source project that uses Markdown for powerpoint presentations | Github.com/webpro/reve… |
| Reveal. Js: Write static text using HTML and Markdown to create a fully functional and beautiful PPT | Github.com/hakimel/rev… |
Data structures and algorithms
- 7 of GitHub’s hottest data structures and algorithms to learn from! No one of
- Wonderful to be continued…
| project | address |
|---|---|
| Javasjavascript -algorithms: Contains a variety of javask-based algorithms and data structures | Github.com/trekhleb/ja… |
| Algorithm-visualizer: Algorithm visualizer is an interactive online platform for visualizing algorithms from code | Github.com/algorithm-v… |
| Algo: 50 code implementations of data structures and algorithms | Github.com/wangzheng08… |
| Awesome – Algorithms: Javascript implementations of different well-known computer science algorithms | Github.com/mgechev/jav… |
| Js-sorting -Algorithm: A simple and efficient Sorting process | Github.com/hustcc/JS-S… |
| Beauty of JavaScript data Structures and algorithms: contains the ideas, code implementation, some examples, complexity analysis, animation of the top ten classic sorting algorithms | Github.com/biaochenxuy… |
| Daily-algorithms: Algorithms, a daily exercise | Github.com/barretlee/d… |
| JavaScript more… | Github.com/search?l=Ja… |
CSS Learning Topics
- [10 Super popular CSS tips on GitHub for inspiration!]
- Wonderful to be continued…
| project | address |
|---|---|
| You-need-to-know- CSS: Various effects of CSS implementation, especially animation effects | Lhammer. Cn/You — the need to… |
| Css-inspiration: Find the Inspiration to use or learn CSS | Github.com/chokcoco/CS… |
| Css_tricks: Summarizes some commonly used CSS new properties and a few tricks | Github.com/QiShaoXuan/… |
| Animista: A variety of CSS implementations, as well as code demos, so you can copy code directly | animista.net/ |
| Spinkit: A collection of CSS snippets that implement various loading effects | tobiasahlin.com/spinkit/ |
| 10 days to master CSS3: CSS3 tutorial | www.imooc.com/learn/33 |
| Animate: interesting, cross-browser CSS3 animation library | animate.style/ |
| Sass: Sass is a precompiled CSS language that brings more power to CSS | Sass.bootcss.com/documentati… |
| Less: Less is a CSS preprocessing language that extends the CSS language by adding variables, mixins, and functions | less.bootcss.com/ |
| Cssdeck: Online CSS front-end code Demo style effects | cssdeck.com/ |
| Codepen: Front end cool style effects, various loading effects, online programming, Vue components are also special | codepen.io/ |
| Cubic – Bezier: CSS3 bezier curve online debugging tool | cubic-bezier.com/ |
| Snapsvg: SVG animation JS library, all kinds of cool effects. | snapsvg.io/ |
| All of our background images are colorful and varied, which can help you look Cool. | coolbackgrounds.io/ |
Node.js
- Recommend 9 node.js learning, advanced, debugging analysis, practical heavy open source projects 👍
- Wonderful to be continued…
| project | address |
|---|---|
| Node: The best resource to learn from is definitely the official node.js project. | github.com/nodejs/node |
| Node-api-cn: Node.js API Chinese documentation project | Github.com/nodejscn/no… |
| Node-in-debugging: Items in the Node.js debugging guide | Github.com/nswbmw/node… |
| Nodebestpractices: A summary and sharing of the highest ranking content in Node.js bestpractices | Github.com/goldbergyon… |
| Deep-into-node: deep understanding of node.js: core ideas and source analysis | Github.com/yjhjstz/dee… |
| Nodejs-roadmap: Technology stack for node.js servers | Github.com/qufei1993/N… |
| NeteaseCloudMusicApi: netease CloudMusic Node.js API service | Github.com/Binaryify/N… |
| Node-elm: This is a background system based on Node.js + Mongodb | Github.com/bailicangdu… |
| Awesome -nodejs: Node.js resources | Github.com/sindresorhu… |
Small program
| project | address |
|---|---|
| Mpvue: a small program development framework based on vue. js, which supports vue. js syntax and building tool system from the bottom | Github.com/Meituan-Dia… |
| Wepy: Componentized development framework for small programs | Github.com/Tencent/wep… |
| Westore: mini program solution for wechat – 1KB javascript coverage state management, cross-page communication, plug-in development and cloud database development | Github.com/Tencent/wes… |
| ColorUI: Bright high saturation color, focus on the visual small program components library | Github.com/weilanwl/Co… |
| Gitter: The demo developed with Taro framework + Taro UI may be the GitHub wechat mini program client with the highest appearance level | Github.com/huangjianke… |
| Taro: Multi-terminal unified development framework, support with React development method write code once | github.com/NervJS/taro |
| Painter: Small program generates a photo library, easily draw a picture that can be sent to friends circle through JSON | Github.com/Kujiale-Mob… |
| Kbone: Web and small program isomorphism solution, wechat official | Github.com/wechat-mini… |
The front-end monitoring
- Featured GitHub 2K+ Star: Front-end Monitoring Tool – WebFunny Projects!
- Wonderful to be continued…
| Web site | instructions |
|---|---|
| Front end monitoring tool – WebFunny project | A lightweight front-end exception monitoring and front-end performance monitoring system |
Front-end code specification
- With all due respect, the front-end code specification of these big factories you probably don’t have – the front-end code specification can be refined
- Wonderful to be continued…
| project | address |
|---|---|
| tencent | Tgideas.qq.com/doc/index.h… |
| jingdong | guide.aotu.io/index.html |
| airbnb | Github.com/airbnb/java… |
| baidu | Github.com/ecomfe/spec… |
| JavaScript Standard Style | Github.com/standard/st… |
| Vue | Cn.vuejs.org/v2/style-gu… |
| ES6 | es6.ruanyifeng.com/#docs/style |
| Bootstrap | codeguide.bootcss.com/ |
| ESLint | eslint.org/ |
| Prettier | prettier.io/ |
Programmer’s Must-have Warehouse
- There are seven of the top 10 GitHub repositories that programmers must have!
- Wonderful to be continued…
| project | address |
|---|---|
| Build-your-own-x: Build the app you want to build | Github.com/danistefano… |
| Javasjavascript -algorithms: Multiple javask-based algorithms and data structures | Github.com/trekhleb/ja… |
| Computer-science: Offers a wealth of free resources for anyone who wants to study computer science | Github.com/ossu/comput… |
| 30-seconds-of-code: More than 100 code segments covering everything in JavaScript | Github.com/30-seconds/… |
| Nodebestpractices: A summary and sharing of the highest ranked content in Node.js bestpractices | Github.com/goldbergyon… |
| Realworld: How do you develop appropriate applications using specific languages/technologies | Github.com/gothinkster… |
| Free-programming-books: Free programming books | Github.com/EbookFounda… |
| System-design-primer: Learn how to design large systems to prepare for a system design interview | Github.com/donnemartin… |
| Awesome – Python: A selection of Python frameworks, libraries, software, and resources | Github.com/vinta/aweso… |
| Awesome Machine-learning: A selection of great machine learning frameworks, libraries, and software | Github.com/josephmisit… |
Foreign websites,
- Rise posture! Expandingprogrammer technology and vision of 22 foreign websites!
- Wonderful to be continued…
| project | address |
|---|---|
| GitHub: Open source project repository | github.com |
| GitLab: Open source project of warehouse management system | about.gitlab.com/ |
| Dev. to: The technology blog community | dev.to/ |
| Dreamincode: Niche tech blog | www.dreamincode.net |
| Bytes: Similar to Dreamcode, simple but not simple | bytes.com |
| Hongkiat: Technical articles in the field of technology and design | www.hongkiat.com/blog/design… |
| IBM Developer: First Line engineers, very technical articles | developer.ibm.com |
| StackOverFlow: An international problem-solving community for programmers | stackoverflow.com |
| Reddit: A very personal community where you can discuss programming issues and learn English | www.reddit.com |
| Daniweb: A high quality q&A platform | www.daniweb.com |
| LeetCode: Domestic LeetCode is the same as brush questions | leetcode.com |
| LintCode: LintCode has more than 1000 algorithm and ARTIFICIAL intelligence questions on the collar button | www.lintcode.com |
| Codeforces: One of the best known online measurement systems in the world | codeforces.com/ |
| Topcoder: The world’s largest programming website | www.topcoder.com |
| Tutorialspoint: Free online learning site with various techniques, explanations and demos | www.tutorialspoint.com/index.htm |
| Codecademy: Simplify programming learning | www.codecademy.com |
| Livecoding. TV: provide a real-time and efficient interactive platform for global programmers | www.livecoding.tv/accounts/lo… |
| Dzone: Technology covers a more comprehensive site | dzone.com |
| Simpleprogrammer: Pure technical article is not much, the article of guidance suggestion sex is more | simpleprogrammer.com/ |
| SitePoint: Learn Web design and development of HTML5, CSS3, JavaScript, PHP, and mobile applications | www.sitepoint.com/web |
| YouTobe: Bilibili is the same as Bilibili in China. All kinds of videos are gathered here, and of course the programming masters from all over the world are also here | www.youtube.com/ |
The design specification
| project | address |
|---|---|
| IPhone screen sizes | www.paintcodeapp.com/news/ultima… |
| Design specification for mobile screen sizes | screensiz.es/phone |
| Wechat official mini program UI style library | weui.io/ |
| Each large size device response screen effect display | www.responsinator.com/ |
visualization
- Brick Design is recommended as a full-scene visual drag-and-drop low code front-end framework
- Wonderful to be continued…
| project | address |
|---|---|
| Brick-design: Full-scene visual drag-and-drop low code front-end framework | Github.com/brick-desig… |
Code generator
- GitHub 2W star: One-click generation of front and back end code
- Wonderful to be continued…
| project | address |
|---|---|
| Jeecg-boot: Generates front and back end code with one click | Github.com/zhangdaisco… |
Download the whole web video
- GitHub 5W Star: One line command to download web wide videos for two open source projects
- Wonderful to be continued…
| project | address |
|---|---|
| You-get: A one-line command to download the entire web video | Github.com/soimort/you… |
| Annie: One line command to download the whole web video | Github.com/iawia002/an… |
Cool geek interface
- Amazed! For Windows, Mac, Linux, cool geek interface Edex-UI
- Everything a programmer wants is hidden in this open source project!
- Wonderful to be continued…
| project | address |
|---|---|
| Edex-ui: Cool geek interface | Github.com/GitSquared/… |
| Lively: Pull up the programmer’s desktop | screensiz.es/phone |
Cutout artifact
| project | address |
|---|---|
| removebg | www.remove.bg/zh |
| Ps – uupoop online | www.uupoop.com/ |
Online mapping
| project | address |
|---|---|
| ProcessOn | www.processon.com/ |
| draw.io | www.draw.io/ |
| excalidraw | excalidraw.com/ |
Color is tie-in
| project | address |
|---|---|
| Chinese Academy of Sciences chromatography of traditional Chinese color | zhongguose.com/#yuhong |
| Online fast color generation tool | coolors.co/ |
| Updated daily with a simple and comfortable color scheme | colorhunt.co/ |
| MaterialDesign powerful online color matching | www.materialpalette.com/blue/purple |
| Analyze site color matching through url access | webcolourdata.com/ |
| Cool polygon background color block generation | trianglify.io/ |
| Color search engine | picular.co/ |
| Popular grid gradient background for free download | webgradients.com/ |
| Upload and match the colors of the extracted image style | www.colorfavs.com/ |
The development idea
- Github has a 1.6w + star, and the “unspoken rules” that programmers have to know have become popular again. If I had known, I wouldn’t have gone bald
- Wonderful to be continued…
| project | address |
|---|---|
| Hacker-laws: The most common laws, principles, etc | Github.com/nusr/hacker… |
Technical community
| project | address |
|---|---|
| GitHub: A platform for high-quality content creation and sharing | github.com/ |
| Stackoverflow: a site that answers technical questions | stackoverflow.com/ |
| Nuggets: at present look, domestic a lot of high quality front end article, on nuggets | juejin.cn/ |
| Blogpark: A pure technology blogging platform | www.cnblogs.com/ |
| Zhihu: Many technical students have started to play zhihu, and many leading executives of Ali are very active on Zhihu | www.zhihu.com/ |
| Segmentfault: A relatively low-key technology blogging platform | segmentfault.com/ |
| CSDN: Too much advertising, but you are so old | www.csdn.net/ |
| V2ex: A place for sharing and exploration | www.v2ex.com/ |
| Node.js is a professional Chinese community | www.jstips.co/ |
| JS Tips: Launch a JS tips website every day | cnodejs.org/ |
| W3cplus: is a technology blog dedicated to promoting the domestic front-end industry | www.w3cplus.com/ |
| Imprinting Chinese: is the most authoritative technical Chinese document community | docschina.org/ |
Blog team
| project | address |
|---|---|
| Tencent AlloyTeam | www.alloyteam.com/ |
| Tencent Social User Experience ISUX | isux.tencent.com/ |
| Tao department front end team | fed.taobao.org/ |
| Alibaba International UED | www.aliued.com/ |
| Jingdong Concave-convex Laboratory | aotu.io/ |
| Ele. me front end | zhuanlan.zhihu.com/ElemeFE |
| Baidu front-end RESEARCH and development department FEX | fex.baidu.com/ |
| 360 odd dance company | 75team.com/ |
| Meituan technical team | tech.meituan.com/ |
| The night is the morning | Github.com/biaochenxuy… |
Making statistics
| project | address |
|---|---|
| GitHub Global Rankings: This ranking is authoritative | gitstar-ranking.com/ |
| GitHub Chinese ranking, high score excellent Chinese projects | Github.com/kon9chunkit… |
Front end assembly
| project | address |
|---|---|
| Vue.js Developer Conference: Vue.js Developer Conference, China | fequan.com/ |
| China JS Developer Conference: an international conference focused on JavaScript and Node.js technology | jsconfchina.com/ |
| China CSS Developers Conference: the conference to improve the posture of CSS development | css.w3ctech.com/ |
| D2 Front-end Technology Forum: held by Alibaba to share the fun of technology and discuss the development of the industry | d2forum.alibaba-inc.com/ |
Packaging tools
| project | address |
|---|---|
| NPM | www.npmjs.com/ |
| Yarn | yarnpkg.com/zh-Hans/ |
| Webpack | webpack.js.org/ |
| Gulp | www.gulpjs.com.cn/ |
| Babel | babeljs.io/ |
| ESLint: assembles JavaScript and JSX checking tools | cn.eslint.org/ |
| PostCSS: a tool for converting CSS code with JavaScript tools and plug-ins | www.postcss.com.cn/ |
| Rollup: Packages the NPM library | Github.com/rollup/roll… |
| Parcel: A packaging tool similar to WebPack | Github.com/parcel-bund… |
| Systemjs: useful for some special scenarios, such as cloud IDE, Alipay miniprogram IDE, etc | Github.com/systemjs/sy… |
| Microbundle: Simplifies configuration based on rollup | Github.com/developit/m… |
| Bili: Based on rollup, ibid | github.com/egoist/bili |
| Vue-cli: indicates the Vue command line tool | Github.com/vuejs/vue-c… |
| Create-react-app: React official scaffolding | Github.com/facebook/cr… |
| Prepack: Optimizes the packaging results by pre-executing them | Github.com/facebook/pr… |
| SWC: Rust based syntax converter, a competitor to Babel | Github.com/swc-project… |
| Nathan/Pax: Based on Rust, said to be the fastest JavaScript packaging tool on the planet | github.com/nathan/pax |
| Pikapkg /web: NPM dependencies in the browser, for modern browsers | github.com/pikapkg/web |
| Lebab/LEBAB: Convert es5 code to ES6, reverse Babel | github.com/lebab/lebab |
| Snowpack: A faster packaging tool system for the modern Web | Github.com/pikapkg/sno… |
Code hosting platform
| project | address |
|---|---|
| Coding: code hosting platform | coding.net/ |
| Code Cloud: Code hosting platform | gitee.com/ |
| Github: Code hosting platform | github.com/ |
| SVN: code hosting platform | Svnbucket.com/?ADTAG=bdss… |
| SVN: code management center | www.svnchina.com/ |
| Git: website | git-scm.com/ |
| Ali cloud | www.aliyun.com |
| Tencent cloud | cloud.tencent.com/ |
Debugging caught
| project | address |
|---|---|
| Whistle: It’s a proxy packet capture tool. It’s nice and powerful | wproxy.org/whistle/ |
| Easy Mock | www.easy-mock.com |
| Fiddler: proxy packet capture tool | www.telerik.com/fiddler |
The development tools
- Recommend 12 essential tools to improve programmer’s soft skills and efficiency, love love 👍
- Wonderful to be continued…
| project | address |
|---|---|
| VS Code | code.visualstudio.com/ |
| Sublime Text | www.sublimetext.com/ |
| WebStorm | www.jetbrains.com/webstorm/ |
| Atom | atom.io/ |
Record the screen tools
- Recommend the popular screen recording tool on GitHub, kill 33 peer tools
- Wonderful to be continued…
| project | address |
|---|---|
| screenity | Github.com/alyssaxuu/s… |
Practical Guide to Buying a house
- Here are 2 practical guides to buying a house that Github’s hot coders need!
- Wonderful to be continued…
| project | address |
|---|---|
| Hangzhou hangzhou_house_knowledge: | Github.com/houshanren/… |
| Hangzhou_house_knowledge: Shanghai | Github.com/ayuer/shang… |
Good front end blog
| The public, | The author | address | Introduction to the | |
|---|---|---|---|---|
| The whole stack | The night is the morning | CB834301747 | Github.com/biaochenxuy… | Share big front-end development related technical articles, hot resources, full stack programmer growth road |
| Front end afternoon tea | SHERlocked93 | qianyu443033099 | Github.com/SHERlocked9… | Share front-end related technical blogs, selected articles, look forward to progress with you here! |
| The front-end UpUp | Day after day | DayDay2021 | Github.com/daydaylee12… | Leetcode algorithm related, brush LeetCode from 0 to 1. |
| Front end from advanced to hospital | ssh | sshsunlight | Github.com/sl1673495/b… | 📖 100W + read advanced front-end technology blog repository, Vue source code parsing, React in-depth practices, TypeScript advanced art, engineering, performance optimization practices… |
| ICSS front-end interesting facts | Coco | coco1s | Github.com/chokcoco/iC… | 9300+ Stars CSS warehouse, all kinds of CSS magic tricks, here, have. |
| If sichuan vision | If sichuan | ruochuan12 | Github.com/lxchuan12/b… | Learning source code overall architecture series many, front – end interview high-frequency source code |
| Front evangelist | jiangsu | su-south | Github.com/meibin08/co… | A cartoon interpretation of programmers daily anecdotes, share the front edge technology, dacang face and dry goods of the public account, the main number is a love of drawing the front end of the cut map cub, love code at the same time, but also hope to use the form of comics to let more understand programmers. |
| Autumn wind notes | The autumn wind | qiufengblue | Github.com/hua1995116/… | Sharing engineering, open source knowledge, interesting front-end knowledge. |
| The front-end dining room | For Obama | hungryturbo | Github.com/Geekhyt/fro… | Your front dining hall, eat well every meal 🍥 |
| Shenzhen Bay code farmer | Rock | ruanxiongbiao | Github.com/qappleh/Int… | Share the interview questions of BAT factory, break one question every day, take you from 0 to 1 system to build web full stack complete knowledge system! |
| The big front of the attack | Peng-fei jiang | ffx313 | Github.com/dennis-jian… | Advanced knowledge of the system |
| Fawn animation programming | The deer | lxq17853556107 | Github.com/luxiangqian… | Github only animation warehouse, with the form of animation front-end technology incisively and vividly! Also include their own front end of the interview and advanced articles to share, welcome to pay attention to oh! |
| Programming the picturesque | dapeng | aaron875499765 | Github.com/guanpengchn… | The network’s most special picture solution algorithm, mdNICE author official blog |
| Front end thinking framework | ViktorHub | viktorhub | Github.com/ViktorWong/… | Build Web full-stack digital library, reveal Web full-stack architects, and build personal core competitiveness. |
icon
| project | address |
|---|---|
| Font Awesome: The most popular icon set for web development | www.fontawesome.com.cn/ |
| Feather: Simple and beautiful open source icon | feathericons.com/ |
| Ionicons: carefully drawn open source ICONS | ionicons.com/ |
| Simple Icons: Light, elegant, symbolic Icons that contain common actions and actions | simpleicons.org/ |
| Material Design Icons | Material. IO/resources/I… |
| Tabler Icons: 681 customizable open source SVG Icons | tablericons.com/ |
color
| project | address |
|---|---|
| Material Design Colors | www.materialui.co/colors |
| Flat UI Colors: 14 Colors, 280 Colors | flatuicolors.com/ |
| Color Hunt: A free and open platform for sharing Color combinations, including thousands of hand-selected Color combinations for inspiration | colorhunt.co/ |
| Color Space: Color scheme, CSS Color gradient generation tool | mycolor.space/ |
| UiGradients: Beautiful color gradients | www.uigradients.com/ |
| Fonts: Colors and Fonts | colorsandfonts.com/ |
| Coolors: Color scheme generation tool | coolors.co/ |
illustrations
| project | address |
|---|---|
| Undraw: A continuously updated collection of beautiful SVG illustrations | Undraw the co/illustratio… |
| Manypixels: Free illustration collection | gallery.manypixels.co/ |
| IRA Design: Customize illustrations by blending gradients with hand-painted components | Iradesign. IO/gallery/ill… |
| Illustrations and Illustrations Free Illustrations by Lukasz Adam | Lukaszadam.com/illustratio… |
| Blobmaker: Online SVG shape generator | www.blobmaker.app/ |
| Get Waves: Online SVG waveform generator | getwaves.io/ |
The picture
| project | address |
|---|---|
| Unsplash: Free images | unsplash.com/ |
| Pexels: Beautiful free photos and videos | www.pexels.com/ |
| Burst: Free high resolution images for web and commercial use | burst.shopify.com/ |
| ISO Republic: Free high resolution images and videos using the CC0 license | isorepublic.com/ |
| Pixabay: Amazing free (public domain) photo and video site | pixabay.com/ |
| StockSnap: Beautiful free images, also using CC0 license | stocksnap.io/ |
| Photopea: An online photo editing tool that supports a number of advanced features | www.photopea.com/ |
| Using the Online Image Compressor, you can compress up to 20 images at a time | imagecompressor.com/ |
| Bulk Resize Photos: The fastest online image scaling tool (Image scaling and compression are performed locally without uploading to the server. | bulkresizephotos.com/en |
Design tools
| project | address |
|---|---|
| Ink knife: prototype design tool | modao.cc/ |
| Blue Lake: an online collaboration platform for product documentation and design drawings | lanhuapp.com |
| PxCook: Efficient and easy to use automatic annotation tool | www.fancynode.com.cn/pxcook |
WEB Technology List
- 2020-Web Development Roadmap, and the upcoming 2021-Web Technologies Checklist
- Wonderful to be continued…
| project | address |
|---|---|
| Developer-roadmap: A step-by-step guide and path for learning different tools or techniques | Github.com/kamranahmed… |
The front end
The back-end
operations
The last
Well, these are the good open source projects that Cat brother has recommended for the past half a year.
Time will make an ordinary thing become extraordinary.
Unconsciously, the original article has been written to the 47th issue, almost every article is the cat brother carefully selected quality open source projects, push every article in the project is almost very helpful to the front-end development.
Original is not easy, update and operation for more than half a year is not easy, spend a lot of time, energy to screen and write recommended reasons, big guys after reading the article, easily to a key three, when the cat brother a little encouragement.
Please see the treasure warehouse below, please enter carefully!
Github.com/FrontEndGit…
Wechat search front-end GitHub, reply to e-books will send you 1000+ essence programming e-books; Reply 1024 send you a complete set of front end video tutorials.
It is not easy to update and operate for more than half a year, and it will be updated continuously in the future. Thank you for your company for so long, your praise and sharing, and your affirmation and encouragement for the article of Cat brother. Thank you.