Word Camp Bangkok 2019 งานของคนรัก WordPress

งาน Word Camp ปี 2019 ในครั้งนี้จัดขึ้นมาเป็นครั้งที่ 5 แล้ว ซึ่งงานในครั้งนี้ นับว่าน่าไปมากๆ เพราะว่าทาง Word press เอง มีการเปลี่ยนแปลงครั้งใหญ่ไปไม่นาน แน่นอนครับ มันคือเรื่องของ การเปลี่ยน Editor ไปเป็น Gutenberg นั้นเอง

Word Camp Bangkok 2019
Word Camp Bangkok 2019

งาน Word Camp ปี 2019 ในครั้งนี้จัดขึ้นมาเป็นครั้งที่ 5 แล้ว ซึ่งงานในครั้งนี้ นับว่าน่าไปมากๆ เพราะว่าทาง WordPress เอง

มีการเปลี่ยนแปลงครั้งใหญ่ไปไม่นาน แน่นอนครับ มันคือเรื่องของ การเปลี่ยน Editor ไปเป็น Gutenberg นั้นเอง

ตัวงานจัดขึ้นที่ มหาลัยสยาม ในกรุงเทพ โดยกิจกรรมมี 2 วันคือวันที่ 16-17 กุมภาพันธ์ 2562 โดยที่ตัวงานวันเสาร์ที่ 16 เป็นกิจกรรม Contributor Day ซึ่งจะรับจำนวนกำกัดแค่เพียง 100 คนเท่านั้น

ตัวงานจะเป็นเรื่องของการพัฒนาตัว Core Team กับ Theme Development เป็นลักษณะของกาทำ Workshop ที่หยิบยกเรื่องของ Gutenberg กับการสร้าง Theme อย่างถูกต้องออกมาใช้

ต้องขอชม ทางทีมงานผู้จัดมากๆ เพราะว่าอย่างที่เค้าใจกัน งานแบบนี้ต้องมาด้วยใจล้วนๆ แต่ก็จัดออกมาได้ดี ด้วยความเป็นงาน camp อาจจะเรียกได้ว่า เป็น Style ของงานนี้เลยก็ได้ คือความไม่เป็นทางการ

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

และเนื้อหาของเหล่า Speaker ที่มาพูดกันก็เรียกได้ว่า ตัว Top ของวงการกันทั้งนั้น โดยที่ทั้งหมดมีถึง 4 ห้อง และเต็มวันแบบง่วงได้แต่ห้ามหลับเลยทีเดียว

ลงทะเบียน ก่อนเข้างาน
ลงทะเบียน

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

Swag หรือของที่ระลึกจากงาน
Swag หรือของที่ระลึกจากงาน

ของที่ระลึกในงานสวยดีครับ มียาหม่องกับสมุดโน๊ตเล่มเล็กๆแล้วก็ Sticker กับเจ้า Wapuu ที่ชื่อ Hanuman Wapuu ออกแบบได้สวยมากครับ

เปิดงานแล้ว

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

Design Research
Design Research

หลังจากเปิดงานเสร็จเราก็แยกย้ายกันไปตามห้องต่างๆ ส่วนตัว Session ในงานผมเลือก ปักหลักที่ห้อง B เพราะสนใจเรื่อง Design Research โดยคุณ Sutham Thammawong เพราะเอาไปใช้งานเวลาไปคุยกับลูกค้า ไปคุยกับ User ได้

เนื้อหาก็พูดเรื่องการทำ Research ในเรื่องของการสร้าง Post บน Classic Editor กับ Gutenberg เปรียบเทียบกัน โดยแนะนำวิธีการตั้งคำถาม การออกแบบแนวทาง และการสรุปผล

เรื่องที่ 2 เป็นเรื่องของ Gutenberg พูดโดย Woratana Ngarmtrakulchol อันนี้ก็สนใจ เพราะมันยังใหม่อยู่ แต่โดยส่วนตัวที่ลองใช้งานมา ก็ประทับใจนะ ผมว่าความสามารถมันเยอะดี ทำงานสนุก แล้วก็คิดว่ายังไง WordPress ก็จะต้องพลักดันให้ใช้อยู่แล้ว จะรออะไร เลบรีบเอามาใช้เลย 555

เนื้อหาหลักๆก็เป็น การมาของ Gutenberg จะทำให้การทำงานง่ายขึ้น ดีขึ้น และอนาคตก็วางแผนไว้ว่าจะสามารถใช้ ร่วมกันกับ App อื่นๆได้ด้วยนอกจาก Word press

ส่วนตัวเพิ่งรู้เรื่อง การทำ import และ export แบบเป็น json อันนี้เพิ่งได้ยินเลย ถือว่าคุ้มเลยข้อนี้ และเรื่องที่ว่า เราสามารถออกแบบ Block แล้วนำไปใช้งานที่อื่นได้ ทำให้อนาคต อาจจะมีการสร้างเฉพาะ Block ออกมาขายเลยนะเนี่ย

ยังไงก็ฝากถึง คนที่ยังไม่ได้ใช้นะครับ ว่ายังไงซะ เดี๋ยวอีก 3 ปีข้างหน้า Classic editor ก็จะหนุดสนับสนุนแล้ว ได้เวลาหันมาใช้ Gutenberg กันแล้วละครับ

สร้าง APP ด้วย WordPress
สร้าง APP ด้วย Word press

เรื่องถัดมาหลังพักทานข้าว เป็นเรื่องของพี่หลง Pattaya Upara เกี่ยวกับวิธีการเปลี่ยนไอเดีย เป็นแอพแผนที่ ชุมชนในกรุงเทพ ด้วยการใช้ wordpress อันนี้บอกเลยว่า เปลี่ยนวิธีคิดไปมาก

ทำให้การมอง WordPress เป็นแค่ CMS ไม่ได้แล้ว เพราะความจริง WP คือระบบ ที่มีความพร้อมในการ นำไปประยุกต์ แล้วแต่ว่า คุณจะสามารถหยิบเอาไปใช้ ในลักษณะไหนมากกว่า

Woo Commerce
Woo Commerce

ถัดมาเป็นเรื่องของ พี่เม่น Chakkrisn Talawat ที่มาพูดถึงการทำงานกับร้านค้าออนไลน์ Woo Commerce ด้วยรูปแบบของคนไทย เป็นร้านค้าแบบไทย การตั้งค่า วิธีคิดแบบไทย อันนี้ได้รู้จัก Plugin เยอะมาก แถมไม่ธรรมดาตรงที่ Seed Themes มาแบบมี Live สดด้วย

ส่วน Slide ในงานพี่เม่นแจกที่ Link นี้ครับ

Maintaining Woo Commerce
Maintaining Woo Commerce

อีกช่วงเป็นเรื่องการ Maintaining Woo Commerce จากคุณ Witthaya Santiwitthayawong ที่ออกจะเน้นแนว ตั้งรับเป็นหลัก คือใคร Update รอก่อน ใจเย็นๆ ดู Feedback ก่อน

ดูเรื่องของความเข้ากันได้กับ Plugins ตัวอื่นๆก่อนแล้วค่อย เอามาทดลองบน Staging ถ้าทุกอย่างลงตัว ค่อยจัดบนของจริง

ส่วนเรื่องสุดท้าย อันนี้ Highlight ในงานสำหรับผมเลย เป็นเรื่องของ Warat Wongmaneekit ที่มาพูดเรื่องการทำ optimization บน wordpress ที่เน้นสายเบา ทุกอย่างมีค่าหมด

อธิบายเรื่องของแนวคิด ในการทำงานของ Web Browser เพื่อที่จะ Render หน้าเว็บออกมาให้ User เห็น ทำอย่างไร มีการใช้ลำดับขั้นตอนอะไรบ้าง การเรียก CSS, JS, Font, Image และแนะนำวิธีการปรับค่าให้สายเขียว บน Google Page Speed Insight โดยใช้ plugins

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

แต่พอมาวันนี้ได้ยิน คนพูดเรื่องนี้ในที่สถานะ แล้วไม่มีใครว่าอะไร เราก็รู้สึกดีใจแล้ว

สุดท้าย ก่อนปิดงาน

เกมส์ก่อนปิดงาน
เกมส์ก่อนปิดงาน

เดินทางมาถึงช่วงสุดท้ายกันแล้ว ตอนนี้เป็นเรื่องของ การเล่นกิจกรรมสนุกๆครับ กับคำถาม คำตอบ โดยใช้เว็บที่ชื่อ Kahoot.it ให้เราเข้าไปแล้วก็รอคำถาม และคำตอบจากหน้าจอ จากนั้นใครกดเร็วสุดจะได้คะแนนเยอะสุด และแจกรางวัลเสื้อยืดสุดพิเศษ

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

สุดท้ายจริงๆแล้ว งานจัดได้ดีมากๆครับ ขอบคุณทุกคน ทั้ง Speaker ทั้งทีมงานและ Sponsors หวังว่ากิจกรรมต่างๆสำหรับคนรัก WordPress จะมีอีก ต่อเนื่องไปเรื่อยๆนะครับ

Link Official

วิธีสร้าง SQL Table ง่ายๆ ด้วยเครื่องมือ dbdiagram

dbdiagram เป็นเครื่องมือที่ทำให้ คนที่ต้องทำงานกับ database ทำงานได้ง่ายขึ้นเยอะเลย
เคยมีปัญหาแบบนี้ไหมครับ คิดเรื่องที่เรากำลังออกแบบ function แล้วนึกขึ้นมาได้ว่า เราควรต้องเก็บข้อมูลอะไรบ้าง บางทีการหากระดาษจดหรือหาที่จดใน app บนมือถือมันก็เสียเวลาหรือไม่สะดวกเหมือนกันนะ

dbdiagram เป็นเครื่องมือที่ทำให้ คนที่ต้องทำงานกับ database ทำงานได้ง่ายขึ้นเยอะเลย
เคยมีปัญหาแบบนี้ไหมครับ คิดเรื่องที่เรากำลังออกแบบ function แล้วนึกขึ้นมาได้ว่า เราควรต้องเก็บข้อมูลอะไรบ้าง บางทีการหากระดาษจดหรือหาที่จดใน app บนมือถือมันก็เสียเวลาหรือไม่สะดวกเหมือนกันนะ

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

แค่ขึ้นชื่อว่า table จากนั้นก็ระบุชื่อ แล้วตามด้วย ปีกกาเปิดปิด จากนั้นก็ถึงคราวของ column หรือ Fields ด้านใน ใส่แค่ชื่อกับ type แล้วก็อะไรเป็น PK ก็พอ จะเพิ่มอะไรก็ ขึ้นบรรทัดใหม่ได้เลย

ส่วนถ้าต้องการบอกว่าอะไรมีการ Ralative กันตามรูปแบบของการทำ One To Many หรือจะ many to one หรือจะ one to one ก็แสนง่ายดายแค่ ระบุ Ref แล้วก็ตามด้วยชื่อของความสัมพันธ์ และระบุ table1.field1 < table2.field2 ในปีกกา

และแน่นอนครับถ้าเราจะให้ดีต้องเอาไปใช้งานในรูปแบบ SQL ได้ด้วยเลย งานนี้เลยมี ทั้ง Import และ Eport มมาให้ด้วยเลย ได้ทั้ง SQL, MySQL, PostgreSQL หรือจะเป็น PDF,PNG ก็ยังได้

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

Link :: https://dbdiagram.io

Default Browser Styles กับ เรื่องของ CSS

“Browser แต่ละเจ้าเค้าก็มี Style กันเป็นของตัวเองนะครับ….” ว่าแต่มันเป็นยังไงหรอ ไอ้เจ้า style ของ browser เนี่ย เชื่อว่าหลายคนน่าจะรู้กันเป็นอย่างดี สำหรับเรื่องนี้ วันนี้เอามาทบทวนก่อน เพื่อเป็นการเริ่มต้นในสิ่งใหม่ๆ

“Browser แต่ละเจ้าเค้าก็มี Style กันเป็นของตัวเองนะครับ….” ว่าแต่มันเป็นยังไงหรอ ไอ้เจ้า style ของ browser เนี่ย เชื่อว่าหลายคนน่าจะรู้กันเป็นอย่างดี สำหรับเรื่องนี้ วันนี้เอามาทบทวนก่อน เพื่อเป็นการเริ่มต้นในสิ่งใหม่ๆ

เนื่องจากว่า หลังจากที่เราทำหน้า HTML เสร็จปุ๊บ เอ….เรายังไม่ทันได้ทำอะไรกับ CSS เลย ทำไมอยู่ๆมันถึงมีการแสดงผล

ที่มีบางอย่าง เป๊ะ!!! เรากับถูกกำหนดเอาไว้แบบนั้นละเนี่ย นั้นเป็นเพราะว่า เรากำลังถูก style ของ browser แต่ละตัวกำหนดอยู่นั้นเองครับ

งั้นมันก็เป็นเรื่องของ Software ที่เราเอามา Run ตัว Website ของเราแล้ว ไม่เกี่ยวกับเรา เอ… คิดแบบนี้ก็ไม่ถูกซะทีเดียวนะครับ เนื่องจากว่า บางครั้งการ design ของเราก็อาจจะถูกรบกวนโดยเรื่องของ กฏพื้นฐาน ตรงนี้ก็เป็นไปได้

งั้นเราเริ่มต้นจากการดูก่อนว่า browser เค้ากำหนดอะไรของเราบ้าง จริงๆก็มีไม่เยอะเท่าไหร่นะครับ ผมจะลอง List ให้ดูแล้วกัน จะได้เห็นภาพ

List CSS Default

  • Margin
  • Padding
  • Table
  • Font-size
  • Header ( เช่น H1-H6 กลุ่มนี้)
  • File Input
  • Submit button
  • Hyper Link ( a )

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

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

งั้นผมว่า ผมพาไปดูวิธีง่ายๆในการจัดการกับเรื่องนี้ก็แล้วกัน นั้นคือ การใช้ code library เล็กๆที่อยู่ในกลุ่ม css reset ซึ่งผมคัดๆมาให้ไว้ใน list รายการด้านล่างนี้แล้วครับ

Marx 
Cleanslate
MiniReset.css
Typeset.css
Normalize.css
Meyerweb Reset CSS
CSS Mini Reset
HTML5 Reset Stylesheet

สำหรับคนที่สนใจเนื้อหา และความรู้พื้นฐานด้าน css อย่าลืมติดตามกันได้ที่นี่นะครับ