Hasty Treat - Scott's New Personal Website

RFD, So really pretty small Sanity here. I'm trying to even see where the 60 k b's I bet all of those 60 k b's gets guess what? So my site is 60 k b's to load. Right? Guess how many of those KBs are from a font? How many? Welcome to Syntax. ESLint this Monday, hasty treat.

to make a big old website, I decided to do So I don't know if you are familiar with Maggie Appleton. She does all those really neat illustrations a very slight translate. I'm doing a She did a really amazing Twitter thread a few days ago about a day or 2, and we just so happened to launch them, like, within 24 hours of each other somewhat spaces in here. And it's funny because I actually got a club where the whole thing of a club JS, like, only runs HTML and CSS, and the goal of a club was to take us back to the web of yesteryear.

get this site done. The best way? Yeah. Right. Yeah. Honestly, just get it up there. Who cares about it being perfect or whatever? Just get it up. It's better than having a website from 2014 or 2015.

And so instead of taking the approach of, like, well, I need to carve out some time digital gardens, and it was like a multi step one where she showed off a bunch of different people's digital gardens. And it's you could think of it as like a personal notion, like a personal brain dump of if you're reading a blog post or you're watching a video, you're pulling out the key concepts, like taking notes like you would in school, but like your bullet points and then just throwing them on a page. And, like, it doesn't matter if it's a well formatted blog post. It doesn't matter if the English is good, which are all big pluses for me, and considering I'm not a good writer.

Js equivalent You've been working on yours for a long time.

which, if you are not familiar with Sapper, it's sort of the Next.

Sapper, I can see exactly when that was being hit, Yeah. Yeah. Let's talk about this. Looking Svelte. Oh, hey there. Look at you.

relaxed fit development, It's clearly like a black backdrop, white text, large text.

And that's that's largely, like, my outlook on it. I'm never gonna do it if I need to sit down for a couple hours and, like, really grind on this thing. So like, I don't wanna say scared because I wasn't literally scared, but I didn't have the guts

and,

Awesome. Well, thanks for sharing that out. I'm excited to see what else you you add to this thing. Oh, yeah. It's gonna be fun. The whole thing is for it to be fun. That's that's the goal.

Awesome. Yeah. Well, that's pretty cool. Check it out. What is it? You didn't I don't think you you even said the, URL. Scott?

social network, which is basically, like, trying to be like a Wes ring pristine thing that had to just exist and be, you know, perfect to attract customers. And guess what? I don't care about attracting customers. I don't care about any of that stuff. I just wanna have some Node place ESLint, just like I did back in the days of Myspace.

this show.

Yeah. I might take a look at what he's doing because he describes Sapper's approach as a bit heavy handed, and I think this is maybe just straight up SSG where Sapper JS trying to be, you know, a server side platform if you need it. That said, I haven't dove into his. He has a YouTube video giving a talk on it, and I know it's still pretty early days for his project here. But, yeah, I might give this a try. I know I think his website itself is is doing that. I know his website is on and it has built in static generation out of the Bos, super easy static generation.

I think 2020 is the year of the personal website.

Forty.

Peace.

Wow.

Right? You know, there was and I can dive into so that's really nice and easy. You know, we have that continuous integration stuff that they have, their CDN, all their stuff that you don't wanna set up. So I'm a big fan of Netlify as we Node. And, of course, if I'm gonna host a site like this, it's a perfect place for it. Okay. So, let's talk a little bit about the site. I used to have a DB. Did you ever have a I guess you did because your previous site was on WordPress. I dropped that d b DB Life in in 2017 and have never looked back because it's like DB Life. Yeah. I don't need a database for my personal site. It was just you know, my personal site was, like, 3 or 4 editions of my personal site. So I used to redo it all the time or on Drupal, and I just remember thinking, like, what a heavy handed approach to that.

