Extending CSS with Houdini Google Chrome Developers English Indonesian

Extending CSS with HoudiniYouTube↗ IA↗(long shot)
Science & Technology 25.5K views 841 likes 14 dislikes 17 Dec 2020

Chrome for Developers 814K subscribers N/A YouTube↗

Click to Play Video

- Hi, I'm Una Kravets, a developer advocate

Hai, saya Una Kravets, seorang advokat developer

on the Chrome team, focusing on CSS and dev tools.

di tim Chrome, yang fokus pada CSS dan alat pengembang.

I’m really excited to chat with you today

Saya sangat senang bisa berbicara dengan Anda hari ini

about what many regard as the future of web styling.

tentang apa yang dianggap banyak orang sebagai masa depan gaya web.

Houdini is an umbrella term that describes a series

Houdini adalah istilah umum yang menggambarkan sebuah rangkaian

of low level browser APIs, which make it easier for authors

API browser tingkat rendah, yang memudahkan penulis

to access and extend CSS by hooking into the styling

untuk mengakses dan memperluas CSS dengan mengikuti gaya

and layout process of the browser's rendering engine.

maupun proses tata letak mesin rendering browser.

This means that developers now have much more control

Ini berarti bahwa kini para developer lebih memegang kendali

and power over the styles they write.

serta kuasa atas gaya penulisan mereka.

For example, instead of waiting for a browser to implement

Misalnya, daripada menunggu browser menerapkan

an angled borders feature,

fitur batas miring,

you can write your own Paint worklet,

Anda bisa merancang Paint worklet sendiri,

apply it to both borders and clipping

memasangkannya pada batasan dan pemotongan

and get an effect just as you would

untuk memperoleh efek seperti yang Anda inginkan

with a rounded border radius.

dengan menggunakan radius batas bulat.

Instead of waiting for a browser to implement Masonry,

Daripada menunggu browser mengimplementasikan<i> </i>Masonry,

you could implement a layout worklet

Anda dapat menerapkan worklet tata letak

to imitate this browser-based implementation

agar menyerupai implementasi berbasis browser ini

or you can use an existing one.

atau Anda bisa menggunakan yang sudah ada.

And beyond worklets,

Selain worklet,

Houdini enables more semantic CSS

Houdini memungkinkan lebih banyak CSS semantik

for the typed object model and enables developers

untuk model objek khusus dan memungkinkan para developer

to define advanced CSS custom properties

menentukan properti kustom CSS lanjutan

with syntax, default values and inheritance

dengan sintaksis, nilai default<i>,</i> dan inheritance

through the properties and values API.

melalui properti dan API nilai.

Today, I'm going to be focusing on the CSS Paints API,

Hari ini, saya akan fokus pada CSS Paint API,

which is supporting all chromium-based browsers,

yang mendukung semua browser berbasis chromium,

is partially supported in Safari

yang sebagian didukung di Safari

and is under consideration for Firefox.

juga dalam proses pertimbangan untuk Firefox.

However, don't let this native support discourage you

Akan tetapi, jangan sampai dukungan native ini menghambat Anda

because with the CSS Paint Polyfill created

karena dengan dibuatnya CSS Paint Polyfill

by my teammate, Jason Miller, you can still get creative

oleh rekan setim saya, Jason Miller, Anda tetap bisa menjadi kreatif

with the Houdini Paints API

dengan Houdini Paint API

and see your styles work across all modern browsers.

serta melihat gaya Anda berfungsi di semua browser modern.

So let's focus on the CSS Paints API today.

Jadi mari kita fokus pada CSS Paint API untuk hari ini.

This API enables developers

API memungkinkan pengembang

to define canvas-like custom painting functions

menentukan fungsi lukisan kustom layaknya kanvas

that can be used directly in CSS as backgrounds

yang dapat digunakan langsung di CSS sebagai latar belakang,

borders, masks and more.

pembatas, penyamaran, dan masih banyak lagi.

In the angled corners example I just showed,

Dalam contoh sudut miring yang baru saja saya tunjukkan,

it's being used as both a mask and a border

itu digunakan sebagai penyamar sekaligus pembatas

to draw the border as a border image and mask the element

untuk menggambar batas sebagai gambar perbatasan dan menyamarkan elemen

to prevent click interaction effect overflow.

untuk mencegah agar efek interaksi klik tidak meluap.

