Recommend 12 fairy level tool projects and websites necessary for learning front-end

Time:2021-11-15

Recommend 12 fairy level tool projects and websites necessary for learning front-end

Today, we recommend some auxiliary tool websites that are often used when learning the front end.

preface

Hello, I’m your cat brother, a super cat who doesn’t like fish and meow~

Cat brother is a cat star who haunts GitHub all year round, so he has found a lot of good front-end open source projects and common skills, which I share with you here.

Official account:Front end GitHubIt focuses on mining outstanding front-end open source projects on GitHub, and recommends them in a thematic way. There are about 10 good projects for each topic. There will be one to three essays in every week.

Already recommendedInterview itemsCSS projectCode specification projectData structure and Algorithm ProjectJavaScript skilful projectFront end essential online toolsAnd so on.

How to find good open source projects at ordinary times, you can take a look at this article: Fairy skills for mining on GitHub – how to find excellent open source projects

The following is the fourteenth phase of the front-end GitHub.

Recommend 12 fairy level tool projects and websites necessary for learning front-end


Today, we recommend some auxiliary tool websites that are often used when learning the front end.

website describe
unbug.github.io/codelf Variable naming intelligent recommendation (support Chinese)
www.docschina.org Web front-end developers provide high-quality Chinese documents
regexr.com Regular expression validation match
any-rule Regular expression library, very complete, easy to use
www.toptal.com/developers Synthesize sprite images from multiple images and generate corresponding CSS
tool.lu Many tool sets, including timestamp conversion, hexadecimal conversion, etc
Www.bootcdn.cn or cdn.baomitu.com Domestic CDN library, fast
www.jsdelivr.com Foreign CDN libraries support GitHub, NPM and WordPress
www.gitignore.io The. Gitignore file will be generated according to the selection
codesandbox.io Edit code online
www.typora.io Practical markdown writing tool, WYSIWYG
mdnice.com Make the markdown syntax more beautiful. If you write a blog, this is very suitable for you (highly recommended)

1. codelf

There is a pain that programmers may not understand, but if programmers must understand, it is to name variables or functions.

As the project becomes more and more complex and the number of variables and functions increases, the English level seems to be unable to hold.

Although each programming language has various naming conventions, it can’t solve all the problems.

Every programmer is more or less worried about naming variables and functions when writing code!

Recommend 12 fairy level tool projects and websites necessary for learning front-end

You can also install plug-ins in your own editor to support vs code, atom, sublime text and chrome.

Super cat uses vs Code and also has this plug-in installed.

Recommend 12 fairy level tool projects and websites necessary for learning front-end

Recommend 12 fairy level tool projects and websites necessary for learning front-end

https://unbug.github.io/codelf/

2. docschina

Impression of Chinese, providing high-quality Chinese documents for web front-end developers.

Recommend 12 fairy level tool projects and websites necessary for learning front-end

https://www.docschina.org

3. regexr

Regexr is an online tool based on HTML / JS to create, test and learn regular expressions.

characteristic

  • As you enter, the results are updated in real time
  • Support JavaScript and PHP / PCRE regex
  • Move a match or expression to details
  • Save and share expressions with others
  • Undo and redo using cmd-z / Y in the editor

Recommend 12 fairy level tool projects and websites necessary for learning front-end

https://regexr.com/

4. any-rule

Recommend 12 fairy level tool projects and websites necessary for learning front-end

Any rule regular expression

Any rule maintains a collection of common regular expressions and is a regular expression tool that supports web / vs Code / idea / Alfred workflow.

Recommend 12 fairy level tool projects and websites necessary for learning front-end

https://github.com/any86/any-rule

5. CSS Sprites Generato

In many front-end display pages, small icons need to be combined into a whole picture, and then automatically cut into a single picture display when in use.

At this time, a convenient tool is needed. CSS sprites generator is such a convenient CSS image mosaic tool.

For example, Sprite pictures generated from multiple pictures and domestic CDN libraries, go and have a try.

Recommend 12 fairy level tool projects and websites necessary for learning front-end

https://www.toptal.com/developers/css/sprite-generator

6. tool.lu

Recommend 12 fairy level tool projects and websites necessary for learning front-end

Many tool sets, including timestamp conversion, hexadecimal conversion, etc

https://tool.lu/

7. bootcdn / baomitu

Recommend 12 fairy level tool projects and websites necessary for learning front-end

Domestic CDN library, fast

Recommend 12 fairy level tool projects and websites necessary for learning front-end

https://www.bootcdn.cn/ Or https://cdn.baomitu.com/

8. jsdelivr

Recommend 12 fairy level tool projects and websites necessary for learning front-end

Foreign CDN libraries support GitHub, NPM and WordPress.

https://www.jsdelivr.com

9. gitignore

Recommend 12 fairy level tool projects and websites necessary for learning front-end

The. Gitignore file will be generated according to the selection.

The corresponding gitignore file is automatically generated according to the language type or platform type entered by the user.

For example, enter Vue, react, and click “create”.

https://www.gitignore.io/

10. codesandbox

Codesandbox is an online code editor that focuses on creating web application projects.

Support the editing of mainstream front-end related files: Javascript, typescript, CSS, less, sass, SCSS, HTML, PNG, etc.

Support automatic code prompt.

For example, choose to create related projects

Recommend 12 fairy level tool projects and websites necessary for learning front-end

You can edit the code directly

Recommend 12 fairy level tool projects and websites necessary for learning front-end

https://codesandbox.io/

11. typora

Recommend 12 fairy level tool projects and websites necessary for learning front-end

Practical markdown writing tool, WYSIWYG.

https://www.typora.io

12. mdnice

Recommend 12 fairy level tool projects and websites necessary for learning front-end

Mdnice wechat markdown editor is a markdown wechat editor with good compatibility, massive theme styles, free drawing bed and strong technical team. It provides one click typesetting of articles and supports Zhihu, nuggets and wechat.

Make the markdown syntax more beautiful. If you write a blog, this is very suitable for you. It is highly recommended.

This tool was developed by big roc. Super cat has always used this tool. Star praised it when it was less than 200, because it is really easy to use. I think it will be hot. Now it is really hot. Almost people who often write blogs know and use it.

Super cat also contributed two themes. The themes of green and technology blue are contributed by the author, ha ha.

Recommend 12 fairy level tool projects and websites necessary for learning front-end

https://github.com/mdnice/markdown-nice

last

Recommend 12 fairy level tool projects and websites necessary for learning front-end

Unknowingly, it has been written in No14It’s been over the period100It’s a good front-end project. Please see the treasure warehouse below for the previous fine articles. It’s very dangerous to click. Please enter carefully!

[front end GitHub]: https://github.com/FrontEndGitHub/FrontEndGitHub

How to find good open source projects at ordinary times, you can take a look at this article: how to find excellent open source projects on GitHub and how to use GitHub for accurate search.

Think it works? If you like it, please collect it. By the way, your support is the biggest encouragement of super cat!

Can add super cat Wx:CB834301747, chat together.

Wechat search“Front end GitHub”, reply“e-book”That is, it can be obtained160The front end is the essence book.

Recommend 12 fairy level tool projects and websites necessary for learning front-end

Previous Jingwen

  • 10 super hot front-end interview projects on GitHub to create their own salary increase treasure house!
  • 12 super hot JavaScript tricks on GitHub
  • 10 super hot CSS skills projects on GitHub, find the inspiration to write CSS!
  • 11 super fire front-end necessary online tools, and finally have time to fish at work
  • 11 super fire big factory front-end code specifications, you can also write poetry like code!