67 tools, libraries và resources giúp Web developer “dễ thở” hơn

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