Press "Enter" to skip to content

Pair programming Web Components with Paul Lewis


and now that we we refresh all being
well it’ll go and yeah it’s yes go I
really like it
please add that sound effect yes good
Monday morning how do I do this Jesus
Christ
I now get all all self-conscious and yes
you got me watching you this is this is
how the sausage gets made this is fun to
watch good Monday morning
today I have Paul Lewis with me we are
doing some type of collaboration not
exactly sure what but but first a
sponsor is brilliant but by now you know
that brilliant is a problem-solving
website too that teaches you how to
think like a computer scientist if
you’re interested in finally learning
about machine learning and linear
algebra and all that stuff behind it all
other math then brilliant is for you
instead of listening passively to video
courses which a lot of sites new
brilliant offers these interactive
challenges with gradual gradually
increasing of difficulty which is really
really nice too I keep harping on about
how using brilliant is kind of like
playing a game with this gradual sense
of progression it’s very satisfying you
use million trillion /ban fun function
when you sign up to to tell them that
you came from here also if you are the
first 200 to sign up using that link and
get 1% off you get a no subscription
did you check them out after the video
that link is also in the episode
description we talked about like how you
should give me some kind of coding
assignment yeah and when we spoke about
it you said that you’d never done a web
component before and I thought I mean it
that feels like you should do that just
at least once in your life even if you
don’t do it all the time I don’t know
like what I don’t even know what they’re
for
oh well I’ve got a video on that No
I think well I’ll it will link it in the
hang on
is it I never remember which there
yeah yes that corner I think in this
case you could treat it as the leaf node
like say you’re doing react up react or
something like that and you want some
kind of leaf at the end instead of a div
you actually like kind of reusable thing
so I think there’s no point in making
anything that’s actually useful
that would seem silly but I thought we
could do as since you’ve not done this
before is we could create a custom
element you shadowed on and inside the
shadow Dom use a slot and I thought the
idea we could pursue is what have you
put inside the element the custom
element say it’s an image or something
like that whatever it is you put in we
will make it spin up from a scale 0 to
scale 1 and like rotate so it’s like a
nice so maybe yeah grab your grab your
fun fun function logo and and as I say
we’ll just drop that into a page and
then see if we can make that work all
fun forum big oh no no that’s the fun
part forum okay but let’s keep that
that’s good like patreon promotion fine
well I picked the wrong one but yeah
interesting I don’t see it on my side
that pink but I’m sure it’s that alright
so you don’t you can’t see like what
what happens in a video you see like you
see transparent you just see they’re
kind of the checkered background I’m
sure it’s that so that’s all right do
you need to proxy your stuff across so I
can see what you’re building yeah hang
on like live how does this or like share
server enter the TCP port to share with
all participants so I need a web server
to do this like normally I do everything
and create react up do you have any like
go-to thing what that you work with when
you just need like a web server to share
HTTP – server like npm install’ HTTP –
server oh yeah right
created server
and p.m. install Canyon do I do that
globally yeah I would do yeah
HTTP – server yep oh that’s amazing
and then they limit the data you do the
NPM dance and you just and yet then just
HTTP server yep in the okay cool 8080
and then I go live share share server
and then I entered the TCP port 8080
provide a display name for shared server
fine all right now you should be able to
just go to localhost 8080 on your
machine if that works that is absolute
magic it is right yeah actually yeah it
works oh yeah I got the fun foam forum
logo that’s amazing sold yeah like I
should like the thing is I’m trying to
get like the visual studio code team to
like sponsor this goddamn channel
because we’re giving so much good
exposure and they’re like like we don’t
really have to because he’s doing it
anyway yeah I am I supposed oh it’s so
good alright so that’s progress we have
a web server and I can do things in this
and I can probably do like an HTML file
here as well now it seemed like a good
start
yeah oh this is gonna be like index.html
boom then like type HTML tags there we
go Wow Wow doing that by hand I have the
HTML then like the autocomplete version
that’s like there’s a sample the snippet
you know like did you say oh yeah
the thing is like I’m this tooling
alcoholic whenever if I start doing to
Lee
I do only tooling and no work oh oh I
see
like I recognize the utility of tooling
it aside
like I can’t deal with it Oh sweetie
it’s not it’s not a fault of the tooling
it’s like I’m a horrible person
okay so you’ve got your HTML it’s a
start
go for it all right so and you’re
talking about like we we want to place
this logo here somewhere
suppose yeah oh yeah I guess that’d be a
start yeah I understand yeah I’ve got
Jesus oh the actual completes there we
go okay there we go all right look
yay okay cool I’m laughter me all right
so uh what are we gonna do but we’re
gonna turn this into web component yeah
so I was thinking what you’d want to do
is that image there you want to wrap it
in a custom element of some description
so like I don’t know
spin element or something like that so
the idea is you wrap that image in your
element and magic will happen as in
whatever you put inside we’ll just put
in a slot and then we’ll make everything
spin okay so you that one is just wrap
it in a custom moment all right fine so
how do I do that well all right start
typing pick a name you got to pick a
name the name all right so we just pick
like it’s so I would call this oh wait
is this what you mean like turning it
into something called a logo yeah so the
two things one is it’ll have to be
lowercase and the other thing is it has
to have a dash in its name oh okay so
perhaps FFF love yeah something like
that
and the reason why the – yep so the
reason is if you were to look at the
prototype of the element yeah it would
say HTML unknown element if it’s not
going to dash in it because no platform
provided element has a dash in its name
whether it’s like select or dev or P or
whatever oh so in order to know that
it’s a customer or going to be a custom
element the agreement was it’s gotta
have a dash in its name somewhere this
is the the most bonkers part actually
now say that’s the most bonkers but it’s
not the most bonkers part there’s plenty
of bonkers around the whole place but
that
part of it so yeah this would work so I
guess now you want to drop that image
inside that’s that’s a like line four or
whatever all right so I like I kind of
love stuff like that because everybody
is like whenever there’s and everybody
is like oh javascript has these warts
and Java has these warts and C++ has
these warts but look at this new
language that I’m coding in how amazing
and clean it is oh it’s just clean
because it’s new dude yeah yeah yeah so
now you’re gonna have to start defining
what FFF logo actually means so for that
you’re gonna need your JavaScript okay
cool so hmm do we do this in a new file
or do we keep no I’m gonna do a script
tag for now mmm okay yeah cool are we
okay with that Wow this is your code
you’ve got to maintain it fair enough
all right I’m gonna change this to two
spaces instead Oh God
you see you see my problem here like I’m
procrastinating already no you see – two
minutes into a project and I don’t know
how to define my element I’m scared of
this process let me just do something
that I can control for me right now yes
exactly but it’s a growth opportunity on
camera there’s nothing wrong with that
yeah I mean breathing all right script
tag so how do I do this I need to define
the custom element yeah
do you know the API I do not okay
so what you do is you do custom elements
dot define so custom lowercase and then
it capital lien elements not defined
yeah define and then you’ve got to give
it a name so that is they’re looking for
the name of the tag so this will be your
FFF – logo this is a function oh yeah
yeah so so you’re basically saying when
you find a tag of this type yeah now I’d
like you to instantiate the the
following thing so you’ve got to give it
a class in the second part I think it’s
you don’t even have to name the class
you can be like class extends HTML
element if you so desire at this point
okay so it’s
like fun so something like this like
last like that yeah that will work
you’re just gonna need to define that
class somewhere and okay cool and we
need a constructor I suppose yeah so
straight away sorry one thing that
didn’t mention there is that you’re
gonna have to extend HTML element oh and
you yeah you’re actually so this is how
again this is how it knows that you can
do all the things you’d want to do like
a pen child or whatever yeah so this is
kind of interesting now because you as
soon as this runs in the browser it’s
gonna be like okay a found FFF logo
here’s your thing so you could even
construct if you wanted to test that you
could do like a console log or something
that’s like oh hi from my logo
alright like here yeah hello from logo
right let’s refresh inspector here like
this is this is a constant problem here
like and this seems where do I put the
cones like the I have not yeah there it
is
okay function logo is not the fine I
suppose this before because I need to
move it above yeah let’s see where there
we go right now try again and now I must
call super I forget that I forget that
all the time this is one of the moments
where I really like typescript because
typescript will be like by the way just
so you know you need to do the super
thing so yeah likes typescript I had
like I would love to use typescript if
that was what it did then it like
complains about like a weird thing you
take eight hours to fix yes that’s the
thing what it works for you it really
works for you when you’re fighting it
going no no just trust me please
yeah that’s when it can be a bit
yeah all right cool so now we have the
hello from logo that is over here mm-hmm
okay so the thing that we want to do
first of all is we want to create a
shadow root the shadow root is basically
the place to contain your gross it’s
like the place where you hide the
implementation detail of your element
yeah so let’s talk a little bit about
there because a lot of people here might
not be familiar with like the shadow Dom
can we talk a little bit about what that
is yeah why it exists yes so briefly
yeah so if you think of something like a
video element that you get with the
platform it’s got things like the
controls inside of it right which are
actually elements like their Dom
elements buttons and whatnot inside but
when you inspect the element in say dev
tools or whatever it’s like there’s just
a video element
it’s so like that all their
implementation detail and the elements
and so on inside a hidden and that’s a
way to think of shadow Dom it’s your way
of saying there is some gross but it’s
just I’m hiding it so that you do all
you need to deal with is the stuff at
the top level right there’s that you
need to deal with in this case will be
your FFF logo and if we have stuff like
divs or styles or anything that we want
to encapsulate inside the element just
for that element we pop it in the shadow
Dom all right
Britain okay get it cool all right so
let’s get into it so it’s just a
straightforward in theory as being able
to say this dot @ @ shadow inside there
yep this dart at add shadow and then
it’s gonna it’s a it’s a function so you
need to give it a mode it’s an object
which is named to do you say it’s an
object the emissive passive which is
which will have mode and then you want
to say open the open and closed mode is
the Lord the autocomplete for this thing
is amazing like that it’s normally the
the the autocomplete for visual studio
yes is just disturbing and annoying but
here it actually works I don’t know what
they did I don’t know they do seem to
understand this one really well yeah
it’s kind of cool so your mode is
basically whether an
you can get it the shadow root from
outside which in this case you probably
want to do just by default just choose
open there’s no reason to close your
shadow root necessarily okay so this is
this is a string yeah so one of the
things you’re doing here is if you
notice you’re operating against your own
instance which is kind of cool so that’s
it you’re done so you save that go check
and if you now look inside the dev tools
on the elements side inside of FF logo
your logo will have disappeared yep
but you should have shadow root brackets
open inside of that oh so I need to
open yeah I see it and you still got the
image there but it’s like it’s not
showing and the reason is as soon as you
attach a shadow root to an element
you’re basically saying this is the
contents of this element anything else
that was in there before I don’t want
their in ended on in there anymore like
to forget what’s there because you can
get it back in a moment by putting slots
which we’ll talk about in a moment but
it’s basically saying yeah I have this
shadow root use that as my kind of
reference point for this element and
anything else that’s inside it just get
rid of it you kind of see that with you
when you put something inside a canvas
element it just it will just ignore the
contents of a canvas I think after if
you start actually drawing in the canvas
it’ll be like wow just ignore anything
else you put in there just kind of
interesting yeah so you what we need to
do is we kind of need to get the image
back now from you know from the light
DOM and drop it into the shadow root so
the way we do that is that it’s that
would be used slots for that is what we
use slots for so slots is because if you
imagine now I mean sort of fast forward
a little bit inside your shuttering you
might have like divs and buttons and
everything else yeah and what you want
to do is you want to put a little
placeholder a little marker inside the
shadow root and show the shadow Dom to
be like by the way if you see images or
something or whatever you want it from
the outside pot put it in here and you
can name your slots but in this case
because we’re just going to probably
have one slot we don’t need to name it
and it will assume that if there’s one
slot that we just want the contents
that’s in the on the light I’m outside
of the elements of your image we just
want that dump straight into the slot
okay okay so this is where I guess I
think probably slightly more interesting
because we have to create a template tag
or a template element you can do inside
the JavaScript if you want it’s about
you where you want to do it I tend to do
it outside of the class that’s the word
outside the class yeah so you’re not
exactly know I have no basis for my
decision I get off elf-like know that
you could be completely arbitrary here I
mean yeah why not
so yeah we need a template so document
create element template kind of thing
all right so like create okay yeah great
element oh yeah and then said little
goatee speech marks yeah we want
template oh okay I’m get you cool so
what do I do
like assign that to variable yeah this
is fun for me too much yeah you want to
monkey with the innerhtml on that so
it’s like template innerhtml
equals and then some HTML and I could we
could start with just like slot that
would be a thing to do just so doesn’t
it quote he quote slot as in in angle
brackets okay I get you know no sorry Oh
what are you angling ones would you call
those angle brackets Oh would you yes
the thing is like when it comes to
English and it’s just that I don’t have
the connection of like angle brackets
and curly brackets in my head like it’s
usually like you’re communicating
through through chat or something right
about the pair so often when you
communicate around code you just don’t
need to use those terms right so it’s so
rare for me to actually refer to them
with English that I guess yeah I guess
called the the curly brackets I just
called them squiggly or yeah you know in
Swedish more swinger which is like you
know the no I don’t know the white bird
that is horrible
no it’s they
they always have like their kids they
walk around and then if you walk close
to the kids the bird starts squeaking
and it shits on your head it slips my to
see seagull yeah seagull yeah seagull
wings that is what we yeah but that’s
what you call them in it in Swedish like
in the colloquialism I have no idea why
no I have no idea why but I did enjoy
your description that helps an awful lot
alright got a slot and what we want to
do is we we want to take a coffee of the
slot from the template and drop it in to
the omelet so there’s two things here
one is that there are two life cycle
callbacks inside of an HTML element or
custom element sorry that we need to use
this connected callback and disconnected
callback okay and we don’t need anything
apart from the connected callback right
now so we’re saying when you drop this
element into the Dom yeah I want you to
do something that’s what connected
callback is for and I guess at that we
would copy the template and pop it into
the the shadow Dom so how do you do that
it’s just like just connected yep
connected callback that’s it oh is this
guessing like a like a P is that you can
just guess because that means that they
are intuitively designed yeah so my my
thing with the connected callback and
disconnected callback is I normally use
them for setting up event listeners and
removing event listeners from the
element so that there it’s a little bit
clean and tidy in this case I guess what
we do is we do this dot shadow routes
because by attaching a shadow we get
this magical property called shadow
route that we can now access so we say
this dot shadow root dot append child
and then we tell it what we want which
is template dot content dot clone node
true but we’re doing it on set my head
here so the the thing to do it would be
to do this dark shadow route and every
low case is capital R append child okay
cool so and then easily append the
template yeah close so what we need to
do is we can determine we could try and
get the template content so because if
we append the template we word with donc
one we want a new instance of the
template yeah so the template
itself is like inert HTML it’s not
actually useful you could append it and
you wouldn’t do anything what you want
to do is you want to kind of you’re kind
of reaching inside the template going
well whatever you are actually
representing content it’s it’s a
subtlety and it trips me up every time
oh yeah of course
like when I think about it it makes
sense because the template is yes this
is just a nonsense element really right
right it doesn’t do anything it’s just
like this placeholder the browser I
don’t say ignores it but it doesn’t
render it doesn’t do anything with it
yeah looking at this I had no idea that
you could do this like if I change this
do you like waffles would that still be
functional or does templates have a
special significance you can do any you
can which create element with anything
that the browser understands so like div
or P or strong or you know cameos you
can do that and the browser understands
what template means yeah you could also
do create element with your custom
element name so you could have done
create element FFF – logo instead of
actually putting into your HTML that
would have also worked yeah
all right cool so so how do I actually
do this I need to reach into the
create things yeah it’s basically one
template content or contents content it
will autocomplete for you your content
content now that will give you that
particular instance the one that you
created and since we we’ve only got one
template and we’re only using the ones
that’s fine but if you wanted to reuse a
template across multiple elements you
DUPLO note here as well you know so
cleanliness you basically you leave the
original template content alone and you
and then you probably want true which is
the recursive flag because it’s a
function what clone odd yeah it’s a
function and then inside that there’s a
boolean which is do you want to be
recursive or not okay and so if you if
your template has dibs and so divs
inside of divs or whatever it’s like I
don’t a shallow copy I want a copy of
yeah like everything inside that place
is it just me that things like these
functions that have one argument which
is a boolean or horrible no I said
nobody like this is here something that
people learn and then they have no idea
what they yeah it’s just why it would be
so much better if the API was like hello
node dot recursive I I would like to all
api’s to be like this god I mean this is
the boolean trap right that you see time
and time again where you like you say
you discover modes it does true mean
recursive or is true shallow or yeah I
mean you know take out the bins yeah I
just I can’t remember you know cool so
in theory what we’ve got here is we’ve
we’ve got something that should copy
from the template the slot and what the
slot will represent is hey if there’s
anything that’s been put inside of this
custom element go fetch it and drop it
inside the slot right so all being well
when you fresh this should do something
all right
it does stuff all right let’s have a
look okay
when I’m inspecting this I’m checking
inside the FFF logo yeah and I see you
like now the shadow root actually
contains like a I can expand that and I
can see you like okay now I get it okay
so the shadow root is the stuff that is
inside its hidden and not displayed or
anything right and then I can I have
grabbed the the temp there’s a slot here
yeah I’m the shadows I did not expect
that why not well you said that slots
were stuff that we used to get things
out of the shadow Dom so I kind of like
in my mind I figure that slots would be
something that I put outside of the
shadow Dom no so what we did what we’re
saying here is inside that shadow root
there are markers there are placeholders
where I want to put content from outside
the element inside the element oh so
it’s like you could have had some text
or you could have had something so if
you imagine making a custom on that you
want to give to somebody else like a
carousel or something yeah right and you
can be like use my custom carousel
element but what I want you to do is I
want you to just drop like a list of
images inside it you need to be able to
slot those into your custom elements
kind of innards if you like and be like
okay image goes here image goes here
text goes here and so on so that’s what
the slots are for so what it’s done is
because it’s not a named slide it’s just
it’s called slot yeah and you can give
slots names as I said it’s just going
right I’ve got one slot and there is
some content inside of fff’ logo so I’m
just going to just drop that in and
assume that everything is as it should
be now if you if you expand slot inside
of the shadow root you’ll also see that
it’s kind of got this little kind of
arrow pointing across the image yep I
say it’s kind of I like to think of this
as like a symlink it’s it’s not actually
there it’s still out in the the light
Dom all right okay that will matter I
can either give you the the shortcut
version here about how to animate this
or we can do what you think is intuitive
and see whether you net out at the right
answer and I’m giving you a him by
saying it’s more like a sibling but I’m
I don’t know if it’s gonna be enough of
a hit it’s a call me out when I was
playing with this so alright but like
yeah I think that it’s more fun when I
try to figure out the problem on my own
and you then know okay
I also like like this little thing that
you can click reveal in the chrome
developer tools and it actually jumps to
the light yeah let me know your with
your explanation in mind like that
actually makes sense
cool so the thing now that we want is
that we want to be able to pick up
whatever’s in the slot yeah we want to
kind of animate it up right all right so
I guess we do this after we have
appended it to the to the shadow roots
and let’s go like we need to okay we
want to get whatever is in this slot and
the slot is in the shadow root so I
guess shadow root dots
[Music]
get element by ID perhaps no we don’t
have an any ID you get element by name
so what are you thinking of doing here
where’s your head going in terms of how
are you going to call like element
animate or are you gonna do a CSS
animation okay so here’s the thing
animation was not a thing when I started
web development it was like moving
things by X like CSS animations did not
exist then I started at Spotify which
was this place where I basically was a
like car I didn’t really touch the the
Dom all that much or CSS we had people
doing CSS for us and we were like the
senior JavaScript developers and we were
like doing business logic and figuring
out like how to do scrolling things like
animation didn’t really have to do much
to be honest so I was just thinking
about like at this point I would just
grab the element and like just move it
by X or something like yes to get
started okay well okay he’s like what
the what what I have to say it’s so
hard it’s ok with that you know that and
this is the thing I completely agree
with you it’s only because I’ve spent a
lot of my career working with animation
that this for me it’s like this is my
backyard so I kind of get and a
completely understand what you’re saying
and I think it’s the the situation that
most people find themselves in going
there it feels like should I use green
socks you know you CSS animation should
I you just yes grab it and like set
styles where does requestanimationframe
sitting all this like help so I can
completely understand it but I don’t
know like I need to get the slot
elements to begin with no and that’s
what I’m trying to do like I just baby
steps so I have this what happens if I
if I even do this it’s slot and
yeah I’m curious as well actually all
right yeah okay I actually get this lot
that’s good
now the question is can you do anything
with the slot hmm let’s see there is the
there is the element that animates API
which you could try here all right so
slot but let’s just get the image also a
query selector like I’m gonna start with
this and see if I even get an image I’m
guessing no you can never go say yeah
because this is like as you said that
this is some kind of reference
thingamabob like a symlink what I
printed a string you’re gonna definitely
get an output yeah if we didn’t do pair
pair programming here like I that would
have thrown me off for like 20 minutes
because I wouldn’t be able to see it
yeah yeah I noticed this straight away I
thought all right so that that didn’t
work so here’s gonna be yeah here I’m
stumped like how would I get to the
image so this is I this is the the thing
I don’t think you necessarily want to
get the image okay you you probably want
to actually animate the whole logo
itself all right so like this yeah so I
don’t really want to maybe even not even
the slot but the entire thingy yeah I
think you could do like this dot animate
oh yeah because this is the yeah because
function function logo is the actual
element yeah okay cool so this has
keyframes
okay let’s is that what we working with
like no it’s instant it’s an array of
keyframes so you just want to pass it in
a ray to begin with
oh so it’s not a yeah it’s not the art
mmm like that so now we are animating
keyframes yeah and so here you it’s like
you’re doing the CSS style so you’d be
like transform scale zero okay so it’s
an object even each
keyframe is an object yep see I’m great
there and they transform transform yeah
and then this would be a string which
will be something like scale zero like
that
no it’s again this is with the weirdness
of CSS isn’t its scale bracket zero
let’s go around no the curly ones around
your leg the Siegel ones the ones that
are so hard to make on my my goes X like
this is this is a dangerous thing where
the Mac OS is that there is this move
for doing it it’s like three you have to
do oh let’s say it’s shift alt and then
the there’s like parents and the thing
is that I also I use a might like a
microscope keyboard see still mine it’s
like shift nine or whatever I yeah just
since it’s made for it like and it
displays the wrong thing on this
keyboard so I have to keep this like
completely in my mind and sometimes I
just forget how to do it and then I’m
screwed because I don’t actually like
I’ve long since remembered like
forgotten how what it what the
combination actually is relying on
muscle memory and if the muscle memory
fails you fail exactly it’s like the pin
code you do like work for like years and
then one day you just like I have no
idea what the pin code is yeah all right
so no it’s it’s more like scale per
ampere and I mean I can it’s like you
know it’s like double and that oh okay I
get it
yeah but with curved brackets curly
brackets yeah do you know do you know
that the hand maneuver for this one no
like should I should I change it to
normal yeah no it really has no no no
it’s it’s it’s these round yawns yeah no
there’s no it like that is actually on
my keyboard oh you know that’s a relief
yeah yeah you want you want it like that
like I’ve got it right there alright so
yeah yeah okay so we we so we need a
second keyframe which will be like scale
one so we just need another object with
transform inside it and then scale one
all right so I’m up like that yeah
and then the I’m gonna get rid of my
stuff there tidy up all tidy up and then
the second parameter for animate is an
object which takes a bunch of values
like the duration and he delays the
timing function that you want to use so
we just need another object kind of here
on line 27 yeah which is like so the
minimum I think is duration I think if
you just start with duration and then
it’s the duration in milliseconds so you
like duration 1000 for a one set right
so like that yeah now this may or may
not work we should find out all right
brilliant let’s see did not work
yeah didn’t work okay and I wonder I
wonder I wonder I wonder if it’s because
of the the element being display:inline
by default rather splay block all right
so we need to have the FFF logo be like
well you’ve already got this template
with the innerhtml with the slot inside
on round 8 you can artist an extra
element in there a style element and the
style will only apply inside of the
shadow root okay so okay so if you got a
style tag inside of that inside of there
and ml yeah but before slot for example
okay like this yeah like that what that
what all right and you yeah and then
close it off and then inside of your
style if you do : host it’s a pseudo
selector that’s saying I want to I just
want to talk about my parent element for
a second all right cool and inside of
the host of you like display block or
display inline probably inline block
actually would probably be a good thing
here oh yeah
wow this is so weird is it now yeah okay
basically this this hTML is just gonna
get dumped inside of the shadow root for
us so now if we refresh oh we did it did
it did it did it it it it is oh my god
wow that’s so that’s so smooth
right now so that’s let’s 60 60 FPS
smooth um yeah I’m just gonna refresh it
for a little while because I’m so
excited you do that oh like Nick I I’m
just gonna refresh this until like my
brain no longer dumps dopamine from the
effect you think all the time okay all
right I think I good inside the dev
tools if you look inside that shadow
root again yeah you’ll see that you’ve
got a style which has the host
display:inline-block and then the slot
image and so on oh I see it yeah so it’s
just this is just like I just want
there’s all this HTML just throw all the
gross inside of my shadow root that’s
basically all you’re saying here and
like how does start acts like I only use
style tags ever in like in the head
element it’s the only only instance
where I used it like I didn’t really
know that you could use them in any
other place you can and normally any
style element that you drop into your
page would apply globally it’s only
because you’ve got the style element
here inside of a shadow root it hits the
shadow boundary and goes enough I will
not I won’t apply these styles outside
of this all right cool and also inside
of the shadow root you’ve got this like
these extra additional magic ones like
host yeah there’s another one which is a
pseudo select which is double : slotted
so if you actually wanted to style your
logo yeah you can do that from inside
these styles as well if you wanted to do
that so okay cool
so that’s kind of it’s a it’s a thing
you can do so in this case let’s I guess
we can go back in that transform that
we’ve got we’ve got scale 0 and scale 1
yeah absolutely needs a rotation so if
you put on that first one on line 26 you
have to put a space and then rotate and
then curly brackets and we’ve got to get
it aiming for these yeah we’re gonna get
name for these otherwise Oh rotate like
but that’s probably dumb but it’s just
and then rotate like 90-something now
let’s do let’s do 1080 alright like 3
full turns but you’ve also got to tell
it 1080 yeah we’re gonna get we’re gonna
spin it right around like you’ve got to
give it your you’ve got to give it the
units so it’s actually dag deg aha
and same for the zero and now oh my god
I mean what is not to love about the
that is so cool that is like literally
like that is actually what we talked
about on Twitter I was just joking
around but this is actually like the old
Batman logo you know so the other thing
we could do is I mean that is nice
levels of cheesy because it’s it’s
linear so no it doesn’t speed up or slow
down it’s just like I’m just gonna do
this vignette thing we can add a bit of
slow down if you want on this oh yeah
like an e same thing yeah so after
duration in the options for the animate
if you just put in I think its timing is
the property that you want and this is
the same as a CSS timing function so we
can do cubic Bezier I’m full you need to
put is a string sorry
yeah cubic okay this bears the air no
that is that correct yeah I mean anybody
who is actually able to speak French
which is not me is gonna be like your
pronunciation of busy a is terrible Paul
and I will I will fully accept it is
terrible but we’ll go with it and then
you need some you need phone numbers as
in parens after the busy a so I do not
common not common or point 3 comma 1
what what not point is like points all
like this is this is a weird thing like
I’m speaking English for like I’m no I’m
34 when you start learning English like
12 or something like for so many years
but when it comes to like talking about
numbers I’ve done that so little and
whenever I run into these things like
like everybody’s like what this is on a
child’s level he doesn’t know how to
talk about numbers when when I was in
Sweden one of the first things I noticed
was that so when we delimit our
thousands it’s like one comma zero zero
zero whereas in Swedish 1.000 right so
it makes and then of course you’ve got
the American where they say point
instead of dot and it’s yeah you can get
very lost in translation especially when
it comes to this that that particular
Bezier will give us a like a slowdown at
the end of our animation so it should be
a little bit faster at the start and
then it should just settle all right
let’s see how this works
yeah it’s exactly yes I like that that’s
in it that’s a definite improvement I
think and I’m still seeing the old
version I think I yeah or it doesn’t
slow down very much for me can we just
do can we just change it something
extreme to see try changing the second
one to like not 0.6
there’s second one this one over here oh
yeah oh sorry it’s I’m not sure if it
changes anything
do we have anything does it show
anything it doesn’t show any errors hey
I’m gonna go and have a look all right
let me just grab this and I’m just gonna
grab oh that’s exactly I’m gonna do that
all right
let’s see if that’s I mean that’s that
should be pretty extreme if he’s gonna
do it but I don’t see anything different
do you see anything different no not
quite no I don’t think so
is it cubic Bezier yeah this could be of
all the things to trip us up you know
this is cubic Bezier function it seems
like it though I’m gonna look reference
time I do it all the time
transition time is it raising it’s
easing easing is that what timing is
easing you think thing ease sing there
we go all right let’s try that
oh whoa that looked cool yeah there you
go oh that’s so nice that’s so like mmm
just really good so the the the one of
the things that we’ve done here by the
way which I didn’t really kind of talk
about on the way through by using the
transforms yeah there’s two things one
the element doesn’t actually change size
so if if you change that duration to I
don’t know seven generation just change
it to like a hundred seconds or
something yeah which would be like a
couple of zeros on it thousand hundred
seconds really slow oh sure that’s one
more zero and it will make you a hundred
oh oh it’s pretty cool like right okay
like okay then now it’s really really
slow but I make the coming correct Oh
Pete’s not even on my screen yet the the
actual elements itself in terms of other
elements on the page yeah it won’t
change size so it wouldn’t be pushing
other elements out of the out of the way
okay so as far as the browser’s
concerned this is kind of it’s still the
same size in terms of layout of the rest
of the page yeah which is super useful
because it means that you’re not kind of
recalculating where everything is on the
page all the time the thing is because
it’s a transform it’s something that the
browser can basically accelerate
typically so it’s normally the way
you’re gonna get 60 frames a second
animation so and of course it looks
awesome taking your logo and being like
let’s spin it up can we add a couple of
more keyframes do you like have it like
do the whole Batman thing up like going
it true going yeah Betsy
do that absolutely just add a third one
here a third key frame yeah
so back to zero I suppose
yeah maybe what’s what’s ten eighty
times by two was it to 160 yeah to 160
yeah
so that would nut should know now what’s
interesting is what it does at the end
of this animation it snaps back to the
full size version right oh yeah it does
yeah so this is a thing called fill okay
it’s one of the things that you can pass
the animate and it’s another one of
these properties like the easing not
timing mod and pull the easing or the
duration you can say fill and what
you’re saying is when you finish this
animation what what do I want you to do
and if you do fill and there’s a string
you save for words yeah it says hold
that final animation keyframe as the
value so it’ll kind of scale up and down
and then it’ll hold that final scale 0
so if you add after the easing if you
add another one that says fill for words
like no no get rid of that as in a new
whole new property in the object Oh did
things okay so fit their fill yep for
words there’s a string for words
yeah yeah fill modes are a thing that’s
it no you just for not just for words
you’re all set
just like oh that’s it okay no more all
right okay and now that we refresh all
being well to go and yeah it’s yes I
really like it please add that sound
effect yes yeah oh well I might use like
I I’m gonna use it I want this
transition like I read you like it’s
yeah do you if you happen to have
another image lying around anywhere yeah
just kind of image and just so instead
of just the the fun fun forum image just
grab another image and replace that fun
fun forum one with another
and I think that kind of explains a
little bit about the idea behind the
custom elements thing okay there we go
okay what what is that image yeah you
can wonder like it’s actually hang on
I’ll show it I mean I see a piglet yes
exactly
looking at a plate of food yeah so I
thing is like one thing that I’ve done
that has increased my happiness so much
yes to unfollow all of my friends on
Facebook I do that as like when Sweden
had elections I just realized that hey
I’m friends with my friends for
completely different reasons than their
excellent political commentary which
sucks me in a lot so I just use this
Chrome script to unfollow every single
friend which as a result I like the only
thing I now see in my Facebook feed is
vegan food groups
so just people push posting pictures of
vegan food that’s all I see when I log
into Facebook and vegan food pictures
nor surprisingly often have pictures of
animals in them so here’s like vegan
food and a piglet looking at it oh
that’s amazing really
yep alright so that so that’s what
you’re looking at so the short version I
guess of this for me is that you’ve been
able to just reuse that element around
the place really easily by defining your
like your FFF logo you could have just
call it like Spinney logo or Spinney
image or something like that and yeah
logo and you can just chuck whatever you
need inside there and you get that
behavior yeah and then you could kind of
going backwards you could use something
like react or pre-act and just use the
spinny elements inside of your app as
you have and it’s kind of useful because
if somebody else I mean it’s highly
unlikely in this particular instance but
if somebody else in your team was like
anybody got the the spinny image I need
a spinny image in fact everybody on the
team needs a spinny image you can make
it like this and then give it to
everybody else and it kind of works even
if they’re using angular yeah so we
should probably like rename this FFF
logo to something that is actually what
we’re doing it so sort of like spin it
like Batman
because that is more like what we were
actually going for it so this is more
like the contents of the thing yeah so I
mean I guess the other thing is your
custom elements not defined at the
bottom on line 38 you’re gonna need to
replace that over to I and anything that
this and we also need to refactor this
one to be that do you know what you can
do if you just undo that a second yeah
and you can hit f2 on your keyboard if
you can remember where if you okay f2
yeah and you should give you the prompt
be my would you like to rename this to
oh no that doesn’t work
this nah this is the hotkey thing like
okay it’s gonna be come on chef P can
you do that one yeah and then do
refactor okay for rename simple rename
symbol that’s what it is okay rename it
doesn’t show me anything
what oh maybe it’s cuz it’s in an HTML
file fine just do it just do what you’re
gonna do I’m just gonna do this okay
here’s here’s me using simple tools
I’m yes good you’re gonna do come on D
yeah no so then I have yeah and we’re
it’s been the thing I know you’ve got
this reusable element happy days tally
up get rid of that console Laura
OOP there we go and we have it like so
we don’t need references to any of these
anymore either right that they slot in
the image they can go no and the image
logged down here there you go whatever
that is it’s like 18 lines of code and
you’ve got your thing if you if you try
to open this in another browser you’d
have to have like the polyfills for
custom elements and shadow dom and also
the web animations API which is the
element animate but you know in terms of
just kind of getting going and getting
something out there yeah this is very
nice ball I like this a lot so I had a
lot of fun but I need like since we’re
over anyway in time I might as well like
at jumping or like a digression of why
you want to do web components and as
opposed to like a react component mm-hmm
for me I think if everybody in your team
is using react there’s no there’s no
obvious reason right you might just find
it easier just like run react all the
way through if it’s just you on your own
whatever right so what web components is
basically sort of like a subset of what
react components can do and it’s
standardized right yeah that’s probably
there’s a fair ways the standardization
is I think the main thing that I would
be looking for in terms of if so I’ve
worked on teams where people are using
different abstractions there’s like
organizational sort of components as in
the organizational level there are
things that people want to use over and
over and over again but individual teams
do things in different ways right so
somebody’s using angular somebody’s
using view somebody’s using react and
there isn’t standardization at the team
level about what abstraction you should
be using what framework you should be
using when that happens if your leaves
are web components it can make your life
a lot easier because you’re using the
framework as glue but you’re not using
it for all the way through and you don’t
end up going oh you can’t use that
component because it’s built in that
particular world that said as I say if
that doesn’t apply to everybody plenty
people are like oh I just have react
everybody’s using reacting our team then
I think you know how about it’s they
stay in the react world if that makes
sense for you
so yeah it’s the reuse is there it’s the
sort of being able to send it around
internally externally and all that kind
of stuff that helps yeah that’s pretty
cool because then we have like this sort
of generic way of defining components
that is not tied to angular or react
like in some cases very nice with react
and have it like all the stateful thing
about bulbs and and Dom diffing and
but there’s lots of cases where you just
have simple components that you also
want to share share that don’t need that
and if you’re using react then then
you’re just really limiting the
usefulness of it to the people that are
using react they do work together in
that you still want Dom diffing probably
and all like that stuff like they’re
really nice features and you probably
want to keep them the thing is what’s
really nice about the shadow Dom
is that it contains the gross and I
really like this so instead of having
like eleventy billion divs and all the
styles and everything kind of smushed in
there and kind of having to pick it
apart you can at least bit sort of
ring-fence this area okay that’s the
carousel oh that’s it okay
I don’t really in a perfect world
scenario I shouldn’t need to think about
what’s inside of there which is a nicer
thing as a consumer of a component right
so I think there’s that side of it as
well it can be easier to think about I
just have a bunch of these things these
units that are polluting it I think you
can do it in loads of different ways
though I mean it’s just that that seems
to be the natural fallout that I found
of using web components now it’s very
nice like I’ve been really skeptical
towards them but no I like now I really
see like I like the idea of thinking
about them as the the leaf nodes of your
app I think that we just did it I think
that it that is that is the episode I I
never know how to finish an episode I
mean I I do you have a little pattern
for your like your little thing that you
always said I do I knew you was a little
pattern let’s compare my
yes sir before we head off remember if
you are finally thinking about stopping
your procrastination procrastination and
learning machine learning then brilliant
elorg is the place brilliance resort
slash fun fun function you have just
watched an episode of fun fun function I
released these every Monday morning
oh wait hundred GMT but you will forget
that so you can subscribe by clicking
here or watch another episode right now
by clicking here
I am n PJ I’m Paul yay and this has been
fun fun function until next Monday morning stay curious
Please follow and like us: