Trong bài viết này, tôi sẽ không nói về các font end frameworks khủng như React, Angular, Vue etc… Hay các code editor vốn đã nổi tiếng như Atom, VS Code Sublime….mà chỉ đơn giản là một list các tools mà tôi thấy khá hữu dụng trong việc tiết kiệm thời gian khi bạn lập trình.
Điều hiển nhiên là bạn sẽ có thể đã biết hay từng dùng qua vài tool trong danh sách này vì thế mà list này rất thích hợp dành cho các bạn web developer mới vào nghề và cần học hỏi thêm.
Để cho dễ nhìn cũng như theo dõi, tôi sẽ sắp xếp các tool và chia chúng thành từng nhóm khác nhau.
Javascript libraries
Particles.js — Một library để tạo ra các special effect – hạt nổi lơ lửng trên trang web
Three.js — Library dùng để tạo ra 3d objects và spaces trên web page
Typed.js — Typewriter effect
Waypoints.js — Kích hoạt một function khi bạn scroll một thứ bất kì
Highlight.js — Syntax highlighting for the web
Chart.js — Tạo ra các biểu đồ cực đẹp với javascript
Instantclick — Giảm thời gian load time của website nhờ vào việc preloading resource.
Chartist — Một library khác về biểu đồ cực đẹp.
Motio —một library dành cho sprite dựa trên animations và panning
Animstion — Jquery plugin cho css animated page transitions
Barba.js — Fluid page transitions
TwentyTwenty —một visual tool để tìm ra những thay đổi, khác biệt
Vivus.js — một library cho việc vẽ animation trên SVG
Wow.js — Chạy animations khi bạn scroll
Scrolline.js — Cho bạn biết mình đã scroll được bao nhiều, và khi nào thì hết page.
Velocity.js — javascript animations nhưng rất nhanh và mượt mà
Animate on scroll — Cái tên nói lên tất cả
Handlebars.js — Javascript templating
jInvertScroll — Parallax scrolling
One page scroll — Thư viện scrolling 1 trang
Parallax.js — Parallax Engine dành cho orientation của một thiết bị thông minh
Typeahead.js — Search completion
Dragdealer.js — Thư viện dragging
Bounce.js — Tạo các animations CSS3
Pagepiling.js — One page scroll
Multiscroll.js — Multi scroll một website, được chia thành các panels scroll theo chiều dọc
Favico.js — Dynamic favicons
Midnight.js — Switch fixed headers trên fly
Anime.js — Animation library
Keycode — Lấy javascript keycode cho một button được nhấn
Sortable — Drag & drop
Flexdatalist — Autocomplete
Slideout.js — Slideout navigation menu cho mobile apps
Jquerymy — data bindings 2 hướng sử dụng jquery
Cleave.js — Format content khi typing
Page — Client side routing cho single page applications
Selectize.js — Hybrid select box cho adding tags
Nice select — Jquery library để tao ra select boxes
Tether — attach absolute positioned elements
Shepherd.js — Hướng dẫn users dùng app
Tooltip — Cái tên thể hiện tất cả
Select2 — Jquery replacement cho select boxes
IziToast — giúp việc dùng/tạo js notifications dễ dàng hơn
IziModal — giúp việc dùng/tạo js modals dễ dàng hơn
CSS libraries / Design stuff
Animate.css — Animation library
Flat UI Colors — List các màu UI tiện lợi
Material design lite — Framework dựa trên Google’s material design
Colorrrs — Random color generator
Section separators — Css section dividers
Topcoat — Framework
Create ken burns effect — Ken burns effect sử dụng css3 animations
DynCSS — Thêm functions vào css, để khiến nó có ảnh hưởng hơn
Magic animations — Quá dễ hiểu
CSSpin — Collection của css spinners
Feather icons — Icons
Ion icons — Icons
Font awesome — Icons
Font generator — Kết hợp nhiều fonts và tạo ra một mixture
On/Off switch —Tạo on/off switch trong css
UI Kit — Framework
Bootstrap — Framework
Foundation — Framework
Useful products / links
<head> cheatsheet — list của mọi thứ có thể để vào trong <head> tag
Ghost — blogging platform dựa trên node.js
What runs — Chrome plugin để phân tích công nghệ được dùng trong một website.
Learn anything — mindmap dùng để phân tích một vật bất kì
Nguồn: topdev.vn via hackernoon
