Name: ジェレミー・ワグナーの「奇妙な-まだ実用的な-ペイント小冊子の世界」｜CSSConf BP 2019 (The Weird — Yet Practical — World of Paint Worklets by Jeremy Wagner | CSSConf BP 2019)
Uploaded: 2021-01-14T10:43:31.000Z
Duration: 33 min 17 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

I really appreciate the opportunity to be a part of CSS comp Budapest Just massive thanks to the organizers.

And most importantly, you all for welcoming me into your ridiculously beautiful and picturesque city.

Um, my name is Jeremy Wagner, and I'm a wen performance consultant for sight improved.

My job is to do all I can to make the web faster for our clients.

And I also write and talk about performance a bit.

EMC has already said, but this talk is about paintwork lips, which is a little weird for me because I was talking about performance which has comparably little to do performance.

And right about now, you might be wondering who Jeremy, what the hell are paintwork?

And since I don't want to assume everyone knows about this, here's a quick tour of what they are and what they can do.

Let's are part of a developing set of specifications called Houdini, and with the AP eyes, Houdini provides, you can write what are what are called work.

They'd let you develop expressive and state full animations, custom layout modes.

And, as is the sole focus of this talk generative artwork using the CSS paint A P I Seriously.

And out there you're thinking, OK, fine, Jimmy buying that whatever.

But unlike Web workers work, let's offer developers lower level access to rendering pipelines for completing very narrowly defined but super specific tasks.

And in the case of paint work, let's we're talking about artwork that we can generate with JavaScript and control with CSS.

Now, I know J s camp is tomorrow and not today.

So you're probably thinking, Well, what the hell is this?

I didn't ask for no javascript that a c s s Khan boo.

Much as I love javascript, the web can sometimes feel like this.

Um, but I feel that this technology is relevant here, even at C.

Because even if you're not a javascript, Dave o t or super fan.

Let's which have already been written in your designs without ever having to do more than write a little CSS.

They're so they're still relevant to you.

And this is possible because while paintwork, let's are written in Java script there, embed herbal in CSS and this is what I mean by incredible.

When you look at this lonely background image property, you might be thinking.

Isn't background image supposed to take a girl?

Well, that's certainly the prevailing use case, but in browsers that support paintwork lets the background image Property can also take this little nifty paints in tax, too.

R L syntax and CSS is a function that accepts the U.

R L String to an image, you can similarly think of paint as a function, which accepts a string that represents and invokes a paint work late.

And in that work lit is where you write the Java script to generate background images that CSS can use.

So in this example, were calling paint to invoke a work lit that is registered under the name amazing.

But until we actually register a work led to that name, this bit of CSS won't do anything and therefore will not be very amazing.

And this is what that registration process looks like, which is done and JavaScript on your page or your main APP code that runs on the main threat.

Because the paint a p I isn't available in all browsers, you'll need to do a quick check to see if window dot CSS dot paintwork lit is a thing that you can use.

And if it is, you can then use its ad module method to load your work lit from a separate JavaScript file.

Turns out it's a class with a predetermined shape, which consists of a method called well paint.

And with that, within that method is where all the code that draws the artwork goes, and the shape of a paintwork lit is not restrictive it all, So you're free to use other class features to organize and do like whatever to organize your drawing code anyway that you prefer.

And that's nifty because without a little organization you're drawing code can start to look like this.

Then moving on in the same file after an outside of your paintwork lit class, you can call register paint, which requires two arguments.

The first is the name, the string name that the paintwork, what should be registered under and then the second this that allows it to be accessed by the paint function.

And then the second is the reference to the class that you just wrote that does all of the painting.

And when this all comes together, a paintwork lit finally becomes usable by CSS.

Well, the AP I you use conveniently to draw stuff is really just the campus AP eyes two D drawing context, something that's been around for a very long time that some of us have good familiarity with, and that makes sense.

Why develop a separate a p I for drawing in two D when a perfectly good one is like right there?

You know, the second argument is the canvas geometry, which offers the dimensions of the drawing space and this is essential to ensuring your artwork responds to the available space.

Because you know your elements can kind of shift and change size.

And in this madly responsive world that we live in, we want to make sure that our artwork adapts to the container that it's in.

So here's an example of a minimally viable paint method, which draws a solid black circle with a 64 pixel radius smack dab in the middle of the canvas, no matter what the size of that canvases.

And so if we assume this super basic paintwork lit gets registered under the not at all ironic name of Amazing and we Apply it to an element will get this this totally amazing thing that in no way could be replaced by a static image whatsoever.

Example was meant to illustrate how we get from one line of CSS to something that lets you generate background images using a familiar AP I there is so much more that this technology is capable of, so let's take a look at it and just think what if you could use this a p I to create randomly generated artwork that could enhance your designs and practical yet spontaneous ways that are just a little bit different.

We're going to talk about the other important aspects of this technology as well.

The only thing that will be able to cage your creativity is you.

So let's see what's possible with this expressive and cool technology, but still, and I sense a little bit of, ah, hesitancy.

Knowing where or just how to start can be kind of paralysing.

You know, a good frame of mind to get into is to think of the canvases like a set of tiles where all the tiles are separate but potentially overlapping or connected pieces which are randomly generated.

This mindset change your focus, conveniently Onley on what to do in each tile, rather than allowing yourself to be overwhelmed by what to do with the entire space.

And once everything is done, you can kind of step back and just see how all these things connect and interlock and how they come together.

And this helps us reach where, I think is the sweet spot with the paint a p I.

We can get weird, yes, but that weirdness can intersect with what's practical and therefore usable.

And that, to me, is like the magical part of Web development with weirdly practical stuff.

Now, some of what you're going to see here and I feel obliged to call this out is very much inspired by a wonderful talk that Tim Holman gave A J S con you last year where he talked about generative aren't using the canvas a P I.

I highly recommend you check it out on YouTube because he is where better at this stuff than I am, and pretty much everything in that talk is something that you will then be able to apply to paint work.

字幕リスト動画再生

ジェレミー・ワグナーの「奇妙な-まだ実用的な-ペイント小冊子の世界」｜CSSConf BP 2019 (The Weird — Yet Practical — World of Paint Worklets by Jeremy Wagner | CSSConf BP 2019)

stuff

sort

context

access