40,211 reads
67 useful tools, libraries and resources for saving your time as a web developer
by Ognjen GataloAugust 30th, 2017
Too Long; Didn't Read
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 <a href="https://hackernoon.com/tagged/tools" target="_blank">tools</a> I find useful for speeding up a developer’s workflow.Companies Mentioned
Coins Mentioned
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.
L O A D I N G
. . . comments & more!
. . . comments & more!
