Code for Dek-d Customization

ลำดับตอนที่ #1 : [howto] ควานหาวิธีแชร์โค้ดให้สวยงามในบทความ โดยไม่ต้องออกแรงบ่อย

เนื่องจากต้องการที่จะเขียนบทความที่แสดงโค้ดสำหรับการตบแต่งเว็บ Dek-d และโค้ดสำหรับจุดประสงค์อื่นๆ แต่หลังจากที่เคยเข้าไปดูตามบทความที่แจกโค้ดสำหรับตบแต่งต่างๆ เมื่อนานมาแล้วนั้นพบว่า การแจกโค้ดเป็นเพียงแค่กล่องเล็กๆ ที่เหมาะแก่การก็อปเพียงอย่างเดียว ไม่เหมาะสำหรับการพัฒนาต่อยอดหรือปรับแต่งใดๆ ทั้งสิ้น (อย่างไรก็ตามคนส่วนมากคงไม่ค่อยนำโค้ดมาต่อยอดนักหรอก) และตัวอย่างของโค้ดต่างๆ นั้นมาในรูปแบบของรูป ที่บางครั้งทำให้ไม่เห็นการทำงานที่แท้จริงของโค้ด และทำให้ไม่น่าสนใจ

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

---

แรกเริ่มเลยที่เขียนบทความนี้ขึ้นนั้น ได้ทำการใช้ Github Gist ในการแสดงโค้ด เนื่องจากว่ามันมีความสามารถจัดโค้ดให้อยู่ในลักษณะที่สวยงามได้ และโค้ดต่างๆ นั้นจะถูกเก็บอยู่ใน server ของตัว Github Gist เอง แต่อย่างไรก็ตามวิธีนี้มีข้อจำกัดที่ว่าจะต้องมีโค้ดเฉพาะที่เขียนขึ้นเพื่อทำการดึงข้อมูลจาก Github Gist มาแสดง และไม่สามารถแสดงผลตัวอย่างโค้ดได้ภายในตัวมันเอง ทำให้ต้องมีการสร้างบทความหรือตอนอื่นๆ เพื่อแสดงผลลัพธ์ของโค้ด

จากเว็บไซต์ของเขาเองนั้น อธิบายว่า Github Gist เป็นช่องทางหนึ่งในการแชร์โค้ดของเรา ไม่ว่าจะทั้งโปรเจก หรือแค่บางส่วนก็ได้

ข้างบนนี้เป็นตัวอย่างของการใช้ Gist เพื่อแสดงโค้ด โดยโค้ดแสดงอยู่นั้นเป็นโค้ดที่ใช้แทรกโค้ดนั่นแหละ (งงไหม?) ซึ่งถูกปรับแก้มาจาก Dynamic Gist Embedding ของคุณ Jeremiah Lee ซึ่งเขาเขียนการแทรกตัวแสดงโค้ดจาก Gist เอาไว้ ก็เหมือนกับที่เราแทรกรูปภาพเข้าไปในบทความ หรือแทรกวิดีโอนั่นแหละ เพียงแต่ว่าการแทรกตัวแสดงโค้ดจาก Gist มันยุ่งยากไปนิดนึงเท่านั้นเอง

1. เริ่มจากต้องมีโค้ดที่ต้องการจะนำมาแปะในหน้าบทความอยู่ระบบของ Github Gist ก่อน เราไม่แน่ใจว่าจะต้องสมัครไหมนะ ก็ลองกันดูแล้วกัน

2. หลังจากนั้น copy เอา id ของ gist นั้นมา ซึ่งจะปรากฏอยู่ใน address bar ในลักษณะของสายอักขระแบบสุ่ม เช่น 63d1499a490f980f20ae ที่จะได้มาจาก

   https://gist.github.com/krerkkiat/63d1499a490f980f20ae

3. จากโค้ดแปะเอาไว้ด้านบน บรรทัดที่ 1

   <div data-id="นำไอดีมาใส่ตรงนี้" class="github-gist"></div>

   ในกรณีที่มีไฟล์หลายๆ ไฟล์อยู่ใน Gist สามารถเลือกเพียงไฟล์เดียวมาแสดงผลได้โดย

   <div data-id="นำไอดีมาใส่ตรงนี้" data-file="ชื่อไฟล์ที่อยู่ภายใน Gist" class="github-gist"></div>

   เราสามารถเพิ่มโค้ดแบบบรรทัดที่หนึ่งได้มากเท่าที่ต้องการ

4. นำโค้ดที่ได้ รวมทั้งบรรทัดที่ 2 ถึงบรรทัดสุดท้าย ไปใส่ในที่ใส่เนื้อความของบทความ โดยให้โค้ดอยู่ระหว่างแท็ก script
5. เสร็จสิ้น

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

---

อีกวิธีที่เพิ่งจะเจอหลังจาก แชร์โค้ดผ่านบทความนี้ไปได้สักพัก ก็คือ การ embed โค้ดจากเว็บ codepen.io ซึ่งวิธีนี้จะมีข้อดีที่มากกว่า Github Gist คือการที่มันสามารถแสดงผลลัพธ์ของโค้ดที่เขียนขึ้นมาได้เลยทันที

หลักๆ ของเว็บ codepen.io นั้น เขาเหมือนจะทำเป็นเว็บสำหรับ programmer และ web developer ที่จะโชว์ผลงานการเขียนโค้ดในภาษา JavaScript การตบแต่งหน้าเว็บ หรือการใช้ CSS ในการสร้าง effect สวยๆ เป็นต้น แต่ด้วยคุณสมบัติของเว็บเพจที่เราสามารถเขียนโค้ด และดูผลลัพธ์ของโค้ดนั้นได้จากหน้าเว็บเลย ซึ่งรวมถึงเวลาที่เรานำเอาโค้ที่เราเขียนขึ้นมา มาแปะไว้ในบทความก็จะมีตัวอย่างผลลัพธ์ติดมาด้วย ทำให้เราไม่ต้องไป สร้างอีกหนึ่งตอน หรือหนึ่งบทความเพื่อที่จะแสดงผลลัพธ์ของโค้ดให้กับทุกๆ โค้ด

เมื่อเข้าไปยังเพจของ codepen.io แล้วนั้น ก็จะพบกับสามส่วนสำหรับใส่โค้ดคือ โค้ดส่วน HTML, โค้ดส่วน CSS, และโค้ดส่วน JavaScript และถ้าเป็นรูปแบบมาตรฐานก็จะมีการแสดงผลลัพธ์การทำงานของโค้ดของเราอยู่ด้านล่าง

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

หลังจากปรับแต่งเรียบร้อย ทางด้านบนขวาของหน้าต่างที่มีตัวเลือกต่างๆ ให้ปรับ ก็จะมีกล่องให้ก็อปโค้ด ที่จะเอามาใส่ในบทความ หรือเว็บเพจ

อย่างไรก็ตาม โค้ดที่เราก็อปมาได้จะเป็น HTML ผสม JavaScript ซึ่ง โค้ด HTML นั้นไม่มีปัญหา วางในตัวแก้ไขบทความของเว็บเด็กดีที่อยู่ในโหมด HTML ได้เลย แต่สำหรับ tag <script> จะไม่สามารถทำงานได้ 

ซึ่งวิธีการก็จะเป็น ดัดแปลงโค้ดที่แต่เดิมรูปร่างหน้าตาแบบนี้

<script async src="ลิ้งค์"></script>

ให้กลายเป็น

<script>$.getScript("ลิ้งค์");</script>

ก็จะทำให้การ embed ทำงานได้อย่างเป็นปกติ

ตัวอย่างก็จะเป็นแบบนี้ เป็นต้น โดยโค้ดที่ได้จะเป็นการใช้งาน library jQuery เพื่อทำการดึงข้อมูล script จากไฟล์ดังกล่าวมา

See the Pen Dek-D - Welcome Message by Krerkkiat Chusap (@krerkkiat) on CodePen.

ซึ่งผู้เข้าชมสามารถเลือกดูแต่ละแท็ปเพื่อ ดูโค้ดในส่วนของ HTML, CSS, JavaScript หรือผลลัพธ์ได้

---

หลังจากเริ่มทำการลองใช้งาน Polymer 1.0 นั้น ก็พบกับอีกเว็บไซต์หนึ่ง (จากการที่เว็บ Polymer ใช้งานเว็บดงักล่าวอยู่) เว็บนี้ชื่อ Plunker เว็บ Plunker นี้จะเพิ่ม feature อีกอย่างหนึ่งขึ้นมาคือ อนุญาติให้มีไฟล์หลายๆ ไฟล์ได้ ซึ่งเป็นประโยชน์กับการใช้งาน Polymer 1.0 เนื่องจากตัว library Polymer นั้นมี concept เป็น webcomponent ที่จะมีการแบ่งแต่ละ component ออกไปไว้ในหลายๆ ไฟล์

---

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

ก็คงจะยังไม่อธิบายอะไรมาก (เพื่อคุณ Betty จะอธิบาย) คร่าวๆ feature ที่เว็บนี้มีให้จะไม่ต่างไปจาก codepen.io มากนัก แต่ดูเหมือน JSFiddle จะมีตัวเลือกด้าน library ให้เลือกเยอะกว่า