• Website layout and styling
• Network
• Accessibility
• Progressive Web Apps
• Performance Optimization và Caching
• Testing và Debugging
• Khái niệm ES2015 và cú pháp
• Mobile Web Forms

Website layout and styling

Cần nắm

• Chỉ sử dụng javascript để truy cập và thao tác trên DOM mà không dùng thư viện jQuery
• Khai báo document type, viewport tag phù hợp
• Responsive grid-base sử dụng CSS
• Media queries để tạo break point trên các kích thước màn hình
• Multimedia tag để hiển thị video và audio
• Responsive image theo từng resolution và hướng màn hình (ngang hay đứng) trên bất kỳ thiết bị mobile nào
• Cách bắt Sự kiện Touch và mouse

Nguồn tham khảo

• Responsive Web Design - video course của udacity, rất chi tiết và tỉ mỉ.
• Tổng quát về canh lề với Flexbox display
• Video and audio content, bài này mình dịch nếu sai chổ nào các bạn sữa giúp
• Responsive Image course
• Tầm quan trọng của thuộc tính sizes trong thẻ img
• Supporting both TouchEvent and MouseEvent
• Touch events

Network

• Request data sử dụng fetch()
• Kiểm trả response status, sau đó parse dữ liệu này về thành data có thể sử dụng
• Render dữ liệu lên trang
• Cấu hình POST request với tham số method và body
• Sử dụng đúng cách cấu hình CORS ( cross-origin resource sharing protocol ) với fetch request, tùy thuộc vào header trả về từ server
• Xử lý error bằng promise trong fetch request
• Phân tích lỗi network sử dụng các công cụ debug

Nguồn tham khảo ( mình sẽ viết từ từ )

• Giới thiệu fetch() của javascript
• Nắm vững Promise trong javascript
• HTTP access control (CORS)

Accessibility

• Cách đặt tab order để di chuyển bằng tab
• Sử dụng skip navigation link để bypass
• Tránh sử dụng nội dung ẩn làm cản trở việc di chuyển bằng tab
• Sử dụng thẻ head phù hợp để dựng cấu trúc trang
• Sử dụng các thẻ alt, label, aria-label và aria-labelledby
• Áp dụng độ tương phản thích hợp tuân theo quy ước chung
• Gởi thông báo khẩn cấp sử dụng aria-live
• Sử dụng semantic markup để giữ nội dung chính và các element khác riêng biệt

Nguồn tham khảo

• Web Fundamentals – Accessibility
• Web Accessibility
• Mobile Accessibility
• Sử dụng tabindex
• Focus
• Skip Navigation Links
• ARIA

Progressive Web Apps

• Tạo web app có thể sử dụng offline, cache các element bằng cách đưa request về service worker
• Lưu những giá trị hiển thị mặc định như màu sắc, icon (nút thêm vào màn hình chính trên điện thoại) và splash screen trong web application manifest ( hoặc dùng meta tag )
• Tách các tính năng quan trọng và UI để có thể load độc lập nội dung

Nguồn tham khảo ( mình sẽ viết từ từ )

• Progressive Web Apps Training
• Web Fundamentals - The App Shell Model
• Dựng Progressive Web App đầu tiên của bạn
• Using Service Workers

Performance Optimization và Caching

• Tránh khóa thread chính (web app chạy trên một single threat thôi) bằng web worker phù hợp

• Tối ưu render bằng cách sử dụng hợp lý

  • Compressed và minified javascript, HTML, CSS
  • Inline CSS cho một số trang nhất định, load bất đồng bộ một số stylesheet khác nếu cần
  • Inline javascript trong lúc khởi chạy render những chổ cần thiết (hoặc đánh dấu deferred, async)
  • Đặt thứ tự load phù hợp, các phần nào bắt buộc thì cho load trước, những resource khác cho nằm sau cùng
  • Hạn chế tạo DOM nhiều tầng lớp
  • Sử dụng trình duyệt để phân tích lỗi trên mobile
• Load lại file khi nó available

• Lưu lại dữ liệu xuống client

  • Quản lý session
  • Cache asset nào tốn thời gian để load
  • Sử dụng IndexedDB để lưu dữ liệu động trong lúc chạy offline

Nguồn tham khảo ( mình sẽ viết từ từ )

• Using Web Workers
• Offline Web Applications by Google
• Web Fundamentals - Performance
• The Offline Cookbook
• Cache - MDN
• Storage
• Local Storage And How To Use It On Websites
• IndexedDB API
• Get Started with Analyzing Network Performance in Chrome DevTools

Testing và Debugging

• Viết unit test để kiểm tra function
• Đặt breakpoint bên trong các function phức tạp để xác định chính xác luồn chạy có đúng không
• Sử dụng console để log thông tin
• Re-produce và fix bug dựa trên report của user

Nguồn tham khảo ( mình sẽ viết từ từ )

• Get Started with Debugging JavaScript in Chrome DevTools
• Làm việc với console trong javascript
• Debugging Service Workers

Khái niệm ES2015 và cú pháp

• Cú pháp Promise để tạo hàm bất tuần tự và xử lý lỗi
• Biến có thể sử dụng với block scope, function scope, và cách làm cho nó không thay đổi theo context sử dụng let, var, const
• String literal
• Arrow function
• Default parameter cho function
• for...of để loop và object và chạy một custom function
• Map
• Set

Nguồn tham khảo

• JavaScript Promises
• Template literals
• Arrow Function
• Rest Parameters và Spread Operator
• For...of
• Map và Object trong Javascript
• Set

Mobile Web Forms

• Sử dụng thẻ label cho input
• Input với giá trị type, name, autocomplete phù hợp
• Sử dụng input có kích thước phù hợp cho việc touch
• Suggestion cho user bằng datalist
• Validate các input ở FrontEnd ( ví dụ pattern, maxlength, required)
• Kiểm tra validate ngay lặp tức bằng pseudo-classes trên input
• Thực hiện validate khi submit

Nguồn tham khảo

• Chỉ dẫn thiết kế form từ Google
• Constraint Validation
• Validate form với HTML5

Tham khảo cách lấy chứng chỉ Web Mobile Specialist