ยินดีต้อนรับปีใหม่ 2024 ด้วยเว็บไซต์ใหม่ ซึ่งเมื่อไม่นานมานี้ (November 12, 2023) ผมก็เพิ่งเปิดตัวเว็บ klabban.com ไป แล้วทำไมผมต้องทำเว็บใหม่อีกแล้วหละ???

ต้องบอกไว้ก่อนว่าช่วงนี้ผมลาออกจากงานมาเพื่อปั่นจักรยาน(ทริป สุโขทัย-ตรัง เดียวมาเหลา) แล้วก็มีช่วงว่าง 2-3 เดือน ผมรู้สึกว่าได้เรียนรู้อะไรหลายๆ อย่างมากทั้งด้าน technical และก็วิธีคิด

ทำเว็บใหม่ทำไม???

1. ปรับ Design

เว็บเก่าที่ผมทำไป ผมรู้สึกคิดเยอะเกินไปมากแล้วก็ดู ref มาจากเว็บไซต์ที่ทำเกี่ยวกับท่องเที่ยว ซึ่งจะเน้นรูปเป็นหลัก หลังจากทำเสร็จผมก็ได้เรียนรู้ว่า design สวยๆ ไม่ได้เหมาะกับเว็บไซต์ทุกแบบ เราต้องดูบริบทของเว็บไซต์นั้นๆ ด้วย เพราะเว็บไซต์ของผมไม่ได้เน้นรูปเป็นหลักทำให้การ ref design จากเว็บท่องเที่ยวจึงไม่เหมาะอย่างมากสำหรับเว็บของผมที่เน้นตัวหนังสือเป็นหลัก มันควรจะและ focus ที่ content มากกว่า design แต่ๆๆ เว็บใหม่ผมก็แอบยัดอะไรหลายๆ อย่างมาเยอะยุดีแหละแต่พยายามไม่ให้มันเยอะเกินไป 🙂

อีกอย่างที่อยากจะบอก ผมรู้สึกผมเสพติด design มากเลยตอนนี้ ชอบเปิดดูเว็บดีไซน์แล้วก็มานั่งคิดตาม จนตอนนี้ผมอยากจะลงเรียน design แล้วก็ course ด้านศิลปะมากขึ้นแล้ว

2. ปรับ Performance

คือเว็บเก่าผมใช้เทคโนโลยี Headless CMS (WordPress) + Next.js + Tailwind เป็นหลัก แต่ผมคิดเยอะเกินไปมาก ผมเขียน lib ของตัวเองขึ้นมา (klabban-commerce) เพื่อจะได้ reduce code ที่เราต้องใช้ในการทำ WordPress Headless CMS เช่น Preview, Gutenberg Editor, Authentication OAuth 2 with refresh token (อวดๆ), Add to Cart, Cart Drawer, Product Search, Checkout form และ request ต่างๆ โอ้ยยย เป็นไงเยอะมั๊ย เยอะเกินนนน หัวจะปวด ปัญหาก็คือมันเยอะเกินไป แล้วผมไม่ได้เซียนเรื่องทำ lib ขนาดนั้นทำให้ bundle size ใหญ่ ทำให้มีปัญหาเรื่อง performance ผมพยายาม optimize page speed ยังไงก็ไปไม่สุด สุดท้ายมาพบว่าคอขวดคือ lib ที่ผมเขียนขึ้นมาเอง ก็เลยมาเข้าใจแล้วว่าเขียน lib ยังไงให้ bundle size เล็กๆ organize file ยังไง อะไรคือ treeshake บลาๆๆ เยอะเลย แต่ do something better than do nothing right? ฮาๆ

สุดท้ายผมก็ยังใช้ lib ของตัวเองอยู่นะแต่ optimize แล้วตัด feature Ecommerce ออกไปก่อน ให้เน้นแค่ authentication, preview, Gutenberg และ helper เล็กๆ น้อยๆ ที่ได้ใช้บ่อยๆ ทำให้ performance ดีขึ้นมาเยอะ

เว็บไซต์! ทำไปทำไม? มีไว้เพื่ออะไร

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

1. Sandbox สำหรับทดลองและวัดผล

คือการลองใน locale มันก็ได้แหละแต่บางอย่างมันก็ไม่ได้จริงๆ นอกจากลองแล้วเราก็ต้องวัดผลด้วยว่ามันใช้กับโลกความจริงได้มั๊ย เช่น

