In this article, I'm not going to talk about large front-end frameworks like React, Angular, Vue, etc., nor about popular code editors like Atom, VS code, Sublime, I just want to share with you a list of tools that will help improve developer productivity.
Perhaps some of my friends have some idea of some of the tools in this article, but if you find new tools that help you, then I'll be happy.
Because this list contains different categories of resources, in order to make it easier for everyone to see, I have to re-classify it, to Enjoy it!
JavaScript Library
- Particles.js?-a JS library for creating beautiful floating particles on a Web page;
- Three.js?-a JS library for creating 3D objects and spaces on a Web page;
- Fullpage.js-Easy to implement full-screen scrolling function of the library;
- Typed.js-Achieve typewriter effect;
- Waypoints.js-Scroll to the library where the element triggers the event;
- Highlight.js-Syntax highlighting on the page;
- Chart.js-Pure JS to make beautiful charts;
- Instantclick-mouse hover Pre-load page resources, greatly accelerate the response speed of your website;
- Chartist-Open source responsive Chart library;
- Motio-animation and moving library based on Sprite;
- Animstion-page Toggle animation for JQuery plugin;
- Barba.js-Create smooth and smooth transitions between pages;
- Twentytwenty-jquery parallax plug-in;
- Vivus.js-A Lightweight JS library that can perform SVG path animations;
- Wow.js-Animate the page when scrolling;
- Scrolline.js-a JQuery plugin that displays scrolling progress when the page scrolls;
- Velocity.js-for accelerating JavaScript animations;
- Animate on scroll-a small library that adds element animations to page scrolling;
- Handlebars.js-javascript template engine;
- Jinvertscroll-Lightweight JQuery horizontal parallax plug-in;
- One page scroll-a jQuery plugin that implements Apple-style single-page scrolling effects;
- Parallax.js-a lightweight parallax engine that responds to the direction of smart devices;
- Typeahead.js-Search box automatic completion of the JS library;
- Dragdealer.js-A drag-based JavaScript component;
- Bounce.js-Quickly create beautiful CSS3 animation effects;
- Pagepiling.js-Create a full-screen scrolling effect;
- Multiscroll.js-Create a two-column, vertical reverse scrolling effect of the JQuery plugin;
- Favico.js-dynamic icon plugin;
- Midnight.js-Fixed head switching effect;
- Anime.js-javascript animation engine;
- KeyCode-Gets the JS key value of the keyboard key;
- Sortable-JavaScript Library for drag-and-drop sorting;
- Flexdatalist-supported
<datalist> jQuery autocomplete plugin;
- Slideout.js-Implement the slide-out Web App navigation menu;
- Jquerymy-real-time, complex bidirectional data binding jQuery plugin;
- Cleave.js-Automatically formats the text content of the form input box;
- Page-Build a small client-side routing library for single-page applications;
- Selectize.js-JQuery-based
<select> UI controls for creating tag label input boxes and select drop-down boxes;
- Nice select-a jQuery plugin that creates beautiful drop-down boxes;
- Tether-Create two JS libraries of interrelated elements using absolute positioning;
- Shepherd.js-Create a beginner-led JS library;
- ToolTip-ToolTip plugin;
- Select2-Alternative selection box based on JQuery;
- Izitoast-light-weight cross-browser responsive message notification plugin;
- Izimodal-cool jQuery modal window plugin.
CSS Library and Design resources
- Animate.css? -Powerful CSS3 animation library;
- Flat UI Colors-nice flat color matching;
- Material Design Lite-a front-end framework based on Google Material design;
- Colorrrs? -Random color generator;
- Section Separators-css region Segmentation;
- Topcoat-Focus on providing CSS development tools for simple, fast Web applications;
- Create Ken Burns Effect-use CSS3 to implement the Ken Burns effect;
- DYNCSS-Used to analyze CSS
-dyn- property rules and make them dynamic properties;
- Magic animations-CSS3 animations with special dynamic effects;
- Csspin-rich CSS loading animations;
- Feather icons-A simple, beautiful open source icon library;
- Ion Icons-icon font specifically designed for the Ionic frame;
- Font Awesome-Scalable vector icon font;
- Font Generator-online font generator;
- On/off Flipswitch-Online create pure CSS3 animation switch effect;
- UIkit-Lightweight, modular front-end frame;
- Bootstrap-The well-known front end frame;
- Foundation-The well-known front end frame.
Useful Products/Links
- the label; (Translator note: Chinese translation address)
- Ghost-A simple blogging platform based on node. js;
- What runs-Chrome plugin for website Technical analysis;
- Learn anything-a powerful mind map for decomposing projects.
The above is my personal commonly used in some of the front-end tools, frameworks, libraries list, I hope to be helpful to everyone. If you are willing to share some new discoveries, you can always contact me on Twitter.
Thank you for reading. If you have something to gain, please feel free to share it.
Note:
- The copyright of this article is owned by the original author and is only used for learning and communication;
- If you want to reprint the translation, please click below to indicate the source information, thank you!
English Original: Useful tools, libraries and resources for saving your time as a web developer
Ognjen Gatalo
Translator: It program lion
Address: Http://www.jianshu.com/p/c95e400e43b6
It program Lion
Links: Http://www.jianshu.com/p/c95e400e43b6
Source: Pinterest
Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source.
67 JavaScript and CSS utilities, libraries and resources
