วันก่อนกำลังจะทำเว็บตัวเอง ที่ใช้ Vue.js แล้วก็นึกได้ว่า Google เคยพูดว่า First paint สำคัญมา เพราะถ้า First paint มาช้ากว่า 3 วินาที user จะหนีเราไป ผมก็เลยลองเทสว่าใน อินเตอร์เน็ตช้าที่สุด เราจะใช้เวลาโหลดเท่าไหร่ แต่สิ่งที่เจอคือ componet มันไม่โหลด เพราะว่า Webpack มัน build ออกมาเป็นไฟล์ app.js ไฟล์ เดียว.. เราก็เลยลองหาว่าจะทำ file spliting ด้วย Vue.js ยังไง ซึ่งวิธีง่ายมากๆๆๆๆๆ เว็บที่ผมทำ สร้างด้วย Vue-cli ซึ่งมี webpack ฝังมาให้แล้ว ซึ่งโดยปกติเวลา build webpack จะเอา ไฟล์ของเราลงไปใน app.js ทั้งหมด ถ้าเรา import ไฟล์ด้วยวิธีนี้…
พอดีว่าผมได้มีโอกาสไปงาน Google Chrome Dev Summit 2016 ที่ San fransico มาซึ่ง หลายๆ Session ก็เป็นการลงลึก Feature ต่างๆของ Chrome ไป แต่ Session ที่เด็ดที่สุดคือ Session สุดท้ายที่ Paul Kinlan Chrome Developer Advocate มาสรุป Feature ใหม่ทั้งหมดทั้งที่ Statble แล้ว และยังไม่ Stable ซึ่งเหมือนเป็นการบอกเลยว่า จะมีอะไรออกใหม่บ้าง เนื่องจากมันเยอะมาก เพราะฉะนั้น ผมจะอธิบายน้อยมากๆนะครับ ………เริ่มเลย Camera, Microphone ที่เรียกผ่าน Tag input ปรับให้ใช้ได้แค่ HTTPS แล้ว เพื่อความปลอดภัย และต้องขอ Permission user ก่อน Geo location…
Feature นึงที่อยู่ในกลุ่ม PWA แล้วน่าสนใจมากๆคือ Web Bluetooth API ซื่อก็ตรงๆเลยครับ ทำให้เว็บต่อ Bluetooth ได้ ซึ่ง Device Bluetooth ที่เป็น Bluetooth Low energy ก็น่าจะ Support ค่อนข้างหมด อยู่แล้ว ด้วย Feature นี้ทำให้เว็บของเราเล่นอะไรได้มากขึ้นไม่ว่าจะ ต่อ sensor สุขภาพต่างๆ หรือแม้แต่ Sensor location ในอาคาร Service Web Bluetooth API ได้ Implement Service พื้นฐานในการ connect bluetooth อย่างเช่น battery_service, heart_rate, health_thermometer ไว้หมดแล้วซึ่งสามารถไปดู list ของ Device ได้ที่ https://www.bluetooth.com/specifications/gatt/services เปิด Setting…
เมื่อวานในงาน Polymer Summit 2016 ที่ london ได้มีการเปิดตัว Polymer 2.0 ออกมา ซึ่ง จริงๆก็ปล่อย Preview มาซักพักนึงก่อนแล้ว สิ่งที่เปลี่ยนหลักๆก็มีตามนี้ครับ Custom element v1 ใน Polymer version นี้ เปลี่ยนมาใช้ API ของ Custom element V1 แทน V0 ที่ deprecate ไปแล้ว ซึ่งยังไม่ได้มีการเทสว่า V0 กับ V1 ต่างกันเยอะมั้ยในเชิง ประสิทธิภาพ แต่ว่าใช้เชิงการใช้งาน function หลายๆอย่างเปลี่ยนรวมถึง lifecycle เปลี่ยนไป ทำให้ polymer ก็เปลี่ยน lifecycle ตามไปด้วย Shadow dom v1 จริงๆส่วนสำคัญที่เปลี่ยนมาใช้ Custom element V1…
ก่อนอื่นมาเข้าใจกันก่อนว่า AMP คืออะไร AMP ย่อมาจาก Accelerated Mobile Pages ซึ่งเป็น Technology ของ Google ที่ต้องการให้เว็บแสดงผลรวดเร็วทันทีที่กดไม่ต้องโหลด เป็น Concept เดียวกับ Instant article ซึ่ง AMP เปิดตัวมาซักพักแล้ว แต่ว่า Google พึ่งเปิด เป็นทางการไปไม่กี่วันก่อน ซึ่งหากเรา Search บน mobile แล้ว เว็บไซต์ไหน Support AMP ก็จะมีรูปสายฟ้าโผล่ขึ้นมา TL;DRมันคือ Instant article version Google ที่จะแสดงผลใน Google Search เริ่มต้น หากคุณใช้ WordPress อยู่แล้วลง Plugin https://wordpress.org/plugins/amp/ หรือ อันไหนก็ได้ที่ Support AMP แล้วข้ามไป ขั้นตอน…
ถ้าใครเคยทำ Login ทีให้ User login ผ่าน Facebook, Google, Twitter จะรู้ว่ามันมีความวุ่นวายอยู่ในระดับนึงเลย เพราะแต่ ละ SDK ก็ต้องทำโน่นนี่เยอะต่างกัน ยิ่ง Twitter นี่ปวดหัวหนักเลยเพราะเป็น Oauth1.1 คราวนี้ Firebase ก็อยากทำให้ง่านเค้าทำ SDK ที่ทำให้เราทำ Social login ได้ ง่ายมากๆ แถมมี Database จัดการ User ให้ด้วยมาดูกันเลยดีกว่า ว่าทำไง สร้าง Project ใน Firebase ใน https://console.firebase.google.com/ ก่อน 2. คลิก “Add Firebase to your web app” แล้ว copy code ออกมา (code ที่มีหน้าตาแบบนี้)…
ตอนแรกๆที่ได้ยิน คำว่า Share API เราก็งงว่ามันเอาไว้ทำอะไรเลยเข้าไปดู Detail นาทีแรกบอกเลยว่าร้อง “เชรดด” เลยครับ เพราะ อธิบายง่ายๆ มันคือ “Intent Share บน Android” ถ้ายังนึกไม่ออก ให้นึกว่าเวลาเรากดคำว่า “Share” ใน Application ต่างๆ ก็จะมี Pop-Up หน้าตาแบบนี้โผล่ขึ้นมา แต่เดิมมันทำได้เฉพาะใน Native App ใช่มั้ยครับ แต่มันกำลังจะทำได้บนเว็บครับ Code ก็แสนจะสั้นครับ เขียนตามข้างล่างเลยครับ แล้วก็แก้ Title กับ Link ตามที่ต้องการเลย navigator.share({title: document.title, text: window.location.href, url: window.location.href}) .then(() => console.log(‘Successful share’), error => console.log(‘Error sharing:’, error)); Requirement…
I try to start this blog last week because my colleague or my friends love to claim the speed of any front-end framework. Almost said “React is the best” but I don’t believe that and my idea is PolymerJS and Angular 2 should be great too.So I try to write script in any framework…
ความสามารถของ Progressive Web App อย่างนึงคือ การทำ Notification ซึ่ง Notification นี้จะ ยังทำงานอยู่ถึงแม้ Tab นั้นจะ ผิดลงไปแล้ว ซึ่งจริงๆเราสามารถ Implement Server เองก็ได้แต่เนื่องจากผมขี้เกียจและก็มีของดีๆให้ใช้อยู่แล้วก็เลยใช้ดีกว่า Service ตัวนี้มีชื่อ ว่า Onesignal ครับ ข้อดีคือ “ตอนนี้ยังฟรีอยู่” แล้วก็ Support ทุก Platform ย้ำว่าทุก Platform จริงๆ ร่ายมายาวแล้วเริ่มเลยดีกว่า สำหรับเว็บ notification นั้น User จะสามารถได้รับ Notification ได้ ต่อให้เว็บนั้นปิดอยู่ หรือ tab นั้นไม่ได้ focus ก็ตาม (ขอให้เปิด Chrome เอาไว้) สิ่งที่ต้องมี ควรจะมีเว็บที่เป็น Https (ใช้ FIresbase…
Back to 2010 Wired Magazine Launch article name“The Web is Dead” in that time many web feeling panic and Mobile Application development is became trending. Salary of Mobile Developer has increased some Web developer change to Mobile Developer. Mobile Application number is crease to million but…. the web is not dead and still developing…