Hasty Treat - Scott's New Personal Website

Monday. Monday. Monday.

Open wide dev fans. Get ready to stuff your face with JavaScript, CSS, Node modules, barbecue tips, get workflows, breakdancing, soft skill, web development, the hastiest, the craziest, the tastiest web development treats coming in hot. Here is Wes, Barracuda, Bos, and Scott El Toro Loco.

Tolinski.

Welcome to Syntax. ESLint this Monday, hasty treat.

We're gonna be talking about my new website.

I got a new website. I might tell you all about it.

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

Hi, everybody. Hey, dude. How's it going?

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

Yeah. Yeah. Let's talk about this. Looking Svelte. Oh, hey there. Look at you.

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, but a string was not provided, letting me know that somewhere in my site, even though that's only occurred, let's see, twice here in the past 24 hours, 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.

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

I can see exactly when that was being hit, and I can dive into why exactly this bug is happening.

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.

So I think it's so funny that we I don't know when the last time you created a website was for yourself, but the last time I created 2014.

We yes. Mine was 2015.

So 2014 and 2015, we did not coordinate this.

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

I have been working on mine for about a day or 2, and we just so happened to launch them, like, within 24 hours of each other somewhat or 48 hours of each other, 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.

My previous website, let me tell you, was originally written in Blaze with Meteor 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, 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.

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

And, 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 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 just stagnated.

And so instead of taking the approach of, like, well, I need to carve out some time to make a big old website, I decided to do RFD, relaxed fit development, 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

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 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 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 Sapper, which, if you are not familiar with Sapper, it's sort of the Next.

Js equivalent of or Nuxt equivalent of the Svelte world, and it has built in static generation out of the Bos, super easy static generation.

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.

Let me tell you, Svelte does so many little things for you that it just makes developing in a in a breeze. Like, I haven't had to go hunt for any extensions to Svelte itself because Svelte does the animation portions of things.

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.

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.

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?

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,

and then I have also heard about it from Sean Swicks.

And, so I I've been hearing this this topic a Scott, just around about a digital garden and, like, what this whole thing is.

So I don't know if you are familiar with Maggie Appleton. She does all those really neat illustrations for egghead and a bunch of other people. But so she did this really amazing Twitter thread. Her her Twitter is at Mapletons.

She did a really amazing Twitter thread a few days ago about 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.

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, 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.

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.

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 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

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

I'm doing a very slight translate. I'm doing a a scale y, and I changed the origin to be the top middle so that it starts at the top and pulls it down.

And then I'm doing 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,

long, long time ago. Obviously, it's a super old game. Yeah. There was, like, some transition Node Doom where it does that, like, stretches out and looked kind of neat. Theirs JS, like, dithered and stuff, so obviously, it's not going to look the same as mine, but that was definitely the inspiration for this. I was definitely going as for terms of visual design, which is certainly not complete yet, I was going for brutalist. I wasn't going for, like, ugly, but I'm definitely going for more brutalist.

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

I'm using the CSS color blue, which, we know one does when they're doing brutalist

design nowadays or something.

Just blue. Just blue.

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 let's see. It took a 150 milliseconds to load and it looks like 60 KBs total.

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? Forty.

Wow.

So, 2 thirds of the download time of my website is spent downloading 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, 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.

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 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.

Totally.

I think 2020 is the year of the personal website.

Right? You know, there was Tilday did you ever hear of Tilday Club? No. So Tilday Club, it was like an exclusive social network, which is basically, like, trying to be like a Wes ring where they had limited 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.

Oh. The website is tilde.club, and, my, Tilde club that I had when I had it I don't know if it still even exists.

Let's see if I can find it. Wes Tolinski. I don't even know what it is under, but my tilde club was much more like this current iteration of my website 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 like, I don't wanna say scared because I wasn't literally scared, but I didn't have the guts to do on my actual personal website. You Node? I thought my personal website had to be this 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.

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?

Scottalinski.com.

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

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.

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

Peace.

Head on over to syntax.fm 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 this show.