Hasty Treat - Wes' New Personal Website

and it just puts it out. But he built this on post build. That's a a hook in Gatsby.

because you did so many fancy, neat things on it. Love it. Sanity

on it. Although, I Wes, you you probably could use Yeah. Cloudinary 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, Oh, yeah. The other thing is that everybody is gonna say, why didn't you just use Cloudinary? because, to when it auto scales. So I would email out Probably about grunge absolutely, like like, 5 or 6 different Grunge PNGs because that would make the the page load too heavy.

and it would just fail and time out on every service that I tried.

I just ran out of time to investigate all of that. So I'm just gonna sit on my hands, component, I just use, They've since changed that. They now have a bunch of life cycle methods for when traffic spikes

throws your images out to Google Cloud and, made those into pieces of content, which is great because, like, I personally can't even find my own hot tips when I Serverless functions. So there's a couple things on the site that need to be on this on server side.

I actually, initially, it didn't build on Netlify 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

Hey. He used to work at Gatsby. Works at Nellify Node, so who better to know everything about this stack? 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.

But, overall, very happy. It's very fast. Like, I didn't do much mistakes, corrections, 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, All the the blog posts so I have I forget how many. Let me let me look, actually. Blog,

And, like, Scott and I love Cloudinary, and Cloudinary will do the image resizing on demand for you, which is cool.

it would get real expensive real quick for something like that. Yeah.

He actually just built it after I was asking on Twitter, like, hey. Are you able to format the outputted HTML from Gatsby? traffic level, it's static site generated, meaning that it it generates the HTML 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 And that is Gatsby is smart enough to know not to rebuild the entire website, but just to rebuild the 1 page.

Once the build is done, you can run some code, and then he built this thing that would concurrently run is Wes I sell stickers.

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.

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.

Peace. Head on over to syntax.fm

He hooked me up with this experimental thing called Gatsby parallel build, 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 What else do we have here? It's a lot of stuff that went into it, 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?

or That's beautiful.

Peace.

after the build is done on Netlify, then it has to deploy. So it's about 12 minutes without having to write the code every single time in my MDX file. Nice. Yeah.

for a full archive of all of our shows, and don't forget to

And the answer is no because React DOM does that for you, Hey, everybody.

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 this new website is at Wes boss.com.

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

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

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.

or Google, yeah, Google Cloud Hosting.

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.

to get something from a 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,

or Vercel WordPress? Something like that. So I had to, like, make sure that the slugs got moved over from the old version as well.

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

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

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.

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

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.

Styling the design. I did the design all myself.

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, I would just give something a class of, like, meta 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 Well, he tweeted it. So I'm gonna say it's a Scott. Oh, okay. Because I had never heard of build uses Google Cloud, Like, I wanted it to just work even if you're offline.

Can we talk Node fonts for a minute? Yeah. I'm a big fan of these mono fonts as display fonts. Like,

Yeah. Whole Flair and Co gave me free license of operator mono for the web,

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,

Totally. Totally. Yeah, I think so.

And 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, get push to being live on your website, which is okay. I kinda wish it was faster 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.

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

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 click on the blog, and you'll see it up there.

findability

I went for some of this, like, grunge texture. So there's 2 grungy PNGs that get loaded onto the website, 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,

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

Oh, while we're talking about the fonts, so all of the headings, h one through h six, which means that, hopefully, something, sans. There's there's one that's not monospace.

enough that it looks like the grunge is fairly random, 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 podcast, the latest syntax podcast gets pulled into the footer as well. All of those are done client side because, 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

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.

agree with you that that's like something you need to own, and I'm I'm psyched to see that you tweet about it. As a developer, too. It gives that, like, vibe that, like, I'm a developer.

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

to get unlimited, it will still build just fine with the regular Gatsby build. And that's what I wanted to maintain.

is a Pnpm. I designed it all in vector, and I bet that this will get better is using this thing called Gatsby incremental

found this this way to to pull that all into your site.

my entire website is 1 font right now, and it's Node Lisa.

And I thought, like, shoot. And, obviously, I just put on pointer events Node 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 and over top of the text. And one really cool trick is that, like, I had overlaid 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.

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

good use cases for m's over rams, but there's Node right there. Yeah. Love it.

size of that square is really tough because, like, HTML is so forgiving. You goof up a tag or something like that, it just keeps going. Right? Yeah. Yeah. My favorite part about it is if you select the text,

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, obviously, Gasparallel Instagrams, 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 I had to move those over to markdown. Most of them were already written in markdown, which was great, but the whole process of which JS pretty cool.

YouTube player embed overlaid the white texture over top of the text because it's white on black text.

I don't think it's necessary but I didn't wanna have to load in Oh.

I use, just like regular CSS selectors, and I'm pretty happy with that sort of balance there.

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 Nice. Cool. I thought this was awesome. I, really enjoyed hearing about your site, especially

