Config 2024: Design engineering – from design to engineer (Jhey Tompkins, Vercel) - Sottotitoli bilingue
.
How's it going?
Everyone doing good?
Let's the energy up, people.
All We're not doing design engineering.
We're doing design idea to engineer,
and I'm Jay Tompkins if you didn't know, and let's zoom through this because I feel like we're pretty over time.
But yeah, how could a little button like this make you sweat profusely?
I think I'm in the right room, right?
Everyone's seen this before.
It's not that hard though, right?
There it is, right?
He's expecting more, that's the end of the talk.
But yeah, right, what is it really in there?
It is, it's just a button, right?
It's a button with an attribute that changes when I click it and I just use some container
queries and custom properties and I move the bit around, you know, that's it, pretty simple.
This is the point I'm trying to get at though, right?
Like, the design is kind of like wild.
but you've got to like look through it and see we're in a golden era for the web and we
have all these awesome web APIs that we can use.
Webber APIs if you've been building with AI, but yeah, essentially what we're going to get here is a demo can speak a thousand.
All right.
Acoustics.
We'll just blame the acoustics.
But these are the kind of primitives you have available to you, right?
We've all seen them before.
We've got input select.
You've got radio.
Now, you've got pop over, which is really cool, like Z-index.
See you later.
You it into the top above the document.
Don't worry about it.
It's going to be above everything else.
We'll see some more of them later, but you get light dismissed so you can escape key out and stuff.
But we have these things so you can focus on doing the core stuff.
Bao?
Yes.
All right.
So.
to preface this talk.
It's going to be an absolute speed run.
I'm not really going to go into the code.
I'm just going to, like, whiz through a of stuff.
And the idea here is if you go away and try anything today from this talk,
like, we'll be happy because you've gone off and been like, oh, I this out or tried this and it pushed something else along and, you know, buckle up
essentially as the preface picks.
We're to try and get free.
And the other purpose here is if I talk about tracking cursor position,
it's probably those few lines and I'm just plugging an X and Y into the CSS so you can use it.
And if I'm talking about grabbing the index,
I've probably inlined it, server rendered it or something as an inline style and I've got the count on the top.
We went for the review and it's like, how are you getting that?
That's why I've put that in, so it's a small text area.
I forgot to mention that on the other one.
Text areas, right, they still can't resize.
Or they can now.
It's one line of CSS that's coming, which pretty cool.
And can do stuff like constrain it with line height units, which another thing.
You a little accented scroll bar and some glowiness.
And like, yeah, sorry.
That's all it is.
Field sizing content.
Use min and max height, line height.
Yeah, field-tising content scroll bar, colour scroll bar width.
How did you do the border?
That's the bit everyone asked about.
Don't care about the cool bit.
You want to see how the border works.
So how does that work?
Well, just layer up some backgrounds.
You've been able to do that since before I could CSS.
And just use padding box, border box, transparent border, and you just kind of layer it up.
Let the demo do the talking, right?
that's how it works.
But you want to make it interactive so you use your cursor position,
don't have to explain that because I did it on the first slide.
But I'm just plugging that into the gradient, right?
Kind of cool.
And how it works.
But when I'm in move on.
And like, OK, yes, great.
But I want the middle to be punched out because that's what someone's going to ask, mask composite, that's what you need.
Another element on top, grab a border, punch the middle out with an intersection and then you can do whatever you want with the border.
That's how it looks,
that's the kind of thing you can do,
kind of cool, but if we spread it out it's just loads of unnamed layers with I didn't think that gagged would fall.
I hoping it would, but unnamed layer gags are very forced.
All so animate it, okay, we're getting somewhere.
We don't want the cursor position here, we just want to it.
So we've got this.
It's a lot of translucent middle.
And I could just animate the mask right,
I just make the mask rotate because I'm just revealing part of the border,
but it kind of like speeds up in the corner and you're like, you're going to get around that.
And then I'll just show you what's actually happening there, there you go, that looks cool.
You can.
But we have something else you can use now.
So you could use a, let's choose this one, an offset path.
So what's actually happening here is I don't get the slow up or the speed up in the corner.
I get like this linear movement.
And that is because now let's do an explode and let's do the alpha piece because that's cool.
Yes, right.
You can move an element around the perimeter of another element with offset path.
which is kind of cool because it means you can do all these things and now we're punching the middle out,
we've got the moving thing around and we're just doing all this complex stuff just so we can get a little shiny border for the investors.
And that's kind of essentially what it looks like.
we're doing that,
plugging it into the mask,
rotating the mask,
that one's cool,
but one, the offset pass even smaller, right, because can say x, y, w, h, so 0, 0, which is going on a journey.
There you go.
Offset path supported.
Pretty good now.
Let's do some math.
Last one of the day.
Fluid topography.
Kind of cool, but kind of sets us up.
You can do that all with CSS, right?
At runtime, which is like kind of sweet.
They change these sizes and they get like really small or something.
The class is killing me.
But math is that, right?
That's all it is.
I'm setting myself up here.
I'm saying like min, max, viewport, size, the max, like, and the min type size I want.
And I'm just like, right forget.
But unlock here is exponential functions, which is being able to be like, two to the power of two, to the three, to the four.
It's like, you're right once, and just leave it alone.
Because then.
property, you just be like, here's my font level, font level 6, that's cool, resize it, and going to scale with me, right?
Yeah, it's pretty boring, but it's kind of cool when to preface the others, so we'll move into other stuff.
Text rings, right?
Annoying, even in Figma, quite annoying to do.
Just use some Pythagoras right because now you've got sin so you can do like on the fly.
I can be like I Don't know you looking Cool out there,
I don't know,
typing on stage with this lighting isn't great,
but it will scale as I want it to All I'm doing is updating custom properties here
And it's just doing the math for me because the math looks something like that.
I'm taking the index,
which I explained ages ago,
and I'm just using an inner angle, and then character width, which CH, another thing, and just plugging it in, rotating them all.
Yeah, get on, show me something else.
Right?
So you could use sin,
which is the one we just mentioned,
but you can also use it for like an animation delay to do like a cool easter stagger,
so this follow wants to check your code out all at once, right?
But then if I used sin, I could be like, that sounds so wrong, you just sin.
I could just do like a nice little one.
feeling, right?
Because that's what it's about.
And you go, there's the different ways.
I've got a delay set,
but then when And if I was doing it like a linear step, I'd be like, how many, how much should I increment it by?
Is 0.0 325 seconds times the index and it's like, I don't know, I'm just going to be messing around with it.
But seen I can just be like, okay, what's my spread angle?
I mean, you probably want to work at this map some other time.
Blurring, right?
Blurring's another good one.
People like a good blur and then the developer has a meltdown when they have to try and do it and Safari hates it.
But we'll show you how it works anyway.
Essentially, you're overlaying something in lots of layers, right?
And is where the exponential function part comes in quite handy because you can layer up these little bits and they progressively blur,
but like mask more intensely, if that makes sense.
But you could like move this around and like you can see the blur gets stronger as you go in.
That's how it looks, right.
You use it with an exponential function.
You like blow up the layers.
We didn't actually show that.
If we do PAL.
All right, all these configurators, then forget how to use them.
This isn't going well, is Right, there we go.
Steps.
Yeah, so you could do the width up and then make a multiplier.
Yeah.
And you could use power and scale it up.
You throw it into an image mode if you wanted.
You can do all these fancy things.
But one way this would work is if you wanted to like, you know, like alpha overlay and that won't melt your CPU.
So you could do that.
And that's how it looks, right?
You then plug it into perspectives or like,
perspectives, parallax, because you're now able to like throw
the point of position in from earlier and then do a little like parallax with your blur and it's like all looking slick.
Everyone's just cashing those checks.
All and then plug it into your device orientation.
That's like kind of nice.
That works.
And you can see in the background dev tools is also doing it.
But haven't got time to show you how to set that up.
So we need to talk about color.
All right, so let's talk about color.
And you can now mix colors on the fly in CSS, which kind of cool, across color spaces as well.
I've not actually sat down and spent enough time with LCH and all these things, but it looks kind of cool.
But the real unlock here is like,
essentially, I'm saying color makes a color in a color space from one to the other by however much percentage I want.
But the real unlock is when you say something like,
hey, I've got color and I want to mix the alpha,
or like, oh, actually, I want to mix it and be like, let's just make it lighter.
I care what color you're going to give me, I'll just make it lighter.
And that's kind of slick.
when you do something like feeming and maybe you got like a note or something and you're like,
I just want to write it once and not have to like come up with a billion colour for like variations.
So here I can just be like, let's grab that and one of them should change.
There you go.
So like,
I just write once, forget and like get on with the rest of my day so I can make other cool stuff like blurs, right?
And that's how it looks.
So, color mix, take a thing, and I would do is pass a custom property where I'm like, here's a color, and then you're going to change it for me.
And also coming down the line is another thing called relative color syntax,
where could be like, from a color, do something to this channel or this piece, and, like, alter it on the fly.
Kind cool, but we have other stuff to get on with.
So, view trans This whole Becca's view transitions, that's a view transition, because every slide is a
new page and it's a cross document view transition, which kind of cool, so header goes between when we come back.
That's a bounce done with CSS, like CSS linear.
That's nuts.
So them out.
But they don't have to be cross document, right?
It's a DOM update at the end of the day.
That's one thing a lot of people like this out.
So the ultimate view transition like quick win is a progressive enhancement toggled theme.
Like you can just switch your theme out.
If you haven't got view transitions,
you didn't see it,
but those that did got to see something cool,
right, so like in my page I could just be like sweet and I made a clip pass
off of the before shot on the after shot, which actually how ViewChances works, right?
You get a snapshot of what you're going to and what you're coming from, and you can animate the image.
So you can do like,
you can get kind of weird with it,
you can do like some slides, like that's okay, or you can just like be really out there and just flip the whole thing around.
But notice how the header changes between the modes, that's quite a cool thing that's kind of slipped under the radar.
This idea.
which is a function now where you can be like,
hey, if my colour scheme is light, set colour and if it's dark, set this colour, that's kind of an unlock and I thought it was
worth mentioning because it's supported and I completely missed that.
Transitioning display none.
How do we have time?
We have loads of time.
Transitioning from display block to display none.
Display, display.
It's always in the DOM, but just hiding and showing it.
You don't have to write some JavaScript, document or element.get animations, finish, then it.
No one wants to do that.
We can slow that up and translate it a bit more.
Scale it in blur.
It We love blurs.
See it goes in.
And then how it comes out.
We can change it on the fly.
But the unlock here is...
at starting style.
So at starting style says like when something changes this is going to be the starting style I transition from when I'm in like my
display non-state and here I'm just saying custom property 0 to 1,
present and then transition the property display overlay and this transition
behavior allowed to scrape it is important but again you just check these out there right we're just here for the pre-images.
pop-over is in the positioning.
Kind of related to the dialogue.
This is the unlock that we had at the start,
this ability to open a pop-over or put something in the top layer which is outside of document, no zed index applies.
You need any JavaScript, you get your light dismissed, you autofocusing, you your starting style, you open it up and it's like, cool, all right.
But the anchor positioning part is pretty neat.
So I've the menu, great album as well.
Scroll and the browser is working that out for me, which pretty neat.
And when I, you know, I drag this around, obviously that's a bit of JavaScript.
But CSS is handling all this for me.
It's everything in the viewport.
and I'm like, what?
And that's all it takes.
Like, I this position try options when I've got my anchor name set on whatever it is that's triggering, so in this case a button,
I set a name for it,
and I'm like,
right, set it at the top and right to the anchor which is the button, anchor it on, and this tri-options is flip-block and flip-end
line that keeps it all in play.
The reason we go through the boring stuff and now the browser does it for so we can focus on the really important stuff.
Naturally, I'd rather spend time on this than worrying about if my pop-over is in the right place.
Nope.
Nope.
Yes.
Right, that's way more fun.
Right, so popovers into skies.
It's a popover, right?
It's a button.
But like, it's a disclosure at the end of the day.
Like, it can just be a form that pops out of a button.
Because if I slow it down, you can see how it morphs back around.
a button that morphs out and all I do is I copy the style of the pop over and when I hit
the button I just morph it up and you can anchor it however you want it could be like
to the top or the bottom or morph it to the left or to the right,
you could do whatever you want with it and the unlock here is that you do something like
anchor size and that gives you the size of whatever your anchor to, which is kind of cool.
But it all gets you towards something like this and now we're getting into this zone of like linking all these little pieces together.
So we've got a little dock and you hover it and it's all CSS again, apart from this piece which.
is me.
And as you get that out of the way,
as you hit the dock, you can just spring a little thing up, but it's a pop over again.
An is keeping it all in check.
It's Wow, that's pretty nuts.
But am I getting that little curve, right?
It be transform origin.
I feel like I'm talking to myself.
Let's get that out of the way.
Right, but the trick is, remember our friend from earlier?
Offset path.
When I open the popover,
I've just got a massive arc element and I just say,
hey, open and inside the popover create this huge element inside a zero sized popover and then just spread it all along.
It makes sense when you play with this stuff all the time but like you know I'm just here to show you what's kind of possible
but that's how it works and then the has part
for the dock is here so that's the trick we're using the offset path again
we're using our starting style to it up it's custom properties all the way down
it's like and we've got a little springy ease because we now have linear and
that looks like that and that's another case of right once don't touch ever
again because you'll just drop that into your style found like just use spring and yeah And that's how the has-par works, right?
It's just like hovering on and just being like, sipping selector's sweet.
I use or I can select the previous sibling and do something to that as I hover one that's further down the road.
has.
That's been around a while now.
And scroll animation.
We've got plenty of time, right?
So let's scroll through.
All right, so oh, sweet.
All right, so we can scroll up the ability to drive CSS keyframes animations with scroll using CSS alone.
Pretty sweet.
And like different ways you can kind of.
attack this,
so you have this concept of a view timeline,
so when something enters the viewport,
like using its position within the viewport,
and then you have this concept of a scroll timeline,
so where you're scrolled at on a page,
like using that to drive an animation, or one of the tricks you'll tend to use is using sticky positioning, right?
When something gets stuck,
use its parent because like a spacer to like space stuff out which is kind of neat and then position
fix so like your parent you're gonna animate based on your parent but
then fix your thing somewhere else and just be like cool when it comes in animate that when something else is happening.
They're all little tricks that you kind of pick up from messing around with this,
but it all ends up to being in the little details that make your sights feel great, right?
That's kind of cute.
The character bit work?
Oh, it did.
Nice.
I it keeps scrolling.
Whoa, what's going on?
Okay.
Yeah, pretty cool.
Oh, God.
Breaking it at the end of the day, fortunately.
But yeah, this is like the hello world of scroll-driven reveals.
View timeline, in you come.
That's how it is.
Animation, range, entry, you all these keywords that you can use and you're just using a view timeline.
don't have to do massive scroll-jucky things though.
You do little micro-interactions here.
We've just a header that pops in.
Mindful back clocks as zeros.
So get a move on.
Scroll root, header height, use the header height, shift it as you scroll down.
take a load of images,
looks all right,
reflect them,
yeah, cool, animate them, do a little bit of parallaxing as you go across, again it's just little lines of CSS doing all of this, view timeline,
item, inline axes, that you horizontal scrolling.
Sliders, is it a slider?
No.
It's a range input in disguise,
because can put a scroll timeline on a WebKit slider farm and use its position and its position is contained and it's within the div and check
it out later.
And then put it all together, right?
You've just got a big old carousel,
you've got trigonometric functions laying out in a barrel,
you've got some masking, you've got some filtering, you can do all the things and we're using a timer.
So this to like,
I want to drive scroll animation with something,
but I need to hoist that scope up so I can use it elsewhere and that's essentially what's happening here.
So if I turn on the debug,
you can see that I'm actually scrolling one thing and something else is moving and you can like rotate it and do the back face and like,
yeah.
you're just scrolling along.
It's kind of cool.
You can do like, yeah, cool.
And that's pretty much it.
That's how it looks on a device.
You could do some scroll snap.
And yeah, I've been Jay Tonkins.
That's the end of the sprint.
These are the things that you've seen.
Go try them out.
Come find me.
Boom.
Done.
Lingua di traduzione
Seleziona la lingua di traduzione
Sblocca altre funzionalità
Installa l'estensione Trancy per sbloccare altre funzionalità, tra cui sottotitoli AI, definizioni di parole AI, analisi grammaticale AI, parlato AI, ecc.
Compatibile con le principali piattaforme video
Trancy non fornisce solo supporto per sottotitoli bilingue su piattaforme come YouTube, Netflix, Udemy, Disney+, TED, edX, Kehan, Coursera, ma offre anche traduzione di parole/frasi AI, traduzione immersiva a tutto testo e altre funzionalità per pagine web regolari. È un vero assistente per l'apprendimento delle lingue tutto in uno.
Tutti i browser delle piattaforme
Trancy supporta tutti i browser delle piattaforme, inclusa l'estensione per il browser iOS Safari.
Modalità di visualizzazione multiple
Supporta modalità teatro, lettura, mista e altre modalità di visualizzazione per un'esperienza bilingue completa.
Modalità di pratica multiple
Supporta dettatura di frasi, valutazione orale, scelta multipla, dettatura e altre modalità di pratica.
Sommario video AI
Utilizza OpenAI per riassumere i video e comprendere rapidamente i contenuti chiave.
Sottotitoli AI
Genera sottotitoli AI precisi e veloci per YouTube in soli 3-5 minuti.
Definizioni di parole AI
Tocca le parole nei sottotitoli per cercarne le definizioni, con definizioni alimentate da AI.
Analisi grammaticale AI
Analizza la grammatica delle frasi per comprendere rapidamente il significato delle frasi e padroneggiare punti grammaticali difficili.
Altre funzionalità web
Oltre ai sottotitoli video bilingue, Trancy fornisce anche traduzione di parole e traduzione a tutto testo per pagine web.