Một thời gian trước, tôi đã bắt đầu một bộ sưu tập của Apple. Tôi đã theo đuổi phần cứng của Apple (và tính thẩm mỹ của nó) từ khi còn là một thiếu niên, nhưng vào thời điểm đó, tôi không có tiền để sở hữu một chiếc Mac.
Tôi có máy Mac đầu tiên khi tôi 19 tuổi. Đó là iBook 700 Mhz, được mua lại trên một trang web giống eBay ở Brazil. Tiền đến từ một dự án Flash.
Sau khi sống ở Canada vài năm nay, tôi có thêm một số tiền để chi tiêu cho sở thích. Hầu hết thời gian tôi mua thiết bị từ những người trên Craigslist.
Sau một vài máy tính xách tay và iDevices, tôi quyết định rằng tôi nên bắt đầu thu thập thông tin về iThings của mình. Lúc đầu, tôi đã tạo một Gist chứa kiểu máy, số sê-ri, cách tôi có thiết bị, hệ điều hành tối thiểu / tối đa, v.v.
Danh sách cứ ngày một lớn hơn, và nội dung bắt đầu lộn xộn. Tôi nghĩ rằng hiển thị nội dung này trên một trang web sẽ rất hoàn hảo và tôi không cần phải thuê một nhà phát triển:D
Lúc đầu, tôi quyết định sắp xếp dữ liệu của mình trong cơ sở dữ liệu SQL, với thông tin được phân phối trong các cột và bảng khác nhau. Sau đó, tôi sẽ tạo một API graphQL để cung cấp cho tôi dữ liệu cần thiết để điền vào giao diện người dùng của tôi - có thể được viết bằng React, được biên dịch bằng Babel và được đóng gói bằng Webpack.
Đọc to đoạn trước, bạn có thể thấy rằng có rất nhiều công nghệ và tôi thậm chí đã bỏ qua ngôn ngữ phụ trợ và các chi tiết giao diện người dùng như SASS hoặc các thành phần được tạo kiểu. Tất cả nghe có vẻ hơi choáng ngợp khi mục tiêu cuối cùng của tôi là hiển thị danh sách các mặt hàng có thiết kế đẹp mắt.
Nói như vậy, tôi đã nghĩ về cách tôi có thể cung cấp nội dung này mà không cần:
- Một API hoặc bất kỳ công việc phụ trợ nào
- Bất kỳ khung / thư viện JS nào
- Bất kỳ công cụ JS nào (Webpack, Babel, v.v.)
- Mọi CSS đều hoạt động
Ngoài những hạn chế này, tôi có một vài mục tiêu kéo dài:
- Tạo một trang web có khả năng truy cập tốt
- Tạo một trang web hoạt động trên các trình duyệt cũ vì tôi có máy tính chạy Mac OS 9.2 và iDevices chạy iOS 3
Đã chấp nhận thử thách. Một index.html, một vài tệp JS vani và không có CSS tùy chỉnh. Tôi muốn chia sẻ kinh nghiệm xây dựng trang web với bạn.
TL, DR:
- Trang web cuối cùng
- Mã nguồn
Hãy nói về những hạn chế, từng điểm một:
Không có API hoặc bất kỳ công việc phụ trợ nào
Một thời gian trước, tôi thấy một sản phẩm SaaS có tên là Stein. Bạn tạo dữ liệu của mình bên trong tài liệu Google Trang tính và chúng cung cấp cho bạn điểm cuối với dữ liệu của bạn. Thư viện của họ hoạt động giống như Handlebars và nó trông hoàn hảo cho trường hợp sử dụng 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 có khuôn khổ / thư viện JS và công cụ
Tôi quyết định tránh thêm khung hoặc thư viện trong dự án này vì trường hợp sử dụng không cần. Tất cả các tương tác JS trên trang này khá đơn giản (hiển thị / ẩn menu, mở màn hình phương thức, xử lý liên kết cố định).
Vì tôi không sử dụng khung / thư viện, tôi có thể tránh thêm Webpack và Babel. Không cần phải tìm hiểu kỹ về các cài đặt trước và trình tải.
P.S. Bạn có thể tranh luận rằng tôi có thể đã chọn create-react-app hoặc Next.js và giải quyết tất cả những vấn đề này, nhưng không.
Không hoạt động CSS
Tôi thích viết CSS, đặc biệt là khi tôi có thể sử dụng SASS, nhưng tôi quyết định không viết bất kỳ CSS nào ở đây. Tôi có một số lý do chính đáng để tránh làm điều đó:
- Tôi không có ý định thiết kế và mặc dù thực tế là tôi có thể làm điều gì đó trông đẹp mắt, nhưng tôi không muốn dành thời gian và năng lượng cho nó
- Tôi muốn sử dụng Tailwind CSS
Nếu bạn chưa bao giờ nghe nói về Tailwind CSS, xin đừng chỉ nghĩ “Nó chỉ là một giải pháp thay thế cho Bootstrap.” Đây là một lời giải thích ngắn gọn, hay từ trang web của họ:
Hầu hết các khung công tác CSS làm quá nhiều.
…
Thay vì các thành phần được thiết kế sẵn cố định, Tailwind cung cấp các lớp tiện ích cấp thấp cho phép bạn tạo các thiết kế hoàn toàn tùy chỉnh mà không cần rời khỏi HTML của mình.
Điều này đúng là khá nhiều. Tìm kiếm nhanh cung cấp cho bạn nhiều ứng dụng web được "xây dựng lại" bằng Tailwind CSS:
- Điện tín
- Youtube
- Chần chừ
- Coinbase
- Github
- Trello
- Netlify
Tạo một trang web có khả năng truy cập tốt
Tháng trước, tôi bắt đầu tham gia các khóa học về khả năng tiếp cận tại Đại học Deque. Nội dung của họ rất tuyệt và nó nhắc tôi rằng HTML có thể truy cập theo mặc định . Bằng cách sử dụng cấu trúc HTML ngữ nghĩa và thử nghiệm những thứ cơ bản như điều hướng bàn phím và độ tương phản màu sắc, bạn loại bỏ một số rào cản khiến người khuyết tật rời xa nội dung của bạn.
Tôi không phải là chuyên gia về khả năng tiếp cận, nhưng đây là một số điều liên quan đến khả năng tiếp cận mà tôi đã làm việc cho trang web này:
- Tắt biểu định kiểu:Bằng cách tắt biểu định kiểu, bạn có thể đảm bảo rằng nội dung của mình tuân theo một cách hợp lý / cấu trúc.
- VoiceOver:VoiceOver được bao gồm trong macOS và iOS. Nó rất đơn giản để sử dụng và bằng cách thử nghiệm với nó, bạn có thể hiểu rõ hơn về cách mọi người sử dụng tính năng này.
- Phương thức:Phương thức có thể có vấn đề. Tôi quyết định làm theo phương pháp của Ire Aderinokun.
- ax:Tiện ích mở rộng là công cụ kiểm tra khả năng tiếp cận cho các quy tắc hỗ trợ tiếp cận của WCAG 2 và Mục 508.
Nó không hoàn hảo - có một số thứ mà tôi không thực hiện cho trang web của mình, chẳng hạn như thêm liên kết bỏ qua vào nội dung chính. Nếu bạn tò mò, đây là Yêu cầu kéo với tất cả các thay đổi.
Tạo một trang web hoạt động trên các trình duyệt cũ
Tôi không thể đạt được mục tiêu này vì tôi không kiểm soát được kịch bản và phong cách. Tuy nhiên, điều đó dường như không phải là không thể. Một số điều tôi nhận thấy:
- Expedite (ứng dụng khách Stein) sử dụng tính năng tìm nạp, chỉ được thêm vào trong Safari 10. Yêu cầu tới máy chủ của họ có thể được thay thế bằng XMLHttpRequest.
- Tailwind sử dụng Flexbox trong nhiều phần tử. Safari chỉ mới bắt đầu hỗ trợ Flexbox trong iOS 7. Có lẽ tôi có thể viết một vài thuộc tính cho các phần tử hiện có của chúng để có giao diện đẹp.
- Chứng chỉ SSL có thể là một vấn đề đối với các trình duyệt cũ.
Kết luận
Tạo trang web này rất thú vị. Có một dự án thú vị như thế này đã cho tôi một lý do chính đáng để làm việc với công nghệ mà tôi không sử dụng trong công việc của mình. Có thể trong tương lai, Stein và / hoặc TailwindCSS sẽ hữu ích để tạo nguyên mẫu một tính năng hoặc xây dựng một dự án hackathon.
Thực tế là tôi đã thêm “các ràng buộc” vào dự án của mình khiến tôi phải suy nghĩ thấu đáo. Mặc dù tôi không đạt được tất cả các mục tiêu của mình, nhưng nó đã giúp tôi ngày càng hiểu nhiều hơn về cách tất cả các phần được kết nối với nhau.
Tôi hoàn toàn khuyên bạn nên làm điều gì đó như thế này để cho bạn cơ hội chơi với công nghệ khác. Nó không cần phải là một bộ sưu tập của Apple - bạn có thể tạo một trang để liệt kê những cuốn sách yêu thích của mình hoặc những chuyến đi bộ đường dài hay nhất mà bạn đã thực hiện. Trong trường hợp này, hành trình quan trọng hơn mục tiêu.
Vì tò mò, tôi đã theo dõi thời gian của mình bằng Clockify và giữa việc viết mã, tạo dữ liệu, thử nghiệm và viết bài đăng này. Tôi đã làm việc này 13 giờ.
Cũng được đăng trên blog của tôi. Theo dõi tôi trên Twitter