18 nguồn tài liệu học tập cho các nhà phát triển front-end
Như bạn đã biết, thật khó để theo kịp với những gì mới trong phát triển web. Ngay cả từ cách nhìn nhận về front-end, bạn có thể dễ dàng bị tụt lại phía sau và khiến kỹ năng trở nên lạc hậu.
Vì vậy, có thể sẽ mất vài phút hoặc thậm chí vài giờ để cải thiện kỹ năng viết code bằng cách học một công nghệ mới, API hoặc library.
Để giúp bạn cải thiện kỹ năng, bài viết này đã tổng hợp gần 20 nguồn tài liệu giúp bạn nghiên cứu về phát triển front-end bao gồm các trang tương tác, hướng dẫn, cheat sheet và nhiều thứ khác.
1. CSS Grid Playground
Một hướng dẫn trực quan do nhóm Mozilla tạo ra để giúp bạn tìm hiểu các tính năng Grid Layout mới của CSS với nhiều ví dụ và demo. Hướng dẫn hoạt động như một phần của quảng cáo cho trình duyệt Firefox Developer Edition, nhưng đây vẫn là một hướng dẫn tuyệt vời sẽ hữu ích cho bất cứ ai mới bắt đầu với CSS Grid.
2. Modern Javascript Cheatsheet
Bộ sưu tập các mẹo và khái niệm JavaScript của Manuel Beaudru hoạt động như một cái nhìn tổng quan về nhiều điều bạn cần làm quen nếu bạn chỉ mới bắt đầu với một khuôn khổ hiện đại như React hay bất kỳ codebase lớn nào sử dụng tính năng ES6 mới. Tuy nhiên, đây không phải là nơi khởi đầu tốt cho người mới sử dụng JavaScript, nhưng lại hữu ích cho bất kỳ ai đã quen với JavaScript mà không quen với các công cụ và tính năng hiện đại.
3. CSS Support Guide For Email Clients
Campaign Monitor là nhà cung cấp dịch vụ marketing và cung cấp dịch vụ email phổ biến đã có một hướng dẫn email CSS trong nhiều năm. Mục đích của hướng dẫn là cho phép tìm kiếm một tính năng CSS và nó sẽ cho biết những gì email client và tính năng mà nền tảng có sẵn. Hướng dẫn đã được cập nhật gần đây để bao gồm các tính năng CSS mới và các mail client mới.
4. Learn Git
Git là một lựa chọn tiêu chuẩn trong hầu hết các môi trường nhóm, vì vậy nếu chưa hiểu rõ cách sử dụng, đây có thể là điểm khởi đầu tốt cho bạn. Nó được sản xuất bởi nhóm Microsoft Visual Studio. Hướng dẫ Git bao gồm phiên bản điều khiển cơ bản, cài đặt, thiết lập và nhiều hơn nữa.
5. Learn Regex The Easy Way
Hướng dẫn dựa trên GitHub toàn diện được dịch ra 8 loại ngôn ngữ để giúp bạn bắt đầu với Regular Expressions, một kỹ năng hữu ích trong mọi ngôn ngữ lập trình. Mỗi phần thảo luận về một tính năng cụ thể của cú pháp Regular Expression đi kèm với các ví dụ và demo trực tiếp thông qua sân chơi RegExp phổ biến.
6. Es2015+ Cheatsheet
Nếu bạn có kinh nghiệm với JavaScript, nhưng vẫn chưa bắt kịp với nhiều tính năng mới được giới thiệu sau phiên bản ECMAScript 5, bản tóm tắt này có thể là chính xác những gì bạn đang tìm kiếm.
7. Essential Image Optimization
Addy Osmani (chuyên gia hiệu suất, kỹ sư của Google) đã viết bài hướng dẫn chi tiết để tối ưu hoá hình ảnh. Ông đề cập đến hình ảnh một cách chính xác như là "nguyên nhân số một gây ra bloat trên web" và nói về các loại hình ảnh khác nhau, các kỹ thuật tối ưu hoá, các công cụ tự động hóa, các mạng phân phối nội dung và nhiều hơn nữa.
8. Grid By Example
Grid Layout Module đã cùng với chuyên gia Rachel Andrew đưa ra trang này để cung cấp "mọi thứ bạn cần để học về CSS Layout Grid". Bao gồm các code ví dụ, mẫu bố trí được xây dựng trước, một loạt hướng dẫn bằng video và nhiều liên kết để đọc thêm.
9. React Cheat Sheet
Cập nhật gần đây cho phiên bản mới nhất của React (phiên bản 16) và chính trang web này bây giờ là một ứng dụng web tiến bộ với đầy đủ chức năng (PWA) hoạt động ngay cả khi ngoại tuyến. Bạn có thể tìm kiếm theo từ khóa hoặc chọn một trong các bộ lọc được xác định trước.
10. React Accessibility
Nếu bạn đang sử dụng thư viện như React, có thể bạn nên quan tâm đến các vấn đề về khả năng tiếp cận do bản chất của thư viện. Hướng dẫn này trong tài liệu React chính thức bao gồm một số mẹo về tính khả dụng cho các dự án phản hồi và bao gồm các đề xuất liên quan đến WAI-ARIA, ngữ nghĩa HTML, các biểu mẫu, quản lý các công cụ tập trung và khả năng truy cập.
11. Polymer 2.X Cheat Sheet
Bài viết trên blog của Monica Dinculescu, một kỹ sư của Google làm việc cho dự án Polymer, đóng vai trò là tài nguyên tham khảo nhanh và chuyên sâu về phiên bản mới nhất của thư viện Web Components phổ biến.
12. Bootstrap 4 Cheatsheet
Một vận dụng được phân loại cheat sheet cho Bootstrap, framework web front-end phổ biến, với lựa chọn nhấp chuột để làm nổi bật những thứ mới trong Bootstrap 4. Nhấp vào một category, sau đó nhấp vào bất kỳ item để xem code và xem trước trực tiếp các thành phần được lựa chọn.
13. Learn CSS Grid
Một hướng dẫn mở rộng khác về Grid với cách bố trí đẹp, sạch sẽ và đơn giản.
14. React Express
6 chương về thủ thuật và hướng dẫn để học tập xây dựng các ứng dụng web với React. Thảo luận về thiết lập môi trường, xây dựng các công cụ, JSX, cùng với tất cả các nguyên tắc cơ bản để bắt đầu viết các ứng dụng trong React.
15. CSS Cheat Sheet
Một thiết kế rất độc đáo và đơn giản sử dụng tài liệu tham khảo one-page cho các CSS selector và properties. Đây là một trong những phân loại có thể làm việc tốt như là một hướng dẫn cho người mới bắt đầu. Nó cũng bao gồm các loại cho Flexbox và CSS Grid.
16. The Modern Javascript Tutorial
Một tài nguyên toàn diện cho việc học JavaScript, hữu ích đối với tất cả các trình độ của các nhà phát triển JavaScript. Trang web được chia thành ba phần: Ngôn ngữ JavaScript, DOM, và các bài viết linh tinh khác.
17. React Faq
Đây là một bộ sưu tập thú vị của React concepts trong định dạng Q&A bao gồm nhiều chủ đề khác nhau. Có thể làm việc tốt như hướng dẫn đối với người mới bắt đầu hoặc thậm chí là một tài liệu tham khảo nhanh cho các nhà phát triển có kinh nghiệm.
18. HTML5 Mobile Feature Checker
Đây là trang web tham khảo để nhận được tổng quan về hỗ trợ cho các API Web khác nhau trên điện thoại di động. Nó liệt kê danh sách "an toàn" so với những trang không an toàn (được gọi là "không được hỗ trợ"). Bạn có thể nhấp vào từng tính năng riêng lẻ để biết thông tin chi tiết về những thiết bị và nền tảng hỗ trợ nó.
Như bạn đã biết, thật khó để theo kịp với những gì mới trong phát triển web. Ngay cả từ cách nhìn nhận về front-end, bạn có thể dễ dàng bị tụt lại phía sau và khiến kỹ năng trở nên lạc hậu.
Vì vậy, có thể sẽ mất vài phút hoặc thậm chí vài giờ để cải thiện kỹ năng viết code bằng cách học một công nghệ mới, API hoặc library.
Để giúp bạn cải thiện kỹ năng, bài viết này đã tổng hợp gần 20 nguồn tài liệu giúp bạn nghiên cứu về phát triển front-end bao gồm các trang tương tác, hướng dẫn, cheat sheet và nhiều thứ khác.
1. CSS Grid Playground
Một hướng dẫn trực quan do nhóm Mozilla tạo ra để giúp bạn tìm hiểu các tính năng Grid Layout mới của CSS với nhiều ví dụ và demo. Hướng dẫn hoạt động như một phần của quảng cáo cho trình duyệt Firefox Developer Edition, nhưng đây vẫn là một hướng dẫn tuyệt vời sẽ hữu ích cho bất cứ ai mới bắt đầu với CSS Grid.
Bộ sưu tập các mẹo và khái niệm JavaScript của Manuel Beaudru hoạt động như một cái nhìn tổng quan về nhiều điều bạn cần làm quen nếu bạn chỉ mới bắt đầu với một khuôn khổ hiện đại như React hay bất kỳ codebase lớn nào sử dụng tính năng ES6 mới. Tuy nhiên, đây không phải là nơi khởi đầu tốt cho người mới sử dụng JavaScript, nhưng lại hữu ích cho bất kỳ ai đã quen với JavaScript mà không quen với các công cụ và tính năng hiện đại.
Campaign Monitor là nhà cung cấp dịch vụ marketing và cung cấp dịch vụ email phổ biến đã có một hướng dẫn email CSS trong nhiều năm. Mục đích của hướng dẫn là cho phép tìm kiếm một tính năng CSS và nó sẽ cho biết những gì email client và tính năng mà nền tảng có sẵn. Hướng dẫn đã được cập nhật gần đây để bao gồm các tính năng CSS mới và các mail client mới.
Git là một lựa chọn tiêu chuẩn trong hầu hết các môi trường nhóm, vì vậy nếu chưa hiểu rõ cách sử dụng, đây có thể là điểm khởi đầu tốt cho bạn. Nó được sản xuất bởi nhóm Microsoft Visual Studio. Hướng dẫ Git bao gồm phiên bản điều khiển cơ bản, cài đặt, thiết lập và nhiều hơn nữa.
Hướng dẫn dựa trên GitHub toàn diện được dịch ra 8 loại ngôn ngữ để giúp bạn bắt đầu với Regular Expressions, một kỹ năng hữu ích trong mọi ngôn ngữ lập trình. Mỗi phần thảo luận về một tính năng cụ thể của cú pháp Regular Expression đi kèm với các ví dụ và demo trực tiếp thông qua sân chơi RegExp phổ biến.
Nếu bạn có kinh nghiệm với JavaScript, nhưng vẫn chưa bắt kịp với nhiều tính năng mới được giới thiệu sau phiên bản ECMAScript 5, bản tóm tắt này có thể là chính xác những gì bạn đang tìm kiếm.
Addy Osmani (chuyên gia hiệu suất, kỹ sư của Google) đã viết bài hướng dẫn chi tiết để tối ưu hoá hình ảnh. Ông đề cập đến hình ảnh một cách chính xác như là "nguyên nhân số một gây ra bloat trên web" và nói về các loại hình ảnh khác nhau, các kỹ thuật tối ưu hoá, các công cụ tự động hóa, các mạng phân phối nội dung và nhiều hơn nữa.
Grid Layout Module đã cùng với chuyên gia Rachel Andrew đưa ra trang này để cung cấp "mọi thứ bạn cần để học về CSS Layout Grid". Bao gồm các code ví dụ, mẫu bố trí được xây dựng trước, một loạt hướng dẫn bằng video và nhiều liên kết để đọc thêm.
Cập nhật gần đây cho phiên bản mới nhất của React (phiên bản 16) và chính trang web này bây giờ là một ứng dụng web tiến bộ với đầy đủ chức năng (PWA) hoạt động ngay cả khi ngoại tuyến. Bạn có thể tìm kiếm theo từ khóa hoặc chọn một trong các bộ lọc được xác định trước.
Nếu bạn đang sử dụng thư viện như React, có thể bạn nên quan tâm đến các vấn đề về khả năng tiếp cận do bản chất của thư viện. Hướng dẫn này trong tài liệu React chính thức bao gồm một số mẹo về tính khả dụng cho các dự án phản hồi và bao gồm các đề xuất liên quan đến WAI-ARIA, ngữ nghĩa HTML, các biểu mẫu, quản lý các công cụ tập trung và khả năng truy cập.
Bài viết trên blog của Monica Dinculescu, một kỹ sư của Google làm việc cho dự án Polymer, đóng vai trò là tài nguyên tham khảo nhanh và chuyên sâu về phiên bản mới nhất của thư viện Web Components phổ biến.
Một vận dụng được phân loại cheat sheet cho Bootstrap, framework web front-end phổ biến, với lựa chọn nhấp chuột để làm nổi bật những thứ mới trong Bootstrap 4. Nhấp vào một category, sau đó nhấp vào bất kỳ item để xem code và xem trước trực tiếp các thành phần được lựa chọn.
Một hướng dẫn mở rộng khác về Grid với cách bố trí đẹp, sạch sẽ và đơn giản.
6 chương về thủ thuật và hướng dẫn để học tập xây dựng các ứng dụng web với React. Thảo luận về thiết lập môi trường, xây dựng các công cụ, JSX, cùng với tất cả các nguyên tắc cơ bản để bắt đầu viết các ứng dụng trong React.
Một thiết kế rất độc đáo và đơn giản sử dụng tài liệu tham khảo one-page cho các CSS selector và properties. Đây là một trong những phân loại có thể làm việc tốt như là một hướng dẫn cho người mới bắt đầu. Nó cũng bao gồm các loại cho Flexbox và CSS Grid.
Một tài nguyên toàn diện cho việc học JavaScript, hữu ích đối với tất cả các trình độ của các nhà phát triển JavaScript. Trang web được chia thành ba phần: Ngôn ngữ JavaScript, DOM, và các bài viết linh tinh khác.
Đây là một bộ sưu tập thú vị của React concepts trong định dạng Q&A bao gồm nhiều chủ đề khác nhau. Có thể làm việc tốt như hướng dẫn đối với người mới bắt đầu hoặc thậm chí là một tài liệu tham khảo nhanh cho các nhà phát triển có kinh nghiệm.
Đây là trang web tham khảo để nhận được tổng quan về hỗ trợ cho các API Web khác nhau trên điện thoại di động. Nó liệt kê danh sách "an toàn" so với những trang không an toàn (được gọi là "không được hỗ trợ"). Bạn có thể nhấp vào từng tính năng riêng lẻ để biết thông tin chi tiết về những thiết bị và nền tảng hỗ trợ nó.
PVS - Theo Developerdrive
