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](https://hackernoon.com/tagged/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**](http://vincentgarreau.com/particles.js/) — A library for creating beautiful floating particles on a web page

[**Three.js**](https://threejs.org/) — A library for creating 3d objects and spaces on a web page

[**Fullpage.js**](https://alvarotrigo.com/fullPage/#firstPage) — Easy to implement full page scroll feature

[**Typed.js**](http://www.mattboldt.com/demos/typed-js/) — Typewriter effect

[**Waypoints.js**](http://imakewebthings.com/waypoints/) — Trigger a function when you scroll to an element

[**Highlight.js**](https://highlightjs.org/) — Syntax highlighting for the web

[**Chart.js**](http://www.chartjs.org/) — Make beautiful charts using only [javascript](https://hackernoon.com/tagged/javascript)

[**Instantclick**](http://instantclick.io/) — Dramatically speed up your website load time, preloading resources on mouse hover

[**Chartist**](http://gionkunz.github.io/chartist-js/index.html) — Another chart library

[**Motio**](http://darsa.in/motio/#!introduction) — A library for sprite based animations and panning

[**Animstion**](http://git.blivesta.com/animsition/) — Jquery plugin for css animated page transitions

[**Barba.js**](https://github.com/luruke/barba.js) — Fluid page transitions

[**TwentyTwenty**](http://zurb.com/playground/twentytwenty) — A visual diff tool to spot differences

[**Vivus.js**](https://github.com/maxwellito/vivus#vivusjs) — A library for making drawing animation on SVG

[**Wow.js**](http://mynameismatthieu.com/WOW/) — Reveal animations when you scroll

[**Scrolline.js**](https://github.com/anthonyly/Scrolline.js) — See how much you have scrolled untill the end of the page

[**Velocity.js**](http://velocityjs.org/) — Very fast and smooth javascript animations

[**Animate on scroll**](http://michalsnik.github.io/aos/) — Pretty straightforward

[**Handlebars.js**](http://handlebarsjs.com/) — Javascript templating

[**jInvertScroll**](http://www.pixxelfactory.net/jInvertScroll/) — Parallax scrolling

[**One page scroll**](https://github.com/peachananr/onepage-scroll) — And again a one page scrolling library

[**Parallax.js**](https://github.com/wagerfield/parallax) — Parallax Engine that reacts to the orientation of a smart device

[**Typeahead.js**](http://twitter.github.io/typeahead.js/) — Search completion

[**Dragdealer.js**](http://skidding.github.io/dragdealer/) — Pretty cool dragging library

[**Bounce.js**](http://bouncejs.com/) — Create cool CSS3 animations

[**Pagepiling.js**](https://github.com/alvarotrigo/pagePiling.js) — One page scroll

[**Multiscroll.js**](https://github.com/alvarotrigo/multiscroll.js) — Multi scroll a website into two vertical scrolling panels

[**Favico.js**](http://lab.ejci.net/favico.js/) — Dynamic favicons

[**Midnight.js**](http://aerolab.github.io/midnight.js/) — Switch fixed headers on the fly

[**Anime.js**](http://animejs.com/) — Animation library

[**Keycode**](http://keycode.info/) — Get javascript keycode for a button that is pressed

[**Sortable**](http://rubaxa.github.io/Sortable/) — Drag & drop

[**Flexdatalist**](http://projects.sergiodinislopes.pt/flexdatalist/) — Autocomplete

[**Slideout.js**](https://slideout.js.org/) — Slideout navigation menu for mobile apps

[**Jquerymy**](http://jquerymy.com/#/) — Two way data bindings using jquery

[**Cleave.js**](http://nosir.github.io/cleave.js/) — Format content while typing

[**Page**](http://smalljs.org/client-side-routing/page/) — Client side routing for single page applications

[**Selectize.js**](http://selectize.github.io/selectize.js/) — Hybrid select box for adding tags

[**Nice select**](http://hernansartorio.com/jquery-nice-select/) — Jquery library for creating beautiful select boxes

[**Tether**](http://tether.io/) — Efficiently attach absolute positioned elements

[**Shepherd.js**](https://github.com/HubSpot/shepherd) — Guide users through your app

[**Tooltip**](https://github.com/HubSpot/tooltip) — Name speaks for itself

[**Select2**](https://select2.github.io/) — Jquery replacement for select boxes

[**IziToast**](http://izitoast.marcelodolce.com/) — Easy to implement js notifications

[**IziModal**](http://izimodal.marcelodolce.com/) — Easy to implement js modals

### CSS libraries / Design stuff

[**Animate.css**](https://daneden.github.io/animate.css/) — Animation library

[**Flat UI Colors**](https://flatuicolors.com/) — List of simple and effective main colors

[**Material design lite**](https://getmdl.io/index.html) — Framework based on Google’s material design

[**Materialui.co**](https://www.materialui.co/) — Many resources for Material design framework

[**Colorrrs**](https://www.webpagefx.com/web-design/random-color-picker/) — Random color generator

[**Section separators**](https://tympanus.net/Development/SectionSeparators/) — Css section dividers

[**Topcoat**](http://topcoat.io/) — Framework

[**Create ken burns effect**](https://www.kirupa.com/html5/ken_burns_effect_css.htm) — Ken burns effect using css3 animations

[**DynCSS**](http://www.vittoriozaccaria.net/dyn-css/) — Add functions to css, to make it dynamic

[**Magic animations**](https://www.minimamente.com/example/magic_animations/) — Name speaks for itself

[**CSSpin**](https://webkul.github.io/csspin/) — Collection of css spinners

[**Feather icons**](https://feathericons.com/) — Icons

[**Ion icons**](http://ionicons.com/) — Icons

[**Font awesome**](http://fontawesome.io/) — Icons

[**Font generator**](http://brandmark.io/font-generator/) — Combine multiple fonts and create a mixture

[**On/Off switch**](https://proto.io/freebies/onoff/) — Create on/off switch in css, good for check or radio buttons

[**UI Kit**](https://getuikit.com/) — Framework

[**Bootstrap**](http://getbootstrap.com/) — Framework

[**Foundation**](http://foundation.zurb.com/) — Framework

[**Little Widgets**](https://niceverynice.com/little-widgets/) — Html template collection

### Useful products / links

[**Capsulelink**](http://capsulelink.com) — Group, save and send links as one

[**<head> cheatsheet**](https://github.com/joshbuchea/HEAD) — a list of everything that could go into <head> tag

[**Ghost**](https://ghost.org/) — Simple blogging platform based on node.js

[**What runs**](https://www.whatruns.com/) — Chrome plugin to discover what technologies are used to build a website

[**Learn anything**](https://learn-anything.xyz/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**](https://twitter.com/ognjengt) and share some of your findings there.

Tether

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

Too Long; Didn't Read

Companies Mentioned

Coins Mentioned

@ognjengt

RELATED STORIES