Videos → Open-source in a nutshell

แนะนำและทักทาย0:00

โอเคครับ เดี๋ยวขอเสียงปรบมือให้กับน้องเวิลด์นะครับ หัวข้อ Open Source in a nutshell ครับผม ครับ ขอบคุณมากครับ โอเค เมื่อกี้พี่ไทพูดถึง Arc ครับ มีใครยังไม่ได้ใช้บราวเซอร์ Arc อีกมั้ยครับ เดี๋ยวเอาโค้ดจากผมนะ

การมีส่วนร่วมใน Open Source0:20

โอเคครับ สวัสดีครับทุกคน ก็วันนี้มาแวะคุยชิวๆ กับเรื่อง Open Source เนาะ คือจริงๆแต่แรกก็อยากมาพูด lightning talk เพราะคิดถึงทุกคน คิดถึงเวที คิดถึงไลฟ์ครับ สวัสดีผู้ชมทั้ง 3,000 กว่าคนใช่มั้ยครับ ใช่นะฮะ ขอบคุณมากครับ จริงๆก็ได้ยินคุณภูมิพูดว่า เรามักจะใช้ tool ต่างๆ

แต่เรามักจะลืมที่จะ fork หรือลืมที่จะ contribute ซึ่งจริงๆมันคือเรื่องที่เราสามารถทำได้ โดยที่เราไม่จำเป็นที่จะต้องรู้ลึกรู้จริงในเรื่องนั้นก็ได้ เราก็สามารถที่จะ contribute หรือเราช่วยเหลือไลบรารี่นั้น หรือว่าเราอยากจะศึกษา framework นั้นก็ได้

ผมจะเล่า- อันนี้ก็คือ เล่าเรื่องชีวิตแบบบ้านๆเลย ปกติแบบเวลาผมเลือกงานเนาะ ผมก็จะเข้ามาดู GitHub ครับ คือก็จะชอบมาดู ส่วนมากนะ ก็เราก็จะดูรีโปที่เราชอบ ตอนนี้ผมก็มาในฐานะของ Elysia contributor นะฮะ ผมก็หา Elysia ก่อนนะครับ คือปกติ อันนี้คือที่ผมนะ ก็คือผมชอบมาดู Elysia อย่างเงี้ย แล้วก็เราชอบ เราก็ดูรีโปที่เราชอบ ง่ายๆเลย ไปที่ Issues ครับ แล้วก็ไปที่ bug

คือผมว่า developer ทุกคนน่ะ ที่เราใช้ tool ตัวนั้นน่ะ แล้วก็มีความฝันที่แบบ เฮ้ย กูอยากเป็นส่วนหนึ่งของ contributor กูอยากเป็นส่วนหนึ่งของ repo นี้ถูกไหม issue หรือสิ่งที่แน่นอนว่า ถ้าเราทำแล้ว มันเป็นประโยชน์กับหลายคน ก็คือ bug เนาะ คือถ้าเราช่วยแก้ bug ได้ คือบางครั้งแบบ issue นอกจากที่เราจะ feature request เนาะ บางครั้งแบบ เราก็ไม่ใช่แนวแบบ feature request ที่แบบ ไม่รู้จะ request อะไรเนาะ อ่ะ แล้วงั้นเราแก้ bug ให้เค้าครับผม ก็ผมก็จะมาได้ดูอันไหนที่แบบว่า

มันไม่เกินมือผม หรือแบบว่าผมทำได้เงี้ย เออ ผมก็ลองดูครับผม

ก็จะมีบางอันนะ คืออันเนี้ย คือง่ายสุดเลย ง่ายสุดก็คือ

การแก้ไขเอกสารเป็นจุดเริ่มต้นที่ดี2:24

แก้ document ผมรู้คุณก็ทำ

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

คุณออม หรือ contributor เค้าอาจจะแบบอาจจะลืม หรืออะไรเงี้ย เค้าก็ อ่า เราก็ช่วยเค้าแล้วกัน ซึ่งเราก็ได้ความรู้ด้วยอะไรเงี้ย ก็คือ ความรู้ markdown เนี่ย เป็นลาภอันประเสริฐนะ ก็คือถ้าใครที่แบบไม่รู้ว่าจะเริ่ม อ่า programming language อะไร หรือเริ่มที่ script อะไรก็ markdown ครับ คุณใช้ markdown เนี่ย คุณ contribute ได้ยัน react เลยนะ เพราะอะไร ก็คุณก็ไปแก้ readme เค้าได้นะฮะ เออ ครับผม

