Di Chrome Dev Summit 2014, ada banyak topik dan API baru yang dibahas, tetapi tidak semuanya tentang hal baru dan menarik.
Jika Anda adalah Developer Web baru atau bahkan developer berpengalaman yang akan mulai menjelajahi API baru, kemungkinan besar Anda akan mengikuti tiga langkah berikut: belajar, membuat, dan melakukan iterasi.
Matt Gaunt membahas upaya berkelanjutan untuk mengatasi masalah ini dari tim Platform Developer Chrome.
Pelajari
Dasar-Dasar Web adalah kumpulan dokumentasi yang dipimpin kasus penggunaan yang mencakup berbagai topik. Tujuan utamanya adalah membuat developer yang memiliki sedikit atau tidak memiliki pengetahuan sama sekali, dapat menerapkan praktik terbaik sesegera mungkin.
Salah satu sasaran utama Dasar-Dasar Web adalah memastikan bahwa jika Anda baru mengenal topik tertentu, panduan ini akan mengurangi "kelumpuhan pilihan" sebanyak mungkin. Addy Osmani membahasnya dengan sempurna di Pastry Box.
Jika Anda menemukan masalah pada situs atau kontennya, atau ingin Dasar-Dasar Web membahas topik tertentu, beri tahu kami dengan mengirimkan masukan di GitHub.
Build
Untuk membantu Anda memulai project web baru, kami membuat Kit Memulai Web. Aplikasi ini memiliki semua yang Anda butuhkan:
- Proses build yang solid
- HTML Boilerplate
- Styleguide
Proses Build
Bagi Anda yang baru mengenal proses build, cara termudah untuk memikirkan proses build adalah dengan melihatnya sebagai program yang mengambil kumpulan file dan melakukan tugas tertentu pada file tersebut serta menghasilkan versi baru di lokasi yang berbeda. Tugas ini mengoptimalkan file untuk meningkatkan waktu pemuatan, memeriksa kemungkinan error, atau menangani tugas yang dapat diotomatiskan.
Di Web Starter Kit, kita memiliki proses berikut:
Kami melakukan minifikasi dan penggabungan CSS dan JavaScript sehingga browser dapat mengambil file dengan cepat. JavaScript juga dijalankan melalui JSHint untuk memeriksa praktik terbaik JavaScript dan kesalahan coding umum. Gambar diminifikasi dengan imagemin dan Anda bisa mendapatkan pengurangan ukuran file yang besar dengan menggunakannya. Kami juga memiliki proses untuk membuat CSS panduan gaya.
Boilerplate untuk HTML Multiperangkat
Kumpulan HTML pertama yang Anda tulis untuk halaman baru cukup standar dan kemungkinan besar Anda akan memiliki beberapa cara untuk mendapatkan file HTML stok dengan cepat yang berfungsi dengan baik di beberapa perangkat dan ukuran layar.
Di Web Starter Kit, kami ingin menambahkan dukungan untuk fitur apa pun yang mengaburkan batas antara platform dan situs Anda, sehingga kami telah menambahkan dukungan untuk tambahkan ke layar utama dan layar pembuka untuk Android, Windows Phone, iOS, dan Opera Coast.
Styleguide
Bagian terakhir dari Web Starter Kit adalah Panduan Gaya.
Hal ini memberi project baru kumpulan gaya dan komponen default yang bagus yang mendorong pengembangan berbasis gaya. Anda dapat mengubah gaya yang ada ke elemen dan menambahkan gaya Anda sendiri.
Dalam versi WSK berikutnya, yang akan dirilis awal tahun depan, kami berupaya keras untuk menyederhanakan cara panduan gaya digabungkan dan beralih ke tampilan dan nuansa desain material. Mattmenunjukkantiruan awal tampilannya di Chrome Dev Summit dan Anda dapat melihat contohnya di bawah.
Ulangi
Setelah mulai mempraktikkan pengetahuan baru, Anda dapat menggunakan DevTools untuk men-debug, meningkatkan, dan mempertahankan pekerjaan Anda.
Ada beberapa fitur baru besar yang hadir di DevTools dan Matt akan membahas fitur baru berikut.
Mode Perangkat
Mode perangkat adalah bagian baru di DevTools yang memungkinkan Anda melihat dengan cepat cara kerja situs di berbagai perangkat seluler, sekaligus melihat kueri media di CSS.
Salah satu fitur hebat dari Mode Perangkat adalah kemampuan untuk membatasi kecepatan jaringan, sehingga Anda dapat menyimulasikan pengalaman pengguna pada koneksi GPRS, EDGE, 3G, DSL, atau Wi-Fi.
Paint Profiler
Jika pernah membuka tab linimasa dan menekan tombol rekam, Anda mungkin telah melihat beberapa peristiwa gambar terjadi di waterfall. Biasanya ini akan menjadi kotak hitam tanpa cara bagi Anda untuk mengetahui alasan browser melakukannya, atau apa yang dilakukannya.
Paint profiler tidak memberi Anda informasi lebih lanjut tentang apa yang sebenarnya dilakukan browser selama proses tersebut.
Pelacakan Pembatalan Validasi
DevTools kini memberikan alasan mengapa proses rendering atau tata letak terjadi setiap kali memungkinkan. Hal ini berguna bagi siapa saja yang mempelajari linimasa, perilaku browser, dan memungkinkan Anda mengoptimalkan kode untuk mencegah masalah performa.
Tampilan Flame Chart
Ini adalah cara yang sangat berbeda untuk melihat informasi yang tersedia di linimasa. Hal ini akan mempermudah Anda melihat bagaimana tugas tumpang-tindih dan perilaku browser yang terjadi sebagai akibat dari tugas lain.
Frame Viewer
Saat berada dalam tampilan Flame Chart, Anda dapat memilih frame tertentu dan dalam hal ini, Anda akan dapat menjelajahi elemen mana di halaman yang telah dipromosikan ke lapisan komposit serta alasan elemen tersebut dipromosikan.
Pelajari. semua ditangani oleh Cloud Build. Ulangi
Berikut adalah beberapa upaya dari tim Chrome untuk membantu developer lebih memahami pengembangan web. Jadi, pastikan untuk melihat Dasar-Dasar Web, Kit Awal Web, dan fitur baru di Chrome DevTools.