67 useful tools, libraries and resources for saving your time as a web developer

Originally published by Ognjen Gatalo on August 30th 2017 38,440 reads

@ognjengtOgnjen Gatalo

In this article I won’t be talking about big front end frameworks such as React, Angular, Vue etc… nor already popular code editors like Atom, VS Code, Sublime… I simply want to share a list of tools I find useful for speeding up a developer’s workflow.

Some have probably seen most of these, but I’m glad if someone discovers something new and useful.

This list contains many diverse resources so I will organize them in groups.

Javascript libraries

Particles.js — A library for creating beautiful floating particles on a web page

Three.js — A library for creating 3d objects and spaces on a web page

Fullpage.js — Easy to implement full page scroll feature

Typed.js — Typewriter effect

Waypoints.js — Trigger a function when you scroll to an element

Highlight.js — Syntax highlighting for the web

Chart.js — Make beautiful charts using only javascript

Instantclick — Dramatically speed up your website load time, preloading resources on mouse hover

Chartist — Another chart library

Motio — A library for sprite based animations and panning

Animstion — Jquery plugin for css animated page transitions

Barba.js — Fluid page transitions

TwentyTwenty — A visual diff tool to spot differences

Vivus.js — A library for making drawing animation on SVG

Wow.js — Reveal animations when you scroll

Scrolline.js — See how much you have scrolled untill the end of the page

Velocity.js — Very fast and smooth javascript animations

Animate on scroll — Pretty straightforward

Handlebars.js — Javascript templating

jInvertScroll — Parallax scrolling

One page scroll — And again a one page scrolling library

Parallax.js — Parallax Engine that reacts to the orientation of a smart device

Typeahead.js — Search completion

Dragdealer.js — Pretty cool dragging library

Bounce.js — Create cool CSS3 animations

Pagepiling.js — One page scroll

Multiscroll.js — Multi scroll a website into two vertical scrolling panels

Favico.js — Dynamic favicons

Midnight.js — Switch fixed headers on the fly

Anime.js — Animation library

Keycode — Get javascript keycode for a button that is pressed

Sortable — Drag & drop

Flexdatalist — Autocomplete

Slideout.js — Slideout navigation menu for mobile apps

Jquerymy — Two way data bindings using jquery

Cleave.js — Format content while typing

Page — Client side routing for single page applications

Selectize.js — Hybrid select box for adding tags

Nice select — Jquery library for creating beautiful select boxes

Tether — Efficiently attach absolute positioned elements

Shepherd.js — Guide users through your app

Tooltip — Name speaks for itself

Select2 — Jquery replacement for select boxes

IziToast — Easy to implement js notifications

IziModal — Easy to implement js modals

CSS libraries / Design stuff

Animate.css — Animation library

Flat UI Colors — List of simple and effective main colors

Material design lite — Framework based on Google’s material design

Materialui.co — Many resources for Material design framework

Colorrrs — Random color generator

Section separators — Css section dividers

Topcoat — Framework

Create ken burns effect — Ken burns effect using css3 animations

DynCSS — Add functions to css, to make it dynamic

Magic animations — Name speaks for itself

CSSpin — Collection of css spinners

Feather icons — Icons

Ion icons — Icons

Font awesome — Icons

Font generator — Combine multiple fonts and create a mixture

On/Off switch — Create on/off switch in css, good for check or radio buttons

UI Kit — Framework

Bootstrap — Framework

Foundation — Framework

Little Widgets — Html template collection

Useful products / links

Capsulelink — Group, save and send links as one

<head> cheatsheet — a list of everything that could go into <head> tag

Ghost — Simple blogging platform based on node.js

What runs — Chrome plugin to discover what technologies are used to build a website

Learn anything — Powerful mind maps that break down a certain subject

This is the list of some tools/frameworks/libraries I personally have been using for some time.

Feel free to contact me on twitter and share some of your findings there.

The paperwork API that scales with your tech stack.

67 useful tools, libraries and resources for saving your time as a web developer

@ognjengtOgnjen Gatalo

Javascript libraries

CSS libraries / Design stuff

Useful products / links

Tags