ที่ผ่านมา สาย Optimize หรือ คนทำเว็บที่มีรูปเยอะๆ ก็มักที่จะใช้เทคนิค Lazy load กันทั้งนั้น ซึ่งต่างคนต่างก็จะมี Lib ที่ตัวเองถนัดต่างกันออกไป ตัวที่น่าจะฮิตที่สุดก็คงไม่พ้น ตัวนี้

ซึงทุกคนก็คงรู้ว่า การใส่ Lib JS เข้าไป ถึงแม้จะทำให้ รูปโหลดเร็วขึ้น แต่เราก็ต้องแลกกับการมี Lib หนึ่งตัว ติดอยู่ใน Code ของเรา แต่เรื่องนี้มันกำลังจะจบลงในอีกไม่นานนี้ครับ เพราะว่า lazyload ที่เป็น native กำลังจะ Support ทุก Browser แล้ว!!!!!!

ตอนนี้ก็เหลือแค่ Safari เอา Feature นี้ออกจาก Experimental เท่านี้ เราก็จะใช้ LazyLoad ได้โดยไม่ต้องใช้ Lib อะไรแล้ว ส่วนใครที่สงสัยว่ามันใช้ยังไง วิธีก็ง่ายมากๆครับ เพียงแค่ เขียน Attribute loading=”lazy” ไว้ใน tag image หรือ Iframe ก็สามารถใช้งาน lazyload ได้เลย

<img src=”https://example.org/image.jpg” width=”300” height=”200” loading=”lazy”>

มีอยู่นิดเดียวที่ต้องรู้ก็คือ Image ที่จะใส่ Lazy load ต้องกำหนด ขนาดให้มันนะครับ ไม่อย่างนั้น Lazyload จะไม่ทำงานครับ

อยู่ดีๆ หลายอาทิตย์ก่อน เหล่า Googler ก็โพสเรื่อง Web Vitals กันหนักมาก หลายๆคนก็สงสัยว่ามันคือ อะไร แล้วพวกสาย Optimize จะต้องปรับตัวยังไงบ้าง จริงแล้ว มีบทความภาษาอังกฤษเยอะแล้ว นั้นบทความนี้ขอเป็นสรุปเลยแล้วกันนะครับ

1. Google กำลังจะเปลี่ยน ตัวแปรในการคำณวน PageSpeed Insights ใหม่ จาก v5 เป็น v6

จริงๆเรื่องนี้เขียนใน Facebook ไปแล้วแต่ว่า กลัวคนจะ search ไม่ได้เลย move มาไว้ใน medium ด้วย

ตอนนี้เราสามรรถเรียก contact picker จากเว็บได้แล้ว ใครที่อยากทำ form ให้คนกดเลือก contact จาก เครื่องก็เขียน code สั้นๆแบบนี้เอาไปใส่ไว้ใน click listener ซักตัวได้เลย

ซึ่ง Contact picker ที่ว่าไม่ได้แค่ เลือกได้แค่ contact ของคนอื่นแต่ยังเลือก contact ของตัวเราได้ด้วย ทำให้ User ไม่ต้องมานั่งพิพม์ form ทีละช่องอีกต่อไป ตอนนี้ API ตัวนี้ใช้ได้แต่ใน Android นะครับ iOS ยังใช้ไม่ได้

วันก่อนผมแอบไปเห็นว่า section news ใน google assistant มี source จากประเทศไทยโผล่มาแล้ว ตอนนี้ก็ยังมีไม่เยอะมากมี แค่ Thairath, The Standard ผมก็เลยสงสัยว่าถ้าจะให้มันไปโผล่ในนี้ทำยังไง

อย่างแรกข่าวของคุณต้องผ่านเกณฑ์ ตามนี้

โดยหลักๆ คือ ต้องตรงหมวดหมู่ ต้อง อัพเดทเรื่อยๆ จะเป็นเสียงหรือวิดิโอก็ได้ หลังจากนั้น ทำข่าวของคุณให้อยู่ในรูปแบบ RSS ของ Podcast แบบเดียวกับที่ใช้ submit iTunes ซึ่งอาจจะไปใช้ Soundcloud หรือ จะทำเองก็ได้ หลังจตากนั้นก็เข้าไปกรอก form ตามประเภทของ media ข่างล่างนี้

Audio Only https://services.google.com/fb/forms/nb_onboard_audio/

Video and Audio https://services.google.com/fb/forms/nb_onboard_audio_video/

แล้วก็รอ Google ติดต่อ กลับมา แค่นี้ข่าวของวคุณก็จะโผล่ไปอยู่ใน Google Assistant แล้ว

API ยังอยู่ใน ขั้นตอนการทดลองอย่าเอาอะไรกับมันมาก แล้วก็อย่าเอาขึ้น Prodcution เป็นอันขาด