There is a whole world of possibilities

Ada begitu banyak kemungkinan

for how you can use CSS paint in your own user interfaces.

tentang cara menggunakan CSS paint pada antarmuka pengguna Anda sendiri.

To make working with a Paint API

Agar pengerjaan dengan Paint API dan

and other Houdini worklets a little easier

beban kerja Houdini lain lebih ringan

to explore and consume, my team puts together

untuk dijelajahi dan digunakan, tim saya mengumpulkan

a resource called houdini.how.

resource yang disebut houdini.how.

It's your all-in-one go-to

Ini adalah kumpulan data lengkap

for CSS Houdini worklets and information.

tentang beban kerja dan informasi CSS Houdini.

A congregate library and a reference.

Kumpulan library, dan referensi.

Let's check it out.

Mari kita lihat.

You can learn all about CSS Houdini itself

Anda dapat mempelajari semua tentang CSS Houdini itu sendiri

with links to further reading on the about page.

dengan link untuk membaca lebih lanjut di halaman info.

Here, we list all the Houdini APIs

Di sini, kami mencantumkan semua API Houdini

with some really great links for further reading

dengan beberapa link bagus untuk bacaan lebih lanjut

and if you're interested in exploring

jika Anda tertarik untuk menjelajah

these a little bit more.

lebih jauh tentang ini.

There's also this link from is Houdini ready yet?

Ada pula link dari is Houdini ready yet?

where we have a list of all of the browsers,

di mana kami menyimpan daftar semua browser,

the W3C Spec, and links to both the spec drafts,

spesifikasi W3C, dan link menuju draf spesifikasi,

recommendations, for Paint API, for example,

rekomendasi, untuk Paint API, misalnya,

it is in candidate recommendation state

yang masih berstatus direkomendasikan,

and also the level of support and whether

juga tingkat dukungan, dan apakah

it’s in development, under consideration,

sedang dalam pengembangan, sedang dipertimbangkan,

whatever's going on with Houdini,

atau apa pun tentang Houdini,

this is a great place to check that out

ini tempat yang bagus untuk memeriksanya

and get that information.

dan untuk mendapatkan informasi itu.

On the worklets page,

Di halaman beban kerja,

you can browse various Paint worklets and play around

Anda dapat menjelajahi berbagai Paint worklet dan mencoba-coba

with different values to make sure they fit into your brand.

memakai nilai berbeda untuk memastikan kesesuaiannya dengan merek Anda.

So here is just an inspiration page

Jadi ini hanya sekedar halaman inspirasi

where you can see some of the possibilities here.

di mana Anda dapat melihat beberapa kemungkinan yang ada.

Using it as a border, using it as a background,

Memakainya sebagai pembatas, memakainya sebagai latar belakang,

you can make some really cute little confetti

Anda bisa membuat konfeti lucu berukuran kecil

or you could make it really big,

atau Anda bisa membuat ukuran yang sangat besar,

this is just another example of how I can use it.

ini hanya contoh lain tentang cara penggunaannya.

Why have one underlined when you could have many underlined?

Mengapa hanya satu garis bawah jika bisa membuat lebih banyak?

So this is an example called extra underline.

Jadi ini adalah contoh yang disebut dengan garis bawah ekstra.

You could change the width, the spread, again the color.

Anda bisa mengubah lebar, sebaran, dan juga warnanya.

There's an example of reverse border radius

Ada contoh radius batas terbalik

where instead of the border radius coming

di mana radius perbatasan bukan ditarik

from the inside out, it's doing the opposite.

dari dalam ke luar, tapi justru sebaliknya.

It's creating this clip, which I think is cool

Hal itu membuat potongan ini, yang menurut saya keren

'cause it reminds me of vintage stamps or tickets.

karena itu mengingatkan saya pada prangko atau tiket vintage.

So I think that one's neat,

Karenanya saya merasa itu bagus,

there's also this powdered gradient,

ada juga gradien bubuk,

you could change the direction, the color,

Anda bisa mengubah arah, warna,

you could really play around with it.

benar-benar mengutak-atiknya.

I like it in white because it's kind of festive.

Saya suka warna putih karena berkesan meriah.

There's also the sparkles example.

Tersedia juga contoh kilauan.

You could change the number of sparkles,

Anda bisa mengubah jumlah kilauan,

the hue so you could have sparkles of every color.

rona warnanya sehingga Anda bisa mendapat kilauan dari setiap warna.

The height and width of the sparkles,

Tinggi dan lebar kilauan,

that's changing the size and the weight.

yang mengubah ukuran dan berat.

So you can start to really play around with these sparkles.

Jadi Anda bisa mulai mengutak-atik kilaunya.

There’s also that angled corners example.

Ada juga contoh berbentuk sudut miring.

So here you could make all these corners different sizes

Di sini Anda bisa membuat semua sudut dengan ukuran berbeda-beda

and start to explore what that might look like

lalu mulai perhatikan seperti apa bentuknya

and change the weight of this as well.

dan ubah ukuran beratnya juga.

There's the static gradient and I think this is really fun

Ada gradien statis, dan menurut saya ini sangat menarik

because the more you increase the gradient size,

karena semakin Anda meningkatkan ukuran gradien,

the more you're sort of pixelating it.

Anda akan semakin memecah pikselnya.

And it reminds me sort of a little roaring fire,

Hal itu mengingatkan saya pada api kecil yang berkobar,

especially as it's re-rendering and animating

terutama karena tampilannya dirender dan dianimasikan ulang

with this randomized function.

dengan adanya fungsi acak ini.

So I think that these are pretty neat.

Jadi menurut saya ini cukup keren.

As I mentioned earlier, despite native implementation,

Seperti yang saya sebutkan sebelumnya, meskipun penerapannya asli,

these all work cross-browsers,

semua bisa digunakan di browser mana pun,

things that Houdini Paint Polyfill, so have no fear

semua ditunjang oleh Houdini Paint Polyfill, jadi jangan khawatir

and feel free to get creative with CSS Houdini.

dan jangan ragu untuk berkreasi dengan CSS Houdini.

And when you found the right worklets

Lalu ketika Anda menemukan worklet tepat

that you want to use or expand upon in your own applications,

yang ingin Anda gunakan atau kembangkan dalam aplikasi Anda sendiri,

there's a few ways that you can use it

ada beberapa cara untuk menggunakannya

and implement it into your build system.

dan menerapkannya dalam sistem build Anda.

So the usage page here will show you how.

Jadi halaman penggunaan di sini akan menunjukkan caranya.

To quickly get started with a prototype,

Untuk segera memulai dengan prototipe,

we recommend using unpkg.

kami merekomendasikan untuk memakai unpkg.

So just calling it the paint worklet directly

Jadi sebut saja ini sebagai paint worklet

and registering it to your application,

lalu daftarkan ke aplikasi Anda,

but when you're using it in production environments

tetapi saat Anda menggunakannya di lingkungan produksi

you’ll likely want to manage the worklet

Anda mungkin ingin mengelola beban kerja

in your file system.

dalam sistem file Anda.

Here, we have just in a CodePen this example

Di sini, kita baru saja memasukkan dalam CodePen, contoh ini

with the confetti worklet.

dengan worklet konfeti.

This is called extra confetti.

Ini disebut konfeti ekstra.

What I'm doing is I'm directly adding it

Yang saya lakukan adalah langsung menambahkannya

to my system with CSS.paintwork.admodule.

ke sistem saya menggunakan CSS.paintwork.admodule.

And I'm getting this CDN link.

Kemudian saya mendapatkan link CDN ini.

I'm also including the Polyfill script

Saya juga menyertakan skrip Polyfill

and I'm using unpkg to manage that as well.

dan menggunakan unpkg untuk mengelolanya.

This is just a really quick way to get started.

Ini adalah cara yang sangat cepat untuk memulai.

And the way that you get that link is if you go

Cara mendapatkan link itu adalah jika Anda membuka

to the worklets page, this right here, the CDN link,

halaman beban kerja, di sini, link CDN ini,

you could just copy link address and there you'll have it.

Anda cukup menyalin alamat link maka Anda akan langsung mendapatkannya.

So let's go back to this example,

Mari kembali ke contoh ini,

from there we can then update the CSS.

dari sana kita dapat memperbarui CSS.

So here we have a few of the values.

Maka di sini kita dapatkan beberapa nilai.

They will have fallbacks and defaults,

Mereka akan mengalami penggantian dan default,

but you can update them to make sure

tapi Anda bisa memperbaruinya untuk memastikan

that they look like you want them to

bahwa tampilannya sesuai keinginan Anda

