Getting Started with Tauri & Shadcn/ui

back to another stream um hopefully in this stream my mic sounds better I hate Linux I hate OBS um I hate open source software anyway so in this stream uh last stream I was fighting with bun and tar and a couple other things and in this stream I'm going to try to actually get tar working and I'm going to set it up with shad CN and I'm going to do it with pmpm instead of bun this time this doesn't mean that I don't want to use bun in the future because I'd like to continue to use bun but um I just had an issue with it with Chad Cen and I tested it out and I figured out how to use it with pmpm I don't know if it's just on Linux that I'm having the issue with bun um but it's all right it's fine we're going to get a work with PM PM uh let me see here hopefully I'm live yeah it looks like we are all right so sorry so um let me know if you guys can hear me and if the mic sounds good this time around if it doesn't then we're just going to have to figure something else out uh yeah I guess this isn't my normal streaming time so probably uh people wouldn't wouldn't expect me to be here all right so I'm probably going to get everything works okay good thank you metal Maniac uh boy that's good to hear all right so I'm going to get started here what happened to last stream dude what happened last stream and again this is why I hate I hate software but I specifically hate open-source software and even more specifically I hate lenex and I hate OBS because the second that I and I hate microphones so but the second that I pulled OBS into my other screen and I won't do it right now like I will not pull OBS from my laptop screen onto my other monitor um the second I did that everything froze up and crashed and then I threw my mouse at the wall and I walked out of the room Mike is fine there we go I'm glad that works so all right let's get started here um so we're going to make it look good we're going to have a little a little Tower Towery app T app toui app um working and we're going to make it work with uh Shad Cen we're going to install everything with pmpm now listen I know there are other ways to make desktop apps um I know there are other ways to do UI inside of apps and I know there are other ways to do all kinds of things but this is the way we'll do it this time but you're free to tell me um in the chat uh your preferred way and maybe I'll look into it in the future so I already have pmpm installed by the way this is my new desktop rice um this is what we're going with now so anyway I have pmpm installed um so what we're going to do is we're just going to create a tower app a toui app and we're going to create it as an alpha version because what I want to be able to do is eventually I would like to whatever apps I'm creating locally on the desktop I want to be able to create um or I want to be able to easily make them into mobile apps that's my thinking here that should not have happened I also used poos with OBS on the dual monitor well of course it shouldn't have happened but it did Shad sien is great you can build a decent UI without wasting too much time that's the point I mean I'll say this too if you're actually trying to make things as like a lone developer out there right like stop fighting like like like it's nice because Shad um is is my designer right like he designs all of my widgets and he designs all of that kind of stuff for me and makes it easy for me to use so it's like I have a 10x engineer and I'm I'm choosing not to use him for some reason you know what I mean like if I don't use Shaden there's also something if you're familiar with Tailwind uh UI Tailwind uh UI Catalyst how do you spell Catalyst this no like this like they're making one there are other ones out there but the only ones I would be interested in are Shad Cen currently and Catalyst because this is made by the actual Tailwind team which is you know I mean These Guys these guys have like a lot of a lot of good stuff and they're also the creators of headless UI um anyway so you know in the future I could see myself switching over to Catalyst right but the nice thing is that no matter what either way if I'm using Catalyst or I'm using Chad CN it's like why wouldn't I lean on like having a design team for me you know what I mean and they're free from and you know so that I can actually implement the unique functionality that that I want to implement anyway so let's create this we're going to create a toui app uh the project name we're just going to call this blog app for now uh we're going to use typescript JavaScript and not rust for our front end because I'm not a masochist uh choose your package manager pnpm not bun this time in the future we'll go back to bun um for now PM PM uh choose your UI template we're going to use react um I've heard good things about solid I've heard good things about preact but I always worry that these things are like the flavor of the week or the flavor of the month or the flavor of the year or something like this where react has already seemed to kind of stand the test of time um and I'm not a again I'm not a masochist so I'm not going to go with vanilla um again spel I know people like spel uh view has like what happened hopefully that didn't go down for too long I hate comp I really you know one second a minute let me check see what what's going on my channel don't you dare tell me that okay good I think we're good it's still in like the same live it better not drop again um my font the font is uh Mo Mono Lisa um it's back okay yeah it only went down for a little bit so it's all the same thing it seems like it's still the same video on YouTube which is good otherwise again we're just we're going to throw everything and we're just going to walk away anyway um I don't even want to accidentally click JavaScript um I know JavaScript there's been this Resurgence in like people wanting to write JavaScript because of JS Dock but no no I'd rather actually have types and things I think I think um for me personally but that's just for me would you like to set up the project for mobile as well uh we will but I don't know if we're actually going to take a look at any of that stuff okay so now we're going to CD blog app um then we're going to do uh p and PMI and I guess maybe we could like try out some of the Android stuff maybe later on um but I don't know we'll see one second I'm getting my door knocked on okay all right we're back hey hey did you try slint anyhow my work my workplace uses it for crossplatform desktop app can tell for rust C++ in JavaScript this looks nice so what does it do go use for embedded and desktop what's embedded what are we considering to be embedded oh like I can oh like that's embedded that's neat for now I think I'm going to stick with um to ruy but in the future I might try this out guy with glasses seems to like it all right anyway I will I will keep this in mind here we'll star it and we'll put it there I'll take a look at it later I'll sort it into a bucket later but yeah we'll try it out later we'll see how this goes if this continues to bother me I'll I'll look for other Solutions okay so we created it now we're going to do pmpm bro I love typescript but having to declare types for react components is really boring um I don't think I declare types for react components like we make in stor shopping experiences for touch screens right like a kiosk kind of thing it's neat I actually kind of think it's cool I actually just had some uh EV Chargers pop up in the town that I live in it was kind of weird seeing them it's weird too because like uh like the gas stations are all next to like convenience stores and it seems like the the EV pumps are at like Walmarts and uh like shop rights and things like that so anyway all right we created it uh we cded into it we ran the install now I could run tar Dev and actually get it running uh but we're going to skip that because that takes a minute to compile and we're just going to skip right to installing tailwind and getting Shaden set up and then we'll run it so I'm going to do pmpm add flag deta Tailwind CSS post CSS and auto prefixer this is just from their docs this is just what you install when you're setting up tailwind and now I'm going to initialize Tailwind uh you can write abson to Ruby without Russ too uh yeah yeah you can this month I made a rapper for my Russ lib in Python and I tried to declare only primitive types because python is dumb I don't again I said this like last stream I can't imagine using python for anything um right now and unless I was trying to like quickly prototype something or I don't know I just don't know like what added like added benefit I'm going to get um and like longterm like the typing in Python is just not there so so there's like I don't know there's like Duck typing and things like that that they have but it it just yeah it doesn't really speak to me okay so now we're going to update our TS config all right and we're just going to jump to the bottom here and we're going to add I don't think this base URL is necessary but we're just going to add it because they tell us to um I should also note let's put a little Comal there I should also note that um you see like this little Tilda here I'm using the Tilda because um you know a lot of packages are scoped under like at like the username or organization and then slash the name of the package and so like I never really know like if I'm importing something locally from my project sometimes or if I'm importing something from like some uh package that's you know scoped under at something blah blah blah it just seems to be like what people are using so this is why I moved to Tilda so I I hope like that becomes the standard in the future anyway hey Chris how you doing did you manage to set up with nope we switched over to pmpm at least for this stream in the future we may do BN all right so this is just showing you how that's supposed to look and I explain why I'm using Tilda update V.C config.sys oh that so what we're going to need to do first is we're going to need to uh PM PM I or not I add flag D for like a Dev dependency then we're going to do types node that's valid I don't like using Tilda because my brain thinks of it as home that's why I actually like using it because I feel like it's like the home directory of my project so that's why I actually like subit ically it kind of works for me uh hi Chris wanted to say thank you for your EnV confit uh no problem my EnV config is the best MVM config and it's better than everybody else's so anyway I'm only kidding I'm sure everybody else's MV config is just as good and it's very nice um is this the first time using toui uh I've used it once before on something just kind of like not not taking it that seriously um but I'm going to try to like actually take it seriously and understand it because I I have some projects I want to build in it it's better than typescript and JavaScript but we're migrating to rust uh what's better Python's better oh we use my P and pantic okay yeah yeah know my um my girlfriend uses that at her data science job they use pantic for like types and things like this I've used it once before when I created a fast API server but I don't know I guess I was somewhat underwhelmed but then again I was kind of more Junior then so maybe maybe I'm missing I was missing something uh I made a repo with a small guy if you want to take a look at how to set up with bun I know how to set up a bun I have a I have a guide on how to set up a bun the problem is that every single time I try and do it um on this machine I tried again like following the exact steps I'm doing here but on this machine it gives me this weird uh standard IO errors like issue I don't know if it's a Linux problem or what but yeah like I I have no idea what it is anyway so next thing we're going to do is we're just going to take this resolve situation here and we're going to add that so we're going to resolve an alias uh to Tilda and it's going to resolve to path. resolve directory name uh source so similar similar kind of thing so we're just going to pop that under here and we're put a little oh we already got the comma there so we can save that and yeah there we go machine specs yeah sure why not these are the important questions we got your pop OS and I'm not going to Neo fetch like a Zoomer this is how this is how we show off the machine specs we go into the about in the settings menu okay um anyway so pop OS that's even I guess the device name as well we got a lemur Pro uh 40 gabt of ram 11th gen Intel Core i7 actually this was I think the generation they introduced a better GPU which is still garbage um which I think is this I have 500 gab on this thing um for the storage but I'm not not in love with that I have a I have another stick in there that's one terabyte that's got a a heavily riced Arch Linux set up on it which uh I'll probably blow away and then end up using for this in the future anyway we're on 22.4 LTS uh a very old version of gnome not gnome and I'm using Wayland And I think my firmware is up to date let's check yep I think we're good to go there which is nice oh no it almost froze but we stopped it I think we're good uh let's see here 40 gab of RAM is is necessary these days so that I can run modern web apps I don't think apps belong on the web anymore like for the most part I don't think we really need that I think we need to move to things like HDMX or Astro just something like server rendered and npas and stuff and then we just ban apps from like websites and like you're just not allowed to do it anymore actually maybe we should ban Astro and HDMX as well and we should just like just have only allow just plain HTML and CSS for the web and then we can all build better standards for actual desktop apps that don't depend on react or something like this um anyway yeah this is the future I want to say so pmpm uh DLX Shad CN UI latest in it so we're going to initialize Shad CN here now 40 gigabytes is so random and wild I I mean it was like not that more expensive to get it and I was just like ah whatever let me just future proof my system here and yeah so we got the 40 gigs like if I uh see if we pull something up here HTP yeah look I'm already using like seven gigs just streaming and like doing nothing like imagine when I really get going with my tabs I mean then we we hit like 20 something gigs easy um why if the speed and bandwidth is getting better every day well because we have to keep bloating the web so that we can keep selling in more and more powerful computers and iPhones or else the economy will crash so you don't want to crash the economy do you anyway so anyway do you want to use typescript yes yes uh we're going to use default and not New York we're going to use neutral where's my Global CSS file I would like that to be in Source uh styles globals CSS because I'm used to xjs uh would you like CS yes um are you no where's right there configure the import Alias yes we're going to do that components like this configure the import alas Alis for utils yep lib yous like this uh new right configuration to components. Json yes and this time it should just work if I was using bun right about now I'd be getting some standard IO issue and it would just everything would break I was curious yesterday on Terri rust front end but it's just web Frameworks like Russ like you and lepos yeah I don't know what those are but I don't want to learn them I love HDMX building something with it as we speak uh cool yeah I don't know much about like actually how to use it I just know that it adds like more semantic like use cases for HTML that you would kind of expect to be there but like aren't I use 4 gigabyte you used a 4 gigabyte machine until 2023 that's insane also Chris now that you mention apps not on the web what was the whole attempt of apple with the App Store that was the whole attempt of apple with the App Store nah but they they they they they poison that what is the primary stack you work with oh I have no idea anymore whatever I just see on the internet that I want to use um don't mean to be rude but you pronounce toui instead of toui I don't know what you mean cool specs I remember some time ago you used to develop on an Apple machine I still have an apple machine um that was like a couple months ago I still have it uh I still use it it's just that I don't stream from it I want to stream from my Linux laptop I want to promote Linux worldwide uh make sure you add this content section tellin blah blah blah okay yeah let's add this tailwind config.js and we don't need this nonsense and we don't need this nonsense or that nonsense uh oh actually we don't need any of that nonsense I just needed to copy and past this what's the problem what are we oh there we go okay now that we have everything set up let's add some UI components we're going to add a button here and then we're going to start it up uh T rui yeah I don't know how else you want me to say it so let's do we already installed everything so now what we can do is pmpm uh run to ruie to r e Dev it's pronounced to RI gotcha thanks that's hilarious let me pull up um my YouTube really quick oh no it just I need it to not do that yeah yeah I got some comments here I don't know people always ask me about Windows I have no answers for you I don't use Windows mm I think it's like multiple Tauruses so to Ry I don't know man like the Pokemon no is that what his name was what's the one that was like looking like a bison or something I guess it's like an astrological sign okay n there was one I forget his name though I could have swore that was his name Pokemon while we wait for this to compile yeah oh taros yeah he was always kind of a boring Pokemon for me to be honest I guess he looks more legit here like dark Taos this should be the Mas got for to RI punish Tauros anyway this was a Pokemon I was always kind of bored wait what oh Blaze what is this I hate all this new Pokemon like whatever this nonsense is we got to stop adding nonsense he's a normal type just like get the hell out of here there can't be female ones interesting that's strange I guess there's the milk tank milk tank or something yeah mil tank I guess that's the counterpart maybe I don't know trying to make sense of this anyway he always kind of bored me I never really was like ah want to like I like you'd find them in the Safari Zone for like I don't know they'd be like level 38 or something like that and just already I didn't really want any Pokemon that are already like too highly leveled like to start off with but yeah anyway I don't know I don't know what I'm talking about right yeah now it's making sense right yeah see this one's 100% % female this is the milk cow and then this is the Wild Bull so I guess yeah that's it's all right everything still makes sense in Pokemon world like the name Tori gotcha uh yeah right now Taos maybe you say it like to ruy Elmo Taos emo Tauros yeah that's what it was right how's it going 32 oh here we go we're finally done now you know it doesn't take that long every single time we run it um but it does take that long the first time you run it I feel like this is bothering me do you see this can I like somehow like zoom in with this uh no I don't think I can anyway if you click in here you can kind of see I I don't know if you can see it but like the text is shifted up like my text is shifted upwards and my cursor you oh that's not good we're going to have to we're going to have to that's one of those problems where it's like I'm going to have to dig around in something somewhere to figure out what the hell's wrong there that could just be my operating system though all right so we got that now um okay so now we have to do some other nonsense to make sure that everything's good to go so now we're going to go into the blog app here open this up and we're going to go to um so we'll take a look at Styles just to make sure okay yeah we got all of our all of our Styles here so now what we're going to do is go to main. TSX all right and here we're going to get rid of this Styles import and we're going to do global . CSS instead of that and there we go and now what we'll do is remove styles.css we'll remove app.css and break everything probably or I guess not um and now that's that's all good and updated uh is there anything anything else we want to get rid of I don't know what this V m. DTS is but you know whatever uh lib yeah assets blow that away don't want to do that don't want to have that there components this is where your Shad CN components will be under UI and he puts one util for merging class names here so that's what that's for um how does this work we have our main yeah and then we have this nonsense so now we're going to get rid of this asset import uh then we're going to come down here how's this different from electron it runs on uh too and Ry so if you look up uh to I not JS but it's I don't know why I put JS to and Ry so yeah Ry is a CLA is a CLA it's a coloss platform uh web view rendering Library uh the web view requires a running event Loop and blah blah blah blah blah trying the toui gooey the T gooey on Rust meet Ry yeah I think TOA is a thing too I don't know what the hell TOA is this is something it's not that I don't know what it is I think that's how it gets its name um let's see if we can read this article here short detour and try Ry let's see if we can click on Ry and just learn about it so I don't have to read that web view rendering Library so cross cross platform web view rendering library and rust that supports all major desktops platforms like Windows Mac OS and L Linux and not BSD because no one knows about BSD and nobody cares about BSD and you shouldn't be using BSD desktop um you shouldn't even be using Linux desktop Ry connects the web engine on each platform and provides easy to use unified interface to render web view the web view requires running an event Loop and a window that implements has raw window handle or a gtk container widget if you need to support X11 and Wayland uh you can use a windowing library like to that's what it is so too is the window Library I guess we don't use win it inui uh the minimum example and then you can learn through this I'm assuming this is all abstracted from us and handled you know we don't have to think about that and you can probably do stuff in here that I don't know why I would ever need it personally but you know uh I would rather work with the abstraction I guess let's see what we got here too many copyright strikes did I get copyright strikes uh oh I had a problem recently what I usually do is wrap in a flex and item Center to fix it fair enough what happened to the LOI music you used to play in your streams that's a good point um I think there's one z. stream it's probably going to be loud when I play it I don't hear it all right wait a minute the problem is that I don't have my headphones set up right now so in the future we might bring that back but not today otherwise it's just going to be like an echoey mess or something I think toao is like RPC not exactly but similar okay electron uses JavaScript scpt is the back end Teri uses Russ the difference is that Teri is far better uses far less resources interrupts better with different fronts yeah but you can see like the stuff that's using behind the scenes is like Ry and to and not you know like I guess like Chrome I don't I don't know much about how these things are handled um but that's my assumption is that electron uses like a like a V8 Chrome instance as its back end that's what I thought anyway uh where's your tiling Window Manager look watch right there so if I need to tile something I'll do that but if I don't I won't also I don't have time for tying window managers right now I signed back into my Arch Linux desktop and it was complaining at me and then I was like you know what we're not friends anymore I'm done with you anyway so get out of here this and get this out of here this form all right and let's uh let's make this nice and big so we can take a look at what we're doing here so we got this app. TSX which is going to be like your entry point um and let's take a look at let's break down all the junk that was in here before that's just basically just react and not important so I deleted all that junk that we don't need to care about now I have let's go from the top we're importing you state from react and then we're invting blah and then we're importing something from turri apps API core called invoke okay and invoke lets us invoke like essentially rust functions inside of our front end right so if we go to like all right well we'll get there so we're going to just you know create our component here we got uh cons greet message set greet message um that's just going to be an empty string and then we have a name as well so now we have a function here called greet and you can learn more about how this function is invoked and all that kind of good stuff here so I can open that up by the way in Neo Vim you can press GX you can open up links like that so that's how I did that calling rust from the front end so you can read about this here but I'm going to just take a look at the example that we have so what we got is a wrapper function here an asynchronous wrapper function here called greet uh CU you're always going to have to wait uh anytime you invoke the rust back end so now what we're going to do is we're going to set our state here inside of this function we're going to wait invoking a function named greet which we reference here by a string which you know whatever um and then we pass it this this name which is some other piece of State here right which we're going to set later on uh this is just some basic react and here's the greeting message so to begin with the greeting me I don't know why I'm doing all that but the greeting message is um is nothing so there's nothing here right so we need to we need a way to invoke that so let's do that let's add a button so we're going to do uh button like this and onclick greet so then we'll import it like that there you go so we got a button here it's on click and then it runs the Greet function all right so now we'll just throw this over here there's our button there and we'll toss that over there and what we'll do here just for a second is uh we're just going to add a little uh padding uh p let's do like a adding like eight there we go so now if I press this GRE button what should happen is the Greet message will show under it um but we're not setting the name so whatever this function does it's not going to have that name so let's see if it can handle that and it can it says hello you've been greeted from rust okay great so what we're going to do is we're going to take a look at that function so if we go to main not main. DSX main. RS all right and it's actually not in main. RS it's in um lip. RS here shut up rust analyzer um so you can see that we have a function here right and we got ourselves a little format string here um I guess it's a little implicit return from this function so what we have is these brackets let us know that we're going to do some I guess what is it called string well whatever we're going to replace the brackets with uh this the string variable here right and then we're going to return it that's basically it um whenever you do add one of these functions you have to add it down here in this uh in this Builder so where where is it it's uh called greet there you go so we generate a Handler for greet right so now we're writing a rust function and we want to invoke it from the front end I already showed you we can do that uh so now let's actually pass it a value for name so this is this will be I guess interpolated and it will go in there right so let's do let's set that name how are we going to do that so we're going to need um an input box so let's let's add an input box so we don't have an input box so we're going to use Shad CN and we're going to do um p and PM DLX add but instead of a button we're going to do an input and we getting a nice pre-styled input from Shad cm to make our life nice and easy so now what we're going to do is we're going to say all right input all right and then we'll actually jump back here I probably should have done that uh what are we complaining about what shut up it'll probably work so now what we're going to do is we're going to just say the value here is equal to name and then on change set name all right um let's uh test this w yeah you know what you're right it didn't work uh let me think about this a second why wouldn't that work is not assigned to type change event handler blah blah blah oh okay well I guess we could change it that way too but whatever I don't want to write a whole other function for this why can't remember how to do like an input with react right now shut up lter it'll probably work W I know yeah it might be that I hate like all right let's do on click uh and then we'll whoops click unclear what is that this is why I hate um co-pilot there we go and so now we'll do something maybe like e dot or E maybe or e. Target or something the that maybe nope not that one either might be value there we go but it's not actually being passed though for some reason why can't I remember how to do this I do this like every day let's go to uh I tried target. value e. target. value that's probably it there we go yeah there we go all right stupid stupid moment there anyway so now you can see that it's being passed so we got e. target. value all right and now you can see ASDF is being passed there so we'll do like Chris great all right good so and don't blame me too much cuz I don't I haven't done much web development throughout my career so let's go up here now what we're going to do uh let me just pretty this up a little bit so what I'm going to do is I'm just put like a a little div here to wrap this and then we do class name and then we're going to do um Flex like this okay and then we're going to say actually the Max uh width is going to be MD maybe there we go and then we'll put like a little uh Gap X1 and then we got that and then we'll also do a Gap Dy das2 maybe and we probably actually need to do flex and flex call all right so this is what we got now so if I change this to aut don't no Tom and it works right so you can see how we can invoke functions um but you know it's not perfect like we have like we have to like actually invoke them as strings or like reference them as strings so that's not you know always ideal but eh this is this is just I guess what you really have to deal with now I guess that was kind of like all there really is to like starting it up and like getting started with like Shad Cen and all that um now I guess I'm just going to have to actually work with this and get it working how I want it to [Applause] work so let's do let me go see if there's any comments people going to bully me cuz I don't know how to use the input element uh can you change the background of the app um yeah probably yeah this was close do I need to know types for this I don't know suddenly that rust front end sounds mighty nice right uh you can use ref instead of State in this scenario to prevent unnecessary renders I need to get better at uh some hooks like that like I need to understand when better to use like use ref and use State and all these kinds of things I asked before can you share the types from the backend process rust with the JS front end I don't think so I don't think there's any way to get like good type safety there um so this is this is what we have to deal with unfortunately so now what I'm going to do is um I'm going to pull in a library where I can get some data and then we're going to like grab that data and we're going to try to like show it and we're going to try to create a blogging app that's like what I want to do at the end of the day um but I want you to be able to read blogs from people and I want you to be able to post blogs but I don't want there to be any middleman server um for the most part uh and so for that that's why I'm going to be using noer for this and that's why I wrote like a little library for it as well so if I go to react uh noer I guess yeah doesn't really exist on the internet yet so if I go to mpm this is my little hook Library react noer all right so what we're going to do is we're just going to install it like this so we do uh PN pm uh add and not that not no please I hope it didn't add like mpm add react noer all right um so now if I go down to my package Json okay okay we got that there so what I should be able to do is use the hook here and grab some events and grab like some log posts that we can see that already exist so I want to do um const and I don't know what I'm going to be destructuring from this yet but we're going to do use uh subscribe okay and then from here we need to pass it an event key and a filter so I'm going to say const uh filter is equal to and we're going to do um uh conss well actually let's type it that way we get the uh get the uh stuff filter maybe I should also install uh pmpm add noer pools we'll do import uh filter from noer tools and let's just because we're using this as a type so now yep that works and what we're going to want is I think we need to pass it a I'm not sure actually if we need to pass it a string it should tell me and we want this kind here and let's see here have I tried Elm no now what else we're going to set a limit to we start with maybe five put a comma all right so now our event key will be logs and our filter will be that but actually we you got to pass this as an object and then we'll say um event key is that and we'll say that filter is that and what else do we need vent key string filter filter but required what's the problem here relays is missing okay so now we'll do relays and then we'll do uh we got to pass it something here so WSS um need some relay string let me go see if I can find one probably have one hardcoded here components no uh Li constants nope oh you know what probably would be being here relays man do I really set them somewhere all right fine let's go to uh noer or we'll go to resolver this other app I'm working on geez this is slow what's happening um okay Source query and is there like a feel like I have like a store here somewhere for relays there we go all right so now we'll grab this whoops and this actually has to be in rray all right so now we'll destructure from that events and loading okay and now from the events that we get let's just do we'll remove this for now and I'm going to do what's the problem here okay and now what I'm going to do is um we'll do something like uh ul ul and we'll do uh events do map each event to we got to do this first I keep wanting to like I don't know why events that map each event to a list where we'll just map out the event ID and maybe not I don't know about the content but what's the problem here hold on a second okay that closes that this closes this this closes this but we're missing one of these there we go so now we'll do that and here we go all right we got some content probably the content is not good though in terms of just seeing stuff uh that's just going to be that so actually yeah let's do ID there we go so here is going to be our stuff why is it like over to the right also how do you yeah how are we inspecting elements into ruy I guess this is how we're doing that maybe I need to like Center this like uh items Center there we go okay so there's our blog posts um maybe we can do we're going to need something to like extract the summary but at least we have that going so far right uh what's my neovim client uh just a terminal I guess nothing special nothing special there so all right let's continue here so we have that now uh it doesn't look like much so maybe what we'll do is one second I got a message here I mean the UI uh I don't know what you mean by that um just using um my own stuff I don't know you mean like maybe the theme the color scheme maybe potentially yeah like the config is launch. envm which is like I did a 5our stream you can go back in my lives and you can see that and you can also check the repo uh but yeah anyway so we have that gone now what I might end up using like the rust apis and stuff like that for is like interacting with like local databases and like doing any like expensive um sorting operations potentially or anything like that like that's probably what I'll end up using that for but so what I really like noer like what I like that it gives me the ability is that it gives me like real data like real stuff that I can work with that people are actually posting um like and you you get users immediately like you you plug into the network and you automatically have users which is very nice um but there's not a lot of tooling built up around it yet so that's what I'm kind of trying to do with react noer like I'm trying to give like um a tool so that people can people can do stuff a little bit easier so what I'm going to do now is uh oh yeah I'm thinking like my site is like up here like not in its own thing so now what we're going to do is we're going to make this look a little bit nicer so that you see like some blog posts we're going to be able to like load more I'll probably end up maybe even setting up a uh intersection Observer so that you can get infinite scroll so let's let's see how far we can get with all of that um what we're going to need to do is create some sort of like little card thing so that that the the blogs look nice as they come down and they're not just like event IDs here um so what I'm going to do is I'm going to create a component uh I'm going to create a little section of components here I'm going to call it posts um or maybe yeah we'll do that we'll call it posts and then I'm going to create uh posts I like uh naming it in caps so posts. TSX and then we're going to create a post. TSX okay and so then what we'll do is uh for now we can just like print out like a post here so then we'll go to post and and I'm going to do um we'll do RFC like this we don't need that and this is going to be a post yep okay uh we'll give it some props so we'll say uh type uh props is equal to and then what we want to take in actually is an event uh of type event of type event and then we'll just close this off because that's all we're going to do uh so we'll maybe call this like log event just to I don't know maybe make it a little more easily understood and then uh so event is like a it's like a native type unfortunately uh but we're we don't want to use that one we want to use uh import um event from from also I hate this way I have to do things in JavaScript and typescript like import event from it should be from thing import thing that way I don't like that way I can get like autocomplete cuz like right now what I could do is like get rid of that and then I could do like okay from like noer tools this and then jump back here right and then I can do like e and then it knows event is a thing or that filters a thing or whatever right but it it should be from the package import the thing instead of like import the thing from the package I literally hate that so much anyway um so event uh it's going be a type okay and then what we're going to do is uh do that like this and we got our blog event here and so then what we're going to do is we're just going to put like we're just going to maybe I don't know uh we do class name we'll do and I'll just give it like some padding and then we'll do like um we'll do uh the we'll do like a span here maybe I don't know and we'll do like the uh event dot oh blog event do um public key and and then we'll under that we'll do another thing we'll do like uh I know ID okay just for now uh we don't need that there see if I got any questions here uh hey Chris want to say I absolutely love all the projects by you from zap to lunar Vim all of them made my life much easier thank you a lot for everything that's good to hear for those who are watching please drop a like so others can see this I agree thank you yeah we should all be liking how many people are here like 40 people like come on and you're going to see we're going to have like a cool little blog app by the end of this you know uh and local and with shad CN and all other kinds of neat stuff lame question I know but what mm theme is that um it's fine you can ask this these questions um so go to GitHub you can go to the lunar Vim organization and it's my dark plus theme dark plus theme dark plus. mm two stars away from 100 Stars here and you can see like I don't have the blue bar at the bottom anymore but um yeah so this is uh this is that I like it I think it's actually a really good uh dark plus theme I really have thought about a lot of weird things that really make this look good so I do recommend it how's it going Hydra uh right now I'm using launch JavaScript 20 years later still can't import things where python didn't from the start fair enough any plugins you threw in yourself uh tons now wrote myself not many but like added to my own config I have tons of stupid plugins added in my config one I really like lately is uh MVM UFO so you see how I can like very easily Implement folds you know it just handles folds so well so I could do like uh ZM I could do like uh Z capital r open everything up ZM ZR Za right it's kind of nice using Kitty as your terminal emulator uh yeah I actually am I was root rooting around uh through some of the issues cuz I was like trying to learn things and I was wondering why he didn't upload his cat or why he didn't upload uh his uh like he didn't change the the icon like it never uploaded a new icon but he actually Drew this icon of his own cat like n years ago and uh then I was like oh it's kind of cool are you using yep uh do you have a new mic setup sound different from the last streams is it better hopefully the sound is better anyway uh so let me uh make this small that way I can kind of see the chat there how can I no that is not what I wanted to do let's do ah here we go and then let's close this feel like things are a little laggy right now where we at not using like that much system resources see we're already like 10 gigs though so you're telling me like 40 gigs is a lot I'm sitting here using 10 gigs barely doing anything you can hear my voice more clear that's good what happened to westerm uh I like the tabs in Kitty a little bit better and so that's why I'm using that right now you prefer the fold column to be the third what do you mean by that the mic's death better that's nice newcomer nice mic's fixed yes thank God uh oh yeah I can do that you're right I used to well okay so I used to do this and I used to be on like a like a tiling window manager so this was like a difficult like thing to accomplish like just to have like a floating thing I would like to be able to change this thing's like z-axis so that like nothing like I like nothing goes over top of it but like I probably could like take it and put it there and then um then probably take this and put it like there yeah I know you can kind of see isn't the kitty version a little older in pop yeah probably I must admit you sounded a lot older with your old mic setup that's funny yeah you know I don't sound like how I sound like in the videos like it's weird like I'll listen to the videos back and that's like not what my voice sounds like in person which is strange uh just minimize the Chrome hey right we could I get oh minimizing is a new thing too look at that we can minimize stuff oh wow dude minimizing is like a completely like new thing for me all right so anyway now we got the chat and we got this app situation up here yeah this is all it's all good probably make it a little bit bigger not that not that not that this there we go also it's not Chrome you degenerate it's Firefox we don't use Chrome Firefox is going away soon I think I think I think it's out of here all right so let's do that uh actually we we'll leave it in the list element what the f anyway we'll leave it in the list element because uh if when I go to implement the intersection Observer um I found out that you can't really add like refs to uh custom components Z Chrome is for noobs what the hell is z Chrome this is Cosmic right you can right click on the title bar of a window wondering about the options this is not Cosmic like it's Cosmic technically yeah but it's not like the new cosmic like for instance I have a I can show you a couple things from cosmic so we got the cosmic terminal ah you know what this is probably going to crash my whole system but whatever I you know I guess it'll be worth it we'll see all right it takes a while to like boot up but like this is the new cosmic terminal from like the new uh the new thing like their new desktop thing it has like tabs situation thing here um you know there are things I do and don't like like about it like all these things that they're building um we'll see how it goes I you know I I won't like judge it too hard yet cuz it's not like ready yet but I mean it seems to be fast it seems to not be handling my icons well though uh you know what though I probably because I don't have the font set correctly but yeah you know I mean works yeah this is the new cosmic terminal here uh then they have a cosmic text editor they have a file manager too let's take a look at that I think it just takes a while because like I'm not using you know what they need to add is like like oh I can't move it okay here we go what they need to add is like list view nah see see you're M like I need list view oh wow what do I have to I need list view the fact it's criminal that we don't have list view so like this is fine you know but one more we need list view I should I should make a video where I create a wish list while they're still developing stuff what is this close with an arrow to the right that's a UI decision um their light theme looks pretty good too actually as far as light Theme Goes anyway there's things I do and don't like about it um if they ask me I I will I will expound like expand upon that expound upon that whatever ever it may be but um yeah there's things I really do like about it though so far uh what kind of thing am I building I'm building like a local blogging application it's neovim actually uh yeah no this is vs code uh then you can use like always on top for no oh that would be nice yeah we need something like that isn't it list view no maybe I don't know what the hell I'm talking about but what I mean is like uh that's not what I [Applause] wanted uh we should also look at the editor as well but takes a minute this is this is not because of their like this is not how you would expect cos like like it wouldn't take that long typically it's just it's because everything's still in like beta alpha alpha and uh I'm not even using it anyway so it's it's because it's an alpha but I'm assuming it takes that long uh but anyway so what I mean is like I want to click on this and then I want like another like a line to be there and then I want to continue to see this here but then I want to see the contents of this particular thing on the right and then I want to click on the next thing and the next thing and the next thing I don't know what that's called maybe this is View and then that's called something else compact list view maybe I don't know so yeah one way or the other um I I hope they add that I you know that that can't be that hard to add Ranger style yeah pretty much tree style maybe yeah like what Mac does yeah most people would know like how it how it behaves in mechos what am I build didn't I already answer this or was that the same question I'm not sure anyway what I'm building is I'm building um like a local blogging app uh that will work with noer so you'll see It'll be cool when we're when we're done with it it's like a tree but a list yeah it's like that anyway columns yeah column view column view that's what we'll call it um the last thing that I should take a look at quickly is the text editor that they have so Cosmic test text editor so we'll open that up this is a very bold choice to go with this uh go with like Light Blue for your front like your your foreground I don't know if I'm like in love with that but whatever anyway yeah I got a little text editor here can like write documents and things open a project blah blah blah I guess it's got get management view set different things keyboard shortcuts nothing opens settings fire mono ah we can change the little stuff there that's nice oh enable Vim bindings nice they have Vim bindings sweet oh okay we can use this instead of Neo nice all right I got my new text editor how's it going uh mince minam minam all right this looks like we got to we got to do something better than this this is this is not good so now we're going to do a post and we're going to pass the blog event as Ste we're actually import it like this and there we go so now we have that going I'm fine new to to to ruo to ruo to rui yeah yeah I'm I'm kind of new to toui as well I don't really know a ton about it you know there's not like a lot of information out there about terui like not a ton of people use it I think not a lot of people write desktop apps but I want to change that because desk like again like I said earlier I don't really want I we got to get the apps off of off of the internet they don't belong there apps don't belong in the browser I've had enough of pretending that they belong in the browser um okay so now we want to get like a you know what we want it to look like we want it to look like another site that me and Ma built a little while ago called a Blog stack. iio which the I think I'm going to lose the domain name for soon we'll make it look kind of like this so to do that we need the title and when then we need the summary so we're going to need a little utility for that we need to delete electron since toui exists now yeah we don't need electron anymore I hate electron based or like apps that run a JS run time behind them in general yeah well that's nice because this just uses JS for the front end which is nice how's it going uh West Westcott we need to delete electrons yeah the sole reason I switched any of them apart from the bindings was RAM usage rust road map I don't know what do you mean by rust Road road map like the road map for a rust well you just got to get 40 gigabytes of RAM like me you'd be fine then you can run vs code like me um okay so what I need how do I like see other instances of Firefox that I have open where are they where's my other Firefox is there it is so what I'm going to do is I'm just going to go grab some utility functions from this and they live maybe here yes so that's this junk we just need one that grabs the tag value T what the hell are you that one uh one second uh tag okay here we go function called tag um is this going to use SQL light yeah probably will be using SQL light um I'm going to store the events locally and then you'll have the choice to publish them out onto the network so then you'll be able to publish them locally here and read them locally like offline too and then um because you could just download all of the blogs that you want to see from somebody and then uh you could also publish them so that they could be on sites like blog stack or like uh obla do news so you can just like publish them to other sites like very easily and all right so now what I'm going to do is we need all right we got like a lib and we got utils uh I'm just going to put something called noer in here for now while I you know in the future we'll change this yeah so that's going to be that and then what we're going to do is get the Z title here so we'll do a tag like that that I I don't know if that imported it correctly but we want to grab the title from it and from the blog event like this import no from lib Minister what's your problem oh you know what I'm probably not exporting it and we probably want to get the type and blah blah blah can't spell there we go all right let's see did that do anything I saved it yes so now we have titles so now what I'm going to do is I'm going to change this to I don't know like maybe like h2 tag I don't know why this didn't change H2 all right and then we're going to give it some some information here so we do a class name um we will do uh text uh LG nah Maybe not maybe we'll just do font old like that okay uh yeah everything's going to be marked down by default so you're going to just write in you can publish from neovim too like you'll be able to publish from anything but you'll be able to read all of your markdown like inside of this app and then you'll be able to publish from this app that's my hope that's what I want it to be like I don't know how I'm going to achieve all that but I think it shouldn't be that [Applause] hard um okay so now we're going to want to go and grab maybe the summary for under here so now I'm going to do this well you know what no it's going to write it from scratch here so inside of here I'm going to do tag and I'm going to say all right give me the summary of the event from the blog event like that and there we go uh so now we can kind of like scroll through little blog posts that exist um now um let's let's do some other things let's actually make it like not look totally terrible so I think when we're bigger we can we can have a bigger we can have a bigger card there so let's jump uh back to PO what we'll do is we'll mark this file and then we'll jump back to posts oh it's not even in posts it's an app and we'll mark this file as well so now what we'll do is change uh this to be maybe like XEL or maybe like XL there we go and then what we'll do is we'll get back to the post oh wait we marked this so we can go like that now we have an H2 and we have a span there but on top of that we probably should put like maybe like the profile picture and such um so let's go take a look at how we'll do that or what we maybe want it to look like where's block stack here we go yeah they even have a good kind of way of doing it so on top of that we're going to put something like this so we're going to put maybe like a image tag and uh say source is equal to uh we're going to grab the tag uh picture from the blog event like that that looks great oh wait that's not in the blog event never mind okay this is the moment where I'm going to actually need to go and get the profile for the user so we're going to have to think about that now um so now let's let's do that so I have another hook for getting the profile for a particular user so we're going to do um use profile all right so we're do const we're going to destructure some stuff here probably we we'll get around to that and then I think what do I pass this oh that's there what's the problem then oh we're going to say uh equals what does it take takes a public key so it will be blog event Dot Public key now yeah well anyway that's fine so then we'll do comma and then what else I wish I had like the signature help thing set up I have to get the signature uh help set up and then we need relays and then this returns a loading and a profile so what we're going to do is get the profile event out of here and we'll destructure loading and then we'll do um we'll pass it relays so that would be in uh that would be in here so we'll just do that uh instead of that that we do like that and what your problem okay so now from the profile event we'll do like that and uh I don't know how to refresh this oh there we go oh man how come that didn't work um I should have gotten the profile event so let me think about this let's do console diog Profile Event we'll say Pro profile Pro Profile Event like that expect console Profile Event everything's there oh yeah never mind we got to we got to grab that out of some string stringified content so we're going to be grabbing not the tag but we're going to pass the content in so let's do um let's go grab another utility function what what the hell is going on um no finish event get zap in point Coins app request fetch invoice webn pay invoice encryp message create n there we go probably could have wrote this from scratch but whatever so now what we're going to do is we're just going to say all right export this and and we need the profile type actually I should have uh no maybe I yeah I do have a profile type okay nice so now what we'll do is instead of that we'll say profile content and [Applause] all right and there we go so now we have a little profile content there so what I'm going to want to do now is probably grab this all right and let's change this to like eight and we'll say rounded uh full and then maybe like aspect Square um I don't know if there's anything else I typically pass to that I think actually I have a good class name list for profile images and another app I'm working on I think this one has it so if I go to Source components header user profile maybe should be an image yeah class name this stuff H that's just adding a border though so yeah aspect Square rounded full and then I'm using the actual image component from them which probably shouldn't even be doing that probably don't need to pass it a border for now H yeah it's probably fine all right and then around this we'll do I don't really ever know if I should really do like a span or a div but I'll do a div in this case we'll pass that in there and then after that div uh let's do okay throughout all of this two let's do a gap Y 2 just kind of give ourselves a little bit of space all right and now we'll add their name so now I'll do a span actually that's not what we want profile content Dot name all right and we'll get rid of this font bold for now and then what we'll do is class name Flex uh justify Center nope uh what is it item Center there we go and we're just going to put some Gap X2 and there we go and now what we might do is I mean I think this is pretty good so far what else would I add to the bottom uh yeah I guess we could add like a tag I don't know how we're getting this four minute read 13 minute read thing that's pretty neat we got to get that hooked in here as well so okay in the top there all right how do we get that dot too I want that dot copy that dot all right and so then what will do get rid of that and that and that SP well let just do a SP a span where we'll just put this dot there we go object cover for the Avatar okay object I guess we'll have to type this cover maybe get rid of aspect Square I really changes much I'm a little annoyed by this guy's thing the other ones look good maybe all right if I get rid of object cover yeah that's much worse so object cover it's definitely got to be the move I think yeah all right and then next to that we'll just pop this and then we'll do um not the summary but we'll do the created well it would just actually be um do created app yeah now what we probably should do too is everything inside of this we could do a text SM object fill I think the other one was better maybe I can't really tell but maybe we'll be able to tell when we do other images later but I think I think that's fine for now uh let me try the fill thing for that one just to see if that improves not really that's fine I don't know what's going on with that one all right so now we have this created at there um also inside of this I'm going to do uh text muted foreground ah Maybe not maybe I'll do text secondary foreground I don't know if that really changes much but whatever we'll we'll work on that later and now under the summary we'll put a uh tag like that and on that really probably we should make this into like a badge so we could install uh badge and then we'll try that out we'll say badge sure whatever I don't know why that actually would matter I don't think I need this class name stuff and then we'll put um that inside of a badge that's not good that's because we have a flex container um not sure what would really help with that I do maybe maybe if I put like a div around it or something yeah the object fit CSS property is always tricky I never got it right from the first time yeah I don't know I just it's probably fine it is what it is anyway let's do um a different variant here maybe we'll do a variant I don't know what my options are default secondary destructive outline let's try secondary yeah it's fine I guess probably want to change our font at some point though all right it's kind of coming along uh another package I'm probably going to install is going to be uh pmpm uh add DJs and then there's like a way to format times and things maybe maybe we'll get around to that later I don't know let's see so close this let's take a look at how I'm using it in here no matches found oh that would be like in this particular file really what's let's try um the resolver test app uh DJs what I know that's working uh let's go to uh no opponents Bounty component Bounty Bounty metadata oh that would be we want like a bounty card I think uh no whoops no date profile content uh Here We Go From Now where am I pulling that in from from lib utils Li utils I knew I had DJs I don't know why I wasn't able to find that and then we'll just grab [Applause] this all right now we just got to grab also the relative time extension which I forget what that's called is it it's just built in I thought I remembered installing something okay so then what are you complaining about then oh I probably pull it in from let's go back this yeah I guess it is bundled with it I guess okay and that's exported so then now if we go to change the [Applause] time now if we take a look at that three hours ago five hours ago nice yeah looks pretty good uh do you happen to know why neovim is so laggy on large files while vs code doesn't get slow regardless of the number of lines of code it is as slow as it is but does not crash on large files like NE does um I really don't know I would assume maybe there are some limitations of the terminal or something else uh maybe they can just load pieces of the file at a time and then kind of I I I really have no clue how that would work um I think I don't know I I never really have that issue too much if I I don't really I don't know I don't find myself opening like insanely large files and if I do um there is a plugin that we have in the lunar Vim organization that like turns off tree Setter and a bunch of other stuff if you open a file that's too big probably some plugins slow it down I had no problem running on large files without plugins that's what I'm saying yeah like that's why that's why we have this uh Big File thing in the lunar Vim work so like if you if you run into this problem a lot this is something lost Neo fight made big file. MVM automatically disable certain features if the open file is Big so like it'll turn off like the language server tree sitter the indent blank line plugin illuminate no match BR turn the syntax off things like this should speed it up um but yeah you you can take a look at it it may help you right yeah I don't know I'm give well I would also turn off the buffer extension too for CMP cuz that probably um is not helping you let do a nice minimize there and also we'll minimize that okay so now we have this now also for the card uh let's do something like cursor Dash pointer so now you'll be like that and then we'll also do uh hover uh BG maybe secondary divide five maybe uh I don't know that's not even as bad I'll just do divide like maybe like 90 and maybe a little more I want it to be subtle yeah maybe you do like rounded MD there we go that's starting to look pretty good I think now what I want to do is Implement something like um infinite scroll so that shouldn't be too hard to do let me uh a second so what we want to do is when we scroll down far enough we want to reach like a particular like post and then when we reach that post we want to load more posts that's kind of the idea so we'll Implement that uh we probably also should put some sort of header up there maybe I don't know I don't really know what I want this like to look like it could have like a side drawer thing on the side maybe like something something like that or it could have like a header thing at the top I mean it's it's like a desktop app so I don't know what the best way to do like like we don't have to make it look like the UI of a uh your typical website um no design like figma nah I don't do design I just code it immediately and just guess everything as I'm going and I think it all usually turns out okay if I designed all this in figma I feel like I would never get anything done like nothing would ever exist I feel like this already looks like okay enough you know it's not the most beautiful thing ever but I'll like iterate it on I'll iterate on it in the future I've only been here for like 30 minutes doing this um okay so let's do well we could do a header we could Implement infinite scroll uh let me think about it either way we'll do one or the other next and then we'll create maybe like we're going to have to do like a router so that we can route to individual posts and we can and uh like actually render them and mark down so that's another thing that's going to have to get done page here let's see okay okay so what we're going to do is we're going to install a react intersection Observer so I'm going to do pmpm add react intersection Observer all right and so what that really means is that it's going to observe when I interact with some particular thing so if or intersect with some particular thing so if I intersect the second I like am there I've intersected with this element and at that moment I should trigger something right so that's what we're going to do now let's hop over here and let's do something like um I don't know I forget how exactly works but I think it's const it should we need to get the ref and from the ref we're going to say that that is equal to use in view you is that not I know I imported this thing let's let's uh I know I installed it import yes that okay it does exist it seems so we'll do use in View and then we're going to do um let's see on change and then we're going to do I don't know what the entry in this case would be I think it would just be in view that I need and then we'll say if in view um and it's not loading and I think we also want to grab the status out of here I don't know if that necessarily would help that much but whatever guard we can get we'll say if the status is equal to idle then we'll do we'll run the well we don't have a function yet and we don't have this attached to anything yet so okay so we have this function here and now you can't really add the ref here so that's why I have this wrapped in a list so that I can just put the ref on that I don't want to think about forward ref I don't want to think about that so we're not dealing with that um we're just going to do we're going to try to grab like the last element so we want to add this ref to the last only if it's the last element so what we're going to need to do is we're going to need to grab the index here I think the index is the second thing uh we'll type it all the way out and then what we're going to need to do is if index is equal to events do length uh minus and then this would be like up like from the bottom so we'll say like two so once you reach the second to last post that's when this ref that's when we're going to like that's when we want to load something um if that's the case then it will have the ref if it's not the case then it will be null and that's the thinking um now we're going to need to expose something else from here that that I baked into the library called load older events and with that what we'll be able to do is we'll be able to I don't know we'll write like a little function say uh load more yeah sure and then inside of that we'll await load older events but we have to pass the same event key so the event key there would be blogs so actually let's abstract the event key let's say const event key is equal to logs and then we'll take this can I just do like that yeah okay cool and then we'll do um event key and then at a time I'll maybe get three at a time and then we're going to close this and instead of console.log load more now we're going to say load more like this all right and now what I should be able to do is scroll down and then more will load and now we've implemented infinite scroll so now we got all these blocks which is kind of cool now if I go fast it still works and it's all coming over a web socket look at that someone needs to be impressed by that this was hard for me to do and understand when I was first learning how to do this but yeah it works pretty seamlessly and it's like professional scroll also some of these things need to be not allowed in but yeah like that's great um but no one cares whatever you these things on press you guys apparently everybody else knows how to implement infinite scroll perfectly besides me I was I was late to that party it seems so let's do um well now so I probably want to implement um maybe a little header at the top but I don't really know what I really want it to look like to be honest so I don't really know what like a good desktop app looks like we can have like a floating header [Music] thing um that might be neat that's a good point we probably should unload some of the previous ones well the thing is I don't have that implemented yet in my library I don't have uh I don't have load newer events so I would have to go into the library and Implement load newer events and then what I could do is um yeah once it reaches a certain number then I could unload some of I could pop some off the top there and then um and then do it that way you're right I should do that but uh not today not until I go to this library and I Implement um load newer events and then that way as you scroll up we can add another ref I guess so I I would assume we could like Implement two of these refs and then uh like just name them like a different thing like this one would be like uh load uh more ref you know what I mean and then we could have load or no load older ref and then we would have load newer ref and then load newer ref would listen on like the H which one would that uh you know what yeah we just listen near the top so we just listen to um like the first or second event that's in that list right and um yeah we could do it let's see how far I get today if I want to crack open the library and actually write the um write the uh load newer implementation but just even getting this right by the way was very difficult because there's some like tricky you need to handle when you're reading from multiple relays and you're reading over a websocket like there's just weird things that happen but but maybe maybe we'll get around to that today so anyway I need I need like a style for like a header for a desktop app like I need something I don't know I guess I could just do like a like a normal one but it just feels just feels kind of wrong I just feel like my desktop app should like maybe not even have a header maybe just have something on the side I don't know I guess we'll do it header for now so I'm going to do header like this and then we'll do uh header. TSX and inside of here we don't really have like the concept of like a layout in this I'm going to have to figure that out I I have um actually had a way of setting this up so that it has has some sanity um I have that in my escrow toi app that I built so maybe we'll take a look at that let me uh make this a little bit smaller no that's not what I wanted to do no that's going to do that again we definitely don't want to do that okay here we go but yeah we we'll implement load unloading the previous events once I have a load newer events function which really is the same exact function as this function it's just that um I mean you know I could even like Implement that function h i could like maybe pass an argument let like load newer or older I don't know what a better API would be like to give somebody like a singular function to run or to like give them two functions to run that like both the functions semantically like kind of explain what they're going to do rather than like one function that like you have to pass an argument that says either you're going to load newer events or older events I don't know what would be better in that case but anyway so let's do I'm just going to jump over here because I I have a layout that I like um no it's not in that organization it's in this organization um yeah if we just go to the source code here got pages blah blah blah yeah okay let's maybe set it up like that so then we have app in main there and then I have something called Pages like that we have components we have lib Statics stores uh we don't really get stores right now I don't think uh styles off is going to be another thing that's going to be somewhat complicated Styles we have that somewhere I think yeah right there all right and yeah then he put the API there so I guess I'm going to use react router I've heard good things about the tan stack router though tan stack router like I don't know if I should use the tan stack router or just react router because I know tan stack the react query from tan stack is really nice and for typ SC support builtin route loaders acknowledgements uh there's so much more to T hit the next button let's get started okay so installation and then a quick start oh geez what is this oh that's just a class name never mind I was going to say I thought I was going to be like uh anyway okay um um link to is it that simple can't be that simple it's never that simple okay wait this is the root Root Root route okay yep here we go now there's something like an outlet uh some Dev tool situation then we have an index route uh and about route which is a new route which goes there and then returns something I don't know comparison before you commit to a new tool it's always nice to know how it Stacks up against a competition strategy blah blah blah okay so we yeah what does it do repo Stars the most important thing um okay okay it does things that that doesn't do I guess but are they important to me so history memory Okay blah blah blah the first thing is type safe routes so I guess I'd rather have that file based routes um I guess I don't know yeah that's actually nice uh I don't really understand that auto route prefetching sure path Brams that's nice path Bram validation custom path brand parsing serialization relative navigation okay I think the syntax is maybe a little bit I like it's not bad so search pram scheme of validation I like that type save search perams yeah that's good okay full stack apis I guess maybe we can try it out I'm a little confused though like what the roote route is to start building your route hierarchy so I have to build this route hierarchy the outlet components used to potentially render any matching child components okay it's like a catch all all right maybe I'll try it out later I don't want to read about it right now um let's see here so well yeah I honestly hate I really like next js's routing like I like how that just works like all this other routing stuff just is it just kind of serves to confuse me a little bit I feel like I don't want to build a route tree okay relative all right all right maybe at some point so what we'll do is we'll probably just install react router and we'll just use that for now in the future I might draw out the tan stack one okay so let's add that uh PM PM PM PM add react uh router Dom and from there I think I just hooked it up in either main or app yeah we have to pass we have to wrap everything in browser router so we're going to do okay like that got browser router browser [Applause] router why can I never like import things like the way I want to on client toaster browser router all right and now if I go into the app I will have this available so I can just add these roots here I kind of need to get all this stuff out of here too cuz then we have routs we have the header yeah yeah we're going to have to we'll get all this stuff out of here uh what are we complaining about I think we're complaining about this yeah okay and I need to import this from here all right and we can protect routes but for now I don't care about protecting any routes uh I don't have a login or node I don't have a settings page that I need to protect uh we will have a um Blog Page like that and then we'll have a homepage like this and then this would be the N I assume and we'll get rid of that we'll get rid of this I guess no neovim yeah we're done with neovim moved on to bigger and better things no more window managers and no more neoven we only use uh uh desktop environments and vs code now so okay now we have contracts page instead of contracts page we're going to call this uh maybe homage maybe and let's see how our pages are set up so we'll go to Source Pages yeah okay so it's just simple pages so we'll do home page. TSX RFC all right and inside of that homepage should basically just be all of this currently trying to get the Tailwind language server to work with my goang template file um just pass it uh well I I would need to know what your convi looks like but it should be pretty simple damn that's huge can you repeat it again for me please why do you decided to do so I don't know vs code just works better for me um no but on a real note um this this is still neovim um and the uh desktop environment I am actually kind of like over tiling window managers at this point um I think there's nothing that like a tiling Window Manager really does for me that I can't like basically accomplish with alt tab um and I just don't feel like managing a whole entire desktop environment situation anymore like I'd just rather somebody else manage that for me well folder managers that looks like MVM tree but pretty sure it's not it is MVM tree you can see it right there see also it's very nice to add titles um so you see how like I'm working in tab like homepage right now homepage. TSX but then like if I open up another tab right and then like say I open up I don't have any other projects installed right now but like if I open up some other project for instance and then if I was like um you know let me open up this I see like I'm in Main you know and then I can like swap between them and know what they are kind of like that looks like vs code yeah I know yeah it's just the uh it's just the color scheme it is it is neoa but yeah it's not really um I what I do like about it though again uh I've explained this before but something that I like about um the file tree like if you if you are going to use a file tree uh turn on relative line numbers in the file tree and then like instead of like going like this to like get to the thing you're looking for like like trying to get there you know what I mean you do like like if I wanted to get to like um app. TSX there right like if I wanted to get there to 18 I could just do like 18j over you know what I mean so I think that's that's pretty good if you are going to be using a file tree I know file trees get a lot of hate but I like to see like kind of how my project is laid out so that's just you know for me personally why I like it but you you know other people don't have to like it if they don't if they don't want to you know um okay so let's get rid of this Towery stuff right now because we don't really need that we'll probably need it later and yes I think we're good vs code could not load that fast if I wanted to that's very very true you fooled me uh hey may ask in some of my code bases when loaded it takes a good 6 to 10 seconds to highlight all the code do you have any idea what the reason would be uh yes probably what's happening is your uh either Rex highlighting or treesitter highlighting doesn't match the highlighting that ends up coming from your language server so you'd want to make sure that your color scheme is consistent across rex or tree sitter and whatever the language server is going to provide and you can find that out by doing something like this you could do like over top of an element you could do like in what inspect like that and then you can see like okay is this only driven by tree sitter like this one's only driven by tree sitter so it's just going to be tree sitter but like this one probably is driven by the language server yeah see because this one's a semantic token so because this one's a semantic token it's going to be driven by the language server and so then you see like at LSP type function um now you you could get even more fine green uh I guess but you know anyway so this this is here and so that's how you know but this would flash for me because treat like like if I just loaded this like really fast like it like that would be light blue and then it would turn yellow because Tre sitter doesn't have the context to know that that's actually a function whereas your language server knows that that's a function Tre sitter can only assume that it's a variable CU I'm just destructuring it from something it's not going to know that it's a function rust analyzer is a language server so rust analyzer very likely gives you semantic tokens um I use the file tree to create new files and folders telescope for actual navigation fair enough what's your plan with your Mac you said a while ago you plan to install a new version of Linux yeah sah Linux I do plan to do that um I did install sah Linux but I can't stream from it it just doesn't work right so maybe in the future what you got me confused is that I saw that the file names were editable like in a regular buffer or oil am I mistaken uh yeah you I I didn't do that if it seemed that way it might have seemed that way because I'm using dressing so like you can see that I'm doing that like that's cuz I'm using dressing so dressing like actually opens up like a nice little pop up there for me all right uh rather than opening it down here in the command pallet situation but I do actually have oil bound to a key so that I can do things with oil if I want to I very much like oil I don't use it as often as I should but I think it's it's very cool um I'm only using treat yeah there is a experience yeah God of thanks yep yep yep so that's probably what that was yeah I mean you guys can feel free to like ask questions like I'm here because it's hard for me to stay focused writing software unless I'm like doing it live if I'm doing it live then I'll actually sit here rate software but if I'm not going to be live then I'm going to go downstairs and I'm going to get snacks and I'm going to go like watch YouTube videos or something so so it's better that I stay in front of this computer here and actually finish the stuff I I want to finish so that I can ship software um anyway so anyway so yeah we got the homepage there um we probably want to maybe remove this situation and and then we want to import that bad boy I got the towin language server to launch on Temple files but does not suggest any classes sadly maybe something in CMP we assume it's not CMP because if the language server is active it should be giving you they should be giving you suggestions like they should all just be they're injected under one thing in CMP they're not injected uh like if the language server is active it it should be there in CMP so it's not CMP that that's you know I've been wrong before but I'm going to tell you that that's what that's what I think um save this let jump over here and close that everything seems to be working but I'm not sure if it's like actually working could having two active language servers be the issue uh almost certainly not because like I probably have like three active language servers I have nulls running I have Tailwind running I have co-pilot running as a language server I have typescript tools which is just like a facade around typescript or TS server running I have cssls act active but not attached to the current buffer Json LS active but not attached to the current buffer and then I think um es lint could be active right now but isn't because I don't have the executable but if I did have the executable it would be active right now so like for instance I guess if I uh did uh uh pmpm add flag D flag d uh yeah es lint like this and then if I did um LSP start esent like that like it would probably be active but I don't know that I'm doing anything that ES would be mad at me about right now so like maybe like if I uh wasn't referencing this well that's only coming from TS server es lint should be active though I don't know whatever but what Window Manager you're using and what is that status bar this is the gnome 42 so no special Window Manager um so I I guess maybe mutter is my window manager I think it's called but yeah we're in a good old I look window managers for me at this point if I'm being honest you know my my take is that that they're just kind of a meme um I don't think you really need it so yeah so we're just just using good old gnome I recommend that if you feel as if you're not uh being as productive as you feel you should be to just uh not play around with the window manager stuff as much anymore and then just kind of like get out of there and do something else but that's you know I went into that in my uh I had like a kind of ranty stream like a few maybe days ago I don't remember what the hell I was even streaming about I think oh yeah I was streaming about popos like when I just like switched over to that and using arch with hyperland with one-year-old settings fair enough yeah I just don't want to manage my bar anymore I don't want to think about like that anymore like look this thing just like works you see what I'm saying like it gives me notifications it tells me when like lets me like play music very simply I have like a calendar or something it tells me the battery percentages of my Bluetooth devices that are connected and stuff and when I install things I can put Do Not Disturb to turn off them you know it's just nice to just have that built in and not actually like have to think about it and then also just the fact that like if I I want to come over here now and I want to like you know click on something like it all just works you know everything just makes sense and if I want to move between apps I just alt Tab and it's fine and if I want to like move like something to the left or right I just move it to the left or right and now when I open like extensions or if I open like this and I like want to break it out and pop it out like I can do that and also I can I can uh I can minimize app which kind of miss being able to do that anyway I feel like I don't know that's just my thinking I got your idea but I still configure my Arch once that's it did you have some problems that you decided to move on I just felt like I would spend not everybody you know has this problem but I would just spend a lot of time just goofing around like with my settings and stuff instead of actually working on instead of working on the like actual projects you know what I mean so I was just like you like I could still run Arch I still know a ton about Arch and I still know a ton about with all this kind of thing but like it's just not um it's just not something that's going to make me like productive and like get me to actually like get me to my goals of like actually creating software and stuff it's kind of a hobby yeah but like I have different Hobbies now I guess like I don't I don't want that to be I don't want that to take up my time because it was never for me meant to be a hobby for me it was meant to be like to for for me it was meant so that I could create a more productive workflow for myself but then I realized that I would like it was a detriment to my productivity and like speed working so I was just like yeah it's fine you know you can use a mouse every now and then having a mouse is comfy sometimes and I I don't really use a mouse that often cuz I'm in KN of him so it's like it's just I don't know that's what family and real life do you I don't have a family yet um and uh I don't know like I for me it's just not even so much that it's just more so it's it's more so that uh I just want to I guess I'm also in my late 20s so I'm I'm old now I heard that rant it was great great sound like me old man it was good right gotcha but yeah I I don't want that to be my hobby anymore right like I want my hobby to be like creating like desktop apps and like useful software for people to use like if I create a cool blogging app for people to use then I feel like then I'm actually doing something and especially if it more if it's more in line with like how like my ethos for software which I don't agree like I want to spread my influence in ethos for software because I don't agree with the way we're doing software today I like I really hate it I hate a lot of things about it but um one thing I hate is the fact that like uh like everybody uses the like we all use the internet like we're surfs and we're plebs and we're we're just like the unwashed masses and then the people who own the servers in the databases they're the cool people who get all the money and they you know they get all like they they can ban you and like f you you know what I mean but I don't want it to be that way anymore what I want it to be is I don't want there I want the server to be my laptop or my desktop and I want the database to not be even really a database I just want it to be a relay where I relay information from me to other people who are running servers that is just their desktop and a desktop app so then if we decide we want to communicate with each other we just ping a relay it could be any relay send it information then that information goes from my desktop to your desktop and Elon can go f himself you know what I mean and the old Board of Twitter and all those people can certainly go f themselves as well and uh I don't I'm not beholding to Elon I'm not beholding to some insane board who likes to ban people I'm not beholden to Zuckerberg or anything like this and I'm not beholden to anybody who just is running a server somewhere like I don't get why that is so necessary do you think Vim is worth it can we stop complaining up here thank you um well for me yeah I mean maybe not for everybody but I can't really make that determination for people right like uh it depends what your goals are like it's going to take you a while to get good at them it's definitely going to take you a long time to get as good as me as some aspects that I'm good at them but then again I'm not a particularly fast typer or particularly even good at idiomatic Vim right but I have my own way of doing Vim that is like my way of doing things and I'm pretty productive with it so I would say much more productive than if I was Point like if I was clicking and pointing and things like that with vs code I would get so tired of writing code if I had to do like this you know what I mean and like oh whoops I gotta get this like that you know what I mean rather than just like kind of coming up here and just grabbing it past you know like yanking it pasting it kind of thing like that's much faster for me or if I want to remove a line like and I know vs code has key bindings and stuff like that but most people don't learn those and even if you did become like a vs code power user I again I just don't even like V code like I don't like Microsoft I'm not a fan I want to like I want to subvert like modern Computing I don't like what we're doing I want I'm telling you what I like I want to change that so it's just like a key logger in terms of productivity I don't know it's good for me maybe not good for everybody uh I just want to be productive not spend hours on dot files exactly you know the only dot files I care about at this point are my newm config and my terminal config and like that's it I could be using any desktop because you know why every desktop has alt tab so I just alt tab so like if I'm if I have like another terminal open and I want to move between these two terminals I just alt tap well right now I'm well I would all til them and every single desktop every modern desktop has these abilities I can move between these same two apps just like this and then if I want to open up another app like the chat right now I can just open up the chat and if I want to open up one that hasn't been in like my you know it's not in in the last thing I used I just hold it and then I open that up right and now I move between these two and then I can move back between like the terminal and that app right so and that's available on every system so now at this point I don't give a what I'm using if I'm using Mac OS I'm all tabbing if I'm using gnome I'm all tabbing if I'm using KDE I'm all tabbing if I'm using Windows 11 or whatever I'm all tapping it's always going to be there so it's fine I don't to give a anymore about what I'm using um it just it's there for me a decentralized database yeah that anybody can run you could spin up your own that's what we want we call them relays are you mainly picking to ruy for its ease of creating projects for multiple systems or is there another feature you're looking to take advantage of um yeah the one thing is the ease of on multiple systems the other thing is that it is built with R and towel so that it's faster and not as much of a resource hog as something like electron so that's that's why what is your project right now what do you want to do or doing what I want to be possible is and what I almost basically have here almost I want you to write blogs locally and save them locally right and anything it could be tweets or blogs or anything you want right I I actually I got some of this um little like I don't know what call like it I don't know the way I'm thinking about it right now so it's been a while that I've been piecing a lot of this stuff together so like um so like first I got in a noer and I'm like oh okay cool like we can we don't have to like have like um we don't like anybody can spin up a database and we can all just use the same exact object that goes into the database and then like we're fine great okay awesome so so that gets sort of the need for a database but then if I'm working on a website so I was talking to this other engineer uh who's on like the the team that I'm on for some of the stuff we're working on uh for like various hackathons and some other projects and things and uh he brought up the fact that like yeah but like if you're on a desktop app like you don't need to you're not beholden to some guy's server so like for instance if I create a desktop if I create a website for blogging then you can like it could be taken down or I have to renew a domain name and I have to deal with all this and I have to deal with like the constraints of the web and and then I don't have necessarily good access to the user's file system and uh if you want to like do things like you need like browser extensions and all this and it's just like and and there's ads all over the web and you're being tracked all over the web and it's just like you know screw that like get all out out of that thing that thing is like a bot net it's spyware it's a nightmare it's blocking your access to things it's making you like a an internet surf you know it's making you like an internet you should be you should own your applications right and so like he brought that up I thought about it and I was like yeah that's like a really good point like why like I think we need to stop cramming applications into the internet and pull them out put them on the desktop and then only websites should be on the internet and I can just go back to the internet in peace and just read things on the internet I don't like I don't want it to be like my center for like all my apps and things like that I don't want to have to be worried that I'm going to be banned from a platform or anything like that either and I feel like we're just going to get a better ecosystem of thoughts and ideas not having to deal with that and I'd rather it too just be like nobody gives a anymore about like Twitter or whatever it's just like I have some app on my computer and then like I can just read like people probably still will because they're most of them are just lemings but um you know I could just read everything I want to read here and um post everything I want to post from here and I never even have to open up Firefox or Chrome or anything like that like imagine like you have like your app the the site the app whatever you work on it depends on so many things it depends on you having an internet browser which depends on JavaScript inherently which depends on someone else running a server which depends on all of the versions and all the nightmares inside of there right and then it depends on that server having Hardware running somewhere and then it depends on some database that's abstracted from you completely that's behind that server and it's just so much and we don't I don't know hopefully that makes sense I've looked into Wales a little bit yeah I might I might try that out in the future Anarchy yeah for now yes VSS code is good if you can customize it fair enough I again I can't use vs code on principle but that's fine if other people want to use it then I'm not you know if you're doing what you want to do um what do you suggest for Swift Android cotland development to get similar neovim experience is that even possible uh I doubt it what does this do in your config what does what do in my config so basically JavaScript is a crime yeah yeah JavaScript is a it's just bad but not really like the web browser is bad the web browser is bad and then you might think that I support like applications for phones but I don't because that's another Walled Garden the Pinnacle of sovereign Computing is the desktop application okay and it doesn't get enough love and everybody does doesn't pay attention to it for this particular reason that it again it's the Pinnacle of sovereign Computing is the desktop application something that I can install on a Linux desktop or a Mac desktop or a Windows desktop that's crossplatform that I can just install and that's it and I don't need a web browser other than to install it but I don't even really need that I can just use like curl um YouTube with blocking ad blocker Spotify asking for letting you skip music yeah gotta right everything every app is connected to the internet how does one decide which should be a desktop app and which should not all of them should be desktop apps you can read things offline because you can save all of this text directly onto a file on your computer this is going to cost megabytes for all the stuff that you want to keep it's nothing right and then the stuff that you just want when you want to connect to the internet internet and you want to read new stuff you connect to the internet you read new stuff it all just gets pulled like what I'm doing right here look watch see infinite scroll look right now I'm pulling down these events I'm pulling down all these events from a relay all these blocks boom see and then if I turn off my computer I save the ones that I want I could set it up so that I could save everything that I saw today and then I could Purge it and then I could like right now if I disconnect from the internet and I had a setting in here that said save everything every single one of these it's going to C on my computer and then I can just unhook from the internet and I can like get on a train and then if it just saved all of these and then I could just read whatever ones I'm interested in and then the ones that I'm not interested in could just uh disappear after a day and then that's it it's fine apps or Services right and that's the other thing it's just it's not good uh as a web developer myself I agree the web is bad at the same time it's very accessible with a browser you have YouTube Spotify Amazon and so many things it's not great but it's accessible yeah sure but why why shouldn't we just build them as desktop apps you know probably that's why it's winning the crossplatform fight yeah yeah it kind of is but again it's but it adds so many layers of complexity and it adds so many layers of you losing like it adds so many layers of you losing the ability to be in control of your data the ability to be in control of your identity the ability of you being in control of what you can and can't access so and also the whole time it's spying on you which is even worse make everything a desktop RSS reader yeah basically how's it going uh Ashish I don't know I mean if I sound crazy to you that's fine but this is this is what I want to see and so that's what I'm building all right um if you want to see something different then you could build that not on that level of programming but I got your idea unfortunately it seems like Utopia it's not Utopia it exists I'm building it right here it's already right here you're looking at it this is what I'm doing this is reaching out to a relay and it's pulling down blocks and that's it it's fine you know like it already works it already is a thing that works you know um I can polish it and make it better uh hopefully I'll continue to win hackathons and make money stuff doing it and then uh hopefully other people will realize this we'll get some sort of thing going and that's what we'll do you know thinking on my phone I'm very reluctant to install new apps the same goes for my desktop but on the web I can access many apps as many apps as I want that's also a factor yeah you can but if if we create a new class of desktop app that's better that's what people are going to want to use and again it doesn't matter that the stuff is on um it doesn't matter that these apps are on the web because they can be on the web for people who don't give a they can be on the web if you don't care that like you're beholden to a server beholden to a domain name beholden to a browser and beholding to the database that's behind that that's fine like you know you could you could do that um and the people who are even doing this they can have their apps be on the web as well but for people who want to like kind of like get off of that and they want to start actually using their local file system and like all these kinds of things like we can get back to that but yeah all the all the tracking is insane exact exactly it react fair enough but it's the easiest way for me to build something so I'm just like you might say like e popos e gnome O whatever but it's just like is it going to help me achieve what I'm trying to do the fastest I would even say o rust I'm not even a big fan of rust to be person like to be honest with you and performance loss you do lose performance too remember you are you're limited by whatever the hell your browser can do whereas if you have a desktop app you're not so limited you can use different programming languages too in the back end like I have a rust back end in this so I can do things that a browser definitely cannot do and I can interact with your file system at a much more intimate level as well it's not crazy it's just that I think everything moved to the web to bypass device performance issues lowcost device performance it's not yeah right so you can do heavy lifting on a server somewhere but I mean come on I think we're past that you know what I mean I think I think at this point now uh like these web browsers all this kind of stuff is built so inefficiently and like such garbage like it doesn't you're not you can barely make the case for it anymore I mean computers are so incredibly powerful now if we just had some good way to build desktop applications I mean they're going to run in insanely more efficiently right um damn it stupid thing um it liberated many people from being restricted to their devices power yeah but again I think I think there's there's a pendulum right in this case and I'm not saying get rid of the web I'm saying you still use the web but be aware that when that other things exist and you might want to use the other thing one thing I hate about Native apps is vendor lock if you want to be on Android you go through Google same for Apple yeah but that's native apps on your phone I said the Pinnacle of computing sovereignty is on the desktop that's where it is and I don't expect like tons of nor I don't expect a million normies to flow into this kind of thing I expect like people who care about this kind of stuff to show up you know what I mean and it usually is too that the people who care and show up they usually like make better content uh fair enough it's just an instrument so no reason to argue about it people are so funny I know yeah don't get caught up in the hole I know people do it as a joke right but I think some people take it seriously some people don't do it as a joke some people are like actually like you know if you're using some particular tool and there's no reason not to use it like for instance like I I see code is something like I I have a principle for not using it which is just like I think it's spying on me but I don't really care in the other cases oh I sound a little crazy saying that but I mean come on like uh they told you that oh yeah you know we're just going to casually buy GitHub no reason we're doing that and then uh oh yeah we're going to train our AI all of your open source code that you put on GitHub well basically we own that now basically we're going to train an AI to you know um on all of your open source code and you're not going to do about it because we have billions of dollars in lawyers by the way sometimes I want can't install apps on desktop so browser app helps not saying delete and remove all browser apps but I think that most people can spare a couple Megs on their on their hard disk uh maybe on desktop you're more free so far at least but who knows if that were the same it better remain the same off topic bro what do you think about PHP I'm using Lille as backend development and react as front end for web development I don't know at that point I would just do I don't know I I'm not sure for instance like I like the type safety that I get when I'm working with a like nextjs across the front end and the back end when I'm building on the web um I I I don't like unless you have some particular reason to use like another language like it's just nice to just across the same stack just be using the same language in most cases like I I don't know what like laravel really like buys me so I I'm not like heavy on PHP so I don't know what are you doing today uh we're building a desktop application for blogging every time I have to wait for like 15 seconds for a program reload I'm thinking about how it could be instantaneous right uh do you have this idea on page somewhere I don't see it on your blog so yeah my blog is like it doesn't get enough love I I keep these ideas mostly in my head and then when I rant and spur about them on stream that's when that's when they actually get out so will you put this project on GitHub of course I will you're not owning a machine Apple does yeah I agree with that I the reason I own an Apple laptop though is because um it uh it allows me me to like be mobile and not like like the battery life is really nice on it and stuff again I I think we have to incrementally take things back though like for instance like this is why I want to support um like system 76 and pop OS right is because like okay they're building Hardware they're building a desktop experience they're building a Linux distribution that potentially maybe like college students could use or something to like buy some like to be able to like pull some demographic back from using like Mac OS and all these kinds of things right so I would like to support them so that eventually when their Hardware become and I'm using I'm using a lemur right now like I'm using um for this I don't have my settings open but yeah I'm using popos and I'm using a system 76 lemur Pro right so like I want to support them because incrementally this is one way to win our stuff back right which is like instead of like all this like Window Manager and all this other nonsense like just rally around a company who is building hardware and building software and doing it at least somewhat more ethically where they give you the ability to like at least you know kind of get some of the spyware potentially maybe out of your chip because I know that they support like core Boot and stuff like that um so instead of like all this like infighting and wars and like using auntu you're stupid using Pap CU you're a baby and dumb it's like instead of that it's like I don't know like I'm supporting them for a different reason I I would rather Linux be like accessible to people and so they start using it have you tried spelt no I haven't tried spelt I'm not using Apple cuz yeah as a machine they're really good especially M3 ones but stories when Apple this scares me yeah yeah apples a little tyranical now I get your point desktop offline support is great and I like it it's just I don't think it should be just desktop apps I guess I joined in later and likely missed what you said about web plus desktop yeah I'm not saying that we should like I think we should just take some of the market share away from the web you see what I'm saying like I would rather the web not be the first place everybody immediately thinks to go when they go to all their social media sites and their favorite websites and their paper applications like I would like it if you know if I just had a video like sharing application locally like for instance if I had YouTube and Twitter and I and a blogging app that I could open up locally I would almost never open up my browser like I'd rather my browser just be for like reading like documentation you know yeah so I got a new battery for the system 76 um so I'm gonna try to mostly stream from my system 76 sometimes I may stream from the Mac too um but the Mac is good for when I uh when I'm like mobile like if I'm like want to go work at a cafe or if I want to go leave somewhere then it's better to have my Mac to get my work done faster um and not burn a hole in my lap look I'm not saying that the lam is perfect but I'm saying for the right kind of person it's probably fine and for someone who is willing to make the tradeoff it's definitely fine and there are people out there who are a little bit more ideological so and you know that's good hope you will write down your ideas and we will start the Anarchy I know yeah I already a manifest though uh you can use YouTube in terminal isn't there oh I don't know but even still it it's not like the accepted way and I don't want to like I I want like I don't I don't want to like me just like some guy who's like a power user to be using like YouTube FCF in my terminal I'd rather it be um and then maybe pulling it in like MPV locally or some like this I'd rather there be a unified way of doing it locally to where like normal people or at least your average even just somewhat techy guy sees that as a viable option and he would rather do it that way I'll tell you right now even me personally I don't want to experience YouTube through some through my terminal and then like MPV or something like this I don't want to do that I'd rather use the web at this current point so I need to ask myself am I using something because I'm forcing myself to use it for like an ideological reason or am I using something because it's genuinely better and I would actually choose it and that's where I want to get to I like the Apple machines are quiet yeah and cold quick question are you using buffer line in your config those are nice simple looking tabs no those are Kitty tabs actually I don't use buffer line I keep my buffers uh I look at them through telescope like if I have to look at them which I almost never do uh but typically I'll use Harpoon and I'll switch between them with Harpoon anyway it's been which my opinions have been shaped from Mostly finding out about Noster um thinking about the web for a while and then talking to this other engineer about like his view on desktop apps and then once I understood that I was like okay and that's been like rattling around up in my head for a little bit and I'm like and now I feel like I'm actually like I'm like yeah like I actually like that's that's right I think that's smart um but someone has to build it so you know you just got to chug away actually building it no it wasn't the prime how's it going uh liger Spirited Away was a great movie by the way I'm just looking at your uh thing I think that's a like weird creature from Spirited Away um so what was I doing sitting here ranting about what like what am I even talking about um where are we at so the app get rid of this junk here okay we got our base path like if I get rid of that is everything going to break yeah okay good that means that it works so now what I'm going to do is we're going to need a Blog Page so let's Implement a Blog Page so we'll say blog uh page like that and then we'll open this up and we go this we'll say block and actually have to go import this say Blog Page there we go so now what should happen is I'll click on it um and then I'll link to I like I'll click on one of these and then I'll link to a page where I'll get the markdown rendering of the blog that's kind of the idea uh yeah maybe I'll do a stream where I update my website what do we think uh I wrote it in Astro last time um I don't know I might rewrite it in Astro again I don't know if there's really anything I'd rather uh I'd rather do with it I should just upload the blogs but I just feel like I've never really had like a good system for doing stuff on my site I I don't know I got to figure something out I got to figure something out where it actually makes me like enjoy working with my website because I can't over complicate it if I over complicate it then it becomes not like a joy to work with but if it's not complicated enough then it won't be navigable and usable and a stream to write the manifesto together I agree with that we should write the desktop Manifesto um why am I not using events oh yeah we're not using any of this it's all gone all gone yep don't need any of this this now here oh oops get out of here and back Chris on your lib do you have aliases for the event types or is it still numbers um it's still numbers and I think it should remain numbers in my opinion that's how um we got Jeff's handling it and Noster tools yep it's going to take some time to get the control back though so just got to build everything and take some time to write the infrastructure and all this kind of stuff but yeah I think a good blogging app would be a good start you know and then also um the cool thing about using this protocol is you'll be able to post blogs directly from neovim or even vs code or even obsidian or whatever right like you'll be able to just post blogs directly from that and then you can just read them down into here yeah there did used to be names in the older one but I think he yeah he got away from that and he actually uh or released a 2.0 recently um all right how long have I been streaming well we still got a good amount of people here so maybe we'll uh we'll continue um well actually I'm hungry so I'm going to eat uh anyway if you guys want to support the stream um you know super chats our thing you guys can do by the way uh even though I read all the comments anyway um and also you can get a membership and there's other ways there's GitHub sponsors all those kind of good things uh my courses maybe I'll start making videos again soon maybe I'll try to make a video today who knows um what else uh tomorrow I will likely we'll see how far I get maybe I'll work on this maybe I won't but tomorrow we'll work on a nice little header situation uh we'll be able to click on blogs and open up like markdown and stuff stuff like that we already got look at this we got some nice infinite scroll going so that's very cool um and then we're going to have to eventually you know begin interfacing with the rust backend so that we can save these files directly to your dis um so that's going to be another thing we're going to do and maybe we'll build some other applications as well I'm probably going to be streaming uh building a bounty site um in addition to this because that's something I'm building for another hackathon so that will also be sometimes I'll just be working on that as well uh that probably won't be a desktop app right away but that's because we depend on an extension um currently but but that's why I would like to build that extension as a desktop app so that way you can you know use lightning or log in with noing and stuff like that on the desktop um but yeah so let me see with all the ker addblock outrage and stuff do you think we are taking a step towards control yeah it's a nightmare you got to get the hell out of there it's we got we we need to eject from the browser like now Sentry recently also wrote a blog post about removing ad cookies for the last 6 months yeah but you're never really getting away from it I mean they have a profile on everything you've ever done on the web so you never even if you're removing like cookies and there's gdpr walls and whatever else like look man like paler they know and they're saving all this and they'll use it against you if they need to um anyone will right Facebook whatever it might be um there's a reason they collect all this data and it's to make money and to do all these probably nefarious things and you know it doesn't need to be that way uh do you post somewhere about your hackathons Mission would love to see your passive missions yeah so uh one of the passive missions is like not that good I've recently only really been getting into like front end development or really like total full stack development recently but like some apps that I've built um are why am I not opening what I want to open is blog like okay so I I'll show you a couple here one that I built was blog stack which is similar to what I'm building right now this uses noer in the back end and so like you know you got all this kind of stuff um I don't know if this was yeah so we have a you have like blogs and things like that we can do here right and you know again this works with other apps that have the exact same data because we're just using relays so like h. news has the exact same data as blog stack does so like for instance if I go through um maybe if I click on this I I need one that has like a n maybe if I go to all yeah if I go to all and then if I go to like this one here and then if I take this n here and then if I copy it and then if I go to blog stack and then if I replace the N hopefully it should work might not this was again I made this when I was not really that good at things but anyway what should have happened happened was that that like should have opened so instead of that let's go the other direction so we'll I think it's because I'm only using a particular relay but if I take this one here gut feeling should we listen to our body right this this block and then I go over here and hopefully this works hopefully they've implemented better than me and I paste that in see gut feeling should we listen to our body so that thing is going to be on blog stack and also oo. news because we're just using the same we're using the same data and we're just relaying it around so like now we can we don't have to be dependent on one particular website for your blog or anything like that um in addition to that we can do uh things like like another thing that I built which is um not b.org and not bin is like a paste bin but you know it's decentralized so you can like paste like some code here and whatever and then you can go and see what other people have pasted in the note archive so people have pasted this kind of stuff right see and so you can see like who this guy's following and you could even zap him and send him money um with Ali so like if I had a this setup I don't know if he has his thing going but let me see if somebody else does we had an error there again this was built when I really was just learning like completely like had no clue uh maybe this guy I know that we used to have a thing here but even if let's see if we go back to block stack um I would have to be logged in probably yeah that's probably it actually start setup oh yeah I don't have my noer key on this computer yet anyway there would be like a little thing here and then you'd be able to send them money via the lightning Network that's the idea um other apps that we built is resolver doio so this is like uh without the e it's is like a bounty site on noer so like for instance you can get paid 880,000 SATs if you do this right so as you know Albi has quite a few useful tools blah blah blah so if you write some stuff if you do this you will get paid 880,000 SATs by the Albi Team same with like Fiat jaff has giv out bounties and stuff like that to do different things so there is ways to make money here and that's something we're working on for the hackathon currently but if you notice like I don't have like this more button like just doesn't work um so that's why I wrote this Library so that you can get things like infinite scroll in the blog app here so in the future I'm going to update this so that we got some nice comfy infinite scroll like that or maybe even just a more button that works uh what else have I built on this I think that's about it but I'm getting better at it now so uh I expect the stuff that I build in the future to be to be much better than the stuff that exists here today which I think is pretty amateure to be quite honest um all the projects are on GitHub I keep them under the node Tech organization so I wrote another thing so if you go to node tech.co this is like my little organization here which used to work you used to be able to pay people with this button right here uh so you can connect to webn and then like pay but like again I it just for some reason it doesn't work anymore I don't know why but anyway so you can see blog stack oh hacker. newws was another one I don't know if I have that hooked up but this was oh yeah never mind wait no strings is another one so no strings this was my this is going to be like my Flagship I think which is no strings which is similar to like Hacker News right uh but the thing is that since it's all using noer watch this so I can know when you put when you put a blog type note in I can know to link you to blog stack right and or to hbla or whatever right I know that when you put a kind one note in I can link you directly to a noer site that handles kind one notes like a Twitter client when you put a bounty in I can link you over to resolver and you can check out the Bounty right um and then you can do regular links too just like just a link to GitHub and so also the way that this is going to work is all the up votes and things like that the votes are all going to be done with the lightning Network so it'll just be paid over Bitcoin and stuff like that and then you can like support people with with that kind of thing um I also have like logging in like all kind of set up with noter extension so that's something I'm going to have built out in the future but yeah you can see this one works better I only load one at a time just because like this is all still like in beta so like that's why I'm doing it that way um what else is there I think that's really it that's like kind of my fleet of applications that I built over in 2023 I'm going to rewrite a lot of them and I'm going to be moving some things to the desktop now that I am a much much better front end full stack developer than I was when I started last year um and hopefully you know they'll get some love and some attention I can put them in hackathons and stuff like that um yeah no I mean definitely continue to work on it uh so basically all the news from No Strings can go to the site that serves noer well basically it doesn't even matter about the site like I I could just swap the site out in the future so for instance say unleashed. chat goes down well then that dat is gone and and the site's gone and you're beat but if this site if blog stack goes down what I can do as the the guy who owns no strings is instead of linking you to blog stack for this data and information what I can do instead of that is I could just link you to um where's a hbla we'll do uh ha uh habla news/ a SL and then paste it and I could just link you to h. news if blog stack goes away so now all those links are still going to exist even if someone takes down the website that's the idea so yeah so relayer servers and you can get data from many servers right and so that's a thing too we have all these different relays where we can just kind of post the data and like you know people it's much harder to get censored um anyway yeah so I figured you know all the blog all the data is decentralized even the no string site could go down and then a different site like the one he's building hacker. news could use the same exact kind and then it doesn't matter if no strings goes away you know so this is why it's all really interesting to me personally but you know hey we'll see where we go this year this is what I'm going to be building all year long um and we'll see we'll see how good it gets um anyway I'm going to go eat I'm hungry so again if anyone wants to support me you can go uh you know YouTube memberships get Hub sponsors super chats all that kind of good stuff um what else uh I will try to stream tomorrow we'll continue to work on desktop apps I'll explain Noster if people are interested uh you know obviously we're still going to be talking about like you know Neo and Linux and all that kind of good stuff um but yeah Dam you really get pissed by Twitter yeah well just in general the whole way that it is but anyway yeah so I'm going to get out of here I will see you guys in the next stream and yeah just like the video it's not hard like before you guys leave like just like the video is very easy to like like where is it I think I already liked it yeah so you can just click nine it can't be nine it's ridiculous if it's nine I was I going to say I'm going to stop streaming if only nine people liked it but all right guys I'll see you guys in the next uh in the next stream

Channel: chris@machine

Views: 4,564

Keywords:

Id: Doesub32hpc

Length: 190min 49sec (11449 seconds)

Published: Fri Jan 12 2024