Build with Ben: Finally migrate my website to Nuxt 3 (Live Coding + Q&A)

all right so I can hear myself this is great um all right so the audio is good looks like the camera is working so a couple things um for anyone who's kind of that's a little bit different is so I've set it up now so that we actually have currently streaming to both YouTube and twitch uh kind of testing out to figure out honestly what platform as far as investment goes um rather than sort of toggle back and forth on like maybe I should do twitch maybe I should do YouTube for now doing both since one of the things that I've always had a bit of a challenge with anyways is getting the streams up in a kind of timely fashion as I'm figuring out my own content production that kind of thing and so anyways we'll get into all that in just a bit so yeah we're playing around with a lot of infrastructure right now but it looks like everything is good to go so which is pretty exciting okay so let's let's see how we gonna all right so let's start from start from the top shall we so welcome everyone we're we're back it's I know it's been a little while uh we're back for another build with Ben session and so uh my name is Ben Hong I'm uh you can find me on the internet of things at bencoed Zen um if you core team contributor uh do a lot of nux Ambassador so a lot of my open source kind of things um also senior staff developer experience engineer at netlife I do a lot of stuff with the web but honestly the reason we're here today is because we're here we're here to build stuff um and so for those who you know I guess let me how do I do this uh so as far as you know for those who've been following along for a little while I know it's been a little bit quiet on the Channel streaming and that kind of stuff and a lot of it I think it's because I've been reflecting a lot a bit on my content production process and something that you know I don't necessarily outline anywhere or write explicitly is when I do things when I build things I'm really trying to just share the experience that I'm having with things I'm not particularly big on doing like sponsored posts um things that are like intentionally promotional or frankly just doing things for the sake of SEO and going viral um there's nothing wrong with creating content that way it's just for me that just hasn't has never really resonated and so one of the challenges I think when it comes to the content creation game for me has been how to keep that aligned with the stuff I'm genuinely interested in um and so because otherwise it can it can I don't know how do I say this it can get away from you as far as chasing the trendy things trying to figure out what's the next thing that will gain the most view that kind of thing the one thing I can always assure you when you come to this channel when you're looking at my content is everything is because it's something everything that I talk about is something I'm genuinely interested or excited about and if I'm sharing something that's you know I'm sharing either my experience or things that I've seen whether through Consulting through working with other people and I'm trying to share just the genuine experience behind either technology or the things that we're going to talk about on this channel so um in the meantime though one of the things that kind of got to me at the time when I was sort of in the midst of trying to do it all in terms of like streaming and then switching it over to YouTube and then maybe figuring out how to turn it into shorts for like Tick Tock or Instagram like it was a lot um because I kind of I kind of lost kind of It kind of like it kind of got away from me the content engine um I had sort of this perfect vision of what I thought things should be and to be quite honest I think I let honestly I let Perfection get in the way of progress and at a point and then especially when you know seeing some of the feedback regarding the fact that some of the videos either came off confusing for some people and that kind of thing made me realize it wasn't I don't know I hadn't delivered the content quite the way I wanted to and so I got a bit caught up in that but nonetheless um I had a great chat with Jacob uh Boulder recently and it was just sort of reminded on the fact that at the end of the day like what I'm here to do is offer you my experience my knowledge and just share and build things together uh frankly for this for this particular series and a way that's hopefully helpful to you um and that's the most important thing I can refine on it and we can make things better so that people can have an easier time if they're trying to follow along to learn something but I really want to create the space in particular this live stream as a way to just hang out do some live q a and just talk about things that you know we're interested in at um you know at a given point so that's sort of a little bit of an explanation as far as my time away and just sort of where I am as far as coming back to things but for this next part oh I see a club here in the chat hello how's it going um okay so this part I think we'll probably know I think I'm gonna I will plan to clip this because I think this is one thing that is a bit confusing for those who are who are new to the series or coming into the videos for this or coming to the series for the first time um so what is build with Ben that's kind of the big question here um uh uh oh I don't know if that actually worked hold on one sec nope all right I was trying this highlight clipping thing from streamlabs but clearly that didn't work as expected um oh I uh so quap here I apologize if I'm mispronouncing the username I recently built a dice rolling out with next year it was a blast uh that is pretty great I would love to see that if you can either I think the chat should be okay to drop a URL but if not either like um you and I can figure out a way to touch base but I always love seeing what people build um the different ways they're using next three and review and honestly in general these days because there are so many different ways for people to architect things um and so it's always fascinating for me to see how people are doing things so we'd love to see that when you get a chance thanks for sharing that okay so as far as this section um we're let's talk about build a pen that's actually what I need I want to take the chance to explain I'll cut this into a shorter video for those who just want the short explanation because all right so filled with Ben what is this ultimately all about this is a series and space that I created honestly so that we can code together uh this is not a polished tutorial in the sense that like when I come up with a topic of as far as what we're trying to do I want to make sure that we actually we have to learn together basically you're gonna watch me think about things live try to sort through things work through documentation and so as a result what I will say is who build with Ben is not 4 is for anyone looking to learn something as quickly as humanly possible so if you want like a quick tutorial like let's for example let's say um you know especially want to get back to it like the Trello next three app if I'm building it with me that means that I'm thinking about it live I'm thinking about trade-offs I'm making those decisions and they're you know we're going to go back and forth on things um so it's more of a discussion really about building things together rather than a tutorial on how to do things like first we're going to do this we're going to install this dependency and we do this thing like those I think can come with time and I'll be sure to share any like lessons or stuff I do especially with like view Mastery front of the Masters any of those more polish tutorials and obviously those will live um and on the YouTube channel for example if I do any polish tutorials those will exist in its own video but as far as the build with Ben series I'm gonna try to be very clear going for it that these are basically live q and A's and so people hopefully come into this with the right expectation and know that this is really just the time for us to spend time hang out and um you know for those who can attend live submit their questions and then once I get the infrastructure built out for those who want to submit questions ahead of time just a chance to kind of get that content out there sooner rather than later because you know spec you know the time to sit down and record these questions and do a whole published YouTube video as much as that's in my ideal currently that is like that's like the perfect world and not quite there yet so in order to make progress we're gonna keep this space open for that and then in the meantime we'll kind of iterate and move towards that um so anyhow in the meantime that's kind of like high level on what building Ben is and so that is good all right um that said the the thing would build a band that I do want to do differently though is while this is a live q a and hangout session I will try to actually have some sort of objective at the end of each build with Ben so that there's sort of some beginning and some sort of resolution um by the end of it and so I guess to kick things off what we're going to do today is as this session is is we're actually going to finish the migration of my site it's been on next 2 this entire time and I've had different multiple false starts as far as trying to figure out how to get it to migrate over but today we're gonna in a span of I don't know I think I have about like 34 minutes we're gonna just get it to the end um and so yeah let's just let's just jump right in let's not uh uh oh I see Yorick here in the chat hello how's it going all right let's switch on over so live screen switch okay cool so our objective today we are finishing with the migration so let's go ahead and do that shall we all right so there we go let's close up some windows right I was doing some checks earlier there we go okay perfect oh snap I see Daniel in the chat how did I miss that I guess streamlabs missed it oh wait hold up oh I see Connor in the chat too okay this is gonna be tricky um so I'm testing out streamlabs as an infrastructure right now and clearly it's missing some of my chats from twitch so I see dude man hello how's it going balaya hello hello Conor Daniel okay this makes a lot more sense now okay uh I'll need to figure out how to get all that all that up and running but anyhow um glad to have you all along for the journey okay so we are finishing this migration once and for all because it has been plaguing me I will tell you right now so let's see boom we have that up and running I think I got the zoom at a good level so let me go ahead and now let's open up Arc boom let's uh okay let's kind of just so people have context because it's been a little while for anyone who didn't watch the past ones basically this is my site right now it's powered by next two um but here's here's the thing and this is one of the things that was honestly kind of dragging me down as I was like trying to figure out how to do my content production is there Parts about this that are just broken right now and I was like I have to fix all of this before I start creating content again you know regarding the schedule right the schedule page is completely broken um and so I want and so rather again Perfection is the enemy of progress so let's get right to it we're gonna get it up and running back to the next three infrastructure it won't be perfect but we're gonna it'll at least put me on the platform as far as being upgraded to the latest and greatest um and then we can just kind of go from there and keep iterate on iterating on it and making it better so given that let's go ahead and do that so I'm just gonna go ahead and I already have started some of this work so again this is not a true to what I mentioned earlier this is not a true tutorial whoa I see Anthony in the chat hello how's it going um all right so boom we're opening that here okay so once again so the key thing here as a as a reminder is this isn't a full tutorial of a migration but you're going to see my work in progress we're going to get this up and running as we go so basically as we can see here if we're looking at what we're working with I already have the next content two already in here basically it's compatible with next three uh okay next image Edge I do know if you haven't seen the tweet from Daniel uh they actually did release a next image uh release candidate one so I don't think we're gonna get around to that today because if I'm being realistic um and focused because that's that's the sometimes the hard things with coding isn't it is that you'll get really excited about something you'll have this objective and then you get distracted and you'll be moving on to something else hey I see 0x now here in the chat what up how's it going okay so all right so we have this um overall the site is actually holding up there was a time where I was building this and migrating and that everything was just basically broken but that is not the case right now so thankfully let's go ahead and take a look at what else I'm gonna try to finish before I switch the deployment over so that next three is running um that's the latest and greatest and we start building stuff on top of that so first thing first I need to look at the schedule page again because golly gee I really am tired of it being broken so let's go ahead um all right I have a basic add to calendar subscribe on squid twitch uh upcoming okay upcoming is broken this makes sense because this was an upcoming list that at one point was basically fetching a serverless function from netlify that's how that was working so I think it was let me collapse some stuff so that's easier to follow uh here we go it was events I had this whole events client where I was like syncing with notion trying to figure out how it would work and it was working at the time but I'll be honest the maintenance on it I didn't quite figure out so in the meantime while I figure out how to fix this right progress over perfection we're just gonna fix this up a little bit so what I wanna so this is not a component yet because I could definitely make this at one point but okay so we have a couple of properties here that I'm gonna see can did okay we did not figure that out yet okay great let's make this a thing script Lang TS script setup Lang TS great let's take a look at this real quick we have an interface we're going to do event and so yes since um for those who haven't been coding along with me in a little while so I'm starting to sprinkle in typescript a little bit into my code base I know it can be controversial for people who are have been hesitant on the typescript uh bandwagon but the way again the way I think about typescript honestly it's just a way to document the code that I'm writing and add just some autocomplete to make my life easier like that's as shallow as I'm trying to think about it rather than thinking of it as this like complicated type system that needs to be like shared everywhere like Progressive enhancement is kind of what I'm thinking here so to document this clearly we have a title that's a string we have uh some sort of recording date start apparently uh I don't okay recording date start sure and then it looks like co-pilot figured out the rest of the structure here recording URL okay fine I can deal with that for now um okay great and so we know for example we said that the thing was upcoming event lists and because we're in next three this means I don't have to uh import like the ref from V3 which is great so I honestly I gotta say I was skeptical at first about all of the Auto Import um components and that kind of thing because there's something to be said about being declarative about what's being brought into your file but I gotta say there comes a point where understandably so especially in a code base where you expect people to be familiar with a framework I do think the Auto Imports that I think Anthony fuen along with the team kind of made standard inside of next three is absolutely fantastic so okay up Connor said okay great back to normal okay good sorry I was delayed on seeing that cool um did you do okay great read only boom all right so okay clearly chat management between the two different streams gonna be something a challenge I have to work through but in the meantime all right so we have a series of events and there you go just like that this is good great uh pretty simple so what the nice about this is now that we've done it like this when we come inside of here we can see now that our event is no longer just that any object and so this is what I meant by Progressive documentation I'm not doing anything complicated to be honest in terms of like creating reusable types and thinking about these organic type system I'm really just helping myself that when I'm inside of my template and I'm working out things you can see that it actually is helping me know what's actually here and there's actually a helpful error actually right now um which is that there's no ID and there absolutely should be an ID so let's go ahead and just jot that down here and then there we go no errors fantastic so in the meantime again I would love to figure out some uh call it I would love a way for me to do this in a way that's very sustainable and it's a beautiful infrastructure in terms of sharing things but for now we're just going to get something up and running because again the schedule Pages isn't broken and so any idea that I had regarding like how things should be managed it's honestly if we think about it it's honestly a lesson in building things for your users and reminding yourself that even though it's easy to get caught up in infrastructure for like oh this is not efficient it's not optimized if you're not shipping stuff that's actually developed if you're not shipping stuff that's delivering value to your customers at the end of the day I can quibble all I want about the fact that what I'm about to do is like a very inefficient way to manage data but let's be honest my schedule page is broken right now so it's absolutely useless to anyone and so one thing at a time and so let's go ahead and just uh let's do this right now and so what do we have uh ID one I no let's not do that I'm gonna use text pastry ID which you haven't used that in vs code love that it generates basically like a little hash for you that's actually a uuid and so today we did a build with Ben series and I think I had it as migrate my session or my website to next three and then as far as dates go 2023 0606 great and then I time zone I wanna I'm in Pacific right now I don't know is that five no that's probably three two eight I don't know I'll figure that out later but in the meantime we know that this started I was trying to start at like 2 30 so 15 or 3 30 2 30. I can't math right now okay 230 is 14. okay great okay great let's just let's just have the start date we actually don't even need the end date I don't believe because I don't even yeah I don't even call that right now that's there that's that that's that uh date oh yeah right the type is yelling at me that's fine URL fine let's save that okay look beautiful we see something on the page that's useful to people granted I want to figure out a better way to oh I did that already ha excellent um the up the there was a part of me that was like well No One's Gonna Be able to read this how do they know it's in their time zone well luckily since I already did the new date here it's already showing basically what I want there in the okay yep perfect boom um um how's it going hello hello uh okay PS PST away sorry I am forgetting anyways got distracted but hello PS TOA that's the thing about username pronouncing them can be tricky okay okay so we got this um clearly actually the recording URL is changing now because I'm doing YouTube and twitch and so we can just make a slight modification to this where it will be an array of strings and so I believe the YouTube one I already copied this should be this so for now let's just do it like this um nothing too hard about it boom okay so that's being literal and then we can switch this to an array of strings that's now not yelling at me this is great and then we can honestly for now let's just UL that didn't work u-l-l-i drop this in V4 uh [Music] let's call it uh platform in recording an event.recording.url recording this is why we love autocomplete because otherwise we can't type URL and so for those if you're new to that that's I'm doing control space that's how I'm autocompleting and then from there we should now have just the platform that should be able let's see let's not even worry about the href right now okay not terrible uh yep that'll do for now um and then we can actually oh we can bind it directly to the platform okay and then I do want to make a micro Improvement on this real quick because it doesn't really make a lot of sense so we can just have a label and uh for twitch and then the URL I think this makes the most sense data structure wise to me boom Boom YouTube and then we can call it a day because it'll be platform.urlplatform.label oh I broke something what did I break uh it doesn't yeah I think that I do URL label nope didn't like something what did I break not assignable to type string that shouldn't break this though I don't believe because what did I do I messed something up yeah label URL what's the problem hrev platform.url does not exist on type string nope that worked okay so that was just a weird compiler error this is yelling at me correctly though because what do we say we told it that it would be a type string here so what I could do again just to fix this at the moment is I can say um I don't know we'll call it streaming platform is really all it is uh I don't like that uh event URLs I guess event URL sure let's do that right now uh event platform event destination what am I doing okay don't overthink it I'm doing that thing okay we have to remember our goal here our goal is to submit something useful I can quibble over the name once this has been shipped okay twitch great migrate my uh great okay great and so we're gonna do one more thing though because we want to ship something that's useful uh I'm gonna go ahead and I'm gonna do one more event and we're gonna say oh it's not autocomplete all right very well all right so uuid great title and this will be so this is the official well I guess I announced it on social media already but in terms of having it on the site uh obsidian office hours is coming back we're going to be streaming tomorrow so you heard it here first uh we'll be talking about bookmarks which is one of the new functionalities that came uh similarly though to the bill with Ben uh similarly to the build of Bend format that is really about live q a so I will be giving like a more like an exploratory part on obsidian bookmarks and then in the future if you want to do polish videos and stuff we'll figure that out um so boom boom boom recording date start and that will be tomorrow which is the seventh and that will also be at uh 2 30. that is the plan right now okay great and then recording oh that's that's why I've done that I remember now courting URL and then so for now I can do okay so this is a you you're out specific to that so there you go that's good URL no that did not like that because I messed something up oh yeah why did I do that again recording that that boom okay great we have the obsidian office hours we have the build it then this is great um what else do I want to improve on this uh okay so actually you know what micro commits I'm all about micro commits we have something working now okay so I don't have all the past events so you know what we're gonna do though we're gonna open up trusting obsidian here and I'm gonna go inside of my Ben code Zen website and again this is kind of a mess right now but for now I'll be like users should be able to see all past events from live streams and recording this is definitely a to-do that I'll need to look into at some point but that is not a job for today we are here to get something shipped so what do I got to do do um oh right I was playing with the content API all right so git commit feature user can now see upcoming events okay the problem with this though at first glance is the fact that um at this point once this time passes basically the build-a-ben will no longer be upcoming that will be inaccurate to our users so we need an ability to have a past event section so what did I do for that let's see past events I had this at one point but I think I deleted it in lieu of trying to just get something up and running but again here we are so we have past events and so at this point we can pretty much copy this well I did not copy everything that I wanted in there so this is already repetition number two so there's almost something to be said about probably componentizing some of this but we earned we are getting to our destination I have to keep reminding myself that okay so knowing what we know now we know actually for the fact that uh at this point upcoming event list is inaccurate this is actually not the upcoming event this is really just at this point just the event lists and I guess to explain the naming for anyone wondering uh we could just call this events I think this is what most people would do uh over to I'm still playing around with this but because one-off errors are still common in programming I have found that sometimes leaving us off the S is an example of a one-off error so an event list is just very clear that it's an array to me a list of arrays basic or sorry a list of events is how I'm thinking of it so call it a kind of self-documenting type in a sense if you think about it uh it actually I didn't I didn't really think about it until now but it kind of is that essentially at the end of the day okay so we have this event list but we still have upcoming event lists that we're actually using that is going to be the computer property and so from there we can basically say event list dot value and then what we're going to do is we're going to filter uh oh boy can it actually do it new date let's go co-pilot what do you got uh Now new date great event new date okay if this date is that okay let's see how good this is so upcoming event list that's fine and then what we're going to do though we're going to go ahead actually no I won't get ahead of myself let's test this first so the way event date is recording date start that's fine so let's change the data real quick let's change the build with Ben so that it is definitely in the past it is June 5th okay if it is June 5th it is no longer appearing okay you know what that's good enough for me um although I get it this is why I had the end date to begin with because I didn't want people to come to my site while the event was going on and be like oh it's is it still going on so again my brain is thinking about ways to automate this so that like when I end my stream it kicks off a trigger hook to save when it actually ended so that it updates that's fine one thing out of one thing at a time so um what we are gonna do though oh hello I see you we got Calvin hey thanks for the subscription um for subscribing uh okay so what we're gonna do though we're actually going to add that end date back in because I actually do think for now that will work out in our favor so let's just do this and let's keep it simple we're just going to say uh so again this this is in Pacific time so it really should be this and then uh generally which for now we're shooting for the hour for the obsidian office hours and then we're gonna shoot as well start and and we're gonna shoot this is also shooting for roughly an hour because we're getting started that is the key point of all this so rather than it being about the event date uh so it'll be the event end date and then we'll do end here and then event and date like that okay so now this should allow our upcoming to show up as expected so if we refresh everything looks good and now we should be able to honestly just flip this pass event list and then we just flip it like that and then it should now replace this part pass event list and yeah and then okay uh oh there's an obvious check here uh V else uh well I was gonna say technically we need an empty state where if there are no events in the past it won't show up so really actually rather than that I think the easiest thing would be to yeah let's do this I think whoops we're gonna wrap this inside of a what happened to my there you go uh wrapping this in a section and then this section will basically be uh V if past event list that length is greater than zero basically that's all we're trying to do okay so basically there are no pass stuff right now and then when it does it'll show up this is great my great website obsidian bookmarks first look all right I'm gonna actually change that real quick all right first look at obsidian bookmarks okay great okay pretty happy with this overall so we have something useful to ship to people so let's actually finish this now um to uh to schedule yep uh it does not switch over okay that is good feature basically add ability to see uh to properly see what events are upcoming and what our past okay cool uh there are some things I would like to do to make this a little bit easier to read let's see it's 3 20 right now still have a little bit of time to check what other things are broken before we just flip it and ship it uh and so what I do think though as I'm looking at this I've always thought this part was a little bit harder to read because it's fine if you know the series you're looking for but people usually are looking for the topic so as I'm thinking about this structure it probably makes more sense for series to be its own string and then for basically like the series and then topic because that's what the title is ultimately built up upon they're built upon these two different things so now that I'm thinking about it like this instead this is probably where my head's at um when I'm restructuring it there we have that and then that way we have our series here um this will also make it I think easier to filter in the future when we're actually looking to because I plan on having actually dedicated dedicated Pages for View and obsidian resources because I know that's kind of a fork in my content at the moment we have like kind of the productivity note taking stuff we have the coding stuff and there are overlaps between the two but there are times where people and would just understand me so want to focus on a specific thing if that is the case that's totally fine and I want to make it easy for them to do that because right now everything is kind of mixed up together so okay that's good that's um title is now gone which is totally fine because what we're going to do inside of this title we're going to go ahead and do the topic and then we're gonna do the whoops I messed this up series and then topic great that looks pretty good but what I want to do though I gonna break it here and then here I'm going to want to do a class of series and then like that oh I do not like the way this reads okay that reads much better how about this can I do this okay that that looks close to what we're expecting here okay so now that we have this we need to just style this real quick and so I'm just going to add a title series to this so this is just a very specific style we're gonna font size let's just make it a bit smaller and then well that's a little too small one sure text transform operator case save eh that didn't work oh typo I was gonna say I was like my CSS is not that bad better okay um something slightly off to me and I don't know what it is it might work you know what though maybe we dim it a little bit color CCC just like yeah maybe just like a smidge a conch trash CCE uh wait e is closer to F sorry explain what I'm doing I'm trying to figure out what gradient of gray I want CCC is usually kind of in the middle um and for those that don't know FFF is your pure white so d e be a let's do that uh it's a little oh I did not mean to mix that up BBB okay good enough a little bit of distinguish visually I kind of want to focus users to focus on this piece and then the last piece of it to be honest which yeah I don't love the way this line breaks to be quite honest so let's see let's see how smart uh co-pilot is on this regard so if I want to say uh format event okay formatted event date can you figure out okay it's going to take a string low color string weekday number wait what does this look like formatted event date so if I do this instead I do formatted event date like this and save it okay that's pretty good but I need the time add time foreign okay let me do this with time I'm playing around with what we're doing here is we're playing around to see if copilot can actually predict what I want okay got it so it looks like we can just extend it a little bit save that refresh okay 2 30 p.m 3 30 p.m oh okay that actually revealed to me a slight bug 230 okay right because of the time zone thing I did here seven two okay great however can we add time zone all right we're gonna try this one more time uh let me do this for the date with time zone okay what do you got for me go co-pilot uh put can I just display the time zone this is where all right let's go let's go to some docs at this point I think we're at this point prams locals local or locals locales um I mean technically it looks like you can import it as a string the hurry up I mean what up how's it going um see Calvin here in the chat hello yes I'm glad you caught the stream I know that sorry I meant to I didn't know you did this I did the shout out to you earlier but I'm trying to I I realized I need to get another monitor with a chat here because right now the chat is down here and it is not intuitive for me to look down here at the moment but progress over Perfection that pop principle that is perfect this is exactly what I wanted uh the only thing I might change to be a little different though is rather than the weekday being long I just want to keep it short so it's easy to read Wednesday June 6th can I what other options are there for today okay again autocomplete gotta love it uh oh it does not two digit numeric I was kind of hoping they had like the the how do I call it like the human version of it would be like June 7th add the th to it but it doesn't look like that is an option yeah that is not an option all right that's fine numeric it is not a big deal uh the last thing I'm going to think of is whether or not we really need the year one could argue that for the current upcoming stuff no upcoming stuff can even be in the future in like next year so uh I'm I'm sorry I'm honestly starting to optimize a little bit here so at the bare minimum what I'll do because this will at least generally be useful we know month day year and then numeric let's just do that that way there's this for now there's less confusion I'll figure out the user experience I want to do behind all of that but in the meantime that's what we're going to do yeah yeah Europe is older than 12 months yeah I think I'm gonna eventually refine this where like if I have like people want to see what's coming up next year for example like if I start having like conferences schedule that kind of stuff I'd love to let people know but at the same time I wouldn't want the most recent thing to sit at the top so that's one of the things where I'll need to rethink the design of this and how to make it easier for people to get what they want because I would my hypothesis at this point is most people coming to upcoming want to know like the upcoming month or the basically like what's something that's more or less actionable to them rather than like in the future so I don't know we'll have to think about the design of that but we have something that works right now that's what matter and more importantly the date is not ugly anymore the number of times I've seen that date and I'm like it's fine I'll deal with it later I'll deal with it later um no but this this is a demonstrable Improvement I think over the old card so um feature uh improved date rendering for uh events okay solid let's see all right so we have a home page it works uh right now that works okay our hover thing still works as expected I'm gonna be cleaning that one up a bit to be honest if we go to the learn page though what do we got oh nothing is happening what's going on oh so that did work Uh something's weird with that navigation I gotta see how do I have like an aft nav bar next thing to learn yeah so if I go to home that's clean if I go to learn okay there you go learn worked that time I don't know what happened okay so I have my basic live stream set that's helpful um I was able to start pulling some stuff from notion so let's actually talk through this through real quick um my learn page is here and so I have started playing around with the next three server uh and or integrating it into my uh app so basically this used to be an actual function a netlify serverless function but one of the things I really like about next three is that it's allowing people to just create call it like functions the way they would use them and then next three and Nitro take care of the deployment process and they'll figure out where it should go from that point on so at this point you'll see that inside of my routes I have this courses uh server API so in other words it's pretty straightforward in terms of like there's a client uh this time I am pulling in from notion to try to manage this again I'll quibble over infrastructure later but it's using the current notion HQ client uh it'll grab the stuff and then I personally find the Jason that notion returns to you like two verbose and to be clear I'm not saying that they need to clean it up I understand why it's structured that way because that's basically how they're using like the building blocks of their data but for my purposes when I'm looking through this stuff in terms of rendering my card I need the ID the publish URL the title the description like I don't need to get fancy so this is my way of like going through to make sure the returned data is massaged correctly and so I'm not just sending a bunch of stuff that I don't really need so that's basically what I'm doing in here and so yeah that's that's all that's happening so I'm calling that uh and then the chorus is being fetched and looks like database content is that even being used anywhere nope so that's that's an artifact too so that's gone refresh um cool so it's pulling stuff it's looking good I want to fill out the data on this stuff but at least this stuff exists so yeah if I intro to typescript it yep it's setting me up for that okay so not card design not beautiful want to do more imagery want to make this look better but it is functional so that's something we can check off the list uh the blog let's see how's the blog doing oh that's right this blog was also giving me a lot of problems too um and I'll tell you why so uh blog page right uh so I love next content uh and so for those that don't know what that is let's bump this up real quick next content is a plug-in or module for nux that makes it really easy to work with markdown files and display it on your app uh sorry within your site so it lets you work with the content directory a lot of beautiful things with it honestly I'm probably gonna need to do a whole new video on the new next content stuff I love about it that kind of thing but again we're talking about practicality here on this Stream So from the purposes of my end as I'm trying to figure out better ways to scale out the content and share the stuff that I'm doing so you know in the in the F in the interest of sharing about things in progress as well I have I have a ghost site right now so I've been testing out ghost CMS because I've heard really good things about its platform and I love the idea that it it makes it easy at some point for one to manage things like newsletters and then if in the future like actually take the time to create like polish like we're not even polish if I decide to create like paid cohorts and stuff so people want to go ahead and learn from different things there's an easy way for me to integrate that back into my site and that was my high level requirement when it came to looking for a CMS that allowed me to do a lot of this different stuff and go seem to check off a lot of it so I'm sure there'll be more discussion on ghosts at another time for a stream but so as a result I was playing around with their blogging platform and um as I'm talking about this I think this should work nope uh oh okay oh I forgot I just have the one page right now so you can see here like I had set up a newsletter at one point there was three of them I had gotten to three and then I kind of went through my content slump it's okay newsletters will be coming back but I got a blog post here now here's the problem though the blog post that I wrote on June 1st exists only on ghost I need a way to bring it in so I've started playing around with the ghost API in an attempt to try to get that to work and so right now you'll what you're seeing on my site is the fact that I'm actually able to successfully get the data from Ghost which is nice uh the only problem though is that at this point oh even my posts are not showing up oh wait wait I'm not fetching any no I am fetching posts what's going on oh that's unfortunate uh blog query content blog find sorry I'm I've always I have all these blog posts that don't exist in markdown and they're not showing up all right so what's our minimum viable product let's let's focus here the minimum viable product is I have something that is showing up so what I can do is for now I can do ghost posts Maybe and then we can run through a list of blog posts uh crud nope I'm gonna do this just a little bit hackier one sec I need to look again I don't love the way this data is massaged but it's fine I'm gonna figure this out right now I'm gonna V for all these posts in ghost posts and then we can just add a quick key of post.id which exists because we see it here and then we're just gonna keep this real simple and we're gonna add a post dot there's got to be some kind of URL something in here okay post that URL great and then we are just gonna do the post title title title yep uh post that title and then finally I did actually have an excerpt for this so I think this should work so if we do it like this save okay great that is so not what uh that is okay if I click on this getting back in the arena okay it works that's fine that's fine um oh here's the blog post okay something's loading weird with the um clearly loading a little bit funny with the next content but I'm not gonna worry about this right now because what I'm gonna do now is basically say okay so this is rendering that's kind of interesting to me um okay so dude man can you use view with MDX uh yep so dudeman um yes so rather than calling it uh well I guess it basically is MDX you can include view components inside of nux content and so it's one of the one of my favorite aspects of it and it's kind of like using my mic drop moment when I'm showing people it is that we can include live components now granted for that reason there is there is um what I'm trying to say because of that functionality there is a reason for me to actually keep using next content as a way to publish content the only thing though as I'm saying this is that it does get me away from some of the pay content bit and I don't know how to solve that yet that said one of the things that the challenges that I had when I was building this is that I want obviously when you're looking at my blog post you don't care if it's from ghosts or if it's from next content and you shouldn't and more importantly I really I I should not be I moving you to the go CMS because that's really a headless um oh gosh I'm having trouble with my words that is a headless CMS in other words there's a place for me to schedule kick stuff off is for automation is to help manage my content so in the meantime again for the purposes of moving stuff along I'm going to open up the blog post list component and we're actually gonna oh wait okay yep that's fine I'm gonna go ahead and move this stuff this H1 subscribe bit all that stuff is coming out why did I not like that uh yep that should be fine what's wrong element is missing an end tag why is the div missing an end tag H2 header div okay I have too many things clogging it up here's my div there's my H1 this is my header okay fine whatever up nope there we go that here yep okay there we go that's that then we post this here oh man this does not look the way I want it to uh blog post container this is where things get tricky okay nope clearly that was the wrong way to do it so what we're going to do instead is we're going to actually move the ghost post inside of this so I'm going to drag all this stuff inside of here for now we're not going to worry about uh we're not worrying about displaying stuff because we are trying to just move forward here so wow I had a lot of different ideas running around this at some point okay can this work posts oh yeah post is here query Sync here yep that's that no I didn't break that now this is good ghost post here okay great it at least works um okay struggle uh again I'll need to figure out how I want to integrate this stuff but we are trying to ship stuff the only other thing I realize though is it would be nice if there was a date on this ghost post so that is actually probably one of the remaining things I want to do before we just ship it to do because right now things are broken post ID post URL um post Dot can do I get a type from this by any chance nope no type that's unfortunate all right I'll deal with that later um so it goes posts Actually I don't even need to do that I've just free the post here and then it is published at okay that's that's it that's intuitive I do like that post dot published I might just steal the API model there don't love that so we're gonna do this real quick I clearly need to create a reusable thing but we are in the business of shipping right now not refactoring so the thing I did earlier was in learn my learn index page I'm not going to worry too much of wait was it learn no it was schedule inside of my schedule page I had this formatted date bit again this should be a probably some sort of utility function uh but for now what we're going to do is we're going over to the blog post list I'm dropping this in because we're just going to use it real quick and then I'm going to come in and uh sub formatted event date much prettier okay good enough um although I guess is the time necessary let's just for now I'm not doing time on anything else so this is actually so we're going to actually eliminate the weekday let's keep it consistent with the rest of the posts hour minute time set time zone done boom boom boom okay okay styling and stuff can be improved we can integrate that but that is that is the case uses uses is currently broken at this point which is because right it is using the wrong thing so let's quickly let's fix this because I I'm confident I can fix this uh so if we do the blog index here we have the ability to query for this so theoretically if I move this over and we query for the uses page I wonder if this will work uh content and then I don't this might end up being a little bit trickier than I am thinking it will be but we're about to find out yep almost um all right we're gonna we're gonna we're gonna speedrun this because I think I know there it's changed now the rendering on how you render stuff it's no longer just yes content Doc it's not nux content equals so uh maybe this okay let's try this real quick content renderer value equals content like oh I don't know if it's gonna like it but we gonna about to find out nope did not like it uh how about content doc wait this should work though content renderer sync hello fetch find one okay valued data oh the issue is most likely because it's fetching everything yeah it's not the first item so if I do find one and refresh there you go now this is just the one item now we can revert ah yeah yeah come on that's that find one I undid that this is here save oh yes boom um that works now okay fan freaking tastic uh about about is broken but I have a feeling we have the same problem speed run the heck out of this let's go uh we have the about page content render V if data not even we don't even need a v if that that's that this is good we are doing this content save and if we are oh yes gotta love it when things work the way you uh want them to uh The Machinist how's it going what color is your Bugatti I wish I had a Bugatti nope don't have a fancy car like that uh but anyway um okay so let's see uses page oh dude man my users page I have I have dreams for how I want to do the use of page like I want to do like kind of like a batcave thing where like you're choosing equipment and I'll talk about all my bags all my gear all my stuff I got I got plans but fixing this was the most important part of all this I had to every single page is now working like I I'm actually kind of surprised uh at myself but this is this is what we talked about right we talked about just shipping stuff um so I'm at this point I'm just gonna bulks I'm not gonna micro commit all this stuff I'm actually just gonna ship it all together so I'm just going to call it fix um resolve rendering issue or uh yeah it's a fix or feature migrate remaining pages to nux content V2 and next three great um okay I think that's that's it for now um the only thing to do really is to go inside of GitHub and a couple minutes left I'm gonna wrap this up all right Ben code Zen yep we're just gonna pull request this real quick this is probably gonna be a massive thing next three migration you might be wondering why I'm doing a pull request to myself I find that it is nice to just kind of get a sense of how much has changed I'm not going to walk through code bike light every single line but it's nice to just kind of see what's been going on so yeah a lot of things have been deleted moved I'm sure I'll figure out places for stuff later but good enough for now so um I can't approve my own request uh can I just emerge it did I like protect the branch I clearly did something at some point um yep just gonna merge it boom okay deleting the branch Ben kozen is doing all this stuff now although server API this looks good all right so we've go to netlify.com logging in taking a look this is most likely gonna break though as I realize as I'm talking about this because if I'm looking at my deploys Yep this is not right this is going to be npm run build going forward and then main yep site overview production deploy trigger deploy let's go clear cache okay most likely if I'm not mistaken this is going to break because my M environments variables have not been set up properly if I were to guess so let's see it's going to deploy um in the meantime I'll just quickly fix this I'm going to go to my site settings environment variables there we go we have a bunch of stuff I'm just going to go ahead and add this real quick off to the side so add variable where's my vs code uh yes okay two notion API key and then we're just gonna do that create variable oh the way we have one notion API key we delete it add variable notion API key then I only have a couple other ones to add sorry for having to do this offline or sorry off the screen go CMS URL we're adding the variable next for the CMS key to do and finally I am oh that's actually that's good enough okay so this is basically what happened boom um so there I added a bunch of keys so you can see here that you can set basically different contacts um what's nice about one of the upgrades to netlife recently is the fact that you can actually set the environment variable for different contexts you can be like for branch employees use this for production use this I actually really like that they made this super easy so one of the things I do really like about that change in the deploys hey did it actually publish sort of um you know what this ship to be honest uh the learn is surprisingly working uh the blog is working how did it do that maybe I updated the key right at the right time some okay some things are clearly still need a little bit of work but I'm going to re-trigger this one more time for posterity and then I think that's that um so we did it we shipped um all right so what I'm gonna do I'll I'll do the thing I'll check the stuff and we'll we'll uh figure that out later but all right so going back oh I just realized I spent this entire time without the background music I had I had that set up it's fine I'll try that another time okay so uh we did it we actually accomplished from beginning to end granted the migration wasn't from the song as um as it made sense and deleting different dependencies so obviously you can do a comparison to my history back then if you really want to look through what's going on um holy smokes something is going on but that's fine I'll figure that out another time uh anyhow uh a big thanks everyone for joining today um I know it was great to see a lot of you um Back In The Stream the comments were great um helps remind me honestly what I loved about live streaming this stuff so with that said uh I think that that's it for the day again uh tomorrow I'll be back to talk about obsidian so for those who care about that or want to hear more about that I will see you tomorrow but other than that thanks everyone for hanging out um and then in the meantime uh I I guess I'll make sure stuff is updated to the Benco Zenda Isle schedule page and uh looking forward to just get it like you know putting putting those efforts in as far as gosh I'm stumbling over my words but that's okay um basically what I what I mean to say is I'm gonna be here now uh on the schedule will be up I'm trying to do this on a weekly basis so we're just gonna show up build some stuff together um and then over time I think as I get more into a Groove for those on the YouTube channel looking as if you're looking for the more polished videos hopefully we'll see more of that coming out but in the meantime and they still have some stuff hearing from me and then um blogging that is definitely going to be a bigger thing so that way you all will see little Snippets of ideas that I'm having over time so I'm really excited about what's to come and glad to have you all here um the real ROM I mean when can I buy swag uh you know what I'll I'll think about that if if and when that makes sense so um definitely I did I thought I did want to play around with some of the logo stuff I have with the dragon but I'll keep you all posted uh as far as that goes so appreciate you all for hanging out today and with that I will catch you all later bye

Channel: BenCodeZen

Views: 1,538

Keywords:

Id: Us3IPCKEooI

Length: 64min 42sec (3882 seconds)

Published: Wed Jun 07 2023