arnondora.in.th 3.0 ยกเครื่องใหม่ไฉไลกว่าเดิมarnondora.in.th 3.0 ยกเครื่องใหม่ไฉไลกว่าเดิม

arnondora.in.th 3.0 ยกเครื่องใหม่ไฉไลกว่าเดิม

by arnondora on May 16, 2017

ก็เป็นประจำทุกปีที่เว็บ arnondora.in.th จะเปลี่ยน หรือมีการปรับปรุงหน้าเว็บใหม่ เพื่อเป็นการบังคับให้ตัวผมเองได้ลองเรียนรู้อะไรใหม่ ๆ ทุกปี ซึ่งเวลานั้นของปีนี้ก็มาถึงแล้ว และเพื่อเป็นการฉลองที่เว็บ arnondora.in.th เขียนมาครบ 200 บทความเป็นที่เรียบร้อยแล้วด้วย หลาย ๆ คนที่เคยเข้ามาอาจจะสังเกตว่ามีหลาย ๆ อย่างเปลี่ยนไปเยอะมาก ๆ จนจำเค้าเดิมไม่ได้เลย เรามาดูกันว่ามีอะไรเปลี่ยนไป หรือเพิ่มเติมบ้าง

ย้าย Web Hosting ใหม่

bye digitalocean 1

ต้องบอกก่อนว่า การทำเว็บนี้ขึ้นมามันก็ไม่ได้ฟรี ๆ เหมือนกัน แต่ก็ไม่ได้ลง Ads แต่อย่างใด เพราะต้องการทำเป็น Personal Blog ซะมากกว่า แต่มาเปิดเว็บแบบนี้มันก็มีเงินเข้ามาเกี่ยวเหมือนกัน ตอนแรกเมื่อ 2 ปีก่อนผมได้ Credit ใน Digital Ocean มาทั้งหมด 100 USD จาก Github Student Pack ก็เลือก Server จ่ายเดือนละ 5 USD ซึ่งตอนนี้ 100 USD ก็หมดซะแล้ว

bye digitalocean 2

แต่จะให้จ่าย 5 USD ต่อเดือนก็ไม่ค่อยโอเคเหมือนกัน เลยตัดสินใจย้าย Host มาใช้ Web Hosting มาใช้ในไทยแทน ซึ่งถ้าหลาย ๆ คนสังเกตช่วงหลาย ๆ สัปดาห์ที่ผ่านมาเว็บช้าลงอย่างเห็นได้ชัดมาก อันนั้นเกิดจากเว็บไปลง Hosting ที่คุณภาพต่ำกว่าหน่อย แต่ก็จ่ายถูกกว่า และรับ Load ได้พออยู่

New Design

arnondora30 1

จากที่เห็นอยู่แน่นอนว่า Design ได้ถูกเปลี่ยนใหม่หมด พร้อมกับการ Implement ทั้งหมด (เปลี่ยนเยอะจัดจน ต้องตัดสินใจสร้าง Git Repository ใหม่เลย) โดยจะเน้นไปที่ Content ทำให้ผู้อ่านสามารถ Focus กับ Content บนหน้าได้มากขึ้น ส่วนเบื้องหลังการออกแบบของ Theme เดี๋ยวจะเขียนแยกออกมาเป็นอีกบทความ เพราะมันยาวมาก

เปลี่ยนจาก Bootstrap เป็น Materialize แทน

materialize homepage

หลาย ๆ คนที่เข้ามาอ่านในบทความนี้น่าจะรู้จัก Bootstrap ที่เป็น CSS Framework ชื่อดัง ซึ่ง Bootstrap ก็ได้ถูกใช้ใน Theme เวอร์ชั่นแรกจนถึงเวอร์ชั่นก่อนหน้านี้ มาในเวอร์ชั่นนี้ผมได้ทำการเปลี่ยนไปใช้ Materialize แทนเพราะด้วยตัว Design ใหม่ที่ออกไปในแนว Material Design มากขึ้น จึงเห็นว่า Materialize น่าจะเหมาะกว่าเลยเปลี่ยนมาใช้

ใช้ npm ในการจัดการ Dependencies ทั้งหมด

arnondora22 7

จากเวอร์ชั่นก่อน มีการใช้ Bower คู่กับ NPM ในการจัดการ Dependencies มาในปีนี้ ผมได้ขยับไปใช้ NPM ทั้งหมด เพื่อความง่ายในการจัดการ Dependencies รอบนี้รู้เรื่องมากขึ้นแล้ว ก็มีการแบ่ง Dependencies ให้เป็นระเบียบมากขึ้น และ Deploy ด้วยขนาดไฟล์ที่เล็กลง

ยังใช้ Gulp เหมือนเดิม

หลาย ๆ คนที่ได้ Clone Theme นี้จาก Wordpress น่าจะสงสัยว่าทำไมไม่ใช้ Webpack ละ ทำไมยังใช้ Gulp อยู่ เหตุผลนั่นเป็นเพราะว่าตัว Webpack เดิมที่นั่นมันถูกสอนมาให้เรียนรู้เฉพาะ JS เท่านั้นถ้าจะใช้อย่างอื่นก็ต้องลง Plugin หลายอย่างไปหมด ประกอบกับตัวผมเองนั้นก็ใช้ Webpack ไม่คล่องด้วย เลยยังไม่อยากเอามาลง Production เลยตัดสินใจที่จะใช้ Gulp ต่อไป

Support AMP out of the box

get to know amp html sign

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

More Features will be come out soon!

สำหรับ Theme ปกติที่ผมจะทำการอัพเดทเป็นรายปี เหมือนเช่นปีที่ผ่าน ๆ มา ปีนี้จะเปลี่ยนแล้ว คือจะทำไปเรื่อย ๆ แล้วอัพเรื่อย ๆ แทน ก็ทำให้อาจจะมีอัพเดทค่อนข้างจะเยอะมาก ๆ ก็สามารถติดตามได้ใน Git Repository ของ Theme ได้เลย จะยินดีมากถ้าได้คำแนะนำติชมจากผู้อ่านทุกคนนะครับ เพราะผมเองก็จริง ๆ ก็เขียน Theme หรืออะไรพวกนี้ไม่ถนัดเหมือนกัน และก็จะสร้าง Content ดี ๆ ออกมาให้อ่านเรื่อย ๆ สำหรับวันนี้ก็สวัสดีครับ รออ่านเบื้องหลังของ Theme ได้เลย

Share this article to social network?

Leave a comment?

Name :
Comment :
Post a comment
Loading Comment(s)
FacebookTwitterGoogle+Email
© 2014-2019 Arnon Puitrakul all right reserved.Code with by @arnondora