Ini adalah newsletter pertama dari WWWID untuk secara rutin memberikan update terkini untuk para web developer agar tahu perkembangan dan tren pengembangan web seperti teknik, tools, libraries, dan frameworks. Berikut adalah apa yang web developer harus tahu edisi pertama.

Berita Terbaru

Firefox Developers 58 Release Notes

image

Firefox DevTool Terbaru

Rilis terbaru Firefox Developers yang berbasis Quantum Engine ini datang dengan beragam tool terbaru untuk web developers seperti devtool terbaru, dukungan font display di CSS, serta dukungan WebVR secara default.

Safari Technology Preview Release 44**
**Dukungan Payment Request API muncul di release terbaru Safari ini. Walaupun belum maksimal tapi dukungan ini menjadi berita baik bagi web developer terutama yang membuat aplikasi _e-commerce_.

Web Share Target API Supported in Chrome**
**Salah satu yang masih dirasakan _miss_ di PWA adalah kemampuan untuk menerima intent share dari aplikasi lain. Misalnya Twitter Lite saat ini belum bisa melakukan _tweet_ dengan konten yang kalian ingin _share_ dari Chrome. Tapi dengan Web Share Target API ini, PWA akan bisa muncul di daftar pilihan aplikasi yang ingin kita gunakan untuk _share_ konten.

Artikel Menarik

The Cost Of Javascript

image

Best practices untuk optimasi Javascript

Gambar terkadang diasumsikan menjadi sumber utama yang membuat loading terasa lambat, padahal file gambar tidak memperlambat rendering di browsers. Justru file Javascript yang sebenarnya terkadang menjadi pokok masalah sebenarnya.

Best Request is No Request, Revisited**
**Salah satu _golden rule performance_ di web adalah bagaimana melakukan minimalisasi request sesedikit mungkin. Karena _roundtrips_ yang diperlukan untuk melakukan _requests_ berdampak pada waktu _loading_ suatu halaman web. Tapi dengan makin tingginya adopsi HTTP2 apakah _golden rule_ tersebut masih berlaku?

Images Filters Using WebGL**
**Web bukan cuma sekedar untuk menampilkan konten, tapi bisa menjadi aplikasi foto _editor_ tanpa perlu di-install. Video ini menunjukkan bagaimana menggunakan WebGL untuk melakukan _filtering_ pada file gambar layaknya aplikasi Instagram.

Learn CSS Grid In 5 Minutes**
**Membuat layout tampilan di halaman web merupakan sesuatu yang pasti dilakukan oleh _web developer_. Beberapa teknik layout dengan CSS _frameworks_ yang ada perlahan tergantikan dengan _feature_ _native_ di CSS sehingga kebutuhan akan framework bisa dikurangi. Salah satu fitur _native_ terbaru tersebut ada CSS Grid yang memungkinkan kita membuat _layout grid_ dengan lebih mudah.

Take Control Your Scroll**
**Pada saat menggunakan aplikasi PWA terkadang pada saat kita berlebihan _scroll_ ke bawah secara _default_ aplikasi akan melakukan _refresh_ halaman karena itu adalah _default behaviour_ dari _browsers_. Untuk mencegahnya kalian bisa menggunakan CSS overscroll-behavior.

A Pinterest PWA Performance Case Study**
**Pinterest baru meluncurkan _mobile web_ terbaru mereka yang fokus untuk performance di _mobile_. Aplikasi PWA ini dikembangkan dengan React dan fokus pada _critical rendering path_ untuk memastikan _loading_ dan interaktif bisa kurang dalam 5 detik.

Tools, Library, dan Framework

Bankai, The Friendly Web Compiler

image

Bankai web server

Bukan jamannya lagi menginstall MAMP, atau WAMP sebagai web server di komputer yang digunakan untuk development. Tapi tool seperti Bankai ini memudahkan kita untuk development dengan HTTP2 server dengan live reloading. Serta membantu kita untuk melakukan build untuk production dengan fitur optimasi seperti minify, tree shaking, flatten, dan lainnya.

Critical 1.0 **
**_Critical_ CSS adalah style yang diperlukan untuk menampilkan tampilan yang akan terlihat pertama kali pada saat diakses. Dengan tool critical terbaru ini kita bisa melakukan ekstraksi _critical_ CSS tersebut dengan meng-_embed_-nya secara inline di _file_ HTML kita.