• ทำยังไงให้เว็บไซต์ติด seo
• Performance มีผลกับ SEO ยังไง
• Optimize third-party loading ยังไง
• Tracking

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

อีกอย่างคือผมอยากจะพิสูจน์ตัวเองด้วยแหละเพราะบางทีการทำงานในบริษัทบางทีเรามองภาพไม่ออกว่างานของเรามัน impact กับ product จริงๆ ยังไง แต่ถ้าผมมีเว็บไซต์ของตัวเองผมจะสามารถบอกกับลูกค้าได้อย่างเต็มปากว่าผมรู้จริงกับเรื่องที่ผมจะทำให้เขา เพราะผมลงมือทำมันแล้วจริงและก็รู้รอบไม่ใช่แค่เรื่อง technical

2. ฝึกฝนทักษะการสื่อสาร

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

เดียวนี้ใครเขาจะอ่าน blog แล้วคนไทยอ่านหนังสือไม่เกิน 3 บรรทัด

เอออันนี้ก็น่าจะจริงนะ แต่ๆๆๆ มันไม่สำคัญเลยเพราะช่วงนี้ผมก็พยายาม content video ด้วย เพราะการสื่อสารมันมีหลายแบบ แต่ผมกลับรู้สึกว่า skill การเขียนมันสำคัญมาก มันช่วยเรียบเรียงความคิดในหัวผมให้เป็นระบบมากขึ้น แตกต่างจากภาษาพูด เพราะฉะนั้นการเขียน blog มันยังจึงสำคัญไม่ใช่เพราะมีคนอ่าน แต่เพราะผมได้พัฒนาตัวเองในด้านการเขียนเพื่อต่อยอดไปสู่ skill การสื่อสารในรูปแบบอื่นๆได้

3. Personal branding

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

4. Community

1+1 != 2

โลกนี้คงไม่มี Iphone ให้ใช้ถ้า jobs ไม่เจอกับ wozniak

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

5. ที่ปล่อยของ

ผมเป็นคนสนใจอะไรหลายอย่างมาก อะยกตัวอย่างเช่น

ดนตรี ผมชอบเล่นกีต้าร์ ร้องเพลง ทำเพลง

ปั่นจักรยาน หนึ่งในความฝันของผมคือการได้ปั่นจักรยานท่องเที่ยวไปทั่วโลก

video หลังๆก็เริ่มสนใจเรื่องกล้อง การถ่าย video การตัดต่อ การเล่าเรื่องมากขึ้น

technology อย่างที่รู้ผมเป็นโปรแกรมเมอร์

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

อีกอย่างคือผมคิดภาพตัวเองตอนแก่ๆแล้วกลับมาอ่านสิ่งที่เราเคยเขียนไว้มันคงสนุกน่าดู

5. ทำให้เราเก่งขึ้น

do something better than do nothing

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

You can’t connect the dots looking forward; you can only connect them looking backwards

– Steve job

ผมเคยเกลียดตัวเองมากอยู่ช่วงหนึ่ง เพราะได้แต่คิดแต่ไม่ลงมือทำ เพราะฉะนั้นทำต่อไปเถอะ ตราบใดที่คุณยังมีความสุขที่ได้ทำมัน (บอกตัวเอง) ตะก่อนผมจะมีความรู้สึกว่าจะทำอะไรต้องทำให้ perfact แต่ตอนนี้มันเปลี่ยนไปแล้ว ตอนนี้ผมยอมรับสิ่งที่ “ดีพอ” แทนที่จะพยายามเอาชนะความสมบูรณ์แบบ เพราะมันช่วยให้เราได้ลงมือทำ และการลงมือทำจะช่วยให้ผมเก่งขึ้น

What’s New ทำอะไรเพิ่มมาบ้าง

1.Design

แน่นอนปรับดีไซด์ใหม่ให้เรียบขึ้น โดยผมแอบใช้ AI เข้ามาช่วยด้วยนิดหน่อยทั้งเรื่อง idea การคิดคำ และ design แต่ก็รู้สึกว่าดีได้มากกว่านี้แน่นอน แต่สำหรับตอนนี้มันดีพอสำหรับผมแล้ว (better than nothing right?) อีกทั้งผมยังเรียนรู้การใช้ figma จนรู้พื้นฐานการใช้งานเยอะเลยทีเดียวจนจะใช้ figma แทน photoshop ไปแล้ว

2. Animation using Framer Motion