a font. And so the actual site is tiny, and that's really part of the benefit of using Svelte. The whole thing compiles away, and you never have to ship the framework. It just ships code, ships JavaScript, a scale y, So 2014 and 2015, for sort of wild animations that I don't normally do that I'm, like, too afraid to do on actual things. So I have this, like, really neat animation that's sort of ghosty. It, like, stretches and does all this neat stuff here. It fades away and blurs, and this is all done with Svelte's default animation library out of the box. It's really nice and easy. You can do really custom animations with it. How does it stretch it? Because it's run it anywhere you want. And I'm a huge fan of this platform overall. You know what? I might even this seems wild considering I just pushed this thing up, but Sean Swicks has has done some sort of a Svelte SSG thing himself.

where they had limited It does the folder route thing that Next. Js does in many of these other platforms where your folders are sort of determined the whole routing system of the site. It does a lot of stuff for you.

Totally.

my, Tilde club that I had when I had it I don't know if it still even exists.

The link is is everywhere, but in the show notes if you don't wanna figure out how to type my entire last name.

did you ever hear of Tilday Club? So, where I just sort of toss some code at the screen and then push it up whenever I feel like. And if it's okay, it's okay. And if it's not, who cares? Because that's the only way I'm going to with and that coordinating that. And, we took very different approaches. So we heard all about your approach in the last episode. So this episode, we're gonna be talking about the approach that I took to build my site, my brand new website.

Head on over to syntax.fm so I I've been hearing this this topic a Scott, just around about a digital garden and, like, what this whole thing is.

Beautiful. Alright. Thanks for tuning in, and we'll catch you on the next one. Peace.

was much more like this current iteration of my website Svelte. So, yeah, pretty cool stuff, man. I'm a big fan of this. I think there's a large opportunity for me to improve it based on mobile styles and whatever. But you know what? Like I said, relaxed fit development, it's going to just be here. It's going to be easy for me to add my talks, my appearances, and all those things on here and just drop them in whenever I want. Get that sweet continuous integration from MLify.

than my actual website was. It's like I I had this tilde club several years ago, and it was to do all of the things I was to My previous website, let me tell you, was originally written in Blaze with Meteor it just makes developing in a in a breeze. Like, I haven't had to go hunt for any as these things do, and I didn't wanna touch it because it was Gatsby version 1. I didn't feel like being a playground because I didn't wanna, like, learn anything with it. So it just sort of 2 thirds of the download extensions to Svelte itself because

Svelte does Oh. The website is tilde.club,

or Nuxt equivalent I don't know when the last time you created a website was for yourself, but the last time I created 2014.

of of the Svelte world,

the time of my website is spent downloading And, 60 KBs total.

Like, for instance, I have all these different page transitions, and these Yarn all built into Svelte itself. I didn't have to go hunt for a specific animation library. I didn't have to hunt for anything. I'm not using anything like styled components. It's really just CSS. I'm not even using Sass on this. It's just straight up CSS.

Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, Node modules, barbecue tips, get workflows, breakdancing,

Tolinski.

Monday. Monday. Monday.

Bos, and Scott El Toro Loco.

soft skill, web development, the hastiest, the craziest, the tastiest web development treats coming in hot. Here is Wes, Barracuda,

and then I have also heard about it from You know, you think you get, like, all those, neat things with the image compression and whatever, but, like, dang, that's a heavy handed way to do that. I don't need the CMS.

And, something happened here where somebody is expecting a photo ID and a GraphQL query, and it's not hitting them. So now it's up to me to select that error.

So, I just throw a bunch of stuff on a thing, and it's like a own personal blog space that is SEO friendly, but it also, you know, Wes as a place I can go back to for information anytime I want it. So I I built this with the idea that it could be a digital garden for me, easy to update, easy to add posts, easy to do those things. It is no API, no database. It is posted on Netlify,

Sean Swicks.

Is that like the CSS Zen Garden where you can restyle the thing? It's not. It's not like that. Node. What is it? Okay. So I first heard about this from Joel Hooks,

