ฉันสร้างเว็บไซต์สำหรับคอลเลกชั่น Apple ของฉันได้อย่างไร

ไม่นานมานี้ ฉันเริ่มสะสม Apple ฉันติดตามฮาร์ดแวร์ของ Apple (และความสวยงามของมัน) มาตั้งแต่ยังเป็นวัยรุ่น แต่ตอนนั้นฉันไม่มีเงินพอที่จะเป็นเจ้าของ Mac

ฉันมี Mac เครื่องแรกเมื่ออายุ 19 ปี เป็น iBook 700 Mhz ที่ซื้อมาจากเว็บไซต์ที่คล้ายกับ eBay ในบราซิล เงินมาจากโครงการ Flash

หลังจากอาศัยอยู่ที่แคนาดาได้สองสามปีแล้ว ฉันมีเงินเหลือเพื่อใช้ทำงานอดิเรก ส่วนใหญ่ฉันซื้ออุปกรณ์จากผู้คนใน Craigslist

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

รายการเริ่มใหญ่ขึ้นเรื่อยๆ และเนื้อหาเริ่มดูยุ่งเหยิง ฉันคิดว่าการแสดงเนื้อหานี้บนเว็บไซต์จะสมบูรณ์แบบ และฉันไม่จำเป็นต้องจ้างนักพัฒนา :D

ตอนแรก ฉันตัดสินใจว่าจะจัดระเบียบข้อมูลของฉันในฐานข้อมูล SQL โดยมีข้อมูลกระจายอยู่ในคอลัมน์และตารางต่างๆ หลังจากนั้น ฉันจะสร้าง graphQL API เพื่อให้ข้อมูลที่จำเป็นในการเติม UI ของฉัน – อาจเขียนใน React รวบรวมด้วย Babel และเต็มไปด้วย Webpack

การอ่านออกเสียงย่อหน้าก่อนหน้านี้ คุณจะเห็นว่ามีเทคโนโลยีมากมาย และฉันก็ละเลยภาษาแบ็กเอนด์และรายละเอียด UI เช่น SASS หรือส่วนประกอบที่มีสไตล์ ทั้งหมดนี้ฟังดูล้นหลามเล็กน้อยเมื่อเป้าหมายสูงสุดของฉันคือการแสดงรายการของไอเท็มในรูปแบบที่ดี

อย่างที่บอก ฉันกำลังคิดว่าจะนำเสนอเนื้อหานี้ได้อย่างไรโดยไม่มี:

• API หรืองานส่วนหลัง
• เฟรมเวิร์ก/ไลบรารี JS ใดๆ
• เครื่องมือ JS ใดๆ (Webpack, Babel ฯลฯ)
• งาน CSS ใดๆ

นอกเหนือจากข้อจำกัดเหล่านี้ ฉันยังมีเป้าหมายที่ยืดเยื้ออยู่สองสามข้อ:

• สร้างเว็บไซต์ที่สามารถเข้าถึงได้ง่าย
• สร้างเว็บไซต์ที่ทำงานบนเบราว์เซอร์รุ่นเก่า เนื่องจากฉันมีคอมพิวเตอร์ที่ใช้ Mac OS 9.2 และ iDevices ที่ใช้ iOS 3

รับคำท้า. หนึ่ง index.html ไฟล์ vanilla JS สองสามไฟล์ และไม่มี CSS ที่กำหนดเอง ฉันต้องการแบ่งปันประสบการณ์ในการสร้างไซต์กับคุณ

TL,DR:

• เว็บไซต์สุดท้าย
• ซอร์สโค้ด

มาพูดถึงข้อจำกัดกันทีละจุด:

ไม่มี API หรืองานแบ็กเอนด์

เมื่อไม่นานมานี้ ฉันเห็นผลิตภัณฑ์ SaaS ชื่อ Stein คุณสร้างข้อมูลภายในเอกสาร Google ชีตและจะให้ปลายทางที่มีข้อมูลของคุณ ห้องสมุดของพวกเขาทำงานเหมือนกับ Handlebars และมันก็ดูสมบูรณ์แบบสำหรับกรณีการใช้งานของฉัน:

<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

ฉันตัดสินใจที่จะหลีกเลี่ยงการเพิ่มเฟรมเวิร์กหรือไลบรารีในโปรเจ็กต์นี้ เนื่องจากกรณีการใช้งานไม่จำเป็นต้องมี การโต้ตอบ JS ทั้งหมดในหน้านี้ค่อนข้างง่าย (แสดง/ซ่อนเมนู เปิดหน้าจอโมดอล จัดการลิงก์ถาวร)

