Shownotes Transcript
Hey, there's everything as you listen to another pizza talk to a with i'm doing just fine, but I go go to really next week all .
things open should become me kind of my eyes last conference of the year. Theoretically, it's nice to be invited, this stuff. So now was nice to get a couple of years, as in this year and I fly from seattle the rally, it's going to be a long one. Okay, charge my ipad one.
Yeah, can be.
can be big. I'll be heading up to seattle .
for a workshop over to the mothership, so that should have. So get to meet my co workers. Are I R L? It'll be fun.
What day are? Are you there? Well, that's private? No, just you like. Second, we can .
know. Member, yeah, I going up to for a seahawks game. Meat for me. It's a little hop, skip and jump on you now.
Oh yeah, okay. Well, maybe we're in there the same time. May all right.
live stuff. You spend blogging like a little bit.
I know bit yeah. I off since my new loan.
We both had a little parable, post and stuff too. But for the context of this show, I think that your one where web components shine is excEllent. My only com, as I wish, I came out right during all that web component and driver of the other way.
But I ice, I had IT I much and then all that went up and in flames and I just was like, i'm not gonna post this go .
almost on purpose. Didn't first because didn't want be part of all that.
I know I didn't want you to be like this reaction to somebody said something. So now I got to defend web components and and some people did that and now cool that they did that. I don't need to do that.
Just one I just think, you know, I hate. I read a lot of blog post about web components, and I hear people think or and like, but are that? I don't know.
They seem like they're okay at that. You or one good ones create for this. And so I just brought down a list, literally just a list. Here's places I think they're good and you and then a bit of things .
they're not good just because I that was you avoiding the drama again, right to not just be a total Charleston all the time.
I think we need to also inject that into our discourse like you can say solid is great, you can say spelt five is great, but can can you say one bad thing about IT? You should be able to say bad things about things you like, you know.
I mean, whatever IT has a compiler, it's no so there is one hundred percent chance that if you leave me alone for a year and come back toward on your computer that I won't compile, quote me on IT, IT won't. Something will change and IT won't. That's okay.
It's fixie. That's the job. You can get IT to work. But that kind of thing is.
is the case. The migration from version four to five is gonna bite your but like it's just IT on an application of significant sizes is going to take weeks or months or whatever. You know I think like there's uh, questions like that, like people need to kind of like really oh no, just no, no. Let's add a little bit honesty into our propaganda, kind of what I was hoping to do. So you know.
the number one, what gets me is that there's a lot of people that are building sites with javascript frameworks that are building one website for basically for desktop. There's just a lot of jobs in that still because a lot of business and money and stuff happens building one website with the job script, I do IT for a living. okay.
yeah. And so let's say i'm picked reactors felt or you or whatever, and i'm building some website in that and i'm coming at all of this from that perspective. You're in this bucket where they're not that useful to you.
They are meaning web components. You already have a component model and you're only building one website. And so to have like a framework author, whatever people that are thinking in that category, which is an awful lot of you out there, that to be like these things aren't these things are dumb. These things aren't giving me what i'm getting anyway from these component models. You're right.
They're not yeah hi, I degree, I think they would probably give you like a five or ten percent gain in performance if IT works in new framework. So I don't think you need to necessarily rearchitects, but if you're at a point where you're like, dude, we are getting bit all the time. Should we jump?
I think I think now is the time to evaluate our web components of potential option in our sphere of choices. You know, not just upgrade, is upgrade the only path or is joke the other path? Know if if you have a rewrite on the table, and I don't propose rewrite slightly, don't do a rewrite if you don't have to. Man, painful IT takes long time.
Everyone good. There's some big time value about to to come.
If you can articulate the value, do IT.
And and so now I mentioned a bad places like you're building one website nearly have a java script framework. But so let's get into the things that that are good though, are the obviously being that if you have multiple websites, particularly if they're different frameworks, then these web communities can be the glue between them.
But I I don't want to steal the thunder at this blog post because there's a lot of bullet points under the good parts in your bye st. So maybe we will just read some of them. Member, go back and forth, the first one being four leaf nodes.
If that word source over your head, I don't blame you, but only because I don't artiste whatever doesn't enter my daily mail acutely. But picture a tree. Leafs are the very farthest thing out of the tree.
Right in the tree is your website. So it's like there's no children of leaves. Leaves are all the way out to the end, meaning there something like the button component, like there's probably not a lot of children of a button component, so the web component shine in that particular arena.
And another one might be a map, right? Like you you're not fut them with the inert of google maps, you know like that's the leaf, that's the final destiny is just we need to render a map. You know maybe we add markers to IT, but like that would also be in the left node category, just sort of like a new if you're all enough, you remember java, Apollo, ts or the you'd see an image in the water with shimmers underneath. Those were awesome. We don't have those anymore um because that's not secure but the I think like this leave notes, this idea of like these just little or you and you know you're at the end of the dome tree literally and you can just stop in and IT pop innis yeah .
so so web commanders are good, at least node that's a good use case for m.
What's your second one here? The next one which was actually I saw somebody say they weren't and I I think there are good like I went back for, I think I was rob night was talking to. But for presentational components, that rap other components like you have, I think brad frost idea of an organism or molecule or whatever, right? Like the you have a button in an image in the title and now you want to make a card, right? You can make a card component and its actually awesome because you can have slots and say, like this is card title, this is no, this is slot name equals title, this is slot name equals uh what an image slot name equals actions or something like that you could have like slots and so you can actually rearrange those and have them just have the content slaw ded in to the component, almost like press fitting into a joint like a joining in a in A A piece of right.
But this is all made possible through the angle brackets slot. I take IT can take stuff and put IT inside of itself. I like thinking about that.
That's pretty need to think about. Mean, of course, java script frameworks can do this too, but you know IT does. It's at the kind of ride tmr level which can .
be or you dislike spreading children kind of or you have to declare a certain children render here, here, here in the component or something like that. I think IT, the slight element is actually pretty awesome. It's a future of shadow mp, but you can literally just use that piece of the shadow, like then apply a little style at a grid, make a layout right, like you can do that. I see arguably .
more powerful than just a children in concept, because children just go, go but there they are yeah if you want to sprinkle something out into a template in javascript and typically then now you're like, okay, well, I can't just do children because it's not powerful and I need to pass all these individual parts in as data props or whatever you want to call IT and construct IT where a slot is just a different mental model for the same kind of thing. They can be named slots and they that helps you sprinkle stuff out in there without having to pass them as props. It's just .
the .
htm attribute structure.
Yeah it's it's really efficient. I mean, but I also like one to say like you don't need you can just staple two web components together with a dive class grid. You know you you don't need web components all the time and I think that's like the first real web components is not everything needs to be a web component, which is different than maybe these jobs script rame works where everything kind of has to fit into that component model, right?
Another thing that they are good at is building a design system. I couldn't ga thy more on this one. I think that is a is a perfect choice for that sort of thing.
Almost like a if that's the deliverable is that the final product is a design system. You can make no Better choice. If you ask me that .
I hear people do different. They're like there aren't good for you and you know but there are design systems out there, spectrum, iod, lightning, web components, like there's a lot of design systems that are design systems in like they work, they're fine, they use and like there's things out there that do IT, you know, I think it's gonna look and feel a little different than than maybe the react version. But I I think you have to also kind of understand why I do also think .
about the distributed ability, and I think that's a future point that you're going to get to. But if you're building a design system to be spread to the world that you don't even know who the consumer of visit, then it's even stronger of a choice. Now if you're building one internally for one consumer, just yourself.
And the reason that you're doing IT is because. I don't know you're a big company and that seemed right to structure your company to have a design system team or whatever, but you have a lot of control. It's inward facing only.
You know exactly who your consumers are, still a good choice, but is has a little bit of a different thing there. But they're like anybody can use this. That is web components territory for sure.
We're saying this as react nineteen is starting to drop, which is um for once, that's the release that makes this all work nicely. I think it's just an rc right now. But like you know, IT has been a long hold out for IT, not working particularly well. We are getting that done in react eighteen. That code, ben, okay.
something I can you remember what the the problems were at the time.
but they really weren't that bad. But I think in nineteen, that's kind of like just don't think about IT territory, which is how IT works in all the .
other frameworks yeah they just work yeah. I mean, I think that the think up from the couple weeks ago was kind of just like it's a lot of effort to make IT seem like quite and quote, IT just works and so and i'm sympathetic to that like I think IT would be cool .
to find yeah IT wasn't that they don't work. It's just that it's effort to me the framework producers job. It's like isn't the where's the line then? Like am I expected to stamp my fingers and have a framework? No.
like it's work. That's the point. Yeah, I don't know.
You know it's like if your customers ask for IT, like you kind of have to you know like you're trying to make customers happy, right? But i'm sympathetic that IT takes effort and it's not always a land year. You could .
write if you wanted to because this is a got doing free world things. Mostly you could make a web components hostile framework. You could you could write a framework that if there is a dash in a danger element that IT .
just displayed nuns in or IT just the piles removed. I mean, to you, i'm not maybe i'm your dad and go ah yeah so that I mean, I think like that you know um like a big part of IT, like you can build a design system. It's a collection of leaf nodes if you want. Think about IT like that and they all come together nicely. So the next thing on my list was for progressively enhancing regular a chemo like eric mires, you have .
some perfectly Violet HTML. And then as a enhancement, you wrap a angle bracket thing around them. And if that thing did absolutely nothing, so be IT, right? yeah.
But if job everything is happy, it's a happy path situation. The job Oscar plows IT does something a little extra bonus sy to that piece of age. Tmo, like what? Well.
like there's a lot of examples. But you know eric mire read a nice post about IT and I linked up, but the you zac laman has a lot know who to expect progressive enhancement from zaklad, but the details you tails element is like a wrapper around the details ment and IT has things like keyboard events like escape to close or animations or only show IT you know open IT automatically at three hundred and fifty pixel.
Why IT there's something like that like so so IT adds like ads features to the Normal details element which is Operable perceivable overall understandable and robust and IT adds features to that um in addition to the native features of IT. And so the situations like that like you're just adding another layer of functionality to an omy, he could have done IT with a script that you say document query selector, all details about for each L L. That add functionality or something he could have done that, that sucks so rapid in a work about IT. And they all kind of just works.
you know so a sometimes because you're right like doesn't that remind you of the jake worry days or whatever you're like? Oh, I need to I want to enhance some all my details elements so all right, script that just finds all my details element does something to them. Hey, that doesn't work.
IT doesn't work. But and if IT does, IT does. You know, the reason you say IT sucks is because we're I am like the vibes have changed. We well, there there's a desire to, I don't know, capture late things a little Better than that.
It's like, yes, vives, but IT just feels like manual work. I guess i'm getting IT like imperative sort of territory here. But the I got A P R like this week, and I was a bunch of had a bunch of a document that create element span, span out, class name equals through.
And I just was liked what we what's going on. And like you can just see, use a template ment in web components. But like, but it's stuff like that.
It's like when you see document create element, you're like, you like use J S X, right? Like you but like we have other primitives in web component and like h chemo tech temple, literally what has talked about but the but like you know it's just this like sort of like you're doing this very manually and and I don't think that needs to be this like step by step Operations. I think you can just say this is what I want to look like now let's make an interactive.
you know yeah so when I say vibes, you say like programing paradise.
Well, vibes are fine. No, I mean but it's like you and I can even also depends .
on how you use IT. If if the way that you are using this for you, if we stay on this detailed example, is that you have a script tag that link that loads up that and then your usage of IT is all you do is puts a angle braket tags around a thing you're don't know .
work yeah yeah in in IT should like all like instantly with the component and that with a minute you do with that off the page IT all like, cool. I don't doing any of that work anymore. Yeah.
you've made this point before that I really liked is that you don't have to. But in those jaque y days, member, we we would often wrap the jaque y crowd or ground a dome ready statement. yeah.
And that was always, that was always a little thing that could bite you if you forgot to do that and you didn't load the scrip at the bottom of the page or something. There is always this order of Operations thing that we like, what cash, I hope JK is ready. But at the time I need, i'm query for those things because maybe it's not.
And then the thing that would continue to buy you is that if anything ever got added to the page later, which jackey did make plenty easily, that you'd always have to be like, oh yeah, I got a circle back you and find those elements again and then you paradigms they kept rolling. He was like, well, if if you bind all those click elements to the body use event delegation, that you don't have to worry about that the convolution role on there. There's something nice about a web components that as IT drops into the down, this like natural life cycle of events just happened.
So if a web promote has this unconnected call backs er is that what it's call? I forget yeah if there's things that need to have click handler attached to IT, you do IT in there and which everybody does because it's that's how their build I think no be disagrees about that. But as soon as that web comment has dropped onto the page, is ready to go, that IT handles all that stuff for you. To me, that's A A very great programme parana.
Yeah or as soon as the element, I guess it's more to say, is defined like you can have the a net web component is the no script version and then the script runs and connect IT. And so now it's a live functioning web company. And so then you can add the extra shadow down, the extra everything buttons, everything you need like after that point.
fantastic. So there is what what we do. We just did progressive enhancing regular S T ml ah which for a moment everybody was calling each tmo web components I enough that will continue to stick er or not it's stuck in my brain but not enough that will be a widely used thing or not.
I call him like light dome components at some times where kind there's like this flavor, where it's like you're doing mostly HTML. You know if you think of like my dash input, you know, do you put in label in input in there, you know you so works on browsers without job script totally.
Could uh, or do you just have to say whatever my dash input attribute, label attribute equals food and then nothing inside that there and you could still render a label in an element like you could also do that. And so this sort of up to you, there's options. You know there's probably a Better choice from a like access for all standpoint.
Um but I think there's also a Better choice from is everyone going na remember to wire up the labels correctly, you know what I mean, like, um you risk both ways, you know so you you can either do IT right for somebody or do IT let them hopefully do IT right. And so you're putting a lot of that's probably depends on how big your team is and and again, where your component get. Because if it's just your team, oh, that's your problem.
If it's just your team on one APP, that's your problem. That is teams on a hundred different uh apps across the you know infinite landscape of whatever global geography. Yeah then then you got you may need to do the work for people.
So no, no. So that was one. Uh, the next one was this is when you want to view source, like if you just want to view source of a website or in your dev tools, now is going on without like, maps. And you know, my button is a little easier than div S, P, F, fifty, X, Y, Z, P, D, Q.
particular these DMi ones, although, no, you can look at the shadow dom too. But yeah, I tend to agree. You know, I buy more on react websites all the time. And you know the utility of the components panel and debtors is limited because of that. You with the dumb n that you're looking at, there is little resembLance to to the js.
You're looking in this probably a plugging out there like the react whatever dev tools .
I know I use. I'm sure some people live in that thing. I just .
think IT, but imagine magine if you're devitts where you did to I just .
like the naming to you. I look around google website, google uses them more and more. And I know you can see these nested web component models that are named named that are not obfuscated.
We're so used to looking at obfuscate code. It's refreshing sometimes now to see like I don't know. Table head or something you like names that are just very you know exactly what .
they're sometimes in meetings. I like just want to be like what's that called IT because once I know what it's and we all go thumbs up, that's what it's called.
I can like start coating IT you know me like is this opposite problem of like you know it's like just tell me the name of IT and all right writ for you um yes this weird like you know people kind of like, okay well this card is like, no, but what kind of card is IT tell me the card name and all right, whatever. Food dash, cor, barf, dash, bucket, I don't care. I'll put IT there. You and I will work.
I like that. There's a no here. One of them is that build tooling is not a typical starting for a lot of web component projects.
Now we should put a point on, on what type of tooling you're talking about. I mean, build tooling is a specific type of tool. And like, okay, I can't even look at my website until it's gone through this preprocessing step.
And then stuff happens. Now, tons of tons of stuff uses, uses build tooling. And web components can use build tooling too, but typically they don't. Now even if you're choosing some framework type thing, like what's what's the one you work on, fluid, fluids, you, yes.
sure, all those .
things are tools, but they like run clients side. They are not build tools. Yeah that's a different type of tools.
So if you're saying, well, you need something like that too, hasn't dave told me in the past that you should be using a framework like that? Yeah, you probably should be. That is a distinctly different type of tool. Then then a build to and build those are the things that tend to be more fragile like you're lip component today. You know you're locked into some version of litter, whatever IT is that's just gonna continue to work in the brothers because browsers are amazing yet not breaking stuff going forward, but you're build to a .
willing AK yeah I mean, somebody I can belong and be like he's another I have a second version of late here, but you know there's work around for that. But um uh yeah I think most people or the saying is like build tools are a production concern IT with web components like we're just writing H T male. H male goes anywhere.
How you stitch up and build up and ship that is mml is sort of up to you. You know you could happen in no that net IT could happen and you know um in a vet APP IT could happen all kinds of places. So um there's a lot of options kind of for that .
part is up to you. O K, I I I built .
off the idea of the builders thing, but like when you're building a one aff project, like where what like your breeder website, there's something like when you come back to IT, you don't want to remember how the build tools worked. You know like what what that was that what was I using all its broke oh why you know .
ah it's broke is one problem but that also that load like how does this seem work again or or it's not broke but it's it's you know we built IT and we use node twenty, but it's two years now and we're on node twenty .
five or something. And like should I install uh, you know you if you reduce dependencies like a framework, you know I don't again, I think framework are good for helping you manage IT. But I manage IT all but like reducing a big dependency on a one off project like in your company, like whatever random event board.
That's the one is the most painful that right? That's your thing. These are often it's not we're not talking about your absolute main number one projecting that probably does have complicated build stuff going on.
And that's fine. But it's like a we also need this bill side thing over here. That's when your thing don't don't treat yourself for that be the most annoying one to come back to when it's broken because you're like ah it's just a dumb little .
thing why don't yeah make those ones easy like remove all dependences whenever you can. I think I had the word cognitive overload in there at one point but just that overhead of like god, how did this thing come together you know and if you're going in between project A, B and c and they're all different, god help you. You know, that's hard.
Like sexier if you're just like, okay, I just need to look at my package dot, jon. And hopefully the dev command does IT know that's hopefully where you're at. 怎样。
If you got great ideas, but no idea how to build a website, get blue host with their AI design tool, you can quickly generate high quality, best loading word press sites instantly. Once you've nail the look, just hit enter in your psychology live.
It's really that simple and IT doesn't matter whether you're a blogger influencer just starting out your side, hustle blue host has you covered with built in marketing in e commerce tools to help you grow and scale. Your website bore the long haul. And when you upgrade a blue host cloud, you get a hundred percent up time and twenty four seven support to ensure your site stays online through heavy traffic.
Blue host really makes building your dream website easier than ever. So what's stop in you? You are to get the vision, make IT real. Visit blue host dot com slack shop talk right now and get started today.
OK more build .
less talk like .
you one off projects is one thing. But like prototypes, like that's kind of what i've been doing last couple weeks. Like getting up and building real fast is huge. You know like that you just you don't have a build step, you just put a cml on page. No, you can add .
that stuff in and .
make a Better. I absolutely like my my whole deal is like if you can't run like your design system in a cut out, a lot of people like you know like like I think I say that later, like designers, you know it's just like they need like this ability to use IT. You know um not everyone is a full stack developer with whenever twenty years of experiences web packing the universe, you need people. You need multiple entry points for your package, some speed concerns.
They just tend to be faster. They just use less. They are more efficient. So that's a quick one.
Just yeah just so you .
know people on average um they you know this was the earliest one for me and say this is the earliest thing that got me interested at all was that they have this the shadow am is a unique beast in the world. And whether it's like not that that everybody's most excited thing lately, I think sometimes we talk about how it's kind of worth avoiding sometimes, but it's not all the time.
IT really is a unique thing that absolutely no framework can do because it's too low level of, I think, frames can Operate at at this level. Wan offer shap shadow dom if you want IT. And one of the thing shadow dum does is in capsule ate styles and even you java s script selectors and all that type of stuff, it's it's like a little tiny eyes frame.
It's not an I frame. It's settle down different but IT is encapsulated. And if you need that, that this is the only game on .
in town yeah I mean that kind of is I mean, like you can you can put shadow dom in your react components. I know people who do that, but I don't it's in the .
gnomic rents there yeah .
the gonna aren't there for you. So yeah not not necessarily the best experience yeah so I mean, I know I been on record saying I think style and capable lation the shower done is sometimes too much you know like the I know what i'm doing, selector doesn't exist. IT doesn't exist yet but I should I still feel like a shit because I just know again, I think I give people pathways to do what they need to do. You is helpful. But yeah.
we've talked about this point. But if you have shuttle down and IT sitting in there, your your regular css that styles the rest of your page has no mean. Well, I couldn't say no mechanism, but he doesn't have typical mechanism for reaching inside of that chat down and styling things.
IT was unpurchaseable built that way because they are supposed to be a barrier there. Kind of, kind of, perhaps the top purpose of the shadow down, but that can be kind of obama because sometimes your reaching for shadow dom, not for that in capsule tion, but for other reasons, for templating reasons, distribute ability reasons, whatever IT is. And it's just a little unfortunate that there is no simple way to reach in there.
So people say either is don partner, partner that way isn't there? I'm on the record saying that the side I wish that A P I did me when existed so dumb to me and you know hard line on that one. And then some of people are like, well, would become customer properties appear in there so you can set up styling that way? Yeah, absolutely.
You can. It's just both of those ways are some there are some other thing. There's some it's css s like but it's not just saying here's the power of CS s and I think that's what .
we deserve inside there. I I agree with you on part, to be honest. I feel like it's like a action, not like a solution. I do think it's trying to emulate native pu du elements like Colin, Colin web kit, some track bar scroll, whatever. But I feel like it's a pretty OPEC surface, just like the suda elements are inside inside of actual element.
I also think it's one of those things where is like, you know, this is web standards to a core is what can we do you know, in the like, okay, let's dream up the perfect solution. But what can we do is a much smaller set of of realities. You and and what can we do this month to get youtube builder, whatever, which is not the way you should do with points. But like, you know, like how do I do a smaller set of of this functionality that gives you a way to style something inside a shadow? Dom, you know, I think it's okay.
but that you couldn't do that. The children, that you can select something with part and then it's like, oh, but I want to select a card and then I want to select the heart within and so h i'll make the the card apart then and also like the card OK part and then I don't know h three as a child, not too bad that different part. Yes, that part is so dumb to me. That is like, why do you why do .
even do that? Why do you get me here? But you just said no more no, yeah.
it's like you ve got me. Yeah there's reasons for that. And I also understand that if all the sudden platforms ship what I, we are just calling the I know what i'm doing selector, that that kind of breaks this contract that existed before, that all the sun thirds now from the outside can reach inside in style, something in a way that was never possible before.
In there are surely loads of people, because what comments are much more used than you think they are is not particularly nitch thing anymore. The authors of them could be like, hey, I used this on purpose, so users couldn't do that like that. IT breaks this promise that was made at one time, but IT does make me think about this concept of up in which is happening all the time in ccs recently.
Have you seen this like animated to auto stuff? Yeah, those are opens. Like in order to get that to work, there's some stuff that you can do at the root of the document that kind of allows that to work. This is also true of the new select menu that you buy defauts. There's all the stuff that you can do, but if you there's I forget the exact key value thing, but there's something in ccs now that says, oh, this select element i'm opting .
IT in to this new styles like this base .
selector like that. There's you there's a variety of them too because you have to you enough to ult through your age team A L A little bit and and stuff. But it's clearly like nobody is.
You can't accidentally like our bunch of styles are actually going to accidentally apply to these select says they ship IT because the other web platform is trying to be really careful about that, not ship stuff that's going to change websites that you know looked the same for fifteen years and all the sudden look different. They really try not to do that. In a way to do that is the option model.
IT seems to me that, that could work with some kind of I know what i'm doing selector like if you want that to go through, you have to opt into having IT so that IT doesn't break that old contract with with authors yeah, I always thought that's what shadow mode open and closed meant, but IT does not. I don't even nice to the day. I don't even totally understand .
what that setting does. Yeah it's it's basically showut closed. Being well show root open is pretty easier to describe from here. Means if I like document query selector, my button, then I can go dot shadow route and I can enter the shadow route like, and now I can go dog shadow route that q sector.
And in one query sector, you can slide right through so you can get the parent and then .
and then drillin. And I can drill into the shadow route in shadow route mode open, which is kind of the default now. But then, well, you have to specify that is kind of like the like IT does IT by default stuff like that.
So that isn't up in, but let's spend .
there since the beginning. Yeah, enclosed is like you're not allowed in. You can go into google thing, a google map and say document crace, like google dash map, dash shadow route. Uh, they won't let you do that.
So it's a way in for query selector, but it's not away in for css. I should have I I agree k more.
I think people are starting to think about IT more. But you know, one of those things .
kind of things you have one hear about, like deming, something like a little tiny example or something. And you're like, why not pack IT up so people can pick them up and dropped in their project? You know, just a little a little booter, a little evitable kind of thing. I like that you also have this hilarious blog post about how you use web components in markdown. And you just you know how you do IT, you just do IT.
You just mark down.
Mark down supports HTML in IT. So if you and we ve gone know customer ments anyway, are are that so it's a perfect way to do that. You like you really like M D X, do think md x is t yes, that's what marked out and web components are with no build step whatsoever.
So like times we've been like, how do I make accessible tabs or a drop down combo box by order complete search? How do I make an accessible? And then you get sent to some archaic academic website with all this jaque, you know, seven hundred, nine hundred lines of jake weary.
And there like that. Here you go. And or it's a react component with like seventy two layers of like nested context. And there I do. Here you go. That's how you do IT in your like I, that still doesn't help me make an order complete myself so I could you just put in a work out and then I can put that on my page because that would be sweet no because i'm not using 这块 um I would like to just use this web but thank you but anyway.
people may yeah there's a where web components shine again that's we're talking about um you couldn't about using them instead of an I frame for third party content. I think that appeals to me on a performance level alone. My frames have are very useful, straight up but don't have a great performance profile among other problems. So that's A A possibility there.
Well, even just like you, they have bad performance yet generally. But like you think about like a like an inner calm chat wig or whatever. Man won't be great like they are probably doing a lot of work to make sure that their styles never conflict with anybody else's styles.
You know. I mean, they're doing a lot of work to make that happen. What if that was default? I just worked by default probably like save a couple hundred hours of development on that, you know. So yeah, you just turn out there.
One thing I was going to say, like we talked about the text tax thing, but one other point that occurred to me after the post was like, you know, IT works across like your anger, your wordpress blog, you are other thing you like. There's a lot of different places web compose can go. But even like if he's stuck in a version jump like in two to anger or nineteen or whatever IT is on the latest eighteen, like that's a big jump for you in your components.
You having web components is part of your U I. Those pieces that can exist on both platforms might save you a lot of headaches. So um so you can start using new tech or rolling out new tech in little places without you know crashing everything um like just you I don't know there's a lot of people are on I guess react nineteen supports web components natively, right?
But not a lot of people are on nineteen, Chris. Yeah not all people on eighteen. No, most people on sixteen .
we looked at IT not like I forbid us to look at nineteen. It's it's not stable yet. I not have time for this. No.
no. And I mean, you know that the upgrade numbers for a teen or bad to and not but like it's just all to say, like if you have to wholesale upgrade every single bit of U I before, you can make the jump, that's hard. But if your U I kind of existed outside the framework, might yeah.
you made the point early about the design thing. I think our designers, I found this to be true. I'm just one man, of course, but I find that there's plenty of web designers who know their medium well and thus are capable in H T M L, in C S. S and maybe some java script as well. But but don't go incredibly deep like they know their the raw materials of their craft, but aren't but aren't like framework heroes. They don't know whatever you felt stuff deeply and that a web component like set up might help them go a little farther than they did before because web content are just H T, C, A, S and java script, whatever that you might bring them a little farther in the process using what comments .
that you would with a framework yeah I mean, I think like I, you point at the code pen, you know not not what I do to do want compare since, but like pointing somebody at a code pen and pointing somebody as stack blitz are two different things. And like, one is super easy. And one is like, all god, what I get myself into.
And that one is deck lets, i'd love you, steck lets that you responding to show, you know. It's so much overhead, Chris. Like like the first thing that does is like you open IT and is like A P M install the earth. You're just like do IT I don't know where I type you know um so in code pen is much more like here's what we're doing, here's what you got, here's how IT works toda you know like very, very easy to comprehend and yeah so and i'm saying that about all versions of code so yes.
right on well, that's a lot of stuff. The miner, if that was too much, we just read read David's post thing that makes the point a lot clear and quicker than we did hear. But it's just fun to talk about to isn't that they clearly do shine in lots.
And I mean, I think your list going to be different than mine. I an some people go all in on things. I build everything with us.
You but it's or I hate this. This is stupid. I can't do anything.
And as I go, okay, well, I just want to brought in the conversation about here's all the stuff they do. They don't just do one thing. They don't just build hobby websites, quote and quote somebody on apple team.
They don't do that. They do other things. So um yeah and lots of examples .
of them building really big, really powerful things notoriously that there's all kinds of stop. But IT is easy to point to that photoshop example from moto because, wow, they really did just write photoshop at the components so that somebody else, yes.
so like when, like baby for state.
let's stuff my mind little .
and they can something can what? No, no, they probably, yeah I do I get that answer for you probably bit it's probably seem like reactive context that would be based on the generation. I think that they wrote that. I think yeah, I think reactive context would probably be the right answer there.
okay. So and what I don't want to hear from, as anybody who like if you have a sub stroke, weird to pit IT to our website for the only context you've ever thought about using them in is one desktop website that art uses a java's script framework that I don't care what you're ebitda.
Yeah yes, probably not been you're building on. I guess you know you you're starting a new thing. You know like are you're trying to put a new technology inside another technology in your first explains with that never going be good, you know. And so that was a point I tried to make, is like everyone's first test drive.
So I take that like when you when you use web components for the first time, IT sucks because you're just like what the hell is going on again, I style this button, you know um but slowly you start to understand the limitations and what he does and what is good at so I can say it's know we still encounter gotch's and stuff like that. But it's it's like that will be an upcoming post probably but it's just kind of this like, oh okay so you don't like view transitions found out this review transitions inside shadow shader children doesn't work and you just like thing IT page one other. I think they are like the J S one so you .
d expect would work yeah so it's just .
stuff like that. You know it's just like you. okay. Um so oh, no, I need to whip up examples for that and then file complaints to browsers and make that happen. But and is this kind well.
there's a couple of related questions just because we're this far. And two, I think that maybe trying to hit these two would be good, because then we can make this the web components shine, as should we have one here from Andrew scofield. Thanks for writing in Andrew, who basically asked, what would IT take to make the next J S.
Of web components. To me, this is a fascinating crush because we've talked, but that doesn't IT doesn't really exist yet. You know, next year is the next years of react.
You have no choice. You have to use react with IT. And IT really helps make react shine in good ways like and not very popular. Very good framework that does a lot for people.
So what does IT do that? Like, could we is there can we picture a world in which this is ready? And I think that makes sense that it's not here yet, because what had that a little journey of their own and and evolved independently instead?
It's not it's not surprising to me that IT doesn't exist yet, particularly because of I think a big one from my perspective is the um declarative shadow down that's relatively new. And without that, like what's the point of a framework kind of in that feature, to me, feels like the purpose of IT is so that a framework can do IT like the cleared of shadow is probably not for you to write by hand. Maybe sometimes they .
literally said that in the issue where process, no one is gonna hand out for IT and I was like, actually i'm that I would.
but I see at the point, yeah yes, like this is for framework to do, in my opinion, especially because you components aren't just used one sonoy ted. The point of them is that they're sprinkled all over your APP. And if they're sprinkled all over, you need some kind of abstraction to help you often that you're not going to hand right the shuttled down fifteen times all in the fifteen times that component is used.
So that's IT to me. It's what would you take to make the next years of common. It's thinking about that.
Can you make a the clarity of shadow dumb sprinkle machine that does all that for you? And then the next thing is, I don't underestimate the point of these framing. The the reason people reach for them and like them, I think, is the routing.
Yeah it's all about routing, whatever that framework is. Instead a router, invent one, use one, be opinionated about IT, get something in there that deals with your else. A framework isn't next years unless IT has a router in IT.
That's what you think of the remix journey. At one point, they're like they made remix and then they like this is basically just a router. So the extreme mixes just react brougher posix or five or whatever that was yeah because they realized that that's mostly what a framework is doing is freak serving pages that you are else at routes. So whatever you make the next years of up components, in my opinion, it's got to be have a router in or even just .
be router based. Yeah, I think file based routing would be huge and that gets into like the like bracket ID basket dot, you know or whatever post slash ranked I D eight that here you know I think like that like some killer convenience, you know um I think you're write on the decorative seldom I think you the shine would hopefully do that. I think IT i'm gna go out on them. I don't think he has to do IT to full fidelity like full static fidelity. I feel like if you .
ve got to be ini skeletons .
y you know maybe you maybe that gets into like where this can get hard is because you have a kind of you know every framework is going to do. It's like dynamic tempt parts differently. But but maybe there's a way to be like template. This is what a template, you know the shadow or the d sd template should look like. You know like you provide that and via your components or something or generate those.
you know well, that's important and that is another strength of next just that talking about us that IT has these three rendering modes that make IT rather effortlessly to to think of IT hash and say effortless because IT actually can be effort full. But think of the three, they are entirely client side. They are entirely preventive red.
And then the middle one, which is like on demand rendered by a node server and IT, really, I can do either three of those really nicely, I think. And I think that would be nice to to see that web components framework. And to your point of that, that could be the statically rendered version of IT could be and have some way to indicate that this component is ready for that type of treatment but doesn't need for fidelity.
Imagine an attribute that just said how IT wants to behave within the framework. Yeah this this one don't even bother rendering you for you're not clients side is a client side beast. And this one is just A T M L.
So you mind as well, just do IT full fell because there's nothing there's no reason why you shouldn't yeah and then those middle ground ones that are like, yeah that ones kind of you know yeah one that like a photo grade or something that right clearly could use some square up in there but doesn't don't need to get every single image first. That's too much work, so let that happen. Client side, but the server side versions should have little squares.
Fair yeah yeah no. I mean, I think like that's a piece. I think um you know the other piece I think like you have to consider is like react helmet style stuff, like how do you like if you have all these rights and they're changing pages, how do you update the title in the meta data, the twitter cards summary card? How do you update those chunks in the head I think is a problem you have to solve, which is a .
great problem for a framework to solve.
Yeah, I don't want to this stuff. Could you generate the cards?
And IT could be a customer. IT could be a, you know, the ramework dash helmet element in what IT does is propagate its cuts to the head probit ouldn't be that harder.
right? honestly? Yeah well, it's funny as you know, like it's a lot work like make like layouts right? Like like um you know like a folder of laws, flash layouts and you have default and then you have whatever your document and then you do like cold or must as much ash, content must or something like that。
Guess what, Chris, that's web componds have slots so they can rap like your APP shell can be just a weaponed layout and then but you still have to fight out the head part. That's kind of peace. yeah.
Still have to have to make some decisions. You is gna be opinionated. It's not going, you know, there might be you you will probably want to make IT work with any way component that is thrown at IT. You're onna want specific features of the framework to be to require certain stuff, naming things and particular attributes.
Anytime you are like i'm gna code the website for you, you're gna get people who raise an eyebrow and say, I don't think that's right, you know and that's fair no um so but I always say I think like you have A I think there's a chance to look at you know I think in hands gets really close um from begin who is now part of the sAnitary crew. Uh as of this week um congress to them uh but the but like enhance gets really close. You know eleven ty with web sea is kind of flavor of that. Um I even put astro components in there, know even though they're kind of like trying to dodge um you know framework or not a framework you don't know like yeah we support react very every boy's best friend which is good but like I think like yeah, those apps are those sort of sort of service side generators get you pretty close to what I would probably look like for the next years of one components um and I don't know mean exact other means at for uh web awesome now so maybe they're working on that. I I vents that just the .
other week I litter, you didn't really say because because I think I don't .
know how from we're not journalists.
but the vibes I got was that they're talking about that kind of thing like I don't think they have a they're about to lift the curtain on the next years of web components. But certainly like if they could be the next years of web component, they would be first in line to certainly the desire is there. They just got to, I assume, make IT work with their business realities and stuff because they know a functional business that now has employees to pay and stuff, you know hand just not everything is pie in the sky.
But the nice thing about where components is you building stuff on the next years of web components, you have a full derful of components and then that person goes wild uh in starts, uh shen people out and go nuclear. You can just take that full of four components, hopefully, and just move IT to a different project.
I think that sort of like the shadow requirement happen that I would put on this too is like hopefully your components aren't overly tied to the framework. You know that, that they are just elements. They're not like special flavor elements. You know that that I have to code that only work in your system because then I think they stop being the universal web components of that make sense. So indeed, well.
there's one more that I thought I would be interesting to uh to relate to all this, especially what we're talking about, the framework stuff, alex hinton rights in um how log until we just don't mean any frameworks and java script can do.
Framework is stuff out of the box or what will be the next framework type thing to to come to front end? And like if if that happens, then then what a frameworks do in that world? So what are those kind of things? Like what are things that frameworks do that you need to be done by a build tool or something? Or and could the web platform step in and just start doing the type of thing that frameworks do? Recently, there's talk about letting frameworks do more instead of less.
So that's kind of a weird timing for the question. But know, because I made such a big deal about routing, I will bring that up. There was a couple of years ago, there was a java script feature called URL pattern.
The blog post was called U R. L. Pattern brings routing to the web platform. I don't know where where that went. So, you know, bad podcast journalism here, but the point of IT was, you know react right is huge.
And the way that routing happens in javascript, web offis, folder based or whatever, that will probably always have to be framework ky to some degree. But IT also can be these if you're doing a clients side, IT can be these. A component in the components job is the routing.
If you can picture what react router looks like, there's a router element. There's children of IT called routes have uh an attribute which matches you are all patterns. And then if IT matches, IT renders the components within that component, it's like a declaration way of doing client side routing that could come to the native platform, could like a URL matches. So I should render x. And what x could be is a web component.
yeah.
So like that's a thing that the the framework or the web platform could swallow up from framework. Should that go well? Did IT go? Well, I don't know. Yeah, have you heard of this? Do you remember .
you are a pattern? Well, I actually don't remember this, but that actually looks cool because I was thinking about writing apart or kind like this is cool. This seems like a kind of like, you know, you kind of like sort of give IT some usual patterns and say, like is this real N O say, yep, that's works, that's a real ural, which is like you'd need to proof like that right?
Like you know like you can test the URL in otherwise go to a four or four, but then you can excute the URL um but I don't know exact the URL uh I don't know what that IT returns an object but maybe no that like that would be cool for like you're getting out now all the programs in there through like Colin ideas. Now ID equals one, two, three in the javascript C. I can say the navigation API is kind of in the talk now, which is a sort of the router tech navigation A P I just kind of coming out um do you know I think it's kind of like a some to consider.
You can kind of like get that history sort of is like A A buff up history A P I you know or push state A P I. Um so I think like that kind of cool, I would kind of considered that. So um like that I think a piece of technology that has to be there, I think schedulers or whatever need to like show up in.
You know, we have that idea, I think now, but you know if that would be more helpful to have more tech around that. Um yeah I think signals API is gonna huge, I think game changing, to be honest, to the every lands um in javascript because then where we kind of have a native global state solution, if that sense, like I think that's what people need. No, I think we ve been chasing that for a long time, so I think that would be huge. Um so I think getting there like it's not .
I don't think frameworks are going away, but is feel it's kind of a job of of the web platform is to be watching what people are doing in making those things Better in whatever most every time that happens, it's good for everybody. Yeah, these chances are they do IT more performances and they do IT more excessively than I can be done any other way.
Yeah, hopefully.
but hopefully right. It's not like there's a perfect crack record, but generally that's the case. I was just looking at a bunch of those like scrawly telling sites today. I'm like, man, be us. When you see a really good one, you can almost be sure that it's not using the new stuff is yeah it's still gonna Green sock under the ordinary and how can we move the needs? Well.
was we're talking to atomic A I think a bit. But you know stuff like I think we need new h tl or a standard live or something like for like dea grade a stuff you know like like all apps or whatever have. I'm always going to say like we need more h tl to do stuff.
Stuff like pop over super eliminates a huge need for like A U I library because like dog and just had to pop over with the natural attribute, you know, and an anchor in the position sort of thing. No, you can encourage without a framework. That's pretty cool.
What if we did that for tables like a data grid sorting, you like click to sort the ears and stuff about that could be huge. Me, and so I think, like, you know, you have to think kind of outside the box here, but I think, like, you know what, why did we choose the framework? Well, because had a cool table.
You know sometimes that's the answer and that's fine, but that's a lot jobs script for the table. So notion i'm talking to notion thank you for about sponsoring this show. That's my new thing to me that I just then thank you respond show.
Response ships and response tomic.
thank you. Thank thank. right? Cause you get anything else. Or should we wrap this up for .
days be cut?
We won't do the two hour thank you do is done in this park. And then I was on, massed on, I deleted my twitter account. So WIP sy, Daisy, it's gone or yes. So anyway.
I felt bad about that. Kind of like I was just a one big waste time. You should come back home enough.
You have to feel that way. There's the friends we made along the way. We learned a lie.
You share IT a lot. You build your network and now we can go away. Everything changes.
Yeah it's no it's like a percent remorse but is also just like, did my life is now less complicated without that was seen my like and everyone's move in a blue sky anyway but but anyway um yeah follow joins in the disco. That's also a good place with nice people. H.
P, K, S, I.