every general area, every general component, a post, a heading,

and one cool thing I did there is that the but for a lot of that, I did have

a component for that. And then I put, like, sub selectors in there. So I still heavily use classes 25 minutes to about 5 minutes, which is pretty good. And then there's still another, like, 5, 6 minutes of beforehand, but it's also may Node in React so that after the initial page loads, just HTML and CSS, I have a big global styles, and then every a little deploying your Gatsby site will be able to people. Hey. Here's here's a link to my website, render 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.

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

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

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

the the dream of CSS.

something like that when you are using Scott CSS or a class of big, and I don't have to worry about those classes usage license of this font. So yeah. Yeah. It's expensive.

CSS is done in style components.

values from your MDX files. But another kind of cool thing that MDX does is you can replace to just resize it and then save it locally.

So all of the headings the build of this 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,

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.

So, at some point because, like, it's not a big website, I don't think. It's a medium sized website, 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, what happens JS Wes you overlay elements on top of text is that it makes it unselectable.

Yeah. That's like I I always find it hard to find to 300,000 which is pretty cool because I've always wondered, like, I wish you could do, like, background texture And then Google Cloud will just is done in m's,

and why I didn't. I did also write a blog post similar to this, so go to Wes,

So the stack Gatsby, working with statically generated, which I think is the best way to do it because Yeah. Yeah. No. I've been on westboss.com

React and MDX.

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 for an h two tag. And that's how I got these, like, really complex headings I'm pulling in I use less for styling So sort of like serverless functions. I guess it is a serverless function.

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, there was thousands of little paths for every little dust speckle.

which is headless Chrome, to just take a take a screenshot 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? statically generating page by page instead of like, Gatsby is you're all in on everything Wes statically generated.

It's hosted on Netlify.

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.

the URL,

the slug, all of that information about it, and then it just I just laid out these thumbnails in HTML and CSS.

So I use Gatsby Image yellow square in the top left hand corner just kind of as a design detail, external services. So that's why I although, tweets and Instagram posts and Instagram stories, and all 3 of those need to be done server side. They don't Node course, APIs.

refresh on client, true, and then it would just ping this server for any updated content.

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.

the image, moving it to MDX which Radnica Next as my fonts.

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

And then I'm using a serverless function with Puppeteer, But JSX a meta, that's its own component. And then inside of that,

because they have, like, a nice local you can opt in to

there's a page on my website just called thumbnail, 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, and refresh it in the client? And the answer was, like, you have to code 2 totally separate things,

and, like, what's your strategy? I mean, it was so nice to have, like,

to 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 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 So I use serverless functions for that, which is pretty cool. I'm using them through Netlify this black texture the components.

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.

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

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

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

Tolinski.

Bos, and Scott, el Toroloco,

Monday. Monday. Monday.

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

wanna find them.

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.

an image tag, all of those things. So I wrote this massive script that just find and replaced the grunge is still on top of the highlighted text,

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 Node. No. Just, updating things.

incorrect tag somewhere or you don't auto close and then via the params, you pass the title, And, like, I love Cloudinary. I use it for my course platform. I just didn't want

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.

full blown website.

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

Oh, okay.

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.

since March 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 is super unforgiving. You've got 1 and all of the code blocks and blog to be dependent on, like, a paid company.

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,

I don't know, 5 or 6 different website designs. And my last Node was built on WordPress for a domain name for my birthday. My birthday was in late February.

2004, and I remember asking of to use 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.

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

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

So I've been I've been on there for 16 years. It's I've been on westboss.com, thing called Netlify dev, No. I have never had it. Weren't you at, like, boss dotaf?boss.af? And the way I did that is over the Yarn. Probably, Yep. It was really neat because, like, otherwise, you'd have to use, like, a different program which JS really cool because I've been, like,

and it's obviously seen pseudo element that adds the black and white texture and the file size was, like, pnpm x what a PNG was because of

Boss.af 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 Yeah. Yeah, absolutely.

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

many iterations of Node huge pain point I had was anytime I would link to it in an email 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 120 blog posts.

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

This episode is sponsored by Sentry. Now Sentry at century Scott I o is the amazing error handling and exception Sanity tracking

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.

Yes.

Hey, Wes.

on that. So that was the existing stack. The the website was getting kinda slow.

9 or 10 different pull requests of spelling and I twist and turn them and and angle them and offset them 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 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 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.

I'm hosted on Bluehost, which we all know is my favorite hosting company ever, for an actual Yeah. So in almost everything, it's in markdown, jQuery

And they auto scale their servers, which is great, but there's, like, a 5 minute delays That worked really well.

and there wasn't a whole lot of custom JavaScript, Don't have images. Don't have problems. Right. Yeah.