Ognjen Gatalo

@ognjengt

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

August 30th 2017

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.

More by Ognjen Gatalo

More Related Stories