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.