ประสบการณ์การมีส่วนร่วมใน Elysia3:10

แล้วก็ล่าสุดเนี่ยก็คือ ผมก็มีอัพเดตแบบรูป

ก็คือรูปเมื่อกี้เนาะ ก็คือตัว ตัว swagger อ่ะ ก็ ตอนนี้เค้า เมื่อก่อนเค้าใช้เป็น swagger UI ตอนนี้ก็ใช้เป็น Scalar แล้วเค้าก็ยังไม่ได้เปลี่ยนรูปนะครับ ผมก็ไปเปลี่ยนรูปให้เค้าครับผม แต่ว่าเค้ายังไม่ได้ approve PR ผม เค้ายังไม่ได้ merge ให้ผม

ผมเข้าใจว่าเขามีงานเยอะ

คือต้องเข้าใจว่า

open-source library เนี่ย มันก็จะมีความงี้ไง คือแบบว่า เรา develop กันเป็นร้อยเป็นพันคนเนาะ อะไรอย่างเงี้ย

อ๋อ รีโหลด อ้าว merge ได้แล้ว!

คุณสามารถเป็น contributor ง่ายๆ ครับ คุณไม่จำเป็นที่จะต้องเป็น software engineer หรือแบบไม่ต้องเป็นอะไรเลยเนี่ย แค่ เปลี่ยนรูปแล้วก็จริงๆ

ทีนี้มาถึงเรื่องจริงจังบ้าง คือผมก็แบบ

การเรียนรู้จากการอ่าน Pull Requests และ Issues4:20

ก่อนหน้านี้ก็คือ ผมต้องใช้ว่าเรียนรู้ เรียนรู้แบบ coding เนาะ ผมเข้าใจว่าบางคน อาจจะเรียนรู้จากการอ่านหนังสือ แต่ว่า คือผมไม่ใช่อ่ะ ผมไม่ใช่คนที่แบบชอบอ่านหนังสือ แต่ผมชอบ ที่จะอ่านแบบ อ่าน pull request อ่าน อ่านแบบ อ่าน issues อ่านอะไรพวกเงี้ย คือชอบอ่านอะไรพวกนี้มากกว่า แต่แบบ คือผมไม่ชอบอ่านเป็นเล่มๆ เนาะ แล้วก็ผมก็แบบพยายามที่จะไป แก้ issues จาก library

ที่เราชอบ อันนี้ก็เป็น library เก่าเนาะ แต่ก็ยังใช้อยู่ คือ Storefront UI นี่ก็ของ Vue ก็อันนี้ก็คือเป็นโปรเจคแรกๆ ที่ผมได้ contribute เนาะ เพราะแบบว่า Storefront UI ก็เป็นก็คือเป็น UI library ของใน Vue community ที่จะโฟกัสไปที่ e-commerce จริงๆ ต้องบอกว่า Vue Storefront เนี่ยก็คือเป็น- (ก็คือเสื้อที่ผมใส่อยู่เนาะ Vue Storefront เนี่ย จริงๆ ไม่ได้ไม่เกี่ยวอะไรหรอกนะ) โอเค ก็คือ Vue Storefront ก็เป็น

ประสบการณ์กับ Vue Storefront และ Storefront UI5:11

เหมือนเป็น framework ของ Vue ที่ integrate กับ มาเจนโต้ ซึ่งตอนนั้นก็คือศึกษา มาเจนโต้ แล้วก็ใช้ Vue ด้วยอะไรเงี้ย ก็เลยมุ่งมาที่ Vue storefront ครับผม ซึ่งผมก็มาแก้บั๊กอะไรเงี้ย

