พอดีว่าพึ่งกลับมาจาก Google I/O 2017 เอาจริงๆก็ยังไม่หาย Jet lag ดีเลย แต่พอดีว่าเห็นคุณ Jirawatee 🔥 กับ คุณ Ake เขียนบล็อกกันแล้วเราเลยต้องเอาบ้าง ซึ่งก็ไม่มีอะไรมากครับ แค่จะมาเล่าว่าในงาน Google I/O 2017 ทางฝั่งของ Web platform มีอะไรใหม่ๆ หรือเค้าพูดถึงอะไรบ้าง Polymer ถูกพูดถึงเยอะมากๆ หลังจากที่ Google เปิดตัว Polymer 2.0 ไปไม่นานนี้ ในงานก็มีการประกาศให้ Polymer เป็น stable ซึ่งมาพร้อมกับ Polymer-cli 1.0 โดย Google พยายาม โฆษณามากๆว่า Polymer เป็น Web component framework ที่เป็น native ทำให้ยกไปไหนมาไหนได้ง่ายมากๆรวมถึง ไม่ต้องอาศัย ตัว…
บางคนอาจจะเจอเรื่องปวดหัว ที่บางเว็บไซต์ไม่ Support Auto fill form ดีๆซักทีซึ่งในความเป็นจริงมันไม่ได้ทำยากขนาดนั้นนะครับที่จะให้ Browser รู้จัก Form ของเรา และไม่ใช่ว่าทำ Form ยังไงก็ได้เดี๋ยว Browser มันจะรู้จักเองนะครับ มีมีวิธีการของมันอยู่ ใส่ Auto Complete จริงๆวิธีง่ายมากๆครับ ก็คือตรง tag input ของเรา ให้ใส่ attibute ที่ชื่อว่า autocomplete ไปด้วย โดยค่าใน auto complete จะเป็นตัวบอกว่าช่องนี้คืออะไร แบบนี้ <input type=”text” name=”name” autocomplete=”name”> ค่าที่ใส่ใน attibute autocomplete เราจะเรียกว่า token โดย token จะแบ่งออกเป็น หลายอันมากๆ ซึ่งบางอัน บาง Browser ก็ไม่ support โดยในแต่ละ Token…
พอดีว่าจะทำ Application สำหรับงาน Google I/O Extend Bangkok คราวนี้มันต้องใช้ Firebase กับ Vuejs ก็เลยคิดว่ามันต้องมีสิ component ที่ทำให้ vue ต่อ firebase ได้เนียนๆ ก็เลยไปเจอกับ vuefire ตอนนั้นก็คิดในใจว่ารอดและสบาย แต่พออ่านๆไป รวมถึงนั่งดู Example แล้วก็พึ่งสังเกตุได้ว่า นี่มันเอาไว้ใช้กับ Component เดียวนี่หว่า ไม่ใช่ทั้ง App แล้วมันจะใช้กับ vue-cli ยังไง….. คราวนี้ก็เลยไปไล่ดูเลยครับว่าจะใช้กับทั้ง App ยังไงก็ไปเจอ วิดิโอที่มีคนทำเอาไว้ แต่ปัญหาคือ ทั้ง App เค้าใช้ Firebase อยู่ Component เดียว ทำไมต้องต้องสนใจกับ การใช้ทั้ง App? ใน Example เนี่ย มันมีแค่ Component เดียวที่ใช้…
CPU และ RAM เป็นสิ่งมีค่า มันคงดีมากๆ ตัวการของเว็บที่กิน CPU จัดๆเลยคือ “Tab ที่ไม่ได้ใช้” นอกจาก Tab ที่ไม่ได้ใช้จะกิน CPU แล้วมันยังกิน request ของ server เราด้วยในกรณีที่เว็บเรามี Reatime update หรือ Interval update ซึ่งวิธีมันง่ายมากๆเลย ง่ายจนเขียนยาวๆไม่ได้ https://gist.github.com/thangman22/3a00c5f0453177c806135f7f275ca969 แค่นี้เลยครับลองเอาไปทำกันดู
จริงๆควรจะเขียนเรื่องนี้นานแล้ว แต่ว่า ลืมตลอดเลย ก็จริงๆจะมาเล่าถึง tool ตัวนึงที่เอาไว้ วัดประสิทธิภาพ (หรือเรียกในภาษาอังกฤษเทห์ๆว่า Audit) Progressive Web App ของเรา ทำไมต้อง Audit Progressive Web App? เมื่อก่อน เวลาเราอยากรู้ว่าเว็บของเราเร็วหรือไม่เร็ว เราก็จะนึกถึง Page speed กันซะส่วนใหญ่ แต่พอมันมาเป็น PWA แล้วความเร็วก็เริ่มไม่พอ เพราะก็จะมีเรื่องหน้าตา หรือ ความสามารถในการใช้งาน Offline มาเกี่ยวข้องด้วย คราวนี้ Google ก็เลยทำ tool ออกมาตัวนึงคือ Light House ซึ่งเป็น tool ที่ช่วยให้เรารู้ได้ว่า PWA ของเราดีพอหรือยัง ซึ่งสุดท้ายเรา Light House จะให้คะแนนออกมาเป็นคะแนนเต็ม 100 ที่เห็นว่า 100 กว่าจะทำได้ก็ลากเลือดอยู่ คะแนนมาจากส่วนไหนบ้าง? หลักๆแล้ว คะแนนของ…
วันก่อน Firebase เปิดตัว Cloud Functions for Firebase ออกมา ตอนที่เห็นครั้งแรกนี่แหกปากดีใจเลย เพราะทั้งปเราจะเจอคำถามว่า “เนี่ยจะไม่ทำ backend เลยแล้วไปใช้ Firebase ทั้งหมดได้มั้ย” “แล้วพวก logic ต่างๆจะทำยังไง” ซึ่งเอาจริงๆ ตอนนั้นเราก็เหมือนได้ยินมาแว่วๆว่าจะมี feature นี้ออกมาแต่ก็ไม่ชัวร์ก็เลยบอกว่ายังทำไม่ได้ให้วาง Server เองไปก่อน แต่แล้ววันนี้มันก็ออกมาแล้ว!!!!! Cloud Functions for Firebase คือ? เอาจริงๆมันคือ Private Sever ที่เอาไว้รัน Node.js แต่ที่มันต่างออกไปคือ เจ้าตัว Node.js ที่เรารันนั้นจะถูกรันผ่าน Triggers ต่างๆจาก Firebase Service อื่นๆ ซึ่งเมื่อ Node.js run จาก Triggers แล้วเราก็สามารถสั่งให้ service ต่างๆทำงานได้ต่อ ผมว่าอ่านมาตรงนี้คงงง มาดูดีกว่าว่า Triggers…
วันก่อน นั่งหาวิธีทำ Testing บน Vue.js แต่พยายามหา Blog อ่านง่ายๆ ทั้งไทยทั้ง อังกฤษ แต่ก็ไม่เจอซักที เจอแต่ Doc กับ เว็บที่อ่านงงๆ (จริงอยู่ที่มันไม่ได้ยากมากนะแต่มันทำได้ง่ายกว่านี้) เลยอยากเขียนวิธีที่โคตรง่ายเลยแบบทำตามแค่ 1–10 แล้วจบ 1. Setup Project ขั้นแรกเราจะง่ายขึ้น ถ้าใช้ vue-cli และในบทความนี้เราจะใช้ vue-cli เป็นหลัก เริ่มต้นด้วยการ Set option ตอน create ตามนี้ หลักๆอยู่ที่ Karma + Mocha แต่ถ้าใครจะเอา e2e ด้วยก็ เลือก Yes อันที่สองด้วย Setup unit tests with Karma + Mocha? YesSetup e2e tests with…
ตั้งแต่ Chrome version 57 บน android เป็นต้นมา หากในหน้าเว็บไซต์ของคุณมีวิดิโอหรือเพลงถูกเล่นอยู่ แต่ browser ถูกปิดลง จะเห็นได้ว่า วิดิโอหรือเพลงนั้นยังจะเล่นต่อไป แล้วคุณก็สามารถควบคุมมันได้ผ่าน notification bar ของมือถือ ได้ หน้าตาประมาณนี้ ถ้าเขียนมาเพื่อบอกแค่นี้ก็คงแปลกอยู่เพราะจริงๆแล้ว เราสามารถ customize เจ้าแถบที่โชว์ บน notification ได้ โดยที่เราสามารถปรับได้หลายส่วนมากตามภาพนี้ ซึ่งวิธีง่ายมากๆคือ เราแค่เพิ่ม code แบบนี้เข้าไปในเว็บของเรา https://gist.github.com/thangman22/a2f72017f104b539c96ad989bdd030a7 ซึ่งในตรงส่วนของ setActionHandler เรายังสามารถทำให้ตัว video เปลี่ยน track ไปมาด้วยการ set src ใหม่กับ element video ได้ด้วย ประมาณนี้ navigator.mediaSession.setActionHandler(‘nexttrack’, function() { let audio = document.querySelector(‘audio’); audio.src…
Feature User Credential management API นั้นเป็น Feature ใหม่ ( จริงๆก็ไม่ได้ใหม่มากขนาดนั้น ) แต่ยังไม่ได้มีคนใช้มากเท่าไหร่ Feature นี้หลักๆ คือ chrome จะช่วยเก็บ password ของเราไว้ใน browser และช่วยให้ user login ได้เลยโดยไม่ต้องกรอกใหม่ พูดมาถึงตรงนี้ก็คงรู้สึกว่า มันก็คล้ายๆ auto fill ที่มีอยู่แล้วนิ?? ซึ่งจริงๆแล้วก็ไม่เชิงครับ เพราะว่าเดิมแล้ว Chrome แค่เก็บ Password เอาไว้แล้วเอามากรอกใน form ให้ แต่อันนี้เราสามารถใช้ Browser Detect หา password แล้วยิงไป login ตรงๆได้เลย ซึ่ง User ไม่ต้องมากรอก form ก่อน หรือ ต้องเห็น form ก่อน…
พอดีว่าเมื่อก่อนปีใหม่ อยากทำ personal web ของตัวเอง ก็เลยกะว่าจะทำจริงจังเลยทำเป็น PWA ให้ได้ด้วย และด้วยความที่อยากลอง Vue.js แบบเต็มๆ ก็เลยคิดว่า จะจัดพร้อมๆกันเลย พอลงมือจริงก็เจออะไรโน่นนี่เยอะมากๆ ก็เลยอยากมาแชร์ว่าเจออะไรมาบ้าง กับการทำ PWA ด้วย Vue.js Vue.js ใช้งานง่าย Vue.JS ใช้งานง่ายจริงๆครับ ถ้าใครลอง React มา จะรู้สึกเลยว่า Vue.js ใช้งานง่ายกว่า แต่เอาเข้าจริง Vue.JS มีจุด dirty อยู่เยอะพอสมควร ส่วนตัวผมใช้ vue-cli ในการ create applicaiton ซึ่งก็ช่วยให้ เราไม่ต้องเสียเวลาไปกับ การ setup app หรือ webpack แต่ด้วยความที่เว็บผมไม่ใหญ่ ก็เลยไม่ได้ใช้ vuex หรือ vue router จริงๆตรงนี้ไม่ซีเรียสนะครับอยากใช้เท่าไหนก็ได้ อย่าลืม…