Syntax Highlight

Welcome to Syntax. This is the podcast with the tastiest portfolios rid. On the market, today, we've got a syntax highlight episode for you. That's the episode where, we ask you to submit your portfolios, 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, look and feel, and in general, just just the vibe if you're rid. If you're a Gen z listening, is it the vibe or not? That's kinda what we're going at for the Gen z.

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.

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

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

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.

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.

Yes. And it comes from marijuana because mids are, like, medium quality marijuana.

Oh, really? Yes.

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? That's so mid. Alright.

Rid Let's try it. Let's try to use a bunch of Gen z slang in this, in this episode. Oh, 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, rid. More like LitNode.

They are the cloud host with the most. We'll talk about them, partway through the episode. LogRocket JavaScript session, rid. Replay and new sponsor today, tab 9. Tab 9 is, a rid. Code integration with your editor that uses AI, to power code completion. We'll talk about them partway through the episode as well.

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

I'm caffeinated, man. I made I we could start Making our own coldburkin. We got into a little pit where we were just, like, going to Starbucks every day because Oh, yeah. Yeah. You just get into the pit. Yeah. Yeah. The pit. I've I'm drinking one of these,

found this at the grocery store last night. Zevia 0 calorie energy.

Mhmm. And, you You had a zevia before?

I It's like a have not had zevia.

The zevia is like a, Stevia based rid Pop.

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.

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.

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

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 these mid The Gen z's are doing Alright.

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 just make sure you write syntax highlight in there. Like, half of you didn't. Half of you couldn't follow a simple instruction, but we still found them. But rid Just write syntax highlight in the comment, and we'll, we'll get it for the next one.

So the first one we have here is Harry 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 Harry x lite.

Yeah. Maybe straight edge.

So this one is a personal portfolio. As soon as you land on it, it's rid. Got this awesome animation of, little sushi plates. You ever been to one of those restaurants where the sushi goes around the restaurant in, like, a little,

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

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.

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.

And it has nothing to do with the web development, but it shows off his skill in being able to make this animation work, which is pretty cool. Yeah. It's really Great looking.

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.

You can't click them. It does nothing. 2, 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?

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

And it would be cool to listen for a mouse rid Scroll or a click of the sushi 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 nice, photography here. That's, like, one thing that Not a lot of devs do is invest in 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 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.

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.

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, like, a avatar of, like, their, like, Wii character or their Ethereum monkey or whatever.

Yeah. We don't want your Ethereum monkeys.

No.

What else we got here? 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. If you have your line height too close together, and in addition, there is letter spacing that is too high,

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 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, like, times value. So 1.5

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

too spaced out unless you go go overboard. Yeah. I wouldn't say that. I mean, rid. Because you're gonna get somebody who's, like, a line height 3, and then it's gonna look how weird it is.

Well, let's Look at, what what he's used here.

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.

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 that's like his resume.

And on the non, like, mobile screen, 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, besides needing to be, like, twice as fast, They're a little slow.

Besides tweaking the speed there, if you do an overflow rid Hidden on the container of that. It will help so much more because right now, you have this, like, white menu section, and the text is animating, but the text re 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.

Another tip I have here is that the entire resume, A lot of the information about each of the items, so the universities, the jobs, things like that, it's all in italic.

And the font that's being used, the italic just makes it look pixelated.

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.

And I took the italic off, and I was like, Much better. So, I think what's being done here is is you're trying to differentiate between the headers of each of the university items And the actual information underneath. So you should just make the headers more bold instead of trying to make the description of each one. A talc. I think that'll look a lot better. Nice.

Yeah. Totally agree.

Now I have some some HTML tips.

I don't know if you you dug into the HTML at all in this one, Wes, but just about all of the text on the site is within a div. So there's no paragraph tags.

There's no 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, 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

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

And you should it should still be readable and not just a mash of of text, 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 anybody who's gonna be hiring you is gonna be checking that you know

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

dump of things that he's used.

And when I was doing freelancing and rid Whatnot. This was huge for getting clients where you just literally dump React, Redux, Svelte, TypeScript, D3, JASS, MoCA, 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?

