67 useful tools, libraries and resources to save time for web developers

Original author: Ognjen Gatalo
  • 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!

Also popular now: