Seed News สวัสดีปี 2564

ทีมงาน Seed Webs จะทวีตประเด็นต่างๆ ที่น่าสนใจผ่านบัญชี @seedwebs และนำมารวบรวมทุกต้นเดือนนะครับ

สำหรับปี 2563 ที่ผ่านมา ประเด็นที่เราสนใจมีดังนี้

เดือนกันยายน 2653

  1. ก่อนหน้านี้ ระบบจองโรงแรมที่เชื่อมห้องพักกับ Booking / Agoda ได้ ทีมงานเราจะแนะนำลูกค้าให้ใช้ https://www.siteminder.com/ ตอนนี้เห็นของคนไทยเริ่มทำแล้ว น่าสนใจครับ BedBaker – ระบบบริหารช่องทางการขายโรงแรมออนไลน์
  2. The SEO Framework – Limit only 1 image for social sharing http://zpr.io/HXg6k
  3. อยากให้ vanilla js ทำงานเฉพาะมือถือหรือขนาดจอที่กำหนด เช็คด้วย matchMedia ประสิทธิภาพดีกว่า resize https://css-tricks.com/working-with-javascript-media-queries/
  4. การตั้งค่าให้ Post ใน Slack แล้ว Tweet อัตโนมัติ โดยตัด # ที่เราตั้งไว้ด้วย https://dev.to/hamatti/slack-to-twitter-with-zapier-3id0
  5. SpinupWP แนะนำให้ใช้ http://ohdear.appในการ monitor server มี status page ด้วย ดูดีเลย 🙂 https://status.seedwebs.com
  6. แนวทางการออกแบบเมนู เน้นให้เห็นชัด อย่าซ่อน เห็นด้วยว่าจำนวนเมนูที่มี ไม่ควรเกิน 7 https://blog.prototypr.io/ux-design-for-navigation-menus-d9875c91a7ea
  7. มีเพื่อนให้ช่วยหาระบบฟอร์มลงทะเบียนผ่านเว็บ ที่ดูดีกว่า Google Forms และตรงประเด็นกว่า AirTable ตอนแรกคิดถึง typeform แต่พอค้นเจอตัวนี้น่าสนเลย เค้าบอกว่า Web Form + Landing Page ก็คือ Landing Form ทำเป็นฟอร์มสั่งซื้อ/สมัครสมาชิกรายเดือนได้ด้วย https://paperform.co/
  8. ทีมงานกำลังเขียน AJAX บน WordPress เลยย้ายจาก jQuery มา Vanilla JS พร้อมกับส่งลิงก์ให้ดูว่า ความเร็วที่ได้ต่างกันมากกว่าเท่าตัวเลย https://measurethat.net/Benchmarks/Show/2720/0/vanilla-js-vs-jquery-ajax-perfomance
  9. ส่วนแนวทางการ filter WordPress post ด้วย vanilla js ลิงก์นี้ฮะ https://rudrastyh.com/wordpress/ajax-post-filters.html (ในตัวอย่างเป็น jQuery อยู่นะ)
  10. รวม Blocks อีกอัน เยอะมาก มี Facebook Like Box ด้วย ต้องมี ACF นะ (ธีม Plant ใช้ได้เลย) https://wordpress.org/plugins/acf-blocks/
  11. ระบบส่ง SMS แบบไม่ค่อยติด spam ราคาสูงกว่าเจ้าอื่นๆ แต่ลูกค้าใช้แล้วก็ไม่ติดสแปมจริงๆ แนะนำฮะ https://www.911itwist.com/
  12. พอทำเว็บหลายภาษา บางทีฟอนต์แต่ละภาษามันสูงต่ำไม่เท่ากัน แก้แบบง่ายๆ ก็ใช้โค้ด CSS ประกาศไปที่ root html ให้ฟอนต์เลย แล้ว font-size จุดอื่นๆ ก็ใช้หน่วย rem หรือ em เอา
html:lang(th),
html:lang(lo) {
  font-size: 16px;
}
html:lang(cbd),
html:lang(mm) {
  font-size: 14px;
}
  1. ใน CSS ความสูง 100vh คือสูงเท่ากับพื้นที่หน้าจอ แต่ว่า Browser บนมือถือมันดันแสดงแถบด้านล่างแล้วซ่อน ทำให้ 100vh อาจจะสูงเกินกว่าที่เราคิด ทางแก้คือใช้ -webkit-fill-available; https://css-tricks.com/css-fix-for-100vh-in-mobile-webkit/
  2. เจอปัญหาว่า ผู้ใช้งาน WordPress Multisite ไม่สามารใส่ SVG Icon ได้ ทั้งๆ ที่ลงปลั๊กอิน SVG Support ไว้แล้ว สาเหตุ: เพราะ admin ของเว็บย่อยสิทธิไม่พอ ทางแก้: เพิ่มโค้ดอนุญาต ตามนี้ https://mkaz.blog/wordpress/allowing-svg-in-wordpress-content/
  3. ทีมงานอยากทำระบบล็อกอินด้วย Line ก่อนกรอกฟอร์ม เลยใช้ปลั๊กอินของคุณสาม ดีมากฮะ https://wpdevthai.com/product/line-connect/
  4. สำหรับคนที่ใช้ Figma แล้วรู้สึกสีเพี้ยนเหมือน XD – วิธีแก้คือ ไปติ๊ก Color Space ให้เป็น sRGB ตามรูปฮะ
  1. Google Tables – ตาราง todo แนวๆ AirTables / Monday น่าลอง แต่ยังไม่เปิดในไทยแฮะ https://www.blognone.com/node/118592
  2. เริ่มต้นสร้าง LINE Bot เขียนโดยทีมงานของ LINE เอง
  3. เพิ่งรู้จัก http://shopmaster.com เว็บเทพ ดูดข้อมูลสินค้าจาก Marketplace ต่างๆ มา แล้วผูกสูตรตั้งราคา กด Publish ข้อมูลขึ้นเว็บ WooCommerce ต่อได้เลย สินค้ามีหลายแบบ (variation) ก็ทำได้เนียนมาก

เดือนตุลาคม 2653

  1. การสร้างส่วนลดใน WooCommerce แบบซื้อหลายชิ้นลดเพิ่ม ใส่โค้ดลดเพิ่ม สมาชิกแต่ละระดับลดเพิ่ม ฯลฯ หลังจากซื้อปลั๊กอินลองแล้วทิ้งมาเป็นหมื่นบาท ลงเอยที่ https://www.flycart.org/products/wordpress/woocommerce-discount-rules เทพจริง กราบๆ
  2. สำหรับคนใช้ SpinupWP เราสามารถสร้างเว็บใหม่ก่อนได้ โดยยังไม่ต้องชี้ domain มาจริงๆ ให้เลือก I’d like to add TXT records to my DNS for now ระบบจะ gen TXT records ให้ไปตั้งค่าใน cloudflare แล้วก็ติดตั้งเว็บก่อนได้เลย สะดวกมาก ย้ายเว็บแทบไม่มี downtime เลย – ทวีต
  3. เวลาตั้งชื่อโดเมนภาษาไทยแล้วต้องการนำไปสร้าง Site ในระบบอื่นๆ ที่ไม่รองรับ ให้แปลงเป็นภาษาอังกฤษก่อน เรียกว่า Punycode converter หรือ IDN converter ใช้เว็บนี้ได้ฮะ Punycode converter
  4. สร้าง Report จาก WordPress และ Google Analytics ด้วย Google Data Studio วิธีง่ายหน่อยคือใช้ mySQL Connector แนะนำให้อ่านบล็อกนี้ฮะ Data Studio Hack – Connecting to the WordPress mySQL Database
  5. ส่วนโครงสร้าง DB ของเวิร์ดเพรส (Data Dictionary) อิงจากหน้านี้ได้เลย Database Description
  6. ผู้ใช้ในระดับ Author ใน WordPress จะไม่สามารถ embed iframe ได้ เพราะไม่มีสิทธิ unfiltered_html ทางแก้ ใช้ปลั๊กอิน User Role Editor หรือเพิ่มโค้ดตามนี้ Give Author users the right to embed
  7. เห็นเลย์เอาท์แนว Masonry (ก่ออิฐ แบบเว็บ pinterest) แล้วก็พลันคิดว่า ยุคนี้มันควรทำด้วย CSS ได้แล้วนะ เลยค้นไปเจอ https://w3bits.com/css-masonry/ โอ้ โค้ดเรียบง่ายมากๆ
  8. อยากหาลูกเล่นเวลา Scroll แล้วแสดงผลสวยๆ ถ้าใช้ Parallax ก็สวยมาตรฐาน https://materializecss.com/parallax.html แต่พอไปเจอคนใช้แค่ CSS – Scroll Snap กับ Position: sticky รู้สึกว้าวดีมาก ตัวอย่างที่ https://codepen.io/michellebarker/full/9ccc0cb97ff6781243ce0ccf9e0bb7c2… อธิบายโค้ดที่ Beautiful Scrolling Experiences – Without Libraries
  9. HTML Tag ที่ชื่อ <details> เท่มาก ตัวอย่างที่ https://codepen.io/denic/pen/PozobRO
  10. ตั้งค่าเพื่อใช้อีเมลโดเมนตัวเองฟรี จาก http://forwardemail.net วิธีการ ทำ Email โดเมนตัวเองแบบฟรีๆ ไม่เสียตัง: ภาค 2 ใช้ Gmail เป็น mailbox
  11. มีคนแนะนำให้ SeedWebs ทำระบบ SalePages แบบ http://clickfunnels.com ของไทยที่ทำดีๆ ก็เช่น http://fastitup.com เพียงแต่ Page Speed ช้าไปหน่อย อันนี้สนใจอยู่เหมือนกันฮะ จริงๆ ใช้ GravityForms ก็จบได้ แต่ไม่รู้จะโหลดเร็วแค่ไหน มันยังใช้ jQuery อยู่เลย >_<
  12. ระยะหลังเริ่มทำเว็บหลายภาษาด้วย WordPress Multisite เพราะเบาและอิสระมากในแต่ละ Site พออยากจะก๊อบหน้าไปภาษาอื่น ถ้าวิธีปกติจะยุ่งยากหน่อย เลยแนะนำปลั๊กอินนี้ฮะ WordPress Multisite Content Copier/Updater
  13. ทีมงานติดปัญหาว่า ทำระบบ Line Login แล้ว แต่ดันใช้ได้แต่ admin คนอื่นยังใช้ไม่ได้ ทั้งๆ ที่เปิดใช้งาน Channel แล้ว ทางแก้ ต้องเข้าที่ https://developers.line.biz/console/ แล้วหา Channel ที่สร้างไว้เพื่อ Publish อีกครั้ง คนทั่วไปถึงจะใช้งานได้
  14. เทพมาก ระบบตัดต่อวีดีโอจากคำพูดที่แปลงเป็นข้อความอัตโนมัติ พอแก้คำ ระบบจะพูดให้ใหม่ตามเสียงของเรา ลองใช้ได้ฟรี เห็นแล้วอยากทำวีดีโอภาษาอังกฤษเลย https://www.youtube.com/watch?v=Bl9wqNe5J8U
  15. เพิ่งได้ลองใช้ปลั๊กอินที่สร้าง static file แล้วให้แคชที่ cloudflare (WordPress ปกติ จะแคชแค่รูป ไม่แคช PHP หน้านั้นๆ) เร็วมาก เบามาก แอบโหลดหน้าอื่นรอเหมือน Gastby ก็ได้ ติดตั้งเลย ฟรีด้วย WP Cloudflare Super Page Cache
  16. สำหรับคนลง VSCode ใหม่ อาจจะเจอปัญหาว่า ติดตั้ง Prettier แล้ว ทำไมไม่ Format Code ให้ ทางแก้คือ ไปที่ Preferences → Settings ตั้ง Default Formatter ให้เป็น esbenp.prettier-vscode ที่มา: Format on Save (prettier) stopped working
  17. เท่ๆๆ CSS บรรทัดเดียวอีกแว้ววว ได้ smooth scroll เลย https://twitter.com/seedwebs/status/1321326668615618567?s=20
  18. WooCommerce อยากได้ระบบ sync ข้อมูลจาก Google Sheet พอหาก็เจอปลั๊กอินนี้เลย น่าจะสะดวกดีนะ GSheet For Woo Importer

