The introduction

Some open source productivity tools can greatly improve our development efficiency (I always think so 🤠).

Today I recommend some of the tools I have been using, more fragrant to everyone. This includes documentation, visualization tools, analysis tools, code snippets, debugging tools, and so on.

Collect UI 🦑

Collect UIGallery is a free online resource for daily useUIDesign inspiration. It currently has more than 6,500 entries and is constantly updated with the latest content.

In the sidebar, there are categories. Includes 404 pages, login/logout, shopping cart, calendar, video player, etc. If you want to be inspired in a convenient way and then use it for your company project or personal project, I think it will be very helpful.

Taskade 📝

In daily life, there are always a lot of things to do, such as a lot of to-do items at work, but it is easy to forget some things, then we need a device with to-do itemschromePlug-in –taskade. TaskadeSimple, clean and beautifully designed, with a relaxing theme and setting. useTaskadeTo organize your thoughts so you can focus on what you’re doing.

Colordot 🌈

Sometimes we’re looking for a color we like (a bit like picking a nickname we’re happy with), but we don’t have the inspirationhere Slide the mouse freely in the web page area, you can produce different colors. Decide on one color and slide to create the next until you find the right one.

FontSpark 🎯

FontSparkIs a font selection website to help users with difficulty in choosing fonts. Users only need to input the text they need to display to get recommended fonts on the website, including font type and size.If you are not satisfied with the recommended font, clickGenerateButton refresh.

The Noun Project 🎃

The Noun ProjectThe website specializes in providing high quality, recognizableicon, theseiconThere is no cool design, it is usually presented in monochrome, but the user can easily identify the meaning.

Currently, NounProject offers over 2 million ICONS for free download, and they are constantly being updated. If you are looking for a NounProject and still can’t find one, you can visit the site.

csseffects 🚀

CSSeffectsSnippets contains about 20 CSS animations that can be previewed instantly on the web site, whether they are being loaded and read or generated by moving the cursor over them.

And this is not its biggest luminescent spot, is the most recommended all effects can be quickly copy the related code, after click let developers use directly to your own website or blog, but may require fine-tuning, but don’t have to start from scratch, also do not need to look for these animation code on the Internet, is very convenient and time-saving.

unDraw 🍉

unDrawIt was designed by Greek designersKaterina LimpitsouniWe have over 1000 flat vector illustrations for you to download from this website.If you’re working on a personal website and don’t have the inspiration for an illustration, you might want to check it out.

DevDocs 🐨

The web app aggregates documents for various projects and supports offline use.Both novice and experienced programmers need to have an online reference to various programming manuals, andDevDocsBrought together the most complete programming development documents, but also has an excellent reading mode, so that you can quickly query the command you want, but also support browser extension, it is very convenient.

CSS Tricks 🦊

CSS TricksIs a foreign excellent front-end development blog, mainly share useCSSStyle tips, experiences, tutorials, etc.The site makes a great contribution to the front-end community by constantly updating excellent tutorials and tips. I’ve been studying on it, too. Let meCSSThe field of vision has broadened a lot.

cssreference 🎾

If you need to updateCSSYou can access this for knowledge or to query unfamiliar and uncommon propertiessite. The top faces eachCSSProperties are explained in depth and the examples are clear enough for you to understand them and apply them to your own projects.

Can I Use ☄

It is recommended to check browser compatibility when developing the front-end.Can I UseThis is a query customized for the front-end developerCSS,JsIn a variety of popular browser features and compatibility of the site, can be a good guarantee of web page browser compatibility. With this tool, you can quickly see how the code looks in each browser.

Lighthouse 🌊

Lighthouse is an open source Google automation tool designed to improve the quality of web applications (mobile). Current tests include page performance, PWA, accessibility (accessibility), best practices, SEO.


LighthouseThe results of each test item will be scored and optimization suggestions will be given. These scoring standards and optimization suggestions can be regarded asGoogleWeb page best practices.

Majestic ✅

MajesticIt’s a good one to useJestRun the testGUITool.It makes it much easier to view the test case output log using visualization.

Wappalyzer 🔭

WappalyzerIs a device that can analyze the platform architecture, website environment, server configuration environment,javascriptFramework, programming language and other parameterschromeSite technical analysis plug-in.

iHateRegex 🌡

For developers, regular expressions are often used. Many strings of complex types can be matched with them, but the only drawback is that they are difficult to write, requiring not only mastery of the rules, but also time to write and debug.

iHateRegexThis is a great way to solve your regular expression problem. iHateRegexIs an online open source tool that can quickly search and match the appropriate regular expression to complete the verification of common rules such as username, email, date, mobile phone number, password and so on.

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

reference

https://dev.to/joserfelix/40-high-quality-free-resources-for-web-development-10o3

❤️ Love triple punch

1. If you think this article is good, share it, like it, and watch it again, so that more people can see it

2. Follow the public account front-end forest, regularly push you fresh dry goods good articles.

3. Wear a mask for personal protection at special stage.

4. Add wechatfs1263215592, pull you into the technical exchange group to learn together 🍻