น้อง Manatsawin Hanmongkolchai มาบอกว่าที่ใช้อยู่เหมือนลง Dependency ให้ครบก็ใช้งานได้เหมือนกันตามนี้ https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md นั้น อันนี้ถือว่าเป็นอีกวิธีนึงแล้วกันครับ จาก Blog เก่า เรื่อง Pupeteer ปัญหาหลักๆเลยที่เราจะต้องเจอคือ Pupeteer ต้องไปรัน Chrome จริงๆ ซึ่งปัญหาที่ตามามาคือ Chrome ต้องใช้ OS ที่มี UI ถึงจะรันได้ อาจจะเป็น Window หรือ Ubuntu ที่มี Desktop ซึ่งในเคสของผม ใช้ Window อยู่ คราวนี้ Google Cloud compute engine ที่เป็น window อยู่ มีราคาแพง ซึ่งถ้าเรารัน Pupeteer บนเครื่อง ที่เป็น centos หรือ linux ที่ไม่มี UI…
ปัญหาเดิม ปัญหาอย่างนึงของ การทำ PWA คือ เรื่อง Offline เพราะว่า ถ้าต้องการให้ PWA เก็บข้อมูลเพื่อให้ใช้งานได้ทั้ง Online และ Offline ได้ จะวุ่นวายมากๆ เพราะ Flow ที่เราต้องทำคือ ทุกครั้งที่ Save ข้อมูล ลง server เราต้อง save ลง Offline database อย่างเช่น Localstorage หรือ indexDB เอง และเมื่อข้อมูลอัพเดท เราก็ต้องจัดการข้อมูลทั้งสองที่เอง ก่อนหน้านี้ก็มีบางเจ้าที่พยายามทำอะไรแบบนี้ออกมา อย่าง Pouchdb แต่เราก็ยังต้องวุ่นวายลง Server เอง Config เอง แต่ถ้าเราใช้ Cloud Firestore เรื่องทั้งหมดจะจบลง ทำไม Cloud Firestore ถึงใช้งาน offline ได้ คำตอบง่ายๆคือ…
จริงๆ เป้าหมายของ Blog นี้คือ ไปเจอวิธีใช้ Puppeteer โดยไม่ต้องมีเครื่อง Desktop มาแต่ว่ากลัวคนไม่รู้จัก เลยมาเขียนเรื่อง Puppeteer ก่อน Puppeteer คือ?? เมื่อหลายเดือนก่อนตอน Chrome 59 ออก ตัว stable มี feature นึงที่เปิดตัวมาด้วยคือ Chrome headless อธิบายง่ายๆคือ เราสามารถเขียนโปรแกรมสั่งให้ Chrome ทำสิ่งต่างๆได้โดยไม่ต้องมาเปิด chrome หรือ click เองได้ แต่มันติดตรงที่ว่า มันแอบใช้ยากอยู่หน่อย Google เลยทำ Puppeteer ขึ้นมาเพื่อให้มันง่ายขึ้น ถ้าใครเคยใช้ PhantomJS หรือ NightmareJS ก็คือแบบเดียวกันเลย เขียนด้วย node.js เหมือนกันด้วย ส่วนตัวผมเคยใช้ Puppeteer อยู่บน Production แต่ต้องเอาลงมาก่อนเพราะว่ามีปัญหาเรื่อง Memory leak…
ตอนนี้ กระแส WebVR กำลังมาแรงมาก (ในต่างประเทศ ) ทำให้เริ่มมีหลายเจ้าที่ออกมาทำ Library ที่ช่วยให้เราทำ WebVR ได้ง่ายขึ้น ซึ่ง Top ใน List คงไม่แพ้ a.frame.js จากค่าย Mozilla และ ReactVR จากค่าย facebook ซึ่งสองอันนี้ต่างกันมีวิธีการใช้งานที่ต่างกันมากๆ ลำพังถ้าเราไม่มี Tools เหล่านี้ เราก็จะต้องเขียนเองด้วย WebGL หรือ Three.js ซึ่งจะโหดร้ายมากๆ A-frame Supported by Mozilla a.frame.js เป็น library ซึ่งได้รับการสนับสนุนจากทีม Mozilla ตัว A-Frame เองเป็น Libraly ที่ไม่ต้อง Compile เราสามารถใช้งานได้ เพียงแค่เรียก script ในหน้าเว็บ ปกติได้เลย ซึ่งวิธีการเขียน จะเป็นแบบ web…
ก่อนอื่นอธิบายนิดนึงว่าอะไรคือ Lazy load เพราะน่าจะมีบางคนยังไม่รู้ Lazyload คือ วิธีการ การดึงเวลาการ load element ที่ยังไม่ได้แสดงอยู่บนหน้า อธิบายง่ายๆก็คือ ถ้า element หรือส่วนนั้นยังไม่ถูก scroll ไปถึง ก็ยังไม่ต้องให้แสดงผล วิธีการนี้ช่วยให้ เว็บไซต์เร็วขึ้นมาก เพราะว่า ฝั่ง client ไม่จำเป็นต้องโหลดสิ่งที่ยังไม่ได้ใช้งานออกมาทันที ยิ่งเว็บยาวๆ lazy load เป็นอะไรที่เห็นผลมากๆ Lazy load เนี่ย เรามักจะเอามาใช้กับพวก รูปภาพเป็นหลัก เพราะถ้าใช้กับ content ก็จะมีปัญหากับ SEO ตามมาทันที Lazy load ทุกวันนี้ทำงานยังไง วิธีการทำ lazy load ทุกวันนี้จะใช้ technic การ listen scroll event ไว้ โดยถ้า ตำแหน่ง scroll…
เมื่อวานผมเกิดอยากลอง Nuxt.js แต่ไม่มี Project ไหน ที่จะให้ลองเล่นก็เลยเอา Project ทีกำลังจะขึ้นแล้วเป็น Vue.js มา convert เป็น Nuxt.js ซึ่งระหว่างทาง ก็มีเรื่องที่ต้องแก้กันเยอะ พอสมควร 1.Copy Component มาได้เลย อันนี้เรียกว่าเป็นข้อดีและกันครับ หลักๆคือ เราแทบจะไม่ต้องเปลี่ยนวิธีการเขียน component เลย ทำให้ความวุ่นวายในการย้ายมามีน้อยมากๆ ใครที่จะเปลี่ยนก็ Copy / Paste ได้เลย 2. Router อย่างแรกเลยที่เป็นเรื่องใหญ่คือ Router Nuxt.js เนี่ย เปลี่ยนจากการที่เราสร้าง Router เปลี่ยนการวาง File ตาม Folder structure ซึ่งถ้าจะเปลี่ยนมาใช้ Nuxt.js เราต้องเข้าใจก่อนว่าต้องวาง folder แบบไหน Nuxt.js ถึงจะไปสร้าง Folder แบบเดิม บางคนอาจจะคิดว่า มันไม่ได้ใช้…
หลายๆครั้งเราก็อยากจะเปลี่ยน Application ของเราเป็น Vue.js แต่ด้วย stack ที่มีอยู่มาตั้งแต่นานนม จะให้ล้างทั้งหมดแล้วทำใหม่ก็คงไม่ต้องทำอะไรกินพอดี ทางที่ดีทางนึงคือการค่อยๆทยอยเปลี่ยน component บนหน้าของเราให้กลายเป็น Vue.js ไปทีละอันๆ และเมื่อทำจนใกล้ครบก็ค่อยเปลี่ยนทั้ง App แต่ปัญหามันจะเกิดตรงที่ อยู่ดีๆเราจะเอา component ของ Vue มาใช้เลยไม่ได้ เราต้องทำ ให้ component ที่เราสร้างมาสามารถใช้ บน stack ปกติได้ก่อน ซึ่งนั่นคือเราต้องทำให้ Vue component ของเรากลายเป็น CustomElement ตามมาตรฐาน HTML ก่อน ซึ่งน้องโบน (Napon Mekavuthikul) น้องในทีมที่ ThothZocial ไปเจอวิธีการทำมา ผมเลยเอามาลองเล่นดู ว่ามันใช้งานยังไง….. ก็ขอให้ Credit น้องโบนไว้ตรงนี้ครับ 🙂 Vue Custom Element ก่อนจะทำให้มันใช้บน HTML ปกติได้ เราต้องแปลงให้ component…
ช่วงนี้มีคนมาถามผมเยอะมากๆเรื่อยๆว่า “Progressive Web App ใช้บน iOS ไม่ได้แล้วเราต้องทำยังไง” “ผู้บริหารไม่เห็นเลยว่าทำไมต้องทำ ทำไป iOS ก็ใช้ไม่ได้” ทำความเข้าใจเรื่องนี้กันก่อน ก่อนอื่นต้องเข้าใจก่อนนะครับว่า PWA ไม่ใช่เทคโนโลยีใหม่ มันคือนิยามการทำ Mobile site อีกแบบเท่านั้นเอง คล้ายๆกับหลายปีก่อนที่เรามีคำว่า HTML5 แบบนั้นเลย เพราะฉะนั้นการเปลี่ยนเว็บเป็น PWA ไม่ใช่การสร้าง Version ใหม่ แต่มันคือการอัพเกรด Mobile site ให้ไปใช้เทคโนโลยีกลุ่มนี้เท่านั้นเอง เรามองง่ายๆว่ามันคือ การทำเว็บใหม่ให้หน้าตาเหมือน App พอครับ ยังไม่ต้องคิดอะไรซับซ้อน ซึ่งเอาเข้าจริงไม่ได้มีการกำหนดตายตัวเลยด้วยซ้ำว่า PWA ต้องมีอะไรหรือไม่มีอะไร แล้วไอ้ที่เค้าบอกว่าต้อง Add to Home Screen ได้หละ?? เราแค่มีมุมมองคร่าวๆครับว่าถ้า Web จะมาสู้ App ได้มันควรจะ Install ได้ เปิดได้โดยไม่ต้องต่อเน็ต ซึ่งเราก็เลยกำหนดภาพจำง่ายๆว่า ถ้ามันมีทั้งสองอย่างนี้เราจะเรียกว่า…
ถ้าใครได้ไปงาน Google I/O viewing party Bangkok ครั้งที่ผ่านมา ก็จะเห็นว่าผมทำ Live feed ขึ้นมาตัวนึงคือ http://live.gdg.in.th ซึ่งวันนี้ก็จะมาเล่าว่าข้างหลังมันทำยังไง ตอนก่อนจะไป Google I/O ที่อเมริกา ผมได้คิดขึ้นมาว่า ปีก่อนๆงาน VIewing party มีปัญหามากๆ เพราะเวลาคนที่ไป Video call กลับมาในงานทีไรเน่าทุกที ผมก็เลยลองถาม Wittaya A ว่า เน็ตมันเป็นยังไงบ้างในงาน คำตอบก็คือ “พอใช้งานทั่วไปได้ live ไม่น่าจะรอด” ผมเลยได้ไอเดียว่าจะทำ เว็บนึงเอาไว้ให้คนที่ไปงาน Live feed กลับมาที่ประเทศไทย โดยมีโจทย์ว่า ต้องไม่กลัวติดปัญหาเรื่อง Internet ใช้ได้หลายคนพร้อมๆกัน เพราะว่าไปกันหลายคน ใช้งานง่ายไม่ต้องติดตั้งอะไรในเครื่อง ระบบต้องดูแลง่ายเพราะว่าถ้าเกิดมีปัญหามาหน้างาน จะแก้อะไรไม่ได้เพราะทุกคนล้วนอยู่ในงาน ทุกคนต้องเห็นซึ่งกันและกันว่า พิมพ์อะไร เพราะไม่งั้น content จะซ้ำกันทันที Support…
พอดีว่า ได้ไปอ่านบทความนึงของ Addy osami เรื่อง Preload กับ Prefetch บน Browser แล้วรู้สึกว่าน่าสนใจมากซึ่งมีวิธีมากมายที่เราสามารถโหลด Script มาใช้ได้ ไม่ว่าจะเป็น Async Defer Preload Prefetch แต่ก่อนไปกันไกลเรามาเร่ิมที่อะไรง่ายๆกันดีกว่า โดยปกติแล้วเราจะเรียก script กันแบบปกติเลยก็คือ <script type=”text/javascript”src=”main.js”></script> ซึ่งถ้าใครรู้ปัญหาดีจะรู้ว่ามันแย่มากๆ เพราะว่าถ้าเกิด Script นั้น Block Render เวลา โหลด script มันจะโหลด DOM ให้จบก่อนแล้วค่อยโหลด Script ซึ่งมันจะกลายเป็นขั้นบันไดและจะไม่ยอม render ต่อถ้า โหลด javascript ไม่จบ ตอนนี้ก็เลยมีวิธีการที่นิยมทำกันมากขึ้นก็คือ เรียกแบบ Async ซึ่งจะโหลด script และ parse DOM ในส่วนที่ใช้ด้วยกันมาพร้อมกัน แล้วค่อย Execute ที่เดียว…