เดือนพฤศจิกายน 2653

  1. ปลั๊กอิน CSS Ready Classes for Gravity Forms ทำให้มีปุ่มกดช่วยเลือกคลาส CSS สำเร็จรูปละ สะดวกขึ้นเลย ไม่ต้องไปไล่หาในคู่มือ
  2. CSS สำหรับ Checkbox และ Radio แบบสวยและง่าย ไม่ต้องใช้รูปพื้นหลัง แนะนำลิงก์นี้เลย CSS checkbox input styling
  3. เจอปัญหาใน Figma ว่า ขนาดหน้าจอใน App มี Pixel ไม่เท่ากับดูในเว็บ พอค้นก็ไปเจอ Community ใน Spectrum ลองแล้วแก้ไม่ได้ สุดท้ายเจอว่าตั้งค่า Interface Scale ไม่ใช่ 100% (น่าจะเผลอไปโดน Shortcut) เลยไปสมัครและตอบซะหน่อย 😀
  4. การตั้งค่า Cloudflare ให้ Redirect ไป URL อื่นพร้อมเอา path / slug ไปด้วย ให้ตั้งค่าต้นทางคือ [DOMAIN]/* แล้วปลายทางเป็น [OTHER_DOMAIN]/$1 Configuring URL forwarding or redirects with Cloudflare Page Rules
  5. การใส่ SVG ใน CSS Background โค้ด CSS: https://stackoverflow.com/a/21626701/13345323… (คำตอบนี้ดีกว่าที่ติ๊กถูก) โดยเราต้องเอา SVG ไป Encode เป็น Base 64 ก่อน ที่ https://base64encode.org
  6. ปลั๊กอิน Forms เบาๆ ใน WordPress แต่ไม่มี Builder นะ HTML Forms
  7. เนื้อหา Node.js จาก Devahoy ครบถ้วนน่าเรียนมาก สอนทำเว็บไซต์ด้วย Node.js / Express / MongoDB สำหรับมือใหม่ [2020]
  8. หนูเนยเขียน ต้องอ่านฮะ – “มีอะไรใหม่ใน PHP 8.0? เร็วขึ้นจริงมั้ย โค้ดดูปลอดภัยขึ้นจริงหรือเปล่า มาดูกัน”
  9. ดราม่าในวงการโปรแกรมเมอร์เรื่องหนังสือ Node.js ทำให้ได้มาอ่านบล็อกนี้ เป็นพื้นฐานสำหรับ callback / promise / async / await เลย เหมาะกับคนเขียน php มาก่อน Callback, promise, async/await วายร้าย(?) แห่ง JavaScript
  10. เว็บ apple ขายเคส mix and match ไว้เพิ่มกิเลส เป็นตัวอย่างการออกแบบเว็บที่ดีเลย ขยับกรุบกริบ iPhone 12 Studio

เดือนธันวาคม 2653

  1. List.js เป็น vanilla js สร้างตารางได้ sort ได้ fuzzy search ได้ สำหรับงานเล็กๆ น่าใช้กว่า datatables เยอะเลย
  2. ยอมแล้วววว ปลั๊กอินปรับ Speed ระดับเทพของเทพ เว็บมี jQuery แท้ๆ แต่นายทำได้ 100 ไม่มี Black Friday / Lifetime / Unlimited ให้ซื้อ แต่ก็ต้องซื้อฮะ! https://flying-press.com
  1. ฟอนต์สุขุมวิท ตัดใหม่ มีเวอร์ชั่นลาวและกัมพูชาแล้ว – ทวีต
  2. ลูกค้าอยากได้คูปองโค้ดเป็นร้อยๆ โค้ด โดยมีโจทย์ว่าควรมีตัวอักษรบางตัว ตัวเลขบางตัว เลยใช้เว็บนี้ช่วย Gen ให้ สะดวกดีเลยครับ https://randomcodegenerator.com/en/generate-serial-numbers… ส่วนการ import coupon จำนวนมากๆ เข้า WooCommerce พบว่าปลั๊กอินนี้ฟรีและง่ายดี Order Export & Order Import for WooCommerce
  3. ลูกค้าอยากได้คูปองโค้ดเป็นร้อยๆ โค้ด โดยมีโจทย์ว่าควรมีตัวอักษรบางตัว ตัวเลขบางตัว เลยใช้เว็บนี้ช่วย Gen ให้ สะดวกดีเลยครับ Generate Serial numbers
  4. เวลาสมัคร Payment Gateway ธนาคารจะขอหลักฐานการติดตั้ง SSL Certificate ปกติกดตรงกุญแจส่งรายละเอียดให้เค้าก็ได้ แต่ถ้าอยากสร้าง Cert ใหม่ หากใช้ Cloudflare ก็ไปที่ SSL → Origin Server → Create Certificate แล้วสร้างเองได้เลย – ทวีต
  5. ดูดหน้าเว็บมาลง Figma ใส่สีเงาให้พร้อม ด้วยปลั๊กอิน HTML <-> Figma โอ้ว พระเจ้า ลองกับหน้าตัวอย่างของ Seed – ทวีต
  6. ฟอนต์ไทยลิขสิทธิ์ที่ใช้ผ่านเว็บได้ ของ Adobe Fonts ก็มีหลายตัวเหมือนกันนะ โดยเฉพาะฟอนต์ “ทองเติม” ที่ผมว่าเป็นตัวอ่านที่สวยที่สุดแล้ว – ทวีต
  7. SuperTinyIcons โลโก้และไอคอนแบบ svg ขนาดเล็กมาก ไม่เกิน 1K
  8. สิ่งหนึ่งที่ทำให้ย้ายจาก Adobe XD มา Figma ก็คือ สีเพี้ยน ถ้าใครใช้ Figma แล้วสียังเพี้ยนเหมือน XD อย่าลืมเลือก Color Space เป็น sRGB นะฮะ
  9. WordPress 5.6 ออกแล้ว มาพร้อมกับจุดเริ่มต้นของ Full Site Editing อ่า การทำ header และ footer ต้องเปลี่ยนไปอีกแล้วสินะ ภาพรวม: https://www.boldgrid.com/support/wordpress-tutorials/full-site-editing/
  10. ระบบส่ง SMS (OTP) เคยใช้ของ http://thaibulksms.com ราคาดีมาก แต่ติด spam พอย้ายมา http://911itwist.com แล้วไม่เจอติด spam เลย แต่แพงกว่าพอควรฮะ
  11. เจอปัญหา dark mode ใน android ที่เป็น in app browser เลยไปหาวิธีเขียน CSS สำหรับ Dark Mode พบว่าอันนี้ละเอียดมาก A Complete Guide to Dark Mode on the Web
  12. คอร์สน่าสนใจจาก Accenture เรียนฟรี มีใบรับรองด้วย https://facebook.com/skooldio/posts/1369945536682831
  13. มีคนถามว่า กราฟแนวๆ Google Analytics ที่เช็ค Page Flow เรียกว่าอะไร คำตอบคือ Sankey เห็นเว็บนี้มีตัวสร้างให้เสร็จเลย http://sankeymatic.com
  14. ชอบ keen slider ในความเล็กและเบา แต่ถ้าอยากได้อะไรซับซ้อนขึ้น เช่น Image Thumbnail Slider ตอนนี้ที่คิดว่าลงตัวสุดคือ https://splidejs.com เบามาก ลื่นมาก