Hasty Treat - Wes' 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 Toroloco, Tolinski.

Welcome to Syntax. And in this Monday, hasty treat, we're all gonna be talking about Wes brand new website.

The last time this website saw a refresh was sometime in 2014.

So we're going to dive into all of the ideas and interesting things that Wes did with his new website, and we're going to be exploring some of the choices that he made and why he chose to do things his way. My name is Scott Tillinski. I'm a developer from Denver, Colorado. And with me, as always, is the Wes Bos.

Hey, everybody.

Hey, Wes.

This episode is sponsored by Sentry. Now Sentry at century Scott I o is the amazing error handling and exception Sanity tracking tool that you really need in your project. In fact, you're gonna wanna head over to century. Io. Use the coupon code Sanity treat, all lower case, all one word. You're gonna get two months for free. Let me tell you, it's really easy to just drop in century in your project, see it up and running in no time, track those errors and exceptions. I've been using Sanity personally for a long time and am really, really into it. I just absolutely love this platform, and I wouldn't have it in either way for browsing and keeping track of the errors and bugs that are in my site. So thank you so much for Century for sponsoring. Now Wes, this new website is at Wes boss.com.

Didn't you used to have another different URL, or am I tripping here?

No. I have never had it. Weren't you at, like, boss dotaf?boss.af? Boss.af is Wes I sell stickers.

Oh, okay.

Yes.

Yeah. Yeah. No. I've been on westboss.com since March of 2004, and I remember asking for a domain name for my birthday. My birthday was in late February.

So I've been I've been on there for 16 years. It's I've been on westboss.com, and it's obviously seen many iterations of over the Yarn. Probably, I don't know, 5 or 6 different website designs. And my last Node was built on WordPress for actually, my last couple that were built on WordPress. I probably was WordPress for about 10 Yarn, and I had a setup with WordPress. I had lots of advanced custom fields.

I use less for styling and there wasn't a whole lot of custom JavaScript, but for a lot of that, I did have jQuery on that. So that was the existing stack. The the website was getting kinda slow.

Node huge pain point I had was anytime I would link to it in an email I'm hosted on Bluehost, which we all know is my favorite hosting company ever, And they auto scale their servers, which is great, but there's, like, a 5 minute delays when traffic spikes to when it auto scales. So I would email out to 300,000 people. Hey. Here's here's a link to my website, and it would crash my server. And then it would come back up after 5 minutes because they would scale the server, which is great. But the in that 5 minutes, how many thousands of emails do I get? Your website is down, which was frustrating. And, obviously, that was my own fault. Like, I should get a better Vercel. But I just didn't feel like moving it on over. I thought about keeping it on WordPress because I like the admin for all of my blog posts and everything, But what I ended up doing is saying, I wanna move all of my content to GitHub and have it editable by the community at large. Like, already, I've had the site live for less than a day, and I've already received 9 or 10 different pull requests of spelling mistakes, corrections, updating things.

There was, like somebody was reading, like, a 2 year old blog post, and there was a a little there was a mistake in there, and they just they fixed it themselves.

And it's really cool to be able to have that open to to the world. So my stack that I chose was, Gatsby JS. I'll talk about that a little bit more in just a sec. The style components and React and MDX.

I'll talk about all these in in just a sec, but that's the stack I chose. And I've been working over over the last year or so, kind of just poking away at it here or there. I sort of settled on the design about 6 months ago, and and that's where I was like, alright. Next time I have some, I don't know, about a week of time, I'm gonna really double down and finish this thing on up. So what I thought we do is just kinda go through the different parts of the stack, why I chose it, and, and why I didn't. I did also write a blog post similar to this, so go to Wes, click on the blog, and you'll see it up there.

So the stack Gatsby, it's static site generated, meaning that it it generates the HTML beforehand, but it's also may Node in React so that after the initial page loads, just HTML and CSS, the React framework loads, and then it picks it up from there, meaning it sort of hydrates it, and then it's a full blown React application.

I didn't go for Next. Js. That's probably the most common question I get. Mhmm. Because when I started it, Next. Js was more for, like, applications.

They've since changed that. They now have a bunch of life cycle methods for working with statically generated, which I think is the best way to do it because you can opt in to statically generating page by page instead of like, Gatsby is you're all in on everything Wes statically generated.

Right. Or it's dynamic. There wouldn't be, like,

