Angular Elements, Annex & Storybook with Brad McAlister - AiA 439
In this episode of Adventures in Angular, Brad McAlister joins our regular panelists: Alyssa, Chris and Brooks! Brad walks us through his work of transitioning into an Annex Monorepo and how working with Angular Elements in conjunction has been going. Brad also breaks down what StoryBook is and how it has helped him in his work flows.
Hosted by:
Show Notes
In this episode of Adventures in Angular, Brad McAlister joins our regular panelists: Alyssa, Chris, and Brooks! Brad walks us through his work of transitioning into an Annex Monorepo and how working with Angular Elements in conjunction has been going. Brad also breaks down what StoryBook is and how it has helped him in his workflows.
Picks
- Alyssa - Watch Harry Potter movies when its Fall
- Alyssa - Goldberg Zweigelt from Austria 2014
- Brooks - Merkur 34C Heavy Duty Safety Razor
- Brooks - The Addams Family
- Chris - http://brewdog.com/
- Chris - http://nakedwines.com/
- Brad - Craft Beer
- Brad - Doing Things That You Should Have Done 20 Years Ago
Transcript
Welcome to Adventures in Angular, the largest and most popular podcast in the world about web development with Angular. This show is brought to you by Envoy and Top End Devs. Envoy provides high quality design and software development services on a client friendly business model. Unlike all other agencies, Envoy allows clients to only pay after the work is delivered and approved. Visit envoy.com to learn more and reach out if you know a company that needs more professionals to help with design and software development.
That's unvoidd.com. And Top End Devs helps you stay up to date with cutting edge technologies like JavaScript, Ruby, Elixir, and AI. Visit topenddevs.com to join their AI Dev Boot Camp, weekly community meetups, and access expert tutorials. I'm Lucas Paganini, founder of Envoy and host of this podcast. Thank you for tuning in.
Let's jump into the episode. Hello and howdy. Welcome to another Adventures in Angular. My name is Alyssa Nikhil. And with us today on the panel, we have the wonderful Chris Ford.
Tani Ho. And also Brooks Forsyth. Hello. We'll work on we'll work on your on your British introduction, Bruce. Yeah.
The the the counterbalance there was beautiful. Yeah. That's what I was going for. Oh, my goodness. So today, our guest of honor is Brad McCallister.
Brad, what is up? Howdy. How are you? That's my, that's my my counterbalance. Mhmm.
Brad is from Oklahoma. Right? Oh, Oklahoma. Yes. Mhmm.
And what what part are you in again? Northeastern Oklahoma. Northeastern. It's called Green Country. It is.
Even though it's not very green. It is called Green Country, but it's not very I mean, it's greener than the rest of Oklahoma. Which with one match could go up in a fail blaze, but we won't go there. True. Yeah.
Look up where Oklahoma is on a map. I don't wanna feel I don't wanna be the ignorant one. Right. I mean, I it's in, like, in America, that much. Yeah.
I don't know either. Take planes over it occasionally. It's it's the hat on Texas. Right? Like, it's just right there.
Actually, it's occupied North Texas. North of I know it's North Texas. I know that. Yep. North Texas.
Oh my It's the best part of North Texas. Brad, tell us, for people who don't know you, who you are, where you're from, etcetera. We went over where he's from. No. I meant, like, in the tech community, but like, I told you.
I'm from Oklahoma. Alright. I am a second career dev, essentially. I was an IT guy doing just server and desktop support and stuff for years years years and was very unhappy with that and really wanted to start being more creative. So I got into development on my own time and gradually was able to move into a full time.
And basically been doing front end the entire time, started getting into back end dev stuff. Not terribly proficient at it yet, but I can make things happen. And, yeah. So been working with Angular since I think pre one point o. So Oh, so you're with the Angular JS Oh, yeah.
Group of people. I had I mean yeah. So I guess, technically, I did Angular JS, and then I learned Angular later. So since they're not at all the same thing. So are you a certain company?
Are you, contracting? Good question. Good question. Yeah. I forgot that part.
Yeah. Software engineering lead for a product called Smart Shopper. Company name is Sapphire Digital, and we do health care health care transparency software. So that's fun. So our app is all Angular, and it's actually dotnetcore on the back end and running on Linux, which is fun.
And we were kind of on the bleeding edge of that for us at least 3 years ago when we started running dotnet core and Linux with an Angular front end and all that kind of stuff. So, yeah. How big is your team? My team is 4, including me. So it's not super big, but we get stuff done.
No. I love it. I I that was the size of my team before this, but we had 2 back end and 2 front end. And I can't believe you're, like, going full stack now. I feel a little betrayed, but I'll forgive you.
I'm only going full stack because I probably should. I still don't enjoy it. Look. I'd rather do you guys heart, you know, isn't going to dot net, then I can Oh, okay. No.
No. No. No. No. No.
No. We were a dot net shop on this side of the team long before me, so we just had to keep with that. It's funny because the other side of our shop is Ruby. Oh my gosh. How do you So Ruby on Rails.
So we have Ruby on Rails for one back end and dotnetcoreand.netstandards for a different 2 different back ends, and then all Angular on the front end. Yeah. Ruby on Rails was the the first startup that I worked for, and that was kind of how I got introduced to, like, the way back end should be. So it's always weird for me to experience the the other side. So that's a really interesting mix for, technology stack.
It is. I really tried to get into Ruby on Rails when it first came out, but I didn't have a Mac. I only had a Windows machine. And so I got this book that was brand new, and I was trying to do stuff in, a, the book was wrong in places, b, it wasn't working on Windows, and I got frustrated third way. So that that was my foray into Rails.
True story. Very true story. Windows development. Yes. Just our interest, is it running is it like one application that's running on these 2 different back ends?
No. No. They're they're different things. Yeah. Yeah.
The the application that I'm working on at the moment is it actually is like, half of the back end is in Java, and the other half is in c sharp. We basically got 2 offices from different sides of the country. And, like, in my office, it's all c sharp, and in the other office, it's Java. But the it's like one united front end, which is running Angular. So, basically, this front end app is talking to both back ends?
Like I mean, it's it's microservices. Right? So it it doesn't really from the front end point of view, it doesn't really matter which one it is. It just means that when the the devs in my office have to do changes to the to the back end from the other office, they they all just basically get very upset because, they don't they don't they don't wanna look at Java. And I I believe it's it's vice versa from the other office as well.
Yeah. So our 2 apps, one app calls a Rails back end from the front end from Angular. And then that Rails back end will sometimes call the dotnetstandard APIs to get information and pass through to Angular. And then Smart Shopper is Angular on the front end.netcoreapiforitonthebackendthatalsothencallsthatsame.netapi.that's.net46orsomething.andyeah.soit'skindinteresting. So theoneoldschool.net thing that they are trying to convert, I say old school, that's gonna sound terrible.
I mean I'm sorry. It's not they're trying to convert it very hard. It is kind of the brains of a lot of the stuff that we do. I think those things are considered old school in comparison to JavaScript. Right?
Like, just with how new JavaScript Well, it depends on depends on the month. JavaScript is actually considerably older than anyone realizes though as well. Listen. Is it? Isn't it like 20 plus years old?
Yeah. It's like 20 something years old. I did not know that. Yeah. See?
Wait. How old is the browser? Which one? It text or is that Just like just like the browser. Oh, just browsers being a thing?
Yeah. Well, I remember using Netscape Navigator when I was about 13, which is kind of when did we start to get the Internet through the UK. When was that, like, 1995, 96? Yeah. I was gonna say mid nineties.
Yeah. Mid nineties. Mosaic was the precursor to Netscape, and I think Mosaic was the first I think it was the first actual graphical kind of browser. Mosaic was? Yeah.
Okay. So Mosaic turned into Netscape if I remember right, but it's been a long time, and I I'm not a a historian on the fact. I just thinking back. So tell us what I have a I have a fun fact. I'm sorry.
I'm I'm No. No. No. No. No.
No. No. No. No. No.
No. No. No. No. No.
No. No. No. No. No.
No. No. No. No. No.
No. No. No. No. No.
No. No. No. No. No.
No. No. No. No. No.
No. No. No. No. No.
No. No. No. No. No.
No. No. No. No the founders wanted to build a browser that was a Mosaic killer, as in Mosaic, the browser. They wanted to build a replacement.
Legit. Sure. Yep. Oh, I love that. That's beautiful.
So maybe but I thought I thought Netscape developed or developed or evolved into Mozilla stuff. I think Well, Firefox. Yeah. So I thought Mozilla, Mosaic. I don't know.
I thought it was all the same company. Maybe I'm wrong. I'm I'm sure somebody will fact check me and and tweet. Yeah. They will tweet us.
They will add us. You guys are wrong. Yeah. You know they will. Don't tell me what they're saying.
On the Internet. Yeah. Oh, my goodness. So, yes, topic of the day, we had a huge I don't even know. Bunny bunny hole?
Rabbit trail? I Rabbit trail? Yeah. There we go. But, yeah, what are we talking about today?
We are talking about Angular elements and NX and Storybook and that kind of stuff. Awesome. Awesome. Is the little React shaking in there? Is so the the main application that you're using, is it using Storybook?
It is not, but I am working towards transitioning it into an NX Monorepo that has another app that is a smaller app that we've been using to experiment with this entire concepts without the elements part. So we don't need to ship out elements any anywhere, but using this whole setup makes it easy where you can create your own elements for your app and pull them in really easily through the monorepo thing and and x makes that super simple. And then you can also add in another project that then would build the elements that you could then publish out somewhere else, and it doesn't really affect your actual project. So for people who've never even heard of Storybook, because I think I was there, like, ground floor. I was like, oh, wow.
This is awesome. But I know there's a ton of people who've never heard of it or used it. Can you give a brief introduction? I can do my best. I was actually gonna look up what is Storybook because every time I'm asked, I'm like, well, it's, the the the look, see, it does this.
So essentially what I have boiled it down to for me is it is a really quick and easy way to develop components for your app in a sandbox where you get fast feedback time, you can kind of keep them isolated, so that you're forced to create good, reasonable components that aren't necessarily getting adverse effects by the app or any of that kind of stuff. The cool part about it is with the feedback thing, you don't have to enable hot module reloading in your Angular app necessarily. And you don't have to wait for your whole Angular app to refresh every time you're working on a component because storybook uses HMR. So when you make a change in your component, it just takes very little time to refresh and you see your changes immediately. You can set up knobs, which are little tweaker things you can use to tweak it.
Those are typically, at least for Angular stuff, they're typically inputs on your component. So anything that would be an input on your component, you can set it up to be a knob and that can be any number of things, a Boolean, a select box for different options, text fields, things like that. So makes it real easy to see, like, a button component. If you we've been making a button component that is incredibly complicated, but incredibly simple to implement. So the component code is really complicated because we're accounting for all kinds of different options and ways to do a button because designers are like, well, on this thing, I need this button to say this and have this icon and be this size and do this.
And the disabled state is this. And the theme is this. But on this one is completely different. So you end up as we have with all these different buttons all over the app, and none of them work the same, and none of them look the same. So trying to consolidate those into a cohesive thing and a consistent thing, but still enable the flexibility, being able to do the things that the designers want or that UX wants, where we went with Storybook to show us this easily with the knobs and they can go in, they can they can check it out, they can add all these things and the inputs and the knobs easily see disabled states versus not instead of having to say, hey, how do I get this to disable?
That kind of stuff? So it has lots of interesting plugins. So you can do like mobile views, which are nice instead of using the Firefox, not the Firefox, the Chrome or Firefox dev tools to squeeze the whole thing down to mobile. It's got one built in so that you can still have the whole storybook app surrounding your viewport and see the different mobile stuff. It has accessibility stuff you can add, which is really nice to see what your colors are doing and other things.
So it's cool. It's got a lot of plugins. Walk me through using it. So you open Storybook, and I wanna create, like, a button or, like, you're saying, like, create a component. What does that look like, and how does it feel to, like, then take that and integrate it with the app?
Or are you integrating it with the app while you're using Storybook? Yes. So the the the cool thing about using Storybook because once you have it installed in your app, it has some setup files in there that you can change, edit if you want to or not if you don't. Once it's all set up, then you have a stories file and that lives inside the same folder with your component. So for your button component, you would have button component dot stories dot ts or whatever JS.
And it's just JavaScript. You put objects in there to describe your stories, different states, can set up as many stories as you want. For a button, you could have a disabled story. So on your left, you would see, you know, like a little hierarchy, a nav menu thing under your button component that would say, you know, button, no icon, button with an icon, button that's disabled, button that is bigger than the other buttons, buttons that's square, buttons that's whatever. And then you set each one of those up as a Java's basically, a little config object in in storybook in the stories file, and they're just stories that are set up in there, and you specify all the things you want and none of the things you don't want, and it works.
How do you get your button then over to your app? Or is is is Storybook separate or is it a dependency for your main application or It is 100%. Yeah. It's no. It's 100% separate providing you're using it in your component that's in the app.
So if you had a separate thing, which you could do, then you would then have to do the copy paste thing. But that's where NX, the monorepo comes in. The beauty of that is you have your app at the top under apps, and you have your libs and your storybook lives in the libs section. And you do have to do some setup for the monorepo to have one storybook instance to be able to see all those those libs, but it's it's pretty easy. It's just where you point paths to, and the code just lives there.
And it's the same code that you're pulling into your app. It's the same button component. There's no copy and paste. You could have your your either your Angular app or react app or whatever running and, you know, and you serve, have it running and has Storybook up and you would see the change in both apps as you make it. It just Storybook would refresh a lot faster.
Okay. So you're saying you have the same components serving to these React and Angular apps? Well, no. I still react in there to be inclusive, but it would be no. Because Angular without elements can't fit in React.
So that's where you would have to go through the whole Angular element staying and build it and then throw it in there and stuff. But as far as purely an Angular app, you can have your app running and your component in storybook running, and then you can edit your components and see the changes on both screens. So you can see in a an isolated way how it's doing a storybook. And if you really wanted to see what it's gonna look like in the app, then you can boot that up and see the changes too. And are the components written in Angular or whatever framework you want Yeah.
It or I believe Storybook supports Angular and React, and I think Vue, and I think some others. I haven't really looked at it. Yeah. I saw a big list. I didn't know if that was just a list of what you can bring the components into or if that's what you can write them in.
That's what you can write, and Storybook will recognize it. So, yeah, React, Vue, Angular, Ember, Mythril. Wait. What? Where are you getting this list from?
Storybook.js.org. No no Elm, I see. No. I make jokes. Sorry to anyone who loves Elm.
I haven't even heard of some of these. What is Rex? I don't know. It's quite a surreal list. Yeah.
Mithril is kind of a meatier kinda thing, wouldn't it? I thought or maybe I get them confused. I don't know. You can go straight to HTML? Shut the front door.
Sorry. I it's a dumb thing to be excited about, but I I love it. It's very versatile. Wait. So okay.
You design button and you're like, this is the button to end all buttons. And it's like plugged into, like, this n x mono repo, which is then connected to your Angular app. Is there if you're, like, now I have this, like, static website, and I need that exact same button in HTML. Is it just, like, a toggle on storybook that you're, like, export as this thing? Or are you writing code along with, like, the storybook canvas?
Like, how does how does that work? So how does it work to create a button that is usable in just a generic HTML site? Yeah. Is it just as easy as, like, oh, I wanna now export it as HTML or is there a bunch of things that you need to do? You don't really export it.
I mean, it's just your it's your components. So wherever you're writing writing that component, it would not change how you would do it with or without Storybook. So it just lives wherever it lives and there's a stories file in there if you're using Storybook that then Storybook can look at and run run all the stories and all this stuff. If you don't have that, it's no different than what you would do today. So with or without the stories file is the only real difference.
I guess because it's because it's in NX, you you literally where you're using it in your main application, you just, like, import my magic button from, like, atlib/storybooks or something like that. Yeah. Exactly. So, yeah, it's it's the only difference is the stories file and then the setup for Storybooks so that Storybook knows how to run itself. But the, literally, the only difference in your app is the stories file.
Okay. Because seeing So how are you doing today? Storybook made me think it was, like, maybe, like, sketch where you're, like, actually drawing things or something with Storybook. So okay. But you're actually you're writing the code for your components.
Right? Oh, yeah. Totally. You're it's it's just a wrapper around it so that you can see in real time, which sounds stupid because Angular and React, they all do that anyway. But it it gives you a means of just isolating that component and really taking the time to develop that component that then could be pulled out and used at any spot in your app consistently with the inputs instead of, oh, and this one, we need to add this little class here because whatever reason, and now it's deviated from the rest of it.
And so it kinda helps you not do that or plan for it. It's okay to do that if you plan for it and you know it exists. But if somebody goes in and just hacks something, then when you go to do something else, it's like, why doesn't it work like this? Because it's supposed to work like that. And yeah.
So this is just a helpful thing to not have to do that and a helpful thing to help, you know, for designers to go in and see what the interactive result is their design. Yeah. It sounds like if you want to have a usable components that are actually, like, isolated to themselves, it's a huge tool in in getting to that with Oh, absolutely. I loved it. And it sounds like NX is also really helpful with reusable components.
Very much so. I think Victor Savkin said, like, I I forget the right number, but 99% of your your code should live in in Libs and not in the app. So it makes it really interesting. Actually, it's a it's a paradigm shift for some people. It took us our team a while to get over it over the hump of really learning how to constructed and how to put it together.
Because They're like, Well, what about this? Well, shouldn't it live here? I'm like, Well, no, I don't think so. It's supposed to be here. So let's figure out how to do it.
Same, you know, like routes and all that kind of stuff. Things that don't immediately seem like components are still lives in NX, and you gotta figure out how to pull them in as a lib instead of just living up in that app folder. That is a paradigm shift. What lives because you're saying 99%, what's the 1% that's outside of app storage. You know?
Yeah. Yeah. That in the app, the whole app component with the routing, basically. And then you point in the routing with lazy loading, you point to the libs folders to get your stuff. And index makes it easy because they give you paths.
So it's like at my cool project slash, you know, get my button or whatever. So it makes it really easy. You don't have to do absolute paths or even relative paths that we traditionally know. It's scoped, I guess, is the right word in NPM terms. So just doing just using NX in this way disable the ability to, like, turn off view encapsulation?
I just it sounds like it would it's kind of furthering this idea of these styles belong to this component only. And so in there's some times when I'm, like, yep. I'm gonna turn off view encapsulation for this component so that it actually CSS cascades and works the way it's supposed to. Like, I'm assuming if you've got it set up this way, that's kind of it's it's going against that that new paradigm. Yeah.
It's kind of a global global CSS file though. Like, we we use NX where I work. And just just going back to your point about the paradigm shift and what it took me ages to properly wrap my head around how it works. And we find that, like, onboarding new devs is a little bit slower because there's so much there's there's this added layer of complexity. But, I do actually really like it.
But but to to a lesson's point, you know, we we we do have this big, big old, like, SCSS file, which is which is like the global styles. The global giants. Yeah. Yeah. Yeah.
You know, you you have one. So you you can still do that even though you've got your because it's only really the components that are living out in in these other libs. Your app is still being pulled together into a single place. So when you're actually rendering it in the browser, you know, your global styles are still gonna filter down if you put the right class on and things like Yeah. You can do that.
We went another way. What did you do? We are using Angular material. CSS. So no.
No CSS. It's just text. No. We are using Angular material, so we are taking advantage of the theming and pulling in taking great advantage of Sass and the Angular Material theming and passing in themes and palettes and stuff into our components for client theming for different things. And so there's really all of our styles live inside the components.
But we even created a what? Oh, I was gonna ask you to create a schematic. So that would that would, like, generate your components with, like, the imports that you have to have or I didn't know if That is an excellent idea. Okay. No.
Hold on one minute. Well, it just sounded like, okay. Every component is gonna need these things in order like, because you're passing in, like, the themes. And so I was like, oh, okay. So I I see where you're going.
Okay. That would be good. They're all a little different, like, some. Yeah. We could do it.
There's not a lot of over or carry over between things just like a mix setting up a default mix in it, then you still have to fill out the inside and that kind of stuff. So but I need to actually, that is an excellent idea. I need to go through and look at what is consistent between them and say, hey, we could do this. So thank you for that idea. Didn't even think about it.
I'm on a project with similar setup. We're using stencil instead of storybook but MX and, you know, we have everything in Libs. I'm running into issues where when I bring in the wonderful Stencil components, when I test the Angular app, I have to mock the components that I built and Stencil for the Angular app because it starts you know, it doesn't recognize the Stencil components are brought in properly. Have you run into like, have have you run into anything like that? Or it's gotta be a setup issue.
We're doing something wrong. But I haven't spent are you running unit tests on your Angular apps with these storybook components or We are not. I mean, we do have alright. So that's yes and no. So in our NX when we haven't started unit testing yet because we've just been doing little components, And I'm probably gonna skip the unit test and go straight to Cypress so that we can test the end result because they're not they're all basically dumb components.
So it doesn't matter. They're showing you what you put in is what you get out just in a different format. So doing e d, whatever, Cypress type things make more sense to me in that respect. Yeah. I think that for the components, it does.
Yeah. Our existing app, yes, we're doing unit testing, but we haven't really had any issues other than tweaking the tests based on the new component. So what we're doing during the transition period is we're using storybook, and our next repo to develop new components that we're putting in to go back and take old components, start building them out in there to make them consistent. And then we basically copy and paste and port them over to our old app for now until we get the whole old app, which is using a combination of Angular Material theming now, gulp to run stuff to build up all these different themes that we started with 3 years ago. So we're trying to get rid of that.
And a lot of different variables like SAS variables in different places, which we're going through trying to rip all of that stuff out, move it over to theming. So then we could take the whole app, drop it into NX and then start replacing those components we ported over with the ones directly from the libs folder. So there is some differences between them. Once we port them over, like, we get it over there, like, oh, this doesn't work. Or we need to tweak this, we need to do that, or we did this completely wrong.
And so we fix it there. Of the reusable factor that you find differences between them? Yeah. That's the reasonable factor or the conflicts between the way we're doing it now with theming and the the running the SaaS mix ins and then the old variable variables being in there and stuff. So we're just having to tweak things, like padding is wrong on this or whatever because something's conflicting.
NG deeps are overriding things. So we're trying to get all those out of there as well, but it's working. It's painful. It's not easy, but it's working. And eventually, we'll be able to pull it in there and replace them all, and it'll be one big happy family.
How deep are you in to the rewrite? Are you, like, halfway there? Yeah. I I think so. I think we're close to halfway there on getting the theming stuff set up correctly in our existing app so that then we can pull it over into NX and then go from there.
So I think we're about halfway there, actually. So yeah. And it may be a terrible idea. I don't know. But this is this is the direction I've chosen, and this is how we're going.
So I may find that this was a big mistake. You know, I feel like if you do decide it was a big mistake, you're gonna still be in a better spot because of it. You know, things will be consistent and you'll be it'll be, like, self encapsulated. So if you're like, we've got to throw this out, it's gonna be, like, that much easier to get to the next step. So I think It will be.
Because everything will be encapsulated. And it's funny because you asked me if I've been doing much react, and I've done a little bit. But throughout this process, I've almost taken a re from my little bit of knowledge of almost taking a react, the kind of approach to how we're doing this. So even though it's an Angular, it's very, obscene, a lot of similarities between React components and our Angular components. I'm just componentizing.
Yeah. Componentizing everything. So even though you have an input, you know, a typical material input, Angular material input, then you need to add if that input needs to act differently, theme wise, or whatever, based on where it is in the app, then you make a component that is essentially just a wrapper for something that's already a component. But instead of rewriting all the things all the time, you're using that component and feeding in like, maybe 2 options at best. And then it's just kind of an isolated component that does what you want it to do.
And it's a component that you can reuse with those 2 options. Yeah. Yes or no, on or off, true or false, whatever. And to me, that seems to be lining up a lot with what I see in React, like a button, or a spinner or whatever. And I don't know, maybe I'm totally wrong.
But that's the parallel I've been drawing. No. I think you're right. But you're still putting your HTML on a separate file. Right?
I love you, Brooks. Yes. I love you, Brooks. I appreciate that as well. Then you're fine.
Good. Yeah. I know. It's like, yay, single file components. I'm like, why?
You never do that with Angular, though. Like, if it's a small component, there I don't see any problem with using, like, the with using the template string in my We're looking for a new host, Brad, because Chris has been. He actually can't do it anymore. So Yeah. So should.
If you're available, let us know. Alright. I will let you know. I'll have my people get in touch with your people. You wait till my picks now.
He's gonna pick any other podcast but this one. Yeah. I'm gonna pick 10 things I hate about you. I've never seen that, actually, but I'm aware it's a thing. It felt it felt like an appropriate thing to say.
Oh my goodness. Hey. I've actually either. Is it a chick flick? Yeah.
I haven't seen it. Yeah. Okay. Mm-mm. No.
Do you typically watch chick flicks or not? No. I find them droll. Alright. Great.
Apart from Pitch Perfect. Right? God love Pitch Perfect. Pitch Perfect. Pitch Perfect.
The acapella one where they where they just sing the whole time. Do you know? No? I just want to sing. I think I'm thinking of High School Musical, which is not what you're talking about.
So No. No. I'm not. Go with no. Absolutely not.
How many you don't even know what I'm talking about. Anyway, sorry. I'm just reading this conversation. I'm a big, like, sci fi fantasy, like, nerd. So whenever it comes to, like, normal, like, even actors, I'm, like, I said, like, I was doing this tour in London, and the tour guide was, like, talking to me and my sister, and was, like, drop like, name dropping right and left, like, with the tour.
And we were both just, like, blank face because it's just I can't. Like like, he was, like, these are really popular people, and we're, like, we believe you. Like, so, yeah, I actually wanted to ask Brad before we get to picks about NGDE and what happened and how that went. Oh, that was awesome. That was actually amazing.
That was well, first of all, Ryan said, hey, if we get, you know, accepted to Berlin, do you wanna go? I'm like, well, yeah. You know, to n g d, I'm like, yeah, we'll figure it out. We'll make it happen. And so we did.
And we got there. And just from the beginning, it was just very well run. It was their 1st year, and it was an amazing venue. This is in 2019. Right?
Yeah. 2019. August the end of August, like 29th, 30th, something like that. Yeah. And it was an amazing venue, amazing people.
The food was amazing. Everything was just great. And it was their first And the beer. How was the beer bread? It's German beer, which I'm not a huge fan of German beer, but Was it good?
Oh, you're breaking my heart. No. No. No. It's good.
It's good. No. No. No. No.
No. No. I haven't finished. I have not finished the story yet. It was an amazing thing because what happened was this is great.
I was looking for craft beer bars because I'm I'm a beer nerd. And I'll yes. 98% hops. That's fine. And found this really cool bar called protocol.
And so we went over there one evening, and they had tons of beer from everywhere, including America, and it was all craft beer. And I was looking at the big list of bottles, and I saw one from Tulsa for my hometown. Shut the front door. No. Because these people there there's a really so anyone out there that's listening that is a beer nerd, other or American Solera is in Tulsa, and they're on the list of world known beer brewery things.
They were voted best new brewery in 2016, I think, in the country or the world. And there was bottles of stuff that from there, and I was like, oh my god. So I I said, yeah, really have this? Yeah. So, okay, we want one.
So I opened it with people. You did not order beer. To Berlin, get beer from home. Tulsa. Yeah.
I drink a lot of beer. I didn't say that was my only beer. Excellent. Excellent response. Have the iconic beer in a boot.
It wasn't yeah. It wasn't in a boot. We did eat at the pollinator restaurant, so I did have a lot of pollinator beer. So which is German. Was it amazing?
Like like good. It sounds like like beer. I can only have a beer in Berlin. What what are they? What from Brad's Liston.
From Tulsa. Yeah. The one from. There is a lot of good craft beer in in Europe as well, and they had those. And I tried them, and they were good.
One beer in Berlin, I would say god. What's it called? Berliner, the the cheap one. It's like a green bottle with a red cap, and it's like the Bud Light of Germany. Bud Light.
So yeah. I mean I love it. If you're there, you might as well do that. Okay. I every time I'm out abroad, I always do the the wines.
I'm a wine girl, and I I try all the Cabernets I can because there's actually, like, a list of my favorites that we can't even get imported here. Like, it's just Wow. I don't understand it's wine. Like, yes, I get that it's a higher alcohol content, but they just I contacted, like, the actual winery, and they were like, no. They won't allow us to ship it to you.
And I was like, this is ridiculous. So, anyways, I digress. When you travel, you gotta try some Cabernets because they've got some good ones that aren't allowed in the states. So That's crazy. That's it's really crazy because we get all kinds of stuff from everywhere.
Why can't we get everything from everywhere? What is the alcohol content that you're not allowed in in wine in America? That was Zach, do you know the alcohol content that we're not allowed? No. He he was because Zach was the one who was reaching out to the wineries, and they're like, it's some regulation about alcohol content allowed in wine.
So I don't know the exact one, but that is the reason why. So I I got some wine in my wine rack that's, like, 14 a half percent. Good lord. I know. I know.
Right? Save those for a special occasion. I've got beers that are 14%. Now that, I can't do. I know.
That's where I was like, really? There's other alcohols that are higher, but I'll let it I'll let it go. Yeah. So so in PPE, if they have it again, you're like, it's definitely a must. Oh, yeah.
Totally. Gotta go. Oh, totally. Yeah. It was awesome.
I mean, it was and I told Robin that later. I was just thinking once we got into this whole COVID thing, I was like, Man, you feel so much more appreciative of all the stuff you could do that used to be able to do. So I just DM them. I'm like, Dude, I just want to say thanks again for bringing us over. Because that was an amazing conference amazing trip.
And now that we we realized what we lost, I guess, it even makes me cry. So so, yes, it was it was awesome. Not enough nice things to say about it. Very cool. I definitely I did not make the first one, but as soon as this is all over, I'm definitely gonna apply because I did not know I I hadn't heard from others that it was that epic.
So thanks for that. I enjoyed it. I mean, it it was it was really great. So I don't know if everyone feels that way, but I do. Oh, no.
You're speaking for everyone, Brad. Okay. Cool. Yeah. We all enjoyed it.
Every one of us. It was the most amazing thing. Mhmm. No one made descent. So let's see.
Do we have anything else before we hit up some pics? Is there anything else about NX or Storybook or DE, NGDE, or other things that you wanna talk about before we do pics? Not from me. Any questions that I can try to answer? I will take your silence as no.
I was, like, over there looking at Brooks. Like, what you got, Brooks? What you got? I love it's like whatever you your beard. I don't think Okay.
Seriously, yeah. You all can't see it, but Brad has this He's got a dope beard. Yeah. What is there a name for that style? It's a goatee.
It's just a really long goatee. Is it a goatee? I think once you I don't know. The breast line, it's no longer I mean, we don't need your chest in the middle. Goat's beard, isn't it?
Like, it does look like a goat's beard, but a cool one. With all due respect. Yeah. That's not that's not intended. None none respect taken.
Yes, sir. You have you have the beard of a goat, and then and then we take out a glove and slap each other around the face. I'm like, yes. Awesome. Very Monty Python of you.
I love it. Do you know goats have square pupils? Yeah. That's why they're, like, often demonized because they don't Really? That freaks me out.
Do Do koalas have 2 thumbs? You live in Oklahoma. How do you not help out with a goat before? I've got I live in the city. No.
No. Perchance. Oh, okay. No. My statement stands, and I was born there.
True. I have seen a goat. And my my dog groomer has a pet goat who likes to hang out with all the dogs, but I've never stared into the goat's eyes. Look into its eyes. I've never looked into its eyes.
I saw men who stare at goats. I'm not looking into those eyes. Alyssa won't won't know that film because it doesn't have a spaceship in it. Oh my gosh. I assume.
I mean, I've not seen either. What? There's a lot of movies I don't know, and it's not spaceship related. I'm just not very well versed in that area. You found my weakness.
Okay. Yep. What you need is to watch a good dose of pitch perfect. No. I need to I need to join a movie club or, like, just buy, like, TLDR list.
Like, that way, anytime someone references, I'm, like, yeah, with the blah blah person. You know? Like, cheat my way through it. Should. IMDB.
The clips. There's the there's the thing. It's IMDB. It does have the plot in there, doesn't it? Yeah.
Yeah. You can see the plot, synopsis, and everything. There. Well, there you go. There's your clips notes.
Okay. So my pick is gonna be related to fall is coming on and every fall, it's family family tradition that we watch all the Harry Potter movies. Do any of you 3 have a tradition like that with movies or shows, I guess. But We watch Elf at Christmas because it's hysterical. So we watch Christmas Vacation Oh.
On repeat. Those are so so cool. Don't they stress you out, Brad? Christmas Vacation. It's hilarious.
That national lampoon? Yes. Is that what it's called? Yeah. No.
I've not seen it actually. I like my Wow. The one I like always like to see at Christmas is Scrooged. It's was named Bill Murray. You've seen that one?
Yeah. That was good. Love that one. It's classic classic eighties Bill Murray. Do you remember, the the the cab driver from that?
Yes. So do you know that he is he's the dude that did the feeling hot hot hot song in the eighties? Really? Late eighties, I think. Yeah.
It's it's hilarious. Like, I was I I just recently put that together. I'm like, the guy looks familiar. I'm like That's remarkable. Started Actually, they're doodling.
I'm like, oh my god. The I do know that the fairy in that is the lady who played the granny Addams in The Addams Family movie from the nineties who then later turned up in, what's it called, Kimmy Schmidt on Netflix. Oh, Carol Carol Kane. Yeah. Maybe.
Yes. Ah. Oh, we love you with name dropping. It's just sketchy. I mean, I didn't know the I texted I texted her to yesterday and that's how she was doing.
Yeah. So yeah. No. I just we love her. She's awesome.
She was also in the princess bride. She was the the old lady, you know, half on storm in the castle with Billy Crystal. So yeah. Yeah. The chocolate coating makes it go down easier.
That one. Yeah. That one. Yeah. She was also in Transylvania 65,000.
She's very recognizable, so I just had all this remarkable. It's In fact, the recall. Yeah. Do you have would it would it like a close to eidetic memory? Like No.
Not at all, which is hilarious. Because I can remember movie quotes and I can remember things like this, but I cannot remember much anything. Like, what did I do yesterday? I don't even know. Mhmm.
Like Yep. I have to read something. I read a number. I'm trying to type it in on another screen. I've got crap.
I have to go back to the other screen to get the next three numbers. Back to you know, and then we Can't they make those, like, four numbers, not the six numbers that they got? It's it's the dual authentication. It's really Oh, yeah. Grinding my gears lately.
Well, there was something I heard where you could split them up into threes, and then it's easier to remember each set than having, like, a 6 together or even 4 together. I think 4 is the cutoff of things you can remember, but grouped even in threes, you can remember more of them. More you can remember 2 groups of threes. Yeah. Yeah.
I hate those things. Just do a lot. I I know they're good. Don't don't get me wrong. I hate security.
But it's just annoying. This app is in here. It's insecure. You think you think yours is annoying? We have a Twitch account with our dev advocate team, and it goes to my boss's phone.
So if I ever need to sign in, I have to I have to Slack her and ask her to check her text messages for the authentication code. Wow. Yeah. It's Seems like switching to to tap into the enterprise market is what what has to happen there and start charging. Yeah.
That'll be nice. Some some money. When I was in my last my last place I was working, I we had a similar thing where we had to do authentication, and it sent a thing to a mobile phone. But the it was going to the mobile phone of a developer in Bangalore Mhmm. Which is in India, which is something like 6 and a half hours ahead of the UK.
I was gonna say that's not that's not helpful. Yeah. Like, what they should be working. Well, so this this this poor woman as well was just because, like, on my team I can't remember what it was, but we were trying to get access to something. And, like, everyone from my team was just, like, authenticate, authenticate, authenticate.
This this poor woman must have just woken up to, like, 8,000,000 text messages. Oh my gosh. Oh my goodness. Hey, Brooks. Speaking of beards, I I want you to do that pick because I like Oh, yeah.
So we were talking about beards Segue. And, shaving before. And I decided I was gonna pick safety razor, which is safer than a straight blade, but just uses one blade and you can use either side of it. It's kinda like a t looking thing. And the blades are super cheap.
When I started, I got, like, a multi pack on Amazon, which is totally some dude just, like, bought a bunch of big packs and, like, threw them in a ziplock bag and gave them to me for, like, $5. And then but, like, a huge pack is, like, like, of, like, 2,000 blades. It's, like, $15 or something on Amazon. So it's really cheap, and you can use a new blade whenever you want to. Yeah.
That's my pick. Safety razors. Oh, and speaking of the Addams Family, watch the Addams Family remake, the new one from, like, a year ago. It's very funny. And my 3 year old daughter loves it, which is kinda morbid.
You know, it it's got, like, guillotines and stuff in it, and she is, like, into it. Oh, that's awesome. So yeah. Definitely a great movie. Those are my picks.
Chris, it's your turn as It is. Designated. Wait. I think we did it wrong. We we did.
I was I would just be sitting there. I'm surprised you haven't been able to see the rage rage. I didn't have a segue for Chris's because I didn't know Chris's. That is true. Speak speaking of bids, Chris, what are your picks Like, for for anyone who's who's not on camera Bearded dragon.
A bearded dragon was in Chrissy's pick. He just picked one up at the pet store. I do have a beard. Yeah. Again, Brad, we have we're one panelist down.
So Why am I nice? Why is this always me Anyway, I have picks. Right? And I am all planned out beautifully, but I would I I loved the segment of this episode where we just talked about beer and wine. 2 things that are very close to my heart.
So I've switch swapped out my picks. Oh. I'm gonna pick first of all, I'm gonna pick, my favorite craft beer company, which is a brewery called BrewDog that are based in Aberdeen, which is in Scotland. And if you've ever had any BrewDog, I I'm a particularly fond of one they do called punk IPA, which I think was their first and it's it's a really, really nice craft beer. Also, they're they're a great company because at the start of the COVID crisis, they they completely converted their primary brewery to producing antibacterial hand gel, which they called punk hand sanitizer.
And they just gave it out for free to the local hospitals. So that was a particularly good thing to do. So that's that's BrewDog is my first pick. And my second pick, I'm gonna pick this wine subscription thing that I I particularly like. It's called Naked Wines.
It it's not like that. But what I particularly like about them, and I think they are branched out into the states as well for anyone on that side of the pond is who who's interested. But you you you pay like £20 a month or whatever, and it goes into your account. And they use that money to to fund independent wineries because there's a big problem in the wine industry where supermarkets will will basically buy up all of the wine, give you a pittance, give the the the winemakers a pittance for it, and then hugely mark it up. Whereas here, you're you're buying your wine directly from the winemakers all over the world.
And I don't know. You may be that that's where I get my wines. That's on the wine rack. That's, like, 14 and a half percent. So maybe check out.
So that's naked wines. That's that's great. And, also, I'll just add as a as a little side note, I'm particularly looking forward to when we have our spin off show where we just talk about wines because I'm well up for that. Wines and crafts. I, like, just went to Naked Wines, and I started their quiz.
It says, you buy a $100 Napa Cab. What's the value of the juice inside the bottle? And the two options are 20 or 60. That's the thing. This is this is the one that my kind of quiz.
I hate California wine. I'm sorry, anyone who lives in California, but I hate it. I literally anytime I go to, like, a nice restaurant, I look through and I go, do you have anything not from Napa? Like, no? No?
Okay. Cool. So so this quiz is just cracking me up. Naked Wines. Yeah.
Us.nakedwines.com. Cool. What about Oklahoma wine? Do you like Oklahoma wine? Do you know We have 1 or 2.
Oklahoma wine. Tell me, like, the name oh, I was like, if you have a favorite, I need to know. No. I don't have a favorite. I've never even had your head when he was talking about BrewDog.
Have you had it? Oh, yeah. Yeah. No. I wasn't shaking.
Oh, shaking up nodding my head. Yes. I wasn't shaking my head. BrewDog's great. I love BrewDog.
Right. It was actually They're interchangeable. True. They are not. They're different things.
No. That was one of the places we went in Berlin, actually. We went to BrewDog. Oh. But yeah.
Because they have a house as well. Yeah. Yeah. And it's it's awesome. It was like yeah.
It wasn't the actual brewery. It was just the BrewDog Pub, but it was great. And there's actually one in Columbus, Ohio that has a hotel, I think, with it. In, like, the brewery? I think so.
That's what I heard. Friday. That's awesome. And driving. Hey.
It's a good plan, really. Yeah. Yeah. So alright. So my picks.
Right? I'm going to pick a couple things. 1, I'm going to pick craft beer because I'm a nerd, and I like craft beer. That segues perfectly into my question. What is craft beer?
Craft beer is expensive beer. I'm just getting the signs out. Yeah. Craft beer is handcrafted artisanal beer that is not mainstream yet, I guess. So, like, I didn't drink beer until craft beer came around because I don't really like pilsners and lagers and that kind of stuff.
And it's mostly the yeast and the aftertaste. So like Bud Light or Budweiser or Miller or any of that kind of stuff. Just it's not because it's not cool. It's just because I didn't like the taste. And then when we started getting these big stouts and big IPAs and looking back at old recipes, like I had a pre pre prohibition lager from think Wren House in Phoenix, and it was amazing.
And it's a lager that was amazing. And I usually don't like those. So I think at some point, we got into the whole specific kind of yeast, and then craft beer has broken out of that and started a whole new some good, some bad idea. Like Oh, thank you for that. I I love that.
I mean, that was me. So craft beer. And then my second pick, because I want to, is doing things that you should have done 20 years ago. Like, I was a musician, and I got into playing guitar, and I thought I was gonna be a musician for a living, and that didn't work out. Lot of different reasons.
1, I didn't work hard enough. That's probably the biggest one. So it was all a romantic dream with no action behind it. But I also liked EDM and techno and that kind of stuff way back when. And because I was always playing acoustic guitar, I was got in my head to just stick with that and not actually branch out and not try anything.
Don't buy a keyboard. None of that stuff. And so I just ordered for my birthday a midi controller and stuff because I'm gonna start playing with electronic music now, and I should have done it in the nineties. What's a MIDI controller? It's a keyboard that controls software on your computer to make sounds.
So software synthesizers and stuff, so you have a lot more options. Do you have you ever played, like, a normal keyboard or you just, like, dive in head first? I took piano lessons when I was a kid, and I hated it. And I'd only took them for less than a year, so I can pluck around on it, but I can't play with 2 hands, and I can't none of that stuff. So it'll be fun.
I anticipate tweets of things you've created. Great. Do you do you have a SoundCloud? Yes. No.
Not yet, but I will have a SoundCloud. Oh, Brad, this has been we are at the top of the hour. But this is Ben. Your pick, Celisa. Where's your pick?
Did I not? Oh, you're gonna pick I thought I said something was a pic of mine. You're gonna pick doing Code It Live on Wednesdays at 2 PM CST, maybe. Okay. So done that pic too many times, apparently.
Okay. Now I have I was being genuine. I won't be able to watch it. Yeah. Well, I mean, everything that he said was genuine.
How Everything he said was true. Yeah. It's the t. It it comes off as snobbish. Absolutely.
I have so I use one password for everything. Even things that I shouldn't use it for, like, I have card in there that has, like, my favorite wines, my favorite cubic bezier, my driver's license number. Right? Like, it has everything in there about me, because I have a really bad memory. So my favorite wine, I just looked it up, that I had in London, can't get it in the States, is Goldberg Zweigelt from Austria 2014.
So, darlings, if you can get your hands on that jewel, that is my pick for today. So, Chris, that was a subtle hint to, find some and ship it. Yep. Totally, like, in a legal manner. Of course.
Of course. I was in, like, a a huge shipping container that's just full of, like, stuffed animals or something, and, like, like, inside of the middle of one, there's a bear that you just have to, like, grab. Find the really heavy bear. Yeah. And and inside of that bear is a case of wine.
Why is this bear square? Ask questions, Brad. Just give me the bear. Put the bunny down. Oh, but, no, seriously, thank you for the show, man.
This was awesome. You for having me on. This has been great because when I first started getting into Angular and everything and back when I was talking about doing, you know, learning dev well, once Angular came around, but I still wasn't doing it as my full time job. I was listening to this show, like, over and over and over and over to all the episodes, so it's really kinda cool to be on it now. Mhmm.
And thank you. Also, I just wanna put out the invitation because I will be moving back to Tulsa very, very soon in the wintertime. And so if you love Angular and you also love beer or wine, you should DM me or DM Brad, and we can all 3 get together and hang out because I'll be back in t town. So Oh, yeah. Awesome.
Oh, and if you do need another panelist, I'm always willing to be available. Yeah. Chris, did you hear that? There's we can have an another panelist. Right?
I'm not not in place of Chris. Yeah. I'm not trying to kick Chris out. Yeah. He's going to say, you don't have to try.
You don't have to worry. We've already kicked him out. Chris I'm the champ the Cheerio guy. You can't you can't get rid of the Cheerio Cheerios. Hello.
Hello. Hello. Brad, we might take you up on it because you have made the show lively and fun, and we we love having you. So thank you so much. I thanks for having
Angular Elements, Annex & Storybook with Brad McAlister - AiA 439
0:00
Playback Speed: