B1 中級 1 タグ追加 保存
動画の字幕をクリックしてすぐ単語の意味を調べられます!
単語帳読み込み中…
字幕の修正報告
All right.
Okay, then.
Okay.
So hello.
Thank you all.
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.
I'm just repeating everything.
Uh, that are wonderful.
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.
Well, mostly won't get there.
And right about now, you might be wondering who Jeremy, what the hell are paintwork?
Let's And it's a good question.
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.
Paintwork.
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.
Let's on.
They'd let you develop expressive and state full animations, custom layout modes.
Even that's a developing thing.
And, as is the sole focus of this talk generative artwork using the CSS paint A P I Seriously.
So I haven't answered your question yet.
And out there you're thinking, OK, fine, Jimmy buying that whatever.
But what even is a work?
Little You get to the point work.
Let's are similar to Web workers.
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.
And I feel you a cz.
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.
S.
S.
Khan.
Because even if you're not a javascript, Dave o t or super fan.
You can still use paint work.
Let's which have already been written in your designs without ever having to do more than write a little CSS.
Here.
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.
What?
That's not right?
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.
So if you think of the U.
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.
And what is a pain worker work lit?
Really?
I mean, what is it?
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.
Um and we really don't want that, do we?
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.
But how do we draw stuff?
What does that even look like?
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?
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.
That sort of thing happens.
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.
So this might be you right about now.
But that's simplistic.
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.
A little bit of chaos, right?
And that's what we're going to do.
We're going to talk about the other important aspects of this technology as well.
So we're done here.
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.
So it's a good frame of mind.
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.
Let's in the CSS paint a p I.
So do check it out.
Okay, let's revisit that paint method in the amazing paintwork lit class and just maybe change things up a little bit.
There's more going on in this example.
Then, when we were just drawing this mundane, lonely circle in the middle of a bleak canvas.
So first we establish the size of each tile, which will be 32 pixels square.
Then we divide the canvases, width and height by the tile size.
And then we'll write two loops using those values to draw each individual tile.
The first loop deals of tiles on the Y axis.
And then the second loop deals with on surprisingly tiles on the X axis, and the second loop is nested inside of the 1st 1 and this will end up populating, or allow us to populate every tile available on the campus with whatever it is we feel like drawing.
So what you do here is up to you, but in this example, I'm going to draw a line in every tile.
But the random part of it of it will be where the line goes in in the tile space, right?
So in every iteration, I call the context objects begin path method to begin drawing a line, and then I leave it to mass dot random or math dot pseudo random in my right to decide if the line will cross the tile space from the upper left corner to the lower lower right corner or draw a line straight line from the upper left corner to the lower left corner.
And after that, I finish up Hillary in oration by telling the context object to draw the stroke.
So what does that look like?
Turns out, it looks like a kind of cool thing that changes every single time.
And that is the kind of spontaneity and randomness I'm talking about here.
And that's just what you can do if you only know, like just a teeny little bit of the of the canvas, a p I.
But with a little ingenuity, that little teeny bit of ingenuity can go extremely far like what if we just decided to throw in a little something extra and randomly decide whether or not to draw a dot in the upper left hand corner of each tile.
This gives the final artwork a sort of circuit board appearance which I think is kind of meat, and we can also make the tile size a bit bigger and we can change the color.
And because a campus background is transparent by default, we can specify a CSS background color property to set to set this artwork on whatever color it is we want.
So I've kind of done like this off black greyish thing.
Now imagine this pattern in the pages masthead background, but maybe at a more subtle and lower opacity that just gives the design just a little bit of extra hoof and like chaos but without overpowering the foreground and like making things like, you know, just kind of subtle, like being cool.
Uh, so that was cool.
But let's do a different take on this idea and let's let's experiment a little bit more like what else can we do?
So here's the paintwork I call blotto, which draws circles of varying size and capacity and every tile like, kind of an inkblot kind of thing.
And so there's a bit of code here, so let's just walk through it at the very beginning.
Beginning of blah does paint method.
We set some variables the tile size, of course, by eight pixels.
And then we define this amplitude variable, which aids us in sort of generating randomly size circles later on, and then we calculate the number of tiles on both axes and then we store the result of pi times two, which means that the circle that we draw will be a full circle a 360 degrees.
And then finally, we set the Phil style to this sort of like, Nice little Blue.
And now here's where we do the heavy lifting.
You'll note that the loops are the same as with the circuit board pattern, and we we do all the work inside of the second nested loop.
Now where it changes is that we generate a random Alfa value by getting the remainder of mass dot random divided against itself.
And this will get us a valid transparency value from 0 to 1.0, and then we multiply the tile size by math, dot random and our amplitude value from earlier.
And now all we do from here is just draw circle with that information that we've just sort of come up with.
And then we registered good old blotto here like this, just like usual, and then we can use it in CSS like so and because paintwork let's draw.
Like I said, they drawn a transparent background by default.
We can add a nice little background color for to sit on.
I've chosen this sort of like off white.
And so after all of that faffing about what does it look like?
Pretty cool, I think.
Not bad.
If I do say so myself.
I mean, I don't think anything I do is cool, but I think that's kind of cool.
Um, and as before, we get a unique result.
Every time the cameras redraws and it gives us again that organic feel that, while stable and familiar, is just slightly chaotic and spontaneous.
And I really like that every single time it draws.
Okay, so that was cool, right?
But let's think outside of tiles, right tiles, they're fun, and they're convenient ways to draw like generative artwork.
But let's, like, step into the world of trigonometry, and I'm sure most of you are pretty comfortable with Trig.
But if not, don't worry, it's it's not too hard.
And I never was a good math student.
So like I was brushing up on my Trig last week, here's another paintwork lit I call flashy, which randomly draw stylized rays of light sorry around a circle which flare outward, which makes it sort of looked like a stylized rendering of the sun, which I think is kind of cool.
So let's look at the paint method and, as before will need to establish variables that we can use later.
The first is the radius of the main circle that the rays will radiate from think like the sun itself, which we've said it 48 pixels.
Next is the amount of deviation of each raise with, and this is what we use to make it look like the rays are flaring outward as they extend from the sun itself out to the edge of the canvas.
And next is the outer radius, which is sort of think like a giant circle around the entire campus that you don't see.
We do this s O that we ensure that the edges of the rays will be drawn outside of the campus bounds when we use our trigonometry functions to plot where those rays need to go.
And finally we have the X and Y coordinates from which the circle, the main circle, will be drawn.
And we calculate, um, the position of this thing by multiplying the width and height of the campuses size by some static values to sort of insure it sits proportionately somewhere in the upper left.
But if the element sizes changes, it'll kind of a just a little bit.
And now it's time to get drawing.
So first we set the Phil color, and then we draw the circle from which the Rays will radiate.
Pretty straightforward.
Now here's where it gets a little interesting and this code will all be available.
So if you can totally read it, that's OK.
It will be available somewhere because we are drawing raise radiating around a circle will want to do 14 loop that starts at zero degrees and then goes all the way around to 360 and then in each generation will let master at random decide if it wants to draw anything at all.
And if it decides, okay, we're going to do that will calculate the X and Y coordinates at the edge of the larger circle that exists outside the campus bounds.
And so then we do this by converting the edge of each ray from degrees.
Represented by are incremental er I to radiance, and from there will then draw this poly line shape that uses a trigonometry like to trigonometry functions to figure out the X and Y coordinates to draw the lines for E trade.
Once the shape is drawn, we fill it with the same salad colors we used with circle them like before.
We register that flashy little fella and then, like before we use it in the CSS like this and give it a nice pinkish background color to sit on.
And what do you think that looks like?
Something pretty cool?
I think right.
It looks kind of neat.
And a little bit of Maskell was a long way into making this look really cool in stylish and like Before we still get that spontaneity that gives it that familiar but slightly different appearance each and every time that it draws.
So And as an aside, I sucked at math in school like just, like, barely scraped by through algebra to sucked.
So if I could make stuff like this pretty much anyone can make stuff that looks really cool with just a little bit of like, you know, even just some basic arithmetic can help you make some really cool stuff in this.
And so case in point like this paintwork what I like to call Slap Dash, this one is kind of one of the user wants to make, and I use it on my website currently.
Although it might not be long for this world, I'm kind of getting tired of it.
But that's okay, like, because I've got some others up my sleeve like this one, which I like to call Bumpy because it's get it.
It's bumpy.
And then there's this alternate rendering of the blotto paintwork lit, which I showed you earlier, but with just sort of a larger radius on the circles with a blend mode applied to give it a sort of ink block gone wild effect.
That's kind of cool.
And then there's Yeah, this blend mode just kind of makes them, like, sort of overly each other.
I think it uses, multiply.
Uh, and then I started getting a little bit wack here and came up with this one, which I like to call Bite Mare.
And even though it looks three d, it's really destitute.
He drawing.
Um, I don't think you can use a three D context and paint work.
Let's yet, um, I use some trigonometry functions just to kind of fake that three d look and I think it's pretty convincing.
And in that same vein, here's my favorite.
When I made so far, which I called parallel Oh, wow.
Um, it also uses a little trick to fake that freaky thing again, and I don't know who knows where I'll go with with this next.
This is just the last one I made that I like, but it's a lot of fun.
And if you're looking to know how he did some of these or where you can find that code, I have a little surprise for you at the end of this talk.
But we got some other stuff to talk about first.
Okay, so we had some fun there for a minute, right?
Like it was a wild ride.
But the problem with paint work, let's as I've described them, is that they're just not, well, very flexible.
Well, as I've described them, you just you have to change the paintwork.
What code itself to change its appearance.
While that can work, it's not very convenient and really just kind of a pain.
What if you wanted to re use that same work lit code in different places on the same site?
What if you wanted to do wanted to do basically the same thing, but adapted to different contexts solely by tweaking its appearance and CSS.
That'd be cool, right?
Well, guess what that is possible.
You can set.
You can set up your paintwork.
Let's so that their appearance can be altered by what are called custom CSS properties that you you define that irrelevant to your paintwork lit.
And this feature is not a part of the CSS paint a p I, but rather another feature called the the Custom Properties or maybe properties and values a P I.
Seriously, let's go back to the CSS for the flashy, paintwork lit example from earlier.
What would the CSS for this look like?
If we could customize an aspect of its appearance through a custom property kind of something like this?
Like what if we wanted to control the size of the of the sun's radius, right?
Make that circle bigger if we wanted to.
Um, well, the property, starting with double dashes, is a custom property.
And when we set custom CSS properties on elements using a paint work lit, we can access those values within that paintwork lit.
And now This is where the power and practicality lies with this technology.
Because if a paint work, let's rendering can't be influenced by anything outside of the workplace code itself, you'd have to change your work like code every frickin time you wanted to do something different, or you'd have to make multiple versions of that same work lit in order to customize its appearance in CSS.
And that's just wasteful.
Custom properties help us to make paint work, let's infinitely more useful and re usable.
And they're like the hook in a good song that, like just in a really good banging song that just makes it even better.
So the next step is to use a little thing called the properties and values a P I to establish the identity in shape of a custom property property in your application.
JavaScript, like you would put this on the main threat in your APP code.
And even though it's not strictly necessary to do this, it's not a bad idea for a few reasons.
For one, you can control what the data type is for the custom property via the syntax setting.
In this case, you can see that we're specifying the property's value as an integer.
The value we set here is called a CSS impact string, and it helps the A P I to enforce what's considered a valid value for a given custom property.
And two, we can decide whether or not the value for this property can be inherited by child elements using the inherits option.
I haven't found exactly where this is useful yet for paint work.
Let's but I'm sure it's there somewhere.
I mean, it's it's specified.
I'm sure it's useful.
And three, we decide what the property is.
Default value should be via the initial value option.
If that property is unspecified, that's kind of useful because properties have defaults that just sort of kick in if you don't specify them so we can do the same thing with our custom properties.
So what does it look like when you want paintwork?
Let's to access those custom property values.
It's not too onerous, really.
It's just a two step process.
The first is to add a static getter method to your work lit class called Input Properties, which returns an array of all the custom properties that we've registered and then in the work lit.
We can access these properties through 1/3 argument in the paint method signature called Properties.
Unsurprisingly, the arguments get method allows access to the custom property values passed in CSS.
Here, you could see that we like we pull it and then we cast it to an end.
I don't think the property properties and values a P I is at Cannes candidate recommendation, so that might actually not be the final code for what that looks like.
Um, but then we get it in there, and then at this point, we can then control the paintwork.
Let's presentation entirely with CSS, and what we can achieve with this is super duper powerful.
When we parameter rise paintwork, let's we make them customizable in ways we didn't even think was possible.
And here you can see that we can dynamically change the tile size of the blotto work.
Let's output like we can.
We can change the color as well as other influential properties like the amplitude, the maximum open, a passage e like the blend modes and stuff.
It's pretty cool.
We can make them fit practically anywhere, and that's the beauty of generative artwork.
applied.
In this context, it's one thing to generate art with Java script.
We've been doing that for a long time.
It's an entirely different thing to control it in this fashion, and you can do it without having a tweak more than a couple properties.
So now that I've showed you all the cool stuff, it's time I inform you of the unfortunate yet entirely predictable reality that you must eat your vegetables.
By which I mean it's time to tell your paint to tell you that paintwork let's don't have solid browsers support and that therefore, that means you must treat them as a progressive enhancement and you'll need a backup plan, right?
So that's a lot of what we do on the Web is feel like my official title is like a back up plan guy for everything.
Furthermore, because paintwork let's are JavaScript, you need that backup plan, even in browsers that do support them.
So support isn't terrible for the painting FBI.
When you look at the bigger picture, in fact, it's on Lee one.
It's the only part of Houdini that currently is at the candidate recommendation stage, at least at the time of this table's rendering, but support for it just isn't universal, so you need to know how to adapt.
And that said, you shouldn't have to break your back to provide a fallback, because CSS itself can usually solve this.
The thing to remember about resiliency when using the CSS pain a p I.
Is that the order in which we specify CSS Properties matters, and that is what is going to save you going.
This route is usually enough for a fallback.
Browsers that understand this AP I will use the second rule.
But those that don't will fall back to the first occurrence of that rule that they consider to be valid.
And in this case, a browser likes a fire.
Fox, which doesn't support paintwork.
Let's yet, but it's coming will fall back to the first rule, and most of the time this approach is enough.
The idea is that your fallback should resemble the paintwork lit like someone right.
It doesn't usually have to be much more than an approximation, because it's pretty rare that, like somebody would see both renderings of like the fall back and the paintwork lit itself like next to each other.
So to illustrate.
This is my personal website in chrome with the paintwork let used in the backgrounds of different sections, just like that kind of slapdash paintwork look that I had.
And now here it isn't a browser that doesn't and it's not exactly the same, but it's a reasonable, like kind of approximation, and it works well enough and just be sure that you're optimizing your fallback images.
That's the perf guy within me.
Just can't help but tell you to do that.
If possible, try to create, like Tyler Ebell smaller patterns to keep those fall back images as small as possible because simple paintwork, let's will usually be smaller over the wire than images.
Now for another question.
What if a paintwork legislate fails to load?
For whatever reason, and this is where promises or your friend?
You might recall that in order to lower the paintwork left, we have access to a promise when it completely loads or conversely, when it fails to load.
And in this case we can compensate for this in the Promises catch method, which executes if the promise was rejected in this case, if the paintwork failed to load for some reason, and if it does fail, we can add a class the body element, which we can then target with CSS to provide a fallback.
That's the SS would look something like this, although that's a little weird.
I said Body elements.
So work with me.
With that inconsistency, imagine it was applied to the element itself.
Instead, in the event that the paintwork look fails to load, we would still get a stall back Bracker on image that we can still use.
And it's important to note that, at least in chrome, if a paintwork lit fails to load, the CSS on Lee fallback for non supporting browsers described earlier will not kick in because that it's still considers that paints in tax to be a valid value.
But that work let hasn't loaded.
So you have to have a more specific rule to make that work s so you'll need to provide an explicit fall back.
Otherwise, you just you just won't have a background at all.
Okay, Most of the talks I give are about performance, and I thought maybe I could get through this one without any perf talk, but I was wrong.
It turns out that there's a couple things to keep in mind when it comes to keeping your paintwork.
Let's fast as well as being considered, what with what could be a rather taxing A P I if it's not used carefully, because if you don't you risk making the Internet more like this for people.
So let's avoid that.
Talk about what you can do to make paint work.
Let's work optimally as they can because of their restricted scope.
Paintwork.
Let's won't often be very large.
The ones I've written usually end up being less than two kilobytes before compression.
But if you can help it, do not run your paintwork.
Let's through babble that is no nose, no.
So let's look at the impact as an example that babble transforms have by taking the circuitry work late from the beginning of this talk, even when it's undignified, it's very small, and it also works in every browser that supports paintwork.
Let's without babbles, help paint work.
Let's do not need to be transformed in order for them to work.
Now here's that same work lit after Babel transforms it, and if you can't read this code, that's kind of the point.
There's a lot of Croft here, which affects parsing compilation and execution time.
And the Omni present question of Web development seems to inevitably be.
Should this work in every browser?
And in this case, there are two answers.
No and hell no.
The Omni.
The paint work.
Let's aren't supported in all modern browsers yet, so we don't need to treat them with the Web compatibility mindset that we clung to in the two thousands, if you must, must.
If you must come process paintwork.
Let's with Babel, perhaps out of a matter of convenience, and I can understand and sure you know how to configure it to minimize transforms.
I tend to avoid including them in the asset graph of any bundler until I know they'll be able to process them the way I expect.
And this last piece of perfect vice I have is to be considerate of your users, particularly mobile ones.
Not everyone has a pixel three or a 2018 Mac book pro that can obliterate whatever comes down the rendering pipeline without turning into a fully functioning panini grill.
So when paintwork, let's draw normal scenarios such as unload or when the orientation of the device changes.
They could be resource intensive, but not ludicrously so.
But that does not mean that even though work, let's do their work off the main thread, like Web workers that they can't impact page responsiveness.
This screen shot is from a performance profiling session where a browser was continuously re sizing in a paint work.
Let was redrawing every time they work.
Let's will redraw anytime the dimensions of their container change or if CSS properties on that container changed.
So please resist the temptation to, like do stuff like make them redraw constantly to, like, make them like, animate and efficiently or otherwise for no real sensible reason and, additionally, make a call on when it's not appropriate to use thes things.
We can't look at the devices battery level since the battery status.
A p I is no longer a thing, but we do have another signal we can look at, and that is the device memory, FBI, the amount of memory that the approximate amount of memory that the device has, and as usual, it's not supported everywhere.
But checking for support is as trivial as seeing If navigator dot device memory is defined.
And if it is, we can get the course amount of memory.
And here we have decided that if a device has at least four gigabytes or more of memory, will register that paintwork lit and then weaken or otherwise we can, like, do the class hook where we decided to go to a fall back.
Um, and in any case, if you're concerned that any part of your paintwork lick code is inefficient anyway, if you profile in chrome Deva tools in the Performance Profiler and then after that go to the sources tab, you can see the impact of each line like how much execution time.
And then you can just decide whether or not that you want to address any sub optimal behavior if you can.
Well, it's that time.
But before I properly part from you all, I want to call it a few.
Resource is, I think are well worth your time.
First off, you know, Kravetz has been jamming on paintwork.
Let's for a long time.
And if you feel like my quick intro to the technology just didn't cut it for you, I understand.
Then you news article on the on the A P.
I just cannot fail you.
She is just superb describing these things.
And secondly, Sam Richards did a more broadly scope talk on Houdini in general last year.
CSS confit a U Some of what he has talked about there may have changed a bit since, as Houdini is evolving.
But it's still a great talk for anyone who wants to know more about this awesome set of AP eyes that are coming down the pike.
Um, and now remember when I said there was a surprise?
Here it is.
If you're interested in seeing on open source showcase of the paint work, let's I've written, you can check out a side I've made called paint.
Let's, um, it's paint.
Let's dot Hiroko at dot com But I got a little tiny oral thing there, and I'll post the slide deck later.
This will show each paintwork lit, and it's custom properties so you can experiment with each one and they're free to download.
You could just use them if you want.
I don't care if you credit them.
I don't care what you do with them.
Um, and plus each paintwork.
Yeah, I just said that so.
And if you have a paint work like that, you've written that you think is pretty cool.
I welcome you to submit a pull request to the Repo or just show it to me and I can.
And I can pull it in for you because I'm kind of picky about how that gets done.
So if if you'd like, want that cool, let's let's talk, there's we'll post this.
You'll know where this is all that pretty soon.
And of course, at the time I thought I was being a clever little ship when I wrote paint.
Let's.
But it, unsurprisingly, turns out that someone had the same idea and before I did and that person was not surprisingly, um, you know, Kravetz.
So if you want a different take on the idea, check out her extra dot CSS site has some cool things that you can check out and pull into your project as well.
And with that, I thank you for your time, your interest, your everlasting love of all things web, which gives me no shortage of hope and admiration for this community and for welcoming me into your amazingly beautiful and historically awesome city.
here in my slides, which will be available at that girl.
Hopefully shortly.
If I can get WiFi thing figured out and, uh, thank you all so very, very much.
コツ:単語をクリックしてすぐ意味を調べられます!

読み込み中…

The Weird — Yet Practical — World of Paint Worklets by Jeremy Wagner | CSSConf BP 2019

林宜悉 2020 年 4 月 6 日 に公開
お勧め動画
  1. 1. クリック一つで単語を検索

    右側のスプリクトの単語をクリックするだけで即座に意味が検索できます。

  2. 2. リピート機能

    クリックするだけで同じフレーズを何回もリピート可能!

  3. 3. ショートカット

    キーボードショートカットを使うことによって勉強の効率を上げることが出来ます。

  4. 4. 字幕の表示/非表示

    日・英のボタンをクリックすることで自由に字幕のオンオフを切り替えられます。

  5. 5. 動画をブログ等でシェア

    コードを貼り付けてVoiceTubeの動画再生プレーヤーをブログ等でシェアすることが出来ます!

  6. 6. 全画面再生

    左側の矢印をクリックすることで全画面で再生できるようになります。

  1. クイズ付き動画

    リスニングクイズに挑戦!

  1. クリックしてメモを表示

  1. UrbanDictionary 俚語字典整合查詢。一般字典查詢不到你滿意的解譯,不妨使用「俚語字典」,或許會讓你有滿意的答案喔