a a server side rendered version because there's no Node instance in Gatsby, at least right now. But there there could be dynamic content. You not necessarily locked in the static. No. You can have dynamic content, but if that's the case, then you have to totally go outside of the Gatsby GraphQL API and then host your own API somewhere or in a serverless function. And that's what I did for I'll talk about that, with some of the serverless functions. Although I just was tweeting with Kyle from Gatsby, and he said we're getting hosted GraphQL, which means that, hopefully, your Gatsby site will be able to refresh its data from the GraphQL API, so it's no longer just gonna be static like that. Is that a scoop that you got there? Well, he tweeted it. So I'm gonna say it's a Scott. Oh, okay. Because I had never heard of I've never heard anyone talk about it before, but he just tweeted it to me out in the open. So it's not secret or anything. I didn't know you were into privy to some inside information here. Oh, no, no, no. It's I'm not that privileged. Just a guy tweeting and reading stuff. Yeah. The other thing is that Gatsby has a huge plug in ecosystem for things like site maps and, I don't know, all kinds of images and and whatnot. And Next. Js, it's not that it doesn't have those. It's just that that's not the way that Next. Js is set up. You just have to do that yourself and reach for existing React plug ins. So it would be kinda cool one day to to see how hard it would be to switch over to Next, Not because I want to, just because I think it'd be interesting to see the the pros and cons side by side for an actual full blown website.

All the the blog posts so I have I forget how many. Let me let me look, actually. Blog, 120 blog posts.

Probably about 70% of those are still valid, and then the rest are just outdated content. But I feel weird, like, taking it down because it's the web. Right? So I just kept all the blog posts there. It's a history. Yeah. Yeah. Exactly.

And I had to move those over to markdown. Most of them were already written in markdown, which was great, but the whole process of moving it to MDX is really tough because, like, HTML is so forgiving. You goof up a tag or something like that, it just keeps going. Right? But JSX is super unforgiving. You've got 1 incorrect tag somewhere or you don't auto close an image tag, all of those things. So I wrote this massive script that just find and replaced all of those little gotchas, and then I finally, after a couple hours, was able to auto import every single blog post from my WordPress API. That's how I did it, because I just pinged in the the WordPress API. I also took all my Twitter hot tips from Twitter and, made those into pieces of content, which is great because, like, I personally can't even find my own hot tips when I wanna find them.

And it's like the hot tips is the huge piece of content for me, and the fact that I don't own those is weird to me. It started off as just a silly thing on Twitter, but, like, it's a big reason why I have so many Twitter followers, and people absolutely love them. So, like, why am I not owning this content?

What's funny that Wes we should talk I mean, that's, like, a definitely like, a a topic of conversation maybe we could even elaborate on in another hasty treat sometimes is owning your content. And Wes talked about this before in the blog things when we were saying, like, okay. You could do a Medium blog, and that's going to get you maybe, findability initially because people will stumble upon it. But you're not owning that content, and you don't have full control over it. And I I agree with you that that's like something you need to own, and I'm I'm psyched to see that you found this this way to to pull that all into your site.

Yeah. Yeah, absolutely.

Styling the design. I did the design all myself.

I went for some of this, like, grunge texture. So there's 2 grungy PNGs that get loaded onto the website, and I twist and turn them and and angle them and offset them enough that it looks like the grunge is fairly random, but I didn't wanna have to load in grunge absolutely, like like, 5 or 6 different Grunge PNGs because that would make the the page load too heavy.

So it was it was kind of fun to to be able to do that. A lot of people are saying, like, why are my logo itself is a Pnpm. I designed it all in vector, except the grunge has to be raster. And a lot of people say, like, oh, yeah. I just use a SVG, and SVG grunge is not the same as a raster based grunge. And I actually converted it to SVG, and the file size was, like, pnpm x what a PNG was because of there was thousands of little paths for every little dust speckle.

I'm using operator Node and Radnica Next as my fonts.

Yeah. Whole Flair and Co gave me free license of operator mono for the web, which JS really cool because I've been, like, saying I use operator mono forever. A lot of people had bought it after me and it was on sale a couple of months ago and I tweeted out, Hey, it's on sale. And then a couple days after that, I got an email from them saying, like, hey, do you want a free font for your website? And I was like, yes, please. Because it's it's expensive. Yeah. I I looked at the the price. I think it was, like, $1600 to get unlimited, usage license of this font. So yeah. Yeah. It's expensive.

Can we talk Node fonts for a minute? Yeah. I'm a big fan of these mono fonts as display fonts. Like, my entire website is 1 font right now, and it's Node Lisa.

And, man, I really like going to monofont for this.

Yeah. It's I did too. The operator the whole fair gave me a copy of operator something, sans. There's there's one that's not monospace.

And I tried that, and it just didn't didn't feel good. I feel like it's pretty readable. I only had 1 person give me a angry

tweet about it. As a developer, too. It gives that, like, vibe that, like, I'm a developer.

Totally. Totally. Yeah, I think so.

We're obviously not talking about my site right now. But No. Let's talk about it. I used, like, IDE style ligatures in my design as the back arrows.

So my back arrows are just a bracket and a line, and then JS let turn ligatures on. It was really nice.

That's beautiful.

Oh, while we're talking about the fonts, so all of the headings, h one through h six, all of the headings are actually pretty complex because it's it's an h three. And then inside of that, there's a before and after, pseudo element that adds the black and white texture over top of the text. And one really cool trick is that, like, I had overlaid this black texture overlaid the white texture over top of the text because it's white on black text.

And what happens JS Wes you overlay elements on top of text is that it makes it unselectable.

And I thought, like, shoot. And, obviously, I just put on pointer events Node on that grunge, and then the clicks go right through it and still allow you to select it. So that that was a kind of a cool trick that I I really liked. Yeah. I like this. I the the grunge is super interesting here, how you chose to do that.

Yeah. Yeah. My favorite part about it is if you select the text, the grunge is still on top of the highlighted text, which is pretty cool because I've always wondered, like, I wish you could do, like, background texture on the select, but you can't but you can if you overlay something on top of that and then pointer events none. Yeah. Neat neat trick. Yeah. There's also, a little yellow square in the top left hand corner just kind of as a design detail, and one cool thing I did there is that the size of that square is done in m's, and the the benefit of doing it in m's is that the size of the square goes up and down with the font size. So it's it's related to the font size of the heading tag, and that was a perfect use case for using m's over rems because it's based on the the font size of the thing. Yeah. And they didn't have to size 1 for every h tag. Yeah. Yeah. That's, like, that's free right there. That's that's

the the dream of CSS.

Yeah. That's like I I always find it hard to find good use cases for m's over rams, but there's Node right there. Yeah. Love it.

CSS is done in style components.

I have a big global styles, and then every component, I just use, a component for that. And then I put, like, sub selectors in there. So I still heavily use classes and tag selectors inside of it. So I don't go crazy with style components and and do a new style component for every little thing. I just, every general area, every general component, a post, a heading, a meta, that's its own component. And then inside of that, I use, just like regular CSS selectors, and I'm pretty happy with that sort of balance there.

Cool. Did you say I mean, you're using, like, BEM or anything like that for your actual selectors?

Node. No. Just, I don't think it's necessary to use something like that when you are using Scott CSS because, I would just give something a class of, like, meta or a class of big, and I don't have to worry about those classes

in other places because I know that I'm always writing scope CSS. And, that's good. I don't have to follow some strict thing there. Yeah. So in my side, I'm doing, like, scoped by default. Right? That's just the way this is installed. It's scoped by default, and then you choose when you want it to be global. And I really love I mean, I'm typically used to writing style components, but I really do love that Scott by default because then you still get to turn the cascade on whenever you want it. And if you know what you're doing with CSS, it's like, alright. Here's where I want the cascade. Here's where I want my globals. Here's where I want the the baseline stuff, and then here's where I want things scoped. It makes it such a nice experience.

I think some people look at Scott CSS as being, like, you know, for people who aren't good at CSS. And in my mind, it takes a lot of skill to execute with a a scope CSS and make it, you know, super dry and just nice to use. So Yeah. I love it. A big fan of that. Me too. That's it's just been really nice. And by default, like you said, scope by default, you write your styles or scope to that component. And then if you want something to be global, like a lot of the fonts and and variables and whatnot, then you can throw that in your global CSS. Love it. One kind of cool thing that MDX gives you is a couple things. MDX allows you to embed rack components right inside of your markdown.

So, YouTube player embed component, if you wanna put a graph, you wanna put anything inside of your markdown, you can just embed a React thing, and you can import and export values from your MDX files. But another kind of cool thing that MDX does is you can replace the components.

