1 00:00:06,759 --> 00:00:11,880 Hello and how do My name is Alyssa Nicel. Welcome to another Adventures in 2 00:00:12,439 --> 00:00:18,079 Angular today with us on the panel, we have Chris Ford Hey, Chris, 3 00:00:18,440 --> 00:00:23,359 Hello, and our two Yeah that's right, you heard it. Two 4 00:00:23,519 --> 00:00:30,359 guests today are Thomas pink Guys Hey, Thomas and Bobby and friedle Hey. 5 00:00:31,199 --> 00:00:35,920 So what are we talking about today? Everyone? Yeah? Kind of an 6 00:00:35,960 --> 00:00:42,399 interesting topic. So basically how to build the science system. Yeah, we 7 00:00:42,439 --> 00:00:46,280 were talking pre show and you know, using Angular that's one thing, but 8 00:00:46,399 --> 00:00:52,479 just any design system that'd be tough to tackle. So yeah, before we 9 00:00:52,560 --> 00:00:55,359 dive in, can Thomas and Bobby and can you tell us a little bit 10 00:00:55,359 --> 00:01:02,840 about yourselves and what you do? Sure? Sure, I guess we both 11 00:01:03,039 --> 00:01:08,480 are working on at Diana Trace currently in Austria, so little country in Europe 12 00:01:10,560 --> 00:01:14,359 with great mountains and a good place to ski. Yeah. I worked there 13 00:01:14,400 --> 00:01:19,120 as a senior software engineer and it must be a time I play tennis and 14 00:01:19,200 --> 00:01:22,719 ride bikes. Nice And what did you there, Fabian? Yeah, so 15 00:01:22,920 --> 00:01:27,760 I'm currently the design of steam late at Dina Trace and we as a team 16 00:01:29,519 --> 00:01:34,840 manage our designs as in Barrista and everything that's connected to it, so like 17 00:01:34,920 --> 00:01:38,519 component library that we're building with anchor, and it's quite a challenge for a 18 00:01:38,560 --> 00:01:44,000 small team to have such a central role. But it's it's fun and it's 19 00:01:44,040 --> 00:01:49,280 exciting every day. That's awesome. So the name of the design system is 20 00:01:49,319 --> 00:01:53,599 Barista. Yes, okay, okay, so, and you can find it 21 00:01:53,719 --> 00:01:59,000 on on the gubs. Yes, I see that. So the link will 22 00:01:59,040 --> 00:02:04,280 be in the show note gethub dot com such diner, trace dash, oss 23 00:02:04,439 --> 00:02:07,360 slash barrister. Oh I said the homepage do Dina traes dot com? Cool? 24 00:02:07,680 --> 00:02:13,400 So before we even dive into creating your own why don't we tackle the 25 00:02:13,520 --> 00:02:19,800 question of what is a design system. It's pretty it's actually a pretty hard 26 00:02:19,879 --> 00:02:24,560 question to answer, I guess because everybody just understands something completely different and it's 27 00:02:24,919 --> 00:02:30,039 It can be something like, if you have only a small design team and 28 00:02:30,159 --> 00:02:37,719 you want to have some reusable, shareable design assets en Sigma or in Vision 29 00:02:37,759 --> 00:02:40,759 Studio or whatever design too you're using, that can be your design system to 30 00:02:40,800 --> 00:02:45,159 start off. If you start from a clean slate, that can be your 31 00:02:45,159 --> 00:02:49,199 design system at the beginning, right, But that's where we started actually, 32 00:02:49,599 --> 00:02:53,319 so, but if you if you continue this journey and you evolve the design 33 00:02:53,360 --> 00:03:00,240 system over time, you add stuff like accessibility guidelines to it. You and 34 00:03:00,280 --> 00:03:05,879 then develop us want to use everything that you provide from and need to implement 35 00:03:05,919 --> 00:03:09,879 the designs somewhere right So the next step would be to create your own component 36 00:03:09,960 --> 00:03:16,439 library based on the designs and everything that we just talked about is basically a 37 00:03:16,479 --> 00:03:22,000 design it's methana face. And you can add even more stuff on top, 38 00:03:22,240 --> 00:03:28,840 like having prototyping tools available for project management even so even for non technique people, 39 00:03:29,039 --> 00:03:35,159 or you can extend it for branding guidelines on how to use your brand 40 00:03:35,639 --> 00:03:38,159 inside and outside the company and your products and stuff like this. So it's 41 00:03:38,240 --> 00:03:44,840 really a whole set of things that can be something different for everyone. But 42 00:03:44,960 --> 00:03:49,800 that's what we think designs is Methanify should look like right now. So just 43 00:03:49,879 --> 00:03:55,240 that out of interest, what makes what makes somebody company I guess, or 44 00:03:55,280 --> 00:04:00,599 an individual or a group of individuals, what makes you think, you know 45 00:04:00,599 --> 00:04:04,800 what, let's just let's not use something that already exists. Let's let's create 46 00:04:04,840 --> 00:04:08,599 our own because I mean I can say that it's open source, you know 47 00:04:08,879 --> 00:04:12,879 it's it's it's available and taking a look at the docs, now it's available 48 00:04:12,879 --> 00:04:16,839 for everyone. So what made you like throw in a new offering into the 49 00:04:16,959 --> 00:04:20,759 into the ring, rather than picking up something that pre existing. Yeah, 50 00:04:20,839 --> 00:04:26,000 so I think it's really a choice that you have to make at some point. 51 00:04:26,079 --> 00:04:30,759 Do you want to reuse a branding that's given by a bigger company like 52 00:04:30,120 --> 00:04:35,519 Google material it's really a Google product, it's Google branding. And if you 53 00:04:35,560 --> 00:04:41,959 want to stand out and create your own branding as a company and be identified 54 00:04:42,000 --> 00:04:46,839 as I mean, if you think about Facebook, you can remove the logo 55 00:04:46,120 --> 00:04:49,800 on the web page, you can remove the entire text, have no content 56 00:04:49,839 --> 00:04:55,680 but the skeleton and only the color and the font will let people recognize it 57 00:04:55,680 --> 00:04:59,000 as Facebook. Right, it's the brand Facebook. So I guess that's the 58 00:04:59,079 --> 00:05:02,800 main motivation hand it to be recognizable as a brand, stand out and take 59 00:05:02,920 --> 00:05:08,279 your own branding out there that people can actually use. I think it's so 60 00:05:08,439 --> 00:05:14,199 valuable too for just consistency and a resource for your team to like refer back 61 00:05:14,240 --> 00:05:17,199 to, so that if you do have new hires it's easier to onboard or 62 00:05:17,240 --> 00:05:20,680 if you do have a question with how do we handle this successibility issue? 63 00:05:20,800 --> 00:05:24,319 This is how we handle it. Like I I love this and I love 64 00:05:24,319 --> 00:05:28,120 how detailed going through it right now, and it's very detailed, and you 65 00:05:28,120 --> 00:05:30,839 even have like dev support like links to like I see one here that's like 66 00:05:30,959 --> 00:05:35,439 linked to FI and like as for this particular issue or something like That's that's 67 00:05:35,480 --> 00:05:39,000 really neat is that specifically, like well, you know, if you want 68 00:05:39,000 --> 00:05:41,399 to, if you want to, if you have in trouble with this particular 69 00:05:41,399 --> 00:05:47,680 component, these are the people responsible for your issues. It's cool. Yeah, 70 00:05:49,079 --> 00:05:53,319 it's cool because so the place where I'm working at the moment, we 71 00:05:53,480 --> 00:05:59,439 also are building our own design system in house, but it's specifically it's not 72 00:05:59,680 --> 00:06:02,639 being open source, you know, is specifically for the product that we're building, 73 00:06:02,959 --> 00:06:06,000 and so I kind of get it from that standpoint. So I just 74 00:06:06,000 --> 00:06:10,040 think it's cool that you you sort of have this eye. We're going to 75 00:06:10,079 --> 00:06:12,519 make our own because we don't want to stick to the brand, but we're 76 00:06:12,519 --> 00:06:15,079 also we're going to share it with everyone else sitting that's cool. So open 77 00:06:15,120 --> 00:06:18,759 sourcing it, do you do? You see a lot of other companies using 78 00:06:18,800 --> 00:06:24,399 it or basing things off of it. Actually comments you want you want to 79 00:06:24,439 --> 00:06:29,160 take. Yeah, we we started with open source not that long ago, 80 00:06:29,279 --> 00:06:34,639 so we're still we're still in trying and trying to find our community and trying 81 00:06:35,000 --> 00:06:41,120 to get reached, but the science system exist for much longer basically, and 82 00:06:41,399 --> 00:06:47,240 then just the I guess I congratulations on taking that leap, because that can 83 00:06:47,279 --> 00:06:50,759 be a big one like opening the you know, the blind and letting the 84 00:06:50,759 --> 00:06:56,199 world in that can be Was there something that made you go like it's time 85 00:06:56,240 --> 00:07:04,160 to time to So we were talk at antide in Berlin in August where we 86 00:07:04,759 --> 00:07:10,920 basically had our first conference talk last year, and we showed a couple of 87 00:07:10,920 --> 00:07:14,560 things that we did and everybody was really interested in what we were doing. 88 00:07:14,879 --> 00:07:18,000 And back then we had to tell everyone, yeah, we have documentation out 89 00:07:18,040 --> 00:07:25,279 there publicly, but you can't really insulate yourself so and finding angler developers in 90 00:07:25,279 --> 00:07:30,879 Europe is actually not that easy. So you you want to have as much 91 00:07:30,279 --> 00:07:34,160 out there to people to show people that hey, we take the stuff really 92 00:07:34,199 --> 00:07:41,399 seriously and we want to provide high quality components. And doing open source can 93 00:07:41,480 --> 00:07:45,800 be a motivation as well for people. People like doing open source. It's 94 00:07:45,839 --> 00:07:48,959 it's it's cool to give back to the community. So that's also from a 95 00:07:49,040 --> 00:07:55,800 perspective to attract talent basically a motivation to go open source as well for sure, 96 00:07:56,199 --> 00:07:59,879 and giving back having having an outlet in the community. Being able to 97 00:08:00,040 --> 00:08:03,800 talk about the code did usual and it's like, I love that that people 98 00:08:03,800 --> 00:08:07,240 were asking about it, and that's what led to deciding the open source all 99 00:08:07,279 --> 00:08:09,199 of it. That's really neat. Yeah, we actually had I guess, 100 00:08:09,519 --> 00:08:16,040 people that showed us their apps built with Arista when they applied for a position. 101 00:08:16,160 --> 00:08:18,720 So this was was kind of great to see. I like the way 102 00:08:18,720 --> 00:08:26,720 that you're using it as a as bait, handy try and learn the angle 103 00:08:26,879 --> 00:08:31,159 development. Oh my goodness, I love it, Chris, but I'm going 104 00:08:31,200 --> 00:08:37,600 to use that. It's pretty cool to be working on an open source twenty 105 00:08:37,320 --> 00:08:41,960 every day of the week. Basically, it's like we we inside the team 106 00:08:43,320 --> 00:08:48,200 enjoyed quite a lot, but it changed the way we work completely. Basically, 107 00:08:48,600 --> 00:08:54,639 you need to work differently. You need to work differently because there's more. 108 00:08:54,679 --> 00:08:58,320 Everything is asiing, right, everything is Asian, not only visibility wise, 109 00:08:58,399 --> 00:09:01,720 but as I guess, you need to document a lot more. You 110 00:09:01,759 --> 00:09:07,720 basically document everything for people that you don't know are even reading or want to 111 00:09:07,799 --> 00:09:11,559 contribute. Right, So you want to open yourselves up. You want to 112 00:09:11,559 --> 00:09:16,000 be as transparent as possible about the processes everything that you do. There should 113 00:09:16,039 --> 00:09:18,960 be available for everybody because everybody can see it, right, So we want 114 00:09:20,039 --> 00:09:24,720 to encourage everybody to contribute to open podcasts, open issues. And actually, 115 00:09:26,000 --> 00:09:31,240 I guess a huge for us was bringing the discussions to the public, discussing 116 00:09:33,000 --> 00:09:39,039 lance, discussing bugs on GitHub. So was that scary? Did that? 117 00:09:39,480 --> 00:09:46,039 Go? What does your work find you? You are opening yourself up to 118 00:09:46,080 --> 00:09:48,480 exposure? There aren't you when you when you do that, like when you 119 00:09:48,879 --> 00:09:50,919 when you're working on something in house for your client, you know you've got 120 00:09:52,039 --> 00:09:54,559 you've got a few people reporting bugs to you. But as soon as you 121 00:09:54,639 --> 00:09:58,080 go, hey, everyone take it, you know, feel free to help 122 00:09:58,120 --> 00:10:03,799 yourself, everyone just piles in. Right, I didn't mean it, I 123 00:10:03,879 --> 00:10:09,080 take it back. It's closed source now. Sorry. It was actually not 124 00:10:09,360 --> 00:10:13,600 just a step for the public or, as you say, for the outside 125 00:10:13,600 --> 00:10:18,600 of Pine Trists. It's also a huge motivation for people inside. Diana tries 126 00:10:18,879 --> 00:10:26,639 to suddenly check out what's happening there and then giving a lot more feedback. 127 00:10:26,720 --> 00:10:31,399 Then if it's just a small a small package, a small as a small 128 00:10:31,440 --> 00:10:35,960 tool inside Patris, yeah, you can get exposure if you wanted. There's 129 00:10:37,000 --> 00:10:41,080 a single employee in the company as well, so you usually work your data 130 00:10:41,440 --> 00:10:48,120 is working on some front and tooling that reaches the customer or maybe even maybe 131 00:10:48,159 --> 00:10:52,080 not, but you might need a component that others can use as well. 132 00:10:52,600 --> 00:10:56,000 And if you can do that by contributing to an open source project, it's 133 00:10:56,039 --> 00:10:58,519 pretty cool. So do you have rules you're saying you know, it's a 134 00:10:58,519 --> 00:11:03,200 way for even internally someone can contribute. Do you have rules or guidelines as 135 00:11:03,240 --> 00:11:09,320 far as when you contribute a new feature, make sure you're writing about it 136 00:11:09,360 --> 00:11:13,000 in the documentation like that has to be a part of the pr or guidelines 137 00:11:13,039 --> 00:11:18,759 such as that. Yeah, we actually have a lot of guidelines out there. 138 00:11:18,200 --> 00:11:24,000 New developers can take a look on. And I guess every feature starts 139 00:11:24,080 --> 00:11:28,200 with a kind of future proposal as a guitar issue, So you write down 140 00:11:28,240 --> 00:11:33,759 what you need and maybe also you have thought of kind of a solution already, 141 00:11:35,600 --> 00:11:39,639 and then everybody jumps on board and goes on on that, and we 142 00:11:39,679 --> 00:11:43,720 have a lot of guidelines in place that will help you get started and go 143 00:11:43,759 --> 00:11:50,320 for there it. So, before we talk about more about contributing and getting 144 00:11:50,320 --> 00:11:54,679 into Barista, is there anything that you both wanted to mention as far as 145 00:11:54,840 --> 00:12:00,919 what's actually mixed up in Barista? What is it consisted of? And other 146 00:12:01,000 --> 00:12:03,600 than is it because I'm seeing a lot of components like we're talking about also 147 00:12:03,679 --> 00:12:07,720 colors, icons, things like that. Is there anythings specifical you'd like to 148 00:12:07,759 --> 00:12:13,039 highlight? Yeah, So what we try to do as much as possibly is 149 00:12:13,039 --> 00:12:18,000 we try to have accessibility basically baked in into the components. It's really something 150 00:12:18,039 --> 00:12:24,360 where we try to do our research check out check out guidelines by WSVC. 151 00:12:26,639 --> 00:12:31,159 We have accessibility tests in our our SCIPAD plan to check the components. So 152 00:12:31,240 --> 00:12:35,039 it's really something that we try to build into the components so that the UI 153 00:12:35,200 --> 00:12:41,360 developer then uses the component doesn't have to worry about that too much because it's 154 00:12:41,360 --> 00:12:45,440 already everything there to use. So this is definitely one thing. And the 155 00:12:45,600 --> 00:12:48,639 next thing I guess that we are really proud of right now is the stack 156 00:12:48,679 --> 00:12:52,799 Blitz integration, which is pretty cool as well. So you can even click 157 00:12:52,879 --> 00:12:58,919 this moll button on the on the corner of each example and it will spin 158 00:12:58,039 --> 00:13:03,320 up a stack bits example where you can't start for helping right away. Yes, 159 00:13:05,080 --> 00:13:09,799 that's very cool and I really like the fact that you've got the accessibility 160 00:13:09,480 --> 00:13:13,399 or built in. You know, we were talking about accessibility in our last 161 00:13:13,440 --> 00:13:18,200 episode with Tyli bob rof And and you know, one of the things that 162 00:13:18,399 --> 00:13:22,600 came up was just how as developers, it's just like another thing to try 163 00:13:22,639 --> 00:13:26,559 and remember to do, you know, and it I mean, I'm guilty 164 00:13:26,600 --> 00:13:30,440 of that. It's not always at the top of my list because I'm just 165 00:13:30,720 --> 00:13:33,240 always thinking of a thousand different things when I'm developing, right, So actually 166 00:13:33,360 --> 00:13:37,799 for me being able to use something where this stuff is just it's like a 167 00:13:37,840 --> 00:13:41,440 first class citizen, you know, as part of my components. That is 168 00:13:41,639 --> 00:13:46,840 I think that's fabulous. This is really neat. They have an accessibility checklist 169 00:13:48,440 --> 00:13:52,840 and it is going like it's going through even I guess it's pulling out like 170 00:13:54,240 --> 00:13:56,960 one point three point one infohone relationships or one point four point one use of 171 00:13:58,039 --> 00:14:01,360 color, and it's like group these like rules here. I like link it 172 00:14:01,639 --> 00:14:05,440 in the chat, but it's it's grouping these rules, which is so like 173 00:14:05,519 --> 00:14:11,039 beause you're saying, it can be really overwhelming sometimes to remember and keep in 174 00:14:11,120 --> 00:14:16,600 mind. It's really hard to get right help. And it's also I guess 175 00:14:16,639 --> 00:14:22,799 when you come from come from a classic developing development standpoint, it's it's kind 176 00:14:22,840 --> 00:14:28,639 of hard that you now have to do a lot more to get the component 177 00:14:28,720 --> 00:14:33,480 out there, So not just developing the component, developing tests, developing for 178 00:14:33,639 --> 00:14:39,279 accessibility and stuff like that. But I guess it's a good way and push 179 00:14:39,320 --> 00:14:46,960 it. Definitely do it more. So, how can developers try out Barrista? 180 00:14:48,320 --> 00:14:52,120 What's the what do they do to incorporate it or start with it? 181 00:14:52,639 --> 00:14:58,759 If I remember correctly, Inchy as a Diana trace left Baristas components, shut 182 00:14:58,919 --> 00:15:01,440 that bright Jo, love it. Love it when you just take all the 183 00:15:01,559 --> 00:15:07,399 work away for me, that's perfect. So you should to do that on 184 00:15:07,679 --> 00:15:13,320 a new CLI project or an existing one, and it's all the necessary binesses 185 00:15:13,399 --> 00:15:16,960 and all the stuff for you right away. So you can choose if you 186 00:15:18,000 --> 00:15:20,360 want to import the stats. You can choose if you want to use the 187 00:15:20,559 --> 00:15:24,759 actings or not. I think if I remember correctly, and that's it, 188 00:15:24,960 --> 00:15:30,200 you can use it. Remember remember the glory days when you wanted to use 189 00:15:30,639 --> 00:15:33,000 angle the material and it's like, right, well, got to manually import 190 00:15:33,080 --> 00:15:37,159 this, and then I got to read these docs and go through eight thousand 191 00:15:37,440 --> 00:15:39,480 steps and work out if I need to import hammer JS, and then I 192 00:15:39,519 --> 00:15:48,559 got to manually you need version A single command there is in there. Thank 193 00:15:48,600 --> 00:15:54,919 you for rescue. Yeah, absolutely absolutely, it's fabulous. Oh my goodness, 194 00:15:56,000 --> 00:16:00,080 that's amazing. So as people are using very stair starting to love it, 195 00:16:00,279 --> 00:16:06,639 what what are the steps for contribution and getting in touch if they have 196 00:16:06,759 --> 00:16:10,399 issues? I know you'd mentioned it earlier about not just creating a PR right 197 00:16:10,440 --> 00:16:15,879 away, So yeah, I guess if you contribute with kind of differentiate between 198 00:16:17,320 --> 00:16:22,240 just a bug or a feature. So a bug is pretty straightforward opening issue, 199 00:16:22,759 --> 00:16:26,240 and if you if you already know the solution or know how to fix 200 00:16:26,320 --> 00:16:30,759 it, open a PR on the side and we will check it and we'll 201 00:16:30,840 --> 00:16:34,600 go forward. And with a feature, I guess small features kind of work 202 00:16:34,720 --> 00:16:40,480 like your bug. Sorry proposal, it's not needed for that one, but 203 00:16:40,960 --> 00:16:49,240 for major features small I tried to avoid this question. You don't have to 204 00:16:49,279 --> 00:16:53,919 get into if you don't want to small like a button or small as in 205 00:16:55,159 --> 00:16:59,840 like I'm just adding a very small feature onto the button. I don't. 206 00:17:00,399 --> 00:17:07,000 I guess yeah, or maybe a new input for a component would be kind 207 00:17:07,039 --> 00:17:11,640 of a small feature, and the major feature would kind of be a new 208 00:17:11,720 --> 00:17:18,279 component or or a big feature for an existing one. But it kind of 209 00:17:18,359 --> 00:17:22,559 depends. Did not mean to put you on the spot with the worst question 210 00:17:22,640 --> 00:17:26,079 ever. So I think people are going to be the open sources so brave 211 00:17:26,200 --> 00:17:30,200 because I'm listening to you having this discussion thinking I wouldn't even know where to 212 00:17:30,279 --> 00:17:36,440 begin if I was going to like implement a new component. What's it missing? 213 00:17:36,559 --> 00:17:40,319 I don't even know. I guess you have to be using it all 214 00:17:40,400 --> 00:17:42,559 the time, because it actually can be I use a lot of Angler material, 215 00:17:44,079 --> 00:17:47,359 and you know, I come across things that are missing from there, 216 00:17:47,480 --> 00:17:51,960 like like a file input for example. You know, so, yeah, 217 00:17:52,039 --> 00:17:59,240 I get it if you're using it regularly. But yeah, also interesting from 218 00:17:59,359 --> 00:18:03,480 for for us and the team, like every time when we thought okay, 219 00:18:03,640 --> 00:18:07,119 now we are kind of complete or we have everything in place, new stuff 220 00:18:07,160 --> 00:18:15,640 pops up and it's kind of interesting to see what how different apps are and 221 00:18:15,559 --> 00:18:21,359 what is needed to out there. That's so funny that yeah, you're like, 222 00:18:21,559 --> 00:18:25,000 we're there, we have reached it. We are We're one hundred, 223 00:18:25,599 --> 00:18:30,799 And then you're like, oh, wait, as somebody ever like just raise 224 00:18:30,839 --> 00:18:34,200 the payr for just some something completely absurd that you've just gone, how dare 225 00:18:34,279 --> 00:18:41,599 you? Yeah, sometimes you have to convince people that it might not be 226 00:18:41,720 --> 00:18:47,000 the right direction to go, which can be some kind of hard at some 227 00:18:47,160 --> 00:18:51,960 point, but we as the the core maintain a team. We have to 228 00:18:52,440 --> 00:18:56,799 we have some responsibility to provide consistent APIs across components, to follow the same 229 00:18:56,920 --> 00:19:03,160 API principal design principles that we have stuff like this, so you can build 230 00:19:03,240 --> 00:19:08,559 the same component probably one hundred different in a hundred different ways. But as 231 00:19:08,599 --> 00:19:14,440 part of the design system, we try to be consistent not even in the 232 00:19:14,519 --> 00:19:18,240 look and field, but also in the way developers use the components. Right, 233 00:19:18,440 --> 00:19:25,359 so having an input name disabled on all your on all your components and 234 00:19:25,559 --> 00:19:30,599 be consistent makes it easier for your consumers and for your developers to use the 235 00:19:30,680 --> 00:19:36,680 components. So is it it's time consuming to interact with people to talk about 236 00:19:37,119 --> 00:19:41,319 it might not be the best solution for us to take prs and merge them 237 00:19:41,359 --> 00:19:45,319 in. Is that does that overwhelm you guys? Or is it totally fine? 238 00:19:45,640 --> 00:19:49,640 I mean, I mean it's yeah, yeah, it's quite different. 239 00:19:51,160 --> 00:19:56,880 It goes up and down, but overall it it takes quite quite some time 240 00:19:56,960 --> 00:20:03,519 from the team to deal with those. So we have a chaotic rotation basically 241 00:20:03,599 --> 00:20:07,720 in place. So we always pair up to two team members for one week 242 00:20:08,039 --> 00:20:15,160 and they are in charge of answering questions on the seleg channel and being the 243 00:20:15,240 --> 00:20:18,559 first people to respond and data issues, trying to do some housekeeping on poor 244 00:20:18,640 --> 00:20:22,000 requists and stuff like this. So everything that you need to do in an 245 00:20:22,039 --> 00:20:27,720 open source project like labor the poor requiest wrtch them reach out to contribute as 246 00:20:27,759 --> 00:20:32,000 if they are stuck and stuff like this and help them out. So we 247 00:20:32,079 --> 00:20:36,960 basically have two people rotation in place to handle this. Couldn't have said it 248 00:20:37,079 --> 00:20:41,680 better, I guess, And I just asked, so how heavily is this 249 00:20:41,960 --> 00:20:45,000 used inside of diamond trace, you know? I mean are we talking? 250 00:20:47,079 --> 00:20:51,200 Is it? Is it used on like a product or is it like that 251 00:20:51,440 --> 00:20:55,480 You've got this huge sort of suite of products and it's used on everything or 252 00:20:56,440 --> 00:21:03,000 what sort of how how much flexibility is there in in how it's used sonos 253 00:21:03,480 --> 00:21:08,799 hairs like something some or let's say their product which is called dino tras, 254 00:21:10,519 --> 00:21:15,279 right, and where is this of course use there, But aside from the 255 00:21:15,400 --> 00:21:21,839 main product product, we have a lot of tools and side projects and stuff 256 00:21:22,119 --> 00:21:26,160 around that we will also definitely to use diantres and are using it. Yeah. 257 00:21:26,200 --> 00:21:30,519 I think like as you as you start to expand and you probably get 258 00:21:30,559 --> 00:21:33,160 this a lot from people using it in their own projects now that it's open 259 00:21:33,200 --> 00:21:37,279 source. So I guess again the one that we've got in house where I 260 00:21:37,400 --> 00:21:41,440 am because we're only using it on a single product at the moment. It 261 00:21:41,559 --> 00:21:45,000 literally you add, you add features to it when you need something for this 262 00:21:45,160 --> 00:21:48,720 product, right Whereas as soon as you start using it on our second product, 263 00:21:48,880 --> 00:21:55,559 you might find this second the second thing actually needs this different mindset of 264 00:21:55,640 --> 00:21:57,119 the kind of things that we need to introduce, and that's how you end 265 00:21:57,200 --> 00:22:02,519 up growing missing out. Have you seen much growth in it since people have 266 00:22:02,559 --> 00:22:04,480 started using it for their own projects? Yeah, I think so. So 267 00:22:06,240 --> 00:22:08,839 we have basically, as Thomas pointed out, we've one big product. But 268 00:22:08,920 --> 00:22:15,880 of course internally once you have quite a collection of components, readily wherever people 269 00:22:15,000 --> 00:22:19,960 start using it for all different kinds of things. Like DevOps team is building 270 00:22:21,200 --> 00:22:26,559 in the internal pipeline tooling us exectly with it. Our security team is building 271 00:22:26,599 --> 00:22:30,319 the internal security tools with the design system, which is quite nice. And 272 00:22:30,640 --> 00:22:36,039 you get some different perspectives also not only from the product perspective, but also 273 00:22:36,119 --> 00:22:41,319 from some internal toolings. And this is this is I think significantly increased and 274 00:22:41,480 --> 00:22:47,440 over the last couple of weeks we also see some significant increases in contributions, 275 00:22:48,039 --> 00:22:53,119 especially from people from different UI teams coming in like they are now heavily using 276 00:22:53,160 --> 00:22:59,039 it for a couple of months or even years now, and by using it 277 00:22:59,160 --> 00:23:03,680 longer and longer, they I was more willing to contribute than pitching themselves, 278 00:23:03,799 --> 00:23:12,880 that's for sure. Oh yea, I will now not say a thing like, 279 00:23:14,079 --> 00:23:15,839 oh I hate that I hate that dance. It's like whenever you're in 280 00:23:15,920 --> 00:23:19,480 the store and you're like trying to pass someone and you're just kind of keep 281 00:23:19,599 --> 00:23:22,119 Yeah you should. You should try it when both of you are British and 282 00:23:22,160 --> 00:23:25,920 you're just being so dreadfully polite, and it can go on. It can 283 00:23:26,000 --> 00:23:29,079 last for days. It just goes on until somebody gets hungry, and then 284 00:23:29,160 --> 00:23:33,480 you have to go and find somebody. Okay. I just know if I 285 00:23:33,599 --> 00:23:40,400 heard something like a Canadian standoffs, just like because they're so polite, yeah, 286 00:23:40,440 --> 00:23:44,559 and the two Canadians basically opening the door for each other, but no 287 00:23:44,640 --> 00:23:56,839 one goes in. Oh what say it's gone now, Chris. That's how 288 00:23:56,920 --> 00:24:02,759 you secretly win one of those standards. You just refuse baffle your opponentstract yeah, 289 00:24:03,720 --> 00:24:06,000 I wanted to circle back a little bit. I was just looking to 290 00:24:06,039 --> 00:24:10,880 look at our show notes and I saw that you you did a talk you 291 00:24:11,000 --> 00:24:15,480 mentioned you talk already but at the NNGD, and it's called learnings from building 292 00:24:15,519 --> 00:24:18,279 a Component Library, And I just wanted to desire anything that we haven't already 293 00:24:18,359 --> 00:24:22,920 discussed. That is an important point. You know, something that you've learned 294 00:24:22,920 --> 00:24:26,759 from building this that might be good to share. I mean, from my 295 00:24:26,960 --> 00:24:30,200 point of view, we had a huge part of the of the of the 296 00:24:30,319 --> 00:24:34,880 talk was like how do you sign APIs and how to structure them and what 297 00:24:36,039 --> 00:24:41,240 to look out for, and yeah, this was a huge learning curve for 298 00:24:41,359 --> 00:24:48,359 us and we are still learning on that. And one point that Fiber already 299 00:24:48,400 --> 00:24:53,559 mentioned is like keeping API is consistent throughout all components. But what you also 300 00:24:53,680 --> 00:24:59,799 learned is not only keep that API consistent throughout our components, but keep it 301 00:25:00,400 --> 00:25:04,680 consistent for example, like implementing a checkbox, but we want to have our 302 00:25:06,799 --> 00:25:10,920 we want to have the EPI have the checkbox also as close as possible to 303 00:25:11,039 --> 00:25:15,559 the native checkbox, so it's very easy for consumers to use. They already 304 00:25:15,640 --> 00:25:19,279 know how it works just when looking at it and stuff like that, I 305 00:25:19,359 --> 00:25:22,559 guess really helps the consumers. But yeah, we had to learn it. 306 00:25:26,559 --> 00:25:30,119 Yeah, I can see why that's super important as well, because and I 307 00:25:30,279 --> 00:25:33,279 keep sort of bringing back to angler material, but that's just it's the one 308 00:25:33,319 --> 00:25:37,319 that I use have used the most, right, But there's I think it's 309 00:25:37,160 --> 00:25:41,359 radio buttons. It's either in material or it's in ionic. But it's like 310 00:25:41,440 --> 00:25:45,720 when you want to use radio buttons and integrate it with a form, it 311 00:25:45,920 --> 00:25:52,240 like it just works totally differently if I was just using radio buttons in plain 312 00:25:52,400 --> 00:25:56,720 HTMUT. And I find that so frustrating because I just, like you say, 313 00:25:56,920 --> 00:26:03,000 I just want to implement this as close to the actual non framework thing 314 00:26:03,599 --> 00:26:07,160 as I possibly can. And I hate it when I have to put radio 315 00:26:07,200 --> 00:26:10,200 buttons in because I'm always on stuck out fight. It's reading the same same 316 00:26:10,279 --> 00:26:11,519 posts that I read every time, you know, to try and figure out 317 00:26:11,559 --> 00:26:17,720 the answers. So you have like very strong emotions to radio buttons, I 318 00:26:17,759 --> 00:26:25,920 guess as anyone does. Yeah. One additional thing that we definitely learned, 319 00:26:26,119 --> 00:26:30,640 and this helped us actually keep our EPs quite saber, is to use content 320 00:26:30,720 --> 00:26:37,319 projection in Anglo for the smaller bits and pieces of your component so if you 321 00:26:37,400 --> 00:26:41,640 have the card, I mean material does it the same way. We were, 322 00:26:41,720 --> 00:26:44,359 of course heavily inspired. But what they're doing, they're doing it for 323 00:26:44,480 --> 00:26:51,319 quite some time, very very good actually, So use for the title, 324 00:26:51,640 --> 00:26:55,720 don't use a string input on it, but use the directive that you can 325 00:26:55,960 --> 00:27:00,359 just put in your card, because at some point of your project managers is 326 00:27:00,440 --> 00:27:04,599 going to say I need the second letter or the number in the title being 327 00:27:04,799 --> 00:27:11,400 raped or bold or whatever. And then if you use an input that can't 328 00:27:11,440 --> 00:27:15,119 handle HML, then you basically have to change the API and break it. 329 00:27:15,480 --> 00:27:21,359 And if you provide it as in the library that people install it as a 330 00:27:21,440 --> 00:27:25,839 dependency in the project. You should have your APIs as stable as possible for 331 00:27:25,960 --> 00:27:30,319 as long as possible so that people don't have to upgrade. And I guess 332 00:27:30,359 --> 00:27:37,400 another point that the basically builds on favance point is like we learned the hard 333 00:27:37,480 --> 00:27:41,039 way that you should build like for the data structures you cannot control. So 334 00:27:41,880 --> 00:27:48,799 never assume with data structure for your input. Use from the projection blight. 335 00:27:48,759 --> 00:27:53,079 Let the consumer loop over the options of this elect for example, instead of 336 00:27:53,359 --> 00:28:00,240 just let's in pass in an array as an input, because if you do 337 00:28:00,400 --> 00:28:07,079 so you will get like a hundred different black structures or a race or or 338 00:28:07,599 --> 00:28:11,599 objects in in in a race that you cannot control. And I think it's 339 00:28:11,640 --> 00:28:18,079 also hard for the for the consumer then to to transform his data structure to 340 00:28:18,319 --> 00:28:22,440 the to the one that is required for the control to work. And yeah, 341 00:28:22,759 --> 00:28:27,119 this was yeah, like our three main main I P I designed, 342 00:28:27,279 --> 00:28:33,039 I guess points we want to we want to point out. Yeah, have 343 00:28:33,319 --> 00:28:37,960 other people not may make the same mistakes as we did. Yeah, it's 344 00:28:38,720 --> 00:28:41,759 you know, I will definitely step by this time. No, I was 345 00:28:41,799 --> 00:28:45,400 just going to say, did you figure him out early on or was it 346 00:28:45,759 --> 00:28:49,640 like, oh, let's rewrite on a version two type situation. No, 347 00:28:51,119 --> 00:28:56,640 as it's quite some experience with material like we have. We checked out some 348 00:28:56,759 --> 00:29:03,119 other other lebraries out there, of course, and we learned something the hard 349 00:29:03,160 --> 00:29:07,079 way, I guess and others came more natural if you look at the food 350 00:29:07,119 --> 00:29:12,119 works and we're currently and work for version three. So yeah, the feature 351 00:29:12,160 --> 00:29:15,759 set is the same, but we learned a lot. Let's say that the 352 00:29:15,759 --> 00:29:21,720 way is that going to break stuff moving up to version three or is it 353 00:29:21,799 --> 00:29:25,920 going to be a smooth integration for people? We're still doing odd things on 354 00:29:26,000 --> 00:29:30,599 the go I gain esially with a proponent. I don't want to make any 355 00:29:30,720 --> 00:29:37,000 promises right now. Yeah, sure we could have got a scoop. There 356 00:29:37,119 --> 00:29:45,920 is the guarantees breaking but no official unofficial. But what we're trying to do 357 00:29:45,079 --> 00:29:49,160 with each breaking change is odd to make as much as possible. So you 358 00:29:49,279 --> 00:29:53,920 might be familiar with in the upgrade and the upgrade Angie up again, I 359 00:29:55,200 --> 00:30:02,079 never remember grade with whichever one isn't going from Angular j Yeah, so if 360 00:30:02,160 --> 00:30:04,559 you do that, you can do the same thing with Commandant levery usually. 361 00:30:06,119 --> 00:30:10,039 So we try to automate as much as possible away from the from the developers 362 00:30:10,160 --> 00:30:14,680 if they want to upgrade, and we stick to the release cycles of Angler 363 00:30:15,640 --> 00:30:19,599 quite closely. So whenever Angler releases a breaking change, like with version ten, 364 00:30:21,079 --> 00:30:23,759 we usually wait a couple of weeks and the next breaking version is then 365 00:30:23,799 --> 00:30:29,880 around the corner for us as well. Speaking of version three, do you 366 00:30:29,960 --> 00:30:33,119 have any plans for the future we can talk about. Yeah, so we 367 00:30:33,640 --> 00:30:40,079 we had a very close look at web components to help us help us solve 368 00:30:40,160 --> 00:30:45,119 a couple of future requirements, and we don't want to limit us to the 369 00:30:45,319 --> 00:30:52,279 to the angular world out there. I think reaccess has quite the cool community 370 00:30:52,319 --> 00:30:56,559 out there and people have built awesome stuff in the Red community as well. 371 00:30:56,680 --> 00:31:02,279 So we are thinking about expanding the new come components for the next version of 372 00:31:02,400 --> 00:31:06,759 the design system also and provide them as web components for everyone to use and 373 00:31:06,880 --> 00:31:11,640 not only for Angler developers as angular components. So definitely I think a huge, 374 00:31:12,240 --> 00:31:15,319 huge upgrade, right, like to take everything into a web components. 375 00:31:15,480 --> 00:31:19,200 Yeah. Sure, it's quite quite big challenge as well. It's a big 376 00:31:19,279 --> 00:31:23,440 project. We have checked on some some different libraries out there, some different 377 00:31:23,599 --> 00:31:29,039 ways of how to build web components efficiently. Angle elements with one of them, 378 00:31:29,279 --> 00:31:33,559 sen Suggests was the next one, but at the end we were kind 379 00:31:33,599 --> 00:31:37,759 of decided now on lid elements. So if you haven't checked it out, 380 00:31:37,880 --> 00:31:45,000 it's actually quite a cool layer on top of web components, so definitely encourage 381 00:31:45,200 --> 00:31:49,119 you to check it out as wells elements. Y. Yes, I feel 382 00:31:49,200 --> 00:31:53,880 like I've heard of that also from Google from the maybe you know the Polymer 383 00:31:53,960 --> 00:32:00,519 team they develop yet and it's kind of easy to integrate it into Angler in 384 00:32:00,599 --> 00:32:06,519 your existing up So just trying to sneak Polymer out there again, let's just 385 00:32:06,640 --> 00:32:10,920 get it a new name. Maybe people will use it this time. Yeah, 386 00:32:12,000 --> 00:32:17,079 but it's actually it's not not as much work around the standard anymore as 387 00:32:17,119 --> 00:32:21,920 Polymer was in the past. I think I feel like NAS has evolved quite 388 00:32:22,200 --> 00:32:25,720 quite a lot in the meantime. And yeah, it's a library and not 389 00:32:25,839 --> 00:32:31,480 the framework, and this is it's not as heavy Angler might feel in certain 390 00:32:31,559 --> 00:32:36,559 situations. If you build a component library, you don't need a router, 391 00:32:36,759 --> 00:32:42,400 you don't need a service worker, you just need a small part of Angler. 392 00:32:42,720 --> 00:32:45,920 The ecosystem is pretty awesome. But if you only focus on building a 393 00:32:45,960 --> 00:32:51,160 component library, a scale down version of what you're trying to do might might 394 00:32:51,240 --> 00:32:54,480 be a better fit. Why use a library or a framework for your web 395 00:32:54,519 --> 00:33:00,200 components at all? Just out of interest? And I'm a work Component is 396 00:33:00,279 --> 00:33:04,480 something that is has been like at the top of my my radar for a 397 00:33:04,559 --> 00:33:07,000 long time, and I'm just not sort of taking that step to get to 398 00:33:07,000 --> 00:33:10,640 properly get into it. So if I I've realized we're going off topic a 399 00:33:10,680 --> 00:33:14,119 little bit. But if so, if I was like to look into that, 400 00:33:14,319 --> 00:33:17,160 why why would I look at a library or framework rather than just starting 401 00:33:17,160 --> 00:33:22,000 to build some vanilla web components. I guess the big point there is data 402 00:33:22,079 --> 00:33:29,079 binding or binding itself, like the web components itself do not have something like 403 00:33:29,200 --> 00:33:32,319 binding in place, so you have to update and rew end up your own 404 00:33:32,720 --> 00:33:39,359 by your own and the tops basically sounds ghastly looking. Economics is for me 405 00:33:39,519 --> 00:33:45,480 to killer feature. So if you would take a look at on how you 406 00:33:45,599 --> 00:33:50,319 have to write your template for your web components, how you have to hook 407 00:33:50,400 --> 00:33:53,960 up into life secting methods, this whole boiler plate of actually fitting into the 408 00:33:54,039 --> 00:34:00,079 standard, it's just taking away out of your hands. The library is in 409 00:34:00,160 --> 00:34:02,240 care of it. You have to write one random function. That's it. 410 00:34:02,599 --> 00:34:08,280 That's basically the minimum that you have to do. And having these economics in 411 00:34:08,360 --> 00:34:14,079 place for you to three write efficient web component code, having efficient brand up. 412 00:34:14,119 --> 00:34:17,000 They stuff like this was for us. I guess to killer the killer 413 00:34:17,079 --> 00:34:22,440 feature. So let elements handles all of that. Yeah, yeah, that 414 00:34:22,599 --> 00:34:28,039 sounds sounds good. So yeah, I was kind of I'm typing I could 415 00:34:28,039 --> 00:34:31,280 get down a whole rabbit hole and how try and restrain myself. I'll retract 416 00:34:31,360 --> 00:34:35,079 that question before I ask you. We can have a ball up if you 417 00:34:35,280 --> 00:34:38,960 like. I like to talk about that opponents. Yeah, because I didn't 418 00:34:38,960 --> 00:34:43,159 even know that let elements was the thing, and now I'm like, I 419 00:34:43,320 --> 00:34:53,239 actually take it, and it's so neat if you think about you can important 420 00:34:53,360 --> 00:34:58,800 as an econoscript module in your browser and not have a build even running. 421 00:34:59,000 --> 00:35:05,079 It just works because it's it's using everything that platform gives you. You don't 422 00:35:05,159 --> 00:35:07,760 have to have a web pig builds, you don't have to have a roll 423 00:35:07,840 --> 00:35:10,880 up building place. You can throw in an import statement in a script take 424 00:35:12,000 --> 00:35:15,280 and it loads your web components you can use. You're not paid to say 425 00:35:15,360 --> 00:35:22,719 that I'm not about the technology. Here's a bold claim as well. Elements 426 00:35:23,280 --> 00:35:31,480 is supported supports Internet Explorer of all browsers. Why is that still a fair? 427 00:35:31,519 --> 00:35:36,400 Do you see that it's something if you just got to the well, 428 00:35:36,440 --> 00:35:38,480 if you to be honest the scenes, you have to just google lit elements 429 00:35:38,519 --> 00:35:44,400 because they did not pick the best ur L best delay. But if you 430 00:35:44,480 --> 00:35:46,840 go to the Elements website and you s go down to the bottom browser compatibility, 431 00:35:47,039 --> 00:35:51,760 littlements works in all major browsers Chrome, fire Fox, I safarian. 432 00:35:52,039 --> 00:35:57,599 I mean I would argue that I is not a major browser anymore, but 433 00:35:57,840 --> 00:36:01,199 you would you would argue this, but you believe I told you that my 434 00:36:01,360 --> 00:36:07,719 next big series at work is talking about how people can migrate from silver light 435 00:36:07,840 --> 00:36:19,440 to angular. It's well because it's end of life next year and so big 436 00:36:19,559 --> 00:36:23,360 companies that are on these massive silver light applications are trying to figure out what 437 00:36:23,480 --> 00:36:30,960 to do now. So I interesting putting that with the I E talk. 438 00:36:30,119 --> 00:36:35,960 There's like floating that one out into the room. Seeing we started with ang 439 00:36:39,280 --> 00:36:43,480 I know, I know. My first question was do you when you say 440 00:36:43,519 --> 00:36:45,840 migration, do you mean rewrite? Is that what you mean? So we'll 441 00:36:45,880 --> 00:36:52,360 see, we'll see. But oh my goodness, so I'm loving loving that 442 00:36:52,519 --> 00:36:57,599 element. It's looking like it might actually get me into like writing web components 443 00:36:57,599 --> 00:37:00,519 because it was it did seem like a lot to handle by yourself without so 444 00:37:00,599 --> 00:37:05,239 that's awesome. I know, I kind of feel like I want ever go. 445 00:37:05,840 --> 00:37:09,960 I feel like I should try by Angler's it anger omens Anger. Yeah, 446 00:37:10,159 --> 00:37:14,119 just because because I like the idea. I like the idea that I 447 00:37:14,159 --> 00:37:17,840 can make a web component that uses like my reactive forms for example, like 448 00:37:17,960 --> 00:37:22,559 by doing that. But at the same time, this looks really nice as 449 00:37:22,559 --> 00:37:27,760 well. So we also checked out Angler elements because like it. Apparently it 450 00:37:27,960 --> 00:37:34,199 was our first idea. It's very close, but I guess it would have 451 00:37:34,320 --> 00:37:37,760 worked fine, but there was one thing we found out, like not all 452 00:37:38,000 --> 00:37:45,679 features Angular supports work in web components, and it would be really hard for 453 00:37:45,800 --> 00:37:52,000 developers to so they are still in the Angular universe with Angular elements, but 454 00:37:52,360 --> 00:37:57,599 do not know out of the box which features they can use in which they 455 00:37:57,679 --> 00:38:04,199 don't. Right, So for example, cdk orb as would be hard to 456 00:38:04,360 --> 00:38:09,960 do, and we found multiple of things that do not work in Angler elements. 457 00:38:10,840 --> 00:38:17,280 And also you have to take some some quantity of the Angular compiler with 458 00:38:17,400 --> 00:38:22,719 you right in your web components, so you are going to be making heavy 459 00:38:22,119 --> 00:38:25,960 heavy web componing. Anglers work really or the Angler team have worked really hard 460 00:38:27,079 --> 00:38:31,079 to get rid of the Angler is really heavy duty framework that it was when 461 00:38:31,119 --> 00:38:35,400 it first came out, Right, it's not anymore, but a lot of 462 00:38:35,480 --> 00:38:37,880 people still hold that opinion because they haven't bothered to keep up to date on 463 00:38:37,960 --> 00:38:42,039 it. So at the same time, if you're building your web components with 464 00:38:42,079 --> 00:38:45,760 Angler elements, you're basically going to be building heavy, heavy web components only 465 00:38:45,760 --> 00:38:49,440 because you're having to ship some part of Angular with it. And really, 466 00:38:49,559 --> 00:38:52,920 I didn't know that's how it works. I think so because it basically still 467 00:38:52,960 --> 00:38:55,000 got a fire up Angular to make the component work. I think I haven't 468 00:38:55,039 --> 00:39:00,760 looked into it enough. Yeah, it appre shakes everything you wait cantry sure 469 00:39:00,840 --> 00:39:04,639 the way that you're not using from the framework similar to what webe does or 470 00:39:04,719 --> 00:39:08,280 the CLI build does up front. But still you need you basically have to 471 00:39:08,360 --> 00:39:12,880 include some parts of Angler in each and every web component that youer ship. 472 00:39:13,599 --> 00:39:17,400 So you basically have to multiply this by every web component that you have. 473 00:39:19,159 --> 00:39:22,280 But as Thomas pointed out, it you are still writing Angler code, but 474 00:39:22,400 --> 00:39:27,039 you have to think about the subset that you're allowed to use, and there 475 00:39:27,159 --> 00:39:30,920 is no tooling support to help you out. So for you, it's easier 476 00:39:31,000 --> 00:39:35,800 to just go with something like that element where it's it's completely different, and 477 00:39:35,880 --> 00:39:38,639 so you're not even you're not even trying to use any other things that might 478 00:39:38,719 --> 00:39:45,360 not exist. Yeah, think of for example, future children, the directive 479 00:39:45,599 --> 00:39:51,559 or the feature you can use in Angular the wrong work in web components. 480 00:39:52,320 --> 00:39:58,159 So how to tell developers, Okay, you can use these features, but 481 00:39:58,360 --> 00:40:04,239 you shouldn't you like few children or other futures in Angulo, but they can 482 00:40:04,320 --> 00:40:09,599 still import it, so we might I had to work around it a lot 483 00:40:10,639 --> 00:40:15,079 to make that clear or I'm not sure how we would have solved that, 484 00:40:15,880 --> 00:40:19,360 so madn't actually like why would why would they? Why would it be a 485 00:40:19,480 --> 00:40:22,320 thing that you can do an angler If you can't actually do all of angler 486 00:40:22,360 --> 00:40:28,039 in it, it's madness. Yeah, But I think it's a technical reason 487 00:40:28,079 --> 00:40:31,679 because right I think we're talking with some other devs about this, isn't it 488 00:40:31,760 --> 00:40:37,199 because like, how would that work outside of angular? Like wouldn't it be 489 00:40:37,760 --> 00:40:42,599 incredibly painful and kind of dependent or something? Yeah? Yeah, it's also 490 00:40:42,639 --> 00:40:46,320 a matter of you can you can basically build you a big web component if 491 00:40:46,360 --> 00:40:51,559 you want not not think about something that you compose out of different bits and 492 00:40:51,599 --> 00:40:55,159 pieces and wrap this into an anglear element and everything works out fine and angler 493 00:40:55,280 --> 00:41:00,159 runs within this. But if you want to have like an API it you 494 00:41:00,239 --> 00:41:06,000 can compose all of different bits and pieces. This is where you need slots 495 00:41:06,960 --> 00:41:10,760 in web components and angle elements. They don't really work that well together, 496 00:41:12,079 --> 00:41:15,119 at least back then when we had a closer look at it. So it 497 00:41:15,280 --> 00:41:19,519 really depends on your use case. I think you can build quite the big 498 00:41:19,679 --> 00:41:22,519 app and rep it into a web in an angle element and everything is good. 499 00:41:23,280 --> 00:41:28,320 But if you want to have a composable UI library for your designstmith might 500 00:41:28,400 --> 00:41:31,360 not be Yeah, I think honestly, it just wasn't like you were saying, 501 00:41:31,440 --> 00:41:36,039 it just wasn't there yet, and especially with ivy and some of the 502 00:41:36,119 --> 00:41:38,840 other things they were focusing on, things just kind of got put on hold. 503 00:41:39,360 --> 00:41:43,559 So I don't know as far as like version eleven or twelve, if 504 00:41:43,599 --> 00:41:45,880 we'll be seeing any updates with elements, but I do know that it was 505 00:41:46,039 --> 00:41:51,559 kind of stalling there for a bit and lacking in the feature set. But 506 00:41:51,679 --> 00:41:53,920 still it's a cool, cool approach I think that they had taken. So 507 00:41:54,880 --> 00:42:00,519 I'm excited to see what's to come. But there's actually one thing gonna miss, 508 00:42:00,599 --> 00:42:04,760 and that's the city K because this is actually a great piece of software 509 00:42:04,760 --> 00:42:08,840 and helped us a lot. So that to the CDK. But what what 510 00:42:09,039 --> 00:42:16,360 things do you guys use the most in the CDK? Oval is important to 511 00:42:16,400 --> 00:42:24,039 say everywhere. Yeah, I guess those two anti accessibility features like focus traps 512 00:42:24,159 --> 00:42:30,320 and stuff like this make it a lot easier to to handle those complex accessibility 513 00:42:30,360 --> 00:42:32,440 features as well. You say the accessibility stuff is like one of my favorites 514 00:42:32,480 --> 00:42:37,320 for the city It's pretty awesome. Yeah, And if for sure the City 515 00:42:37,719 --> 00:42:45,719 City Cake folks here that we are looking forward for date peaker support. Isn't 516 00:42:45,719 --> 00:42:52,199 that they didn't they say something about that? Or actually hope I think it's 517 00:42:52,239 --> 00:42:58,320 got the range update in ten or something, which is also nice to have 518 00:42:58,480 --> 00:43:06,920 in material, but rather heavy than the City kids. Let's see, we 519 00:43:07,079 --> 00:43:09,199 are almost to the top of the hour, so before we hit up picks, 520 00:43:09,280 --> 00:43:16,039 is there anything else you gentlemen would like to mention about Barista or web 521 00:43:16,119 --> 00:43:22,039 component journey, anything else before we hit up picks. I guess try it 522 00:43:22,079 --> 00:43:25,800 out, give us feedback, reach out, open issues, any any feedbick 523 00:43:25,960 --> 00:43:30,719 is highly welcome and yeah, happy to do here. Any any important, 524 00:43:30,840 --> 00:43:35,320 any feedback? Sorry, Chris, did you have any more questions? No, 525 00:43:36,159 --> 00:43:39,639 thank you, thanks for checking. I was like, oh no, 526 00:43:39,719 --> 00:43:46,360 I might have cut them off. I better I better fix that. Oh 527 00:43:46,639 --> 00:43:52,480 well, we always let our guests go last. So I'm gonna say my 528 00:43:52,679 --> 00:43:57,559 pick for the day is just code it live the Twitch channel. I'm on 529 00:43:57,760 --> 00:44:02,079 there all the time with my other advocates, typically Wednesday afternoons doing UI work. 530 00:44:02,159 --> 00:44:06,159 So yeah, come check it out, hang out, let's do some 531 00:44:06,880 --> 00:44:10,000 some fun coding live. You know how that always goes. So but yeah, 532 00:44:10,159 --> 00:44:14,480 Chris, what do you have for us today? I kind of got 533 00:44:14,519 --> 00:44:17,360 a random, bizarre pick. I was on Twitter last night, as I 534 00:44:17,440 --> 00:44:22,599 am occasionally all the time, I saw somebody tweeting. I can't remember what 535 00:44:22,599 --> 00:44:25,079 they're tweeting about, to be perfectly frank, the content didn't stick with me. 536 00:44:25,159 --> 00:44:30,559 But they were describing something. I'm assuming that they were American describing something. 537 00:44:30,559 --> 00:44:32,639 They were calling whipped cream. And they had one of those cans and 538 00:44:32,760 --> 00:44:36,360 they were squirting cream out of it. Right, is that? What is 539 00:44:36,440 --> 00:44:39,719 that? What whipped cream is in the States? Right? That's madness? 540 00:44:40,039 --> 00:44:45,960 No, we call it squirty cream. That's squirty cream. No, it 541 00:44:45,159 --> 00:44:50,119 is, it is, And I'll have you whipped cream, right is when 542 00:44:50,159 --> 00:44:54,400 you get cream and you get put in a bowl and you beat it until 543 00:44:54,440 --> 00:44:59,360 it is thick and stiff. And I just saw this tweet. Obviously in 544 00:44:59,480 --> 00:45:01,480 sensed me, I was like, how can you call it whipped cream? 545 00:45:01,760 --> 00:45:10,440 That's squirty cream? Squirky? Okay, Fabian? Is it squirty cream or 546 00:45:10,519 --> 00:45:15,480 is it whipped cream? For you? The whipped cream part of Christ describe 547 00:45:15,599 --> 00:45:22,239 is called schlug was in what's a better way, So if you if you 548 00:45:22,360 --> 00:45:30,159 want to check, you know what it means translated like what the obos is 549 00:45:30,280 --> 00:45:36,320 like cream and schlag is like punch. So you've punched. Yeah, yeah, 550 00:45:36,800 --> 00:45:40,119 punchy cream whipped. We got squirty and we got punchy cream. I 551 00:45:40,199 --> 00:45:46,800 love that. My pick is squirty cream. I love it. Chris the 552 00:45:46,920 --> 00:45:51,320 Oh. The first time I was in London, I was talking to some 553 00:45:51,440 --> 00:45:54,239 coworkers and I was like, to tell me, like, favorite favorite dessert 554 00:45:54,440 --> 00:45:59,760 go and they were like, oh, banaffi banoff pie and I was like, 555 00:46:00,400 --> 00:46:02,400 none of that is a word. So then they had to like google 556 00:46:02,440 --> 00:46:07,360 it and show me. Never heard of it in my life. So I 557 00:46:07,480 --> 00:46:13,119 love I love learning about things like whether it's you know what they're called, 558 00:46:13,440 --> 00:46:20,960 or just I love it. So it might have pie squirty cream. Oh 559 00:46:21,239 --> 00:46:25,039 okay, So Thomas and Faby and do you gentlemen have some picks for us 560 00:46:25,119 --> 00:46:29,519 today? Yeah? Maybe. I'm not sure if some of you guys is 561 00:46:29,599 --> 00:46:35,760 into game engine and game coding, but there are some two great channels out 562 00:46:35,800 --> 00:46:38,480 there. That one is Sebastian League or League not sure how is it called. 563 00:46:38,880 --> 00:46:44,920 The second one is the Journal and watching them quite a lot recently because 564 00:46:45,159 --> 00:46:50,000 I never programmed for game engine or or I had a look under the hood 565 00:46:50,280 --> 00:46:55,039 of of how games are developed. But they do a great job. And 566 00:46:57,239 --> 00:47:00,480 this is this on twitch? What is this? It's on YouTube? YouTube? 567 00:47:00,679 --> 00:47:06,280 Okay, yeah, I was like, get me some links because I 568 00:47:07,360 --> 00:47:10,280 I love gaming, actually had carpal tunnel surgery so that I could get back 569 00:47:10,320 --> 00:47:15,199 to playing video games, and of course I love programming, so those two 570 00:47:15,280 --> 00:47:20,920 combined. I've just always heard that it's like hella hard like that, like 571 00:47:21,440 --> 00:47:24,840 here's web development and then here's game development, like way up there. So 572 00:47:25,480 --> 00:47:32,159 I would be curious to see the first three C plus plus code. It 573 00:47:32,360 --> 00:47:37,119 was like, I can figure it out that a friend of mine is like 574 00:47:37,199 --> 00:47:43,320 the engine lead that paradox interactive paradox they make, like I can't mimb what 575 00:47:43,360 --> 00:47:45,079 it's called. Now they do. They do quite a lot of the Grand 576 00:47:45,119 --> 00:47:49,639 Strategy games. They have this big one set Stillaris, that's it Stillaris seems 577 00:47:49,679 --> 00:47:52,960 like the engine lead on that. But he did a talk at a conference 578 00:47:52,639 --> 00:47:58,079 last year. I think it was like specifically all about how they put together 579 00:47:58,199 --> 00:48:02,719 the engines for these Grand strategy games. I don't really play those kind of 580 00:48:02,760 --> 00:48:06,599 games myself, but there was an interesting toal I's see if I can dig 581 00:48:06,639 --> 00:48:09,119 it out, put it in the show notes in the scars all away from 582 00:48:09,480 --> 00:48:14,960 from programming games forever. Probably, yeah, absolutely right, Just just give 583 00:48:15,039 --> 00:48:17,239 me like, well, I'm i mean pixels to the left of this button. 584 00:48:19,480 --> 00:48:27,360 Let's do vexetra calculations. Oh yeah, I didn't even know c SC 585 00:48:27,480 --> 00:48:31,519 animations. That's where I hit my limit and like SPG yeah where no way? 586 00:48:35,039 --> 00:48:38,199 Oh okay, So any other picks, yes, for sure. So 587 00:48:38,920 --> 00:48:45,599 if you're missing live sports, you went in the in Current Times shape out 588 00:48:45,679 --> 00:48:49,639 the Marvel League on YouTube. If you have not so, at first you 589 00:48:49,760 --> 00:48:52,639 might think it's quite silly to watch some marbles compete. It's it's like, 590 00:48:53,320 --> 00:48:58,599 right now, I think it's already sponsored from Bye Bye last week tonight from 591 00:48:58,760 --> 00:49:01,719 John Oliver. They also had had a take on it during one of the 592 00:49:01,960 --> 00:49:08,800 recent shows. It's basically somebody created different teams of Marvels, like they have 593 00:49:09,519 --> 00:49:15,079 Savage Spears, they have the Raspberry Races and some other silly names, and 594 00:49:15,239 --> 00:49:22,880 they compete in Marvel Olympics, which are different, different courses, different tracks, 595 00:49:22,920 --> 00:49:27,159 and they compete against each other and it's so addictive. If you haven't 596 00:49:27,239 --> 00:49:30,599 checked it out, it might sound really really silly, but it's actually quite 597 00:49:30,679 --> 00:49:35,320 fun. Yeah, that's awesome, Marble League. I love it. Yeah, 598 00:49:35,360 --> 00:49:37,039 I'm looking right now. I hadn't heard of this, so I'm going 599 00:49:37,119 --> 00:49:42,079 to totally dive in after the podcast. Thank you for that pick. Sure, 600 00:49:42,559 --> 00:49:47,280 cool, awesome, Yeah, clapping these links in the show notes, 601 00:49:47,320 --> 00:49:51,039 well, thank you. Thank you both Sabbi and and Thomas for coming on 602 00:49:51,239 --> 00:49:55,639 and talking with us about Barista and all of the wonderful things you've learned through 603 00:49:55,719 --> 00:50:00,480 this process and open source and everything. Thank you both. Thank you. 604 00:50:00,760 --> 00:50:04,199 Thanks for up to us. Well, that is a wrap.