Trying FluxonUI: UI Components for LiveView

for for uh uh hey folks how you doing is it just me or are you already folks are you already looking some people here is it just me or are you already excellent everything's excellent all right can you see this let's see how you doing twitch twitch running YouTube running all right let's go to flux on all right oh yeah a I always have to remove my zshell history before I go live because I have this Auto completion thing and it just shows you the old commands I use together with my like license key and everything so yeah all right so today hiy thanks for joining Captain Gully uh if you don't know already what uh fluxon is fluxon UI is a component library for life you and I've been waiting for this already for quite some while like Andre he he announced it like yeah four five months ago and I saw it and already back then it looked really cool um not sure whether he works together with an a designer or whether he is a designer himself but all of these components are just incredibly welld designed so I was really excited about that and uh he launched it just a day or two ago it's $150 $149 so it's kind of like Tailwind UI half price but I think it will be worth it I hope it will be worth it so I bought it uh right away uh oh cool had a bit of play this morning it's really nice cool good to hear that let's see whether we can reproduce your findings um yeah I I you know you Al they also have docs here so you can actually go through all the document all the components and it's just it's just really cool stuff I mean here things that you know I don't want to implement myself over and over and over again and I couldn't even make it so nice as andreal did it here like a let's see like an accordion for example you know and then you have like one but if you open the other one you have to close the other and it's a whole yeah there's so many so many things so many details and then even if you want to like a drop down yeah and then like you see the animation or maybe you don't see it but there's like slide you know phasing in animation um just cool stuff yeah let's see what else and also not sure whether you heard that but they removed the modal from uh the Life View generator so if you generate a project you don't have a model anymore um yeah and this one actually it's also much nicer model yeah one thing I would love to see is some of this components referred to state would love for the website UI to support changing the state tables this are good examples what did they uh yeah they removed the model now I think with the latest Phoenix version because they didn't I don't know actually we can we can actually generate a new project maybe it's already uh it's already merged um but yeah they removed it hang on where's GitHub GitHub Dark Soul s so just the other day they they merged the model so I don't know what they use now here the simplified life generator August 16th um yeah there was a whole discussion but basically y says and he's right I mean he says they don't use the modal component anymore in the generator so let's just take it out let's just remove it and you know makes sense to be honest sorry I'm little maybe I'm louder now hopefully you can hear me well okay um yeah so let's see so this already merged in is it already in attack maybe it's already right there one of these things can you can you see that on on uh thank you loud and clear yeah core components is large and if you have like a component there that you don't use why why you put it there and and support it but again that's also uh like Brian um cadella from dockyard I had him in an interview and I also ask him you know what does he think what should we what should we improve in order to make elixia more more approachable and to you know increase adoption and he said there should be something like a you know like we should have more components that you can use in life view just out of the box so you generate a life view uh project and then you have all the things you would need um but yeah I don't think that the core components thing should be doing that like all of the things right but there's so many so many components you might need so I actually I think fluxon although it's paid it's not free but I understand I mean this actually takes a lot of work um and just like Tailwind UI it's one of these things you buy once and then use it everywhere and it's going to every single day you're going to get value out of it so it's I think it's it's perfectly fine and $149 I'm happy to pay that amount because I work every day you know build uis every day with these components hopefully in the future so it will be more than uh valuable to me uh but let's see whether it's worth 149 but what I meant is with the model is gone so want I want to find out actually in which release this is and I'm not sure whether the GitHub allows me to do that really which is always one of these maybe it's in the change lock change lock model yeah once 72 probably they removed it here no that's in 2023 no okay yeah the last release is in uh what's that May June easy purchase yeah okay well actually I would be interested to see now but we I mean we would need to pull it directly from GitHub but I would be interested to see how they actually do the the editing part uh where is it mix lip mix like when when you generated a new rout like a live view and the you at the table and then you had a like a button to edit a record and I think they removed the model for a new site so you actually patch over to a new uh side so task and then mix gen live and then here they use form which are the templates they're using yeah maybe it's not that important oh here the user life form case well here anyway I think the unpr oh thank you yeah Pro templates right on uh live form here we go and this is a live form ah it's a live unit now okay so it's a whole yeah and it's a simple form and then navigate back hello thank you for joining and uh it's edit new and what happens if you do edit it assigns the form does it send you back or something here save it navigates back yeah okay so this is the whole they removed the modal uh it was a component I yeah I believe so too actually the form was a component now was a live view so I think they they removed the model and they just sent you to a completely new side when you edit a record and instead of this pop-up model you know which I never really liked anyway to be honest like it it was you know yeah I always replace it eventually with a with a custom route and a live view like this because eventually you always need to add some extra validations or you want to have some extra information and just the mod is you also can't I mean you you can kind of navigate to the model but it's kind of weird um so actually now having a second life you I appreciate that choice but yeah that means now that we don't have a model anymore however fluxon actually has one for us so that's pretty cool and they have like a Max width fixed width full width okay and also love the animations and all of them you know it's actually like they come in they go out all that kind of stuff all right uh what else sheet oh that's also cool open sheet yeah from the side man this is just I've been implementing this I don't know 20 times now and every every single time I get it wrong because you know you have to like you have to hide it and then you have to slide it into the into the window and then you have to slide it back and you have to change the the position of the sheet that's basically how you do it like you position it outside of the the window and then you slide it in and then you slide it out every single time I got it wrong and also what he has here with this like slightly uh it gets darker right when you open this like to have a focus there and that's just the cool stuff like this is next size so you have like a Max a fix withth and a full sheet even okay I think he also had like a bottom oh yeah and you can even change the uh the animation that's pretty cool slow ACD oh okay custom backdrop yeah full blackout very very nice stuff and yeah also you can do like a btom sheet and that's I I tried it on the on the phone and this actually looks really cool on the phone when it slides up from the bottom and then you might have like you know a button like do you want to confirm this action and then you slide it up from the bottom and you just with your thumb you press confirm and it moves on it's it's really really cool yeah um a tool tip man I I have pulled in every single time I pull in a j a JavaScript library to have a little tool tip thing and then you also have that like you know when you go like you want to make it selectable you want to actually like continue to show it even if the mouse doesn't hover over the icon anymore so there's all this these little details this is really cool stuff you can even add oh man an image a text even an element God this is so good placement top bottom right left favorite delay okay yeah if you need that this is really cool stuff well I already like went through it a long time ago input yeah with a description every single time I had to change my my core components you know and add like a description thing and I had to every single in every project I had to do this again so good oh you have a description and you have a help text that's also cool like the help text is below and the description is in between very nice small input large input disabled input interesting I I don't he doesn't show in the docs here how he disables it maybe just setting the disabled element right yeah okay well oh also what's this ah the placeholders okay oh yeah nice like this little icon here to to show it in the correct position that's also not easy to do it's like an absolute thing but then you if you if you positioned absolutely in the left corner you have to push your text a little bit to the right because you know it's it's an absolute thing so you can't actually like you always have to to push the text menual and just to get the spacing right it's just it's just really hard like the https thing here you know and that it looks still looks good and then looks good on different screens looks good on uh on on mobile like if I if I move my my browser window like you can kind of see that the the distance always stays the same where is it now yeah even on small Windows still looks good man this is really cool stuff right they're really cool yeah this is something you could really spend an hour or two on just to get this thing right and here's just just do this and then you do uh what's this in a prefix it's a slot awesome so so cool out of prefix okay if you want to actually ah man how many times did I implement this with the with the money where you have to select the the currency like I literally I never implemented it because it was too difficult I just just said it doesn't matter just make them make the people choose you know do like EUR one 12 three and then um uh money on the back end they actually they actually will pass it for me you know or like a dollar sign and just make a Dollar by default but by having like an an explicit uh picker it is it is something you expect right but it's just so hard to implement my God okay nice button inside the input yeah all right cool uh one last one switch date picker would be cool as well switch okay toggle with the label different sizes disabled all right colors nice oh yeah there was one with the badges that's also really cool every single time I had to copy paste the Tailwind UI code the CSS code to my project because I needed a badge and then you need it in different sizes you need in different colors and it's just like a whole every time every single time I copy paste 20 lines of code into my app CSS and then you know you also have to create like a batch component this is so nice beautiful and with little icons and then also that the icons actually uh get the same color that is also not easy yeah beautiful all right let's get started uh I already added the fluxon um repository so I believe but I don't want to reveal here I don't want to reveal my my API key so um let's do the following terminal uh we go to development uh PM code and maybe let's do yeah Phoenix gen H Phoenix new right and we call this flux on just flx on just you know to to play around with it that's that oh this to be small okay all right well what's your so you Captain Gully you said you liked it so far uh like have you built something with it already or just like played around a little bit because I'm still I'm still curious like how does it work in in production you know um cuz sometimes you you might miss like a configuration that you need like customization exactly for your use case all right um creating this and yeah let's start the Z here I need to make this bigger for you so that you can see it all right so now we got to mix we got to dependencies and yeah I'm going to add it just below here let's see whether we can fetch it that looking good okay then the next step is to add it to our HTML helpers in web so our HTML helpers are down here oh I named my thing flux on maybe that wasn't smart playing around with it have worked in PR and yeah yeah I think this is one of these things hopefully it will become mainstream you know that everybody just uses it like Tailwind UI which is a no-brainer um yeah hopefully this will be the standard for everything yeah you're right ah man okay let's redo everything we remove flux on we do mix Phoenix new and just call it flux smart smart smart smart choice let's do this again yeah and then otherwise so we we import it basically use flux on and then we need to add it to our package and we need to add it in the Tailwind and uh some more hooks this is also going to be interesting probably this won't be needed anymore maybe who knows um because they they are thinking about collocating hooks so right now you need to Define Your Hooks uh globally you know for the entire application but that doesn't make sense I mean why would you import every single H hook into every single website right into every single page like it's much better if if you would open the page and only then you would load the the hook um and they're thinking about collocating those hooks with your templates but they don't know yet how they will do it but I I heard quiz talk about it couple of times already so I think it's going to happen and yeah so maybe in the future this won't be needed anymore because you can in your component you can import that hook and maybe we don't need this anymore so who knows what the future holds okay yeah yeah you know it depends on how the the logic will look like but I a damn it uh I'm pretty I'm pretty sure that uh this will be good all right so we have now let's go to flux ah P code and flux wait where is it set fls right and this one we can remove all right now we have this now we can go to mix and we add the dependency let's fetch it okay uh then we addit to our HTML helpers in web HTML helpers right yeah so in here use flux on next one we added to our package Json I don't have one if the file doesn't exist created all right in assets yeah yeah I mean you only need it nowadays when you import some third libraries right some third party libraries and also only through mpm or something like otherwise people just put it in the vendor um folder and then you import it in your appj in your appjs here like this actually I like this approach but then you have you know it's not as easy as just running npm in store but who knows all right we got this uh next up is this one in Tailwind config here and that needs to be in the mobile mod jez module exports content there yeah okay update the sjs appjs over here and we add Hooks and flux on hooks but we don't we don't really have any hooks yet so we're just going to add the flux on hooks and on before element updated this needs to be all of this needs to be added D on okay um what what does this do hello from Brazil back to hello back to Brazil I hope you're doing fine I kind of want to understand what this one does flx on so let's go to Fon uh lip I guess D now that's the r static yeah oh okay just a okay it it does do some stuff when like before you update the element tries to get an attribute for the list box or pop over okay well all right I will just trust it to be to behave and that's it right conflicts with Phoenix core components so some components share the same names you're starting a brand new Phoenix project and plan to use only flux and components you can remove the conflicting functions from the core components module okay let me do that so all of these yeah but all these I need to delete I guess so if we go to core components and we look at the model yeah I guess this one needs to go you know this would be nice for an igniter task salad UI what is salad UI oh man these names oh it's for life as well okay a demo let's have a look at the demo huh not too bad okay they also got all stuff accordion yeah how was your uh how was your experience with cellid UI I never heard about selid UI I feel bad form come on show me the form oh okay we at a 500 menu does it actually scroll area Okay sell it UI but it's still what it's still being worked on interesting interesting also lots of stars why did I never hear what CI funny okay and it's also open source so all right well going back to fluxon let's try let's finish the implement the the thing here so we need to do def B needs to be remove what I wanted to say earlier is that this would be a great igniter task you know you just write like flux so on install and it adds all that kind of stuff and it also removes the core components if you want to that would be really nice uh yeah Mishka yeah I looked at Mishka I don't know I haven't yeah Mishka tools this one I mean I like their approach that they have these components generators and then if you need them you can generate them otherwise not uh I just wish that they were better that they were better styled like I don't I don't want to style that stuff myself like not to to a large extent at least that's my my take I mean I want to be able to customize it if like just add some own classes and stuff right so that's important but on the other side I also don't want to I just want to have a nice default experience right and I do the same with Tailwind UI like if you just add a Tailwind UI whatever to your application it looks good it looks great you don't need to do much about it right some padding here and there or some whatever uh some positioning but that's it like otherwise you can just deploy the production but if you want it you can obviously change all the values you can you know you have all the classes in your template right away um so that's like that's what you want you want to have a a very nice default um well an acceptable default um presentation and then if you want to extend it it should be easily possible so like with Mishka the the first step is kind of missing you know like the like at least for me I don't know like it it depends on what you want um some people also they want to have a bare bone experience and they want to style everything themselves which I understand as well and maybe for them this would be a better approach right yeah anyway uh back to the installation sorry Mish yeah yeah the excellent Baseline of styling that's what I meant I mean also if you look at the Docks you know just how they look like they're really nicely designed and I think that's also a big selling point you know like just if you go to the main page here it's just it's really welld designed like Bento boxes you know and some nice stuff and you really see this person has an eye for design right and then i' rather buy something like this you know which also cost money um but yeah there's also this funny thing where I think the colors on Phoenix they are pulsing you might not see it on the screen but it's like they they are red to orange like there is a a heartbeat in it it's just I mean okay maybe if you build if you build an MVP you know this is overkill but it's just something that I appreciate as well yeah all right uh sorry we need to remove the def input H which is a big one actually let me just go out so that I can catch them all uh input starts all the way up here and it goes all the way to down there label as well error as well and table where's table here's table all right good I think we got them all let's uh form it oh oh what's this all right this seems to be all working correctly yeah the gex thing is always a thing uh it's going to annoy me so I'm just going to do use back end gex back end and then a web whenever you do import looks web get text you need to do use get text backend all right I think that should I think they also fix it in the latest generators yeah okay uh so we remove them and that's it right now we can you can access a specific component oh well if you have the conflicts okay so now we can just use in put and button and whatnot so I would say let's do that let's uh let's first start this thing I hope it's working wait yeah I need to set up the database okay start the let's go to Local Host there we go all right and well also another question right do these components work in uh static Pages or is it only live view should we try out let's do which maybe a codion because accordion is something you would actually put on on a landing page which you might render statically so let's try this one on here home uh where is it here home boom okay just all right yeah they still work that's nice although the The Styling isn't I would have expected a better styling let's see whether we can make this better I think yeah I I actually enabled emit the other day or just now actually because I read this article about how to set up zet my editor um for Hees templates and now I have EMT where I can just write if do uh which Full like full weth and I want to have it MX Auto and I want to have it uh background gray I just black man this is so this is going to save me hours of my life this is so cool all right okay this is working and it kind of looks the same right so then again my question here is also what are here customization what are the customization options I have and let's see what we have we can add class here actually we can add class everywhere um yeah I wanted to do I want to change the text because I'm thinking like does it actually re uh does it respect the text the font family that I'm set setting CU if I would have some other text like here above wait this needs to be yeah not sure whether they you see this but I think it's the same font family it's just that this is slightly Gray yeah it has like a slight gray um but what's the font family here it's just inh herit here wait and which one is this right this one is using the system UI UI sense s how how you want to I think this is the same but it says inherit what where does it inherit it from yeah okay but I think they're the same font family so if I would set a global font family then it would actually respect it that would that would that's good yeah all right but already here like we don't want to have this this text slightly Gray [Music] um can we go to an accordion can we go here to the whole accordion and say text uh just white I think no this this does did not override this is still gray yeah this is dark gray so do we need we probably need to go into every accordion here item instead of there yeah that fixed it I think no it hasn't so we need to do it in the header I'm just going to make this red to make it more clear also oh why is it not respecting my text what's the refund policy here sometimes there's a Tailwind issue No it should be fine oh all right strike one complaint one why is the the text not overridable because it's a it's a slight gray and I want to have it in a different color right I mean sometimes you want to have it a bright white I mean also you know dark mode uh I probably does it support dark mode what if I change the dark mode here well it changes it okay so it's styled for both right might need to wrap it in a span or something oh so you mean span text green 300 right yeah okay that worked all right yeah you're right I mean it's just you know it's it's all right but you know I'm sure that the header component it sets a text Gray whatever 700 and I just want to write that you know but then yeah it's also a Tailwind CSS thing right where like you have one class and then a second class and I think I think the the last class overrides the first one I think this way so it also depends on where you you add it oh I think the issue here is actually that I gave this um that I didn't make a dark mode so let me try dark I believe yeah now it works yeah I think this is issue because my system is set up for dark mode and that's why also the website here expects the the website to be in dark mode so it it uses the system setting um and that's why yeah it used actually the dark mode color like if it would make this white probably doesn't have a different yeah then I can't so yeah it it listens I mean this is smart right so uh like I could actually very easily Implement a dark mode um bright mode for my website and fluxon would just do its thing and I don't have to do anything about it yeah strike was sended I'm sorry about that it was my fault but it is something you have to keep in mind because if you develop like if you were a developer and you set your system to to uh bright is it white or or dark and light I think light mode right that's the other one so if you set your system to light mode and then you start developing your app your website and you're like oh everything looks great right and then you ship it to your your colleague and they actually use a dark mode on the system out of a sudden all these colors will be wrong right and and like because this I mean this we always need to overwrite for both modes because now uh I'm not sure how to change something to dark mode do they maybe they have something with that dark mode light mode no customizing yeah yeah that's just something you have to to keep in mind and I'm not sure whether I'm it's great to have but also I'm not sure whether I'm happy with it because I would rather like that they give me one color one text color and it it's both for light and and dark mode and if I want I can Implement a second color right um because for me I I think I've never once implemented both versions of a website I don't care like I make it dark or I made it light and that's it right and like I don't want to waste quote unquote the time on dark light mode so with flux on it's great that they have both but now right I mean this this is a this is um a pitfall because I would expect well you know this is all I need to just style this color oh I can't so I need to add this one as well and now it's styled and I I want to be in control of that you know I I don't want to have to to do the dark thing here so maybe that's I don't know I'm not sure whether that's something they can set up globally uh but I I think that that's something they would need to fix right because that's going to I can tell you really that's going to be a pain in the ass but it's all right I mean it's what a it's been two days out of it it's been two days um out of beta or Alpha I mean I wasn't able to get it before so now it's public right it's been two days I'm not I'm not judging but I'm just saying this is something you know uh that would need to be fixed all right uh now we figured this one out and uh yeah also then you know if I wanted to change the text I would need to go here do the same thing again and now it works all right okay so if I wanted to make this a text extra large and this text small does it work looks like it yeah okay so maybe this is better for you to to look at uh right there we go all right well but this is already pretty cool because also if I open one the other one closes you know that's all this functionality hello Comm seus okay all right uh yeah I like this part what else what else can we do um does it set a background that's also something no it's fine like just sometimes these components they always set a background for example in Tailwind UI you see that uh where every single component it defines a background so you would copy like only one part of the landing page like the hero section and it would have a dark background or white background and I always delete those because I want to control the background from you know the higher like a a parent child parent child a parent element right where said like background white background gray whatever and then everything else below should just have a transparent background so that's something with Tailwind youi that you know it makes sense because like they want to have kind of compact components they work everywhere exactly like how they look like when you copy them from the page but you know that's something that I don't like um I just don't like but I I understand it but I just don't like it but that's why I checked here you know how how do they do it uh especially if you actually set it somewhere else for example up here well we already set it to Black so I guess it it's it's working yeah they don't have a background okay all right uh let's do something else we have an accordion okay we we understand that it's also cool that you can set every single item like not only the slots but also this item I could set you know I can Define yeah and then the accordion in general wow okay I'm sorry for the for the I caner today I'm not a very good designer but you know I'm just testing out stuff I I want other people to design it for me and I just use it okay cool nice so yeah I I like it that you can override right like that you can add a class item to every single element you're adding here okay good accodion I think we had enough about accordion uh let's have a look at the I want to have like a slider or something I have a slider no okay it's it's not really like an essential anyway enough list yeah n list is good interesting I mean why does it look different here why is it rounded is it again dark mode no hello serpent ah okay it's it's actually round I just had it full width that's why you didn't see the the rounding here yeah that's another question um if you if what kind of rounding um what the radius do they use is it rounded LG or something because then if I would have my own custom elements and I wanted to have a different rounding um radius I always need to update those let's see you know at least if they use one type of rounding radius and it should be the same in every single element so if I go to like an input for example yeah it it kind of it kind of looks but I don't have a form okay let's let's take this one add it below yeah uh so we just add a form here Fork form there and let's give this a background black as well so that we can see it let's make it a hole let's make all of this black and full width yeah these radius uh these like um border radiuses I think they look the same yeah you know that's one thing and that that I like I like about the approach from Mishka the other um UI component Library I like it that they generate the code and added to your project and then you can actually change it yourself because if I wanted to now change the the Border radios for all flux on components I would actually yeah copy paste it every single time I I use the component here right like I would need to add it well here like description okay class rounded and like full or whatever yeah okay that works I mean it's just it's just it's two different approaches right what was the other name uh Mishka right Mishka yeah misha. tools you can check it out there and actually the the author is in the chat as well if you have any questions I haven't checked one this one out I haven't checked this one out yet but I will in the future but yeah this one actually generates the code I assume but I I think this is just you you generate it and it's added and that's it which is cool like that's more the Tailwind UI approach where they actually give you the code and um maybe maybe fluxon should think about that too like I mean I like that you just you know you you call the components you you you add the components to me to my application but like I think Tailwind UI is also so successful because they allow you to just copy paste the code code into your own application um and it's easier with them because they don't do JavaScript you know I mean they do use react and view like you can copy react and view code but they also just give you plain HTML if you want to and that way like first of all if Tailwind UI Tailwind UI or Tailwind CSS would ever go away for whatever reason you never know I would still be able to use the code that I bought 10 years ago and I can even download all the code from Tailwind UI and have it on my computer that's it with flux on if the server would go down and I can't fetch the library anymore all my UI will be broken right uh everything will be gone so I know it's like but you know that's something you have to think about when you want to become the the go-to standard in the in the ecosystem and I think that's what they what they intend to do and that you know again it's like this is easier to do this is super simple you just add one line of code and you have all the components in your application but again it's a what is it called um well a dependency and it's a man I'm not it's it's Friday afternoon Friday evening already so my brain is a little fried but uh what's it called single point of failure it's not really single point of failure but you know what it is like a dependency on something right and if they go away your system is broken so something to think about in the future right I mean I know it's going to be difficult with the uh with all the interactiv interactivity like the hooks and everything right but stuff like an input yeah stuff like uh here this like the navigation list I don't I don't think they they really have any interaction here except for uh CSS right all of this is CSS uh I do get yeah okay that's true I get access to the source code I mean it's it's right here in my in my dependency folder uh here flux on so if I wanted to I could actually copy paste this you know put it into a private GitHub repository and then I know I will always have it you know Point fair point however there is the other thing you know if you if you add it to your mix dependency um well okay I think if fluxon would go away right just you know hypothetically and there are a lot of people depending on it maybe they would say fluxon would say you know what we're going to open source it it's on GitHub now and maybe on hack and then it's fine people just you know change the the the ver like the version here or they you know they literally just need to remove the repo looks on and it will then fetch it from hex do Hex pm and then it's going to be fine right so point point taken uh or Point given so I I think that's going to be a big problem the the other thing you know which is just it's a decision which is if I would have all this code in my core core components uh module or somewhere else lying around I can simply you know select all rounded LG and change them to rounded XL and and then I can you know don't have to add the rounded the radius on every single element every single time yeah yeah again you're right it should be I could also edit my own as a GAA repository I could even make it private but then I would need to log in every like in my CI and everything you know they're just like some considerations um but I personally maybe in the future I would like to have a task where I can say you know uh flux on generate component and it gives me the the code like in core components it just adds it here and then I can go in and say uh all right so I use whatever background Emerald or rows right like for um for arrows for example and I don't want to have those rows I want to It Whatever Violet I can just do it here so that that's the Tailwind UI approach and I I also like that one anyway just many thoughts thoughts thoughts thoughts all right moving on uh okay let's let's move the description to a help text boom this is so nice honestly I love it so much it's just you just change one attribute and it's exactly in the right position with the right distance and everything uh one other point here though like in terms of customization there are things like if you making an attribute right I mean many of these things there are slots like the header and panel these were slots and I can Define and I can customize them myself and then you have these attributes like help text for example and description actually if I let me add both right uh and also let me give this a little bit of space okay and actually let me what's this also okay now we can actually see it so one thing here what if I wanted to change the distance between the input and the description or like the help text on the description right because this is this is quite a lot of space I mean it's welld designed all I wouldn't like to to really change it um also I wanted to just take this away so it looks a little bit nicer yeah but still like you can also see that the full name sorry I just have a frog on my throat all righty so what I wanted to say is like these uh these attributes are really useful and they're quick to use however what how could I now change the size the text size uh the text color of only the title you know I want to make it bold I want to make it Excel whatever I'm just saying what if I wanted to change the distance between the description and um the input actually this is a help text so right so I don't have the options to do that I think at least that's my understand like when I when I look at this the input and it has the it has add-ons but not this uh customization yeah uh just to be clear like I I love this I'm just saying you know these are things that that go through my mind when I when I evaluate stuff like this like how how easy for me is it now for me to change the distance here to change the text style of this you know maybe also this because now the issue is um you see that this for example has like a slight gray and this is a more white gray so there probably like gray whatever six um wait this way around this probably like a a gray 500 and this is a gray 700 or something you know but now I'm I'm on light mode like how do I change the color here if I just change it here like Tex uh gray 100 for example I don't think it actually changed anything and probably that's because I always need to add the dark mode no didn't change anything right see what I mean no nothing's changing yeah um that's why I rather like the slot approach over the attribute approach and and you can also make it um either all you can you know you can give this option and it's easy to use and it's very quick but you can also make it a slot and if the slot is defined then you use a slot otherwise you use a label um because yeah I would love to now be able to go in here and say well this is my input so it's closed open and then here I have my slot and my slot is going to what is this the ah so for example the description right and I say this is a description is description and I close it maybe it's possible no it's not possible no yeah because it doesn't Define the slot but this will be my preferred approach and I also understand that for the author probably to get this out the door quicker they opted for the attribute approach which is fine like it works but you see the limitations already right um and I would like to see in the future slots for everything everything should become a slot uh because that is how you make stuff customizable yeah so now I have that issue right I wanted to make I don't know all of these like for example my uh here my background is white oh yeah but still I'm a dark mode you know it's like the browser thinks I'm a dark mode but I'm not how do I change this color maybe if I do it here nah doesn't have any impact also this this didn't have H wait maybe I need to do the dark mode again no doesn't have any impact all right so yeah this only works under certain circumstances this because you know also this is a black background but what if I have a like a slightly gray background yeah this will become less and less visible and then if you use something like the wave Elation tool which is for the uh accessibility it's already going to give you very low contrast issues yeah especially here yeah all right enough about this though I think I made my point okay all righty what else do we want to see maybe something that is animated so a sheet we talked about the sheet earlier and I was blown away and I want to have it I want to have the bottom sheet where is it [Music] placement was this a button sheet yeah there we go so this one no bottom sheet doesn't need to be any no just like this where is it oh wait so probably need a button yeah I need a button to trigger it all right uh again let's have a look at this so it's a sheet it has an ID and a placement which is bottom top left right okay and has a minimum height of 96 that's great and then I have a buttom sorry a button that has a data dialogue trigger and that one triggers the sheet too that's cool too yeah all right so if I press the button it pops up all right let me try to change the text ah worked that's cool Ah that's so nice ah it even works with Escape ha so cool uh how else like if I click away right yeah also goes like if I click somewhere else it closes man all these things amazing I love it let me go back to black here this looks weird okay well next up we have the bottom sheet let's have a look at the what's an alert oh is that like an alert on the top right really okay let's add all these that's a question like can I can I re exchange my um My Flesh for these My Flesh alerts probably right let me just add them here yeah and they go away very nice um so yeah they're gone and if I refresh the page and they're back in yeah let's let's try this one out in the live view because it's always the hardest thing to uh you know click a button you want to show an alert and then you click the same button you want to show again an alert that's actually something that is uh broken and surprisingly a lot of applications because also I think the the implementation from uh from live view itself I think there's a bug I I don't know exactly um but I can show you like if you if you have that issue where you you want to trigger a live uh sorry a flesh multiple times in your same live view I think it doesn't work or at least I had to fix a couple of applications the other day that actually were had that issue so maybe it's it's fixed in the in the default but let's see let's make this a mod no not what is a macro op interesting m a private M okay all right use flex VB live view and I'm gonna no I'm gonna I'm G to collocate let's collocate let's collocate baby heeks okay and I'm going to put all these Els in here and I'm actually not going to do that I'm just going to say uh hello world which my cool new emit things which are amazing font b h world world and we need a button to trigger oh does this also work with no that doesn't work okay button uh Fenix click here show alert alert and show alert all right and in here we're going to do render handle n alert and we're going to put a flash socket error alert okay so and we going to add a router all right so now if I go to Local Host alert all right show alert yeah first one and again it doesn't show a second alert I click the button multiple times it only shows one alert I think it's always the same and you have that situation right where like somebody might trigger different things so they might click different things and you actually want to show multiple alerts and that does doesn't work here and also the thing I I don't think it actually goes away by itself I always have to click it away so the and and actually so many actually today there is a better alert Library uh I always forget which one it is but which one is it [Music] called uh [Music] fleshy I think it was fleshy I think it's fleshy yeah is it fleshy no I don't think it's fleshy no it's it's fleshy yeah yeah it looks but it looks better now I think the video was taken yeah like a year ago uh it's better styled now okay um okay let's let's try let's try first let's try flashy because I know flashy is pretty good at what it does and then let's try flux on so going to get the dependencies and they tell you what to do you need to import flashy in your appjs uh and then you need to add the hooks and my hook hooks I think that's it right ah we need to add this to tailwind and imported okay in the HTML h so next to flux on okay finally you need to update your flash group where do we have the flashh group yeah this one is gone and this one's gone too all right now uh we need to restart our server but now we should have a oh life toast that's the one why why do you only say it now why do I always add this stuff here I don't know what's happening compiling generated live toast all right well first flashy what's happening could not fetch application R and disconnected module for application flashy because configuration at discontinu module was not set uh is that because what is it maybe because this is our app maybe the issue is in our uh static rendering so let's let's move this back no okay ah flashy notification hook oh we also need to add man we need to add a lot of stuff let me try live toast maybe that's easier to set up we also need to add the hook we need to add it to tailwind and we need to use it and uh I think that's it ah okay but we can use put toast instead of put flesh oops okay but we don't need to do the whole what what flesh he has like added as a hook to your life you a there too many too many caveats let's move over to life toast and then we compare it to fluxon I promise you we will get get there getting the dependencies starting thing so what we need to do is we need to add our hook again here and we need to remove fleshy and oh can we okay now we need to Define our own hooks um this one and we need to add this wherever we have our flesh group so we had our flesh group here and we had our flashy somewhere else here flashy and also delete this all right and usage uh live yeah do we import live toast in our web maybe that's that's the way to go the HTML helpers that's what I would expect so what is this put toast yeah so we probably import live toast okay and now we can just do put toast instead of put flashh in our page life okay all right now let's see one okay it's adding it behind each other actually you can see the Shadows are becoming more and I need to close them does it close by itself or we probably need to configure it configuration setting the corner okay Corner top right what are the function options uh [Music] it also stays eh but so where do we use I want to have it here in the top right okay alert does it disappear by itself toast group did we use toast group Yeah Toast group Al here it doesn't seem to disappear right so here I set an alert and also I thought they would actually come below each other like if I have a alert that it would pop up below that's always an issue with actually I want to have like a a whole like half page full of it you can customize it from Hook ah here Max items duration javascrip options yeah all right I'm going to do a super quick bathroom break I'm going to be back in two minutes hang on e e e e e e e e all right everyone sorry I took a little longer I just have to do a quick chat with a girlfriend so uh a we were working on live toast yeah um maybe maybe let's not do that maybe yeah we already saw that out of the box it does not come with that it goes away automatically and um also it doesn't stack like it Stacks basically on the same position but I just yeah can we can we change that I don't know let's go to Z can you check if your hook is working it might not be honestly um I always have that issue with I have no clue how to define the hooks so what I usually do is I do a let Hooks and then then actually I make it an empty thing and then I do hooks live toast and then I set it here and I've have no clue how to do it in any other way live toed to to toed yeah and now we add them here all right so maybe now it's working where is it Firefox see well same behavior uh what if I remove the flux on hooks just just do this one and it should be left TST is it yeah no I mean this is I know 100% this is working let's let's double check uh life toast life toast create live toast hook are there errors in the browser console good question there are no errors in the browser console however uh let's let's go back to the configuration let's see oh yeah of course I'm stupid I need to execute this H funny ah no look at this yeah now we got it okay that was my mistake so smart I'm not a JavaScript developer can you tell oh man this looks much nicer already a it only keeps three so if I click it often and this is a this is a behavior yeah it's you don't have that with the um with Phoenix life you when it like out of the box so life is actually very good and I also like that sometimes they have this running counter um not sure whether it's life toast that can do that also it would be nice if they would con um Define the elements you can pass into the function like down here in the hook they can say well there's some JavaScript options and they say you can change the duration and the max El items but is it really only the thing you can change like again colors can i h well okay yeah you can change the custom class right sorry my fold if you wanted to change the colors we could do that here uh yeah okay well never mind we have seen live toast and I like life toast and now let's compare it to oh wait that that's that's a buck oh there's a buck here we have four and the fourth one comes back maybe it's not a buck actually maybe it's smart because I make four alerts and I delete the first one and then I see a last one again that is actually smart I think well anyway live life toast you know can highly recommend it if you uh build your your application and I still think I I think what was it I saw that also that there was um yeah the stup pack right the Phoenix starter pack starter kit oh really Phoenix kit.com so what I meant is basically what I'm thinking right now sorry a lot of thoughts going through my head um what I'm thinking right now is like all these things that I'm adding here I would ideally like to have them in a kit where I just do Phoenix kid new whatever like mix kid new and then I have a standard Phoenix application but it already comes with a live view out of the box you know because every every even if you generate a live view app you don't have a live view you have a controller I don't want to have a controller as a landing page or maybe I do but I just always want to have at least one live view that I can then start to modify right because I always have to create it myself and I have to like manually create the live folder and then inside that I need to create the live view and it's just the thing uh so that one I want and then I also want to have life toast used out of the box I don't want to have the standard Phoenix life um flash uh what else do I want I want to have it's like a wish list some is Christmas right um oh yeah there couple of options that I don't know why they well there are probably good reason for this but if you start your yeah if you start your uh if you generate a new project the static plug has a disabled Gip and also there is broadly broadly like broadly not broadly with an eye sorry this way so broadly and Gip those are um what do you call them if you zip something that is a compression yeah you compress it so these are compression algorithms that are handy if you want to send the static files from your server to the browser right it's just compressed and then the browser actually decompresses them or uncompresses them and then it uses it and that's very handy for like JavaScript like yeah JavaScript and app CSS and images and and whatever so you actually want to have this true and I don't know why it's fult again there's probably a good reason for this but like this is one thing you need to think about when you actually a p application to production and I always forget about that uh which is to to enable these things because because then you know immediately your traffic is more efficient and all these kind of things so yeah that's I want to have that in my kit right uh yeah many more things I want to have my kid but I'm not going to tell you because otherwise you're going to build and then I can't build it maybe I want to build it but first of all I want to find the Phoenix data kit because I looked at it and uh now it's gone I can't even find it is it on Twitter okay well there is a phoenix St kid and uh it promises it promises to do that there's nothing on Google okay unless you want to decan some wine or whatever so uh what are we doing why are we here I think we were looking at just alerts running through right that's what we were doing on get up ah I thought it was I thought it was paid St kit this one seven years ago I don't believe so Phoenix starter starter for Phoenix two years ago getting closer though let's search for this one Tailwind Phoenix starter starter kit Phoenix Elm no no I think it was a paid version even like it was a paid uh thing and it was kind of like an alpha or beta in then I forgot about it maybe it's gone who knows okay well hello black code so next step is uh we're going to compare the life toast alert to the flux one alert let's see which one's better and then last one because also uh I'm going to stream like two hours today or so so half an hour left and uh lastly I would also like to look into the table because tables are also hard to get right um well it's easy to implement them but it's hard to make them easily customizable because you always need to change tables like I actually wrote a book about tables if you don't know and uh I would say I still 60% of the time I work with tables every single day that's what I do tables tables tables every single day it is it is ridiculous that like 60% of my value to my company that I work for is building tables but it is so and uh they see that tables are really valuable so you should be get getting good at that and if you want to get good at tables there's a book outroad and you can read it and it's not terrible I think you know let me know and the second thing that you will work on actually that I also work on so I work on 60% of my time I work on tables and 30% of my of the time I work on forms and I also have a video course about forms right so with my book and the video course 90% of my time will be explain to you and now you know why I'm like I am a little crazy anyway let's have a look at fluxon the alert so um so I guess that now we need to remove life toast again at least the the group here I'm going to remove this one and we need to add back our old flash group and uh cuz then we can updated in the uh core component so here's the flash group and basically we want to overwrite the flash where's the flashh grw yeah okay [Music] um yeah basically all of this ah the s is it this yes I think no no it's not that one yeah it uses Alpine no I I didn't yeah no I I don't think it was one it was it was built by not somebody that I heard about before it was you know it wasn't from Phoenix full speack but thank you getting close there are many St kits as you can see yeah so what do I need to do I need to basically well I want to have the render slot flash get no so I want to have I just want to have this alert title and probably I can't do it in my core components so I need to use flux on here do I I guess so and let me remove all this Alo this can go and I want the flash title kind in for error use for styling and Flash yeah I mean we only need to replace the title and I'm going to do this with yeah maybe I should have removed the whole code then we could just have copy pasted it all right now use flux on yeah that's correct okay and in here we do Phoenix fles get that's basically the the message right yeah and I I believe the rest will be taken care of but also the kind okay let's first fix this conflicts with a local function hide um hello yeah it's coming along nicely the exploration to flux on um I'm impressed so far I already mentioned one or two things that can be improved and I think need to be improved in the future but for now it's good it's good good I like it um I would not yet use it in production though not at least for like you know the the work I get paid for because yeah there there's just a couple of things missing you know how to style text in an input field that kind of stuff but it's cool like if I would build an MVP and I might actually in the future then I would use it okay now going back uh also with fluxon you could Define the variant and okay so maybe do we have info we have success we have error so we can also add the variant and just maybe add the kind here but then the my question will also be does it automatically convert from atom to string maybe not because in here you have string variance and this will be an atom so let's see um yeah let's try to fix oh yeah and also yeah can we can we just uh what do I want to say can we just import or use only the alert component here in my core components I think so we just do flux on components alert is it just alert probably flux on components alert that's another thing you know how like I I'm not a big fan of the use macro well I use it a lot but still you know I rather if I could I would do import but I understand that here they have the issue with the conflicting function so they actually want to you know do that like they can't intercept the import here but they they can intercept the using macro so that's why they used use I guess and then they import it here yeah uh but I hope that I can just go so I'm going to remove this and I'm going to do this ah hi module info oh is that a live component so I have to do live component maybe and then it also needs an ID and also I just going to add a random number so that yeah your voice and quality of pictures is less please what let's Peak Keys okay I appreciate it ah okay the alert is not ah it's a flu s component it's not a real uh oh okay but they have an alert function so it's alert alert okay then we can use that one let's do that actually I like that much better anyway so we do this alert and with different assigns see not a binary right yep that's what I thought like here they don't handle atom value so we always need to stringify the atom here first okay now we have four alerts here we can remove them but why are they there in the first place we probably need to hide them right if the flesh is rest Global and our flesh group where's the flesh group here yeah they always show the flesh um yeah we do we need to that CSS trick um with like if if the alert is empty then we hide it but still I mean first of all why are there four different alerts here I think that's what they do here no yeah maybe we need to rewrite our flesh group where we just say if if uh and then the what's this flesh like if the flesh is not n right the Phoenix flesh get if Phoenix flash get only then and also we want to just for now hide the client error client error client error uh it's the server and the client error uh yeah I'm just going to delete this but that is one one of these things were I mean you have alerts right in fluxon like they offer you an alert component but they don't really make it that easy to replace your existing alert components with it so okay well now we yeah you have to finicky yeah anyways yeah I had that issue too like whenever like you had an alert and then you had like an empty string or maybe in your in your template the alert had a like you had an alert tag and then new line content new line closing element and then if the content was empty you still had that new line and that would also be seen as not empty so and my format would always you know give that new line so actually always manually needed to go back and fix it that was really annoying but yeah I I agree this is not a great great way um but the problem now is that we don't uh we don't show any any flashes so oh wait yeah that's also my fault because I need to do put flashback okay well what the [ __ ] is this uh okay I'm just going to do us enum random so that we can okay yeah it's all right it's all right I think I would not use it for alerts also here you see The Styling um styling issues why do the why do they look [ __ ] what are we doing wrong I mean if I just well we have it we have it here right uh if we go to this the colors are off I don't know like the the green here the green is much more uh pregnant not pregnant it's much more e like it's much it's much stronger what's the word for it it's much more visible it's Stronger Yeah yeah in an hours it's not interesting okay well alerts so so because I mean where else would you show alerts except for at the top right or whever like you know it's like a popup and then it needs to go away uh dark mode mixup it could be it could be ah because our background is also not dark yeah again uh the down hello world let's put this all in a oh let's just make the root or the app HTML actually let's make this header also in in my SAS St kit I don't want to have this Phoenix header please remove it every single time I need to remove it uh I wanted to add well now in The Roots we're going to make this background black okay now I can't see on yeah it looks better I guess but yeah now I would need to go in and style it to show up here and you know what what we had with live toast is that you have all these like different alerts coming you know actually we can enable it again and then we see y HTML oh yeah and in Page live we need to so yeah like that is fluxon versus uh life toast and I mean okay this is huge because I also blew up my whole screen for you so that you can see it right usually it's like this on a 4k monitor um but yeah this is this is the the behavior I would like to see just you add an alert it pops up here I don't know what this thing is now I don't know what this thing is even what the what's happening oh maybe there's an issue well whatever okay uh we have looked at alerts and the last thing I'm going to look at is tables yeah we got like 15 minutes 50 minutes is good oh they have tabs too but we going to do I'm just going to have a quick look at tabs oo very nice T class T panel interesting oh nice if this thing is is so well designed oh so nice yeah so this one yeah with icons awesome awesome awesome awesome all right but we're not going to look at tabs we're going to look at tables because that's really hard to get right so I'm just going to copy and paste this into let's make a new one table life if you looked at the Phoenix portal PR in the live view repo that would make the arbitrary toast positioning issue much easier in the future I have not what is Phoenix portal PR wait is this a new pull request or is it merch already portal ah proof of concept from last month interesting so proof of concept PR implementing a new Phoenix binding called Phoenix portal this binding allows to designate an element to be rendered at another location in the Dom designated by the idea that Phoenix portal points to this can be useful Ah that's where your portal is like it's in the like in the game where you have two entry like two points and you portal things from one side to the other interesting yeah that makes sense yeah there will would be great for flashes right because you have like an empty element and you just add an alert element to it that would be cool this can be useful to render things like dialogues at the top layer outside any containers that might affect the rendering yes every single time I have an issue where um well not that often but if you render a live view it is by default a div and if you if you want to make everything full width the whole page this div might not be full width right like you have a a layout like a root layout and an app layout and like the app layout has a a flex and you know like everything is is full width and then you have a live view which is a div and it's only a tiny part of it and you I mean you can style the the div uh but I think you can only do it in in how you use the layout well you can probably do it in your life you where you say life you use this layout and then you have a class like what's it called a container class I think you can give um and uh why why not talking about this well yeah the point is that you can then easily give it a container class and then it becomes full width um yes but sometimes you have issues when you add an element somewhere else no I'm I'm just talking doesn't make any sense what I'm talking here this is a cool PR the Phoenix portal it's a draft so the idea is here that you can have a dialogue at the top layer outside in container that might affect the rendering yeah nowadays there's also a popover API and Native dialogue elements so this might be that important not that important anymore yeah but this stuff you can style quickly so I like I think it's a good idea because this I also don't feel like this's something we really want to support it's funny that he opens this PR and then immediately says I don't think we should support this uh the P only shows it could be implemented interesting yeah try building some the things portal you can use this in you yeah okay yeah yeah I mean it's also to be honest I wouldn't know what I would use for but uh so it's just you can just like add any element anywhere in the in the app using the Phoenix portal binding right render so this one's rendering something has a portal Target and a phoenix what's the binding H here render yeah Fenix portal portal Target is a motor huh yeah yeah but then you can use absolute I think you can just use an absolute positioning and then you can you know put it up like you don't need to actually add it somewhere else in order like I'm not sure why would you use this I don't know I I don't see the use case I don't know but it's interesting I mean I like these kind of experimentations since that we that we uh add them yeah okay and we were looking at the table table and it's gone right we don't have any leads so this is the leads think a naar in the layout its content can be controlled by the current rude live view and its children it's content of the light of the nathar ah oo yeah I see like a like a notification Bell for example maybe you know like in in the Nar no it's fine it's fine we love tangents here we embrace the tangents um well what I can imagine is that you might have like in the navigation bar you have menus menu buttons and you might want to show like a counter next to them or like a notification uh what's it like a Bell like a sensor pulse thing right like a a button that is pulsing um yeah I I could like if you imagine an email client and you have like inbox as a navigation item and then next to the inbox you have the number of unread emails and you only know that number once you actually start the live view that fetches the emails right so but the navigation button is in the you know in the layout for example yeah yeah you you could do that but what you can also do is like um even if you go to route right here for example in root you already use the assigns so you could assign something to this like you know unre email counter and then you would show it in the in the static in the layout or in the navigation bar so I think it's already possible without I mean the thing is you can't exchange the element that in you have in there right at least not from the live view um like if you wanted to show you know like a an an alert icon or a warning icon or like an all good icon uh depending on how many emails you you haven't read but then again you could add that logic in that button right and just say here if a signs counter greater than this then show that so yeah you can't control in the live you what you sh in here but you can also move the logic there I guess yeah it's one of these edge cases I don't think I don't think they will actually I don't know maybe they merge it it's an interesting thought experiment but I think Jose will come in and say well you can just do it like this we're not going to support it because they really try to keep the the API small as possible all right enough about that uh let's talk about the table uh so yeah we're going to [Music] assign what we had leads [Music] apparently yeah Nam stage and contact or whatever uh name status context so one here we have name fber status contacted and we have contact which is plus one [Music] and okay all right okay we have a table awesome so let's see what can we do can we add hovering do they have like a hover striped okay yeah oh they even have a select all checkbox striped table row striped is it striped though table Row for stried selected leads howdy how you doing o where cool complex content uh am I missing something it should be Stripe Right striped maybe like true because it doesn't it's not striped it looks striped just subtle yeah but I mean on my screen I can actually see it like dark bright dark bright and here it's just dark no am I blind so this one should be Stripes yeah and they do have an dark even back one white dark even back one white I don't see it oh okay there is actually it's just not visible look if I increase the yeah now you can see it oh yeah that is the problem with pre-style elements I I I like it but you know this is this is something you can easily shoot yourself on the foot with make your background great yeah I don't want to make my background great 10 I want to make the element in a different way and I I don't want to override this thing um yeah maybe I want to have a black background so yeah actually if I if I manually change it then you can see it but I mean now it's it's not visible error no yeah okay well you know these are yeah also here it's barely visible okay and uh can I do a class hover background gray 700 yes ah I can but not on the stripe ones you see this works this works middle doesn't so I can't use these two together oh no it doesn't work at all wait yeah okay had a mistake here yeah okay now it works at least yeah all right all right I mean you know I can also do stripe not and then I just do uh even background wi and this should be like 20 all right see well I don't need the the it's fine but this is this is better I like it though you know it's just it wasn't very useful for me okay um yeah of course you can also make more complex uh things with it because it's a slot you can just put everything in there looks nice though this one um what about clickable headers that's important too yes because you want to have that for sorting so you can do Phoenix click sword and Phoenix value yeah okay well yeah yeah I I don't like hatless UI actually like that's what I don't want I also don't want naked styleable events I don't want to style everything myself I want to have a nice Baseline like a pre-style baseline that is good and then I want to have the Escape patch where I can add my own styling to it if needed and again I said that earlier in the Stream as well like using these elements just giving like you know elements or components you can use in your um in your UI like it's fine to to to have it in your dependency and then only you know call it like this uh the alternative to this would be that you actually copy paste the CSS code into the application like in the core components right um so if I would for example use something like uh like Tailwind UI like they actually give me something like this H not like yeah whatever this animations H whatever you know like a list here like Twi UI they actually give you the whole HTML and CSS and you can copy paste it into your application and then you can manually change all the classes you want um and I think it would be nice to have that eventually at least for the state well for the components that don't well I mean even if you have a hook you can you can add the hook to it and I I will import the hook for you but you know just give me the HTML and CSS like the Hees and then I can go in and I can change all the classes that you have set that might not work for me you know instead of trying to override them because you might not be able to overwrite all of them for example what we've seen here you know like you if you use styled like there was a dark it's like for example we saw with the text where I try to just change the text color and because the flux on things I'm on dark mode which I am but still I'm not you know designing for either um that's why like it was hard for me to overwrite the text color there yeah actually was not possible and I had to do dark and then the text color but I don't want to design for both always I just want to have one type of styling and only if I choose then I add the the dark mode right anyway long story short I'm yeah I understand the the appeal of headless UI that only give you the the functionality the logic behind it but again I'm not a designer I actually pay money you know to use pre-designed stuff like Tailwind UI and now fls on so yeah anyway this is this is already working like uh you know it's nice we can sell it ourselves and what was the other thing you can add uh like no only here right yeah you can use a clickable header in the column yeah interesting how do they ah they don't they didn't uh style the like depending on your sorting they didn't change the Sorting the the style of that thing it's all right you I can do that myself yeah all right okay so you you can just edit there makes sense good all right let's see uh we still have tables here what about if I want to add a border in between uh not striped uh can I do this in table bu class and it's I think divider divide just divide where is it t CSS I think divide y or something yeah divide y uh I think that worked let me remove the the stripe then we see it better yeah let's make it two yeah but it's dark so we need to do the Divide color divide like white 100 whever huh great you're right ah yeah okay works all right yeah that's cool um no worries thanks for joining see you next time yeah you know I think it's time to wrap up really we have looked at many many things with FL on some things work some didn't I'm still impressed by many of them and uh what's this oh you got a full was it a full layout oh that's pretty cool form layout yeah I would like to I would like to see how much of Tailwind UI is in here honestly like I I don't think that they sell all of this again because this looks very much like T and UI um which is fine I'm not sure where that's fine for tell when you are but I think they're not that picky about it so that's okay yeah toggle yeah cool all right um really cool stuff or ah they also give you all this stuff that's cool oh really and it's just I can just copy the code a thank you this is exactly what I wanted but I want this for all the components did did I miss it no I didn't miss it right you don't have that here yeah no it's it's only the the components like the the helper functions but this one actually it's a layout you can you can just copy like the code of it um and then you can add it to your Phoenix or things so really really cool stuff yeah yeah I'm actually excited I'm I'm excited about this now so let's wrap up I mean what do I think about fluxon right I mean obviously I was excited about it and I bought it right away on the first day when it came mod it's $149 um now from playing with it I like it I uh I think is really useful it takes away so much work that I would usually need to do so I'm really really I really love it I haven't build a proper application with it yet I mean now we just you know played around with it but from what I've seen is I think I I think I would not yet use it in a really production application you know not the my day job where I get paid money to to code uh but I would certainly use it for all my hobby projects and uh you know aspirational projects I to say there are a couple of things that I think need to be improved um one of the things is the dark mode definitely so everything is has dual styling now which is cool you know you can easily change between dark mode and and uh light mode but it makes it harder to work with this especially if you don't want to design for both um what what I mean with this you know if like what we had here in in the uh page what is it page uh HTML there no where is it home there so we had that situation you know where uh we had the accordion and um here like we had the accordion down here right and we wanted to change the color of this text so we put uh you know like would do in every other thing I would just set text screen 300 but it doesn't work and the reason for that is that my system is set to dark mode so actually the dark color here is applied so what I would need to do is I would need to say dark text green 300 500 whatever and now it's overwritten but I don't want to I want to want to I don't want to design for light and dark the whole time right because now I need to think about uh well if a user that has light mode enabled comes to this website they're not going to see what I'm designing here they're going to see the light version of it so now I'm forced to design for both which I don't want so I think that is something that they should definitely improve um and I I don't know like uh make it a global dependency just a global setting where you can say I want to have both things and I know that I need to style everything you know for light and dark at the same time um or ideally let me give you the the mode that I'm styling in but then still so like if I would if I would get flux on you know like hey an A sign for example and say this is not light mode or this is not dark Mode still like flexon needs to have both of this in their components both like Styles and if I want to overwrite the component here and I don't have it set like you know I I basically never tell them that I'm on light or dark mode so I only give them text screen 300 well what I could do is like I just tell fluxon I'm always on light I'm always on light mode and that means I can just set Tex screen 300 and that's it right um but yeah flaxon takes it from the browser so I can't control that I maybe I can I don't know but for now I don't understand how so uh also the thing here didn't work uh the they actually coding uh it's unnown hook yeah I made I made a mistake somewhere um with the hooks oh yeah I I disabled the hooks sorry that was my fault as well here Flex on hooks they should go here all right this now it works all right cool um so that's my that's my idea so I think the biggest issue that I've here seen is the the dark mode light mode situation where I now need to style both of them so I would like to just use one mode and just make it by default light and I tell you whether it's light or dark right and if it's always light then I can style you know just without having to use the dark modifier at all okay step one uh step two is um in in the like home where was it uh so sometimes yeah let's where was it Page live I think yeah page no it was it with the attributes I think with an input yeah here all right the input so the issue here is that uh for example with the input element that not everything is a slot like the the title the description help text those should all be slots and ideally I would like to have both like I would like to have an attribute here um that I can set and then you just set it for me but I would also like to have the option to have a a slot that I can Define so like a you know a label slot a description slot a help teex slot because that way I can style these things three things myself right now I have no way of styling the label description or the help text and that is you know not ideal if I want to change the text color uh whatever text uh the weight of it or something so so you know it's fine for now but again I would like to have slots for these three things and you know attributes are nice but if you just make it a slot I think nobody's going to really uh complain about it if you just you know make it a label slot fine right uh yeah uh that was the second Point what was the last Point uh well the alerts I couldn't really make them work um for oh wait here so like we used life toast and that worked nicely and well now actually stuff is a little [ __ ] up which is let me just do this one yeah so yeah you know I I don't want to I don't want to have to think about how do I add these now to my flash group and and I actually they are in my flash group I think maybe yeah they are but they are not absolute style you know I can only show two at a time they don't go way automatically um everything that life toast does it would be nice if flaxon would be able to do that like here this is now life toast so I mean forget these that's just a problem because of my uh how I set up um flux on but this is this will be nice right and then I can actually add multiple and they add below and I can click them away and yeah stuff like that that would be that would be cool uh yeah the alerts um and then well ideally so one last Point um is again that everything here all these components they are helper functions uh like the accordion for example right so all these are helper functions and I can style them to a certain point but also then not anymore after a while so it would be nice if I could just eventually in the future um generate components inside my core comp component module that have exactly this template so instead of using the helper function I would actually have the full template with the CSS classes and all the slots and everything I would have that in my inside my own code because that would make it easy for me to uh override many of the default stylings imagine that I want to override all the uh default text color right it's always text Gray 500 or something and I want to have something else or the the rounding of certain things like I always want to use round rounded instead of rounded LG stuff like that right so that makes it easy if I have it in my own code base that I can just you know select all re replace and that's it I don't need to think about it and if I wanted to do that now I would need to add it to every single accordion item I ever create I need to add like a new class um that has a different rounding uh radius for example so ideally you know the same that we have it already with with the layouts you know it would be really nice if I could just copy the code uh and add it to my own uh to my own application yeah and there you have it that's it I think that is everything I have to say for now I'm going to play around more with this for my upcoming projects but uh that's it for now I think I'm very happy with this I'm still happy with my purchase I don't think this is you know yet 100% production ready but it's certainly a very long long way already along that way so well done and uh yeah happy to give any more feedback and uh also thanks to everybody who's still in the Stream thanks for joining me uh it's been a pleasure you guys have been really you guys you people have been really inspiring and had good input today and I'm very tired and I think I will just go you know that's it play some PlayStation now it's weekend um I think I'm GNA kick back and enjoy the weekend all right everyone um don't forget maybe to to subscribe on Twitch or on Blue Sky and then you get notified when I well actually blue sky doesn't have notifications but twitch has so maybe follow me on Twitch or YouTube and then you will get get notified when I go live again on probably Monday so see you then thank you very much

Let's code some Elixir together.