SaltyAom

Lighthouse เป็นเครื่องมือที่ Google สร้างขึ้นมาเพื่อใช้ในการวัดประสิทธิภาพของเว็บโดยเฉพาะ ทำให้ Web Developer ได้รู้ถึงประสิทธิภาพของเว็บตัวเองและ optimize เว็บให้มีประสิทธิภาพมากขึ้น

Lighthouse 101 และการใช้ Lighthouse อย่างมีสติ

เมื่อพูดถึง Virtual DOM หลายคนก็มักจะนึกถึง React, Library แรกที่เริ่มใช้ Virtual DOM ในการทำงาน แต่ว่าข้อจำกัดของ React สมัยก่อนคือการที่มี Root Node ได้แค่อันเดียว และเวลาจะ render อะไรก็ต้องมี wrapper เพื่อให้ Render ได้

หลักการทำงานของ Fragment ใน Virtual DOM

ทุกวันนี้เวลาเราเขียนโปรเจคเว็บขนาดใหญ่ เรามักจะเจอปัญหานึงมาโดยตลอด "ทำยังไงถึงจะ reuse ส่วนที่ใช้บ่อยๆ ระหว่าง Library ได้" ถึงแม้ว่าจะมี Web Component หรือ Component สำหรับการใช้ Component แบบ Native แต่ก็ดูเหมือนว่าจะยังไม่ตรงจุดที่ Developer ต้องการซักที

จุดประกาย Web Component ไปอีกระดับกับ Forsteri

ในการพัฒนาเว็บไซต์ขึ้นมาซักเว็บหนึ่ง โครงสร้างทุกอย่างล้วนมาจาก DOM (Document Object Model) ซึ่งเป็น Object Tree ประมวลผลด้วย JavaScript แต่ด้วยความที่มันมีขนาดใหญ่เอาซะมากๆ การที่เราจะแก้ไขใหม่ทั้งหมดใช้เวลาและทรัพยากรสูง จึงเกิดการมองหาวิธีที่ดีขึ้นก็นี้แทน

มาลองสร้าง Virtual DOM จาก 0 กันดีกว่า

มาลองสร้างการ render จาก Virtual DOM เข้า DOM จริงๆ กันดีกว่า

autocomplete เป็นหนึ่งใน attribute ในภาษา HTML (ไม่ใช่ C) โดยมีหน้าที่ในการ "autocomplete" ช่องใส่ตัวอักษรให้โดยอัตโนมัติ ถ้าจะถามว่า autocomplete อย่างเดียวสามารถพังเว็บได้ไหม? ง่ายๆ ก็คือเป็นไปไม่ได้เลย

Autocomplete อย่างเดียวไม่เคยทำให้เว็บพังได้

Progressive Web App ไอเดียที่ผลักดันความสามารถของเว็บให้เป็นได้มากกว่าแค่เว็บ ทุกวันนี้มีเว็บจำนวนไม่น้อยที่ทำหน้าที่เป็นเว็บและแอพไปในตัวเช่น FaceBook Lite, Twitter Lite, Starbuck ความสามารถต่างๆ ก็เพิ่มขึ้นทุกวัน จนสามารถที่จะขอสิทธิ์ต่างๆ เพื่อทำหน้าที่บางอย่างแทน Native App ได้ รวมถึง... การถ่ายรูปและวิดีโอด้วย

มาลองถ่ายรูปบนเว็บไซต์กันดีกว่า~

พอพูดถึง Firebase หลายคนก็คงจะนึกถึงอะไรที่ ยากๆ แต่ความจริงแล้ว Firebase เนี่ย ทำให้ชีวิตใครหลายคนง่ายขึ้นมากๆ, เราสามารถที่จะทำ Database แบบ Realtime ได้ง่ายมาก และ ยังทำ Authentication ได้โดยที่เราไม่จำเป็นต้องเขียน Backend และ ทำ Database ขึ้นเองด้วยซ้ำ!

เริ่มต้นเขียนคำสั่ง Firestore จาก 0 ด้วย JavaScript กันดีกว่า~

เริ่มต้นเขียน Firestore จาก 0 ด้วย JavaScript กันดีกว่า~

React.js, หนึ่งใน Frontend JavaScript Library ที่ใช้งานเยอะมากที่สุด อันหนึ่งเลยก็ว่าได้ ด้วยความที่ React.js มีประสิทธิภาพที่ดีมาก จากการใช้ Virtual DOM, Eco System ที่กว้างๆ มากๆ พัฒนาขึ้นโดย Facebook และใช้ในบริษัทใหญ่ๆ หลายที่อย่าง Netflix, Dropbox และ Facebook เลยไม่แปลกเลยที่จะเป็นที่นิยมมาก

SaltyAom

I like to take it easy!

เขียนโดย SaltyAom

Lighthouse 101 และการใช้ Lighthouse อย่างมีสติ

— SaltyAom

หลักการทำงานของ Fragment ใน Virtual DOM

— SaltyAom

จุดประกาย Web Component ไปอีกระดับกับ Forsteri

— SaltyAom

มาลองสร้าง Virtual DOM จาก 0 กันดีกว่า

— SaltyAom

มาลองสร้างการ render จาก Virtual DOM เข้า DOM จริงๆ กันดีกว่า

— SaltyAom

Autocomplete อย่างเดียวไม่เคยทำให้เว็บพังได้

— SaltyAom

มาลองถ่ายรูปบนเว็บไซต์กันดีกว่า~

— SaltyAom

เริ่มต้นเขียนคำสั่ง Firestore จาก 0 ด้วย JavaScript กันดีกว่า~

— SaltyAom

เริ่มต้นเขียน Firestore จาก 0 ด้วย JavaScript กันดีกว่า~

— SaltyAom

Preact, สั้นๆ ว่า React ขนาด 3KB

— SaltyAom

Mystiar Blog