Useful library javascript for Frontend developer

😁 Greetings, everyone! Welcome back to the Learn Tech Tips Blog. In today's session, I'll be sharing some invaluable tools for web developers. Make sure to save and bookmark them; they're bound to be beneficial in your professional journey.😁

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 

mattboldt/typed.js: A JavaScript Typing Animation Library

)— Typewriter effect

Waypoints.js — Trigger a function when you scroll to an element

Highlight.js — Syntax highlighting for the web

Chart.js,  Chartist  - Make beautiful charts using only javascript

Instantclick — Dramatically speed up your website load time, preloading resources on mouse hover

Animate.css — Animation library, Same Wow

Magic animations — same Wow

Explore My Other Channel for More Cool and Valuable Insights

👉 Youtube Learn Tech Tips

👉 Tiktok

👉 Facebook:

Animstion — Wow.js Jquery plugin for css animated page transitions / Reveal animations when you scroll 

Barba.js — Fluid page transitions, is a small (7kb minified and compressed) and easy-to-use library that helps you create fluid and smooth transitions between your website's pages. It makes your website run like a SPA (Single Page Application) and help reduce the delay between your pages, minimize browser HTTP requests and enhance your user's web experience.

TwentyTwenty — A visual diff tool to spot differences, Need to highlight the differences between two images? TwentyTwenty, a visual diff tool, makes it easy to spot them!

Vivus.js — A library for making drawing animation on SVG, Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearance of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG in whatever way you like.

Scrolline.js — See how much you have scrolled untill the end of the page, A jQuery plugin. Create a scroll line bar indicator on the page.

Velocity.js — Very fast and smooth javascript animations

Animate on scroll — Pretty straightforward

Handlebars.js — Javascript templating

  

One page scroll , Pagepiling.js  -  one page scrolling library

Parallax.js — Parallax Engine that reacts to the orientation of a smart device

Typeahead.js , Flexdatalist —  Search completion, Autocomplete

  

Multiscroll.js — Multi scroll a website into two vertical scrolling panels

Favico.js — Dynamic favicons

Anime.js — Animation library

Keycode — Get javascript keycode for a button that is pressed

 

Slideout.js — Slideout navigation menu for mobile apps

Jquerymy — Two way data bindings using jquery, useful when do demo UI and code at the same time

Cleave.js — Format content while typing

Page — Client side routing for single page applications

Selectize.js — Hybrid select box for adding tags, Selectize is the hybrid of a textbox and <select> box. It's jQuery-based and it's useful for tagging, contact lists, country selectors, and so on.

Select2 — Jquery replacement for select boxes

Nice select — Jquery library for creating beautiful select boxes

Shepherd.js — Guide users through your app

Tooltip — Name speaks for itself

IziToast — Easy to implement js notifications

 

CSS libraries / Design stuff 

Materialui.co — Many resources for Material design framework

Colorrrs — Random color generator

Flat UI Colors — List of simple and effective main colors

Material design lite — Framework based on Google’s material design

Section separators — Css section dividers

Framework for frontend fast to web apps development

Topcoat — CSS Framework, like bootstrap but very fast and easy use, CSS for clean and fast web apps

Bootstrap — Framework Frontend

UI Kit — Framework Frontend like Bootstrap, TailwindCSS

Foundation — Framework front end same TailwindCSS

Create ken burns effect — Ken burns effect using css3 animations

Spin Collections

CSS Spin Collection: by Learn Tech Tips

CSSpin — Collection of css spinners

Feather icons — Icons need download for insert in website

Icons Collections 

Ion icons — Icons (no need download, just add library and add icon code)

 

heroicons

Font awesome — Icons (no need download, just add library and add icon code)

Font generator — Combine multiple fonts and create a mixture, very useful for check when create a website, we need the random ideas for font.

On/Off switch — Create on/off switch in css, good for check or radio buttons

Another

Little Widgets — Html template collection (pay, not free) 

Useful products / links

 

<head> cheatsheet — a list of everything that could go into <head> tag, wow, this is full description for head descriotion on website, google, facebook, faviour icon

Ghost — Simple blogging platform based on node.js (pay, not free)

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 (pay, not free)

This is the list of some tools/frameworks/libraries I personally have been using for some time.

Thanks for: https://hackernoon.com/67-useful-tools-libraries-and-resources-for-saving-your-time-as-a-web-developer-7d3fb8667030 sharing the link, and I will use this as a foundation to provide a more detailed explanation. Thanks for everyone ~, your welcome

Thank you for reading this post. I hope you found it helpful and easy to follow. If you have any feedback or questions about Useful library javascript for Frontend developer , please share them in the comments below. I would love to hear from you and discuss this topic further

✋✋✋✋  Webzone Tech Tips, all things Tech Tips for web development  - I am Zidane, See you next time soon ✋✋✋✋