Articles Category

Our Blog

บันทึกเรื่องราวต่างๆ

ทำความรู้จัก Qubely กันซักหน่อย

Qubely คือ Plugin ที่เพิ่มความสามารถให้ Gutenberg ที่เป็นตัว Editor ที่ผสมกับ Page Builder ของ Wordpress ที่ถูกติดตั้งมาตั้งแต่ตัว WordPress 5.0 Beta ที่ทำให้เราสามารถสร้างคอนเทนต์บนเว็บโดยที่เราไม่ต้องอาศัยความรู้ในการ Coding เลย แต่ตัว Gutenberg เองเนี่ย มันก็มีความสามารถมาให้ประมาณนึง ถ้าเทียบกับคนที่เคยใช้ Page Builder เจ้าอื่นๆแล้ว อย่างเช่น WPBakery, หรือ Elementor ก็จะพอทราบว่า มันทำได้ไม่เท่าเพื่อนๆเค้าซักเท่าไหร่ เจ้าตัว Qubely นี่แหละ ที่จะมาเพิ่มความสามารถให้กับตัว Gutenberg ให้มันสามารถจัดการอะไรได้มากขึ้น และที่สำคัญ ความเร็วของมันไม่ธรรมดาเลยทีเดียว

ความสามารถของ Qubely ทำให้คนที่เคยปิด Gutenberg ไปไวๆหลังจากสร้างเว็บ Wordpress ใหม่แทบจะทุกครั้ง หันกลับมาอยากใช้มันดูอีกซักครั้ง ด้วยความสามารถของมันโดยเฉพาะการจัด layout (Features ทั้งหมดของ Qubely สามารถเข้าไปดูได้ที่ https://www.themeum.com/product/qubely/

 
ต้องแจ้งเบื้องต้นก่อนว่าด้วยความเป็น Designer ที่ไม่ได้มีความรู้ของการ Coding มากมาย สิ่งที่คาดหวังจากตัวช่วยที่จะทำให้สามารถจัดการหน้าตาของ website ได้เอง แบบที่สามารถทำได้อย่างจริงจัง ก็เลยไปจบอยู่ที่ WPBakery มาซักระยะ เนื่องจากมันมี options และ Elements มากมายที่ทำให้เราสามารถขึ้นโครง website ได้อย่างที่เราออกแบบเอาไว้ จนหลังๆก็เริ่มเปลี่ยนรูปแบบการทำงานมาเป็นออกแบบบนตัว site เลย แทนที่จะ Design บน Photoshop ก่อน เพราะเราเริ่มชินและเข้าใจกับรูปแบบและข้อจำกัดต่างๆของมัน แต่สิ่งที่เป็นปัญหาและเห็นได้ค่อนข้างชัดเจนคือ มันข้า! ยิ่งถ้าในหน้า page เรามีการออกแบบโครงสร้างไว้อลังการเท่าไหร่ หลังบ้านในการ edit ส่วนต่างๆยิ่งช้าเพิ่มขึ้นเท่านั้น แต่ตัว Qubely ถ้าให้เปรียบเทียบส่วนตัว เหมือนยก Elementor ไปบวกกับ Gutenberg โดยที่การจัดการต่างๆยังอยู่บนหน้า Editor หลักของ wordpress เอง

Feature ที่น่าสนใจของ Qubely 

Sections - Qubely ได้สร้าง layout ของ section ต่างๆไว้ให้สามารถเลือกใช้ได้เลย (pre-made) โดยแบ่งออกเป็นหมวดหมู่ประเภทต่างๆ (Contact, Project, Feature, Team, Call to action, Pricing, Footer, Service, Testimonials Header, Content) เรียกง่ายๆว่าเราสามารถเลือกประกอบร่างส่วนต่างๆออกมาได้เลย

 
Starter Packs - นอกจาก Qubely จะสร้าง Sections Pre-Made ไว้ให้เราเลือกใช้แล้ว Starter Packs นี่จัดมาให้เต็มและง่ายกว่าเดิม คือเรียกง่ายๆว่าสร้างมาให้ทั้งหน้าเลย โดยแยกหมวดหมู่ไว้เช่นกัน (Education, Agency, Business, Restaurant, Nonprofit, Corporate) โดยที่เราสามารถเลือก layout ที่ตรงกับที่เราต้องการมาใช้งานได้เลย หรือจะแก้ไขเพิ่มเติมในแต่ละส่วนก็สามารถทำได้ เพราะมี option ให้สามารถ config แยกได้แทบจะทุกจุด



นอกเหนือจาก Pre-made ต่างๆที่เค้าเตรียมไว้ให้แล้ว ความสามารถอีกอย่างของ Qubely ที่มองข้ามไม่ได้ก็คือ Block ที่เสริมความสามารถของ Gutenberg

Qubely Block

ตัว Qubely เองเรียกตัวเองว่าเป็น Visual Gutenberg Block Toolkit แปลว่าตัวมันเข้ามาเสริม Gutenberg ให้มีความสามารถมากขึ้น โดยสิ่งที่ Qubely เสริมมาให้ จะมี

  • Row
  • Post Carousel
  • Button
  • Advanced Text
  • Icon
  • Google Map
  • Divider
  • Info Box
  • Image
  • Testimonial
  • Accordion
  • Heading
  • Video Popup
  • Progress Bar
  • Counter
  • Tabs
  • Social Icons
  • Contact Form
  • Button Group
  • Advanced List
  • Icon List
  • Block Wrapper
  • Team
  • Pricing
  • Timeline
  • Form Builder
  • Post Grid
  • Testimonial Carousel
  • Team Carousel
  • Price List
  • Image Carousel
  • Gallery
  • Pie Progress
  • Media Card

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

ในเรื่องของการ Config ส่วนต่างๆของ Qubely เองก็ทำออกมาได้ค่อนข้างครบถ้วนเลยทีเดียว ตัวอย่างเช่นการจัดการ Row นั้น ไม่ว่าจะเป็นการควบคุมความสูง, ความกว้าง, Padding, Margin, Gutter Size เรียกว่าสามารถคุมได้แทบทุกอย่าง

ความรู้สึกหลังทดลองใช้งาน

หลังจากได้ลองใช้งานดูจริงๆแล้วพบว่า Qubely เหมาะกับ Designer ที่ไม่มีความรู้ด้านการ Coding หรือแม้แต่คนทำเว็บทั่วไป ก็สามารถขึ้น Layout ได้อย่างใจโดยที่ใช้แค่ตัวฟรีก็เพียงพอ
ถึงแม้ว่า Qubely จะอัด Features มาให้เต็มขนาดนี้ แต่เหมือนก็ยังมีบางส่วนเล็กๆ ส่วนตัวยังรู้สึกว่ามีบางอย่างที่น่าจะพัฒนาเพิ่มได้อีก หรือมันอาจจะออกมาหลังจากนี้ก็ไม่แน่ เพราะเท่าที่เห็นยังมีอีกหลาย feature ที่รอจะออกมาอย่างต่อเนื่อง

Image Crop Size - การดึงรูปมาวางทำได้ง่ายมาก แต่เท่าที่เห็นจะยังไม่มีการเลือกขนาด Ratio ของรูปที่ดึงมาวาง ทำให้เวลาเราวางรูปต่อกันสองรูป ถ้าต้องการให้แสดงเท่ากัน อาจจะต้องทำการ Crop ให้ได้ Ratio ก่อนที่จะลากเข้ามาวาง ซึ่ง Builder บางตัวสามารถเหลือ Ratio ของภาพที่ดึงลงมาได้เลย ทำให้ลดเวลาในการจัดการรูปไปได้ส่วนนึง ซึ่งอันนี้ยังไม่เห็นใน Qubely

Post Grid Offset - เวลาดึง posts ออกมาแสดง Qubely มี Option ในการเลือก layout ได้หลากหลาย จัดการ Query ได้ว่าจะให้ดึงมาจาก Category ไหน แต่ยังไม่มีการเลือก post offset ว่าจะให้ Skip post กี่อันก่อนที่จะ query ออกมา ซึ่งมีประโยชน์พอสมควรในการวาง Layout แต่ไม่ใช่เรื่องใหญ่ มองข้ามได้

Editor View - Qubely อยู่บนพื้นฐานของ WYSIWYG (What you see is what you get) ก็จริง แต่ว่า Container ของ Editor มันค่อนข้างแคบ ทำให้ส่ิงที่ออกแบบไว้มันก็แสดงผลไม่เต็มที่อย่างที่มันเป็น จำเป็นต้อง Preview ออกมาเต็มๆอยู่ดี ถ้าสามารถ edit หลังบ้านได้อย่างที่หน้าบ้านแสดงเลย ก็น่าจะทำให้ experience ในการใช้งานสนุกขึ้นกว่านี้ได้อีก

สุดท้ายถ้าใครยังหา Editor ที่เป็น Page Builder ดีๆซักตัว อยากให้ลอง Qubely ดูซักครั้ง เผื่อจะชอบ ด้วยความเร็วของมันที่เทียบกับการใช้งาน Buidler ตัวอื่นๆแล้ว เรียกได้ว่าทำออกมาได้ดีเลยแหละ ไม่เจอความน่ารำคาญของการหน่วงแบบตอนที่ใช้ WPBakery หนักๆ ใช้งานง่าย ปิดงานได้เร็ว ถือว่าเป็นตัวเลือกที่ดีตัวนึงที่อยากแนะนำครับ

 

Joomla 4 Admin Template

หลังจากที่ Focus กับการจัดการงานต่างๆ ในชีวิตมาสักระยะ หยุดงาน Community ใน Joomla! มาหลายปี ด้วยความหวังว่า จะได้เห็นคนใหม่ๆ มาทำต่อ แต่ก็เหมือนทุกอย่างจะหยุดนิ่ง และด้วยตัวผมเอง ก็ไม่ได้รู้สึกตื่นเต้นอะไรกับ Joomla! 3.x  (หรืออาจจะหมดวัย ที่จะตื่นเต้นกับอะไรกับเทคโนโลยีแล้ว)  วันนี้พอเห็นเพื่อน  JoomlaShaper เสนอ idea สำหรับ Template Admin เพื่อใช้กับ Joomla! 4 ที่อยู่ระหว่างการพัฒนา  พอเห็นและทีมลงแรงทำ จนผ่านเข้ามาสู่การยอมรับที่จะนำมาใช้ใน Joomla! 4 แต่ยังต้องการทุกคนช่วยกันลงมือทำเพื่อให้มันเสร็จสมบูรณ์พร้อมที่จะออกมาใช้งาน ในระหว่างที่ Joomla! 4 ก็ยังพัฒนาเพิ่มเติมอยู่เช่นกัน ทีมส่วนใหญ่จึง Focus อยู่กับ Joomla! 4 ตัวหลัก  ใน Project  j4adminui (Template ตัวใหม่) จึงต้องการอีกหลายคนช่วยกัน  ด้วยความที่ผมเองอยากเห็น Template ตัวนี้ถูกรวมมาใน Joomla!4  จึงขอเป็น 1 คนที่ลงมือทำ  วันนี้จึงขอบันทึกวิธีการช่วย โดยที่ไม่จำเป็นต้องเขียน Code เพื่อแก้ไข Issue ที่มีคนแจ้งไว้  สำหรับท่านที่เป็น DevOps หรือ Developer ดูข้ามๆ ไปได้เลย หรือใช้สภาพแวดล้อมตามความถนัดครับ

สำหรับการติดตั้ง Joomla! 4 จาก GitHub โดยตรงนั้นสิ่งที่ต้องเตรียมเพิ่มมากกว่า Joomla! 3.x

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

ข่าวที่เกี่ยวข้อง

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

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