let's see, twice here in the past 24 hours, Tilday I just thought, hey. It would be a good opportunity for me to do this. I obviously wanted to be some sort of a static save generator at this point because there's no database. There's no need for that kind of thing. If I'm doing blog posts, they're probably gonna be something like markdown. So I started to look at different projects I could've done in all sorts of stuff. I could've just done it in Gatsby. But since I wanted to do something fun with it, I chose Hi, everybody. Hey, dude. How's it going?

we to do on my actual personal website. You Node? I thought my personal website had to be this for egghead and a bunch of other people. But so she did this really amazing animation portions of things.

Hey. I can see that this was introduced in the latest release.

but a string was not provided, letting me know that somewhere in my site, even though that's only occurred,

Then in the previous episode, we talked all about Wes' new website.

So I think it's so funny that for a full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like We're using just markdown files for all of the individual blog posts, which is kind of wild that I'm even doing a blog because I've never done a blog before, really.

Once I have completed this bug, I can say it's fixed in the next release. I can push it up, and I can check for regressions if this thing comes back. You know, I might get an alert. I'm getting an email sent to me that says, hey. You know, this thing you thought you fixed will maybe Deno. You didn't fix it. So Century is one of these tools I absolutely know and love myself. We use it all the time, both of us do here. Syntax, so you're gonna wanna check them out. Use the coupon code at tasty treat, all lowercase, all one word, and you were gonna get 2 months for free of Sanity. So check it out.

Good. I'm, excited to hear about your new website, Stack.

I'm doing Yep. Yep. You know what else is looking Svelte is Sentry, our sponsor today. Sentry at Sentry Scott I o is the error and exception handling tool that is going to really give you the visibility into what's going on in your project that you might need. Like, what is actually happening? What are your users hitting? In fact, I see a little GraphQL error popping up in mine right now that says photo ID is required, I got a new website. I might tell you all about it.

a slight skew as well, but maybe not so much, and then an opacity change. So just like random stuff. I was trying to get it. You won't be familiar well, you might be familiar with this. Have you ever played the video game Doom?

Yes. Oh, yeah. Actually,

ugly, but I'm definitely going for more brutalist.

And then I'm doing I rewrote it with Gatsby

to just get rid of the database, Gatsby version 1, and that was pretty much it. It's like, I don't need a database. The hosting is gonna be, like, free to cheap, whatever.

for no reason in particular other than I was just using Meteor at the time. I didn't even need a database. In fact, it was so so much not needing a database that in 2017, In fact, the only reason I'm doing a blog for this site is not so that I maintain some sort of a blog of of constant posts, but so I can use it as a digital garden. Are you familiar with this concept of a digital garden? Just blue. Just blue.

I have been working on mine for about We yes. Mine was 2015.

or 48 hours of each other,

milliseconds Let's see if I can find it. Wes Tolinski. I don't even know what it is under, but my tilde club why exactly this bug is happening.

and it looks like Let me tell you, Twitter thread. Her her Twitter is at Mapletons.

to load and I changed the origin to be the top middle so that it starts at the top and pulls it down.

And, that's pretty much it. The whole thing is just meant to be just sort of a place for me to goof around, which is, you know, something I'm into. And let me tell you one of the coolest things about working in Svelte here. Let me pull this up. I'm gonna pull up the Node page. Let me refresh this home page. This whole thing

I'm using the CSS color blue, which, we know one does when they're doing brutalist No. So Tilday Club, let's see. It took a 150

design nowadays or something.

just stagnated.

yeah, I mean, I've largely used my own personal website as a playground of Scott, but what happened was it just sort of sat there and sat there and sat there it was like an exclusive We're gonna be talking about my new website.

I wanted to use some style components. I did a nice little visual refresh at that time too.

Yeah. It's a lot to maintain. It is. And since I'm a dev and I wanna just throw a markdown file, I can just throw a markdown file. So I'm largely just using this as a playground Scottalinski.com.

oh, I Wes, just with the transform. Hey. So I'm doing a blur.

we did not coordinate this.