What are the front-end development resources that save development time?
What are the front-end development resources that save development time? I believe many inexperienced people are at a loss about this. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.
This list contains many kinds of resources, so I'll group them here.
Javascript library
Particles.js - a library for creating cool floating particles in web
Three.js - a library for creating 3D objects and 3D spaces in web
Fullpage.js- quickly realizes full-screen scrolling characteristics
Typed.js - typewriter effect
Waypoints.js - triggers a function when scrolling to an element location
Highlight.js - web syntax highlight
Chart.js - uses JavaScript to create beautiful charts
Instantclick - can significantly accelerate the loading time of the website, and preload resources when using the mouse hover.
Chartist - another chart library
Motio - a sprite image library based on animation and translation
Animsition -jQuery plug-in for CSS to realize animation transition
Barba.js - streaming page transition
TwentyTwenty - a visual diff tool for comparing pictures
Vivus.js - animates on SVG
Wow.js - shows animation when scrolling
The Scrolline.js - page shows scrolling progress as it scrolls
Velocity.js - fast and smooth JavaScript animation
Animate on scroll - beautiful page scrolling element animation
Handlebars.js - Javascript template
JInvertScroll - parallax scrolling
One page scroll - another page scroll library
Parallax.js - parallax engine that responds to changes in the direction of smart devices
Typeahead.js - search completion
Dragdealer.js - cool drag and drop
Bounce.js - creates cool CSS3 animation
Pagepiling.js - full screen scrolling
Multiscroll.js - two columns scroll vertically in the opposite direction
Favico.js - dynamic favicon
Midnight.js - fixed head switching effect
Anime.js - Animation Library
Keycode - gets the JavaScript keycode of keyboard keys
Sortable - drag and drop plug-in
Flexdatalist - automatic completion
Slideout.js - mobile app sideslip navigation
Jquerymy - uses jQuery for bidirectional data binding
Cleave.js - real-time formatting input
Page - client single page application routing
Selectize.js -Hybrid selection box used by to add tag
Nice select - creates a jQuery library with beautiful selection boxes
Tether - uses fixed positioning to create related elements
Shepherd.js - creates a novice guide for the application
Tooltip - tooltip prompt box
Select2 - Jquery selection box plug-in
Implementation of IziToast - notification pop-up window
Implementation of IziModal - modal box
CSS Library / Design related
Animate.css - Animation Library
Flat UI Colors - flat design color matching
Material design lite- Google material design-based framework
Colorrrs - Random Color Generator
Section separators - CSS to realize region Segmentation
Topcoat - framework
Create ken burns effect - uses CSS3 animation to achieve Ken burns special effects
DynCSS - adds function to CSS and dynamically CSS
Magic animations - CSS3 for animation special effects
CSSpin - css spinners collection
Feather icons - Icon collection
Ion icons - Icon collection
Font awesome - Icon collection
Font generator - combines multiple fonts to create mixed fonts
On/Off switch - uses CSS to create on/off switches, radio buttons
UI Kit - framework
Bootstrap - framework
Foundation - framework
Useful products / links
Cheatsheet -all tags that can write in
Ghost - blog platform based on Node.js
What runs - a Chrome plug-in for website technical analysis
Learn anything - A powerful mind map for analyzing a topic
After reading the above, have you mastered any ways to save development time on front-end development resources? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!
