Syntax Highlight

fix that one. Little buggy there.

And another problem with this section of the site is that you got to click on everything to get the experience.

Rid. Now this side has some issues.

Besides being, like, really neat and cool, I think there's some, like, fun stuff in here.

The symptom where you are or the not the symptom. The the situation where you're like,

Script is initialized and when a variable rid. On the market, today, we've got a syntax highlight episode for you. That's the episode where, like, nice crispy vegetables in that time is

I'm in a duple. It's a joke. It's not the dad zone, just so you know. It's not a dad zone. It's dad zone. Mhmm. There's a couple Couple times, I've I've made, like, jokes like that. Or there's another one Rid. I use React Node with React and Node with TypeScript daily. I love that. Just, like, straight into the point.

And we'll resonate this with a few other of these websites, but, like, I think we need to stop with the skill percentage based thing. Like, I mean, I'm good at this skill. Now the thing I like about Austin's way of doing this, like, as opposed to some other, is that he's not just saying, like, I am 20%

which, I might not maybe I'm just, not Gen z enough. But you not being a Gen z? Yeah. There's The new thing, TokTok is the next one. So, Why? Because the canvas is sitting on top of it. So it's just a simple z index thing. Because if you the and and, Augie, here's a good way to test it out. Right? If you right click on the site and do inspect element,

Another thing I noticed here is that you have your skill section,

oh, man, I wanna just Throw the kitchen sink in this thing. And I think there's maybe a little too many kitchen sinky things. For instance, there's like a scrolling progress meter, but the site's only like a 1000 pixels high. So You scroll, like, an inch, and then the site's over. So so, like, my man, you don't need that progress meter.

But like, times value. So 1.5

I I have a, a joke in one of my courses, rid

because that's useless. He actually says I have 4 years experience writing HTML. I have 3 years experience writing JavaScript. Right? So he's telling you how much experience,

because people don't understand.

I called it the temporal dad zone, and, like, freaking, like, once a week, I get an email about it. I'm just like, I'm never making a joke again That's it. Thank you so much for tuning in. Catch you later. Peace.

This is definitely not necessary in my mind, but, Yeah. It's not long enough. It's yeah. That that's good for, like, longer sites or kitchen sinky kind of things, especially when you might get lost in the page. But when you got Three sections here. It's it's pretty short. You don't need any of that stuff.

I think Austin might have the We're in silly mode. That's what

Oh, I found a typo too.

Right off the bat, Austin has some really cool little touches here where we have this little rid. BG guy, utilization it's gonna be broken images. So make sure you If you're gonna give us the sushi on the conveyor belt, give us the conveyor belt. You you got the SVG skills. We know you have the SVG skills. Rid. Give us that conveyor belt. Yeah. If if it's true. Like, why are they clickable?

And it's just it just feels unnecessary.

You're hiding a ton of information, I should say, and you're making us work to get a lot of information.

called when I was explaining the temporal

great domain.

the progress meter, totally unnecessary.

and the eyes follow your mouse when it moves around. It's just cute and fun, and and those types of things are neat.

This would be just so much better if you had a not even just like a table, but, like, some laid out way where you can see at a glance. 4 years experience with this, 3 years experience with this. Blah blah blah. Like, I I get that it's fun that you're showing us you can do interactive stuff, and it's fun. You click it, whatever. But you're presenting

Rid at the bottom, it says, I make coding TalkTalks,

So I think Austin has, like, a a really good start for a website, but I think it need needs some some work in some regards. I think maybe,

That that thing, is not doing you good. And likewise, scroll to the top. Man, I can scroll scroll to the top with a tiny flick. I don't know if you necessarily need that scroll at the top button either.

the idea is that you click ready. And you scroll down? Because right now, if you wanna scroll down to the website, you have to click this tiny little button.

scared to go outside of your comfort zone, and then you are able to just to take things on. Like, Like, if I were to come to you and be like, hey. I know you've never used

You can't click them. It does nothing. 2,

It might be a fake italic, you know, like a It's very yeah. It's very subtle, but it's rid. Irritating to look at. And, like, I didn't I couldn't realize it. I was like, I can't place my finger on why this is annoying.

heading tags. There may actually be a couple of heading tags, but Just about all of the text is within a div, and that's definitely a no no, especially when you're doing any sort of like, you have lists, use a list item. Right? You have,

the animations when they slide in, the text kind of The text and images, it kind of fades and slides in slowly from the side, left or right. Right? And that is Yeah. That's on the the introduction text, But just about everything on the site. Now one thing that will take these animations, turn your stomach and make you draw, hit the floor over and over rid. So the alpinist, awesome, awesome documentary. I'm going to sick pick.

for line height and say this is, like, a 1.5. I never go pixels. I always go the is the relative value. Is that what it's described as? But But I always have the relative value. Yeah. The relative,

I think what's being done here is is you're trying to differentiate between the headers of each of the university items Just a small little thing. I found it. HTML space body space star.

But the only critique I have about well, I guess maybe I have 2 critiques. 1, when you hover over them, you get the little pointer guy. Like, you should be able to click them. You get the pointer hand, clicker pointer.

Letter spacing is 2 pixels, which is is too much. So bring that down to 1. Rid. Yeah. And then I don't typically mess with letter spacing unless it's a header. The line height is 1, and that's that's too much. So let's use Scott's 1.5.

like, a avatar of, like, their, like, Wii character or their Ethereum monkey or whatever.

What else we got here?

of each one. A talc. I think that'll look a lot better. Nice.

How to properly markup HTML? I think it's a big red flag for me. I mean, because the site is fun and it looks great and there's a lot of, like, little nice touches, rid. But that HTML is a is a big red flag, and that would actually be the deciding factor of if this person were to get the job over someone else. Other things I really like is rid The skills section is just a

That's all I got on my tips here. Other Otherwise, it's it's it's a nice website.

you're gonna get somebody who's, like, a line height 3, and then it's gonna look how weird it is.

rid Hidden on the container of that. It will help so much more

Now I have some some HTML tips.

They're a little slow.

Moca choco latte?

in being able to make this animation work, which is pretty cool. Yeah. It's really Great looking.

No.

that's like his resume.

Rid. Immediately, it looks so much more professional. Mhmm. Just bringing that down. So that's that's a good tip I have there. Yeah. It looks way better. Yeah. Oh, no. I have something about the animation. So you do a lot of really neat animations, especially when we're scrolling down. He has this really great little menu

