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
Animsition – 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 labels 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.