เนื่องจากฉันไม่ได้ใช้เฟรมเวิร์ก/ไลบรารี ฉันสามารถหลีกเลี่ยงการเพิ่ม Webpack และ Babel ได้ ไม่จำเป็นต้องเจาะเข้าไปในพรีเซ็ตและโหลดเดอร์

ป.ล. คุณสามารถโต้แย้งว่าฉันสามารถเลือก create-react-app หรือ Next.js และแก้ไขปัญหาเหล่านี้ได้ทั้งหมด แต่ไม่ใช่

ไม่มี CSS ทำงาน

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

• ฉันไม่มีการออกแบบในใจ และแม้ว่าฉันจะทำสิ่งที่ดูดีได้ แต่ฉันไม่ต้องการใช้เวลาและพลังงานไปกับมัน
• ฉันต้องการใช้ Tailwind CSS

หากคุณไม่เคยได้ยินเกี่ยวกับ Tailwind CSS โปรดอย่าคิดว่า "นี่เป็นเพียงทางเลือกสำหรับ Bootstrap" คำอธิบายสั้น ๆ ที่ดีจากเว็บไซต์ของพวกเขาคือ:

กรอบงาน CSS ส่วนใหญ่ทำมากเกินไป
…
Tailwind มีคลาสยูทิลิตี้ระดับต่ำที่ให้คุณสร้างการออกแบบที่กำหนดเองได้โดยไม่ต้องใช้ HTML เลย

นี้เป็นจริงสวยมาก การค้นหาอย่างรวดเร็วช่วยให้คุณ "สร้างใหม่" เว็บแอปจำนวนมากด้วย Tailwind CSS:

• Whatsapp
• โทรเลข
• เฟสบุ๊ค
• Reddit
• ยูทูป
• หย่อน
• Coinbase
• Github
• Trello
• ทวิตเตอร์
• Netlify

สร้างเว็บไซต์ที่สามารถเข้าถึงได้ง่าย

เมื่อเดือนที่แล้วฉันเริ่มเรียนหลักสูตรการช่วยเหลือพิเศษที่ Deque University เนื้อหาของพวกเขายอดเยี่ยมและทำให้ผมนึกถึงว่า HTML สามารถเข้าถึงได้โดยค่าเริ่มต้น . การใช้โครงสร้าง HTML เชิงความหมายและการทดสอบสิ่งพื้นฐาน เช่น การไปยังส่วนต่างๆ ของแป้นพิมพ์และคอนทราสต์ของสี คุณจะขจัดอุปสรรคหลายอย่างที่ย้ายผู้ทุพพลภาพออกจากเนื้อหาของคุณ

ฉันไม่ใช่ผู้เชี่ยวชาญด้านการช่วยสำหรับการเข้าถึง แต่นี่คือสิ่งที่เกี่ยวกับการช่วยเหลือพิเศษบางส่วนที่ฉันได้ทำสำหรับเว็บไซต์นี้:

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

มันไม่สมบูรณ์แบบ -- มีบางสิ่งที่ฉันไม่ได้ใช้สำหรับไซต์ของฉัน เช่น การเพิ่มลิงก์ข้ามไปยังเนื้อหาหลัก หากคุณสงสัย นี่คือ Pull Request ที่มีการเปลี่ยนแปลงทั้งหมด

สร้างเว็บไซต์ที่ใช้งานได้กับเบราว์เซอร์รุ่นเก่า

ฉันไม่สามารถบรรลุวัตถุประสงค์นี้ได้เนื่องจากฉันไม่สามารถควบคุมสคริปต์และสไตล์ได้ อย่างไรก็ตาม ดูเหมือนจะเป็นไปไม่ได้ บางสิ่งที่ฉันสังเกตเห็น:

• Expedite (ไคลเอนต์ Stein) ใช้การดึงข้อมูลซึ่งถูกเพิ่มใน Safari 10 เท่านั้น คำขอไปยังเซิร์ฟเวอร์อาจถูกแทนที่ด้วย XMLHttpRequest
• Tailwind ใช้ Flexbox ในหลายองค์ประกอบ Safari เริ่มรองรับเฉพาะ Flexbox ใน iOS 7 บางทีฉันอาจจะเขียนคุณสมบัติบางอย่างสำหรับองค์ประกอบที่มีอยู่เพื่อให้ได้รูปลักษณ์ที่ดี
• ใบรับรอง SSL อาจเป็นปัญหาสำหรับเบราว์เซอร์รุ่นเก่า

บทสรุป

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

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

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

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

โพสต์บนบล็อกของฉันด้วย ติดตามฉันบน Twitter