And you should it should still be readable and not just a mash of of text,

I don't expect you to be That old. There's a photo of myself that I that is, like for some reason, I can't unset it from Google. Like, every couple of weeks, Google will just decide that this is going to be my photo again. I I don't know why, but it's like a black and white photo of me from 2011, and I'm just like, this photo is so rid Old wired.

rid being run into it. And that's that's that's good for accessibility. That's good for SEO. It's just it's that's also just much easier to style when things are rid. Properly marked up. And I that's having, like, a nice photo of yourself taken, which is like That's me. I don't have any good photos of me. Yeah. There you are. I have one that's, like, a little bit old. Like, my GitHub photo

dump of things that he's used.

as well. And then you click on it, and it it sort of, like, scrolls its way down. But that rid Says once once you do click the button, it scrolls down into a really nice website. There's some pretty

.software. I didn't even know that was a TLD.

things like that, it's all in italic.

rid. And build a nightstand with woodworking. And,

too spaced out unless you go go overboard. Yeah. I wouldn't say that. I mean, rid. Because

just about all of the text on the site is within a div. So there's no paragraph tags.

A lot of the And

paragraphs, use a paragraph. You have a heading, use a heading. But don't don't just put text in a div. That's a a big no no. Rid. Yeah. Like, as a rule of thumb, especially because you're doing

because right now, you have this, like, white menu section, and the text is animating, but the text re

rid Whatnot. This was huge for getting clients where you just literally dump React, Redux, Svelte, TypeScript, D3, JASS, MoCA, that shows you what you've done in the past rid It's great. It's very clear. I really like when people do this to say,

There's no Yeah. Just use the JPEG or PNG or whatever. But if you wanna Have the Avif for the the size quality, use a picture fill, and serve up, besides

rid. If you have your line height too close together, and in addition, there is letter spacing that is too high, how to do something like this, and it might be a complete mess. And I think this is really cool because you click on icons, cons, and you open up these folders, and there's all these icons that you open up in there. It's infinite. And it's just like it feels infinite. You just keep keep finding new

information about each of the items, so the universities, the jobs, each of your projects. Let's say you have 10 node projects. You put them all in their own port, rid Rid Amazing. Anyways, it just it just shows that, like, you're not And it has nothing to do with the web development, but it shows off his skill O g n j e n b o s. Hey. He's got Boss in there. So rid Props to you, j a n c I c. He's got boss in there. I love it.

Rid There is a hobby section, which is awesome. It's a this shows that he sewed a bomber jacket Oh.

Cool.

moca choco latte.

Oh, that's great. Yeah. So I I would say, like, find a friend that has, like, a decent camera. IPhone takes pretty good photos, and just, rid. Go and take a nice photo of yourself. If you're trying to market yourself for a job, I think having a nice photo is is really, really important rather than the avatar you've been using. Or, like, Even worse, when people use, like, The links have a little pop up when you hover over them

Oh, Favicon. That's that's the easy one. Just throw a Favicon in there. Yeah. We don't want that Gatsby favicon. No. Thank you. No. Okay. Next one is from Austin Baird. That is Austin Baird

dot software, which is pretty sweet domain,

you should be able to take the CSS entirely off of your resume, And it should still look like a decent Totally. Like, Microsoft Word document from 2003.

it makes the text Hard to read, and it also just looks a little bit goofy. What do you think about that? Yeah. Totally. And it I don't know what what your what's your, like, general like, for me, I I always with, like, a 1.5

Yeah. We don't want your Ethereum monkeys.

Besides tweaking the speed there,

And when I was doing freelancing and glow when you hit the tab key or you click on something,

or even, like, 1.4 or something. I always rid. Start there. And then if that doesn't look good, I'll I'll change it. But Yeah. Go up from there. I I do that as well myself. Just kind of start at a high value and and go that No one's ever really complaining about text being

pixelated.

if you do an overflow

At the very bottom,

And the actual information underneath. So you should just make found this at the grocery store last night. Zevia And you want your content to go left to right and then wrap, but still Pinterest

And I took the italic off, and I was like, Much better. So,

is probably, like, 10 years old. My, like, Twitter photo is just a couple years old, but my GitHub, I was looking at it the other day. I was I should update that. I'm like one of those real estate agents where you, like, see them in real life, and you're like, oh my gosh.

Another tip I have here is that the entire resume, we've been meaning to go to and then, you know, the whole pandemic hit. Rid Oh, yeah. Yeah. There is I've been to 1 in, like, Heathrow Airport.

nice, rid. And maybe a smaller footprint than buying another machine. If you already have an Instant Pot,

overall, a good job.

icons to their LinkedIn, GitHub,

I know exactly The font is bang on.

rid Which is is kinda interesting.

Notes. It's, like, kind of, like, green nodes or particles. It's a little bit trippy. Map. Node map.

yeah. Just or, like, childish. You know? Like like, way too big.

There's there's no critique in the design of this little experience section. I think it's, like, really well done. Yep. Rid. So good job. That's a nice little single page y thing. A couple little things to fix here and there, but The links have this really cool underline.

So there's, like, a paragraph tag, and then I think that gets, like, broken up weird. And then the rest of it is not within the paragraph tag. So I would assume that there's, like, a closed tag somewhere that you missed. Just a heads up. Portfolio? I see this on a lot of the portfolios is your screenshots are pixelated.

is not within the tag whatsoever.

I work for this company as this, is awesome because if you wanna hire somebody who is creative rid. A light oh, you can oh, there's multiple versions of the website. You can have a a light and a dark version, animation What sort of tech somebody has used? I think that this is something a lot of people need to copy, and the typography is nice. It's easy to read. The tags are all, like, very

Like, would I hire somebody who's 60% good at Django? Like, I'm sure this guy is super smart and can figure out all the problems in Django. So just put it like, hey. I'm pretty comfortable in Django, and we already know that you focused on on JavaScript.

is a very hard thing to do as a developer because you you had you wanna do this big dump of, like, rid. I know so much tech, but, like, just be like, hey. I focus on primarily writing JavaScript with TypeScript.

or Safari Ios, which is every single iOS browser. As in if you look at your website on iOS,

So it right off the bat, it tells you, hey. I'm Augie,

Which is is kinda cool.

And if you check that out, it's gonna be the same on Safari. So anybody visiting your site on Edge or Safari