and you could really start to play around here.

dan Anda benar-benar bisa mulai berkreasi di sini.

Now, another thing that you can do is animate this stuff.

Sekarang, hal lain yang bisa dilakukan adalah menganimasikannya.

So here is just an example of a keyframe animation in CSS.

Ini hanya sebuah contoh animasi keyframe di CSS.

That's just going to change the number of confettis

Hal itu akan mengubah jumlah konfeti

dari 60 menjadi 65.

And this will enable us to re-render this

Hal ini akan memungkinkan kita untuk merender ulang,

and create this sort of animated effect.

lalu membuat efek animasi singkat ini.

So here, let me just quickly create an animation.

Jadi di sini, saya akan membuat animasi dengan cepat.

We're going to call confetti, let's say 0.5 seconds.

Kita akan menamainya konfeti, buat durasinya 0,5 detik.

Let's say infinite and linear.

Kita buat saja tak terbatas dan linear.

And then once I do that, this will now start to animate

Kemudian setelah saya membuatnya, ini sekarang akan mulai menganimasikan

and we'll see just the sort of playful animation

dan kita akan melihat jenis animasi menyenangkan

of confetti just kind of playing around on this page.

dari konfeti yang tampak bergerak-gerak di halaman ini.

If I wanted to change this worklet,

Jika saya ingin mengubah worklet ini,

again I could just go and copy the CDM link.

sekali lagi saya perlu menyalin link CDM.

If I wanted to change it to sparkles,

Jika saya mau mengubahnya menjadi kilauan,

I could just copy that link address, bring it back here

Saya cukup menyalin alamat link itu, membawanya ke sini,

and then create this sparkle effect instead

lalu membuat efek kilauan ini sebagai ganti

of the confetti effect.

dari efek konfeti.

Now when it comes to working

Sekarang berbicara tentang pekerjaan

in more production environments,

pada lebih banyak lingkungan produksi,

you’ll likely want to manage these worklets yourself.

Anda mungkin ingin mengelola beban kerja ini sendiri.

And in this case, you can install them by npm.

Sehingga dalam hal ini, Anda dapat memasangnya dengan npm.

So if I check out this worklet page,

Jika saya memeriksa halaman beban kerja ini,

let’s see what worklets we want to use .

mari kita lihat beban kerja apa yang ingin kita gunakan.

This static gradient worklet, I think it's pretty cool,

Jujur, worklet gradien statis ini cukup keren,

especially as I mentioned, in these wider sizes.

terutama seperti yang saya sebutkan tadi, dalam ukuran yang lebih lebar.

So I'm just going to copy the name here of the npm worklet,

Jadi saya hanya akan menyalin nama di sini dari npm worklet,

which is the name that we have listed

yang merupakan nama yang telah didaftarkan

and go to VS Code, where I have the create react app,

lalu buka VS Code, tempat saya memiliki ciptaan aplikasi react,

a baseline sort of just loaded up here to play with.

semacam dasar yang baru saja dimuat di sini untuk dimainkan.

And now I'm going to npm install this worklet

Sekarang saya akan memasang npm worklet ini

as well as the CSS Paint Polyfill.

serta CSS Paint Polyfill.

And I want to make sure that I am saving it

Sekaligus saya ingin memastikan bahwa saya menyimpannya

to my local dependencies.

ke dependensi lokal saya.

So now npm is going to download this and register it,

Maka sekarang npm akan mendownload dan mendaftarkannya,

add it to the package.json.

menambahkannya ke package.json.

And from there, we'll be able

Kemudian dari sana, kita bisa

to reference Houdini static gradient and CSS Paint Polyfill.

mereferensikan gradien statis Houdini dan CSS Paint Polyfill.

We're also going to be using a file loader for this,

Kita juga akan menggunakan file loader untuk ini,

this way we'll be able to separate the worklet file

dengan cara ini kita akan bisa memisahkan berkas worklet

and keep it individual and not mixed in

lalu simpan secara individual tanpa tercampur

with the rest of the JavaScript.

dengan JavaScript lainnya.

So if I check the package.json,

Maka jika saya memeriksa package.json,

we can now see that the CSS Paint Polyfill

kita bisa melihat bahwa CSS Paint Polyfill

and Houdini static gradient have loaded.

serta gradien statis Houdini telah dimuat.

I can go to my App.js and reference them.