คือแก้ไม่ยากเลย แต่ว่า นอกจากเรื่องโค้ดอ่ะ สิ่งที่ผมอยากให้คุณรู้คือ บางครั้งอ่ะครับ การที่เราจะ สื่อสารกับคอมพิวเตอร์อ่ะ คือต้องใช้ ภาษาอังกฤษเนาะ คือการที่เราได้ contribute กับหลายๆ libraryอ่ะ มันได้ใช้ภาษาอังกฤษด้วย คือนอกจากว่าเรา การที่เรา contribute ให้กับ open source เนี่ย นอกจากที่เราได้ความรู้ด้านโค้ดเนี่ย คือได้ภาษาอังกฤษด้วย คือ ต้องเข้าใจว่าแบบ คือผมอ่ะ ภาษาอังกฤษอ่ะ เมื่อก่อนผมก็มั่นใจนะว่าแบบ ภาษาอังกฤษผมดี แต่ว่า พอไปเจอ the real world โอ้โหแบบ คือง่อยอ่ะ นึกออกมั้ย ง่อยมาก เพราะว่าแบบว่า มันไม่ได้ถูกเอามาใช้เนาะ แต่แบบว่า เออ คือ open source เนี่ย GitHub เนี่ย issue เนี่ย คือมัน

คุณได้ใช้จริงๆ ถูกมั้ย คือ คุณจะเรียนรู้สิ่งนั้นเมื่อคุณได้ใช้มัน คือภาษาอังกฤษคุณไม่จำเป็นที่ต้องแบบ ต้องไป อาจจะแบบ บางคนอาจจะแบบ ไม่ได้อยากไป เรียนคอร์สเนาะ ผมมองว่า เฮ้ย การที่ผมได้คุยกับ contributor ต่างๆ เนี้ย มันเรียนรู้แบบง่ายๆ แบบทำได้ ทำได้แบบทำได้ที่บ้าน ทำได้ ทำได้วันนี้ อันนี้ผมก็แบบ คุยเรื่องบั๊กอะไรต่างๆ คือผมเรียนรู้เยอะมาก แต่พอมี ChatGPT ก็สบายขึ้นนะ ก็รู้สึกว่า เออ แบบ เราแกรมม่าอะไรก็ดีขึ้น ครับผม

การมีส่วนร่วมในโปรเจค GraphQL และ ElysiaJS6:33

แล้วก็มีอันนี้ก็แก้

แก้นู่นแก้นี่อะไรนิดหน่อย ก็มี ส่วนมากก็จะ ก็อย่างนึงก็คือว่า ผมก็จะเรียกว่า

contribute กับพวก โปรเจคที่เป็น Vue เพราะว่า ก็เคยใช้ Vue มาเนาะ แล้วก็แบบ หา library ที่เราชอบ อะไรประมาณเนี้ย คือแต่ก็ไม่ได้มีแค่ ไม่ใช่แค่ Vue นะ คือผมก็ไปโปรเจคอื่นบ้าง อะไรเงี้ย ก็มี Elysia เนาะ แล้วก็มี- อ้า อันนี้ อ้าว อันนี้ยังไม่ได้...

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

แซวเล่นครับผม โอเคครับ แล้วก็อันนี้คือ

การช่วยแก้ไข Type ใน Elysia7:36

อันนี้ภูมิใจสุดก็คือ ไปช่วยเค้าแก้ type เนาะ เพราะแบบว่าแบบเออ อะไรอย่างเงี้ยก็ ผมชอบ Elysia ตรงที่ว่าแบบ เรื่อง type เนี่ยเค้าแบบเจ๋งมาก คือต้องบอกว่าแบบ Elysia แบบ ผมชอบ generic type เค้าอ่ะ มันสวยมาก แบบมันดูใช้งานง่ายมาก แล้วผมก็ แบบเรียนรู้ generic type แบบเรียกว่า ซึมซับเลย คือแต่นี่ทั้งนี้ทั้งนั้น ผมก็บอกเสมอนะว่า โค้ดใน open source เนี่ยมัน

ข้อควรระวังเกี่ยวกับโครงสร้างโปรเจค Open Source8:01

มันก็ไม่ได้ practical ขนาดที่คุณแบบ เอามาใช้ในงาน คือบางคนอาจจะ บอกว่าแบบเฮ้ยอยากจะหา best practice ของการ ที่คุณจะขึ้นโปรเจค เนาะ ผมกล้าพูด 100% ว่าถ้าคุณเอาโปรเจค อย่างอ่ะผมพาแบบโปรเจคแบบ ของ React ของ Meta หรือ Facebook อย่างเงี้ย แบบไอ้โปรเจคเค้าดีมาก แบบเออใช้กันเป็นล้านอย่างเงี้ย คุณพยายามที่จะเอาโปรเจค structure เค้ามาใช้อ่ะ คือผมเคยเจอ คนที่แบบว่าเฮ้ยไปดูโปรเจค structure ของโปรเจคนี้มาแล้วมาใช้ ผมบอกเลยว่าแตก แน่นอนว่าแตก

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