Now I'm even on a Chrome based browser, which is Microsoft Edge, A Chromium based browser. I'm on Microsoft Edge. Chromium based browser can't see any of your images. It's all broken image tags.

title from February until now.

Really? Yep. So I'm gonna tell you why. You got an ad blocker on or something? No. Not an ad blocker.

they looked

portfolio templates. Yeah. And not to say that this guy used the template, but it's you what do you do when you're Building a portfolio website, you go and look at what other people have done, and other people put this percentage thing on. And, I think we need to stop that because,

Obvious. They're not overdone.

So good things. The experience, you'll be you'll be in pretty good shape. Another thing I really like late lately, especially when people have dark mode websites, is skin rid Skin your scroll bars, folks. Yeah.

That is being selected. So if you're trying to inspect the element on the text and you do inspect element while doing command right click on on the text and it pops up that the canvas, If you can make a dress, you can make a website. Definitely.

cyclops in the background. Rid Yeah. This is another thing I see often is people do, or like banana chips Or or things like that. I actually haven't haven't done it yet because I was like, alright. I'll try the air fryer. Freaking air fryers are amazing.

Oggen? So sorry. Yeah. Oggen?

rid

And then it says Node, TypeScript, React, Electron, and Google Cloud. So, like, without even having to read a huge paragraph, Without even viewing the source, which is like Yeah. I it looks good to, like, most people,

That means the campus is sitting on top of it. So you can fix that with the z index. Or just you don't even have to change it. You can just do pointer events none.

what do you call that?

Being able to distill what you do Into a single sentence I think that this one does both. And, also, it it shows the,

Oh, AVIF.

So he's using a really fancy new format, a v I f, which are these really, really small images. But the problem with AVIF is that it's Only supported in the latest Chrome and the latest Firefox.

give that a give that a look.

People selling off for the 1st 3 months of tab 9 teams. Even if not, try the free version. It is awesome. I was very, very surprised,

the initial paragraph. And it drives me crazy Do you know why?

Rid and then it goes on to to talk about he currently works for this company and and so on and so on. It does the whole skills Our kids our kids hate the ads. Rid. And, like, our youngest, he's he's not even And then there's also no, like, title text on them. Rid So, like, I'm hovering over this bee with some Wi Fi signal coming out. I'm like, what is this? You you're Beats by Dre? Yeah. I don't know what that logo is either. And I don't know what it is. Yeah. And then I have to like, there should be, like,

Rid Yeah. Yeah. I'm almost to the point where I wanna do it ironically now. Like, that's what I'm getting. I wanna do it as is it's just deferred the irony of it.

Because as you move your cursor, it moves you around,

Rid and that's done. Yeah. Sure. Still doesn't even change thing. Do you do that too when you're when you're reading text? You just, like, highlight the piece that you're reading? Rid. I do. Yeah. Because I have a hard time keeping track of the text that I'm reading. Especially with this, like, moving the headers more bold instead of trying to make the description

Hash node dot dev in their resume. And those those icons are way too big. They're those are not they're not meant to be scaled up that large, and they just look,

rid. In in the best possible ways. And he doesn't he is sort of the kind of guy who's, like, hard to track down. They'll be like, we tried to get a hold of them, but he flew to this country and climbed and peaks. You know, it's it's, like, very odd like that.

And so the dude will just have, like, he'll just Go up on an ice wall with 2 ice picks and crampons.

vertical stuff where it's, like, with no ropes, no anything, just chopping with ice axes. And his story is unbelievable.

the same way that the the Dawn Wall and what was that free solo were about a guy just climbing a mountain without Such a good name. Yeah. You know what? Jack's

So he's not doing essentially the the highest peaks, but he's doing the craziest

And he's interesting guy. He's super reclusive.

Anything.

all sorts of ice climbing.

is on Netflix, The Alpinist.

You know this, the free solo climbing, The colors are great. The typography is great. Jack Clearly has, like, awesome design skills because

He's kind of weird, .com.

But this one is

and

blog post is really easy to read. Like, some Some of these blogs that you read to us are all very crowded. You know?

But otherwise, like, the

of keyboard navigation.

like, if you want some design tips, check out He's a good designer. Yeah. Not just a designer. He's rid Straight up good. Yeah. Bored it. Like, there's there's little touches on this website. I think that's what I'll focus in on on here. There's little touches on this website that people will notice. They hover over the logo

site has, like

it because it looks ugly. Right? Is it mid? That's that's what the kids are saying. Is it is it mid? I mean, do what what did what does that mean, Wes? What does it and mid means, like, like but I think, like, anybody who's been in the space for a while, rid. We had the same thing with Bootstrap, which is like it And there's no reason that they need to be pixelated because they're smaller than the actual website is. So just get nice crispy Thanks. And I think a lot of people miss this because they might not necessarily have a high DPI monitor to check this on. Worse than pixelated images, I have no images.

Like none or something on some of these because the outline's completely turned off. So, like, when I'm hitting the tab around on your site, I have no idea what's being selected at any given point. That's a common thing because people see that outline and they say, So,

Rid. I'm a big this one has probably the best messaging

That makes sense. Problem with Jack's site, Wes. Uh-oh. What is it? Jack, I'm about to roast you here, And this is about a a

But the thing I like most about Jack's Website is not just the design and overall, like, vibe of the site. It's that Jack has proven with this site that you can have a lightning fast, Gorgeous modern site using WordPress. This thing is built in WordPress, rid For I don't know why. I I couldn't I couldn't figure out why. And this data every word is in a data attribute as well. There's Probably some fancy Oh, you saw that intro animation.

concerns with how light the text is. Rid. So, definitely, like, a lot of these a lot of these websites we have today I think

Jack's portfolio is definitely my favorite one today For a handful of reasons, the design is fantastic. It's gorgeous.

And you shouldn't do that because, rid It's inaccessible. It's hard for anyone to sort of tab around, Some JavaScript or some CSS. You name it. There's a bunch of free ones on there. You just wanna taste it and see how you how you like my teaching style. There's a bunch of paid ones on there as well. You can see what you want. Use coupon code syntax. If you do, I paid 1 for $10 off.

you can tell that it's changing what it's The the the correct Solution for that is to use a picture fill and to serve up the correct image or I mean, you know, you probably don't need to use something like Cloudinary for this, but you can just format auto. The the the most simple solution is to just use a different image format. Just use the JPEG.

