Computer >> Hướng Dẫn Máy Tính >  >> Hệ Thống >> Mac

Tạo website chuyên biệt trưng bày bộ sưu tập Apple của tôi

Một thời gian trước tôi bắt đầu bộ sưu tập Apple. Tôi theo dõi phần cứng Apple (và thẩm mỹ) từ tuổi teen, nhưng lúc đó không có tiền mua Mac.

Tôi có Mac đầu tiên lúc 19 tuổi. Là iBook 700 MHz, mua trên trang kiểu eBay tại Brazil. Tiền từ dự án Flash.

Sau vài năm sống Canada, tôi có tiền dư dả cho sở thích. Thường mua thiết bị từ người bán trên Craigslist.

Sau vài laptop và iDevice, tôi quyết định thu thập thông tin về các iThings. Ban đầu tạo Gist chứa model, serial number, cách có thiết bị, OS min/max, v.v.

Danh sách ngày càng lớn, nội dung trông rối rắm. Tôi nghĩ hiển thị nội dung trên website sẽ hoàn hảo, và không cần thuê developer :D

Lúc đầu quyết định tổ chức dữ liệu trong database SQL, thông tin phân bố cột và bảng khác nhau. Sau đó tạo graphQL API cung cấp dữ liệu cho UI — viết React, compile Babel, pack Webpack.

Đọc lại đoạn trên, thấy nhiều công nghệ, còn bỏ qua backend language và chi tiết UI như SASS hay styled-components. Nghe hơi overwhelming khi mục tiêu chỉ là hiển thị danh sách item với thiết kế đẹp.

Vì vậy tôi suy nghĩ cách phân phối nội dung mà không cần:

  • API hoặc bất kỳ backend work nào
  • Framework/thư viện JS nào
  • Tooling JS nào (Webpack, Babel, v.v.)
  • CSS work nào

Ngoài ra, có vài mục tiêu mở rộng:

  • Tạo website với accessibility (khả năng tiếp cận) tốt
  • Tạo website chạy trên trình duyệt cũ, vì tôi có máy chạy Mac OS 9.2 và iDevice chạy iOS 3

Thử thách accepted. Một file index.html, vài file vanilla JS, không custom CSS. Tôi muốn chia sẻ trải nghiệm xây dựng site với bạn.

TL;DR:

  • Website hoàn thiện
  • Source code

Hãy nói về các ràng buộc, từng điểm:

Không API hoặc backend work

Lúc trước tôi thấy sản phẩm SaaS tên Stein. Bạn tạo dữ liệu trong Google Sheets, họ cho endpoint dữ liệu. Thư viện hoạt động như Handlebars, trông hoàn h hợp cho trường hợp của tôi:

<div data-stein-url="https://api.steinhq.com/v1/storages/5cc158079ec99a2f484dcb40/Sheet1" data-stein-limit="2">
  <div>
    <h1>{{title}}</h1>
    <h6>By {{author}}</h6>
    {{content}}
    Read on <a href="{{link}}">Medium</a>
  </div>
</div>

Không JS framework/library và tooling

Quyết định tránh framework/thư viện vì use case không cần. Tất cả tương tác JS trên trang đơn giản (show/hide menu, mở modal, xử lý permalink).

Không dùng framework/thư viện → tránh Webpack, Babel. Không đào sâu preset và loader.

P.S. Bạn có thể tranh luận tôi có thể dùng create-react-app hoặc Next.js giải quyết mọi vấn đề, nhưng không.

Không CSS work

Tôi thích viết CSS, nhất là với SASS, nhưng quyết định không viết CSS ở đây. Có vài lý do:

  • Không có design trong đầu, dù có thể làm đẹp, nhưng không muốn đầu tư thời gian/năng lượng
  • Muốn dùng Tailwind CSS

Nếu chưa nghe Tailwind CSS, đừng chỉ nghĩ "chỉ là alternative Bootstrap". Giải thích ngắn gọn từ trang chủ:

Hầu hết CSS framework làm quá nhiều.
…
Thay vì component thiết kế sẵn có quan điểm, Tailwind cung cấp utility classes cấp thấp cho phép xây dựng thiết kế hoàn toàn tùy chỉnh không bao giờ rời khỏi HTML.

Điều này khá đúng. Tìm kiếm nhanh cho nhiều web app "rebuilt" với Tailwind CSS:

  • Whatsapp
  • Telegram
  • Facebook
  • Reddit
  • Youtube
  • Slack
  • Coinbase
  • Github
  • Trello
  • Twitter
  • Netlify

Tạo website với accessibility tốt

Tháng trước tôi bắt đầu khóa accessibility tại Deque University. Nội dung tuyệt vời và nhắc nhở HTML accessible by default (HTML có khả năng tiếp cận mặc định). Bằng cách dùng cấu trúc HTML semantic và test điều cơ bản như điều hướng bàn phím, độ tương phản màu, bạn loại bỏ rào cản đẩy người khuyết tật ra khỏi nội dung.

Tôi không phải chuyên gia accessibility, nhưng đây là vài việc liên quan accessibility tôi làm cho website:

  • Disable stylesheet: Tắt stylesheet đảm bảo nội dung tuân theo trình tự logic/cấu trúc.
  • VoiceOver: VoiceOver có sẵn macOS/iOS. Rất đơn giản dùng, thử nghiệm giúp hiểu cách mọi người dùng tính năng này.
  • Modals: Modal có thể gây vấn đề. Tôi theo cách tiếp cận của Ire Aderinokun.
  • axe: Extension kiểm tra accessibility cho WCAG 2 và Section 508.

Chưa hoàn hảo — có vài việc tôi chưa làm cho site, như thêm skip link đến main content. Nếu tò mò, đây là Pull Request với mọi thay đổi.

Tạo website chạy trên trình duyệt cũ

Tôi không đạt mục tiêu này vì không kiểm soát scripts và styles. Tuy nhiên, không có vẻ như không thể. Một vài quan sát:

  • Expedite (Stein client) dùng fetch, chỉ thêm vào Safari 10. Request đến server có thể thay bằng XMLHttpRequest.
  • Tailwind dùng Flexbox nhiều element. Safari chỉ hỗ trợ Flexbox từ iOS 7. Có thể viết vài property cho element hiện có để đạt giao diện acceptable.
  • SSL Certificates có thể gây vấn đề cho trình duyệt cũ.

Kết luận

Làm website này siêu vui. Pet project kiểu này cho lý do tốt làm việc với tech không dùng trong công việc. Có lẽ sau này Stein và/hoặc TailwindCSS hữu ích prototype feature hoặc hackathon project.

Việc đặt "ràng buộc" cho dự án khiến tôi tư duy out-of-the-box. Dù không đạt tất cả mục tiêu, giúp hiểu hơn cách các mảnh ghép nối nhau.

Tôi hoàn toàn khuyên làm điều tương tự để có cơ hội chơi với tech khác. Không cần bộ sưu tập Apple — làm site liệt kê sách yêu thích hoặc hike hay nhất. Hành trình quan trọng hơn đích.

Tò mò, tôi track thời gian bằng Clockify: giữa coding, tạo data, test, viết bài — 13 giờ.

Cũng đăng trên blog cá nhân. Follow tôi trên Twitter