So all of the headings and all of the code blocks and all of that, anytime there was a, like, a h two tag, instead of rendering out an h two tag, it would pass it off, and I could supply my own custom component for an h two tag. And that's how I got these, like, really complex headings without having to write the code every single time in my MDX file. Nice. Yeah.

Serverless functions. So there's a couple things on the site that need to be on this on server side.

Most common is the the OG images. So if you share a URL out to Facebook or something like that, it will show you, like, a thumbnail.

And the way I did that is there's a page on my website just called thumbnail, and then via the params, you pass the title, the URL, the image, the slug, all of that information about it, and then it just I just laid out these thumbnails in HTML and CSS.

And then I'm using a serverless function with Puppeteer, which is headless Chrome, to just take a take a screenshot of that and then serve that up to the user when they're asking for Yeah. The Open Graph image. Puppeteer. Hey there. Getting fancy.

Yep. It was really neat because, like, otherwise, you'd have to use, like, a different program to make images. And I was like, I want I just want HTML and CSS, and then I wanna take a screenshot of it. I don't wanna have to, like, learn this other Node package that's not as powerful as CSS to lay things out. Yeah. You know, I've been thinking a lot about images

and, like, what's your strategy? I mean, it was so nice to have, like, in a CMS, like, a drop Node. Drop the image in. Are you just coding all the paths? I guess it's Gatsby, so you're doing the Gatsby image queries.

Yeah. So in almost everything, it's in markdown, which does Gatsby image queries for you under the hood. Oh. And then I just put the images in the folder of the blog post, or I have a folder that has, like, pictures of me. And and there's a picture of Scott on the on the about page. So go check it out. I saw that. Hey. Thank you for including me on your site. That was very nice of you. Oh, yeah. I have your name and your link, but I don't have any photos on my site. My wife was a little bit cheesed that you came before. Oh, no.

Oh.

So I use Gatsby Image to compress and and resize and everything like that. I'll talk about that was a bit of a pain in the butt, in just a second. Serverless functions. Also, I'm pulling in tweets and Instagram posts and Instagram stories, and all 3 of those need to be done server side. They don't Node course, APIs.

So I use serverless functions for that, which is pretty cool. I'm using them through Netlify because they have, like, a nice local thing called Netlify dev, but they are just AWS Lambda. So they could they could really be hosted pretty much ever anywhere. It's just a Node file. Mhmm. I'm pulling in my Instagram stories via sort of like a a fake login. So I'm hitting their GraphQL API that's undocumented, and then passing my session cookie along with it, And that gives me my stories because there's no API for Instagram stories if you are not a a business or something like that. Like, you you're not a brand that is in with Facebook, so it's not something you can do. Yeah. And those the tweets, Instagrams, and the podcast, the latest syntax podcast gets pulled into the footer as well. All of those are done client side because, you can't if I were to do them at build time, then they would be Out of date. By the yeah. They'd be out of date. So, that's, like, one thing. I was like I was, like, looking, like, how do I do it on build time and refresh it in the client? And the answer was, like, you have to code 2 totally separate things, which sucks. So I think that's what the the Gatsby hosted GraphQL API will fix. I bet there will be, like, a tag that says refresh refresh on client, true, and then it would just ping this server for any updated content.

It's hosted on Netlify.

That worked really well.

I actually, initially, it didn't build on Netlify or render or I tried it on a bunch of them, and one of the biggest pain points I had was that, apparently, I had too many images. I bought 350 images, and it would just fail and time out on every service that I tried.

And it was just way too big, I guess. Like, I I don't know what people who have larger websites than 300 pages are doing because I know there's there's ecommerce websites out there. Yeah. So I talked to Jason, friend of the show, Jason Langsdorf.

Hey. He used to work at Gatsby. Works at Nellify Node, so who better to know everything about this stack? He hooked me up with this experimental thing called Gatsby parallel build, which throws your images out to Google Cloud or Google, yeah, Google Cloud Hosting.

So sort of like serverless functions. I guess it is a serverless function.

And then Google Cloud will just spin up 300 instances or something like that, resize each image individually, and then send it back. And that took my build time from about 25 minutes to about 5 minutes, which is pretty good. And then there's still another, like, 5, 6 minutes of deploying after the build is done on Netlify, then it has to deploy. So it's about 12 minutes to get something from a get push to being live on your website, which is okay. I kinda wish it was faster than that. Like, I had, like, a bug on the website when I launched it. And and in 12 minutes, like, lots of people messaged me about the bug. Yeah.