Saya bisa membuka App.js saya dan mereferensikannya.

So let's first import the CSS Paint Polyfill,

Pertama-tama, impor CSS Paint Polyfill,

it auto-fills because it's reading it.

ini akan terisi otomatis karena sudah terbaca.

And then let's import this worklet URL as a variable.

Kemudian ketik let’s import this worklet URL sebagai variabel.

So let's do import worklet URL from,

Mari kita ketik import worklet URL from,

and here I use the file loader

lalu di sini saya memakai file loader

and I am calling Houdini static gradient.

kemudian saya memanggil gradien statis Houdini.

Now we'll be able to reference the worklet URL

Sekarang kita akan dapat mereferensikan URL worklet

when we register the worklet.

saat kita mendaftarkan worklet itu.

So I'll do CSS.paintworklet.admodule.

Jadi saya membuat CSS.paintworklet.admodule.

And here I can call worklet URl

Lalu di sini saya bisa menamainya worklet URl

So we are now registering the worklet into our file

Sekarang kita sedang mendaftarkan worklet ke dalam file kita

and our application, which is great,

juga aplikasi kita, dan itu bagus, tapi

but we're not going to see anything

kita tidak akan melihat apa pun

until we first start the app.

sampai kita memulai aplikasi terlebih dulu.

But secondly, we have to go into the CSS

Tapi yang kedua, kita harus masuk ke CSS

and add it in our CSS.

lalu menambahkannya di CSS kita.

So we have this app started,

Jadi aplikasi kita sudah bekerja,

it's loading here for the first time.

ini sedang dimuat untuk pertama kalinya.

So it takes a second and there is the react app,

Membutuhkan beberapa waktu dan ada aplikasi react di sini,

up on the page.

di bagian atas halaman.

So let's go into CSS and let's change this app header

Mari kita masuk ke CSS, dan mari kita ubah header aplikasi ini

from just this blue background color, which we see here,

dari warna latar belakang biru polos, yang kita lihat di sini,

to having a cool static gradient background.

menjadi latar belakang dengan warna gradien statis yang keren.

So let's adjust this file here

Kemudian mari kita sesuaikan file di sini

and we'll add the paint and we'll call static gradient

lalu kita akan menambahkan warna dan menamainya gradien statis

and let's do a static gradient on top of the color.

dan mari kita buat gradien statis di atas warna itu.

This is no longer a background color, it's a backgrounds

Bukan lagi warna latar belakang, melainkan menjadi latar belakang

and let's also change the static gradient size.

mari kita juga mengubah ukuran gradien statis.

So this is a custom property, static gradient size.

Ini adalah properti kustom, <i>static gradient size</i>.

I liked at 10, I thought it looked cool.

Saya beri nilai 10, menurut saya itu keren.

So I'm going to hit Save now.

Jadi saya akan menyimpannya sekarang.

I’m going to open it here and there we see

Saya akan membukanya di sini dan kita bisa lihat

that we have this static gradient background now being added

bahwa kita memiliki latar belakang gradien statis yang sekarang sedang ditambahkan

to our UI, which is neat, but this is also really loud.

ke UI kita, tentunya rapi, tapi juga sangat menarik.

So we can open up dev tools

Kita bisa membuka<i> </i>alat pengembang

and start playing around with this.

lalu mulai mengutak-atiknya.

There was another variable called static gradient color.

Ada variabel lain yang disebut <i>static gradient color</i>.

Let's just set it to red, really quickly to debug it.

Mari kita setel ke merah, dengan sangat cepat untuk melakukan debug.

So now we have this all, box that pops up

Maka sekarang kita memiliki semua ini, kotak yang muncul

and here you can use all of these neat dev tools

di sini Anda dapat menggunakan semua alat pengembang<i> </i>yang rapi ini

to find the right color and effect.

untuk menemukan warna dan efek yang tepat.

I think something a little bit more subtle

Saya rasa sesuatu yang agak lembut

like this could be nice.

seperti ini akan terlihat bagus.

I'm just going to copy this hex code,

Saya akan menyalin kode hex ini,

open up my VS Code again,

membuka VS Code saya lagi,

and I am just going to add that variable.

kemudian saya akan menambahkan variabel tadi.

So static gradient size,

Ukuran gradien statis,

let's update this to color and just paste the hex.

mari perbarui ini menjadi color kemudian cukup tempelkan kode hex.

