Isi
- 01. Mercusuar
- 02. Polimer
- 03. Penjelajah API
- 04. Flutter
- 05. Google GitHub
- 06. Dalang
- 07. Kotak Kerja
- 08. Codelabs
- 09. Alat Warna
- 10. Desain Sprint
- 11. Buku Panduan Orang + AI
- 12. Asisten Google
- 13. Wawasan PageSpeed
- 14. AMP di Google
- 15. Google DevTools
- 16. Desain Material
Bekerja di web biasanya berarti Anda akan bekerja dengan Google dalam beberapa bentuk atau bentuk. Dan mengingat Google Chrome adalah yang terdepan dalam persaingan, perancang dan pengembang perlu memikirkan tentang bagaimana proyek mereka akan bekerja dengan peramban. Bagaimana tampilannya? Teknologi apa yang didukungnya, seberapa aman dan bagaimana kinerjanya?
Untungnya, Chrome menyediakan alat untuk memastikan situs atau aplikasi apa pun menjadi yang terbaik. DevTools memungkinkan perancang dan pengembang untuk mendapatkan wawasan tentang laman web: Anda dapat memanipulasi DOM, memeriksa CSS, bereksperimen pada desain dengan pengeditan langsung, men-debug JavaScript, dan memeriksa kinerja. (Lihat selengkapnya tentang cara menggunakan alat web Google di sini, dan jika Anda memulai dari awal, lihat juga daftar pembuat web teratas kami).
Tapi Google menawarkan lebih dari sekedar browser. Ini memiliki alat dan sumber daya untuk membantu hampir setiap aspek kehidupan desain dan pengembangan Anda. Ingin tahu cara meningkatkan kinerja? Lighthouse ada di sini untuk membantu. Ingin membangun situs seluler yang berkinerja lebih baik? Lalu ucapkan halo ke AMP. Apakah Anda ingin membangun PWA yang indah? Kemudian Flutter, Desain Material, dan Kotak Kerja siap untuk digunakan.
Keindahan menggunakan alat, sumber daya, pustaka, dan kerangka kerja Google adalah Anda tahu bahwa semua itu akan bekerja dengan baik dengan peramban Chrome - peramban paling populer di planet ini. Untuk alat lainnya, lihat kumpulan alat desain web kami.
01. Mercusuar
Performa adalah faktor kunci dalam kesuksesan sebuah situs dan Lighthouse adalah alat Google untuk meningkatkan kualitas halaman web (layanan hosting web yang tepat juga akan membantu). Jadi, bagaimana Anda menggunakan Lighthouse dan apa fungsinya? Dalam bentuknya yang paling sederhana, Anda dapat menjalankan Lighthouse dari tab Audit dan memilih dari pilihan opsi termasuk desktop atau seluler, selain kotak centang untuk kinerja, aksesibilitas, dan SEO, untuk menghasilkan laporan akhir dengan peningkatan yang disarankan.
02. Polimer
Polymer terkenal karena karyanya dengan komponen web tetapi proyek tersebut sekarang telah memperluas repertoarnya untuk merangkul koleksi perpustakaan, alat, dan standar. Apa saja yang termasuk? LitElement adalah editor yang memudahkan untuk mendefinisikan komponen web, sedangkan lit-html adalah pustaka template HTML yang memungkinkan pengguna untuk menulis template HTML generasi berikutnya di JS. Selain itu, Anda juga akan menemukan PWA Starter kit, pustaka Polymer asli, dan kumpulan komponen web.
03. Penjelajah API
Google memiliki perpustakaan API yang luas yang tersedia untuk pengembang tetapi menemukan apa yang Anda butuhkan bukanlah tugas yang mudah. Di sinilah Penjelajah API Google turun tangan untuk menawarkan bantuan. Ada daftar panjang yang dapat digulir, tetapi untuk akses yang lebih cepat, ada kotak pencarian untuk memfilter daftar API. Setiap entri tertaut ke halaman referensi dengan detail lebih lanjut tentang cara menggunakan API.
04. Flutter
Jika Anda ingin membuat aplikasi yang bagus untuk seluler, web, dan desktop dari satu basis kode, Flutter cocok untuk Anda. Situs ini adalah referensi lengkap untuk bekerja dan membangun dengan Flutter. Belum tahu apa yang harus dilakukan? Dokumen membawa pengguna dari instalasi hingga pembuatan, dibantu oleh banyak contoh dan tutorial.
05. Google GitHub
Seperti yang diketahui kebanyakan orang, GitHub adalah platform / repositori hosting untuk menyimpan dan berbagi kode dan file. Dan dengan senang hati Google memiliki tempatnya sendiri di platform dengan lebih dari 260 repositori untuk disaring. Gunakan filter untuk mempersingkat waktu pencarian Anda dan lebih dekat dengan repositori yang ingin Anda mainkan atau kontribusikan.
06. Dalang
Built in Node, Puppeteer menawarkan API tingkat tinggi yang memungkinkan Anda mengakses Chrome headless - secara efektif Chrome tanpa UI, yang kemudian dapat dikontrol oleh pengembang melalui baris perintah. Jadi apa yang dapat Anda lakukan dengan Dalang? Beberapa opsi tersedia untuk menghasilkan tangkapan layar dan PDF halaman, mengotomatiskan pengiriman formulir, dan membuat lingkungan pengujian otomatis.
07. Kotak Kerja
Jika Anda ingin membuat PWA, ini adalah titik awal yang bagus. Workbox menyediakan kumpulan pustaka JavaScript untuk menambahkan dukungan offline ke aplikasi web. Pilihan panduan mendalam menunjukkan cara membuat dan mendaftarkan file pekerja layanan, merutekan permintaan, menggunakan plugin, dan menggunakan bundler dengan Workbox. Dan ada juga sekumpulan contoh strategi caching untuk diperiksa.
08. Codelabs
Butuh panduan praktis untuk produk Google? Codelabs memberikan "pengalaman coding yang dipandu, tutorial, dan langsung". Situs ini dipecah dengan rapi ke dalam kategori dan acara, membuatnya cepat dan mudah untuk menemukan apa yang Anda inginkan. Ini mencakup Analytics, Android, Assistant, augmented reality, Flutter, G Suite, Search, TensorFlow, dan virtual reality. Pilih salah satu opsi dan dapatkan kode serta petunjuk yang Anda perlukan untuk membangun aplikasi kecil.
09. Alat Warna
Color Tool adalah alat langsung yang memungkinkan Anda membuat, berbagi, dan menerapkan palet selain memeriksa aksesibilitas. Pengguna dapat memilih palet standar dari palet Material. Cukup pilih warna lalu terapkan ke skema warna primer, alihkan ke opsi sekunder dan pilih lagi. Terakhir, pilih warna teks untuk kedua skema. Atau, alihkan ke Kustom untuk memilih warna Anda. Kemudian beralih ke Aksesibilitas untuk memeriksa semuanya baik-baik saja sebelumnya, akhirnya, mengekspor palet.
10. Desain Sprint
Design Sprint Kit diperuntukkan bagi mereka yang sedang mempelajari cara berpartisipasi atau menjalankan sprint desain. Tampaknya mencakup semua basis pengetahuan, dari pemula hingga fasilitator sprint berpengalaman. Pelajari tentang metodologi atau lompat langsung ke tahap perencanaan, termasuk menulis brief, mengumpulkan data dan penelitian, serta apa yang harus dilakukan pasca-sprint. Juga menyertakan sejumlah sumber daya seperti alat, template, resep, dan opsi untuk mengirimkan metode Anda sendiri. Selain itu, Anda mungkin memerlukan tempat untuk menyimpan dan berbagi sumber daya, jadi pastikan pilihan penyimpanan cloud Anda tepat.
11. Buku Panduan Orang + AI
Panduan ini adalah hasil dari inisiatif People + AI Research di Google dan menawarkan bantuan kepada mereka yang ingin membuat produk AI yang berpusat pada manusia. Buku panduan komprehensif ini dibagi menjadi enam bab yang mencakup kebutuhan pengguna, pengumpulan dan evaluasi data, model mental, kepercayaan, umpan balik, dan kegagalan yang anggun. Setiap bab disertai dengan latihan, lembar kerja serta alat dan sumber daya yang dibutuhkan untuk mewujudkannya.
12. Asisten Google
Ini adalah platform pengembang Asisten Google, menawarkan panduan tentang cara mengintegrasikan konten dan layanan Anda dengan Asisten Google. Ini menunjukkan kepada Anda cara memperluas aplikasi seluler Anda, menyajikan konten dengan cara yang kaya untuk Penelusuran dan Asisten, mengontrol lampu, mesin kopi, dan perangkat lain di sekitar rumah dan membangun pengalaman suara dan visual untuk speaker, layar, dan ponsel cerdas.
13. Wawasan PageSpeed
PageSpeed Insights menganalisis konten web dan kemudian menawarkan saran tentang cara membuatnya dimuat lebih cepat. Cukup tambahkan URL, tekan tombol Analisis dan tunggu keajaiban terjadi. Periksa Dokumen untuk mendapatkan pemahaman yang lebih baik tentang cara kerja API PageSpeed dan cara mulai menggunakannya.
14. AMP di Google
AMP adalah alat Google untuk membuat halaman seluler yang memuat cepat yang (semoga) akan mendapatkan peringkat teratas pencarian. Pelajari cara membuat situs cepat yang mengutamakan pengguna, mengintegrasikan AMP di seluruh produk Google, menggunakan Cache AMP Google untuk membuat halaman AMP lebih cepat, dan memonetisasi halaman AMP dengan produk Google lainnya.
15. Google DevTools
Setiap perancang dan pengembang tahu (atau setidaknya harus tahu) bahwa Chrome hadir dengan seperangkat alat yang dibangun langsung ke dalam peramban. DevTools Chrome ideal untuk memeriksa elemen yang membentuk halaman, memeriksa CSS, mengedit halaman dengan cepat, dan banyak lagi.
Tab Elemen adalah pengantar DevTools. Ini menampilkan kode HTML yang membentuk halaman yang dipilih. Dapatkan wawasan tentang properti setiap div atau tag dari halaman yang dipilih dan mulai pengeditan langsung. Ini sempurna untuk bereksperimen dengan desain. Periksa Tata Letak - apakah Anda menggunakan Flexbox atau Grid - dan lihat font terkait dengan contoh dan periksa animasi.
Di tempat lain, Anda dapat melihat dan mengubah CSS. Tab Gaya pada panel Elemen mencantumkan aturan CSS yang diterapkan ke elemen yang saat ini dipilih di Pohon DOM. Aktifkan dan nonaktifkan properti (atau tambahkan nilai baru) untuk bereksperimen dengan desain. Ini adalah alat yang sempurna untuk memastikan bahwa semuanya bekerja seperti yang diharapkan sebelum menerapkan perubahan apa pun pada desain langsung.
Anda juga dapat men-debug JavaScript, mengoptimalkan kecepatan situs web, dan memeriksa kecepatan jaringan. Berikut tip cepat yang dapat Anda gunakan untuk segera mempercepat alur kerja Anda. Buka tab Sumber, klik Cuplikan Baru dan tambahkan kode yang sering digunakan. Beri nama cuplikan kode tersebut dan simpan. Ulangi sesuai kebutuhan. Sekarang Anda dapat mengambil cuplikan kode ini alih-alih menulisnya lagi.
Seperti setiap browser yang bagus, Chrome terus berkembang dan setiap rilis baru menghadirkan fitur baru. Cari tahu apa yang terjadi di platform status Chrome
16. Desain Material
Pengembangan dapat dilihat sebagai anak favorit Google, tetapi, apa pun yang Anda buat, buat, atau bangun, pengembangan harus terlihat bagus dan memberikan pengalaman kepada pengguna yang membuat mereka ingin menggunakannya. Material adalah tambahan yang lebih baru untuk Google stable tetapi merupakan sistem desain yang telah menjadi bagian penting dari kit desain.
Seperti halnya sistem desain yang bagus, ia memiliki seperangkat pedomannya sendiri, yang perlu Anda perhatikan sebelum melangkah ke hal-hal yang lebih menarik. Dapatkan gambaran umum tentang cara menggunakan elemen yang berbeda, apa itu tema Material, cara menerapkan tema dan panduan kegunaan termasuk aksesibilitas. Di tempat lain, ada wawasan tentang Material Foundation, yang mencakup bidang utama desain seperti tata letak, navigasi, warna, tipografi, suara, ikonografi, gerakan, dan interaksi. Setiap kategori mengungkapkan dos dan tidak boleh dilakukan dan di mana Anda harus mempertimbangkan kehati-hatian. Untuk memberikan gambaran tentang apa yang diharapkan, kategori Tata Letak menawarkan bagian tentang pemahaman tata letak, kerapatan piksel, cara bekerja dengan tata letak responsif termasuk kolom, talang dan margin, titik putus, wilayah UI, dan metode penspasian.
Di luar bagian Desain adalah Komponen, yang menyediakan blok bangunan fisik yang diperlukan untuk membuat desain. Apa yang termasuk di sini? Tombol, spanduk, kartu, dialog, pemisah, daftar, menu, indikator kemajuan, penggeser, bilah makanan (ini adalah pesan singkat tentang proses aplikasi di bagian bawah layar), tab, bidang teks, dan keterangan alat. Tidak diragukan lagi koleksi komponen yang lengkap.
Dan pengembang tidak pernah dilupakan, dengan detail dan tutorial tentang cara membangun untuk berbagai platform - Android, iOS, Web, dan Flutter. Dan, akhirnya, ada halaman yang didedikasikan untuk sejumlah sumber daya untuk membantu mewujudkan desain yang Anda pilih.
Artikel ini pertama kali tayang di majalah net. Beli edisi 326.
