Adi_Iyengar:
Hey everyone and welcome to another episode of Elixir Mix. Today on the panel we have Alan Wymer.
Allen_Wyma:
Hello.
Adi_Iyengar:
And me, Adi Iyengar. We don't have Sasha today, so I will be hosting again. And we also don't have a guest. But we have a pretty interesting panelist topic today. Alan and I are going to talk about PedalStack and our experiences with that. Alan's obviously more experienced here. And we'll also talk about things to keep in mind while using it, some cool features, some examples, and talk about some pitfalls. So Alan, do you want to kick us off?
Allen_Wyma:
I didn't know where to even kick us off at. Um, I think something that so this kind of topic just came out of nowhere. I don't know what we're going to choose before this, but you and I both started talking about tailwind, because it's been a lifesaver, right? But
Adi_Iyengar:
Totally.
Allen_Wyma:
actually, you know what I like to hear about, because I've never really played with it, but I've seen a little bit of it is Bulma. And then we'll talk about, you know, why you decide to go from Bulma to tailwind. I think it's a pretty interesting thing, because people do use a lot of Bulma. Even in Phoenix, and I have known nothing about Bulma, is it kind of like a bootstrap? We have all these components ready to be made and you just kind of mix it in or how does it work?
Adi_Iyengar:
Yeah, totally. It is that. It's called Bulma because it's a bunch of small components. The way it's designed, it's like the capsules. And if you're a Dragon Ball fan, Capsule Corp was owned by Bulma's father. That's why they're named Bulma. But yeah, it's very easy to use, very easy to define your styles in a central way, and also easy to override it to some extent, kind of like Tailman. So very good. easy to adopt for a startup and start building something very quickly. The communities are responsive. They have asked at least four or five really big questions to the community, and the response was very quick. That was huge. And there's enough templates for Bulma that you can buy one, easily copy it, and use it for a quick production app in a startup. So that's why we chose Bulma. I call it Pebble stack, wrongly spelled Pebble. But yeah, it worked really well for us. But I think once we started designing our own components more, once they had a better designer, designed based on how our users are using our app, it made it very hard to make changes to it. And that's where Tailwind really is amazing. It's so easy to just add a class and, boom, make something happen. And it works so well with Alpine. which whole purpose of that is to change attributes of your components of your HTML tags based on some variable changing without using JavaScript. So yeah, Tailwind's ability to just stack classes on top of each other with Alpine's ability to do that with zero JavaScript is just a match made in heaven.
Allen_Wyma:
That's kind of a interesting thing that you're talking about because that's kind of what The negative part about Bulma is I would say is it's really weird. It's so if you don't have a design, I think Bulma and Bootstrap is kind of things work out fine, but then the negative part is like, I don't know about Bulma because I haven't seen a lot of people using it, but everybody knows when you go to a Bootstrap site that this is a Bootstrap site immediately, right? But the, yeah, the other thing too, is that when you do have a design, if you do come from Bootstrap, you spend most of your time just overriding classes. Right. which kind of kills the use of bootstrap.
Adi_Iyengar:
Yeah. Yeah. I mean, Bulma is definitely not as bad as Bootstrap in how flexible it is. And the whole architecture of components does make it easier to use and adopt. There's also a little bit more of a learning curve than Bootstrap as a result, right? Because it has more features that allow you to use all the different types of ways to make changes to your designs but yeah I mean the flexibility of Tailwind is just like next level. It's a lot more effort to create the initial design in Tailwind right that's a lot of investment also a lot of effort to learn that and change your mind to think in the Tailwind way but once you're there it's just hard to go back to like kind of I don't know actually was one of the big reasons one of three people I respect who was asking me to try Tailwind out. And in February, I finally made the change. And in mid-March, I was like, I got to move the other apps to Tailwind too. They cannot be in Bulma anymore. It's taking us way too long to make design changes. We are a startup. We want to be experimental. We want to react to every piece of data we get from users so we can release things faster. And Tailwind was so compatible with that kind So yeah, I just can't imagine myself using something else right now.
Allen_Wyma:
Yeah, that's a pretty good point. I guess you could say that's kind of the negative part about using Tailwind, right? It's like you have to build everything from scratch. But it is easier, right? I think what's kind of cool is, isn't there something about, people always talk about semantic UI, kind of where you can see everything all in one spot. So if you have something there and you have like a class like this is a button but what does actually that button look like right that's kind of like one of the questions it's like okay i have a button here but what if this one button i want to make it a different color how's the order of importance actually work and the interesting thing about tailwind is that you can uh you can is they promote this idea where you kind of put one class for every single property and it makes things you look at that HTML, you can see what is that thing? What color is it? What's the text color? All these different things. And so you can just tweak whatever you want. Now, the negative is if you have a bunch of these buttons everywhere and you're not reproducing them using a component style, then you're in hell, right? Unless you go through and you start making these special classes, then you go back to the original problem, right?
Adi_Iyengar:
Yeah, I mean, at least like, and that's where the pedal comes in, right? With Phoenix and embedded HTML, even without using any fancy components and stuff, just rendering partial, it makes that very simple. Being able to reuse the same buttons everywhere. Yeah. One thing I use quite often is actually the class stacking, is that if you have a class that specifies a background or a width of a button. and then add a class later, which asks a different background or width, it overrides that. So most of your button can still be standardized if you want to override something. It can still change the class when you use that embedded HTML. Yeah, I'm a huge fan of that.
Allen_Wyma:
What I also quite like too is the JITS. I know I talked to you about it before, but have you actually used the JIT before?
Adi_Iyengar:
I have not used Tailwind Jet at all.
Allen_Wyma:
Do you know what I'm talking about exactly or no?
Adi_Iyengar:
So it's just in time is what JIT means, but
Allen_Wyma:
Well,
Adi_Iyengar:
I don't know
Allen_Wyma:
obviously,
Adi_Iyengar:
how.
Allen_Wyma:
yeah, okay.
Adi_Iyengar:
Yeah, but I don't know what it means in tailwinds. I would imagine it might be the classes that you define, the custom classes, but I'm very interested in learning more.
Allen_Wyma:
Um, well, maybe we could talk more about the configuration that we can go onto the chip, right?
Adi_Iyengar:
Yeah, sure.
Allen_Wyma:
Uh, you probably know what I'm talking. You should know what I'm talking about, about the chip, but maybe you haven't heard it called that. Um, so what's actually kind of cool too, about, about, uh, Tailwind is that it's really, really super customizable, right? You have this configuration file. I think one of the first things I always do is start adding in all of the custom colors that I have from, from the branding, from the website design. The hardest part about that one is coming up with names. Because when you get the design, you just have the hex color. And you're like, OK, I don't know what to use for this. But what's cool is that once you have the names put into tailwind configuration, you can use these wherever you want. So if you want this text, maybe you have like ACME red. Well, you could say text dash ACME dash red. And that will make the text color that ACME red color. And you could say BG dash ACME dash. red and that would make the background the Acme red. And it's just so intuitive. Once you get into the naming style, it's just so intuitive. It's crazy. And then they also have text sizes pre-configured, but you can also override those. We're using the configuration file. I haven't done too much overriding. I'm guessing you guys probably have done a lot more overriding than me, right? Have you guys done overriding or no?
Adi_Iyengar:
The configuration and themes, is that what you're talking about?
Allen_Wyma:
Yeah, the themes and anything in the config file.
Adi_Iyengar:
Yeah, yeah, I mean, all the colors, all the font style, and like font family, everything is in configuration. And when we make a change, we make a change to the config. Yep.
Allen_Wyma:
Yeah, speaking of fonts, right? I can't tell you how many times I've had like, such a pain to deal with designers. I understand about the design stuff, but it is kind of painful when you're working with a style sheet and to say, Oh, this stuff has to be, I don't know, open sands. And this one has to be comic sands or whatever. Of course, you wouldn't use comic sands in real science or else they'll kill you. But still, they want different fonts and different parts of the website. And sometimes it's hard to make, to figure out, okay, where should I make this one, this one, and where should I make it that one? But like you said, you can add the font to the configuration for the theme. And then it's easy just to say, okay, you want this one to be this one? Okay, easy. You just write the class name. It's done.
Adi_Iyengar:
Right.
Allen_Wyma:
It's just done. And it's
Adi_Iyengar:
Right.
Allen_Wyma:
so convenient.
Adi_Iyengar:
Yeah, totally. And also, I mean, this is like a small thing, but it can make a big impact. Instead of saying, hey, for titles, use this font. In your config, you can call it title itself. So instead of using the font as a class name, you can use the class name as the domain that you're using font for. That, again, makes the rest of your HTML a lot better. easier to follow like what you're talking about instead of like random font names in your html
Allen_Wyma:
Oh yeah, definitely. Um, but, uh, even, but going back to config file, there's a lot more things you could do too. Like I said, you can override, like what does that X, XL actually, what sizes that you can override the importance of like the, um, because you can say, okay, on hover and make it this color on focus, make it this color. You can actually override the importance because sometimes you may say, okay, yes, it's focused, but I want it if they mouse over and it's focused that the focus is actually higher than the mouse over or that the mouse over is higher than the focus, you can actually override that too. It's crazy how much that their documentation is super awesome and super nice and
Adi_Iyengar:
Yeah.
Allen_Wyma:
very clear.
Adi_Iyengar:
Yeah, totally. One thing we used, so at Not at My Current Company, so one of the companies I advise, well, I built their software, the first MVP, and they wanted a dark mode. And I remember it's called presets. It's a way for you to override the base tailwind configuration with something. And there were dark, semi-dark presets already built. and Tailwind UI in all of the seven, you can just use that as a preset to also override the base Tailwind configuration. And instead of the base Tailwind, you have presets which you can further override in your config, which is also really cool.
Allen_Wyma:
Oh yeah, speaking of dark mode, right? Have you ever, you've seen the dark colon, all that stuff? You can specifically say if they're in dark mode,
Adi_Iyengar:
Right,
Allen_Wyma:
you can make it this color. Wow,
Adi_Iyengar:
change the
Allen_Wyma:
that's,
Adi_Iyengar:
class, yep, yep.
Allen_Wyma:
it's insane. Their documentation is just ridiculous. It's really, really good. Wow, it's really amazing. They talk about how to do all this kind of stuff. just it's just nuts. Like they also have peer classes and group classes. So for instance, you can say, okay, if you have like a high level div, and then you wanted to say, okay, make that high level div a certain color when I mouse over something on the inside of it, you could say like, group, what is it, I forgot what the what the thing is, but you can use groups and peers, which says like, okay, if my sibling is doing something, then I want to be doing something else, like I want that to design to be something. else.
Adi_Iyengar:
I'm not familiar with that.
Allen_Wyma:
It did to be honest, there's too much stuff in CSS. It's basically a whole other programming language.
Adi_Iyengar:
Yeah.
Allen_Wyma:
I completely redid this form that was done all in JavaScript from a client and I just re-implemented it. And I used PhoenixLiveView obviously for the form. But I wrote zero JavaScript and I managed to basically replicate. Oh, sorry, sorry. I did write one job. The only theory in JavaScript I had to write was when I had to format a phone number. I wrote that with a Phoenix hook where you would start typing and then we'd have American
Adi_Iyengar:
Right, right.
Allen_Wyma:
Um, but besides that, everything else is using CSS for like all, like the making, like making a text box turn red in case it's invalid. Uh, all
Adi_Iyengar:
Nice.
Allen_Wyma:
this stuff is basically using just tailwind CSS.
Adi_Iyengar:
Nice.
Allen_Wyma:
It's insane.
Adi_Iyengar:
That's crazy.
Allen_Wyma:
Super crazy. But kind of going back, so with the configuration, you can get pretty far. But what happens, what you may run into eventually, which I'm sure you ran into, is that using the bass classes, you can only get so far. There's going to be a time where it's like, you need to have something very specific. Maybe the spacing has to be very specific. Or a very specific color, only in one section, for some weird reason. And there's two things you could do, right? One is that you can go back to the configuration file. You can add it. Two is that you can create a CSS class for it. Or three, which is what I've been doing, which is basically using the JIT. So they have this thing called the JIT, JIT and time compilation. What it actually does, it'll actually tailwind the binary. It will actually run through all of your templates and only create classes that you actually use. So like we talked about before with with the colors. If you don't create a background with that ACME red, it never creates a BG dash ACME dash red
Adi_Iyengar:
Oh, that's very
Allen_Wyma:
that
Adi_Iyengar:
cool.
Allen_Wyma:
will never be created. But what it does do is that you can create like, say you want a specific font to be 12 pixels big, you could say text dash left square bracket, 12 px right square bracket. And that will dynamically say, oh, you want this text to be 12 pixel. it'll create that class based on the name of the class, and then it'll read the class name and create the values for you within that class. You guys have never used that before?
Adi_Iyengar:
have not used the just-in-time before, but it makes sense. I mean, how would it work with a dynamic attribute? Because you can add like bg dash the theme color that you have specified, right? But that theme color is kind of runtime, right? Does it compute those as well, or does it not
Allen_Wyma:
Themes,
Adi_Iyengar:
do that just in
Allen_Wyma:
yeah,
Adi_Iyengar:
time?
Allen_Wyma:
no, it works. It works definitely.
Adi_Iyengar:
Oh,
Allen_Wyma:
So
Adi_Iyengar:
wow.
Allen_Wyma:
for the theme, I've done this actually quite a few times.
Adi_Iyengar:
Mm-hmm.
Allen_Wyma:
So over here, I have in one of my projects, text dash left square bracket, what I call the pound symbol, right? The hash tag as some younger
Adi_Iyengar:
Right,
Allen_Wyma:
kids
Adi_Iyengar:
right,
Allen_Wyma:
call
Adi_Iyengar:
right.
Allen_Wyma:
it. Then I have the hex color and then the end one and it creates it.
Adi_Iyengar:
Right. Hmm.
Allen_Wyma:
And it even works for pseudo elements, right? So we talked today about one of the things I have is, if something is required, I add a specific class. So have you done pseudo elements before with the after and adding stuff to it?
Adi_Iyengar:
I have not, I have not.
Allen_Wyma:
OK, so what I tend to do is, if something's required, I add a pseudo element, and I just add an asterisk to it or maybe something else. And where is it? You can do that automatically. You could say, OK, after. So after is like the pseudo element colon, and then content dash, and then square bracket. And then you can do a string of an asterisk and then square bracket. And that will create the class, which will add the content afterwards. Because you can use CSS to add content to things.
Adi_Iyengar:
Right.
Allen_Wyma:
Like I said, CSS is just basically another programming language. All the stuff you could do with it, it's nuts. You look like shocked, I think.
Adi_Iyengar:
Yeah, I am. I'm actually getting a few bookmarks here from this conversation. That's one of the big reasons I wanted to talk about Perl Stack with you, because I know I'm going to get a lot of bookmarks, for sure.
Allen_Wyma:
Yeah, so when you guys were doing time, when you actually were creating separate classes for some things?
Adi_Iyengar:
Yeah, I mean, the only thing that we were standardizing was fonts and colors and all that stuff. And for the most part, we were creating separate classes. I think the JIT is just a way to simplify the loading of all the classes to make sure not all the classes are loaded. So yeah, it would just add to what we're doing. I think one thing would be I'm also curious how it would work with the CSS variables. That's something we use in a couple of instances as well in Tailwind because some of our styles a BOMA app, and we want to use that CSS variable. So I wonder if I'm pretty sure that won't work with JIT. It would not make sense if it worked. But yeah, our tailwind usage has been very mostly how you would expect with classes. And besides standardized things in config, it's mostly, you know, stacking glasses on top of each other. We do use Alpine instead of like you were saying, using Tailwind to do some of the relatively complex animations and stuff like that, like changing colors and stuff like that. But we, yeah, probably can use CSS for that as well. But yeah, that's pretty much the limits to our Tailwind usage.
Allen_Wyma:
Now, actually, this is a pretty good questionnaire for you. I've seen a lot of people and I think there's a blog post on fly IO where they talk about taking the Alpine, taking the A out of pedal. Have you seen there's a big movement of people taking the Alpine out of
Adi_Iyengar:
Oof.
Allen_Wyma:
pedal?
Adi_Iyengar:
I have not. I would say I'm not going to lie. I think it's only very hard for me to think of building front ends without that. But I'm very curious to learn more about it.
Allen_Wyma:
Yeah, they have a specific article all about that. And I was curious if you actually how I mean, I would actually like to hear I mean, since you're learning so much about tailwind for me, I want to hear more about alpine from you because I have been trying to figure out. So with the new Phoenix live view, right, one of the things that you couldn't do before was, you know, dynamically showing and hiding models and these kind of simple, simple things. which I think Alpine was great for right, like just showing and hiding a sidebar.
Adi_Iyengar:
Mm-hmm.
Allen_Wyma:
Now, you can use that you can use that they have this JS thing, right? I forgot what the name is exactly. And you can
Adi_Iyengar:
reasons.
Allen_Wyma:
add and remove classes. So now what is what? I mean, what can I what can Alpine do that you cannot do with just regular tailwind and the new JavaScript stuff added in from Phoenix.
Adi_Iyengar:
Yeah, how do I actually don't know how do you know how the Phoenix live the life sets Phoenix live your GS module we talked about right the GS dot hide and all
Allen_Wyma:
Yeah,
Adi_Iyengar:
that stuff.
Allen_Wyma:
the
Adi_Iyengar:
Yeah.
Allen_Wyma:
JS one. Yeah.
Adi_Iyengar:
Yeah, I actually don't know how that works under the hood. It doesn't actually add doesn't generate JavaScript right like I don't know how that works if it is
Allen_Wyma:
It
Adi_Iyengar:
something
Allen_Wyma:
does,
Adi_Iyengar:
like.
Allen_Wyma:
I believe. I believe it generates some hooks or something. So all you can do is add classes, remove classes, set attributes, remove attributes, show, hide, toggle, transition, and dispatch custom events
Adi_Iyengar:
Right,
Allen_Wyma:
to elements.
Adi_Iyengar:
there's a dispatch as well, right? And that really,
Allen_Wyma:
Yeah.
Adi_Iyengar:
that makes the hook so much simpler. But yeah, so one big place where we use Alpine is we built our own calendar scheduling thing. We needed our scheduling process for the startup I used to work for was very complex, right? We had to use a calendar library, which was in JavaScript. Alpine was a great way to communicate with that JavaScript. at the client level itself, where based on certain things when you react, Alpine gives you the ability to change something and also call JavaScript right there, the attribute level. And that made our code very simple. So basically, how we built this was the live view was changing the dates of the calendar and changing the view. If it's a week view, day view, or month view. Alpine would react to that. and send events to the JavaScript without using JavaScript, like the calendar that was initializing JavaScript, and that would change the UI. So it's a good way to communicate with other client libraries without using much JavaScript, which I don't think you can do with Phoenix. You have to go to server and dispatch somehow, which is unnecessary.
Allen_Wyma:
Well, they do have the ability to send events directly to the front end. Have you seen that before? There's a send
Adi_Iyengar:
Um.
Allen_Wyma:
event, I believe. I've seen it. I'm sorry, push event. Yeah. So basically you can push events from the back end to the front end. So it's kind of like piggybacking on, or they're already piggybacking on Phoenix channels, right?
Adi_Iyengar:
Right.
Allen_Wyma:
So yeah, it's this push event, you send the socket and then you send the name of the event along with the payload. And then the other hand, you can say this dot handle events from a hook.
Adi_Iyengar:
Right.
Allen_Wyma:
And then, yeah.
Adi_Iyengar:
Got it. So the phoenix-click will send EventTrick to the front end, is what you're saying, from the back end.
Allen_Wyma:
Sorry, can you say it again?
Adi_Iyengar:
So for example, if a button, based on, like you select a button and you want a JavaScript to react to that button, you would use the js.push event to that element. Is that what you're saying?
Allen_Wyma:
Oh, no, no, no, no, no. I think I think you're you're maybe I wasn't clear in my in my what I wanted to say. What I'm talking about is imagine having your users are sitting there looking at a chart. And you want it to push an update of some data over a live view connection from
Adi_Iyengar:
Gotcha.
Allen_Wyma:
the back end, you can push data just like you push an event using Phoenix channels.
Adi_Iyengar:
Mm-hmm.
Allen_Wyma:
The same thing is push event
Adi_Iyengar:
Right.
Allen_Wyma:
and you can push data.
Adi_Iyengar:
Right,
Allen_Wyma:
So
Adi_Iyengar:
but
Allen_Wyma:
that's
Adi_Iyengar:
I mean,
Allen_Wyma:
without
Adi_Iyengar:
you.
Allen_Wyma:
any interaction at all on
Adi_Iyengar:
Right,
Allen_Wyma:
the front
Adi_Iyengar:
but
Allen_Wyma:
end.
Adi_Iyengar:
you, right, but. So this was something that we wanted Frontend to react to, which I'm sure it can still do. But I think the problem was we needed to send it. The event that we push needed to talk to a component that can be updated using JavaScript. Right? So we had this JavaScript variable. that needed the updates to be sent after reacting to a front end and making changes to it.
Allen_Wyma:
So then,
Adi_Iyengar:
Yeah.
Allen_Wyma:
OK, so use the hook to start the process then, right?
Adi_Iyengar:
Yes, a Phoenix click or something. I guess.
Allen_Wyma:
So you can use so you use Phoenix use the Phoenix hook to then dial back into Alpine.
Adi_Iyengar:
Yes, so Phoenix Hook makes a change to an attribute which is hidden, right? And based on how that attribute changes, Alpine, there's also an attribute that the live viewer writes, Alpine reads those attributes and sends it as the hidden attributes through simple JavaScript. But since you could react so easily based on the changes with Alpine, it made it very easy to, like again, it took us like two hours to build that entire calendar library, which is pretty crazy.
Allen_Wyma:
Okay, I think I have I think I know what you're talking about, because I did do quite a bit of Alpine before. But I think you guys are the Alpine experts compared to me. I just I the best thing I could do is like the showing hiding was most of my work I had to do.
Adi_Iyengar:
Dude, you got me into Alpine, so... So yeah.
Allen_Wyma:
how you got me guilty. Yeah, but you outshine the master if you want to put me up that high. Yeah, I mean, what we use it what we use Alpine for is basically showing and hiding models and showing and hiding the mobile menu. What else have we done? We may have done some dispatching with it, but I can't think of that. But I think also like some, the other thing we did do too, is that we we we had a page that we had flask, I think you've heard of flask before, right?
Adi_Iyengar:
Bye, son.
Allen_Wyma:
So we have, yeah, yeah, Python. So we have one thing that we're actually slowly moving everything over to Phoenix right now. But it was originally written in Flask, and it was just a straight like page, we had the people to enter in some data. And so we just wrote everything with Alpine for like validations and stuff. And it was super straightforward, super simple, just tailwind and Alpine. And it was beautiful, obviously beautiful looking. And also it worked. And it made life super simple for us. And so
Adi_Iyengar:
Nice.
Allen_Wyma:
I learned quite a bit about how to do, you know, X data everywhere. And, uh, anyways, it was fun. It was definitely easier than working with Django and Flask and Python stuff. So that was
Adi_Iyengar:
Right.
Allen_Wyma:
pretty nice.
Adi_Iyengar:
Oh, one thing I like about Alpine is the X on. Right, so not the X show. Right. So just completely don't even render the element based on something. Right. So I think that's something I don't think the JS phoenix.liveview.js has yet.
Allen_Wyma:
Actually, the really weird thing about this Exxon stuff, right, is they also have like shortcuts. So actually Exxon is the at symbol, right?
Adi_Iyengar:
Yeah.
Allen_Wyma:
Yeah.
Adi_Iyengar:
Wait, is it Exon I'm talking about? Let me remember. I don't
Allen_Wyma:
So
Adi_Iyengar:
think
Allen_Wyma:
X
Adi_Iyengar:
Exon has
Allen_Wyma:
on.
Adi_Iyengar:
an add-on symbol. I think Click has one. But I
Allen_Wyma:
No,
Adi_Iyengar:
don't think
Allen_Wyma:
yeah.
Adi_Iyengar:
Exon.
Allen_Wyma:
Well, it's Exxon, colon, click.
Adi_Iyengar:
Right, I think I might be, oh, my bad. I'm talking about XF, shoot, I'm talking about XF,
Allen_Wyma:
That's
Adi_Iyengar:
not
Allen_Wyma:
a big
Adi_Iyengar:
Exxon.
Allen_Wyma:
difference.
Adi_Iyengar:
Yeah, I'm sorry,
Allen_Wyma:
Yeah,
Adi_Iyengar:
yeah,
Allen_Wyma:
it's
Adi_Iyengar:
I'm,
Allen_Wyma:
fine.
Adi_Iyengar:
yeah,
Allen_Wyma:
Yeah,
Adi_Iyengar:
uh...
Allen_Wyma:
well, that's how I use for showing and hiding stuff. Yeah, so
Adi_Iyengar:
That's Ex
Allen_Wyma:
if it's
Adi_Iyengar:
Show.
Allen_Wyma:
true.
Adi_Iyengar:
So x
Allen_Wyma:
X if.
Adi_Iyengar:
just shows in heights. xif doesn't even render it. So you have to use something called template as
Allen_Wyma:
Oh,
Adi_Iyengar:
element.
Allen_Wyma:
yeah, yeah.
Adi_Iyengar:
So that's a huge difference. We had use cases with Alpine where we did not even want to render something based on something and want to render it based on reacting on certain things. And I think this was super useful. And what it also does is it also, the variable that you're using as XF, it would call that. So it's a way for also checking that not more than one of the elements is rendered as well. So it was actually really cool, kind of like side benefit of XF.
Allen_Wyma:
So for exif, if you, I mean, I'm looking at the documentation. I see what you're saying now. There's a lot of stuff in Alpine, right? So you guys can laugh at me. I forget most of the stuff because I haven't worked with Alpine in a while. Uh, but the template XF. So if, if XF is true, then basically the template tag will go away and then you'll see that data there. Otherwise XF will just hide it. Right. And I think you actually have to, and if I remember correctly, I remember this now. So then x, if you actually have to write a class for x, if and say if this is if there's an x, if here, then display none or something, right?
Adi_Iyengar:
Class? No.
Allen_Wyma:
Yeah, for one, hold on a second, maybe not XIF then. There's another one here. Man, I remember this one. They said that if you, or Xinit, I think it is. No, not Xinit.
Adi_Iyengar:
Yes, well, XCentered
Allen_Wyma:
Is
Adi_Iyengar:
is
Allen_Wyma:
it
Adi_Iyengar:
also,
Allen_Wyma:
Xinit?
Adi_Iyengar:
you don't need a class for that, but that's also really cool. That's, yeah, that's also something we use very heavily.
Allen_Wyma:
man, what is it? No, one of these one of these you actually need because it's too What is the name? What for sure I remember this one. One of these you actually have to have something there. I think is it X cloak? Yeah, X cloak
Adi_Iyengar:
Yes,
Allen_Wyma:
is
Adi_Iyengar:
cloak.
Allen_Wyma:
the one
Adi_Iyengar:
Yes, cloak needs a glass. Yep.
Allen_Wyma:
Yeah, so XCLOKE needs a class. Yeah, so this is like when you first start off, you have to hide it, right? And then they remove XCLOKE once everything's been initialized. OK, see, you told
Adi_Iyengar:
Yeah.
Allen_Wyma:
me I was wrong, but no, I remember this. Because I was like, yeah, you got to do this.
Adi_Iyengar:
You were wrong about xif, but
Allen_Wyma:
But
Adi_Iyengar:
I
Allen_Wyma:
which
Adi_Iyengar:
don't
Allen_Wyma:
one? I
Adi_Iyengar:
know. Yeah,
Allen_Wyma:
knew it was similar.
Adi_Iyengar:
there is more x's that work well in conjunction with a specific class as well. But
Allen_Wyma:
Hmm.
Adi_Iyengar:
yeah, the xinit one also mentioned that's actually what we use. I was mentioning the live view part. It's really cool when you use that with xif, right? In that way, whenever an element is rendered, you can call a JavaScript function. It's so cool, right? If you put it inside a template, and put X in it on the template. Every time a template is re-rendered, you can call JavaScript function. It just makes life so easy. It's amazing. Anyway, I just don't see this getting replaced by Phoenix live view.js anytime soon. This is just, yeah.
Allen_Wyma:
Well, that's why I wanted to hear from you about what you can do, what you can do, because like I talked to quite a few people and they're like, some people said that you cannot even use like right now, Alpine is not actually able to be fully used with latest version of live view. I heard that from a couple of different people. Yeah, I see your face. Maybe, maybe there's something wrong. Uh, maybe there's it's been fixed. I don't know. Like I did see, I talked to Mark Erickson. He actually sent me a link a while back about this problem.
Adi_Iyengar:
running in production.
Allen_Wyma:
Um...
Adi_Iyengar:
We're running the latest version of LiveView and Alpine in production right now.
Allen_Wyma:
something like that. I have to check
Adi_Iyengar:
It might be
Allen_Wyma:
out
Adi_Iyengar:
a very specific use case on maybe the way they used it. Yeah, we have a pretty complex use case for the barrel stack with our couple of production apps, and it's running really well. At least I hope so.
Allen_Wyma:
Yeah, I have to check.
Adi_Iyengar:
So I think this is also a good kind of, not a good, but a decent segue into why not, when not to use PerlStacks and why not to use PerlStacks because we're also running a show on time. So Alan, when would you not use PerlStacks?
Allen_Wyma:
Oh, when would I not use pedal stick? I mean, if I just wanted to render some HTML, I obviously wouldn't be using Petal Stack. I still tend to actually like using what they call dead views for most things. I feel they're pretty simple to use. Dead views is basically the opposite of a live view, right? So
Adi_Iyengar:
Got it,
Allen_Wyma:
controller
Adi_Iyengar:
got it. Ha ha
Allen_Wyma:
with,
Adi_Iyengar:
ha. I
Allen_Wyma:
they
Adi_Iyengar:
never
Allen_Wyma:
call them
Adi_Iyengar:
heard
Allen_Wyma:
dead
Adi_Iyengar:
that
Allen_Wyma:
views.
Adi_Iyengar:
before. Got
Allen_Wyma:
Really?
Adi_Iyengar:
it, I like
Allen_Wyma:
I
Adi_Iyengar:
that.
Allen_Wyma:
always heard that from Chris, from Chris McCord.
Adi_Iyengar:
Yeah, I have been not plugged into the community because of my startup for last year, but dead view, I love it. Yeah, awesome. Makes sense. Yeah, I think I mentioned it before. Most of our live views, actually all, but with an exception of two, we use it. We live render the live view in a template that's rendered to a controller. So the live view doesn't have a route in the router. We don't do this. I think it's called live mount or something. We don't use that. We use actual control session. And every time Live View gets updated, we check the session. I didn't, when I started building this, I don't think we had like the live session stuff. It wasn't ready. The new live session that allows you to check session in Live View. And I was scared that with healthcare, you know, if you're updating data real time and someone signed out and stuff, we don't want to push updates anymore, right? We're gonna check every time if they're logged in or not. And then also, allowed us to implicitly add a logout as well, logout timer, auto logout. So it worked out really well for us. LiveView is great for that. LiveView is also great for a loading page, very lightweight, very simple loading page. LiveView was great for that too, like a dynamic loading page. So yeah, those are great. But I think besides, you're right. If you're running a very simple HTML, Yeah, go the regular control route. Don't even use Live View at all. Tailwind and alpha, I just am quite married to those two. I don't think I will. I right now don't see a reason to ever use anything else unless someone forces that on me.
Allen_Wyma:
Yeah, since I started working with tailwind, yeah, I can't imagine I'm trying to push on other people right now. But takes time. Like I got one project with this tons of CSS classes everywhere. And of course, we're using SCSS. And it's huge. And people are keep complaining about it. So I've been trying to push them in that direction. So they start off with semantic UI, and they're just overriding classes right now. So I showed them there's something called Headless UI. Have you seen that one? It's basically like super simple, like React templates. And they're basically plain and they're waiting for, they're made from Tailwind Labs, right? So
Adi_Iyengar:
Nice.
Allen_Wyma:
they're made for Tailwind. So they're supposed to be like super simple to style, I guess, I don't know. So
Adi_Iyengar:
ankle.
Allen_Wyma:
I'm gonna push them in that direction
Adi_Iyengar:
Very cool.
Allen_Wyma:
eventually.
Adi_Iyengar:
Awesome. See, I knew I was going to get a lot of bookmarks. I got six here. Great. Awesome.
Allen_Wyma:
Well, you want all the practical knowledge, right? So this can come to you with some practical knowledge. I mean, for me, I just read everything and master of reading and practitioner of nothing, basically.
Adi_Iyengar:
I mean, that's important. It's important to also get, I mean, you only get practical knowledge after you have theoretical knowledge. Yeah, super excited to try all of these things out. I was going to say one more thing. Yes, one thing to consider with LiveView, it's not relevant for 99% of the cases, but is scale with WebSockets always something you should keep in mind? We reached, I think, 60,000. concurrent users at one point, and it started giving us troubles. We had app signal monitoring our P95s, and they were exceeding 800 milliseconds. So it really sort of never crashed, thanks to Phoenix, right? But the load on the server started exceeding, and then, hence, load on the database started exceeding because of the nature of how LiveView works. Because of the way also LiveView is written, you can use a different adapter. You could use already built adapter for polling as well, and for a certain very heavy load and decrease the polling interval. That might be better than a WebSocket live connection between every client and the server. Another thing which might be even better might be building an adapter, which we did for LiveView, which is a combination of WebSockets based on server load, loading, and caching. So It's very easy to build the way LiveView is built. It's easy to build an adapter and do stuff like that. We haven't yet had a chance to release this adapter-based version yet, but I think it'll be ready in the next two weeks. But anyway, that's also something to keep in mind. It's something I was asked during the interview when he would not use Phoenix LiveView. And this was also one of the answers that they found insightful. So yeah.
Allen_Wyma:
Yeah, like you said, not you mentioned it, because you do get like double page loads, right? So for like, they could be like, if you had like 1000 people during the same time, like you said,
Adi_Iyengar:
Right.
Allen_Wyma:
could pommel your database.
Adi_Iyengar:
Yep, yep. Yeah, I mean, I think, again, Phoenix and Poolboy, what Ecto uses to manage their connection pools together, are very, very robust. So even though you have 20 connections, you can probably handle 60,000 concurrent users. But as you start going to 100,000s, millions, you would have to start considering. I mean, WebSocket is just not the right solution of that. A live web socket is not the right solution. You might need some kind of caching or some kind of way to balance that load. Yeah, Phoenix, I'm sure we'll hit that soon. There's some big companies like Discord is thinking about LiveView for some of their features. And there's a couple of the startups, big time startups using LiveView. As these companies. grow and scale at they're already in the millions as they grow more. I think Phoenix team will start thinking about these problems more and more. But that was again, an interesting experience because it's the first time I built a live view where we had more than 10,000 people use it in a day.
Allen_Wyma:
Yeah, I had an issue with live view when it first came out where it wouldn't force like if it reconnected, we wouldn't force a full page reload. This was like way a long time ago. And I built a feature for a client with it and they had it like on their computer. And yeah, anyways, so that was the issue I had. Okay, so we should probably transition over to pics. You have a pic.
Adi_Iyengar:
I don't have a pick, actually. Yeah, I mean, I have an anti-pick, like something to not really, I'm going to really encourage you to not give it a try, and somewhat of a pick. The anti-pick is the, oh my God, I even forgot the image so bad. The Lord of the Rings TV show on Prime, I finally got a chance to watch it. What's the name? forget the name. Don't watch it, it's terrible. That's what I just don't watch it, it's terrible.
Allen_Wyma:
Did you pick it? Is that what I hear?
Adi_Iyengar:
That's the anti-pick. Don't watch it.
Allen_Wyma:
Sorry, sorry, the anti-pick.
Adi_Iyengar:
Yeah. The pick is actually one of the other franchises reboot kind of is House of Dragon, which is Game of Thrones reboot on HBO. So watch it. It's good. And save yourself some time and don't watch the.
Allen_Wyma:
Okay. So, arty's got a hop off. But my pick is, I'm actually in the process of writing some material about the pedal stack. Again, this is kind of not really picked out from before. This is something I've been working on for some time. Just so happened that when I came back, I had I'd worked on and found some cool stuff with pedal stacker. Sorry. I found some really cool stuff with tailwind, and I was talking about it. And he got excited. He wanted to talk about, you know, tailwind and stuff. But again, so I'm actually writing some material about pedal stack. And in order to kind of get that out there, I created a website for people can sign up and be on the mailing list. And I'm going to start sending out some of that material to people. So if you're interested in pedal stack and kind of what we talked about today, of course, with some definitely more. Put together more clear. about how you can use pedal stack. Go ahead and sign up. The link is the pedal stack.com. So it's T H E P E T A L S T A C K calm. So if you're interested in hear more about pedal stack, go ahead and sign up there and I'm gonna start setting up some material pretty soon. And with that, arty is already gone because something to do. And so with that, see you guys next time. Thanks. Bye.