Top những công cụ Front-end tôi thích nhất trong năm 2016
Lại một năm nữa trôi qua và đúng như những gì mà phần lớn mọi người luôn kì vọng, Web Platform tiếp tục bùng nổ với những sự thay đổi cùng rất nhiều công cụ và công nghệ mới hứa hẹn sẽ giúp công việc của các developer trở nên dễ dàng hơn. Như thường lệ, chúng ta đã thấy những sự cải ...
Lại một năm nữa trôi qua và đúng như những gì mà phần lớn mọi người luôn kì vọng, Web Platform tiếp tục bùng nổ với những sự thay đổi cùng rất nhiều công cụ và công nghệ mới hứa hẹn sẽ giúp công việc của các developer trở nên dễ dàng hơn.
Như thường lệ, chúng ta đã thấy những sự cải tiến cho các công cụ phổ biến như React và Angular, trong khi những công cụ mới như Vue.js cũng tạo ra được nhiều sự chú ý và nhanh chóng thu hút sự quan tâm của người dùng.
Tôi dành khá nhiều thời gian của mình cho việc nghiên cứu các công cụ, đặc biệt là những công cụ phổ biến và thường được sử dụng nhiều. Tuy nhiên, tôi cũng dành sự quan tâm đặc biệt cho những sản phẩm hội đủ những yếu tố thú vị và thực tiễn. Trong bài viết này, tôi sẽ điểm qua một số công cụ dành cho các front-end developer mà tôi yêu thích nhất trong năm nay.
Modaal
Công cụ đầu tiên mà tôi muốn đề cập đến trong bài viết này có những ưu điểm nổi trội nhờ sự linh hoạt cùng và dễ sử dụng cùng với modal window plugin.
Hiện nay có rất nhiều plugin về modal window, tuy nhiên rất hiếm khi ta kiếm được 1 plugin có thể sử dụng tất cả những tính năng và công dụng. Hay nói cách khác, modal window này hoàn toàn hoạt động đúng với mục đích của người tạo ra nó. Cụ thể, những tính năng của nó hoạt động dựa trên tương tác của người dùng, sở hữu WCAG 2.0 với tương tác ở mức AA, chấp nhận hậu như tất cả các loại nội dung, hỗ trợ full-screen và cho phép callback trước/sau khi mở và đóng, cùng với rất nhiều tính năng thú vị khác.
Dưới đây là một bản demo CodePen mà tôi sử dụng để miêu tả cách mà nó vận hành.
Nhược điểm duy nhất khi sử dụng Modaal nằm ở việc nó xem jQuery như một phần độc lập và sẽ không hoạt động với jQuery’s slim build. Bản deo CodePen mà các bạn xem phía trên sử dụng jQuery 3.1.1. Tôi cũng đã thử nghiệm nó trong phiên bản 2.0 và nhận thấy rằng Modaal hoạt động với jQuery phiên bản từ 1.11.2 trở lên.
Jam API
Dịch vụ web này có thể rất hữu ích khi bạn cần giải quyết một số vấn đề đặc biệt chứ không chỉ hoàn toàn nghiên về phát triển front-end. Theo như miêu tả của người tạo ra nó, Jam Api tựa như “một dịch vụ cho phép người dùng chuyển bất cứ trang nào họ muốn sang JSON với khả năng truy cập API sử dụng những lựa chọn của CSS.” Đặc biệt, phần CSS của nó chính là thứ cực kì hấp dẫn đối với các front-end developer.
Để sử dụng API, bạn sẽ cần thực hiện một yêu cầu POST và gửi đến website của Jam API, bao gồm URL của website mà bạn muốn thay đổi. Đoạn code sẽ khác nhau phụ thuộc vào việc bạn đang sử dụng Node, Ruby hay bất cứ một nền tảng nào khác. Đối với mục đích của chúng ta, tôi sẽ mở rộng nó trên ví của JavaScript mà họ cung cấp trên GitHub. Sử dụng cùng ví dụ đó, tôi có thể tạo ra một công cụ đon giản cho phép hiển thị những giá trị khả thi cho bất kì một CSS nào được tạo ra từ trang CSS Values.
Bạn có thể xem ví dụ trên Codepen tại đây
Dĩ nhiên, ví dụ này khá cũ bởi vì trang web CSS Values đã làm điều này rồi. Nhưng nó là một cách đơn giản để minh họa cách mà Jam API làm việc. Phần cốt lõi của JavaScript chính là đoạn này:
|
1 2 3 4 5 6 7 8 9 |
body: JSON.stringify({ url: 'http://cssvalues.com', json_data: '{"values": "#' + prop + ' ul"}' }) |
Ở đây, tôi nhập URL của website mà tôi muốn thay đổi vào, sau đó sử dụng lựa chọn của CSS để quyết định những phần cụ thể trên trang web mà tôi muốn thay đổi. Do đó vần JavaScript ở trên có thể kết hợp với đoạn dưới đây nếu người dùng thêm vào yêu tố display
|
1 2 3 |
body: JSON.stringify({ url: 'http://cssvalues.com', json_data: '{"values": "#display ul"}'}) |
Tôi nhận rằng với mỗi khu vực CSS chứa đựng một ID trùng với tên của nó. Và danh sách ở mỗi khu vực chứa đứng những giá trị sắp xếp không theo bất kì trật tự nào. Do đó nếu như bạn đã hiểu về cấu trúc của HTML, việc thu thập những giá trị này là điều không cần thiết lắm so với những gì mà dịch vụ này mang lại
postcss-grid-kiss
Phải thú thật rằng lần đầu tiên nhìn thấy công cụ này, tôi đã tưởng đây là một trò đùa nào đó. Nhưng có vẻ như đó là một plugin PostCSS thật sự với mục đích biến cú pháp của Grid Layout Module mới của W3C trở nên đơn giản một cách ngớ ngẩn.
Thông thường, khi sử dụng Grid Layout, CSS của bạn sẽ trông như thế này:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
body { display: grid; align-content: space-between; grid-template-rows: 120px 1fr 60px; grid-template-columns: 150px 1fr; grid-template-areas: "header header" "sidebar main " "footer footer" } body > header { grid-area: header; align-self: start } body > .sidebar { grid-area: sidebar } body > main { grid-area: main } body > footer { grid-area: footer; justify-self: center; align-self: end } |
Nhưng với postcss-grid-kiss, bạn sẽ viết ra được một thứ như thế này thay vào đó:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
body { grid-kiss: "+------------------------------+ " "| header ↑ | 120px" "+------------------------------+ " " " "+--150px---+ +----- auto -----+ " "| .sidebar | | main | auto " "+----------+ +----------------+ " " " "+------------------------------+ " "| ↓ | " "| → footer ← | 60px " "+------------------------------+ " } |
Hẳn bạn đang rất bất ngờ nhưng điều mà bạn thấy ngay lúc này hoàn toàn là sự thật. Bạn dường như sẽ vẽ lên bố cục website của mình sử dụng những kí tự ÁCII như một giá trị của grid-kiss. Plugin này sẽ xr lý đoạn code đó về đúng dạng CSS tương tự như thứ đã hiển thị trong ví dụ đầu tiên.
Công cụ này còn tích hợp một “sân chơi” cho phép bạn thử nghiệm những cú pháp khác nhau. Developer được khuyến khích dể sr dụng phím insert trên bàn phím của mình và sử dụng tính năng multi-cursor khi chỉnh sửa văn bản để khiến việc vẽ bố cục trở nên hiệu quả hơn.
Vì không phải là một người chuyên dùng PostCSS nên tôi vẫn chưa thật sự tận dụng công cụ này một cách nghiêm túc mà chỉ nghiên cứu về tính năng “sân chơi” của nó. Tuy nhiên, đây vẫn sẽ là một trong những công cụ tôi yêu thích.
MJML App
Chắc hẳn các bạn cũng đã nhận ra HTML email đang nổi lên như một hiện tượng và đã có rất nhiều tài nguyên lẫn công cụ được tung ra mỗi tháng nhằm hỗ trợ việc thiết kế và lập trình email tương tác. Ứng dụng MJML là một phần mềm trên máy tính cho phép bạn tạo ra và chỉnh sửa HTML email sử dụng MJML, đây là một ngôn ngữ framework tùy chọn tích hợp với email HTML tương thích.
Cả framework và ứng dụng đều được tung ra vào đầu năm nay, trong đó ứng dụng này đã được hỗ trợ trên Windows, OSX và Linux. Có rất nhiều theme cho người sử dụng lựa chọn, ngoài ra nó còn tích hợp thêm tính năng chia màn hình hiển thị và preview trực tiếp.
Đây là một ví dụ đơn giản cho cú pháp của MJML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<mjml> <mj-body> <mj-container> <mj-section> <mj-column> <mj-text>Testing</mj-text> </mj-column> </mj-section> </mj-container> </mj-body> </mjml> |
Bạn có thể nhìn thấy HTML hợp lệ đã được render tại đây. Tuy hơi rối một chút nhưng đó lại là điều khiến ngôn ngữ và ứng dụng này cực kì hữu dụng – khi bạn không phải lo lắng về việc khiến mọi thứ tương thích với nhau bởi tất cả công việc đó đã được làm sẵn cho bạn.
Ứng dụng này còn cho phép bạn xuất ra MJML hoặc HTML, và bạn có thể nhanh chóng lưu lại templates của mình dưới dạng anonymous Gists.
DevTools Timeline Viewer
Đây là một công cụ chính thức được tạo ra bởi team ChromeDevTools nhằm giúp người dùng dễ dàng quan sát và chia sẻ URLs theo dòng thời gian, từ đó giúp bạn theo dõi mọi thứ thuận tiện hơn.
Thanh Timeline nằm trong Chrome’s DevTools cho phép bạn lưu và phân tích những hoạt động trên ứng dụng, từ những thông tin đó developer có thể nghiên cứu để tìm ra những vấn đề tiềm ẩn thông qua bức tranh JavaScript.
Sau khi đã thu thập một vài thông tin trong timeline (kể cả những hoạt động như refresh trang hay tương tác với trang), bạn sẽ nhận được một biểu đồ chi tiết dựa trên những gì đã thu thập.
Khi bạn nhấp chuột phải vào timeline, bạn sẽ nhận ra có rất nhiều lựa chọn như “Load dữ liệu Timeline” và “Lưu dữ liệu Timeline”. Lựa chọn “Lưu….” sẽ xuất ra cho bạn dữ liệu timeline dưới dạng JSON. Bạn có thể lưu những dữ liệu đó vào Dropbox, GitHub Gist hay Google Drive để dễ dàng chia sẻ với những người khác. Đây là một tính năng rất thuận tiện cho việc chia sẻ thông tin đến những đồng nghiệp từ xa.
Bạn có thể xem một ví dụ về những dữ liệu tôi đã xuất ra tại đây. Nếu bạn chưa quen với Chrome’s DevTools Timeline thì tôi nghĩ bắt đầu từ đây sẽ tốt hơn.
Notification Logger
Đây là một công cụ cực kì dễ sử dụng. Khi debug JavaScript, tôi đoán bạn thường sử dụng console.log bởi vì nó có ích hơn rất nhiều so với alert(). Tuy nhiên, vẫn còn một chút khó chịu khi cứ phải mở giao diện điều khiển mỗi khi bạn muốn nhập một thứ gì đó đơn giản.
Notification Logger chuyển console.log sang desktop notification sử dụng Notification APO. Sau khi bạn đã dùng logger.init để tạo ra nó, bạn có thể nhập lệnh thông qua desktop notification, hoặc đồng thời thông qua desktop và trình điều khiển. Sau đó bạn có thể quay lại chức năng của console.log bình thường dưới cái tên logger.destroy.
Công cụ này rất hữu ích vì bạn sẽ không cần phải mở trình điều khiển mỗi khi xem log message, hơn nữa những thông báo sẽ được tách biệt khỏi trình duyệt và vì thế bạn sẽ không cần phải undock DevTools để quay về kích cỡ bình thường.
Intercooler.js
Công cụ này đã nhận được nhiều sự quan tâm trên Hack News cũng như một vài cuộc tranh luận nhỏ về sự hữu ích của nó. Intercooler.js được miêu tả như “Ajax đi kèm với những thuộc tính” khiến nó ngay lập tức nhận được sự chú ý của những người thích sự dễ dàng khi sử dụng libraries được gắn vào HTML và không cần phải dùng quá nhiều JavaScript.
Thư viện hoạt động bằng cách xác định trước thuộc tính ic-* mà bạn thêm vào HTML, có một danh sách đầy đủ những tài liệu tham khảo được chia sẻ trên trang của Intercooler.js.
Ví dụ, bạn có thể sử dụng thuộc tính như ic-target và ic-get-from để tạo ra một giao diện inline nhấp-để-chỉnh sửa; sử dụng ic-history-elt để thêm hỗ trợ URL/Lịch sử; sử dụng ic-prepend-from và ic-poll để tạo ra giao diện pause/play, và còn rất nhiều tính năng khác được mô tả trên trang ví dụ.
Nhược điểm của thư viện này là nó phụ thuộc vào jQuery. Nhưng tôi đoán rằng đây không phải là một vấn đề quá nghiêm trọng bởi vì những developer sử dụng công cụ này thường là những người sử dụng jQuery.
Intercooler hứa hẹn sẽ hỗ trợ bạn thêm Ajax vào ứng dụng hiện tại một cách “đầy đủ mà không cần phải viết lại bất cứ thứ gì” và sẽ hoạt động ổn định bên cạnh mọi công nghệ back-end cũng như JavaScript frameworks.
Một số công cụ khác
Dưới đây là một vài công cụ thú vị khác mà tôi phát hiện được trong năm qua
- RE-Build– Xây dựng những expression thông thường sử dụng ngôn ngữ tự nhiên.
- Grunt Unused– Dùng để kiểm tra những tập tin bất thườn (.jpg, .png, .css, .js, v..v.) trong một dự án và xuất chúng ra trình điều khiển cùng với lựa chọn cho phép xóa.
- Just– Một thư viện với những tiện ích miễn phí với 1 công dụng
- Landmarks– Cho phép bạn định hướng website thông qua WAI-ARIA landmarks, sử dụng bàn phím hoặc mục lục pop-up.
- Atomize– Kiểm tra những lợi ích mà website của bạn nhận được từ việc thu nhận Atomic CSS
- Ergo Web Tools– Đánh giá desktop, một công cụ phát triển front-end web dùng chi iPad
- js– Một thư viện trợ giúp dùng để remap những hiệu ứng đang có với những hiệu ứng hiệu quả hơn một cách tự động
- BackstopJS– Một phương pháp dễ dàng để kiểm tra tình trạng bố cục và những vấn đề khác liên quan đến thị giác của ứng dụng web.
Công cụ front-end mà bạn yêu thích nhất là gì?
Techtalk via Sitepoint
