In this article, I won’t talk about React, Angular, Vue, etc., or the already well-known code editors Atom, VS Code, Sublime, etc. Instead, I’ll simply share a set of tools that I think can help improve developer workflows.

You may or may not have seen most of the tools in this collection, but if any of them stand out to you, then my share has been worth it.

This list contains many kinds of resources, so I’ve grouped them here.

Javascript libraries

Particles. Js – a library for creating cool floating Particles on the Web

Three.js – a library for creating 3D objects and 3d Spaces on the Web

Fullpage.js – Fast implementation of full screen scrolling features

Typed. Js – typewriter effect

Waypoints.js – Triggers a function when scrolling to an element position

Highlight.js – Web syntax highlighting

Chart.js – Use JavaScript to create beautiful charts

Instantclick – can significantly speed up site load times, and pre-load resources with mouse hover

Chartist – Another chart library

Motio – A Sprite gallery based on animation and translation

Animstion – jQuery plugin for CSS animation transitions

Barba.js – Streaming page transitions

TwentyTwenty – a visual diff tool for comparing images

Vivus.js – Draw an animation on SVG

Wow.js – Animate while scrolling

Scrolline.js – Displays the scrolling progress while the page is scrolling

Velocity.js — Fast, smooth JavaScript animation

Animate on Scroll – Beautiful animation of page scrolling elements

Handlebars.js – Javascript template

JInvertScroll — Parallax scroll

One Page Scroll – Another page scroll library

Parallax.js – Parallax engine that responds to changes in the direction of an intelligent device

Typeahead.js – Search completion

Dragdealer. Js – Cool drag and drop

Bounce. Js – Create cool CSS3 animations

Pagepiling. Js – Full screen scrolling

Multiscroll.js – Two columns scroll vertically in reverse

Favico.js – Dynamic Favicon

Midnight.js — Fixed header switch effect

Animo.js — Anime library

Keycode – Gets the JavaScript Keycode for the keyboard keys

Sortable – Drag and drop plugin

Flexdatalist – Automatic completion

Slideout.js – Slide navigation for mobile apps

Jquerymy – Use jQuery for two-way data binding

Cleave.js – Format input in real time

Page – The client applies routing to a single Page

Selectize. Js – Hybrid selection box for adding tags

Nice Select – jQuery library to create beautiful selection boxes

Tether – Uses fixed locations to create related elements

Shepherd.js – Creates novice bootstrap for the application

Tooltip – Tooltip prompt box

Select2 – Jquery select box plugin

IziToast – Notification popover implementation

IziModal – Modal box implementation

CSS library/design related

Animate. CSS – Animation library

Flat UI Colors – Flat design Colors

Material Design Lite – A framework based on Google Material Design

Colorrrs – Random color generator

Section separators – CSS separators

Topcoat framework –

Create Ken Burns Effect – Implement the Ken Burns effect using CSS3 animation

DynCSS – Add function to CSS, dynamically CSS

Magic Animations — CSS3 implements animations

CSSpin – CSS Spinners collection

Feather ICONS – Collections of ICONS

Ion ICONS – a collection of ICONS

Font awesome — Icon collection

Font Generator – Combine multiple fonts to create a hybrid Font

On/Off Switch – Use the CSS to create On/Off switches and radio buttons

UI Kit – Framework

The Bootstrap framework –

Foundation framework –

Useful products/links

Cheatsheet – All the tags that can be written in

Ghost – Node.js-based blogging platform

What Runs – a Chrome plugin for technical analysis of web sites

Learn Anything – a powerful mind map for analyzing a topic


This is a list of some of the tools/frameworks/libraries THAT I personally use sometimes. Feel free to connect with me on Twitter and share your findings.