So now when I open this,

Jadi sekarang ketika saya membukanya,

we see this static gradient background.

akan tampak latar belakang gradien statis ini.

I'll just refresh the page to show you

Saya akan memulihkan halaman agar Anda

that this is going to render

bisa melihat bahwa ini akan merender

in the custom properties that we updated.

di properti kustom yang sudah kita perbarui.

So I also wanted to quickly show you

Saya juga ingin segera menunjukkan kepada Anda

that this will work in Firefox.

bahwa ini akan berfungsi di Firefox.

Here I have Firefox pulled up, and in Safari.

Di sini saya telah membuka Firefox, dan juga Safari.

So I'm just going to open this up in Safari as well

Selanjutnya saya juga akan membukanya di Safari

and drag this into view.

lalu menyeret ini ke dalam tampilan.

And here you could see that we have

Maka di sini Anda dapat melihat bahwa

this CSS Houdini Paint worklet effect working

efek worklet CSS Houdini Paint ini berfungsi

across browsers with the CSS Paint Polyfill doing a lot

di seluruh browser dengan CSS Paint Polyfill yang melakukan banyak

of the heavy lifting.

pekerjaan berat.

This is also a community driven effort

Ini juga merupakan upaya berbasis komunitas

so we’re looking to add your contributions

jadi kami ingin menambahkan kontribusi Anda

to our worklet library too.

ke library worklet kami juga.

If you have a Houdini worklet that you’ve built

Jika memiliki beban kerja Houdini yang telah Anda buat

or you want to play around with Houdini,

atau ingin bereksperimen dengan Houdini,

this is a great opportunity to do that.

ini kesempatan bagus untuk melakukannya.

Please feel free to submit a pull request

Silakan mengirimkan permintaan pull

and we'll be sure to get it on our page.

dan kami pasti akan memuatnya di halaman kami.

The contributing instructions are in the GitHub

Petunjuk untuk berkontribusi ada di GitHub

and also linked below.

juga ditautkan di bawah ini.

And worklets aren’t the only thing you can submit.

Beban kerja bukan satu-satunya hal yang bisa Anda kirimkan.

You can also submit a resource.

Anda juga dapat mengirimkan resource.

So here on the resources page,

Di sini, di halaman resource,

you'll find a variety of different resources

Anda akan menemukan berbagai sumber informasi yang berbeda

like articles, editor drafts, web docs and tutorials.

seperti artikel, draf editor, dokumen web, dan tutorial.

There's some really great examples and demo sites.

Ada beberapa contoh dan situs demo yang sangat bagus.

So if you find a great article or write one yourself,

Jadi, jika Anda menemukan artikel bagus atau menulisnya sendiri,

feel free to submit it.

jangan ragu mengirimnya.

We'd love to have those as well.

Kami juga akan senang memuatnya.

Thanks for watching this video on CSS Houdini

Terima kasih telah menonton video ini tentang CSS Houdini

and the CSS Paint API.

serta CSS Paint API.

It truly does open up a world of possibilities

Yang benar-benar membuka berbagai kemungkinan, dan

and hopefully Houdini.how can help you discover some

semoga Houdini.how dapat membantu Anda menemukan beberapa

of those possibilities.

kemungkinan tersebut.

If you've been inspired by something you saw

Jika terinspirasi oleh hal yang Anda temui

in this talk, please let us know

dalam pembicaraan ini, beritahu kami

and contribute your own ideas to Houdini.how,

kemudian sumbangkan ide Anda ke Houdini.how,

whether they’re worklets that you’ve built

baik itu adalah beban kerja yang Anda buat,

or great resources that you've come across,

maupun resource bagus yang pernah Anda temukan,

I would love to see them.

Saya ingin sekali melihatnya.

Thanks again, I'm Una, tuning out.

Terima kasih, saya Una, undur diri.

Similar videos:

Canvas2D is getting an update
Chrome for Developers
13.9K views 783 likes 35 dislikes 22 Dec 202058% match

State of Houdini (Chrome Dev Summit 2018)
Chrome for Developers
16.2K views 452 likes 1 dislikes 13 Nov 201847% match

Day 1: Chrome Dev Summit 2020
Chrome for Developers
15.9K views 628 likes 8 dislikes 09 Dec 202047% match