definitely spend a little bit of time on that. Yeah. Just click tab around your site, and you'll you'll realize in 2 seconds that you you should attend. But,

rid Hits the period and, like, Yeah. Yeah.

this thing looks so good.

We do that on level 1, by the way, just in case you're wondering. There. So I did think There you go.

Inarugundi, rid This thing is great. Love you, Jack. This is still a fantastic website, so great job. Top tier. Yeah.

issues with their accessibility, and I find this is rid. Pretty common with a a lot of design, especially back in the day when

but you luckily, you can you have full control over what those look like. So, highly recommend you go to the show notes and click on the click on this one. I'm very curious how it's actually made. The best Heard about it is that it looks like Windows 3.1 without entirely

Jack. Very intentional, Jack, buddy. Jack. So Come on.

rid. In this funny thing, I could say Jack's portfolio, and I'm talking about the website, or I'm just talking about Jack's portfolio.

Okay. Next 1. I'll get it. Next one is rid bird thing is a thing.

Alright. Well, we will make an example out of Jack for the sake of accessibility.

and it feels like every

I don't like the stupid outline. It's ugly, whatever. Just Style it, Jack. If you did this the outline in, like, a an same green color you did and, like, a couple of pixels wide like the the previous site had, It would look gorgeous on this thing.

in the same way that the last site had a really awesome And on the non, like, mobile screen,

Jack's portfolio is definitely, the inspect element will always inspect the thing you've

Jack's

It shows such a a creativity that is just man, this thing would if somebody sent me this and was like, take a look at this as, like, a job, I would just be like, Shifts in that little

You know, my favorite honestly, my favorite thing is the the selfie window that's just like an x-ray of the skull. Like, that's hilarious.

emulating Windows 3.1. Like, so many of these other projects would be like, Oh, I'm just gonna recreate

rid things inside of it. And, like, this this to me a resume,

As a state manager Yes. So, like, where do you like, how big which windows are open, where they are, and the width and the height of the windows? The text on the website is not selectable, at least in the initial, That's good.

It's an application of mine I did not per se rid Due for a coding job, but for a position at an art school to work in a digital workshop, which is crazy because I wrote, This is definitely a creative agency or someone like that would hire you for this type. Since it's emulating a desktop environment, it's not mobile friendly. Rid. Have to do that in a future version. I'm a bit anxious. I had no idea Rid. The line height could is immediately is something that jumps out to me. And this is this is a really good tip for everyone is check your line height if you are, rid Freeza is a thing. I like the overall like, the font is a nice font on there. There is a

I'm so very sorry. We had a lot of them. In fact, we had more in our notes here that we've even already looked at that we weren't able to get to in this show. So we'll be doing more of these. Maybe we should even do one of these a month. But If you if you found this, exciting or interesting or anything like that, let us know what you you thought or like your youth. You might want some feedback on your portfolio site. Let us know.

Send it to us within our our the normal what is the normal contact form? The the potluck contact form on the site? Yeah. We well, One day, we'll make another contact form for these, but just stick it in there, and we'll find it. If you wanna be super cool, you could even make that that contact form for us. That'd be cool.

URL.

Rid. Submit a PR. That's cool.

There you go. Alright. Let's get into the part of the show where we talk about sick picks, things that we pick that are sick west. I have a sick pick today That will blow your socks off, especially if you liked that last one that I gave you about the peaks. Now this is another documentary on Netflix, another mountain climbing one because, You know, I love those, and it's so funny because somebody messaged me and said, hey, Scott. You really like that one? You really like this one? And I said, you know what? This was Going to be my next week's sick pick anyways because I watch this 1 first before we watch the other 14 peaks one. And this one is also extremely cool. This is called the alpinist.

It's like a Windows growing and shrinking, which is it gives a good vibe. It's pretty mid or pretty not mid, have, kicks it across the website. You know? Just a little bit of whimsy, and that's a fun little That's fun. Fun little evening project To make that animation, the the YouTube videos have border radius on them. Right? And no one ever thinks about that. You're embedding a YouTube video, Throw a border radius on it. It looks and then overflow rid No rendering artifacts in CSS. You know, it's like a lower level problem, Our kids don't watch, like, live TV, and the only spot they ever see, you can train it on your own code. It can run both in the cloud rid. Or it can also run locally. So if you're a little bit like, not sure about, and this one is freaking fantastic as well. Wow.

But this

URL

Build something that's totally outside of of what you normally see on a website. So great job. Yeah. Super fun. Okay. Let's get into the part of the show where we well, actually, we should say this. If you send us your portfolio or your site and we didn't get to it, plug as far as n d o dot dev is the website. And which I'm assuming is Austin,

So, So I don't Oh, I see. We don't know why that's happening if it's something with the new version. So there's this there's this really cool background orb, the the z c l I. It gives you results that are frequently used rid And recently used. They're frequently used. Oh, that's such a good word. Yeah. And people think that's a mistake all the time. Like, it's not a mistake. It's Rid Y'all kids y'all kids with your rods. Kids. I've been I've been, I made a couple TikToks, and now I'm I'm trying to talk with Gen Z's.

Rid That's really cool. So awesome job on that one. I thought that was a a fun one to end off on because it's just it's so refreshing to see people it shows, like, his open source projects, which is Next Auth JS. Yeah. So, like, showing that, like, proofs in the pudding. I built the open source library to do off. It shows a command over

There's, like, a lot of, like, fun little touches like that. All of the windows are scrollable. But, again, it starts outside of the menu and then arrives onto it. And if you have an overflow hidden on all of these menu sheets And even the blue square in the beginning, that overflow hidden will make that that menu animation look way better because it doesn't feel like the text is separate, And it kind of adds the text to the menu a little bit more. So that's like a big tip for me would be to make that overflow hidden so the text doesn't, rid. Start off of the menu and arrive onto it or even the images.

I can't really explain it too much other than it rid. It looks like Windows 3.1, but I

Yeah. You you you are just you you have you have something that most people don't have, which is like a Yeah. A creative understanding of The medium. And I think it's just really fantastic. And they also are doing something which I really like, is they're using the

Windows 3.1.

That's been recreated in the browser.

and who can figure things out and, like, are not dotted line or that blue 3.1 rid into just a couple sentences 2 sentences, really.