Yeah. So, I kinda wish that it was a bit faster. I used I tried Gatsby Cloud, which is using this thing called Gatsby incremental builds, which I hope is will be a a thing for everybody at some point. And it was great because it took my entire build, and then I changed, like, a word on a page, and then it it rebuilt it in a minute.

And that is Gatsby is smart enough to know not to rebuild the entire website, but just to rebuild the 1 page.

Yeah. I think that Gatsby Cloud also does similar parallel image processing.

I just ran out of time to investigate all of that. So I'm just gonna sit on my hands, and I bet that this will get better at some point because, like, it's not a big website, I don't think. It's a medium sized website, and I think that a lot of other people probably have this pain as well. Sure. You can view source on it, which is really fun. It's all formatted nicely. I use a plug in from James Vickery. It's called Gatsby Plug in Prettier Build.

He actually just built it after I was asking on Twitter, like, hey. Are you able to format the outputted HTML from Gatsby? And the answer is no because React DOM does that for you, and it just puts it out. But he built this on post build. That's a a hook in Gatsby.

Once the build is done, you can run some code, and then he built this thing that would concurrently run the HTML files through Prettier and format them nicely. Oh, nice. And, the view source is is very readable now, which I was really happy about.

What else do we have here? It's a lot of stuff that went into it, which JS pretty cool.

I think that's about it. Pretty happy with with the site right now. It's a big driver for me.

I had to maintain all of my old links because blog posts and Google search juice is a big part of my business. Lots of people find my blog posts by searching on Google or read a couple and then buy a course after that. So I needed to make sure that that all went. I will see in a a week or two what my stats look like once they've leveled off. Did they get better? Did they go down Vercel WordPress? Something like that. So I had to, like, make sure that the slugs got moved over from the old version as well.

But, overall, very happy. It's very fast. Like, I didn't do much to make it fast. It just is fast out of the gate, and I felt like I didn't really have to give up too much or or really anything in order to to get that. So Nice. I think the one thing I gave up was the build the build times because of the Gatsby images.

Oh, yeah. The other thing is that everybody is gonna say, why didn't you just use Cloudinary? And, like, Scott and I love Cloudinary, and Cloudinary will do the image resizing on demand for you, which is cool.

And, like, I love Cloudinary. I use it for my course platform. I just didn't want the build of this blog to be dependent on, like, a paid company.

Like, I wanted it to just work even if you're offline.

I just wanted this whole thing to build and and not have to, like, reach out for any, external services. So that's why I although, obviously, Gasparallel build uses Google Cloud, it will still build just fine with the regular Gatsby build. And that's what I wanted to maintain.

And once it's built, it's built. What do you mean by that? Like, once it's built, it exists as an HTML JavaScript, and, like, it's not like yeah. You're right. Yes. So it exists. You're not relying

on it. Although, I Wes, you you probably could use Yeah. Cloudinary to just resize it and then save it locally.

JSON links are has a Cloudinary Gatsby image plug in that I think does something similar to that. So that certainly is an option. It's just that at my traffic level, it would get real expensive real quick for something like that. Yeah.

You know, it's really easy to, not have to worry about images when you don't have any. That's that was my story. I was just saying You don't have any. You know what? I just don't I just don't wanna I don't wanna deal with it. Yeah.

That's great. Like, I'll say I couldn't do that, but, I think it's because you are incrementally building your site.

That's probably a YouTube video for you working on adding images to my site. Here are the options I have. Here's why, I don't have images.

Don't have images. Don't have problems. Right. Yeah.

Alright. So I think that's it. I'm pretty happy with it. Check it out. It's on GitHub. It's all open source, so you can learn a thing or two from it. It's at github.comforward/westbossforward/westboss.

Nice. Cool. I thought this was awesome. I, really enjoyed hearing about your site, especially because you did so many fancy, neat things on it. Love it. Sanity

guy. Fancy guy. Fancy JS my middle name. Yep. Alright. I think that's it, though. Thanks for tuning in, and we will catch you on Wednesday.

Peace.

Peace. Head on over to syntax.fm for a full archive of all of our shows, and don't forget to