ฟีเจอร์จิ๋วที่ชื่นชอบบนบล็อก/เว็บไซต์ส่วนตัว

• แนะนำฟีเจอร์จิ๋วที่ช่วยยกระดับประสบการณ์ใช้งานของบล็อก

ไซด์โน้ต

• ฟีเจอร์ที่ให้ข้อมูลเพิ่มเติมโดยไม่รบกวนเนื้อหาหลัก
• ช่วยให้ผู้อ่านตรวจสอบรายละเอียดเพิ่มเติมหรือแหล่งที่มาได้ง่าย
• การใช้ไซด์โน้ตของ Gwern น่าประทับใจเป็นพิเศษ บทความของเขาใช้ไซด์โน้ตจำนวนมากและให้ข้อมูลเพิ่มเติมโดยไม่รบกวนลำดับการอ่านของเนื้อหาหลัก
• เมื่อใช้ไซด์โน้ต ก็สามารถอ้างอิงเชิงอรรถได้ง่ายโดยไม่ต้องเลื่อนไปที่ด้านล่างของหน้า
• สามารถเห็นแนวทางที่หลากหลายซึ่งได้แรงบันดาลใจจาก Tufte CSS

สารบัญ

• สารบัญช่วยให้เห็นหัวข้อหลักของบทความได้ในภาพรวม และย้ายไปยังส่วนที่ต้องการได้ง่าย
• static site generator (เช่น Hugo) สามารถสร้างสารบัญอัตโนมัติได้
• เว็บไซต์ของ Lars Hupel มีสารบัญภายในซีรีส์ ช่วยให้การนำทางสะดวกขึ้น

โบนัส: ตัวบอกความคืบหน้าของหน้า

• แถบแสดงความคืบหน้าของหน้าจะแสดงให้ผู้อ่านเห็นด้วยภาพว่าตอนนี้อยู่ตรงส่วนไหนของหน้า
• สามารถเห็นฟีเจอร์นี้ได้ใน Quanta Magazine
• เรียนรู้วิธีทำได้ผ่าน บทแนะนำ ของ CSS Tricks

หัวข้อที่ลิงก์ได้ง่าย

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

การจัดกลุ่มโพสต์แบบซีรีส์

• หากต้องการเขียนเรื่องใดเรื่องหนึ่งยาว ๆ การแบ่งเผยแพร่เป็นซีรีส์จะช่วยให้ถ่ายทอดกับผู้อ่านได้ง่ายกว่า
• สามารถเพิ่มปุ่ม "ถัดไป" และ "ก่อนหน้า" อัตโนมัติ หรือสร้าง navigation hub ได้
• สามารถเห็นฟีเจอร์นี้ได้ใน บล็อกภาษา Chapel

บทความแบบบทสนทนา

• บทความในรูปแบบบทสนทนาจะตั้งคำถามจากมุมมองของผู้อ่าน และแสดงความกังวลจากมุมมองของผู้ที่มีประสบการณ์น้อยกว่า ทำให้บทความสนุกและเข้าใจง่ายขึ้น
• เว็บไซต์ของ Xe Iaso และ Faster than Lime ใช้บทความแบบบทสนทนาบ่อยครั้ง

การแสดงที่มาของโค้ดบล็อก

• เวลาเขียนโค้ด การแสดงชื่อไฟล์และเลขบรรทัดในโค้ดบล็อกจะช่วยให้ผู้อ่านเข้าใจได้ง่ายขึ้น
• ตัวอย่าง: Crafting Interpreters

โบนัส: โค้ดบล็อกที่มีลิงก์คลิกได้

• ภาษาโปรแกรม Agda สร้างโค้ดบล็อกแบบ HTML และลิงก์แต่ละสัญลักษณ์ไปยังตำแหน่งที่ถูกนิยามไว้
• สามารถเห็นฟีเจอร์นี้ได้ใน Programming Languages Foundations in Agda

การแสดงลิงก์ภายนอก

• ลิงก์ที่พาไปยังโดเมนภายนอกจะแสดงด้วยไอคอนเล็ก ๆ
• สามารถเห็นฟีเจอร์นี้ได้ใน James’ Coffee Blog ☕

โบนัส: มาร์กเกอร์ที่ต่างกันตามปลายทาง

• เว็บไซต์ของ Gwern เปลี่ยนไอคอนตามปลายทางของลิงก์
• ตัวอย่าง: ลิงก์ Wikipedia จะแสดง "W" และลิงก์ Haskell.org จะแสดงสัญลักษณ์แลมบ์ดา

โบนัส: พรีวิวลิงก์

• เมื่อเอาเมาส์ไปวางบนลิงก์ จะแสดงพรีวิวของหน้า ทำให้ดูเนื้อหาได้ก่อนคลิก
• สามารถเห็นฟีเจอร์นี้ได้ใน เว็บไซต์ของ Gwern

RSS ฟีด

• RSS เป็นมาตรฐานฟีดที่ช่วยให้เว็บไซต์เผยแพร่การอัปเดตได้
• ช่วยให้ผู้อ่านรับอัปเดตได้โดยไม่ต้องเข้าเว็บไซต์โดยตรง

ลิงก์ไปยังเว็บไซต์อื่น

• โปรโมตเนื้อหาที่เกี่ยวข้องด้วยการใส่ลิงก์ไปยังโพสต์ของบล็อกหรือเว็บไซต์อื่น
• สามารถเห็นฟีเจอร์นี้ได้ใน บล็อกของ Drew DeVault

สรุป

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

[tsboard]

บังเอิญว่าผมกำลังทำบล็อกของตัวเองอยู่พอดี ขอบคุณสำหรับข่าวที่มีประโยชน์แบบนี้นะครับ 55

[GN⁺]

ความคิดเห็นบน Hacker News

• ข้อเสนอหลายอย่างก็ดี แต่ progress bar รกสายตาเกินไปและไม่จำเป็น เพราะมี scroll bar อยู่แล้ว จึงไม่ต้องมี scroll bar เพิ่มอีก
• ไม่จำเป็นต้องตกแต่งลิงก์ เบราว์เซอร์แสดงตำแหน่งลิงก์ได้ดีอยู่แล้ว และป๊อปอัปพรีวิวก็เป็นสิ่งรบกวนที่ไม่จำเป็น
• ควรทำหน้าดัชนีรวมทุกโพสต์ของบล็อกไว้ในหน้าเดียว จะได้เห็นหัวข้อทั้งหมดได้ในครั้งเดียวและค้นหาได้ง่าย
• ดีใจที่หัวข้อเรื่องบล็อกถูกโพสต์ขึ้น Hacker News บริการบล็อกที่กำลังพัฒนาอยู่เน้นความมินิมัล และอยากแก้ปัญหาที่ ASCII art แสดงผลบน Android ได้ไม่ถูกต้อง
• ชอบหลาย ๆ "micro feature" และชอบฟีเจอร์ที่ไม่ต้องพึ่ง JavaScript กำลังใส่ micro feature หลายอย่างไว้ในบล็อกของตัวเอง
• ชอบให้ใส่วันที่แบบเต็มในโพสต์ สำหรับคอนเทนต์สายเทคนิค การรู้ว่าเขียนเมื่อไรเป็นเรื่องสำคัญ
• ไม่ชอบคำอธิบายในรูปแบบบทสนทนา อธิบายเป็นย่อหน้าแยกต่างหากจะดีกว่า
• ไม่เห็นด้วยกับฟีเจอร์พรีวิวลิงก์ เพราะกังวลเรื่องความเป็นส่วนตัว จึงชอบตรวจดู URL ก่อนคลิกลิงก์
• RSS ไม่ใช่ฟีเจอร์ "micro" แต่ควรเป็นฟีเจอร์หลัก
• เว็บไซต์ของ Gwern พยายามใส่ฟีเจอร์มากเกินไปจนเบราว์เซอร์ช้า โดยเฉพาะบนมือถือที่ปัญหารุนแรงมาก
• ฟีเจอร์สารบัญควรถูกทำในเว็บเบราว์เซอร์ รวมถึงตัวบอกความคืบหน้าของหน้า หัวข้อที่ลิงก์ได้ พรีวิวลิงก์ ฯลฯ ก็ควรให้เบราว์เซอร์จัดการ ผู้เขียนเอกสารไม่จำเป็นต้องกำหนดฟอนต์และสีเอง