โอเคอันนี้ก็อ่าแก้ลิงก์ไปแล้วเนาะ แล้วก็อ่าคือหลายๆ คน

ความกังวลเกี่ยวกับการเปิดเผยโค้ด8:59

ชอบบอกว่าแบบเอ้ย โอโอเพนซอร์ส อันนี้ไม่เกี่ยวกับผมนะ ไม่เกี่ยวกับผม คือบางคนจะบอกว่าเอ้ย ถ้าสมมุติว่าเราวันนึงอ่ะ เราอยากจะทำเอาโปรเจคเราเนี่ย ขึ้น open source เนาะ เฮ้ย คนก็มาขโมยไอเดียเราสิ คนก็ทำตามเราได้สิ ผมพูดอย่างงี้ได้ไหม คือทุกคนรู้ใช่ไหมว่า React น่ะ เป็น open source ถูกป่ะ พวกคุณเข้าใจ useEffect กันกี่คน

50% ป่ะ คือผมกล้าพูดว่า ต่อให้มี react compiler เป็นโค้ดออกมา

ต่อให้มี useEffect ออกมาเนี่ย บางคนก็แบบ เชี่ย useEffect คืออะไรวะ ต้องใส่ตรงไหนอะไรเงี้ย มันไม่ได้เกี่ยวว่าของที่ออกมาแบบ พอเราเห็นว่ามันทำงานยังไงแล้ว เราจะขโมยไอเดียของเขามาได้ มันไม่ได้ง่ายขนาดนั้นในความเป็นจริง แต่ต้องมองว่าการที่ react เขาเป็น open source หรือ project ต่างๆ ไม่ว่าจะเป็น Vue Angular หรือนู่นนี่นั่น Svelte อะไรอย่างเงี้ย ที่เขาเป็น open source อีกมุมนึงที่คุณต้องมองคือ การเติบโตของ library และ tool นั้น ที่มันเติบโตอย่างก้าวกระโดด นั่นคือเหตุผลการมีตัวตนของ open source แม้ว่าอาจจะไม่ได้มี revenue อะไรเงี้ยที่แบบเป็นรูปเป็นร่างชัดเจน แต่คุณอย่าลืมว่า ก็มีบางบริษัทนะ ที่เติบโตมาด้วย open source อย่างอันนี้ผมพูดคือ Vue Storefront ซึ่งตอนนี้ก็ชื่อบริษัทว่า Alokai เงี้ย ก็คือเติบโตมาด้วย open source ครับผม

ประโยชน์ของ Open Source สำหรับการเติบโตของไลบรารี10:29

คุณอย่ามองว่า เอ้ย ถ้าเราเปิดโค้ดไป เอ้ยคนเขาก็ก๊อป ใช่ เขาก๊อปแต่ว่า มันก็มีทั้งคนที่เขาก๊อปแล้วก็ เอาแล้วก็ขโมยไอเดียคุณไปจริงๆ กับคนที่เอาไปต่อยอดและ ทำให้เกิด product ที่ดีขึ้นไปมากกว่านี้ครับผม แต่ก็ไม่ได้บอกว่า โอ๋ งั้นวันนี้ ทุกคนเอา project เราเนี่ย

ลง open source เลย อย่าลืมแบบ พวก key script ต่างๆ ลบออกก่อนนะ แบบไปพร้อม key อันนี้ไม่ได้นะ ไม่ใช่แบบโอ๋ ค่อยไปครับผม

การเรียนรู้จากสไตล์การตอบของ Contributor11:03

