home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> ระบบ >> Mac

สร้างเว็บไซต์เฉพาะตัวแสดงคอลเลกชัน Apple ของผม

พอสมควรผมเริ่มสะสมอุปกรณ์ Apple ผมติดตามฮาร์ดแวร์ Apple (และความสวยงามของมัน) มาตั้งแต่วัยรุ่น แต่ตอนนั้นไม่มีเงินซื้อ Mac

ผมได้ Mac เครื่องแรกตอนอายุ 19 ปี คือ iBook 700 MHz ซื้อจากเว็บแบบ eBay ใน البرازيل เงินมาจากโปรเจกต์ Flash

หลังอยู่แคนาดามักปี มีเงินเก็บซื้อของสะสมเป็นงานอดิเรก ส่วนใหญ่ซื้อจากคนบน Craigslist

หลังจากมีแล็ปท็อปและ iDevices หลายเครื่อง ผมคิดว่าควรจัดเก็บข้อมูลอุปกรณ์ของผม เริ่มต้นสร้าง Gist บันทึกรุ่น หมายเลขซีเรียล วิธีได้มา OS ต่ำสุด/สูงสุด ฯลฯ

รายการใหญ่ขึ้นเรื่อยๆ เนื้อหาเริ่มดูวุ่นวาย ผมคิดว่าโชว์บนเว็บไซต์จะดีที่สุด และไม่ต้องจ้าง Developer :D

เริ่มต้นผมคิดจะจัดข้อมูลใน SQL Database แบ่งคอลัมน์และตาราง แล้วสร้าง GraphQL API ให้ข้อมูลสำหรับ UI - อาจเขียนด้วย React คอมไพล์ด้วย Babel แพ็คด้วย Webpack

อ่านย้อนกลับจะเห็นว่าเทคโนโลยีเยอะมาก และผมยังไม่ได้พูดถึง Backend language และรายละเอียด UI เช่น SASS หรือ styled-components 聽起มาทำซับซ้อนเกินไป เป้าหมายสุดท้ายแค่แสดงรายการของสะสมในดีไซน์สวยงาม

ผมจึงคิดว่าจะส่งมอบเนื้อหานี้ได้อย่างไร โดยไม่ต้อง:

  • API หรือ Backend work ใดๆ
  • JS Framework/Library ใดๆ
  • JS Tooling (Webpack, Babel ฯลฯ)
  • CSS work ใดๆ

นอกจากนี้ยังมี Stretch Goals:

  • สร้างเว็บไซต์ที่มี Accessibility ดี
  • สร้างเว็บไซต์ที่ทำงานบน Browser เก่า เพราะผมมีเครื่องรัน Mac OS 9.2 และ iDevices รัน iOS 3

Challenge accepted! ไฟล์ index.html เดียว ไฟล์ Vanilla JS ไปๆ ไม่มี Custom CSS ผมอยากแบ่งปันประสบการณ์สร้างเว็บนี้

TL,DR:

  • เว็บไซต์ 완성
  • Source code

มาพูดถึง Constraints ทีละประการ:

ไม่มี API หรือ Backend Work

พอดีเคยเห็น SaaS ชื่อ Stein สร้างข้อมูลใน Google Sheets พวกเขาให้ Endpoint พร้อมข้อมูล Library ทำงานคล้าย Handlebars เหมาะกับ Use Case ของผมพอดี:

<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>

ไม่มี JS Framework/Library และ Tooling

ผมตัดสินใจไม่ใช้ Framework/Library เพราะ Use Case ไม่จำเป็น JS interactions บนหน้านี้ง่ายมาก (show/hide menus, open modal, handle permalinks)

ไม่ใช้ Framework/Library จึงหลีกเลี่ยง Webpack และ Babel ไม่ต้องเจอกับ Presets และ Loaders

P.S. อาจโต้แย้งได้ว่าใช้ create-react-app หรือ Next.js แก้ปัญหาเหล่านี้ได้ แต่ผมไม่ทำ

ไม่มี CSS Work

ผมชอบเขียน CSS โดยเฉพาะตอนใช้ SASS แต่ตัดสินใจไม่เขียน CSS เลย ที่นี่มีเหตุผลดี:

  • ไม่มี Design ในหัว และแม้จะทำให้ดูดีได้ แต่ไม่อยากใช้เวลาและพลังงาน
  • อยากใช้ Tailwind CSS

หากไม่เคยรู้จัก Tailwind CSS อย่าคิดแค่ว่า มันคือ Alternative ของ Bootstrap นี่คือคำอธิบายสั้นๆ จากเว็บของพวกเขา:

CSS Frameworks ส่วนใหญ่ทำมากเกินไป... แทนที่จะเป็นคอมโพเนนต์ที่ออกแบบไว้ล่วงหน้าและมีความคิดเห็น (opinionated) Tailwind ให้ Utility Classes ระดับต่ำ (low-level) ที่สร้างดีไซน์แบบกำหนดเองได้สมบูรณ์โดยไม่ต้องออกจาก HTML

นี่คือความจริง การค้นหาเร็วๆ พบ Web Apps ที่ Rebuild ด้วย Tailwind CSS:

  • WhatsApp
  • Telegram
  • Facebook
  • Reddit
  • YouTube
  • Slack
  • Coinbase
  • GitHub
  • Trello
  • Twitter
  • Netlify

สร้างเว็บไซต์ที่มี Accessibility ดี

เดือนที่แล้วผมเริ่มเรียนคอร์ส Accessibility ที่ Deque University เนื้อหาดีมาก และเตือนว่ HTML มี Accessibility โดยค่าเริ่มต้น การใช้โครงสร้าง HTML ที่ semantic และทดสอบสิ่งพื้นฐานอย่าง Keyboard navigation และ Color contrast ช่วยกำจัด Barriers หลายอย่างที่ขับคนพิการออกไปจากเนื้อหาของคุณ

ผมไม่ใช่ Accessibility Expert แต่นี่คือสิ่งที่ผมทำเกี่ยวกับ Accessibility สำหรับเว็บนี้:

  • Disable Stylesheets: ด้วยการปิด Stylesheets คุณรับรองได้ว่าเนื้อหาตามลำดับตรรกะ/โครงสร้าง
  • VoiceOver: รวมอยู่ใน macOS และ iOS ใช้ง่าย และทดลองใช้จะเข้าใจได้ดีขึ้นว่าคนใช้ฟีเจอร์นี้อย่างไร
  • Modals: Modals อาจก่อให้เกิดปัญหา ผมทำตามแนวทางของ Ire Aderinokun
  • axe: Extension ตรวจสอบ Accessibility สำหรับกฎ WCAG 2 และ Section 508

ไม่ได้สมบูรณ์แบบ - ยังมีบางอย่างที่ผมไม่ได้ทำ เช่นเพิ่ม Skip link ไปยัง Main Content หากสนใจ ดู Pull Request ที่มีการเปลี่ยนแปลงทั้งหมด

สร้างเว็บไซต์ที่ทำงานบน Browser เก่า

ผมไม่บรรลุเป้าหมายนี้เพราะไม่มี Control ต่อ Scripts และ Styles แต่ดูไม่ใช่不可能 สิ่งที่สังเกต:

  • Expedite (Stein client) ใช้ fetch ซึ่งเพิ่งเพิ่มใน Safari 10 Request ไป Server อาจแทนที่ด้วย XMLHttpRequest
  • Tailwind ใช้ Flexbox ในหลาย Element Safari รองรับ Flexbox ตั้งแต่ iOS 7 อาจเขียน Property เพิ่มให้ Element ที่มีอยู่เพื่อให้ดูดี
  • SSL Certificates อาจเป็นปัญหาสำหรับ Browser เก่า

ข้อสรุป

การสร้างเว็บนี้สนุกมาก การมี Pet Project แบบนี้ให้เหตุผลดีที่จะเล่นกับ Tech ที่ไม่ได้ใช้ในงาน อาจจะวันหนึ่ง Stein และ/หรือ TailwindCSS จะมีประโยชน์สำหรับ Prototype ฟีเจอร์หรือ Hackathon Project

ข้อเท็จจริงที่ผมตั้ง Constraints ให้โปรเจกต์ ทำให้ผมคิดนอกกรอบ แม้ไม่บรรลุเป้าหมายทั้งหมด แต่ช่วยให้เข้าใจมากขึ้นว่าทุกชิ้นส่วนเชื่อมต่อกันอย่างไร

แนะนำให้ลองทำอย่างนี้เพื่อได้ลองเล่น Tech ต่างๆ ไม่จำเป็นต้องเป็นคอลเลกชัน Apple - สร้างเว็บรายการหนังสือโปรด หรือเส้นทางเดินป่าที่ดีที่สุดก็ได้ ในกรณีนี้ การเดินทางสำคัญกว่าเป้าหมาย

ออกความลับ: ผมติดตามเวลาด้วย Clockify ระหว่างเขียนโค้ด สร้างข้อมูล ทดสอบ และเขียนโพสต์นี้ ใช้เวลาทั้งสิ้น 13 ชั่วโมง

โพสต์นี้เผยแพร่บนบล็อกของผมด้วย ติดตามผมที่ Twitter ได้ครับ