Perjalanan menuju gambar responsif: CSS width, media query, sampai img srcset

Artikel ini membahas teknik-teknik memuat dan menampilkan gambar responsif yang sesuai dengan ukuran viewport. Daftar Isi Non-responsif Teknik 0: CSS width dan height Teknik 1: CSS media query dan background-image File mana yang di-download? Media query untuk layar dengan kepadatan pixel tinggi (“retina”) Gabungan media query width dan resolution Uji coba CSS background-image dengan media query Teknik 2: img dengan atribut srcset Uji coba img srcset Perbandingan performa Penutup Extra credits Referensi Perangkat (device) yang digunakan untuk mengakses web makin bervariasi—makin besar, makin kecil, makin tajam....

Memastikan webmu selalu tersedia

Di situasi seperti pandemic seperti sekarang ini, informasi online merupakan cara paling efektif untuk mengetahui perkembangan terakhir dari situasi COVID-19. Website mudah di-update, cukup melakukan update di server, pengunjung langsung mendapatkan informasi terkini pada saat mengakses website tersebut. Namun tidak jarang beberapa website tidak siap menerima lonjakan pengunjung yang lebih banyak dari biasanya sehingga membuat pengunjung tidak mendapatkan informasi yang mereka inginkan. Kita sebagai pengembang website harusnya bisa memberikan layanan yang lebih optimal agar website kita tetap bisa memberikan informasi yang dibutuhkan oleh pengguna....

Mengoptimasi Gambar Pada Halaman Situs

Mengaudit situs yang perlu dioptimasi dengan Lighthouse Untuk mencari tahu apa yang bisa kita lakukan untuk mengoptimasi situs kita makan kita perlu melakukan audit terlebih dahulu menggunakan Lighthouse, sebuat perangkat dari Google untuk web developer dapat mengoptimalkan situs yang mereka buat. Cara paling mudah adalah menggunakan Lighthouse yang sudah terintegrasi dengan Chrome Dev Tools. Untuk melakukan audit dengan Chrome DevTools lakukan langkah berikut: Buka halaman website yang ingin dioptimasi Buka Chrome DevTools Buka panel audit Jalankan audit pada situs yang ingin dioptimasi....

Cara Mengecek dan Mengatur Versi Browser untuk Pengguna

User Agent berisikan informasi tentang nama browser, versi browser, sistem operasi, tipe perangkat dan banyak informasi yang berguna untuk dipakai. Dalam pekerjaan, saya menggunakan informasi berupa nama browser dan versinya untuk mengendalikan browser dan versi yang digunakan oleh pengguna ketika mengakses ke sistem saya. Daripada membuat sebuah library untuk menampung user-agent dari awal lebih baik saya menggunakan yang sudah ada dan banyak penggunanya. Terima kasih Github. :) Saya mengandalkan ua-parser-js untuk mengecek dan mengendalikan browser dan versi dari browser tersebut....

LighthouseBOT Untuk Auto Audit Web di Github Repositori

LighthouseBOT — merupakan sebuah akun “bot” yang bekerja untuk “Audit Web” dengan menggunakan Lighthouse dan melaporkan hasil audit tersebut pada repositori kita di Github. Dengan menggunakan LighthouseBOT maka kita tidak perlu lagi untuk melakukan audit secara manual dengan menggunakan https://web.dev, Lighthouse pada Chrome DevTools, Lighthouse Extension pada browser, Lighthouse-cli, & cara-cara lain yang menggunakan Lighthouse. Hal — hal yang bisa dilakukan LighthouseBOT hanyalah menampilkan laporan mengenai Performance, Accessibility, SEO, & Best Practices....

Visualisasi Arsitektur Aplikasi Dengan Madge

Madge merupakan Aplikasi pengembang yang menghasilkan Grafik Visual mengenai struktur sebuah aplikasi, modul-modul yang digunakan (dependencies Modul), & Lingkaran Dependensi atau “Keterkaitan” satu atau lebih penggunaan sebuah modul (Circular Dependency). Circular dependency - Wikipedia Sebelumnya, saya sedang mempelajari Lighthouse, tepatnya Arsitektur dari Lighthouse kemudian mendapatkan sebuah informasi menarik “yah , tentang Madge ini” dari **** tautan ini. GoogleChrome/lighthouse Pada tautan tersebut saya menemukan gambar atau visual grafik dari arsitektur lighthouse....

Pengalaman Pertama Menghadiri Chrome Dev Summit

Berikut cerita pengalaman pertama saya menghadiri Chrome Dev Summit 2018 atas undangan Google untuk para Google Developers Expert yang fokus di Web Technologies. Setelah sehari sebelumnya, di tanggal 10–11 November 2018 juga ada perhelatan akbar Developers Experts Summit dimana GDE atau Google Developers Experts seluruh dunia berkumpul dan ber-summit-ria. Sebelum mengulas acara yang diselenggarakan di Yerba Buena Center for the Arts, San Francisco pada tanggal 12–13 November 2018 saya ingin menceritakan bagaimana saya bisa menjadi Google Developers Experts terlebih dahulu agar konteksnya sesuai....

Chrome Dev Summit 2018, mana yang kalian harus coba implementasikan? ( 1 dari 2)

Google Developer Experts Web di CDS 2018 Chrome Dev Summit(CDS) 2018 yang merupakan ajang tahunan Google Chrome untuk bertatap muka dengan para pengembang web baru saja diselenggarakan beberapa minggu lalu di mana event selama 2 hari tersebut memberikan insights seputar kondisi web saat ini, dan apa yang akan hadir di web platform ke depannya. Terlalu banyak konten yang kadang malah membuat bingung pengembang web, mana yang harus saya coba gunakan terlebih dahulu....

Progressive Web-Application di AWS

PWA+S3+Cloudfront = ❤️ Sumber: Pexels Membangun PWA sepertinya sedang tren. Kita tidak akan membahas tips membangun PWA, jika ingin update tulisan yang berkaitan dengan pengembangan website di Indonesia bisa ikuti tautan ini https://medium.com/wwwid Create React App Saya akan mencontohkan menggunakan React tapi sebenarnya seluruh website statis bisa juga (VueJS, Angular, Vanilla, dsb). Statis disini maksudnya adalah hanya HTML, JavaScript, dan CSS. Bukan server-side rendering. CRA ini sudah PWA-enabled, jadi bisa kita jadikan contoh....

5 kelemahan web apps yang sering hacker abuse

S ering kali web developer baru menyadari betapa pentingnya keamanan setelah web atau aplikasinya sudah diretas atau mendapat ancaman dari hacker berupa email. Kesulitan dari pengembangan pun mulai meningkat karena yang harus di tangkis adalah lubang keamanan, dua hal yang berbeda antara lubang yang biasa disebut bug **** dimana sebuah kesalahan teknikal ataupun bisnis yang menyebabkan munculnya error pada aplikasi yang biasanya muncul dengan ukuran seperti High, Medium, Low dan keamanan yang diukur dari tingkat resiko yang muncul dibagi seperti Confidential (kerahasiaan), Integrity(keutuhan) dan Availability (ketersediaan)....