Moca choco latte?

At the very bottom, moca choco latte.

Yeah. Yeah.

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.

We're in silly mode. That's what 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.

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

Did layered paper art, rid. And build a nightstand with woodworking. And, like, it's amazing because, oh, he made his mom a dress.

Cool.

Rid Amazing. Anyways, it just it just shows that, like, you're not 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 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

If you can make a dress, you can make a website. Definitely.

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

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, .software. I didn't even know that was a TLD.

So, great domain.

Right off the bat, Austin has some really cool little touches here where we have this little rid. BG guy, which I'm assuming is Austin, and the eyes follow your mouse when it moves around. It's just cute and fun, and and those types of things are neat.

Rid. Now this side has some issues.

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

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, I think Austin might have the The symptom where you are or the not the symptom. The the situation where you're like, 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.

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.

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.

Another thing I noticed here is that you have your skill section, 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% react or whatever, 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, But the progress meter, totally unnecessary.

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

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 You're hiding a ton of information, I should say, and you're making us work to get a lot of information.

And it's just it just feels unnecessary.

Oh, I found a typo too.

Rid at the bottom, it says, I make coding TalkTalks, 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, fix that one. Little buggy there.

I I have a, a joke in one of my courses, rid called when I was explaining the temporal dead zone, which is, like, the space between when a Script is initialized and when a variable has been defined. Mhmm.

And 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 because people don't understand.

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 where, in one of my courses, I talk about, rid. FreeCent, which is, 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 Freeza is a thing. I like the overall like, the font is a nice font on there. There is a rid. A light oh, you can oh, there's multiple versions of the website. You can have a a light and a dark version, 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 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.

The having that, like, white scroll bar with the gray

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 West. Do you wanna talk about Linode? Yes. Linode is cloud computing developers trust.

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

Specifically myself, 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, you can host multiple 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.

I I put Caddy on my one of my projects the other day, And it allows you to proxy, like, each of your projects. Let's say you have 10 node projects. You put them all in their own port, rid 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,

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

Boss Jannec.

Oggen? So sorry. Yeah. Oggen?

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.

This is rid Another little portfolio website is using this kind of cool, what do you call that? Notes. It's, like, kind of, like, green nodes or particles. It's a little bit trippy. Map. Node map.

Because as you move your cursor, it moves you around, Which is is kinda cool.

So it right off the bat, it tells you, hey. I'm Augie, a software developer that focus on web apps.

Rid. I use React Node with React and Node with TypeScript daily. I love that. Just, like, straight into the point.

Being able to distill what you do Into a single sentence 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.

That's good.

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 rid thing where Node. Js is 90%, but Django is only 60%.

Again, I think we need to stop doing that. I think this is an artifact of People selling 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, 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.

Mhmm.

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.

The text on the website is not selectable, at least in the initial, the initial paragraph. And it drives me crazy Do you know why?

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, the inspect element will always inspect the thing you've 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, 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.

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 cyclops in the background. Rid Yeah. This is another thing I see often is people do, icons to their LinkedIn, GitHub, 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 they looked yeah. Just or, like, childish. You know? Like like, way too big.

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,

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 is not within the tag whatsoever.

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.

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.

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

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.

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.

And if you check that out, it's gonna be the same on Safari. So anybody visiting your site on Edge or Safari or Safari Ios, which is every single iOS browser. As in if you look at your website on iOS, it's gonna be broken images. So make sure you give that a give that a look.

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.

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, multiple versions of each image. That way, you can be supported. It's interesting because there's

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

So good things. The experience, 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, I work for this company as this, title from February until now.

And then it says Node, TypeScript, React, Electron, and Google Cloud. So, like, without even having to read a huge paragraph, I know exactly 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

Obvious. They're not overdone.

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 overall, a good job.

Let's move on to the next one.

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.

Let me, let me explain to you this one here. It's n dom 91, as far as n d o dot dev is the website. And 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.

It's very odd. So I I have the site open, and every couple of seconds, I don't know what's of happening because it doesn't obviously look like something's changing in the site. But every couple of seconds, the paragraph text Shifts in that little Checkly in the mouse or whatever go on to another line, and the scroll bars show up and disappear.

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, rid. And the background orb is growing and shrinking, which is it gives a good vibe. It's pretty mid or pretty not mid,

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,

Firefox, it's making it horizontal and vertical scroll on and off. And then there's also, like, a rendering artifact, rid which is showing, like, like, the edges of these random boxes, which is very hard to fix because there's no, like you can't just say, like, rid No rendering artifacts in CSS. You know, it's like a lower level problem, but it that that could be fixed. I think that this this website is really, really sweet. It gives off a really good vibe.

The font is bang on.

The links have this really cool underline.

The links have a little pop up when you hover over them That 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.

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

Like. Yeah. Maybe dial it back. I know it's cool effect 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.

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

The focus styles like, use this site with just rid Keyboard. Those are the things. Yeah. The outlet.

Point, man. Throughout the whole site.

That's and, like, that's the kind of thing that like, if you're looking to hire somebody, 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 that their focus styles are on point, which is, like that's a nice touch. Here's only critique about keyboard navigation.

On projects, I think they might have used the CSS, columns rather than, like, a grid. So when you tab through it goes, 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.

I've talked about this many times in the past of and, like, there's a huge thread on, 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.

And you want your content to go left to right and then wrap, but still Pinterest into each other.

But, the one other critique I have about this is, like, go to your projects page, and I can tell it's tailwind Without even viewing the source, which is like Yeah. I it looks good to, like, most people, 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 Tailwind obviously doesn't need to look like Tailwind, but a lot of Tailwind, specifically UI, looks like, it.

Looks the same.

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,

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

I think that this one does both. And, also, it it shows the, 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

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.

2, every single word is wrapped in a div or in a span 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.

When they when you refresh it, they do, like Yeah.

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.

Meaningless meaningless

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.

Rid. This episode is also sponsored by one of our sponsors over here that we've had for, quite a while, and we love and use ourselves, which is LogRocket at LogRocket .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 to just 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.

And they've they've won all sorts of awards for the type of, 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, And you now get front end performance monitoring, which is actually pretty new. You get product analytics.

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.

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

Such a good name. Yeah. You know what? Jack's Jack's portfolio is definitely, 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.

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

The colors are great. The typography is great. Jack Clearly has, like, awesome design skills because this thing looks so good.

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, and it feels like every coolest modern site that you've seen today. Rid. It's lightning fast,

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, 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 and the j rid Hits the period and, like, 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

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

The fonts are really nice. There's a couple, accessibility concerns with how light the text is. Rid. So, definitely, like, a lot of these a lot of these websites we have today have, contrast issues with their accessibility, and I find this is rid. Pretty common with a a lot of design, especially back in the day when we used to do 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.

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

That makes sense. Problem with Jack's site, Wes. Uh-oh. What is it? Jack, I'm about to roast you here, in the same way that the last site had a really awesome utilization of keyboard navigation.

Jack's site has, like you can tell that it's changing what it's on, but I'm pretty sure Jack has an outline 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, 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.

Just a small little thing. I found it. HTML space body space star.

Outline none. Bang important. So definitely Jack. Very intentional, Jack, buddy. Jack. So Come on.

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

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 dotted line or that blue glow when you hit the tab key or you click on something, it because it looks ugly. Right? And you shouldn't do that because, rid It's inaccessible. It's hard for anyone to sort of tab around, but you luckily, you can you have full control over what those look like. So,

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 This thing is great. Love you, Jack. This is still a fantastic website, so great job. Top tier. Yeah.

Okay. Next 1. I'll get it. Next one is rid Inarugundi, and this one is freaking fantastic as well. Wow.

Rid. I'm a big this one has probably the best messaging right off the bat. Someone lands on your website.

Alright.

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

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.

Being able to, like, distill down what it is that you do, rid into just a couple sentences 2 sentences, really.

