Di Chrome Dev Summit 2014, ada banyak topik dan merek yang membahas API baru, tetapi tidak semuanya tentang yang baru dan menarik.
Jika Anda adalah Developer Web baru atau bahkan developer berpengalaman yang akan mulai mempelajari API baru, kemungkinan Anda akan mengikuti tiga langkah berikut: belajar, membangun, dan melakukan iterasi.
Matt Gaunt membahas upaya berkelanjutan dari tim Chrome Developer Platform untuk mengatasi masalah ini.
Mempelajari

Dasar-Dasar Web adalah sekumpulan dokumentasi yang dipicu kasus penggunaan, yang mencakup berbagai topik. Sasaran intinya adalah memberi developer sedikit atau tanpa pengetahuan sama sekali, untuk menerapkan praktik terbaik secepat mungkin.
Salah satu tujuan utama Dasar-Dasar Web adalah untuk memastikan bahwa jika Anda baru mengenal suatu topik, 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 Anda ingin Dasar-Dasar Web membahas topik tertentu, beri tahu kami dengan mengirimkan masukan di GitHub.
Membangun

Untuk membantu Anda memulai project web baru, kami telah membuat Web Starter Kit. Ini memiliki semua yang Anda butuhkan:
- Proses build yang solid
- HTML boilerplate
- Panduan gaya
Proses Build
Bagi Anda yang baru mengenal proses build, cara termudah untuk membayangkan proses build adalah dengan melihatnya sebagai program yang mengambil kumpulan file dan melakukan tugas tertentu padanya serta menghasilkan versi baru di lokasi yang berbeda. Tugas tersebut mengoptimalkan file untuk mempercepat waktu pemuatan, memeriksa kemungkinan error, atau menangani tugas yang dapat diotomatiskan.
Di Web Starter Kit, kami memiliki proses berikut:

Kami meminifikasi dan menggabungkan CSS dan JavaScript sehingga browser dapat mengambil file dengan cepat. JavaScript juga akan dijalankan melalui JSHint untuk memeriksa praktik terbaik JavaScript dan kesalahan umum coding. Gambar diminifikasi dengan imagemin dan Anda bisa mendapatkan pengurangan ukuran file yang besar dengan menggunakan ini. Kami juga memiliki proses untuk membuat CSS styleguides.
Boilerplate untuk HTML Multi-Perangkat
Set HTML pertama yang Anda tulis untuk halaman baru sangatlah standar dan mungkin Anda akan memiliki cara cepat untuk menyimpan file HTML stok yang berfungsi dengan baik di berbagai perangkat dan ukuran layar.
Di Web Starter Kit, kami ingin menambahkan dukungan untuk semua fitur yang memburamkan batas antara platform dan situs Anda, jadi kami telah menambahkan dukungan untuk add to home screen dan layar pembuka untuk Android, Windows Phone, iOS, dan Opera Coast.

Panduan gaya

Bagian terakhir dari Web Starter Kit adalah Styleguide.
Hal ini akan memberi project baru Anda sekumpulan gaya dan komponen default yang bagus, yang mendorong pengembangan berbasis gaya. Anda dapat mengubah gaya yang ada ke elemen dan menambahkan gaya Anda sendiri.
Pada WSK versi berikutnya, yang akan dirilis awal tahun depan, kami berupaya keras untuk menyederhanakan cara memadukan panduan gaya serta beralih ke tampilan dan nuansa desain material. Mattmenunjukkantiruan awal tentang tampilannya di Chrome Dev Summit dan Anda dapat melihat contohnya di bawah.

Terus lakukan peningkatan
Setelah mulai mempraktikkan pengetahuan baru Anda, sebaiknya gunakan DevTools untuk men-debug, meningkatkan kualitas, dan mempertahankan pekerjaan Anda.
Ada beberapa fitur baru yang sangat besar yang akan hadir di DevTools dan Matt mempelajari fitur-fitur baru berikut ini.
Mode Perangkat
Mode perangkat adalah bagian baru di DevTools yang memungkinkan Anda melihat dengan cepat cara kerja situs di berbagai perangkat seluler, sambil melihat kueri media di CSS.

Salah satu fitur hebat Mode Perangkat adalah kemampuan untuk men-throttle kecepatan jaringan, sehingga Anda dapat menyimulasikan pengalaman pengguna di koneksi GPRS, EDGE, 3G, DSL, atau Wi-Fi.

Paint Profiler
Jika Anda pernah membuka tab linimasa dan menekan tombol rekam, Anda mungkin pernah melihat beberapa peristiwa paint terjadi di waterfall. Biasanya, ini akan berupa kotak hitam yang tidak dapat Anda gunakan untuk mengetahui alasan browser melakukannya, atau apa yang dilakukannya.
Paint profiler no memberi Anda informasi lebih lanjut tentang apa yang sebenarnya dilakukan browser selama proses menggambar tersebut.

Pelacakan Pembatalan
DevTools kini memberikan alasan mengapa paint atau tata letak terjadi kapan pun bisa. 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 sangat memudahkan Anda untuk melihat bagaimana tugas tumpang tindih dan perilaku browser apa yang terjadi sebagai akibat dari tugas lain.

Penampil Frame
Saat berada dalam tampilan Flame Chart, Anda dapat memilih frame tertentu dan di dalamnya, Anda akan dapat mengeksplorasi elemen mana di halaman yang telah dipromosikan menjadi lapisan komposit serta mengapa mereka dipromosikan.

Pelajari. semua ditangani oleh Cloud Build. Terus lakukan peningkatan
Ini adalah beberapa upaya dari tim Chrome untuk membantu developer memahami pengembangan web dengan cepat, jadi pastikan untuk melihat Dasar-Dasar Web, Web Starter Kit, dan fitur baru di Chrome DevTools.