ไม่มีใครครับที่ไม่รู้จัก iframe เจ้า iframe เนี่ย มันอยู่กับเรามานานมากๆ ข้อดีก็มีข้อเสียก็บาน เมื่อหลายเดือนก่อน Google ได้เสนอ Spec element อันใหม่ขึ้นมา ที่มีชื่อว่า Protals เจ้า Element นี้เปรียบเทียบได้ยากมากๆ ว่ามันเรียกว่าอะไร สาเหตุที่ผมบอกแบบนั้นก็คือ ใช่ครับมันสามารถ Embed website อื่นๆได้เหมือน iframe ส่ง message เข้าไปยัง protals ได้เหมือน iframe แต่สิ่งนึงที่มันทำได้ต่างจาก iframe คือ การที่เราสามารถ navigate ไปยัง url ที่อยู่ใน Protals ได้โดยที่มันจะเปลี่ยนตัว URL ของเว็บไซต์เราเป็น เว็บไซต์ใน portal ด้วย รวมถึงเรามารถกำหนดรูปร่างการ display ของ เว็บไซต์ที่ อยู่ใน Element portal ได้ด้วย ซึ่งจะบอกว่ามันคือ iframe ใช่มั้ย ก็ตอบได้ว่า มันก็ไม่ต่างกัน แล้ว คราวนี้เราจะอธิบายยังไงเนี่ย เอาว่าลองไปดู video ที่ Google พูดในงาน Chrome Dev Summit ก่อน แล้วต่อยมาดู code ครับ

วิธีการใช้งาน

วิธีการใช้งานเนี่ยก็ไม่ได้ต่างอะไรกับ iframe เลยครับ ก็เปลี่ยนจาก <iframe> เป็น <portal> หรือจะเขียน code inject ลงไปแบบนี้ก็ได้…

ช่วงนี้กำลังทำ Design System อยู่ ก็เลยอินกับ 2 Session นี้มากๆ เพราะอยากจะรู้เหมือนกันว่าที่ LINE ทำไมถึงต้องทำ Design System และมีเรื่องราวการสร้างยังไงบ้าง ย้อนไปตั้งแต่วันที่ LINE ถูกสร้างขึ้นมา วันแรกไม่มี Design System อะไรทั้งสิ้นไม่มีแม้แต่ Guideline จน ณ ปัจจุบัน LINE มี Design system ที่เป็น Component ที่ Dev สามารถเอาไปใช้งานได้ทันที โดยเนื้อหาช่วงแรกมาจาก Session LINE Design System : making LINE Product faster without losing consistency

เวลาที่เราพูดถึงโครงสร้างของ Design System ก็จะประกอบด้วยของอยู่ 3 อย่างคือ Element, Component, Page

ผมได้มีโอกาสไปงาน LINE DEV DAY ที่ ญี่ปุ่น หลายๆคนคงจะได้เห็นรีวิว Keynote กันไปบ้างแล้วซึ่งปีนี้ LINE focus ตัว Mini App และตัว LINE Brain เยอะมาก แต่จริงๆแล้วยังมี Session ที่น่าสนใจอีกหลาย Session เลย หลักๆผมจะแบ่ง Review เป็นสองส่วน ส่วนที่เป็น Tech และ ส่วนที่เป็น Product management โดยบล็อกนี้จะเป็นส่วนของ Product management ก่อน

“LINE-like” Product Management of Smart Channel

Session นี้ LINE มาเล่าให้ฟังว่า เค้าใช้วิธียังไงในการ Product ในส่วน Smart Channel ถ้าใคร นึกไม่ออกว่า Smart Channel คืออะไร มันก็คือตัว suggestion ที่อยู่ด้านบนของ chat เราซึ่งอาจจะเป็นข่าว หรือ App ที่น่าสนใจ โดยตัว Smart Channel จะดึง Content จาก App ต่างๆจาก LINE หรือ Partner แล้วนำมา personalize เพื่อแสดงผลใน LINE

หลายๆครั้งทุกคนคงจะเคยเห็นเวลา chrome ปล่อย version ใหม่ๆออกมาก็มักจะบอกว่ามี feafure ใหม่ๆอะไรบ้างแต่ถ้าไปสังเกตุดีๆจะมีบาง feature ที่บอกว่า “Behind the flag” หรือ บาง feature ที่บอกว่า “In Origin trial” ซึ่งหลายๆคนคงงงว่า ไอ้สองอันนี้คือ อะไร นั้นมาอธิบายอันง่ายๆก่อน

Behind the flags คือ ถ้าอยากได้ feature นี้ ต้องไป enable ใน browser โดยเข้าไปที่ chrome://flags แล้วตามหาว่ามันม่ี switch เปิดอยู่ตรงไหน ซึ่งหลายๆอันมักจะรวมอยู่ใน “Experimental Web Platform features” ซึ่งอเมื่อเปิดแล้วคุณก็จะลองใช้ feature ต่างๆได้ทันที แต่มีข้อควรจำอย่างนึงคือ หลายๆอันในนี้ยังไม่เป็นมาตรฐานเพราะฉะนั้น อาจจะมีการเปลี่ยนแปลงเรื่อยๆ รวมถึงถ้้า user ของคุณไม่ได้เปิด flag ก็จะทำให้ใช้ feature นั้นๆไม่ได้

Origin trial

ด้วข้อจำกัดของตัว flags ที่ทำให้เอาไปใช้งานบน poduction ไม่ได้บาง feature ก็น่าสนใจจนอยากจะเอาไปลองกับงานจริงๆก็ทำไม่ได้ คนสร้าง chrome ก็เลยสร้างทางเลือกไว้ให้เราได้ใช้งาน feature ใหม่ๆก่อนผ่าน โปแกรมที่ชื่อว่า origin trials โดยวิธีการใช้งานก็คือเข้าไปที่เว็บ https://developers.chrome.com/origintrials/