Tại Hội nghị Nhà phát triển Chrome năm 2014, có rất nhiều chủ đề và thương hiệu nói về API mới, nhưng không phải tất cả đều mới mẻ và nổi bật.
Nếu bạn là một Nhà phát triển web mới hoặc thậm chí là một nhà phát triển có kinh nghiệm sắp bắt tay vào việc khám phá các API mới, có khả năng bạn sẽ làm theo 3 bước sau: tìm hiểu, xây dựng và lặp lại.
Matt Gaunt trình bày những nỗ lực không ngừng nhằm giải quyết các vấn đề này của nhóm Nền tảng dành cho nhà phát triển Chrome.
Tìm hiểu
Kiến thức cơ bản về web là một bộ tài liệu hướng dẫn trường hợp sử dụng về nhiều chủ đề. Mục tiêu cốt lõi là giúp nhà phát triển triển khai những phương pháp hay nhất nhanh nhất có thể từ khi không có hoặc không có kiến thức.
Một trong những mục tiêu chính của khoá học Kiến thức cơ bản về web là đảm bảo rằng nếu bạn mới biết về một chủ đề nào đó, hướng dẫn này sẽ giúp giảm tình trạng "tình trạng không lựa chọn" nhiều nhất có thể. Addy Osmani sẽ trình bày vấn đề này một cách hoàn hảo tại cookie ngọt Box.
Nếu bạn phát hiện thấy bất kỳ vấn đề nào với trang web hoặc nội dung của trang web hoặc bạn muốn các nguyên tắc cơ bản về web đề cập đến một chủ đề cụ thể, vui lòng cho chúng tôi biết bằng cách gửi ý kiến phản hồi trên GitHub.
Tạo
Để giúp bạn bắt đầu một dự án web mới, chúng tôi đã tạo Bộ công cụ dành cho người mới bắt đầu web. Ứng dụng này có mọi thứ bạn cần:
- Quy trình xây dựng vững chắc
- HTML tạo sẵn
- Hướng dẫn định kiểu
Quy trình xây dựng
Đối với những người mới xây dựng quy trình xây dựng, cách dễ nhất để xem quy trình xây dựng là xem quy trình đó như một chương trình nhận một tập hợp các tệp và thực hiện một số tác vụ nhất định trên đó, đồng thời tạo ra các phiên bản mới ở một vị trí khác. Các tác vụ này sẽ tối ưu hoá tệp để cải thiện thời gian tải, kiểm tra các lỗi có thể xảy ra hoặc xử lý các tác vụ có thể tự động hoá.
Trong Bộ công cụ dành cho người mới bắt đầu web, chúng tôi có các quy trình sau:
Chúng tôi giảm kích thước và nối CSS và JavaScript để trình duyệt có thể nhanh chóng tìm nạp tệp, JavaScript cũng được chạy thông qua JSHint để kiểm tra các phương pháp hay nhất về JavaScript và các lỗi lập trình thường gặp. Hình ảnh được giảm kích thước bằng imagemin và bạn có thể giảm rất nhiều kích thước tệp khi sử dụng công cụ này. Chúng tôi cũng có quy trình tạo CSS của styleguides.
Tạo sẵn cho HTML nhiều thiết bị
Bộ HTML đầu tiên bạn viết cho một trang mới là bộ HTML khá chuẩn và có thể bạn sẽ có một số cách để nhanh chóng lưu giữ một tệp HTML có sẵn hoạt động tốt trên nhiều thiết bị và kích thước màn hình.
Trong Bộ công cụ dành cho người mới bắt đầu web, chúng tôi muốn hỗ trợ thêm cho mọi tính năng làm mờ ranh giới giữa nền tảng và trang web. Vì vậy, chúng tôi đã thêm tính năng hỗ trợ tính năng thêm vào màn hình chính và màn hình chờ cho Android, Windows Phone, iOS và Opera Coast.
Hướng dẫn định kiểu
Phần cuối cùng của Bộ công cụ dành cho người mới bắt đầu web là Hướng dẫn kiểu.
Điều này mang lại cho bất kỳ dự án mới nào một tập hợp tuyệt vời các kiểu và thành phần mặc định để khuyến khích phát triển theo phong cách. Bạn có thể thay đổi kiểu hiện có cho các phần tử và thêm kiểu của riêng bạn.
Trong phiên bản WSK tiếp theo, dự kiến sẽ phát hành vào đầu năm sau, chúng tôi đang nỗ lực để đơn giản hoá cách phối hợp giữa hướng dẫn định kiểu và chuyển sang giao diện Material Design. Mattđã đưa ramột bản mô phỏng sớm về giao diện của quy trình này tại Hội nghị Nhà phát triển Chrome. Bạn có thể xem một ví dụ dưới đây.
Làm lại
Khi đã bắt đầu áp dụng kiến thức mới vào thực tế, bạn nên sử dụng Công cụ cho nhà phát triển để gỡ lỗi, cải thiện và duy trì công việc của mình.
Một số tính năng quan trọng mới xuất hiện trong Công cụ cho nhà phát triển. Matt sẽ xem xét các tính năng mới sau đây.
Chế độ thiết bị
Chế độ thiết bị là một phần mới trong Công cụ cho nhà phát triển, cho phép bạn xem nhanh cách trang web của mình hoạt động trên nhiều thiết bị di động, đồng thời xem các truy vấn nội dung nghe nhìn trong CSS.
Một trong những tính năng tuyệt vời của Chế độ thiết bị là khả năng điều tiết tốc độ mạng, cho phép bạn mô phỏng trải nghiệm của người dùng trên kết nối GPRS, EDGE, 3G, DSL hoặc Wifi.
Trình phân tích tài nguyên vẽ
Nếu đã từng mở thẻ dòng thời gian rồi nhấn vào nút ghi, có lẽ bạn đã thấy một số sự kiện vẽ xảy ra trong thác nước. Thông thường, đây sẽ là một hộp đen không có cách nào để bạn biết lý do trình duyệt hoạt động hoặc hoạt động của trình duyệt.
Trình phân tích tài nguyên sự kiện vẽ không cung cấp cho bạn thêm thông tin về chính xác hoạt động của trình duyệt trong quá trình hiển thị đó.
Theo dõi việc vô hiệu hoá
Công cụ cho nhà phát triển hiện sẽ đưa ra lý do tại sao một lớp sơn hoặc bố cục xuất hiện bất cứ khi nào có thể. Điều này rất hữu ích đối với những ai đang tìm hiểu về tiến trình, hành vi của trình duyệt và cho phép bạn tối ưu hoá mã để ngăn chặn các vấn đề về hiệu suất.
Chế độ xem biểu đồ hình ngọn lửa
Đây là một cách rất khác để xem thông tin có sẵn trong tiến trình. Nhờ vậy, bạn có thể dễ dàng xem mức độ trùng lặp của các tác vụ và hành vi của trình duyệt do các tác vụ khác thực hiện.
Trình xem khung hình
Khi ở chế độ xem Biểu đồ hình ngọn lửa, bạn có thể chọn một khung cụ thể và trong khung này, bạn có thể tìm hiểu xem phần tử nào trong trang đã được thăng cấp lên lớp tổng hợp cũng như lý do các phần tử đó được quảng bá.
Học hỏi. Xây dựng. Làm lại
Đây là một số nỗ lực của nhóm Chrome nhằm giúp nhà phát triển bắt kịp tốc độ phát triển web, vì vậy, hãy nhớ xem Kiến thức cơ bản về web, Bộ công cụ dành cho người mới bắt đầu web và các tính năng mới trong Công cụ của Chrome cho nhà phát triển.