Then the words, thoughts, reflections, and everything have this, like, cool SVG rid Underline animation. So if you refresh the page, they get underlined as you with a second or 2. That's an example of really good 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.

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

Rid Our the van that we bought has a DVD player in it. So we started buying a bunch of, like, DVDs from thrift stores because they're, like, a dollar.

And we play them for our kids, and they're they're getting mad at the FBI.

Like, it's like like a 40 second FBI 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, but don't do that.

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 TV, it's like a normal DVR. But if, like, I click on, Let's say I click on, Peppa the pig or Peppa the pig Peppa Pig and, like, the end of another show starts up.

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.

Our kids our kids hate the ads. Rid. And, like, our youngest, he's he's not even 2 oh, yeah. He's he's he's almost 3, actually, and he's just learning how to talk. And he goes, rid. Every time something comes on, he goes, oh, ad.

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.

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

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.

Our kids don't watch, like, live TV, and the only spot they ever see, like, kids like, toy commercials is when they're watching, like, something on YouTube.

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.

Stop. I need to really not watch YouTube. And it's it's crazy the rid The companies are clearly paying a lot of these, like, family vlog channels to, like like, the kids play with this crappy toy, because With, like, Netflix and all these on demand services, there are no commercials, and they had lived a good chunk of their life without having Without even knowing that this, like, stupid unicorn bird thing is a thing.

Okay. Back to INAR.

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

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

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, those are your 6 iPhones out of date. Yep. Yep. You know what? 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 and Yeah. These, like yeah. These are just, like, little, like, think pieces show that, like, you care enough about, rid building a Spotify component or writing about how you use Obsidian,

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

Tab rid. Nine. They are AI code completions 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 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.

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

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 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, 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 .comforward/promoforward/ syntax, and that's gonna give you 50% 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, 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.

It's like a Windows 3.1 That's been recreated in the browser.

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.

So, it's from Cyril from Zurich, Switzerland.

Is this here's my website for the syntax episode.

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 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 rid things inside of it. And, like, this this to me is awesome because if you wanna hire somebody who is creative and who can figure things out and, like, are not bound by the same ideas of a website.

This is a really cool website, and so I can't really explain it too much other than it rid. It looks like Windows 3.1, but I 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

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

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

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.

There's, like, a lot of, like, fun little touches like that. All of the windows are scrollable. But, again, it 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, 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

URL 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? Rid. It's just stored in the URL, which is genius. Like, that's the OG state manager URL.

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

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

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.

And The Alpinist is on Netflix, The Alpinist.

And this is about a a You know this, the free solo climbing, the same way that the the Dawn Wall and what was that free solo were about a guy just climbing a mountain without Anything.

But this one is is honestly, it's as shocking as free solo And and maybe more so in many ways because he does all sorts of ice climbing.

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

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

He's kind of weird, 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.

So he's not doing essentially the the highest peaks, but he's doing the craziest vertical stuff where it's, like, with no ropes, no anything, just chopping with ice axes. And his story is unbelievable.

He's a wild guy. It is shocking. It is definitely shocking, and it's one of those ones that will, 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.

I got into air fryers rid Around Christmas time, which is like I had I had brushed off the air fryer 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.

But I was rid I was talking about getting a dehydrator 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? Like like beef jerky, 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.

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

And if you wanna do a meal for an entire family, you need something a little bit bigger. But if you're looking for something that is affordable rid. And maybe a smaller footprint than buying another machine. If you already have an Instant Pot, check out the air fryer lid because I was

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

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, 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, rid Like, fed and in the bath in, like, hour and 15 minutes. So, like, being able to give them, like, nice crispy vegetables in that time is It's a nice

touch. Yeah. Cool. Alright. Shameless plugs. I'm a going to shamelessly plug level up tutorials .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.

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 rid

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

You can learn 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.

That's it. Thank you so much for tuning in. Catch you later. Peace.

Peace.

Head on over to syntax.fm for a full archive of all of our shows. Rid. And don't forget to subscribe in your podcast player or drop a review if you like this show.