Kinda blows my mind. I sorta had to read the notes that came along with it because I I opened up the website directly, and I was like, oh, man. This is like a art project. Yeah.

it's from Cyril from Zurich, Switzerland.

Rid. It's just stored in the URL, which is genius. Like, that's the OG state manager

And The Alpinist

isn't that he has the the icons from from that, but The windows are all stylized, and everything's really great, and it's all very fun.

to just needing to be, like, twice as fast,

the web. Right? I understand this stuff. I I I will find actually, sorry. 1, I would say, major critique. Wes, go to that home page and then do a right click inspect on that main paragraph text rest and tell me what you see. Oh, boy. Yeah. Oh, boy is right. Why is every every it's it's saran wrapped. One of the word is wrapped in the whole thing. In a div, so it should be in a paragraph for 1. But Yeah.

Like. Yeah. Maybe dial it back. I know it's cool effect multiple versions of each image. That way, you can be supported. It's interesting because there's

show what they went to. Cute. Like, it's got this, like, flickering like, almost like a neon the text has, like, this neon look to it, and it flickers on and off. Are you looking at dark mode or light mode? Because the I've been primarily looking at dark mode. I'm looking at dark mode as well.

and yeah, but I mean, I love the effect. I just think maybe a little too rid Too too frequent. Do you do you see what happens when you click on the dark mode to light mode? Yeah. There's a couple of great things besides having a really, like, well styled outline, which is, Honestly, that's great because people don't utilize outline well enough, and your outline is fantastic.

Totally understand why this whole thing is so paradigm shifting in terms of solving bugs. But the reason is is that this allows you to see your errors.

91,

Rid. Oh, I see. I see. Okay. Yeah. That's fine. And and that's there's no problem wrapping every single word in a span tag. Rid. Yeah. That's what they're for. I couldn't figure out why they did it for me.

rid. And the background orb is

Point, man. Throughout the whole site.

I love this one. This one is this one's a wicked. This is great, but I did I had some weird I don't know if you you notice this one. Okay. This sorry.

I I have the site open, and every couple of seconds, I don't know what's of some text under it or or at least a tooltip when you hover over top of it. Tooltip would definitely be ideal. One one quick thing about this paragraph text, there might be something goofy in your HTML because I didn't notice it in the rest of your site. Like, the other paragraph text in the site was all properly paragraph tag. But the currently, I work as a web developer. Whole section It's very odd. So on, but I'm pretty sure Jack has an outline

On projects, I think they might have used the CSS, West. Do you wanna talk about Linode? Yes. Linode is cloud computing developers trust.

rid I'm a developer. I work with this tech, and I'm really good at it. And you need to tell people that as well as convey it with the design.

columns rather than, like, a grid. So when you tab through it goes,

2, every single word is wrapped in a div or in a span

You get error Tracking and management and user experience analytics as well. But the coolest thing about this tool is definitely going to be the Session replay that allows you to see how bugs happen as they happen in a scrubbable video replay. It works with all the tools you know and Love it. It integrates with all of the tools you know and love. It's unbelievable. You can have a self hosted or on premise version. It is very, very neat. Again, You get a session replay that shows you how the bugs happened. What could be cooler than that? So head on over to logrocket.comforward/syntax.

Looks the same.

that their focus styles are on point, which is, like that's a nice touch. Here's only critique about keyboard navigation.

monitoring, which is actually pretty new. You get product is honestly, it's as shocking as free solo And and maybe more so in many ways because he does

at LogRocket

specifically UI, looks like, it.

happening because it doesn't obviously look like something's changing in the site. But every couple of seconds, the paragraph text

Tailwind obviously doesn't need to look like Tailwind, but a lot of Tailwind, Specifically myself,

I got I have I have I I love this sound. Right? Because Yeah. This is this is a usage of sound rid on interaction with the site. I'm clicking the thing. It's creating a sound. Some people might not love that, but I like it myself personally. The thing I don't like is when the site makes sounds rid Without me doing anything. Totally. Yeah. Interaction sound is a good way to put it.

When they when you refresh it, they do, like

is that it has good polish. And you can tell that. Rid. And, also, like, another thing about it is, like, it's not just what it looks like. It's also, like, the the information that it gets across. Right? Like, you need to tell people,

wrapped elements, but it definitely should be in a Paragraph tag. Yeah. Okay. So it's not that bad. You're fine. I I I at first, I was like, this is useless, but now that I see that animation, it's not useless. Yeah. It has a purpose.

you get a great little animation. And if you have audio turned up, you also get a like a Nintendo switch style like like snap sound and then like a little flicker noise. And Honestly,

into each other.

So maybe changes up. Those dots are are kind of overplayed, I think, in the background. Yeah. And they're in on dark There may be a little heavy handed. Also, you're, like, Next JS logo being black on black. It's totally lost. And when we have these critiques, man, these are these are, like, rid These are minor critiques. This site looks great overall. This is this is awesome. I like, if you wanna check out a really good website,

quite a while, and we love and use ourselves, which is LogRocket

But, now, Wes, I don't know what what resolution you have the site open with, but when you have the site open at some widths Horizontal scroll? No. The layout shifts every couple of seconds.

But, Let's move on to the next one.

top down top down top down top down so you scroll up and down a whole lot. Rid. That's such a problem with CSS columns. Yeah. Yeah. CSS columns is kind of a bummer overall, I think.

Sign up, and you'll get 14 days for free. Again, just throw it on your website. Give it a try. The first time one of those errors comes in, you will understand why this thing is so awesome. Okay. So next one here is going to be JAX Portfolio

The about a week. And as you're coding things, it will suggest to you, oh, do you want a code completion with With this so if I type, like, Mhmm.

And they've they've won all sorts of awards for the type of, He's a wild guy. It is coolest modern site that you've seen today. Rid. It's lightning fast,

the tool that this is in terms of That this is a an error exception handling tool that allows you to find bugs by seeing them happen. You get a session replay,

.com now log rocket is one of those services that I always joke that you have to try or see or watch their video to really

That's top tier. If you're looking to hire someone and this is what you you you start tabbing around their website, like, wow. Like, not only did they put a favicon in rid And, like, check all those little little things, but they also spent time making sure Rid lot this this happened all the time, and I've myself, I've done it many times. Designers, hey. Can you take off that ugly photography here. That's, like, one thing that Not a lot of devs do is invest in Like, they'll they'll do, like, yoga, like, frozen yoga on YouTube or something like that, and then it comes on. They're like, Oh, I wanna buy that thing. I was like, oh my gosh.

