Vue JS adalah salah satu framework Javascript yang berguna untuk membuat front end. Vue JS atau selanjutnya disebut Vue, adalah framework yang berguna untuk membuat user interface dan single-page application (SPA). Framework ini bersifat open source sehingga dapat kamu gunakan secara bebas. Pada arsitektur MVC (Model-View-Controller), Vue JS akan mengambil peran pada View nya saja. Pada 18 September lalu, Vue JS secara resmi merilis Vue 3. Buat kamu pengguna setia Vue, atau bahkan baru saja menyelamu Vue, artikel ini akan mengajak kamu menilik fitur anyar pada Vue 3, apa saja ya? Composition API Menggunakan Hooks Salah satu fitur andalan Vue JS adalah composition API. Pada Vue 3, kamu tidak perlu lagi menginstall Composition API dan dapat langsung kamu gunakan di luar box tanpa pengaturan tambahan. Terinspirasi dari React Hooks, fitur baru ini memungkinkan penulisan komponen dalam mode function based. Kamu dapat mengenkapsulasi logika program dalam composition functions dan menggunakannya kembali pada objek-objek yang kamu miliki. Namun, jika kamu masih menggunakan Vue versi 2 kamu tidak perlu khawatir. Vue 3 masih 100% mendukung option-based API. Secara garis besar, terdapat dua keuntungan function-based API yakni :1. Pengorganisasian kode yang lebih baik2. Resharing / reusable code lebih maksimal Dukungan <Template> Untuk Multiple Root Elements Perubahan lainnya adalah adanya multiple roots element. Pada Vue 2, <template> hanya mendukung one root element. Misal kamu memiliki dua tag <p>, kamu harus membungkus tag ini dalam sebuah <div> agar dapat bekerja sebagai mana mestinya. Kamu juga harus mendefinisikan CSS agar tampilan sesuai dengan harapan kamu. Sementara itu, pada Vue 3 kamu dapat langsung sejumlah tags langsung dalam tag <template>. Sebagai contoh, kamu dapat memasukkan tag <p> langsung dalama <template> <template> <p> Count: {{ count }} </p> <button @click=”increment”> Increment </button> <button @click=”decrement”> Decrement</button> </template> Suspense Suspense adalah fitur baru pada Vue 3 yang akan me-render komponen default maupun fallback sampai komponen utama berhasil melakukan fetch data. Cara kerja suspense mirip dengan async operations saat fetch data dari server. Kamu tidak perlu lagi mendefinisikan v-if kemudian mengembalikannya. Fitur ini akan langsung melakukannya untuk kamu. Fitur Baru Lainnya Vue 3 juga memiliki beberapa fitur baru lainnya, yakni1. Multiple v-models2. Reaktivitas yang lebih baik3. Global mounting4. Native portal (sekarang disebut Teleport)5. Update pada Virtual DOM dan TypeScript Dan masih banyak lagi. Nah, itulah beberapa Fitur Anyar Pada Vue 3. Sudah siap beralih?
Website adalah sesuatu yang tidak bisa dilepaskan dari kehidupan sehari hari. Website telah masuk hampir ke seluruh sektor kehidupan, seperti ekonomi, pariwisata, hiburan, hingga Pendidikan. Per-Januari 2019, jumlah website aktif mencapai angka 1,5 miliar lebih loh. Angka yang begitu besar membuat banyak orang berbondong-bondong mempelajari pemrograman website. HTML adalah bahasa pertama yang akan mereka pelajari. Nah, tahukah kamu bahwa kita bisa membuat tampilan HTML tanpa kode? Eits, bisa dong! Mau tahu caranya? Berkenalan dengan Sketch2Code Buat yang belum kenal, Skecth2Code adalah aplikasi web gratis dari Microsoft yang akan mengubah file gambar menjadi kode HTML. Sketch2Code menggunakan teknologi yang bernama Computer Vision. Computer Vision inilah yang akan mengenali objek dalam pola dalam suatu gambar. Kemudian computer vision ini akan memprediksi elemen desain dalam gambar itu. Selanjutnya Sketch2Code akan mengubah desain menjadi baris-baris HTML. Menariknya lagi, Skecth2Code gratis Loh! Skecth2code telah terhubung pada platform cloud Microsoft, Microsoft Azure, beserta layanan Web Azure Cloud AI. Sketch2Code memanfaatkan beberapa APIs yakni custom Vision APIs dan Computer Vision APIs untuk deteksi objek, OCR, dan deteksi tulisan tangan. Untuk menggunakan layanan keren ini, kita perlu mengunjungi web resmi Skecth2Code pada link ini. Selanjutnya kita perlu mengupload desain yang sebelumnya telah tergambar. Selain itu, kita juga dapat secara langsung mengambil gambar melalui kamera device dengan dengan tombol ‘ Take a Picture ‘. Pastikan garis, gambar, dan teks telah terlihat jelas ya. Proses selanjutnya adalah proses deteksi objek yang terdapat pada gambar. Hal ini dilakukan melalui Computer Vision. Beberapa saat kemudian website akan menampilkan cuplikan tampilan HTML dari gambar yang terdeteksi. Desain HTML akan berdampingan dengan gambar yang telah kita upload sebelumnya. Selanjutnya kita tinggal mengunduh kode HTML menggunakan tombol Download Your HTML Code. Kita akan mendapatkan file HTML dari desain yang kita unggah. Buka file dengan browser untuk melihat hasilnya. Tips:Untuk mendapatkan hasil yang maksimal, gunakan gambar latar berupa whiteboard yang bersih. Dengan demikian tidak akan ada objek-objek yang akan mengganggu proses identifikasi objek. Nah, itu lah sedikit pembahasan mengenai membuat membuat tampilan HTML tanpa kode. Ternyata bisa dong.
Tampilan website merupakan hal yang harus diperhatikan. Untuk mempercantik tampilan website, biasanya programmer akan menyematkan CSS dalam websitenya. Berbeda dengan jaman dulu, saat ini programmer sangat terbantu oleh adanya CSS Framework. Framework ini akan menyediakan berbagai komponen siap pakai bagi developer, seperti grid,UI patterns, web typography, tooltips, buttons, form elements, hingga icons. Elemen siap pakai ini akan memangkas waktu pengembangan, sekaligus me-responsive-kan website kita dalam berbagai device. Saat ini terdapat banyak pilihan framework CSS. TAS Official telah merangkumnya dalam 10 Framework CSS Terbaik di tahun 2020. Apa aja ya? Cekidot! 1. Bootsrap Bootstrap adalah framework CSS yang paling umum. Twitter mempopulerkan framework ini pada tahun 2011. Nah, ketika kita memasukkan bootstrap class ke website, maka framework ini akan otomatis meng-adjust tampilan web dalam berbagai ukuran layar. Bootstrap memiliki banyak plugin dan theme builder yang akan membuat pengembangan tampilan website kita menjadi lebih cepat. Versi terbaru Boostrap adalah Bootsrap 4. Bootsrap 4 mendukung fitur SAAS. Dengan demikian, Bootsrap dapat mendukung LESS maupun SAAS. Keren kan? Nah, untuk melihat dokumentasinya silahkan klik link ini. 2. Foundation Foundation adalah saingan berat bagi Boostrap. Framework foundation dikembangkan oleh lima perusahaan besar Facebook, Ebay, Mozilla, Adobe, dan bahkan Disney. Seperti Bootstrap, Foundation juga memiliki 12 grid yang mambuat halaman website respomsive untuk berbagai device. Foundation mengusung teknologi Saas seperti Bootstrap. Fitur paling keren dari foundation adalah Fastclick.js yang mempercepat proses rendering pada mobile device. Foundation bersifat open source. Dokumentasi lengkap Foundation dapat dilihat pada link ini. 3. Bulma Bulma adalah framework yang relatif baru. Framework ini juga bersifat open source loh. Bulma mengusung Flexbox Layout model. Flexbox Layout akan membuat tampilan yang konsisten pada berbagai ukuran layar yang berbeda. Uniknya, Bulma tidak memerlukan Javascript. Pengembangannya 100% CSS. Bulma mengusung pendekatan ‘mobile-first’. Framework ini bersifat ringan dan sangat responsive. Sampai saat ini ada lebih dari 200.000 developer yang menggunakan framework Bulma. Untuk mengunjungi website resmi Bulam, klik link ini. 4. Pure Pure adalah CSS Framework yang dikembangkan oleh Yahoo. Framework ini juga ringan dan responsive terhadap berbagai device. Pure dikembangkan berdasarkan normalize.css. Normalize.css terbagi atas modul-modul kecil. Dengan konsep ini, jika kita hanya memerlukan grid maka website hanya akan mengimport grid.css. Hal ini akan membuat website jauh lebih ringan dan waktu loading website akan berkurang. Hanya saja, pure tidak memungkinkan developer untuk membuat fixed layouts. Hmm, sayang banget ya. Nah, jika kalian ingin berkenalan lebih jauh dengan pure silahkan klik link ini ya. 5. Semantic UI Semantic UI adalah framework yang akan menjadi pesaing terberat Bootsrap. Benar saja, menurut Usablica, Semantic UI adalah framework CSS terbaik, sedangkan Bootsrap menempati posisi kedua. Semantic UI membuat kode CSS lebih manusiawi. Dengan semantic ui, kita bisa membuat tampilan website yang bagus dan unik tanpa banyak melakukan perubahan. Semanthic UI terkenal dengan thematic effect-nya yang simple dan elegan. Framework ini menawarkan lebih dari 3000+ Theming Variables and 50+ UI Components. Semanthic UI juag mendukung third party seperti React, Meteor, Ember, dan React. Tertarik ? 6. UI Kit Untuk tipe developer yang menyukai desain minimalis, UI kit adalah framework yang layak dicoba. UI kit membawa konsep super-clean, elegant, dan beautiful web interfaces tanpa harus membuang-buang memori device. UI kit juga dibekali dengan SVG icon, progress bars, image-maker, dan banyak fitur lain. Jangan khawatir, ternyata fitur-fitur ini juga costumizable. Selain itu, framework ini memungkinkan developer untuk menggunakan advance component seperti Nestable. Dengan UI kit, kita dapat membuat complex flexbox-based layouts hanya dengan menggunakan HTML. Wow! Website resmi UI Kit dapat dikunjungi ada pada link ini. 7. Materialize CSS Tidak mau kalah dengan situs besar lainnya, Pada tahun 2014 Google memperkenalkan framework CSSnya yang bernama Materialize CSS. Materialize CSS adalah framework CSS yang sangat recomended untuk pengembang Website atau Android web-apps. Materialize adalah framework CSS yang mendukung tampilan YouTube, Gmail, Google Drive, dan Google Docs. Framework ini menggunakan sistem 12-grid layout seperti Bootsrap, animation, transition, padding, dan advanced effect seperti lightning dan shadow. Materialize CSS memiliki fitur pre-built starter template yang akan menghemat pengembangan. Untuk mengunjungi website resmi Bulam, klik link ini. 8. Tailwind CSS Framework Tailwind adalah low-level framework yang fleksibel dan costumizable. Melalui TailwindCSS , kita tidak akan menemukan pra-desain komponen seperti button, card, alert, carousel atau yang lainnya. Pengaturan property CSS pada Tailwind CSS langsung melalui class-class kecil. Konsep ini disebut konsep utility-first framework. Framework ini baru muncul pada tahun 2017. Dengan Tailwind, kita bisa membuat komponen yang benar-benar berbeda dengan developer lain meskipun menggunakan framework yang sama. Website Tailwind dapat dilihat di sini. 9. Skeleton Seperti namanya, skeleton adalah framework CSS yang paling simple dan minimal. Skeleton hanya terdiri atas 400 baris kode loh! Meskipun begitu, pengembangnya membekali Skeleton dengan bermacam-macam fitur seperti grids, typography, buttons, forms, lists, media queries, hingga tabel. Skeleton mendukung 12 grid layout dengan ukuran maksimal 960px. Skeleton sangat cocok untuk UI/UX designer pemula. Meskipun hanya memiliki komponen-komponen basic HTML tapi sudah cukup kok untuk membuat suatu tampilan website yang bagus. Cek dokumentasi skeleton melalui link ini. 10. Miligram Framework terakhir adalah miligram. Faktanya, ukuran framework ini hanya 2 Kb saja. Miligram ini kecil-kecil cabe rawit. Meskipun ukurannya yang mini, nyatanya framework ini mendukung semua fitur yang ada pada CSS3 loh. Miligram adalah flexbox based. Dokumentasi lengkap miligram terdapat pada link ini Nah, itulah dia 10 Framework CSS Terbaik di Tahun 2020. Jadi kamu tim mana? Tuliskan jawabanmu pada kolom komentar ya!