Saya masih inget beberapa tahun kebelakang, ingin rasanya buka Instagram di PC, namun sulit banget. Yang masih saya ingat adalah harus install BlueStack, Genymotion, dll. Semua itu serba repot.
Berkat teknologi web yang semakin canggih, mungkin kita pernah atau bahkan sering mendengar kata PWA atau singkatan dari Progressive Web Apps, singkat cerita teknologi Progressive Web Apps saat ini memungkinkan para developer Website untuk membawa experience yang ada di mobile apps kedalam sebuah web app. Dan salah satu keuntungan dari Progressive Web Apps sendiri adalah Installable.
Itu berarti memungkin pengguna untuk “menyimpan” Web App kedalam Home Screen device atau Komputer tanpa perlu repot-repot menggunakan App Store dan men-download dari sana. Dan saat ini Instagram sudah menerapkan hal tersebut.
Cara menggunakan Instagram di Komputer
Pertama kita buka Instagram.com di Browser, pada tutorial ini, mimin menggunakan Chrome Browser versi 76
Kedua kita buka developer tools, Gunakan pintasan keyboard Ctrl+Shift+I (Windows) atau Cmd+Opt+I (Mac)
Ketiga kalian harus mengaktifkan Toogle Device
Keempat kalian harus refresh browser kalian, dan tampilan instagram akan menjadi seperti dibawah ini, dan akan muncul sebuah popup dengan permintaan untuk menambahkan Instagram ke Home screen kalian.
Jika popup tersebut tidak muncul, pada address bar browser kalian dapat menekan tombol plus diatas. Setelah itu akan muncul sebuah request dari Chrome untuk melakukan install app, kalian konfirmasi dengen menekan tombol Install seperti dibawah ini:
Jika seluruh proses diatas berhasil, selamat Instagram dapat di akses melalui PC komputer kalian.
Tailwindcss itu sangat berbeda dengan dengan Framework lainnya seperti Bootstrap, Foundation, atau Bulma, karena Framework tersebut merupakan sebuah UI Kit, sedangkan tailwindcss bukanlah UI Kit. Tailwindcss tidak memiliki template yang disuguhkan secara default, dan juga tailwindcss tidak memiliki component yang siap digunakan. Dalam artian lain Tailwindcss nggak ngurusin template website yang kamu miliki jadinya seperti apa, Tailwindcss males ngurusin beginian, karena mereka ngurusin Tailwindcss sendiri udah capek *canda njir.
Apakah ini saat yang tepat untuk pindah ke Tailwindcss?
weitss... sabar sob, kalau kalian mengharapkan sebuah framework CSS yang sudah menyediakan banyak component seperti button, card, carousel, dan tete* bengek lainnya, well.... framework ini nggak cocok sama sekali dengan kalian, dan saran saya, kalian nggak usah lagi baca artikel ini. Mending kalian baca berita tentang Lucinta Luna yang barusan release Kopi Ko&thol. ?
Nah, yang cocok untuk pengguna Tailwindcss adalah mereka yang ingin mengimplement sebuah UI yang "gue banget", ngerti maksudnya? Mudahnya, framework ini cocok bagi mereka yang ingin memiliki UI dengan sense berbeda dari yang lainnya.
Low Level Class
Tailwindcss menyediakan class utility yang cukup low level dan composable, yang menjadikan Tailwindcss mudah untuk membangun sebuah UI interface yang kompleks dan memiliki ciri khas tersendiri. Dibandingkan bootstrap yang sering kita temui sebuah situs sangat terasa sekali Bootstrapnya. Dibawah ini adalah contoh penggunaan class di Tailwindcss:
See the Pen Tailwindcss Example by Arryangga Aliev Pratamaputra (@arryanggaputra) on CodePen.
Component Friendly
Meskipun kalian dapat melakukan banyak hal hanya dengan utility-class seperti diatas, ada saat dimana kalian ingin membuat sebuah komponen yang dapat di re-use berkali-kali. Tailwindcss menyediakan sebuah tools untuk mengekstraksi class dari sebuah komponen, sehingga mudah untuk memperbarui beberapa instance komponen dari satu tempat, contoh saya ingin membuat sebuah button:
<!-- Using utilities: -->
<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
Button
</button>
<!-- Extracting component classes: -->
<button class="btn btn-blue">
Button
</button>
<style>
.btn {
@apply font-bold py-2 px-4 rounded;
}
.btn-blue {
@apply bg-blue text-white;
}
.btn-blue:hover {
@apply bg-blue-dark;
}
</style>Sebetulnya masih banyak lagi yang ingin ditulis, tapi aku butuh bantuan dari kalian semua, semoga kalian bersedia membantu untuk menambahkannya, ataupun memberikan artikel lain.