67 useful tools, libraries and resources to save time for web developers
- Transfer
In this article I will not tell you about large web frameworks such as React, Angular, Vue, etc. ... there will not be a list of the most popular text editors - Atom, VS Code, Sublime ... In this article I will share you tools that, in my opinion, can make the web developer workflow easier and faster.
It is likely that some of you are already familiar with some of these tools. Nevertheless, it will be very cool if any of the readers find something new and useful for themselves in my article.
Below are various web resources that I have divided into groups for more convenience.
Resources
Ghost - A simple blogging platform developed using node.js
What runs - Chrome plugin designed to study the technologies used to create a modern website LiveEdu.tv - Streaming service for programmers and designers that focuses on real projects. Here you can find hundreds of channels on the following topics: software development, artificial intelligence, data science, game development, design, VR & AR development, cryptocurrencies on which real projects are developed, in real time and during the development process, the authors explain each step. Learn anything - Relationship diagram for selecting a discipline (e.g. physics, chemistry, etc.) and displaying its subsections head cheatsheet - List of everything that can be included in the head tag
JavaScript libraries and frameworks
Particles.js - A library where you will find many interesting things for creating floating elements on your web page.
Three.js - Library for creating 3D objects on a web page and 3D visualization
Fullpage.js - A set of easy-to-use full-page scroll properties
Typed.js - Typewriter effect for your website
Waypoints.js - Sample code to run functions when scrolling
Highlight.js pages - Syntax highlighting for
Chart.js pages - A set of beautiful diagrams created in pure JavaScript
Instantclick - A library useful for speeding up loading your site with preloading resources when you hover over a
Chartist mouse - Another library with
Motio diagrams - A library for creating animations and panoramas using
Sprite graphics Animstion - A jQuery plugin for creating page transitions using CSS
Barba.js - Resource for creating flowing transitions on a page
TwentyTwenty - A tool for creating visual differences
Vivus.js - A library for creating drawn animations using SVG
Wow.js - A tool for showing drawings as you scroll pages Anits
Scrolline.js - A tool through which you can track how much you need to scroll to the end of the page
Velocity.js - A tool for creating very fast JavaScript animations with a smooth transition
Animate on scroll - A simple example of creating animations when scrolling the page
Handlebars.js - Designing templates for JavaScript
jInvertScroll - The effect of horizontal scrolling Parallax
One page scroll - Scrolling within the same page
Parallax.js - Property Parallax, responsive to the orientation of your smart device
Typeahead.js - Advanced search and auto-completion
Dragdealer.js - Library with many cool effects for moving animations
Bounce.js - Tool for creating CSS animations
Pagepiling.js - Scrolling within the same page
Multiscroll.js - Sample code for creating two vertically scrolling sections
Favico.js - Dynamic favicons
Midnight.js - Example code for changing fixed headers when scrolling
through an Anime.js page - Library of various animations for JavaScript
Keycode - JavaScript code for displaying numerical values when pressing
Sortable keys - Code examples for dragging and dropping elements on a page
Flexdatalist -
JQuerymy search auto-completion code examples - Two-way data binding with jQuery
Cleave.js - Formatting content when typing
Page - Client-side routing for single-page applications
Selectize.js - Mixed selection fields for adding
nice select tags - jQuery library for creating a beautiful selection fields
Tether - Effective attachment elements on the page with absolute location
Shepherd.js - Things to do for your site users
Tooltip - The name speaks for itself ...
Select2 - Setting select fields with the help jQuery
IziToast - Easy-to-Implement JS Notifications
IziModal - Pop-ups implemented using simple JavaScript
CSS Libraries / Design Tools
Animate.css - Animation library
Flat UI Colors - List of simple and effective color schemes
Material design lite - Framework based on material web design from Google
Colorrrs - Random color generator
Section separators - Creating borders of different shapes using CSS
Topcoat - Framework for creating web applications
Create ken burns effect - Creating the “Ken burns”
effect DynCSS - Adding CSS functions to add dynamic properties to web pages
Magic animations - Well, everything is clear from the name ...
CSSpin - A collection of virtual CSS spinners for your site
Feather icons -
Ion icons -
Font awesome icons -
Font generator icons - Effectively selecting and combining fonts
On / Off switch - Creating an on / off switch using CSS
UI Kit -
Bootstrap framework -
Foundation Framework - Framework
Well, so I brought you a list of the most effective tools, frameworks and libraries that I use in my daily work.
If you find similar resources that you find interesting, leave them in the comments!