Checkly in the mouse or whatever go on to another line, and the scroll bars show up and disappear.

Let me, let me explain to you this one here. It's n dom

CSS Grid, like, working group rid About, like, how do we get, like, this Pinterest style layout Mhmm. Where and the answer is use columns, but the columns go top. They go column 1, top, bottom, top, bottom.

I've talked about this many times in the past of and, like, there's a huge thread on, The fonts are really nice. There's a couple,

Rid. This episode is also sponsored by one of our sponsors over here that we've had for, react or whatever,

Meaningless meaningless rid bound by the same ideas of a website.

I would say the flicker might happen a little too too much for me.

which is showing, like, like, the edges of these random boxes, which is this tech before, but you think you could figure it out? I would bet he could figure it out. Yeah. Yeah. Because you can make a dress. Yeah. Why couldn't anybody who's gonna be hiring you is gonna be checking that you I I put Caddy on my one of my projects the other day, That So what what does it do? As you're coding, I I I flipped it on a couple of my projects and used it for,

Firefox, it's making it horizontal and vertical scroll on and off. And then there's also, like, a rendering artifact,

And you now get front end performance

but There is a source set. Like, he he's sourcing he's sorting out multiple sizes of it, but not multiple versions,

but that orb is causing Top shelf. Less. It's top shelf. It's top shelf. The and and this. I don't know if they say that, but if we're if we're using the marijuana thing, it's Top top shelf. At least on,

I'll shamelessly plug all my courses. Westboss.comforward/courses.

I got into I like that at the bottom, it says have a good Monday. That's just Yeah. I was listening. A tiny little bit of JavaScript that's just fun. Nobody does that. That's a nice touch. It's nice. That's a nice touch. And, also, there the blog here is is awesome because it like, both the blog is laid out well, but it also shows that he is constantly writing. Rid Webstorm or whatever it is you're working in, they will work with you and give you AI code completions so that you can code faster and I'm gonna say more accurately even though that's not part of the ad read.

But I was rid I was talking about getting a dehydrator

.com. That's the site that I've been, working on for a very long time where we have a new tutorial series every single month. And let me tell you, we have A ton of really awesome courses planned for this year.

level up tutorials

that we've actually now upgraded to an even larger air fryer because the rid. The one downside to this thing that I'm sick picking here is that it's it's more for somebody who has, like, a single person or someone that is, like, a couple with 1 kid or something rid like that.

Head on over to syntax.fm

Pleasantly, pleasantly surprised. Yeah. And we we were doing, like, a no spend. We're, like, trying to spend very little right now. And and

and it just turns your regular Instant Pot into an air fryer. And I was like, alright. That's, like, good. It's it's cheap, and it's not another thing that we have to have. And I think that would be a good good use case. So I got it, and it was amazing. It was so good

rid

air fryers rid Around Christmas time, which is like I had I had brushed off the air fryer

And if you wanna do a meal for an entire family, you need something a little bit bigger. But if you're looking for node Processes all in 1 server. So, like, I don't know, you get, like, a 5, $10 server. This $100 credit's gonna last you a long time, and you can host all of your projects on that. Specifically, like, what else can you run on there? Caddy server? Mhmm.

Peace.

Like like beef jerky,

touch. Yeah. Cool. Alright. Shameless plugs. I'm a going to shamelessly

forever because I was like use convection ready. In the oven or the the Yeah. We have a we have a really nice convection range, and it does an awesome job at like, when you're making fries or whatever, they get nice and crispy. And I was just like, the air fryer, like, come on. That's just another gimmick tool in the kitchen.

There's gonna be a new course every single month, and we have some really talented content creators coming on rid to do courses for us as well as new courses from me. I'm gonna be doing 6 new courses this year, one of which is gonna be on doing 3 d in Svelte, and we're gonna even build some really interactive three d things. So I'm so excited about this course, and I'm so excited about my platform level uptutorialsdot

I'll often wanna do, like, nice brussels sprouts or broccoli or cauliflower or something like that, but but crispy. And, like, that takes forever. Yeah. It takes forever in the in the and, like like, I come down from work at 5 o'clock, and, like, we gotta get the kids, know Is this here's my website for the syntax episode.

It's a nice to power code completion. We'll talk about them partway through the episode as well.

I'm I'm very impressed at at air fryer. And you know what I use it mostly for is, Like, when I'm cooking dinner,

for a full archive of all of our shows. Rid. And don't forget to subscribe in your podcast player rid We tell Landon when he's getting a little too energetic. We're like, I think our silly level's a little high right now, mister.

or drop a review if you like this show.

a while ago. Mhmm. And I was like, someone's like, you can get the Instant Pot lid That's also a dehydrator. And I was like, okay. What would you dehydrate?

And you posted something about that, and Courtney was already on the edge about buying it. She had her finger on the button. That's, like, hovering over it, and you had just you had to post about it because then she She was just like, alright. I'm buying it. And we we got that. It is great. You're right. It is very good. Oh, man.

something that is affordable Sponsored by 3 awesome companies who are not mid. 3

lit companies, Wes. They are pretty lit. I don't think kids say lit anymore. I don't think they do either. Linode,

Like, let's see what urban dictionary. I'm gonna tell you what it means because I know what it means as a resident of Colorado.

This is what happens when you make a couple of TikToks, folks. You turn into this vibe machine.

rid. More like LitNode.

mids are, like, medium quality marijuana.

That's so mid. Alright.

Yes. And it comes from marijuana because

Oh, that's great. And, like, I'm I'm usually pretty up on urban dictionary. I often will just go there, laugh at the word of the day, And my wife is it's hilarious when I say stuff. She's like, what? What does that mean? rid Like, fed and in the bath in, like, hour and 15 minutes. So, like, being able to give them, and they're they're getting mad at the FBI.

What does this what does it mean? Rid. I'm gonna let you Google it here. Well, mid is defined by urban dictionary as a word used to insult or degrade an opposing opinion, labeling it as average or poor quality.

Rid Let's try it. Let's try to use a bunch of Gen z slang in this, in this episode. Oh, we started buying a bunch of, like, DVDs from thrift stores because they're, like, a dollar.

Oh, really? Yes.

