Hello and how do My name is Alyssa Nicel. Welcome to another Adventures in
Angular today with us on the panel, we have Chris Ford Hey, Chris,
Hello, and our two Yeah that's right, you heard it. Two
guests today are Thomas pink Guys Hey, Thomas and Bobby and friedle Hey.
So what are we talking about today? Everyone? Yeah? Kind of an
interesting topic. So basically how to build the science system. Yeah, we
were talking pre show and you know, using Angular that's one thing, but
just any design system that'd be tough to tackle. So yeah, before we
dive in, can Thomas and Bobby and can you tell us a little bit
about yourselves and what you do? Sure? Sure, I guess we both
are working on at Diana Trace currently in Austria, so little country in Europe
with great mountains and a good place to ski. Yeah. I worked there
as a senior software engineer and it must be a time I play tennis and
ride bikes. Nice And what did you there, Fabian? Yeah, so
I'm currently the design of steam late at Dina Trace and we as a team
manage our designs as in Barrista and everything that's connected to it, so like
component library that we're building with anchor, and it's quite a challenge for a
small team to have such a central role. But it's it's fun and it's
exciting every day. That's awesome. So the name of the design system is
Barista. Yes, okay, okay, so, and you can find it
on on the gubs. Yes, I see that. So the link will
be in the show note gethub dot com such diner, trace dash, oss
slash barrister. Oh I said the homepage do Dina traes dot com? Cool?
So before we even dive into creating your own why don't we tackle the
question of what is a design system. It's pretty it's actually a pretty hard
question to answer, I guess because everybody just understands something completely different and it's
It can be something like, if you have only a small design team and
you want to have some reusable, shareable design assets en Sigma or in Vision
Studio or whatever design too you're using, that can be your design system to
start off. If you start from a clean slate, that can be your
design system at the beginning, right, But that's where we started actually,
so, but if you if you continue this journey and you evolve the design
system over time, you add stuff like accessibility guidelines to it. You and
then develop us want to use everything that you provide from and need to implement
the designs somewhere right So the next step would be to create your own component
library based on the designs and everything that we just talked about is basically a
design it's methana face. And you can add even more stuff on top,
like having prototyping tools available for project management even so even for non technique people,
or you can extend it for branding guidelines on how to use your brand
inside and outside the company and your products and stuff like this. So it's
really a whole set of things that can be something different for everyone. But
that's what we think designs is Methanify should look like right now. So just
that out of interest, what makes what makes somebody company I guess, or
an individual or a group of individuals, what makes you think, you know
what, let's just let's not use something that already exists. Let's let's create
our own because I mean I can say that it's open source, you know
it's it's it's available and taking a look at the docs, now it's available
for everyone. So what made you like throw in a new offering into the
into the ring, rather than picking up something that pre existing. Yeah,
so I think it's really a choice that you have to make at some point.
Do you want to reuse a branding that's given by a bigger company like
Google material it's really a Google product, it's Google branding. And if you
want to stand out and create your own branding as a company and be identified
as I mean, if you think about Facebook, you can remove the logo
on the web page, you can remove the entire text, have no content
but the skeleton and only the color and the font will let people recognize it
as Facebook. Right, it's the brand Facebook. So I guess that's the
main motivation hand it to be recognizable as a brand, stand out and take
your own branding out there that people can actually use. I think it's so
valuable too for just consistency and a resource for your team to like refer back
to, so that if you do have new hires it's easier to onboard or
if you do have a question with how do we handle this successibility issue?
This is how we handle it. Like I I love this and I love
how detailed going through it right now, and it's very detailed, and you
even have like dev support like links to like I see one here that's like
linked to FI and like as for this particular issue or something like That's that's
really neat is that specifically, like well, you know, if you want
to, if you want to, if you have in trouble with this particular
component, these are the people responsible for your issues. It's cool. Yeah,
it's cool because so the place where I'm working at the moment, we
also are building our own design system in house, but it's specifically it's not
being open source, you know, is specifically for the product that we're building,
and so I kind of get it from that standpoint. So I just
think it's cool that you you sort of have this eye. We're going to
make our own because we don't want to stick to the brand, but we're
also we're going to share it with everyone else sitting that's cool. So open
sourcing it, do you do? You see a lot of other companies using
it or basing things off of it. Actually comments you want you want to
take. Yeah, we we started with open source not that long ago,
so we're still we're still in trying and trying to find our community and trying
to get reached, but the science system exist for much longer basically, and
then just the I guess I congratulations on taking that leap, because that can
be a big one like opening the you know, the blind and letting the
world in that can be Was there something that made you go like it's time
to time to So we were talk at antide in Berlin in August where we
basically had our first conference talk last year, and we showed a couple of
things that we did and everybody was really interested in what we were doing.
And back then we had to tell everyone, yeah, we have documentation out
there publicly, but you can't really insulate yourself so and finding angler developers in
Europe is actually not that easy. So you you want to have as much
out there to people to show people that hey, we take the stuff really
seriously and we want to provide high quality components. And doing open source can
be a motivation as well for people. People like doing open source. It's
it's it's cool to give back to the community. So that's also from a
perspective to attract talent basically a motivation to go open source as well for sure,
and giving back having having an outlet in the community. Being able to
talk about the code did usual and it's like, I love that that people
were asking about it, and that's what led to deciding the open source all
of it. That's really neat. Yeah, we actually had I guess,
people that showed us their apps built with Arista when they applied for a position.
So this was was kind of great to see. I like the way
that you're using it as a as bait, handy try and learn the angle
development. Oh my goodness, I love it, Chris, but I'm going
to use that. It's pretty cool to be working on an open source twenty
every day of the week. Basically, it's like we we inside the team
enjoyed quite a lot, but it changed the way we work completely. Basically,
you need to work differently. You need to work differently because there's more.
Everything is asiing, right, everything is Asian, not only visibility wise,
but as I guess, you need to document a lot more. You
basically document everything for people that you don't know are even reading or want to
contribute. Right, So you want to open yourselves up. You want to
be as transparent as possible about the processes everything that you do. There should
be available for everybody because everybody can see it, right, So we want
to encourage everybody to contribute to open podcasts, open issues. And actually,
I guess a huge for us was bringing the discussions to the public, discussing
lance, discussing bugs on GitHub. So was that scary? Did that?
Go? What does your work find you? You are opening yourself up to
exposure? There aren't you when you when you do that, like when you
when you're working on something in house for your client, you know you've got
you've got a few people reporting bugs to you. But as soon as you
go, hey, everyone take it, you know, feel free to help
yourself, everyone just piles in. Right, I didn't mean it, I
take it back. It's closed source now. Sorry. It was actually not
just a step for the public or, as you say, for the outside
of Pine Trists. It's also a huge motivation for people inside. Diana tries
to suddenly check out what's happening there and then giving a lot more feedback.
Then if it's just a small a small package, a small as a small
tool inside Patris, yeah, you can get exposure if you wanted. There's
a single employee in the company as well, so you usually work your data
is working on some front and tooling that reaches the customer or maybe even maybe
not, but you might need a component that others can use as well.
And if you can do that by contributing to an open source project, it's
pretty cool. So do you have rules you're saying you know, it's a
way for even internally someone can contribute. Do you have rules or guidelines as
far as when you contribute a new feature, make sure you're writing about it
in the documentation like that has to be a part of the pr or guidelines
such as that. Yeah, we actually have a lot of guidelines out there.
New developers can take a look on. And I guess every feature starts
with a kind of future proposal as a guitar issue, So you write down
what you need and maybe also you have thought of kind of a solution already,
and then everybody jumps on board and goes on on that, and we
have a lot of guidelines in place that will help you get started and go
for there it. So, before we talk about more about contributing and getting
into Barista, is there anything that you both wanted to mention as far as
what's actually mixed up in Barista? What is it consisted of? And other
than is it because I'm seeing a lot of components like we're talking about also
colors, icons, things like that. Is there anythings specifical you'd like to
highlight? Yeah, So what we try to do as much as possibly is
we try to have accessibility basically baked in into the components. It's really something
where we try to do our research check out check out guidelines by WSVC.
We have accessibility tests in our our SCIPAD plan to check the components. So
it's really something that we try to build into the components so that the UI
developer then uses the component doesn't have to worry about that too much because it's
already everything there to use. So this is definitely one thing. And the
next thing I guess that we are really proud of right now is the stack
Blitz integration, which is pretty cool as well. So you can even click
this moll button on the on the corner of each example and it will spin
up a stack bits example where you can't start for helping right away. Yes,
that's very cool and I really like the fact that you've got the accessibility
or built in. You know, we were talking about accessibility in our last
episode with Tyli bob rof And and you know, one of the things that
came up was just how as developers, it's just like another thing to try
and remember to do, you know, and it I mean, I'm guilty
of that. It's not always at the top of my list because I'm just
always thinking of a thousand different things when I'm developing, right, So actually
for me being able to use something where this stuff is just it's like a
first class citizen, you know, as part of my components. That is
I think that's fabulous. This is really neat. They have an accessibility checklist
and it is going like it's going through even I guess it's pulling out like
one point three point one infohone relationships or one point four point one use of
color, and it's like group these like rules here. I like link it
in the chat, but it's it's grouping these rules, which is so like
beause you're saying, it can be really overwhelming sometimes to remember and keep in
mind. It's really hard to get right help. And it's also I guess
when you come from come from a classic developing development standpoint, it's it's kind
of hard that you now have to do a lot more to get the component
out there, So not just developing the component, developing tests, developing for
accessibility and stuff like that. But I guess it's a good way and push
it. Definitely do it more. So, how can developers try out Barrista?
What's the what do they do to incorporate it or start with it?
If I remember correctly, Inchy as a Diana trace left Baristas components, shut
that bright Jo, love it. Love it when you just take all the
work away for me, that's perfect. So you should to do that on
a new CLI project or an existing one, and it's all the necessary binesses
and all the stuff for you right away. So you can choose if you
want to import the stats. You can choose if you want to use the
actings or not. I think if I remember correctly, and that's it,
you can use it. Remember remember the glory days when you wanted to use
angle the material and it's like, right, well, got to manually import
this, and then I got to read these docs and go through eight thousand
steps and work out if I need to import hammer JS, and then I
got to manually you need version A single command there is in there. Thank
you for rescue. Yeah, absolutely absolutely, it's fabulous. Oh my goodness,
that's amazing. So as people are using very stair starting to love it,
what what are the steps for contribution and getting in touch if they have
issues? I know you'd mentioned it earlier about not just creating a PR right
away, So yeah, I guess if you contribute with kind of differentiate between
just a bug or a feature. So a bug is pretty straightforward opening issue,
and if you if you already know the solution or know how to fix
it, open a PR on the side and we will check it and we'll
go forward. And with a feature, I guess small features kind of work
like your bug. Sorry proposal, it's not needed for that one, but
for major features small I tried to avoid this question. You don't have to
get into if you don't want to small like a button or small as in
like I'm just adding a very small feature onto the button. I don't.
I guess yeah, or maybe a new input for a component would be kind
of a small feature, and the major feature would kind of be a new
component or or a big feature for an existing one. But it kind of
depends. Did not mean to put you on the spot with the worst question
ever. So I think people are going to be the open sources so brave
because I'm listening to you having this discussion thinking I wouldn't even know where to
begin if I was going to like implement a new component. What's it missing?
I don't even know. I guess you have to be using it all
the time, because it actually can be I use a lot of Angler material,
and you know, I come across things that are missing from there,
like like a file input for example. You know, so, yeah,
I get it if you're using it regularly. But yeah, also interesting from
for for us and the team, like every time when we thought okay,
now we are kind of complete or we have everything in place, new stuff
pops up and it's kind of interesting to see what how different apps are and
what is needed to out there. That's so funny that yeah, you're like,
we're there, we have reached it. We are We're one hundred,
And then you're like, oh, wait, as somebody ever like just raise
the payr for just some something completely absurd that you've just gone, how dare
you? Yeah, sometimes you have to convince people that it might not be
the right direction to go, which can be some kind of hard at some
point, but we as the the core maintain a team. We have to
we have some responsibility to provide consistent APIs across components, to follow the same
API principal design principles that we have stuff like this, so you can build
the same component probably one hundred different in a hundred different ways. But as
part of the design system, we try to be consistent not even in the
look and field, but also in the way developers use the components. Right,
so having an input name disabled on all your on all your components and
be consistent makes it easier for your consumers and for your developers to use the
components. So is it it's time consuming to interact with people to talk about
it might not be the best solution for us to take prs and merge them
in. Is that does that overwhelm you guys? Or is it totally fine?
I mean, I mean it's yeah, yeah, it's quite different.
It goes up and down, but overall it it takes quite quite some time
from the team to deal with those. So we have a chaotic rotation basically
in place. So we always pair up to two team members for one week
and they are in charge of answering questions on the seleg channel and being the
first people to respond and data issues, trying to do some housekeeping on poor
requists and stuff like this. So everything that you need to do in an
open source project like labor the poor requiest wrtch them reach out to contribute as
if they are stuck and stuff like this and help them out. So we
basically have two people rotation in place to handle this. Couldn't have said it
better, I guess, And I just asked, so how heavily is this
used inside of diamond trace, you know? I mean are we talking?
Is it? Is it used on like a product or is it like that
You've got this huge sort of suite of products and it's used on everything or
what sort of how how much flexibility is there in in how it's used sonos
hairs like something some or let's say their product which is called dino tras,
right, and where is this of course use there, But aside from the
main product product, we have a lot of tools and side projects and stuff
around that we will also definitely to use diantres and are using it. Yeah.
I think like as you as you start to expand and you probably get
this a lot from people using it in their own projects now that it's open
source. So I guess again the one that we've got in house where I
am because we're only using it on a single product at the moment. It
literally you add, you add features to it when you need something for this
product, right Whereas as soon as you start using it on our second product,
you might find this second the second thing actually needs this different mindset of
the kind of things that we need to introduce, and that's how you end
up growing missing out. Have you seen much growth in it since people have
started using it for their own projects? Yeah, I think so. So
we have basically, as Thomas pointed out, we've one big product. But
of course internally once you have quite a collection of components, readily wherever people
start using it for all different kinds of things. Like DevOps team is building
in the internal pipeline tooling us exectly with it. Our security team is building
the internal security tools with the design system, which is quite nice. And
you get some different perspectives also not only from the product perspective, but also
from some internal toolings. And this is this is I think significantly increased and
over the last couple of weeks we also see some significant increases in contributions,
especially from people from different UI teams coming in like they are now heavily using
it for a couple of months or even years now, and by using it
longer and longer, they I was more willing to contribute than pitching themselves,
that's for sure. Oh yea, I will now not say a thing like,
oh I hate that I hate that dance. It's like whenever you're in
the store and you're like trying to pass someone and you're just kind of keep
Yeah you should. You should try it when both of you are British and
you're just being so dreadfully polite, and it can go on. It can
last for days. It just goes on until somebody gets hungry, and then
you have to go and find somebody. Okay. I just know if I
heard something like a Canadian standoffs, just like because they're so polite, yeah,
and the two Canadians basically opening the door for each other, but no
one goes in. Oh what say it's gone now, Chris. That's how
you secretly win one of those standards. You just refuse baffle your opponentstract yeah,
I wanted to circle back a little bit. I was just looking to
look at our show notes and I saw that you you did a talk you
mentioned you talk already but at the NNGD, and it's called learnings from building
a Component Library, And I just wanted to desire anything that we haven't already
discussed. That is an important point. You know, something that you've learned
from building this that might be good to share. I mean, from my
point of view, we had a huge part of the of the of the
talk was like how do you sign APIs and how to structure them and what
to look out for, and yeah, this was a huge learning curve for
us and we are still learning on that. And one point that Fiber already
mentioned is like keeping API is consistent throughout all components. But what you also
learned is not only keep that API consistent throughout our components, but keep it
consistent for example, like implementing a checkbox, but we want to have our
we want to have the EPI have the checkbox also as close as possible to
the native checkbox, so it's very easy for consumers to use. They already
know how it works just when looking at it and stuff like that, I
guess really helps the consumers. But yeah, we had to learn it.
Yeah, I can see why that's super important as well, because and I
keep sort of bringing back to angler material, but that's just it's the one
that I use have used the most, right, But there's I think it's
radio buttons. It's either in material or it's in ionic. But it's like
when you want to use radio buttons and integrate it with a form, it
like it just works totally differently if I was just using radio buttons in plain
HTMUT. And I find that so frustrating because I just, like you say,
I just want to implement this as close to the actual non framework thing
as I possibly can. And I hate it when I have to put radio
buttons in because I'm always on stuck out fight. It's reading the same same
posts that I read every time, you know, to try and figure out
the answers. So you have like very strong emotions to radio buttons, I
guess as anyone does. Yeah. One additional thing that we definitely learned,
and this helped us actually keep our EPs quite saber, is to use content
projection in Anglo for the smaller bits and pieces of your component so if you
have the card, I mean material does it the same way. We were,
of course heavily inspired. But what they're doing, they're doing it for
quite some time, very very good actually, So use for the title,
don't use a string input on it, but use the directive that you can
just put in your card, because at some point of your project managers is
going to say I need the second letter or the number in the title being
raped or bold or whatever. And then if you use an input that can't
handle HML, then you basically have to change the API and break it.
And if you provide it as in the library that people install it as a
dependency in the project. You should have your APIs as stable as possible for
as long as possible so that people don't have to upgrade. And I guess
another point that the basically builds on favance point is like we learned the hard
way that you should build like for the data structures you cannot control. So
never assume with data structure for your input. Use from the projection blight.
Let the consumer loop over the options of this elect for example, instead of
just let's in pass in an array as an input, because if you do
so you will get like a hundred different black structures or a race or or
objects in in in a race that you cannot control. And I think it's
also hard for the for the consumer then to to transform his data structure to
the to the one that is required for the control to work. And yeah,
this was yeah, like our three main main I P I designed,
I guess points we want to we want to point out. Yeah, have
other people not may make the same mistakes as we did. Yeah, it's
you know, I will definitely step by this time. No, I was
just going to say, did you figure him out early on or was it
like, oh, let's rewrite on a version two type situation. No,
as it's quite some experience with material like we have. We checked out some
other other lebraries out there, of course, and we learned something the hard
way, I guess and others came more natural if you look at the food
works and we're currently and work for version three. So yeah, the feature
set is the same, but we learned a lot. Let's say that the
way is that going to break stuff moving up to version three or is it
going to be a smooth integration for people? We're still doing odd things on
the go I gain esially with a proponent. I don't want to make any
promises right now. Yeah, sure we could have got a scoop. There
is the guarantees breaking but no official unofficial. But what we're trying to do
with each breaking change is odd to make as much as possible. So you
might be familiar with in the upgrade and the upgrade Angie up again, I
never remember grade with whichever one isn't going from Angular j Yeah, so if
you do that, you can do the same thing with Commandant levery usually.
So we try to automate as much as possible away from the from the developers
if they want to upgrade, and we stick to the release cycles of Angler
quite closely. So whenever Angler releases a breaking change, like with version ten,
we usually wait a couple of weeks and the next breaking version is then
around the corner for us as well. Speaking of version three, do you
have any plans for the future we can talk about. Yeah, so we
we had a very close look at web components to help us help us solve
a couple of future requirements, and we don't want to limit us to the
to the angular world out there. I think reaccess has quite the cool community
out there and people have built awesome stuff in the Red community as well.
So we are thinking about expanding the new come components for the next version of
the design system also and provide them as web components for everyone to use and
not only for Angler developers as angular components. So definitely I think a huge,
huge upgrade, right, like to take everything into a web components.
Yeah. Sure, it's quite quite big challenge as well. It's a big
project. We have checked on some some different libraries out there, some different
ways of how to build web components efficiently. Angle elements with one of them,
sen Suggests was the next one, but at the end we were kind
of decided now on lid elements. So if you haven't checked it out,
it's actually quite a cool layer on top of web components, so definitely encourage
you to check it out as wells elements. Y. Yes, I feel
like I've heard of that also from Google from the maybe you know the Polymer
team they develop yet and it's kind of easy to integrate it into Angler in
your existing up So just trying to sneak Polymer out there again, let's just
get it a new name. Maybe people will use it this time. Yeah,
but it's actually it's not not as much work around the standard anymore as
Polymer was in the past. I think I feel like NAS has evolved quite
quite a lot in the meantime. And yeah, it's a library and not
the framework, and this is it's not as heavy Angler might feel in certain
situations. If you build a component library, you don't need a router,
you don't need a service worker, you just need a small part of Angler.
The ecosystem is pretty awesome. But if you only focus on building a
component library, a scale down version of what you're trying to do might might
be a better fit. Why use a library or a framework for your web
components at all? Just out of interest? And I'm a work Component is
something that is has been like at the top of my my radar for a
long time, and I'm just not sort of taking that step to get to
properly get into it. So if I I've realized we're going off topic a
little bit. But if so, if I was like to look into that,
why why would I look at a library or framework rather than just starting
to build some vanilla web components. I guess the big point there is data
binding or binding itself, like the web components itself do not have something like
binding in place, so you have to update and rew end up your own
by your own and the tops basically sounds ghastly looking. Economics is for me
to killer feature. So if you would take a look at on how you
have to write your template for your web components, how you have to hook
up into life secting methods, this whole boiler plate of actually fitting into the
standard, it's just taking away out of your hands. The library is in
care of it. You have to write one random function. That's it.
That's basically the minimum that you have to do. And having these economics in
place for you to three write efficient web component code, having efficient brand up.
They stuff like this was for us. I guess to killer the killer
feature. So let elements handles all of that. Yeah, yeah, that
sounds sounds good. So yeah, I was kind of I'm typing I could
get down a whole rabbit hole and how try and restrain myself. I'll retract
that question before I ask you. We can have a ball up if you
like. I like to talk about that opponents. Yeah, because I didn't
even know that let elements was the thing, and now I'm like, I
actually take it, and it's so neat if you think about you can important
as an econoscript module in your browser and not have a build even running.
It just works because it's it's using everything that platform gives you. You don't
have to have a web pig builds, you don't have to have a roll
up building place. You can throw in an import statement in a script take
and it loads your web components you can use. You're not paid to say
that I'm not about the technology. Here's a bold claim as well. Elements
is supported supports Internet Explorer of all browsers. Why is that still a fair?
Do you see that it's something if you just got to the well,
if you to be honest the scenes, you have to just google lit elements
because they did not pick the best ur L best delay. But if you
go to the Elements website and you s go down to the bottom browser compatibility,
littlements works in all major browsers Chrome, fire Fox, I safarian.
I mean I would argue that I is not a major browser anymore, but
you would you would argue this, but you believe I told you that my
next big series at work is talking about how people can migrate from silver light
to angular. It's well because it's end of life next year and so big
companies that are on these massive silver light applications are trying to figure out what
to do now. So I interesting putting that with the I E talk.
There's like floating that one out into the room. Seeing we started with ang
I know, I know. My first question was do you when you say
migration, do you mean rewrite? Is that what you mean? So we'll
see, we'll see. But oh my goodness, so I'm loving loving that
element. It's looking like it might actually get me into like writing web components
because it was it did seem like a lot to handle by yourself without so
that's awesome. I know, I kind of feel like I want ever go.
I feel like I should try by Angler's it anger omens Anger. Yeah,
just because because I like the idea. I like the idea that I
can make a web component that uses like my reactive forms for example, like
by doing that. But at the same time, this looks really nice as
well. So we also checked out Angler elements because like it. Apparently it
was our first idea. It's very close, but I guess it would have
worked fine, but there was one thing we found out, like not all
features Angular supports work in web components, and it would be really hard for
developers to so they are still in the Angular universe with Angular elements, but
do not know out of the box which features they can use in which they
don't. Right, So for example, cdk orb as would be hard to
do, and we found multiple of things that do not work in Angler elements.
And also you have to take some some quantity of the Angular compiler with
you right in your web components, so you are going to be making heavy
heavy web componing. Anglers work really or the Angler team have worked really hard
to get rid of the Angler is really heavy duty framework that it was when
it first came out, Right, it's not anymore, but a lot of
people still hold that opinion because they haven't bothered to keep up to date on
it. So at the same time, if you're building your web components with
Angler elements, you're basically going to be building heavy, heavy web components only
because you're having to ship some part of Angular with it. And really,
I didn't know that's how it works. I think so because it basically still
got a fire up Angular to make the component work. I think I haven't
looked into it enough. Yeah, it appre shakes everything you wait cantry sure
the way that you're not using from the framework similar to what webe does or
the CLI build does up front. But still you need you basically have to
include some parts of Angler in each and every web component that youer ship.
So you basically have to multiply this by every web component that you have.
But as Thomas pointed out, it you are still writing Angler code, but
you have to think about the subset that you're allowed to use, and there
is no tooling support to help you out. So for you, it's easier
to just go with something like that element where it's it's completely different, and
so you're not even you're not even trying to use any other things that might
not exist. Yeah, think of for example, future children, the directive
or the feature you can use in Angular the wrong work in web components.
So how to tell developers, Okay, you can use these features, but
you shouldn't you like few children or other futures in Angulo, but they can
still import it, so we might I had to work around it a lot
to make that clear or I'm not sure how we would have solved that,
so madn't actually like why would why would they? Why would it be a
thing that you can do an angler If you can't actually do all of angler
in it, it's madness. Yeah, But I think it's a technical reason
because right I think we're talking with some other devs about this, isn't it
because like, how would that work outside of angular? Like wouldn't it be
incredibly painful and kind of dependent or something? Yeah? Yeah, it's also
a matter of you can you can basically build you a big web component if
you want not not think about something that you compose out of different bits and
pieces and wrap this into an anglear element and everything works out fine and angler
runs within this. But if you want to have like an API it you
can compose all of different bits and pieces. This is where you need slots
in web components and angle elements. They don't really work that well together,
at least back then when we had a closer look at it. So it
really depends on your use case. I think you can build quite the big
app and rep it into a web in an angle element and everything is good.
But if you want to have a composable UI library for your designstmith might
not be Yeah, I think honestly, it just wasn't like you were saying,
it just wasn't there yet, and especially with ivy and some of the
other things they were focusing on, things just kind of got put on hold.
So I don't know as far as like version eleven or twelve, if
we'll be seeing any updates with elements, but I do know that it was
kind of stalling there for a bit and lacking in the feature set. But
still it's a cool, cool approach I think that they had taken. So
I'm excited to see what's to come. But there's actually one thing gonna miss,
and that's the city K because this is actually a great piece of software
and helped us a lot. So that to the CDK. But what what
things do you guys use the most in the CDK? Oval is important to
say everywhere. Yeah, I guess those two anti accessibility features like focus traps
and stuff like this make it a lot easier to to handle those complex accessibility
features as well. You say the accessibility stuff is like one of my favorites
for the city It's pretty awesome. Yeah, And if for sure the City
City Cake folks here that we are looking forward for date peaker support. Isn't
that they didn't they say something about that? Or actually hope I think it's
got the range update in ten or something, which is also nice to have
in material, but rather heavy than the City kids. Let's see, we
are almost to the top of the hour, so before we hit up picks,
is there anything else you gentlemen would like to mention about Barista or web
component journey, anything else before we hit up picks. I guess try it
out, give us feedback, reach out, open issues, any any feedbick
is highly welcome and yeah, happy to do here. Any any important,
any feedback? Sorry, Chris, did you have any more questions? No,
thank you, thanks for checking. I was like, oh no,
I might have cut them off. I better I better fix that. Oh
well, we always let our guests go last. So I'm gonna say my
pick for the day is just code it live the Twitch channel. I'm on
there all the time with my other advocates, typically Wednesday afternoons doing UI work.
So yeah, come check it out, hang out, let's do some
some fun coding live. You know how that always goes. So but yeah,
Chris, what do you have for us today? I kind of got
a random, bizarre pick. I was on Twitter last night, as I
am occasionally all the time, I saw somebody tweeting. I can't remember what
they're tweeting about, to be perfectly frank, the content didn't stick with me.
But they were describing something. I'm assuming that they were American describing something.
They were calling whipped cream. And they had one of those cans and
they were squirting cream out of it. Right, is that? What is
that? What whipped cream is in the States? Right? That's madness?
No, we call it squirty cream. That's squirty cream. No, it
is, it is, And I'll have you whipped cream, right is when
you get cream and you get put in a bowl and you beat it until
it is thick and stiff. And I just saw this tweet. Obviously in
sensed me, I was like, how can you call it whipped cream?
That's squirty cream? Squirky? Okay, Fabian? Is it squirty cream or
is it whipped cream? For you? The whipped cream part of Christ describe
is called schlug was in what's a better way, So if you if you
want to check, you know what it means translated like what the obos is
like cream and schlag is like punch. So you've punched. Yeah, yeah,
punchy cream whipped. We got squirty and we got punchy cream. I
love that. My pick is squirty cream. I love it. Chris the
Oh. The first time I was in London, I was talking to some
coworkers and I was like, to tell me, like, favorite favorite dessert
go and they were like, oh, banaffi banoff pie and I was like,
none of that is a word. So then they had to like google
it and show me. Never heard of it in my life. So I
love I love learning about things like whether it's you know what they're called,
or just I love it. So it might have pie squirty cream. Oh
okay, So Thomas and Faby and do you gentlemen have some picks for us
today? Yeah? Maybe. I'm not sure if some of you guys is
into game engine and game coding, but there are some two great channels out
there. That one is Sebastian League or League not sure how is it called.
The second one is the Journal and watching them quite a lot recently because
I never programmed for game engine or or I had a look under the hood
of of how games are developed. But they do a great job. And
this is this on twitch? What is this? It's on YouTube? YouTube?
Okay, yeah, I was like, get me some links because I
I love gaming, actually had carpal tunnel surgery so that I could get back
to playing video games, and of course I love programming, so those two
combined. I've just always heard that it's like hella hard like that, like
here's web development and then here's game development, like way up there. So
I would be curious to see the first three C plus plus code. It
was like, I can figure it out that a friend of mine is like
the engine lead that paradox interactive paradox they make, like I can't mimb what
it's called. Now they do. They do quite a lot of the Grand
Strategy games. They have this big one set Stillaris, that's it Stillaris seems
like the engine lead on that. But he did a talk at a conference
last year. I think it was like specifically all about how they put together
the engines for these Grand strategy games. I don't really play those kind of
games myself, but there was an interesting toal I's see if I can dig
it out, put it in the show notes in the scars all away from
from programming games forever. Probably, yeah, absolutely right, Just just give
me like, well, I'm i mean pixels to the left of this button.
Let's do vexetra calculations. Oh yeah, I didn't even know c SC
animations. That's where I hit my limit and like SPG yeah where no way?
Oh okay, So any other picks, yes, for sure. So
if you're missing live sports, you went in the in Current Times shape out
the Marvel League on YouTube. If you have not so, at first you
might think it's quite silly to watch some marbles compete. It's it's like,
right now, I think it's already sponsored from Bye Bye last week tonight from
John Oliver. They also had had a take on it during one of the
recent shows. It's basically somebody created different teams of Marvels, like they have
Savage Spears, they have the Raspberry Races and some other silly names, and
they compete in Marvel Olympics, which are different, different courses, different tracks,
and they compete against each other and it's so addictive. If you haven't
checked it out, it might sound really really silly, but it's actually quite
fun. Yeah, that's awesome, Marble League. I love it. Yeah,
I'm looking right now. I hadn't heard of this, so I'm going
to totally dive in after the podcast. Thank you for that pick. Sure,
cool, awesome, Yeah, clapping these links in the show notes,
well, thank you. Thank you both Sabbi and and Thomas for coming on
and talking with us about Barista and all of the wonderful things you've learned through
this process and open source and everything. Thank you both. Thank you.
Thanks for up to us. Well, that is a wrap.