-
Popover API Feature ใหม่ที่ช่วยให้เราทำ popup ง่ายๆ แถมใช้ได้ทุก Browser (แต่จริงๆมันก็มี Dialog…
หลังจากที่ Experiment กันอยู่หลายเดือนตอนนี้ Popover API ก็พร้อมใช้บน ทุก Browser แล้ว แต่ก่อนอื่นต้องมาเล่ากันก่อนว่า Popover API คืออะไร Popover API เป็น Feature บนเว็บที่ทำให้เราสามารถสร้าง Element แบบที่เป็น Lightbox บนหน้าเว็บโดยไม่ต้องพึ่ง Lib ได้โดยที่การเปิดปิด element นี้ สามารถกำหนดใน HTML Element ได้เลย ซึ่งถ้าใครเคยใช้พวก Lib ที่เป็น Javacsript ก็จะเห็นว่ามีวิธีการใช้งานที่ค่อนข้างใกล้เคียงกันมากๆ ซึ่งในเวลาเดียวกันถ้าใคร อยากจะทำ ปุ่มปิด ตัว popover element ก็เปิดให้เราทำตัวปุ่มปิดง่ายๆได้เลย แค่ใส่ element ที่มี attribute popovertarget=”my-popover” popovertargetaction=”hide” ไว้ก็จะกลายเป็นปุ่มปิดได้เลย นี่ก็เป็นตัวอย่างที่ผมลองเขียน Popover ง่ายๆ เรามี Dialog…
-
คนทำ Ads Network / คนทำเว็บ จะปรับตัวยังไงในวันที่ Privacy Sandbox API กำลังจะมา
เมื่อปีที่แล้ว Chrome ประกาศว่าจะไม่ให้ Save Thrid party cookie แล้ว ซึ่งจะทำให้ Feature หลายๆอย่างทำแทบไม่ได้เลย คนที่ได้รับผลกระทบหนักๆน่าจะเป็นคนที่ทำ Ads network กับคนที่ทำ Embed script ให้คนเอาไปแปะ Web ต่างๆ เพราะหลายๆอันยังต้องพึ่ง 3rd party cooke อยู่ คราวนี้ เรื่องนี้จะเริ่ม Effective phase 1 ตอน Q1 ปีหน้า ซึ่งอีกแปบเดียวเรามาไล่ดูกันดีกว่าครับว่าแต่ละคนต้องปรับตัวอะไรบ้าง คนทำเว็บทั่วๆไปที่ใช้ 3rd party cookie คนทำ Ads network กลุ่มนี้พังจริงๆเละแน่นอน เพราะว่า หลายๆ feature ในปัจจุบันที่ทำให้ Ads มันทำเงินได้อย่างเช่น Re-targeting / Interest based ads ล้วนใช้ Third party…
-
อ่าน รายชื่อ Font ที่อยู่ในเครื่อง ด้วย Local Font Access API
ปัญหานึงของเรื่อง Font ที่เรามักจะเจอกันบ่อยๆคือเราไม่รู้เลยว่าในเครื่อง Client มี Font อะไรอยู่บ้าง ทำให้เราต้องคอยบอก User ว่า ให้ ลง Font ตามนี้ด้วยนะ ถึงจะใช้ Font นั้นได้ หลายๆคนก็คงบอกว่า ก็ใช้ Web Font ไปสิ ซึ่งก็จริง แต่ถ้าคุณกำลังทำ Application แบบ Microsoft Office หรือ Photoshop แทบเป็นไปไม่ได้เลยที่จะ ยัด Font ทั้งหมดให้เป็น Webfont เพราะนอกจาก เราจะไม่รู้ว่าเค้าอยากจะให้ font อะไร ฝั่ง browser เลย implement feature ที่ทำให้เรา เรียก list ของ วิธีการนี่ง่ายๆเลย แค่เรียก function ตามนี้ เราก็จะได้ list…
-
หมดปัญหากับการโหลด file ใหญ่เมื่อคุณใช้ background fetch
ตอนผมทำ Postr.me ก็จะมีปัญหานึงคือ ตอนที่เราสร้าง video มันจะโหลดนานมากๆ พอเป็นมือถือมันก็จะลำบากมากเพราะจะย่อจอไม่ได้ก็เลยนึกได้ว่าเว็บมันมี feature background fetch นี่หน่า ซึ่ง feature นี้เนี่ยมันถูกสร้างมาเพื่อนการ Download file บน background โดยเฉพาะเลย โดยมันอาศัยความสามารถของ service worker ในการทำงานอยู่ทั้งที่เว็บปิดไปแล้ว อย่างแรกที่คุณต้องมีคือ serviceworker ที่ติดอยู่กับตัวเว็บก่อน หลังจากนั้นก็ง่ายเลย ก็แค่เรียกใช้ code ตามนี้ https://gist.github.com/thangman22/369bdfe257bfd7681efeb3f296badbc1 อันนี้ก็เป็นอันจบฝั่งหน้าบ้านไป ส่วน downloadTotal ถ้าเราไม่รู้ก็ปล่อยว่างไว้ได้เลย พอ code เริ่มทำงานส่วนของ UI บนมือถือของเราก็จะมีหน้าตาแบบนี้ ความนี้ดูเหมือนว่ามันจะจบแต่ไม่จบนะครับ เพราะว่าเวลามัน download จบเนี่ยถ้าเราไม่ handle เอาไว้มันก็จะ download เฉยๆเลยคราวนี้เพื่อให้เราเอามาใช้ได้เราต้องเอาไปใส่ใน อะไรซักที่ก่อน ซึ่งอาจจะเป็น cache API ก็ได้้ ซึ่งก็ต้องไปเพิ่ม…
-
Lighthouse user flows เครื่องมือที่ช่วยให้เราวัด Lighthouse Score ได้ทุกจังหวะของการใช้งาน
หน้าตา Report ที่ออกมา ปัญหานึงของการวัด Lighthouse คือ Lighthouse จะวัดที่จังหวะแรกของการเปิดเว็บเท่านั้น แต่ถ้าเป็น use case ที่จะวัดหลังจากที่มี interaction เกิดขึ้นก่อน หรือจะเอามาเปรียบเทียบใน Viewport ที่ต่างกัน เคสนี้จะเอามาวัดไม่ได้ Google ก็เลยออก Tools มาตัวนึงที่ช่วยให้ Developer สามารถกำหนดได้ว่าเราจะวัด Lighthouse Score ในช่วงเวลาไหน ของ Flow แต่เจ้า Tools นี้นี้เนี่ยมันไม่สามารถกดได้จาก UI เราต้องเขียน code เข้าไปจับมันเท่านั้นซึ่งต้องใช้ Skill puppeteer นิดนึง หากใครไม่เคยใช้ puppeteer อยากให้ไปลองหัดเล่นก่อนนะครับ Code แบบง่ายๆ อันนี้เป็นการเทสแบบหน้าเดียวก่อน ซึ่งเป็น code พื้นฐานที่เราต้องใช้ในทุกๆรอบ เปรียบเทียบการโหลด แบบ Cache และไม่ Cache ปกติแล้วเรามักจะรู้กันดีว่า ถ้าเว็บเข้าด้วยแบบ Cache…
-
Portals จะ Iframe ก็ไม่ใช่ แต่มันก็คล้าย Iframe อยู่นะ #อิหยังวะ
API ยังอยู่ใน ขั้นตอนการทดลองอย่าเอาอะไรกับมันมาก แล้วก็อย่าเอาขึ้น Prodcution เป็นอันขาด ไม่มีใครครับที่ไม่รู้จัก iframe เจ้า iframe เนี่ย มันอยู่กับเรามานานมากๆ ข้อดีก็มีข้อเสียก็บาน เมื่อหลายเดือนก่อน Google ได้เสนอ Spec element อันใหม่ขึ้นมา ที่มีชื่อว่า Protals เจ้า Element นี้เปรียบเทียบได้ยากมากๆ ว่ามันเรียกว่าอะไร สาเหตุที่ผมบอกแบบนั้นก็คือ ใช่ครับมันสามารถ Embed website อื่นๆได้เหมือน iframe ส่ง message เข้าไปยัง protals ได้เหมือน iframe แต่สิ่งนึงที่มันทำได้ต่างจาก iframe คือ การที่เราสามารถ navigate ไปยัง url ที่อยู่ใน Protals ได้โดยที่มันจะเปลี่ยนตัว URL ของเว็บไซต์เราเป็น เว็บไซต์ใน portal ด้วย รวมถึงเรามารถกำหนดรูปร่างการ display…
-
อยากให้ Feature ใหม่ๆบน Chrome ที่ยังไม่ public หรอ ก็ใช้ Origin Trials ไปดิ
หลายๆครั้งทุกคนคงจะเคยเห็นเวลา 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…
-
มีอะไรใหม่หลังงาน AMP conf บ้าง
เมื่อวันที่ 17–18 เมษายนที่ผ่านมา Google จัดงาน AMPconf ขึ้นที่ญี่ปุ่น มี feature หลายๆอย่างของ AMP ที่เปิดตัวในวันนั้นและก็น่าสนใจมากเหมือนกัน ตอนแรกก็สงสัยว่าทำไมไปจัดที่ ญี่ปุ่น แต่ไปได้ยินมาจากคน Google ว่า AMP ใน ญี่ปุ่น มี Community ที่ใหญ่มากๆ ก็เลยไม่แปลกใจเลย สำหรับใครยังไม่ทราบว่า AMP คืออะไร ลองไปอ่าน บทความ มาลองทำเว็บของคุณ ด้วย AMP HTML & AMP JS กัน แล้วคุณจะสนใจว่า คุณน่าเอา AMP มาใช้งานขนาดไหน amp.dev เรื่องนี้เป็นเรื่องที่ไม่มีอะไรมากครับก็แค่เว็บของ AMP เปลี่ยนจาก ampproject.org เป็น amp.dev แล้วเท่านั้นเองครับ Bento AMP ไอเดียของ Bento เกิดขึ้นมาเพราะว่า…
-
แชร์มาแชร์กลับไม่โกงกับ Share Target API และ Web Share API
เวลาใครๆเข้าเว็บไซต์ต่างๆโดยเฉพาะ เว็บไซต์ Content คงจะติดภาพ widget ที่ใช้แชร์ที่หน้าตาแบบข้างล่างนี้ ซึ่ง การใช้งาน widget แชร์แบบนี้จะมีปัญหาต่างๆที่เราต้องทั้งฝั่ง User เองและ Developer เจอประมาณนี้ ไม่สามารถใช้ช่องทางการแชร์ของ Platform ได้ มีจำกัดแค่ที่ทำเอาไว้เท่านั้น แต่ละเว็บไซต์ implement ต่างกัน experince ก็เลยต่างกันไปด้วย บาง Channel แสดงผลไม่สมบูรณ์ในบาง Platform แต่ละ Channel มีวิธีการ implement ต่างกันทำให้ Code ดูแลรักษายาก แก้ปัญหาด้วย Web Share API ด้วยปัญหาต่างๆเหล่านี้ เลยมี API ตัวนึงที่เกิดขึ้นมาชื่อว่า Web Share API โดย Web Share API หลักการก็คือเมื่อเราทำการเรียก Web Share API ตัว Platform…
-
เมื่อผม ต้องเปลี่ยน เว็บ WordPress แสนช้า ให้กลายเป็น Nuxt.js และทำให้มันโหลดเร็วกว่า 1 วินาที
ก่อนอื่นต้องขอโทษด้วยที่ผมไม่สามารถเอ่ยชื่อเว็บและให้เห็น screenshot ได้ บอกได้แต่ว่า เว็บนี้เป็นเว็บข่าวที่ใหญ่พอสมควร และมี traffic เยอะมากๆเว็บนึงของไทยเลยก็ว่าได้ นี่คือ stat จาก lighthouse ล่าสุด บังเอิญได้ทำ คือเรื่องมันมีอยู่ว่า เพื่อนผมที่ดูแลเว็บนี้อยู่มันบ่นว่า เว็บที่เป็น WordPress เดิม มันช้าอยากจะเขียนใหม่ มันเลยให้ผมสอนใช้งาน Nuxt.js เพราะอยากจะย้ายไปใช้ Nuxt.js ซึ่งผมก็ได้สอนจนจะลืมไปแล้วว่าสอนมัน จนวันนึงมันมาบอกว่าเออ ย้ายมาเป็น Nuxt.js แล้วนะ ใช้วิธีเชื่อมไปยัง wp-json เอา แล้วก็อะไรที่ API ไม่มีก็ hook API เดิม แต่มันก็ยังติดปัญหาเรื่องการใช้าน Vue.js อยู่พอสมควร ก็เลยมาให้ผมช่วยดูหน่อยว่าพอจะแก้อะไรได้มั้ย พอผมเข้าไปดูก็แก้จนมันรันได้ตามปกติ แต่พอลองเล่นดูก็ยังรู้สึกว่ามันยังไม่สะใจมันช้า ก็เลยบอกมันว่า เอามั้ย จะอัดให้เร็วที่สุดที่จะเร็วได้เลย เอาแบบ เป็น “เว็บข่าวที่เร็วสุดในไทยไปเลย” ย้ายมา Nuxt.js ไม่ได้ง่ายเลย เท่าที่ฟังไอเดีย…