Chrome Dev Summit 2019 - Day 2 Livestream
Chrome for Developers
12.3K views 195 likes 7 dislikes 12 Nov 201946% match

Chrome Dev Summit 2019 - Day 1 Livestream
Chrome for Developers
21.8K views 461 likes 5 dislikes 11 Nov 201946% match

Web development on Chrome OS (Chrome Dev Summit 2019)
Chrome for Developers
17.3K views 455 likes 25 dislikes 25 Nov 201945% match

Speed highlights (Chrome Dev Summit 2019)
Chrome for Developers
6.7K views 188 likes 5 dislikes 14 Nov 201945% match

Predictive prefetching for the Web (Chrome Dev Summit 2019)
Chrome for Developers
6.2K views 215 likes 2 dislikes 25 Nov 201945% match

The gift of giving up (Chrome Dev Summit 2019)
Chrome for Developers
4.6K views 167 likes 4 dislikes 16 Nov 201945% match

Web bingo at Chrome Dev Summit '19
Chrome for Developers
3.5K views 133 likes 9 dislikes 22 Nov 201945% match

Chrome and the web in 2020
Chrome for Developers
54K views 552 likes 56 dislikes 09 Dec 202044% match

Faster apps with JSON.parse (Chrome Dev Summit 2019)
Chrome for Developers
300.2K views 12.8K likes 0 dislikes 22 Nov 201944% match

PWAs and capability highlights (Chrome Dev Summit 2019)
Chrome for Developers
8.1K views 200 likes 5 dislikes 16 Nov 201944% match

What’s new in Material Design for the web (Chrome Dev Summit 2019)
Chrome for Developers
38.1K views 915 likes 22 dislikes 22 Nov 201944% match

Tools for fast Angular applications (Chrome Dev Summit 2019)
Chrome for Developers
8.8K views 328 likes 6 dislikes 22 Nov 201944% match

5 tips to make your PWA stand out (Chrome Dev Summit 2019)
Chrome for Developers
6.4K views 233 likes 5 dislikes 25 Nov 201944% match

Blending PWA into native environments (Chrome Dev Summit 2019)
Chrome for Developers
5.3K views 147 likes 8 dislikes 25 Nov 201944% match

WebP in its 10th year (Chrome Dev Summit 2019)
Chrome for Developers
5K views 187 likes 3 dislikes 19 Nov 201944% match

Hello dark mode, my old friend (Chrome Dev Summit 2019)
Chrome for Developers
24.5K views 824 likes 25 dislikes 22 Nov 201943% match

Design, UX & Advanced PWAs highlights (CDS 2020)
Chrome for Developers
63.7K views 944 likes 76 dislikes 10 Dec 202043% match

Designing for speed and hacking user perception (Chrome Dev Summit 2019)
Chrome for Developers
9K views 539 likes 4 dislikes 15 Nov 201942% match

You should focus — supporting different devices on the web (Chrome Dev Summit 2019)
Chrome for Developers
4K views 206 likes 6 dislikes 19 Nov 201942% match

How to make your content shine on Google Search (Chrome Dev Summit 2019)
Chrome for Developers
20K views 335 likes 16 dislikes 12 Nov 201941% match

Ready player web: Building modern web games (Chrome Dev Summit 2019)
Chrome for Developers
13.5K views 412 likes 28 dislikes 17 Nov 201940% match

Getting permission: Patterns for making fluent permission requests (Chrome Dev Summit 2019)
Chrome for Developers
5.1K views 123 likes 2 dislikes 17 Nov 201940% match

3D, VR and AR on the web (Chrome Dev Summit 2019)
Chrome for Developers
15.3K views 514 likes 2 dislikes 17 Nov 201940% match

In which we make loading disappear with 'portal' and friends (Chrome Dev Summit 2019)
Chrome for Developers
25K views 528 likes 32 dislikes 12 Nov 201940% match

What’s new in Canvas - Offscreen Canvas and Text Metric use cases (Chrome Dev Summit 2019)
Chrome for Developers
9.3K views 344 likes 19 dislikes 20 Nov 201939% match

UX patterns optimized for Core Web Vitals
Chrome for Developers
17.8K views 520 likes 22 dislikes 11 Dec 202039% match

Next-generation web styling (Chrome Dev Summit 2019)
Chrome for Developers
252.7K views 7.5K likes 0 dislikes 11 Nov 201939% match

Settings Privacy About Contact Donate