มีการเพิ่ม animation เข้ามาเยอะพอสมควร หลักๆคือหน้าแรก ทุก Element จะมี animation เกือบหมด ตอนแรกเยอะกว่านี้มากแต่สุดท้ายรู้สึกลายตามากเลยตัดออกไปเกินครึ่ง เออแล้วผม WOW กับ framer-motion มากๆ คือมันช่วยให้ทำ animation ได้ง่ายมากๆ ทำให้เว็บมีสีสันขึ้น จนผมอยากเก่ง framer-motion มากๆ เพราะในอนาคตการที่เราเก่ง framer-motion จะลดการใช้ lib ต่างๆได้อีกเยอะเช่น gallery, drawer และอื่นๆ การใช้ lib น้อยลงจะทำให้ Performance ของเว็บดีขึ้นและเรายังสามารถ custom UI ไปได้แบบสุดติ่งไปเลย

3. Performance

เว็บใหม่เร็วขึ้นเยอะมาก ผมสนุกกับการ optimize เว็บนี้มากๆ ทั้งรูป script css และยังต้องไป optimize lib ที่ผมเขียนขึ้นมาใช้เองอีกด้วย เพื่อให้ได้ performance ที่ดีขึ้น และนี่คือผมลัพธ์ที่ผมทำให้

หน้าแรก

หน้า blog

หน้า Blog detail

ในการ Optimize performance ของเว็บนี้มันค่อนข้างสำคัญกับผมมากเพราะในปีนี้ผมพยายามจะ focus กับ Headless CMS และนี่มันคือจุดแข็งที่สุดเมื่อเทียบกับ CMS แบบเก่า แล้วถ้าผมทำ performance ของเว็บนี้ออกมาไม่ดีแล้วผมจะมีอะไรไปขายว่า Headless CMS มันดีกว่ายังไง

แต่จะมีปัญหาอยู่ที่หน้าแรก คือผมพยายามมากๆที่จะทำให้คะแนนได้ 90+ แต่ปัญหาคือผมยัดของไปค่อนข้างเยอะมาก ทั้ง animation และรูป อย่างเช่นใน section project ผมทำ animation scroll page ใน macbook frame ทำให้ต้องใช้ภาพ capture ของเว็บที่ใหญ่ สุดท้ายแล้วไม่ว่าเทคโนโลยีจะดีแค่ไหน performance มันก็อยู่ที่ content ในแต่ละหน้านั้นๆด้วย ซึ่งไม่เป็นไรผมคิดว่าได้เท่านี้ก็ดีแล้ว ในอนาคตถ้าผมมีความรู้มากกว่านี้ผมจะมา optimize เพิ่มเติม

อีกเรื่องที่น่าสนใจคือ third-party lib เช่น GTM และ Analytic จะเป็นตัวถ่วง performance มากๆ เพราะมันจะไป block main tread ของ broswer แต่ผมได้ทดลองใช้ feature ใหม่ของ next.js คือการโหลด script โดยใช้ worker ทำให้ performance มันดีขึ้นมา

สุดท้ายนี่คือ bundle size file ที่ผมทำได้สำหรับเว็บนี้

จะมีตัวแดงอยู่ตัวหนึ่งซึ่งไม่มีผล เพราะเป็น path ที่ผมเอาไว้ใช้ preview blog ตอนเขียน draft เฉยๆ

สรุป…

ช่วง 2-3 เดือนมานี้หลังจากผมกลับมาจากทริปปั่นจักรยานลงใต้มา ผมได้เรียนรู้อะไรหลายอย่างเยอะมาก หวังว่าหลังจากมีเว็บไซต์ใหม่แล้วผมจะได้มาแชร์ content ต่างๆอีกมากมายทั้งเรื่อง จักรยาน ดนตรี technology และอื่นๆ ผมเริ่มรู้สึกตื่นเต้นกับปี 2024 ที่กำลังจะมาถึงแล้ว มันต้องสนุกแน่ๆ เพราะผมรู้สึกมี focus มากขึ้น รู้ว่าเราอยากจะทำอะไรมากขึ้น สุดท้ายฝากสวัสดีปีใหม่ทุกคนที่ผ่านเข้ามาอ่าน และขอให้ทุกคนมีความสุขมากๆครับ ทั้งกายและใจ มีเวลาได้อยู่กับคนที่เรารักมากขึ้น ได้ทำสิ่งที่อยากทำ

สวัสดีปีใหม่ 2024🎉