编程知识 cdmana.com

Productivity tools essential for front end development

image

introduction

Some open source productivity tools can greatly improve our development efficiency ( That's what I always thought ).

Today I'd like to recommend some that I've been using 、 More fragrant tools for you . It includes some documentation 、 Visualization tools 、 Analysis tools 、 code snippet 、 Debugging tools, etc .

Collect UI

Collect UI Gallery is a free online resource , For daily use UI Design inspiration . at present , It has 6500 Multiple entries , And keep it up to date .
image

In the sidebar , There are classifications . Include 404 page 、 land / Log out 、 The shopping cart 、 The calendar 、 Video player, etc . If you want inspiration in a convenient place , And then use it for your company project or personal project , I think it will help a lot .

Taskade

There are always many things to do in daily life , For example, there are a lot of to-do items at work , But it's easy to forget something , At this point, we need one with to-do list chrome plug-in unit --taskade.
image
Taskade Simple , Neat and beautifully designed , With a relaxing theme and background . Use Taskade To organize your thoughts , So you can focus on things .
image

Colordot

Sometimes we want to find a color we like ( It's kind of like a nickname that you're satisfied with ), But no inspiration , Then we can come here

Swipe the mouse freely in the web area , Can produce different colors . Determine a color , And then slide to create the next color , Until you find your own color .

FontSpark

FontSpark Is a font selection website for users with font selection difficulties , Users only need to input the text they need to display to get the font recommended by the website , Including font type and size .
image
If you are not satisfied with the recommended font , Click on Generate Press the refresh button .

The Noun Project

image
The Noun Project The website is dedicated to providing high quality 、 Highly recognizable icon, these icon There's no cool design , It's usually presented in monochrome , It's easy for users to identify what it's trying to convey .

at present NounProject Provide more than 200 Ten thousand icon Free Download for users , And continue to be updated , If you need something icon, But never found the right one , You may as well go to this Website Come and go .

csseffects

CSSeffectsSnippets About 20 Varied CSS Animation , Whether it's loading or reading , Or moving the cursor in the past produces animation , Can be previewed in real time on the website .

And that's not the highlight of it , The most recommendable is that all effects can be quickly copied after clicking the relevant code , Let developers use it directly on their own websites or blogs , Of course, it may still need to be fine tuned , But you don't have to start all over again , There's no need to look for these animation codes on the Internet , It's very convenient and time-saving .

unDraw

unDraw It's a Greek designer Katerina Limpitsouni Developed a set of open source vector interpolation library , There are more than 1000 Flat vector illustrations for you to download .
image
If you're doing a personal website , But there's no inspiration for illustration , Maybe you can come and see .

DevDocs

This web application brings together documents of various projects , It also supports offline use .
image
Both novice and veteran programmers need to have a document that can query various programming manuals online , and DevDocs A collection of the most complete programming development documents , And a great reading pattern , So that you can quickly query the command you want , It also supports browser extensions , It's very convenient .

CSS Tricks

CSS Tricks Is an excellent foreign front-end development blog , Sharing is mainly used CSS The technique of style 、 Experiences and tutorials, etc .
image
The site is constantly updating some excellent tutorials and tips , Made a great contribution to the front end community . I've been learning from it , Let me in CSS We've broadened our horizons a lot .

cssreference

Update if necessary CSS Unfamiliar with knowledge or inquiry 、 Less commonly used properties , You can visit this Site . It's for each CSS The explanation of attributes is very deep , The example given is also very clear , It's easy for you to understand these attributes and apply them to your own projects .
image

Can I Use

When developing the front end, we often need to check the compatibility of the browser , Recommend here (Can I Use) This is a query customized for front-end developers CSSJs Features and compatibility sites in a variety of popular browsers , It can guarantee the browser compatibility of web pages . With this tool, you can quickly understand the effect of the code in various browsers .
image

Lighthouse

Lighthouse It's a Google Open source automation tools , Mainly used to improve network applications ( Mobile ) The quality of the . The current test items include page performance 、PWA、 Accessibility ( Barrier free )、 Best practices 、SEO.

image

Lighthouse The results of each test will be scored , And give optimization suggestions , These scoring criteria and optimization suggestions can be regarded as Google Web Best Practices for .

Majestic

Majestic It's easy to use Jest Run the test GUI Tools .
imageimage
Using visualization , It makes it easier for us to view the test case output log .

Wappalyzer

Wappalyzer Is a platform architecture that can analyze the target website 、 Website environment 、 Server configuration environment 、javascript frame 、 Programming language and other parameters chrome Website technology analysis plug-in .
image

iHateRegex

For developers , Regular expressions are often used , Many complex strings can be matched with it , But the only drawback is that it's hard to write , Not only do you need to master the rules , It also takes time to write 、 debugging .

iHateRegex It's such a artifact that helps you solve the problem of writing regular expressions .
image
iHateRegex Is an online open source tool , It can quickly retrieve and match the appropriate regular expression , Help you complete such as user name 、 mailbox 、 date 、 Phone number 、 Verification of common rules such as passwords .

Of course, you can also see the matching process inside it , It helps to deepen your understanding .
image

Reference resources

https://dev.to/joserfelix/40-...

版权声明
本文为[Front end forest]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201224104311388P.html

Scroll to Top