They are the cloud host with the most. We'll talk about them, of, Did layered paper art, Yep. I think this energy drink is making me be a bit goofy today. We do. Yeah. We're in goof mode. It's fine.

They have all kinds of products read to host your website, to have resources to run your compute, to host your images, all the kinds of stuff like that. So if you've got a project that you need to host somewhere, take a look at this one. It it loads fast. It's Got really fun stuff on it. It's got good polish. I think that's what I'm looking for with a lot of these websites, rid thing where Node. Js is 90%, but Django is only 60%.

you can host multiple rid The companies are clearly paying a lot of these, like, family vlog channels to, like like, the kids play with this crappy toy, the one other critique I have about this is, like, go to your projects page, and I can tell it's tailwind rid. Replay Harry x lite.

grab some go grab the latest version of Node. Js, get that sucker up and running. I specifically use a product called PM 2, which will allow you to host multiple, JavaScript session, because, oh, he made his mom a dress.

and then you can proxy them all to subdomains or forward slashes or things like that. So check it out. Rid. Gonna get you a $100 in credit. Thank you, Linode, for sponsoring. Alright. Let's get the next one. I don't think this is the one you're talking about, Scott. It's, rid. Oh, man. This,

The having that, like, white scroll bar with the gray Boss Jannec.

And it allows you to proxy, And the font that's being used, the italic just makes it look The zevia is like a, a

thing inside of it Doesn't look good when you have a dark website. It's very easy just to skin them based on and make it look like it's built in. I think it That might be the very next one that we talk about has a really nice, like, scroll bar that changes with the theme. But before we get into that, let's talk about one place that you could host your website.

I'm talking about Linode

like, Rid. It does opening and closing of the brackets, which I really, really liked. So that if you open up a map, it will automatically close the rid. Mapping brackets for you, which I very much appreciate. It's awesome. The free they've got a free plan. It's based on open source GitHub code, But you can also get a pro or team plan that does advanced code completions and is based on your own code. So You've got a team that codes in a specific way and you you like to keep things the way that you code things,

You're right. This is not. This name You can do it, Wes. I believe in you. Has an Austrian name. Ognan

rid Linode's gonna give you a $100 in free credit to try it out. I specifically am gonna tell you, to go and check out their hosted Linux servers Because you can literally install anything you want on that thing.

rid. FreeCent, which is,

where, in one of my courses, I talk about,

They have, like, one of those places. And it's great because you just sit there, And then you gotta eyeball the one you want, and you gotta, like, sit there and wait for it to come around, and then you gotta grab it when it comes. So he's has a little, rid. SVG, CSS animation of this. And I think right off the bat, that's that's awesome because it it just like I was not expecting that.

little sushi plates. You ever been to one of those restaurants where the sushi goes around the restaurant in, like, a little, has been defined. Mhmm.

Harry

rid Just write syntax highlight in the comment, and we'll, we'll get it for the next one.

Lee x l I. How do you think you say that? Harry oh, he has,

Harry Lee in the title tag of the thing, like, l rid I. So so it's Outline none. Bang important. So definitely 0 calorie energy.

So the first one we have here is Alright.

Yeah. Maybe straight edge.

So this one is a personal portfolio. As soon as you land on it, it's rid. Got this awesome

and just make sure you write syntax highlight in there. Like, half of you didn't. Half of you couldn't follow a simple instruction,

rid only the little conveyor belt? I have You gotta grab it? No. There's there's one in Denver that, Yeah. Totally agree.

You know you know what's the funny thing? I love that. It's so funny.

those are your 6 iPhones out of date. Yep. Yep. You know what? accessibility

Like, we watch a lot of PBS when we do watch TV, and then if we The kids really like Paw Patrol, though. So if it's like we put on a Paw Patrol, I'm like, I just really hate exposing them to this many ads, brother. Oh, yeah. We we don't have, like wacky thing.

Okay. Back to INAR.

TV, it's like a normal DVR. But if, like, I click on, Let's say I click on,

they get underlined like, kids like, toy commercials is when they're watching, like, something on YouTube.

with the other colors, like, not really changing, like, the underlines. I think it all works so well. The colors look great. The the projects, that's really, really, really nice. I kinda want something clickable in the products Projects here. I don't know if you, like like, notice that, Wes. There's, like, the icon of a folder.

rid Underline And it would be cool to listen for a mouse rid Scroll or a click of the sushi

Being able to, like, distill down Welcome to Syntax. This is the podcast with the tastiest portfolios

Rid a plus. Love that. And then underneath, it says, this is my place for thoughts, reflections, and everything in between. So, like, rid Like, what a copywriter.

legally downloading all of the kids' shows so that we can have them without ads somewhere because the the ads are just I mean, that's such a huge problem, especially on, like Yeah. Nickelodeon.

Stop. I need to really not watch YouTube. And it's it's crazy the with a second or 2. That's an example of really good

the end of another show starts up.

to to actually write about it. And, like, to me, that That looks good on looking to hire somebody. The Spotify thing would be funny for me because it would either be, like, you're listening to Raffy or Yeah.

but don't do that.

what it is that you do, You can learn

right off the bat. Someone lands on your website.

And we play them for our kids,

rid You're listening to Envogue. What's it gonna be? I'd like it's like that. That's the 2, the 2 extremes on my Spotify. We are sponsored today by a brand new sponsor,

Back rid. Inar, what else do we like about it? You know what? I love the color on this site. The colors work really well. The dark mode and the light mode. I love that when you toggle the The dark mode to the light mode, it's not just that you get a gray background. It's that, like, even the primary brand color, which is like a yellow on dark gray, re Turns into a really nice blue on white

thing, and they're like They're like, play it. I was like, well, you can't. You have to sit there and wait for this thing to pass, and how frustrating that is to just have to sit there and, like, yeah. I get it. You Have FBI warning or, yeah, I get it. You're you're fading this thing in as I scroll, That's and, like, that's the kind of thing that like, if you're looking to hire somebody,

as you like, custom fonts first came out. We would get these, like, beautiful, thin, little fonts from the designer, and then we'd look at it at it on Windows. And it would just be awful, and, like, you have to Sometimes think about that that type of stuff. So the color contrast is not high enough in a lot of these. Yeah. I was wondering where you saw that, but I see it now with, like, the Yeah. If you go to the on the rid My journal post. Yeah. Yeah.

Well, the our kids do that when, like, if you're, like, Dreaming something. I don't know how your DVR works, but with YouTube