แต่จริงๆ เนี่ย นอกจากใน open source นอกจากเรื่องของโค้ด เรื่องของการ contribute เนี่ย อยากให้ดูสไตล์การตอบของ contributor แต่ละคน อันนี้คือ Adam Wathan เนาะ อันนี้ก็อีกหนึ่งฟีเจอร์ที่ผมก็ ลืมมาทำ เพราะแบบว่า มันแค่เพิ่มตัวแปร max-width screen ของ Tailwind คือผมอยากมาเพิ่มมาก สรุปก็คือมาเพิ่มไม่ทัน มันไปไกลมาก คือแค่เนี้ย อยากให้ดูโค้ดแบบแค่เพิ่มตัวแปรแค่เนี้ย คุณก็ได้เป็น contributor ของ Tailwind แล้วอ่ะ คือผมวันนั้นน่ะ ผมติดอะไรก็ไม่รู้ ผมก็ลืมมาทำ

ก้าวแรกของการเป็น contributor มันง่ายแค่เนี้ย คือแค่เรามาขวนขวาย มาดูเนาะ แล้วก็การตอบของ contributor ต่างๆ แล้วก็ contributor ที่ผมรู้สึกว่าผมชอบมากก็คือ

ก็คือเขาคนนี้ครับ

Evan You และสไตล์การตอบของเขา12:07

ก็คือเค้าชื่อ Evan You นะฮะ ผมว่า Evan You เป็น contributor ที่ ผมว่าสไตล์การพูดเค้าอ่ะ เค้า เท่ ดุ ดัน แล้วก็เชือดเฉือนอะไรแบบเนี้ย แต่ว่าจริงๆอ่ะ ผมเรียกว่า ชอบสไตล์การตอบมาก ก็อย่าลืมไป follow Twitter ของ Evan You รู้สึกว่า ผมว่าเป็นตัวอย่างของ contributor ที่ดีมากๆครับผม แต่ผมเสียดายมากๆที่ผมไม่ได้เอาตัวอย่าง หรือไม่ได้สรุปว่าแบบ เฮ้ย Evan You เค้าพูดถึงยังไงบ้าง หรือเค้าพูดถึงแบบ contribute อะไรบ้างเนี้ย แต่ว่า พวกคุณสามารถที่จะไปดูสรุปต่างๆได้นะฮะ จาก

แนะนำเพจ Vue News Thailand12:44

มีเพจเพจนึงที่ดีมากๆ ก็คือเพจชื่อว่า Vue News Thailand นะครับ ก็เป็น เป็นเพจที่ดีมากๆครับ ผมอ่ะติดตามเพจนี้มาเพราะว่าคือเค้า เค้าพูดถึง Evan You คือถ้าใครชอบ Vue.js หรือใครชอบ Evan You ก็มาที่เพจนี้นะฮะ ครับ คือเพราะว่าเพจเนี้ย เค้าค่อนข้างจะ เรียกว่าสรุปเรื่องราวของ Evan You ไว้เยอะมากครับผม ถ่ายรูปไว้ยัง

ขอบคุณสำหรับหน้าม้าครับผม ผมก็มีเท่านี้แหละครับผม ลืมอีกโปรเจคนึงที่ผมกำลังทำอยู่น้อ

แนะนำโปรเจค Frontend News Thailand13:29

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

โลโก้ คิดโลโก้ไม่ออกแบบ ตอนนั้นคือไม่รู้จะทำไง

คือตอนนั้นคิดอย่างเดียวว่า โลโก้ต้องสวย ก็เลยนานที่โลโก้ แต่จริงๆ คือโปรเจคเนี้ยก็คือ เรียกว่า เราอยากจะทำเว็บข่าวที่ของ Frontend ก็คือ ผมก็ต้องพยายามที่จะเขียนข่าวของเจ้าอื่นแหละ ล่าสุดก็เป็น React เนาะ แล้วก็จะเขียนแบบ พยายามเขียนข่าว Astro Tailwind อะไรเงี้ย เพราะว่าแบบ ค่อนข้างจะเขียนข่าวที่มัน นอกเหนือจาก Vue ด้วย ก็เลยเป็นโปรเจคที่กำลังมาครับผม ถ้าใครรู้สึกชอบหรือยังไงหรือ อยากจะบ่นเว็บอะไรยังไงก็ เปิด issues เปิด pull request มาได้นะครับผม แน่นอนผมจะเปิด ผมจะรีบ approve แล้ว รับเลยครับผม

สรุปและขอบคุณผู้ฟัง14:37

จบจริงๆแล้วครับผม อ่า 15 นาทีพอดีครับผม ขอบคุณทุกคนมากครับ ขอบคุณที่ฟังอยู่ครับผม