a good chunk of their life

Rid Our the van that we bought has a DVD player in it. So very hard to fix because

Rid It's it's like Paw Patrol or something is the ending of an episode. They'll be like, what? I wanted Peppa Pig. I was like, just rid Wait 2 seconds. There's Peppa Pig. You saw me click on the Peppa the Pig icon.

Animation, in my my opinion. A lot of the animation we see on these portfolios today, you have to, like, sort of sit there for a second or 2, and, like, rid It's not a movie. You know? Like, don't make me sit there and watch your loading screen. It's not a movie.

Peppa the pig or Peppa the pig Peppa Pig and, like,

It's Our kids are super influenced by the ads. Like, Landon, anytime an ad comes up, he'll be like, dad, I really have to have this sparkle thing. I gotta have it. And you said that about the last commercial. We're gonna, like, That's why I actually really wanna just start shocking. It is definitely shocking, and it's one of those ones that will, I don't know if you you dug into the HTML at all in this one, Wes, but

And the other day, he was watching the iPad, and it just went black because it died. Like, it's out of battery. And he just goes, oh, ad. Oh, it's an ad. And he just sits there for, like, 2 minutes. Oh my gosh. Black screen.

With, like, Netflix and all these on demand services, there are no commercials, and they had lived check out the air fryer lid because I was a software developer that focus on web apps.

Without even knowing that this, like, stupid unicorn rid Rack testing, Express, Meteor. Why? Because if somebody's looking to hire you, they're gonna scan that and be like, oh, we use 3 or 4 of these things. Rid Like, we're clearly in the same realm. You know? contrast focus styles like, use this site with just rid Keyboard. Those are the things. Yeah. The outlet.

and he's just learning how to talk. And he goes, rid. Every time something comes on, he goes, oh, ad.

Like, it's like like a 40 second FBI

There's the name of the project and the description about what the project is, But there's no, like, click through. There's no repo. There's no even, like, photo of it. There's no, like so, like, the icons look nice, but they're almost kind of useless because it's just the same icon over and over again. Yeah. Like And they're way too big. Rather a picture or a link or something. Rid. Totally. I agree. I agree. I don't do pictures in my own projects, so, like, that's a kind of a bit of a PIA to do. It is, especially because they analytics.

without having

I'm Inar, a curious software developer who's trying to get a bit better every day.

can get out of date or or whatever. Like, especially, like, if you include the, like, browser UI in the screenshot, then then that gets out of date, and then all your or, like, rid. The the big thing a long time ago was to put, like, a iPhone with the website in it, and then, like, Well, let's Look at, what what he's used here.

Are you doing today, Scott? Hey. I'm doing good.

Rid. 300 but also a blue, red, and green version, which is pretty nifty. Yeah. The theming's great. Really nice touch. Yeah. I think this is just I think probably a couple more hours onto this website. Finish it up. Rid Yeah. This place will get And Scott and I will review them, meaning we'll sort of take a look at them and and, critique them in terms of both rid. Design, but also, like, the information that you're trying to get across, 2 oh, yeah. He's he's he's almost 3, actually, dead zone, which is, like, the space between when a

these mid rid building a Spotify component or writing about how you use Obsidian, Who are you, Inar? but we still found them. But we used to do animation. So if you refresh the page, and it's really just super good. So awesome work, Jack. This thing is great. Surprised to see it was built in WordPress when I, right click. Because I I viewed the whole thing. I was like, this this site is like, like, I landed on it. It's fast. It's good. It's clean. Yeah. It's nice and clean. It's airy. Does a really good job at using colors. Obviously, he's a designer, but,

The Gen z's are doing Then the words, thoughts, reflections, and everything have this, like, cool SVG because

mil. I bought the, like, birthday cake bang energy drink, and oh my gosh. It was awful.

Alright.

And they're like they have, like, a really good Coke and, like, a root beer. And I saw these rid. Zevia's at the store the other day, and it has a 120 milligrams of caffeine. Is that a lot? A 120? Why I'm yeah.

Awful. Like, it's so disgusting. I've I've tried a couple of those Bang energies, and I just I can't get into it. I don't know how these

I It's like a have not had zevia.

9. Tab 9 is,

rid. Code integration with your editor that uses AI,

Mhmm. And, you You had a zevia before? it that that could be fixed. I think that this this website is really, really sweet. It gives off a really good vibe.

Yeah. It's decent. Yeah. Do you know those, like, bang energy drinks have, like, 300, which will, like, just send you through the roof. Really? Yeah. I I got 1 at the gas station because I I I used to like to get a lot of energy drinks. I was like, I'll try one of these Gen Z energy drinks. I was like, holy cow.

Let's get into the syntax rid. We ask people to submit their websites. If you want us to review your portfolio site on the podcast, just submit it to rid. The potluck button on syntax.fm

and new sponsor today, tab Tab rid. Nine. They are AI code completions like, it's amazing Again, I think we need to stop doing that. I think this is an artifact of This is a really cool website, and so

Stevia based rid Pop.

is it the vibe or not? That's kinda what we're going at for the Gen z.

we ask you to submit your portfolios, there's no, like you can't just say, like,

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Talinski and Wes Boss.

for you and your team to boost your productivity. So you're a developer. You're working in Any number of language, JavaScript, Python, TypeScript, PHP, Java, SQL, Go, Rust, and you name it. You're working in Versus Code or Sublime Text or This is rid Another little portfolio website is using this kind of cool,

at how helpful this was when I turned it on. Rid. Thank you, Tab 9, for sponsoring. Last 1 we have is is pretty wild.

I have an array of courses. I say courses dot. It's like, do you mean map? Yeah. Oh, do you wanna call each one course? Yeah. Of course.

syntax, and that's gonna give you 50% They are so good. I couldn't believe it because it's like, It's so fast. It gets so crispy so quick. So, for Christmas, my wife gave me the air fryer lid for our instant pot,

giving this thing access to my code, they've got a very, very good code privacy page or you can click on that. And it is very cut and dry as to what they do with the code and what these things are specifically trained on. So rid. I would check it on out. They've got a special deal for all of y'all syntax listeners. Go to tab9tabne look and feel, and in general, just just the vibe if you're rid. If you're a Gen z listening,

.comforward/promoforward/ the j and Yeah. These, like yeah. These are just, like, little, like, think pieces show that, like, you care enough about,