338

March 24th, 2021 × #Web Development#Careers#Portfolios#Critiques

Syntax Highlight (We Review Your Portfolio)

Scott and Wes provide portfolio feedback for developers looking for jobs. They review designs, code, content and accessibility. They also discuss explosive gases, VR mini golf, and guess the location games.

or
Topic 0 00:00

Transcript

Wes Bos

Welcome to syntax. Today, we've got a syntax highlight for you. We'll talk about what that is in just a second. But today, we are sponsored by 3 awesome companies. First 1 is Sanity, structured content, CMS.

Topic 1 00:11

Sponsors: Sanity, Sentry, Mux

Wes Bos

Second 1 is Sentry, error exception and performance tracking.

Wes Bos

3rd one is Mux, API for video. We'll talk about all of them partway through the episode.

Wes Bos

With me as always is mister Scott Talinsky. How are you doing today, Scott?

Topic 2 00:33

Discussing weather in Denver and fresh air

Scott Tolinski

I'm doing good.

Scott Tolinski

Man, I got my windows open. Denver is one of the weirdest places because our yard is covered in snow, And I have the windows open, and it's sunny and beautiful. It's like, I just don't even know. You know, it'll snow all morning or all evening and then just be sunny and whatever. Okay. I shouldn't even get into the weather. I know that's lame. No. Look. I love talking about the weather. People always poo poo talking about the weather, but Literally love talking about the weather. We got one of those days here today too. Yeah. Majestic I got my window open, but it snowed this morning. It's a weird one. It's a weird one. Rid. Getting that fresh air. We got one of these, Aware, air quality sensors. It's been telling us our c o two in the house is too high, which is rid Just probably due to the windows being closed all the time and it being winter. Right? So we've been making an effort to open up those windows and get some oxygen in here. Rid Some o two. Love that o two. Yeah. We also got a couple Allens, which is a air air there is a air filter, and we just call it Allen as if It's a member of the family. We'll be like, Landon, can you be nicer to Alan, please? Like Alan,

Wes Bos

that's great.

Wes Bos

Isn't oxygen like, let's just talk about oxygen for a second. Isn't oxygen crazy that we can breathe it normally, but it also is explosive?

Scott Tolinski

It's crazy. It that's crazy. Are we explosive? Yeah. I don't know, man. I don't know. Don't breathe too much of it. Otherwise, you explode. You should go to Joe Rogan and just present that as fact, and all those people will be like, yeah, man. I heard you explode.

Wes Bos

Let me tell you. I went down a rabbit hole of finding out what is the most explosive gas because for Why? Why? That is so For the potato gun at the cottage. So we we have this, like, gun that I made that you put potatoes in, and then you rid. You open up the back. It's it's made from, like, PVC pipe. Mhmm. I put, starter fluid in it. That's that's what I ended up on being the most explosive thing. Rid. And then, there's a barbecue lighter, and then you press the button and puts a little spark in this chamber filled with starter fluid, and it goes boom

Topic 3 02:03

Discussion on explosive gases like oxygen

Scott Tolinski

rid And shoots a potato across the lake. Gonna get some PVC shrapnel.

Topic 4 02:37

Making potato gun to shoot potatoes across lake

Wes Bos

I went on YouTube, rid. And there was a guy that took his, like, grandma's oxygen tank and just put, like, a, like, a little of oxygen in it, and the thing just, rid Like, disintegrated in his hands, and I think he got pretty hurt, so don't do that.

Wes Bos

But oxygen

Scott Tolinski

oh my god.

Scott Tolinski

Who knew, man? Alright. Well, let's get into these, these syntax highlights. Now what is syntax highlight? What are we doing here? Well, we did this a couple of Weeks ago or maybe like a month ago where we took a look at some people's profiles and online presences and critique them a little bit. So we wanted to make this semi regular thing where, rid Especially for anybody looking for work. That's really the caveat here is that if you are looking for work, close your resume up. Let us know. We'll we'll take a look at it, talk rid maybe give you some pointers on how to improve it in the minds of people who would be in the brains of hiring managers, those types of people. So, You know, I think I have a pretty good eye as a hiring manager as to what types of things I would look for in a developer just based on their personal site Or their web portfolio.

Topic 5 03:45

Syntax highlight to critique developer portfolios

Scott Tolinski

So if you are looking for developers and any of these sound like people you wanna check out, head to our show notes. We have links to all the sites so you can check them out And, you know, get in contact with anybody here.

Scott Tolinski

Hopefully, this helps some people increase awareness to their Hunt for a job as well as help them improve their online presences to make that if they do get an interview, make that interview Sweeten a little bit because the hiring manager will already be into their their work. So first1,

Wes Bos

do we wanna get going? Sure. One more thing I was just gonna say is I'm just thinking about this as well. Like, all the people we have here today are people that are looking for a job, rid. But maybe we'll do another one of people that did just get jobs, and we'll review their site because, like, obviously, those worked. Right? And it would be nice to have, like, a list of of sites that

Topic 6 04:14

Future show idea: Showcase of portfolios that got jobs

Scott Tolinski

worked for people. Yeah. This could be like a syntax highlight, and the other one could be, like, rid A syntax showcase. Here's some stuff that works. Oh, I like it. We have to get, like, Price is Right music for that.

Wes Bos

Yeah. Let's get the the first one. It is shaquillehansford.com.

Topic 7 04:49

Review of shaquillehansford.com

Scott Tolinski

And you wanna kick that one off there, Scott? Yeah. So, Shaquille, I think his site really is obviously built for mobile. And I think that is the biggest problem is that everything is in this very vertical column space where it's just stacked on top of each other to the point where, Like, when you shrink your browser down into a mobile view, it even has, like, the the navigation that's at the bottom. When you shrink your browser down into a mobile view, The site's really pretty pretty decent, though the big problem with even that is that there's a ton of weird white space between the portfolio projects And the nice intro paragraph.

Scott Tolinski

But if Shaquille were to, let's say, reduce that space, but then bring back some more space into the header, Maybe some more space in that line height. Open up that a little bit a little bit more.

Scott Tolinski

The homepage could, like, with some spacing CSS tweaks, it would look really nice on mobile. And even when you get down into the portfolio projects, all of this stuff looks nice in mobile. Rid The problem is is once you pull it out into desktop, there's a ton of problems with everything being in 1 column and that you end up Scrolling a whole lot for not very much information is really what it comes down to. And some things get stretched really wide. Other things are all hidden behind accordions, which The accordions work really well. I noticed myself not really too caring much about the accordions when I was on mobile. But on desktop, some of the accordions are fine, but other ones, like, rid In lessons learned, he has an accordion within an accordion. Not necessary.

Scott Tolinski

Even on mobile, that could be just 1 accordion. Right? You open the accordion. I don't wanna click a whole bunch of accordions just to to dive down. Like, how many accordions am I gonna have to go to? It's only a couple levels deep. I would personally keep it to just one level. One rid. Really cool thing I saw about this, so I just went to his Twitter and checked it out. And first of all, Twitter is on point. All the tweets are rid

Topic 8 06:43

Good job linking Twitter and using custom domain

Wes Bos

about tech, sharing content, asking questions, which is exactly at least for me, that's exactly what I wanna see from somebody who I'm looking to hire. He has a custom domain.

Wes Bos

I want you to hire dot me, and that just redirects Over. So I'd be curious to see how well that works because I'm impressed that that was not taken.

Wes Bos

So good on you, Shaquille, for for grabbing that one. Rid. Yeah. No kidding. I pretty much agree with Scott as well is that the desktop experience of this needs a little bit of work. It's a little bit too spaced out, a little bit too big.

Make phone number clickable and add email link

Wes Bos

The stuff I did like about it, there is a link to his Twitter right away. There's link to a phone number. And one thing that rid. Grinds my gears is when people don't wrap their their phone numbers in anchor links. So maybe you don't know about this, but if you have a phone number, rid. You wrap that in an a tag and put the h ref, h ref to t e l colon, and then just go ahead and type out your phone number, rid. And that will make it clickable when you're on Ios. That's a big thing. Yeah. So he he did that here, which is awesome. So good job on that. And then the rid. Email address is not hyperlinked, so throw a mail to around that sucker just so that someone can go ahead. But I thought it was really cool. I, rid. I always appreciate when people put phone numbers on their website just because it shows that they're, like I put phone numbers on my course website,

Topic 10 08:07

Discussing strange calls from phone number on site

Scott Tolinski

And I get some interesting calls every now and then. I do too. People call me, and they're like, wait. Who is this? Is this Scott? Like, it's me.

Wes Bos

Ready. Yeah. I'm in the gym. What's up? I I had a call once from a couple of weeks ago. It was somebody who had served some time in the US Army, And he was talking to me as if I was in the army, and that finally, after about a couple of minutes, I was like, hold on. I'm not in the army. And he he's like, oh, I thought you were in fatigues and and all that. And I just, like, was sitting there scratching my head all night as to, like, what would have caused that. And then I went rid My Twitter profile, and my Twitter profile, when it's very, very small, is like a picture of me with, like, You have a windbreaker on, don't you? No. It's like a It's a black button up shirt that has green leaves on it, which could be mistaken for camouflage.

Topic 11 08:38

Improve desktop spacing and typography

Wes Bos

And then I also have, like, a almost like a crew cut haircut in the photo, which makes sense. So I was like, oh, man. I was like, that was it. That's funny. But, yeah, I actually don't mind those phone calls every now and then because usually they're just quick questions about a course. Hey. I'm about to buy this thing, and very rarely do people call me up and say, hey. I'm getting a syntax error or something like of it. Yeah. Yeah. I've got some good ones where they're like, hi. I saw this credit card on on my, this charge on my account, and I'll and I'll be like, okay. I'll look it up. It says this charges for so and so, and they'll be like, well, that's my son, but he shouldn't be using my credit card. Just feel like, oh, okay. I'm gonna let you deal with this. This is not for me. Rid Yes. I also do that as well because

Topic 12 09:39

Keep single accordion level, don't nest

Scott Tolinski

if you can stop somebody from doing a chargeback because they don't recognize Yes. Who who actually did it, then you save yourself $15. And people the charge racks. I get people doing chargebacks. They'll be like, oh, I just forgot to cancel. I'm gonna do a chargeback. I'll be like, what are you talking about? Why would you do that? Just email me. Rid Yeah. Just email. Or even sometimes when it is a stolen card, I can refund it before they do a charge back, And then you don't get the you don't get the $50 hit, which is great. There's, like, a host of people who just, like, first step is charge back. Like, I'm not gonna do anything. Just charge back it. Rid Okay. So back to Shaquille's site. One more thing I wanted to say about this is he has his link to his Twitter right under his paragraph, which I think the paragraph is really good. The paragraph says, ready. Nice to meet you. I'm a full stack developer with a preference for the back end.

Scott Tolinski

That's it. That's a great starting. I'm seeking full time employment or contract work. I specialize in MongoDB, Express, re React in a Node. Js deck. Want to hire me? Send an email, text, or tweet anytime between 7 AM or 11 PM EST.

Topic 13 10:25

Good copy in introduction paragraph

Scott Tolinski

That's all great. That is all great, and then is linked to his Twitter. Then he has the the link, the phone number, email, whatever. But then there's, like, some social links. I would move the social link stuff rid To the bottom with exception of maybe the GitHub link I would keep at top because one one of those is Twitter, who we already has this Twitter, maybe just a couple inches above it. So you don't need the Twitter one. Re Email. You already have your email a couple inches about that. You don't need the email link. The blog the blog doesn't look like it's being maintained. I would drop it. There's also one link to a book on Amazon. I would drop it you wanna, like, make that Easter egg or something. But, again, it doesn't need to be front and center.

Scott Tolinski

But either way, I don't think Shaquille's got a ton of work here. I think he needs to make this a little bit Nicer on desktop and then just tweak it. You know? But I think the copy is is all good, and and I feel like when he's, like, talking about lessons and skills learned from his project that he has here, that's all nice stuff.

Topic 14 11:28

Overall good with some tweaks needed

Wes Bos

Yes. Alright. Next one we have is benlamers.dev, Anne, I feel like I feel like I went to school with Ben Lammers.

Topic 15 11:39

Review of benlamers.dev

Wes Bos

That sounds like a very

Scott Tolinski

Was Ben Lammers at my my wedding? Is Ben Lammers? Kingston, Ontario. Wait. Did we go to, spring break together?

Wes Bos

Yeah. Probably. I'm just joking. From Canada.

Wes Bos

Maybe that's just a common name around here. Anyways, this is an awesome looking site. So You visit it right off the bat. It's got yellow, which Scott and I, both a big fan of the yellow. Big fan yellow.

Scott Tolinski

Landon Landon knows that yellow is my favorite color, so he'll always be like, Dad, I got you this, and there's even a yellow one. It's your favorite color.

Topic 16 12:16

Animated header on scroll is well done

Scott Tolinski

I thank you, bud.

Wes Bos

It's got ready. A a little like a welcome animation where it outlines the letters of his name. And I really like this because both it's it's really quick, And, also, it doesn't stop you from scrolling down to the rest of the website if you don't care about the animation. So it's not like this thing where you have to sit and watch the The intro before you can click like this is not a flash website from whatever 500 years ago. I'm just gonna say, like, the the design, the fit and finish of this website is what a lot of these other ones that we are reviewing today should be aiming for. So rid. There's just a level of polish on this thing that just looks really, really good. The spacing, the line height, the padding, most importantly, I'm actually this is my one thing is, I'm a stickler for the right amount of box shadow, rid. And most people put too much box shadow on here. And I if I was if I had Ben sitting right next to me right here, I would say, Ben, Cool it on the box shadow just a little bit. The existence of it or the properties of it? Because I like the existence of it. The existence of it needs to stay. Yes. Rid. It's like a black box shadow over top of yellow and white, whereas your your box shadow should just be a darker color of what it's casting onto. The easiest way to do that is not to calculate what it is. It's just to put a use RGBA values on your box shadow and put the alpha to, like, 0 point 2 are sighing. So I do believe that most of Ben's problems could be solved very quickly with this by just tweaking. So he has his in CSS variables, which, Ben, rid Fantastic use of CSS variables. Your shadow is your shadow level 1 is at 0

Topic 17 13:32

Reduce box shadow opacity slightly

Scott Tolinski

and then 0.5 for that That opacity, I think you could take that opacity down to something like 0.3 to have it be a little bit nicer or even lower. Yeah. 0.2 is where you want it. Yeah. And he already has a variable for it. Shadow 3. Perfect. I'm I'm in here tweaking it right now, And I I personally like Me too. A little bit more spread myself, but, you know, I'm a spread guy. I dig the spread. I dig the diffuseness sometimes.

Topic 18 14:02

Use CSS variables to easily tweak box shadow

Scott Tolinski

You just have to fire up level up tutorials to see that I can go a little bit overboard. But I totally hear what you're saying. That opacity does need just a rid Let's let's turn it down a little bit. Yeah. You know, the site is very aesthetically pleasing overall. Like, I think the the text looks good. The fonts looks good. I I really like the way it looks. One thing I didn't quite grab the 1st time around looking at this was that black bar with about skills projects and timeline. Those are links, and that's like a navigation.

Scott Tolinski

And that's Cool, but it's kind of like this forgive me for saying this. It's, like, half below the fold on my on my monitor. I hate using the below the fold. It's kind of a meme at this point that, like, below the fold is like a problem.

Main nav slightly too low on desktop

Wes Bos

It's because he's using viewport units. Yeah. And no matter how high it is, it's always just off the screen. But this for me isn't like a perfect just off the screen. It's like

Scott Tolinski

It's it's to the point where it doesn't look intentional. Yeah. I think you can make it more intentional. Whether it is fully off the screen or fully on the screen, I think it could be more intentional.

Topic 20 15:31

Make nav position more intentional

Scott Tolinski

Rid That's just a minor gripe. Box shadow minor gripe. Everything looks really nice. Some code little tidbits.

Scott Tolinski

One thing I know this is rid Probably like Gatsby or something. Right? But you got a lot of data URIs in here. The data URIs, in my experience, can be a little tricky. They're not a problem. The the site loads really fast. I don't notice it being a problem. I just know as somebody who's used a lot of data URIs that rid. If you use too many of them, the CPU can skyrocket because the CPU has to decode all that stuff. So you might not need them, but some of these things I think could just be straight up rid like all of these logos. Right? I don't know why you would need a, data UI for that, but it could just be the processor or preprocessor doing that too. It's not a big deal. Minor Cray. Another thing is the HTML needs some work.

Scott Tolinski

There is good use of, like, section tags, but rid The specifically, the headers.

Topic 21 16:13

Use semantic HTML tags like main and article

Scott Tolinski

I did some finds on this page. There are 4 h ones on the page. The rule is 1 h one per page. In your instance, the h one should be Ben Lammers. That's the h one. There are 20 h twos in this page. There should be rid Four h twos, maybe 5, full stack developer, about skills projects, timelines, or maybe even the high on Ben skill set projects, whatever. Those little headers, rid Those should probably be h twos, and that's probably it. H threes, I found four t. Four zero h threes. That's too many. And then there's no h rid Fours, I think, or h fives. I'm not sure. Either way, you gotta tame that a little bit. That's something that I would look at to say, 11 h one per page, please. And then h two's just basically 1 per section.

Scott Tolinski

Not necessarily 1 per Gmail section, but 1 per major section of the site, and maybe work that semantics a little bit more. And then you didn't have a main tag. That's fine too, but you You could have a main tag there. I don't know. I usually check to see some of those semantic HTML tags to see if they exist. No use of, article.

Topic 22 17:24

Articles would be good for timeline and projects

Scott Tolinski

Article would be perfect for rid The my timeline, you have different things in your timeline. Those could all be articles. The projects could all be articles.

Wes Bos

Minor gripes. But yeah. Rid And that's my HTML tune up. Yeah. Yeah. I think the HTML as well could have a little tune up. Run it through the accessibility. There's rid A couple minor little things. I probably have more than this on my website. But if somebody is looking to hire you, they're probably gonna run your website through the accessibility, the axe tool. Rid. And, like, you could probably fix this, the the few little issues that are here in in 20 minutes. And then then all of a sudden, It's showing a 100% on the accessibility test. That looks pretty cool. You have to intentionally

Scott Tolinski

Look into that to get a 100 all 100 on the axe test. Yeah. What I wanna see is that next time we do a syntax highlight, I wanna see some people Coming in with pristine HTML. I I wanna see some people running their stuff through that first. Okay. Next one. Gary, are you ready to move on, or do you have anything more to say rid To, Ben, fantastic site, Ben. Looks really great, by the way. It. Yeah. Good job, Ben. You know, some of these services, Wes, they make it really easy for you to use the properly, semantic HTML because you can code your components and use those components, and you're not able to make the HTML decisions every single time. What is one of these services that allows you to re Use your own components in a back end. Bring your own front end kind of thing.

Topic 23 18:08

Perfect accessibility score shows attention to detail

Wes Bos

Ready. Sanity is a structured content CMS. It's a headless CMS. It's something that your clients are going to absolutely love. Rid. People the marketing folks on your team are gonna love it. Why? Because you can go into Sanity. You can create all of your rid. Content types, all your relationships, and then your marketing team, whoever it is, can go and put all the data in there. And then when that data changes, you can rebuild your website rid pull that in on demand from their API, which is really, really slick. And then it's just up to you to to render it out into different components ready. And onto the website, you can pull it into your app. There's some pretty cool I've I've heard Sanity is being used at a major restaurant here in Canada, rid. And that data is being pulled into their menu system. So every time you're looking at the menu at the restaurant, that data is being piped in My sanity. So some pretty cool stuff. Hot and fresh data piped in.

Sponsor ad read for Sanity CMS

Wes Bos

Hot and fresh data.

Wes Bos

Scott, you should have a, rid Like a company where you make slogan, stuff like that.

Wes Bos

You're really good. Thank you. Hot and fresh data, Sanity's got it for you. So for your next project where you need a CMS, check it out at sanity.i0forward/ syntax.

Wes Bos

Make sure you use that URL because that's gonna get you double the free usage tier, And it also shows Sanity how much you, syntax listeners,

Topic 25 20:10

Use coupon code for extra free usage tier

Scott Tolinski

love to use it. Yeah. The Hot Fresh data thing was definitely a better rid. Take then what my initial thought was. My initial thought was Sleepy Hollow, because I was thinking about Headless Horseman, because I was thinking about Headless CMS. I'm like, I don't think this is great marketing.

Scott Tolinski

So yeah. No.

Scott Tolinski

Okay. Next one is from Zubair Aziz. I'm sorry if, rid. Did any sort of bad pronunciation on that boat? I think you got it. I think I got it too. This side is kind of interesting. You know, it looks nice, but I'm on a big monitor here. I'm trying to see if I rid Make my monitor smaller. I would imagine Zubair designed this on a monitor that might be a little bit shorter.

Topic 26 20:50

Spacing works on mobile but too much on desktop

Scott Tolinski

Because when you have your browser window Tall, like a tall browser window. There's a lot of space on the homepage where everything's kinda happening up top, and then there's, like, A good amount of just empty space down there. So if you're taking a look at this on your laptop, go ahead and shrink that site and see how it looks when it re because I I do think that's probably a case of probably him just not seeing this as a as a taller view, because when it gets wider, it makes it feels a little bit more. But the use of color is really nice. He's got some some blues here. The fixed footer is done correctly. That's something that we see often where the fixed footer because, you know, a big classic problem when the content doesn't reach the bottom of the page is that the footer can fly up there. So it's a a nice little fixed footer. Rid. I didn't check the CSS for, like, what's going on there. The about page, the portfolio page, the users page, which he's gotta use his page, And the blog, they all use this sort of card I approve. Card design. Yes. What is this landmark? It has this card design that works really nice with the colors. I can't help but feel like the about me like, on the about me page or even portfolio page is the same. Yeah.

Scott Tolinski

Rid The distance between the header and the about me text and then the card is probably a little bit too big because the card is what we're all what we're all here for. We're not here for the sorta empty space, which you you know, space is fine, but I can read about me, and then I see your photo, and then the card, I have to scroll down before I even get to the the paragraph where he talks about where he graduated. I've been doing web development for 3 years now and continue to work towards mastering my craft. Love it. Love that kind of stuff that just rid Talks about how much you love it. You know? You don't have to love code, whatever, but, like, I love code. And when I'm working on my stuff, it's really nice to see somebody who's like, Yeah. I really, really dig this stuff. The cart design overall looks nice. I think the padding is good.

Topic 27 22:05

Reduce space between sections

Scott Tolinski

Though, I have rid Maybe a minor gripe. Okay. In portfolio, you have, like, a heading that says websites for your thing is this portfolio and then websites, but there's Nothing else in your portfolio. So if there's only 1 thing in there, they're obviously not websites. You don't need that header. Just digit or make it maybe a little bit more intentional. Like, I make websites.

Topic 28 23:03

Center "websites" header with grid

Wes Bos

You know? I don't know. Yeah. One thing that bugs me about that is the the websites is left aligned, but then the grid of websites underneath it has padding, so It doesn't line up, so center that sucker or take the padding off of the the grid of the websites.

Topic 29 23:18

Portfolio shows breadth of skills and tech stack

Wes Bos

The portfolio looks great because ready. It shows, I think, just enough of different types of websites that are built as well as shows the different types of tech that was used. So, great job at getting across What tech you work with between the users page, which has software and programming framework icons and the portfolio.

Wes Bos

Rid Like, it doesn't have, like, a 1,000 bullet points, and I'm probably guilty of doing this myself where CSS 1, CSS 2, CSS 3, rid Gatsby, MDX, like, a 1,000 things. So each one of these things has the maximum of 3 bullet points as to, like, what was the major tech that was used rid in each of these websites, which is great because I, as somebody who's looking to hire a web developer, can quickly look at this and say, okay. Well, this guy knows rid. Gatsby, WordPress, Tailwind, Svelte, SaaS, Webpack, and a little bit of PHP. So okay. Well, that gives me a really good rid Idea of the the tech that is working on. Those websites themselves look really good. So The screenshots look nice. Yeah. Yeah. The nice screenshots.

Topic 30 24:28

Use CSS Grid for consistent card heights

Wes Bos

Not One of them, specifically, your website has, 2 lines of of text instead of 1 like the other siblings.

Wes Bos

And using a little bit of CSS Grid, you'd be able to snap down because now the cards are not equal heights.

Wes Bos

So either Just snap them. Subgrade will make this a lot easier, but it definitely is possible to make those things

Scott Tolinski

snap to height. I think some of these things are just attention to detail stuff because overall, it's all very here. And I think, like like, the website's bit with the padding not lining up, rid. And like you said, the cards being different in height, all that stuff really falls into level of detail. One thing also, you don't gotta put your personal site On the portfolio or on your personal site, I think that's something that a a lot of people do, and I did that for myself for a long time. You know, we don't we don't need to say, you know, we we can inspect rid and see what it's made out of. So I would just nix that one because it isn't your work. This is where we're at. Yeah. And it also says in the footer, rid Built with Gatsby and Tailwind. So, like, we know that you built this thing, and we know what you built it with. So it's not necessary. Yeah. Yeah. Yeah. It looks good. Blog post rid is awesome. I would probably crank out a few more blog posts because

Topic 31 25:40

Add more recent blog posts

Wes Bos

there's only a hello world, And that's from a year ago and then a toolkit for web developers.

Wes Bos

Yeah. So I would definitely re Crank out a few more blog posts because, at least for me, somebody who has 10 blog posts on their website are somewhat recent. That's a like a major what's the opposite of a red flag? It's a legitimizer.

Scott Tolinski

It's also a legitimizer for, like, If you have 10 blog posts on there, it doesn't matter. But if you have 2 and they were done very close together and they weren't Done recently. You can tell. Oh, I'm gonna start this blog. I did 2 blog posts, and then I just stopped.

Topic 32 26:19

Multiple blog posts add legitimacy

Scott Tolinski

If that's the case and you only have a Couple of them, 2 or 3 of them, I would take those dates off. No meetings know when these blog posts are published. The dates just indicate that it's, like, stale kinda old content that you might have done in the past. But rid There's 2 or 3. You remove those, and then it's like, oh, here's some stuff. Who knows when they were posted? Maybe it was yesterday. That's true. You need to take the the dates off of them. One last thing I'll say is there's a picture rid of code as a background image,

Wes Bos

and I'm gonna applaud you for actually showing good code in those. So often rid. So often, well, you'll see, like, a screenshot of code.

Topic 33 26:44

Use quality photos from Unsplash

Wes Bos

Like, it's in a TV show or on a billboard or literally anywhere. Rid. And then immediately, what I do is I start scrutinizing the code. Mhmm. And I'm distracted because I think, oh, that could've been done better. Mhmm. But this is actually good code, so rid a plus. It looks like he's a photographer as well. So I'm interested to know what you would do on the homepage. The homepage to me, I think is Yeah. The hardest page here because there's so much empty space. Rid It just says, like, engineer, and then it backspaces and says, foss advocate, backspaces, web developer, and backspaces.

Topic 34 27:24

Add introduction like other examples

Wes Bos

Ready. First of all, I like those typing things, but I also want to be able to read it much faster than sitting there and waiting for the thing to play out, especially because, like, rid. I'm just looking at it. Nice picture of you, and then that's it. There's it doesn't say, like, I'm looking for a job. It doesn't say rid I love to work with modern tech. I'm a JavaScript developer. Like, let's go back to the first one, Shaquille's website.

Wes Bos

Nice to meet you. I'm a full stack dev with preference for back end. I'm seeking full time employment or contract. I work with MongoDB Express, React, and Node. Wanna hire me. Bam. So nice, crisp, clear as to who you are and what you're looking for. I think you need a a sentence or two similar to that. Maybe,

Scott Tolinski

Give Shaquille a call. Yeah. That would fill, yeah, it would fill the space. It would kinda solve some of those problems about having things you could maybe balance out the photo a little bit more with that text. But, yeah, The hardest part of the site for me is the home page. Two more small comments on this, then we can move on.

Topic 35 28:20

Take advantage of Gatsby's static generation

Scott Tolinski

It's in Gatsby, but there's no HTML.

Scott Tolinski

It's just all client side. So if you're gonna use Gatsby, I would take advantage of it and get that static generation going on. You can get that static generation for free. Might as well take advantage of it. You're gonna get fast. Wait. Really? Yeah. Check the source. Pete the source. Because

Wes Bos

I didn't even know that was was possible. There's a lot of CSS,

Scott Tolinski

And there's no HTML.

Wes Bos

No. You're right.

Wes Bos

There's no server side HTML

Scott Tolinski

in the entire thing. So, yeah, Definitely get that. That that comes for free with Gatsby. So Comes for free. Take advantage of it. If you had to work really hard for it, I would say don't bother or whatever because the site loads fine. Rid But, like, yeah, it's free. Another one, every time you, go to a new page, like, let's say you're on home about whatever you click, the animation in the navigation reruns Even though the page content hasn't changed, nothing's changed there. If I were you, I would only have that animate on initial load and not have the animation happen every time a page gets hit. Rid. That's tough to do with Gatsby because of how their layout system works. Same thing with Next. Js. Right? But you can do it. You just need a wrapper, Or you can check to see if it's the initial load. Just Google around about it. Either way, I would have that animation not fire on every page page change. Just me. It's a little distracting when you're rid. Click 1. You gotta click the other, and it you have to wait for the animation to finish. Next 1 we have here is code by Phil, f I l,

Wes Bos

red.dev.

Topic 36 29:45

Animate nav only on initial page load

Wes Bos

And this is your same kinda same kinda layout. This is seems to be a really popular rid thing where you you land on the page and, like, the the whole 100 100 viewpoint height of the thing is just like, hello. This is who I am. Rid says, hello. I'm Phil. I build responsive apps for Ios and the web. I build accessible apps for the the web, and then it has a couple icons directly rid to GitHub, LinkedIn, and then PeaceSign. What's that? Oh, angel.co.

Topic 37 30:15

Review of codebyphil.dev

Wes Bos

And it's a broken URL, so Took that URL. But that gets it across. I really like when people have actual photos of themselves on their home page. What are your thoughts on that, Scott? Rid I have never had a photo of myself on the homepage, but I did

Scott Tolinski

recently put that video of me From and that's a photo of me. And then other times, I had a video of me dancing in the background. People are like, oh, you're dancing? Yeah. It's me dancing. But I don't know. Maybe it's just because I'm like sometimes with my personal website, I see it as, like, a place to just goof around, so I'm not as, Like, if I was designing this to, like, purposefully get a job, I would probably put my photo on it to at least

Topic 38 30:32

Homepage photo adds humanity

Wes Bos

just give it a little bit more humanity. You know what I mean? So the rid Blog posts that we have here under or sorry, under projects is it's a good job doing a grid of possible rid. Projects are on there. The border radius is probably a bit much for me. Same goes with the box shadow. This is just like a running theme in in my idea for design is that rid. The spread of your box shadows should be a little tighter.

Scott Tolinski

And the border radius, although this is becoming a bit of a trend now rid And that really heavy border radius is is coming back, so maybe that's what they were going for here. We use pretty heavy border radius. Yeah. We use, like, a 15 pixels on level up, and I think it is all context based, like, depending on, like, just the vibe you're trying to give off. Rid It really depends, I think. Ours were modeled after credit cards, so that's, like, what the look we were going for.

Topic 39 31:22

Reduce border radius and box shadow

Wes Bos

Oh, yeah. Yeah. That makes sense on on yours. Rid. Maybe it's just like it doesn't totally fit in here. There is a bunch of stock photos here, which Makes sense if you need to add a photo for something that you don't have a screenshot of, but the stock photos are, like, very clearly stock photos. And Yeah. To me, that's pretty cheesy.

Topic 40 31:48

Border radius subjective based on context

Wes Bos

What you can do in that case is I always like to go to Unsplash Because there's something about Unsplash photos where they are stock photos, and they're totally free, but they only let Amazing photos in, so I'm just gonna go look for doctor Unsplash.

Topic 41 32:08

Use real project screenshots, not stock photos

Wes Bos

And I'm wrong. The very first photo that comes up Is the one that he has on the site? Is the one that he used. Yeah.

Scott Tolinski

That's very funny. That is that's, like, kind of funny that you cannot plan here that you,

Wes Bos

I think there's there's probably a better rid Stock photo that you could pull off of the Internet somewhere. I'm just looking at AdSplash. There are lots of, of really good ones because, rid. At at least to me, that seems like it's either a default from a theme that you got, like a WordPress theme, which obviously it isn't, or rid. It's just one that you pick that random. What I really love here is there is links to the actual source code of every single project that he's worked on, rid Which is amazing that you can do that for for everyone, because, like, you're showing all your cards when you give people the code that you rid have written. Right? There's there's no hiding. There's no smoke show there. You're like, hey. Wanna check it out? This is the stuff I worked on. React Gatsby and Swift. But if you wanna dig down into it, Here's the actual code. Totally.

Link directly to project source code

Scott Tolinski

I have one thing about the box or the border radius on the contact well, a couple things on the contact and bottom here. The border radius rid In the box shadow, the box shadow is fine, and the border radius is fine. But the border itself, like, having a very fine 1 pixel, like, gray border and then the box shadow

Topic 43 33:32

Remove bottom border, adjust box shadow

Wes Bos

feels weird to me. Oh, I like that. You like that? Interesting. Well, take it off.

Scott Tolinski

Take it off. It looks weird. Then I would make the shadow a little bit tighter.

Scott Tolinski

Rid See, these are this is the problem with all the stuff. It's so subjective. Right? It's so subjective. So if we say something and you're like, oh, I don't I don't agree with that, like, you don't you don't have to Take what we're saying as gospel here. Yeah. Yeah. Who are we to say this? These are our our just general Vibe opinions. This is the Vibe Dark going off.

Scott Tolinski

Another one here is that contact form is riding the bottom. It is, like, right at the bottom of the site there. There's no margin padding, whatever, no footer. Rid What I would probably do is do just some kind of generic footer, just something, or give you some margin there between the bottom of the site. Right now, that submit button, Man, that's, like, right at the bottom of the window. Make that a little bit easier to to get to. Just give it a little bit more padding down there, however you may do it. Also, Scott's HTML breakdown, there are 4 h ones on this singular page.

Topic 44 34:45

Fix heading hierarchy with one H1 per page

Scott Tolinski

And so just to reiterate, re 1 h one on per page. Okay? There are 6 h twos on this page. So what I'm seeing here is I think you could probably just shift most of your h, and I'm not talking about the sizes of display. I'm talking about their semantic meaning. If you had 1 h one, then you could have something like 3 h twos, which would probably make sense to have Projects about in contact to be the h twos or about me. And then whatever you have as h twos would become h threes, whatever you have as h whatever because you have no h rid Sixes. So, hey, that leaves you perfectly open to just shift everything down 1 bit and then put your name as the h one. But, yeah, overall, the HTML is good. You could have used rid Some aside tags. You know, I like my side tags for your your individual products or projects. Those could all be asides.

Topic 45 35:30

Articles better than asides for projects

Scott Tolinski

Right? Or not a side. What am I talking about a side? Articles. I'm gonna say what's in a side tag. Well, there isn't a side tag. What are you talking about? What's in a side tag? There's an a side tag? Oh rid

Wes Bos

Oh, yeah. Yeah. I knew this. I have not seen that in forever. What? The side tag We use aside. Is defines rid. Some content aside from the content where it is placed. Oh, yeah. That's like the sidebar tag. Right? It's a sidebar. Yeah. It is a sidebar. You use it for sidebars.

Wes Bos

Yeah. I like it. Last thing is I don't like the font, and this is just personal. I get, like, a Windows, Microsoft Office vibe from this font,

Scott Tolinski

Which I don't know if that's warranted or not. I just I'm not a huge fan. I don't mind it. It's not like my favorite font. We're not going out to Yeah. You know, hang out in the park or something, but ready. I like it. You know, if the it's at the park already and I'm at the park already, I'm not leaving.

Topic 46 36:08

Font is subjective but not a favorite

Scott Tolinski

So yeah.

Wes Bos

This is also Gatsby and rid. Properly server rendered, so a plus on that.

Topic 47 36:29

Properly rendered HTML from Gatsby

Wes Bos

And the SVGs are inlined instead of being data URI's like that last one. So Mhmm. I think that is a great job. You know what also is an a plus?

Scott Tolinski

All of the routes on your pages after you use Century's new performance Tracking tools.

Scott Tolinski

Yeah. Century, the perfect place to capture all your errors and exceptions, now has performance pages that are the slowest for your users and figure out why the heck they are so slow because no one really likes performance everything works fast on my machine. I'm running on local host with gigabit Internet.

Scott Tolinski

So it's important to know how people are actually using your site, and Sentry allows you to do that with their new re tracking tools. So if you wanna give these a try, head on over to Century dot I o. Use the coupon code tasty treat, all lowercase, all one word. Sign up and get 2 months for free And give those performance it's it's really easy. You just drop in a little 1 or 2 liner script. Sauce from npm if you want. No big deal. That's what we do. It's great. So check it out. Thank you so much for Century for sponsoring.

Wes Bos

Alright.

Sponsor ad read for Sentry

Scott Tolinski

Yeah. You wanna grab the next one? Yeah. Next one is from John George rid. Sample.com.

Topic 49 37:44

Review of sample.johngeorge.me

Scott Tolinski

John George sample.

Scott Tolinski

Cool. Okay. So let me the most interesting thing about John George's site rid. Hi. I'm John hyphen George with an asterisk there, sample. Did you hover over the asterisk? It's cute. You hover over it, and it gives you ready. A little, message that says my first name is John George.

Scott Tolinski

Not John. Not George. John George.

Topic 50 38:02

Hover explanation on name is clever

Scott Tolinski

That's really, really cute Because I think just about every single person who would come here would say, see that, and they might hover over it or not. But if you do hover over it, You get that nice little surprise. Otherwise, you could just ignore it. Right? So I think that's fantastic. I think he did a great job. He first line you know, he's a software engineer from Pittsburgh, PA, rid. Graduated from Slippery Rock University, which is funny because they're like they're just like some sort of, like, University of Michigan and Slippery Rock thing. I have a bit of, understanding of slippery rock at the U of M football games. They'll always be like, and slippery rock is ahead by whatever. Like, I have no idea why they do that, but So that's pretty that's pretty cool. John George and I have that that little connection there. But, no, he's got some some great little, first couple paragraphs, rid Tells us what he does in my spare time. I enjoy brewing great cups of coffee, making pet projects, solve my own issues with languages that I don't use in my day to day. Hey. Me too, John George.

Topic 51 38:57

Great intro text and paragraphs

Scott Tolinski

Biggest criticism on the homepage? Sizings of things. I'm a big type guy. You got a lot of empty space here. Would fill that, making this type a little bit bigger. Wes probably wouldn't. He's a small type guy. He might just space it out a little bit more. I you're gonna have to tell me what you would do. I would probably just make all the text rid Bigger on the home page, especially because the main nav is so big. But one of my comments here is that the main nav is probably too too big. It's a little distracting, Especially when the content itself isn't that big.

Make about page link active when on about

Scott Tolinski

Another thing is the about page is the home page, but when you're on the home page, You don't know that the about page is the home page. So the first thing I want to do is I want to click on the about link. Oh, yeah. You need an active state on that. If we're on that page and We don't know that this is the about page. Make sure you got an active state on that.

Scott Tolinski

Another one, there's not a lot of good HTML semantic tags In your code, Scott's HTML breakdown.

Topic 53 39:41

Balance homepage content and empty space

Scott Tolinski

Scott's HTML breakdown.

Scott Tolinski

So there's just basically divs. Rid Lot of divs, lot of spans. So you gotta look into what other tags out there. There's plenty more tags in the sea, and we gotta take a look at some of them. We should do a a hasty on,

Wes Bos

Like, literally all the tags and and what they're for just so that we can inject them into people's heads. Because, like, myself, I hadn't even thought about using an aside tag for years Crazy.

Topic 54 40:03

Upcoming show idea on HTML tags

Scott Tolinski

Rid Since when it came out, so let's put it on the list. Who is your tag and what does he do? So just take a look at that HTML. Rid. Also, there are no h ones or h twos that I could see in this entire site. So, maybe take a look at that as well. We need at least 1 h one per re Page.

Topic 55 40:31

Add headings and semantic HTML tags

Scott Tolinski

Yeah. That work work header on your your work page, perfect for an h one. The blog could even have a tunnel that just a blog and an h one. Same with the about, the high end George John George sample. That could be an h one. The blog posts, nice, but the same thing that we had With the other blog, there's only 2 of them. They were last from 2000 and oh, no. Wait. When were these from? Yeah. They're about a couple weeks old. Couple weeks old. Yeah. That looks good on you. Now it's obviously new, but they're a couple weeks old, so gotta keep on that. Here's what you do. For the date, you just put the current year In a JavaScript tag, new date, get year.

Topic 56 41:06

Show recent years on blog posts

Scott Tolinski

That way, it always looks like your blog posts are up to date. They're all from this year.

Wes Bos

It's actually rid. Something I I wanted to do on my own website was just, like, hide the date so people stop asking Totally. If it's up to date. But then, also, I get frustrated when I rid Find out if a blog post is up to date. So, like, maybe for everyone listening, deemphasize the importance of the date on your blog post when you are first getting started So that it doesn't look like

Scott Tolinski

you haven't bugged in a long time, something like that. Yeah. Especially if the posts are old, but these aren't too old.

Scott Tolinski

I'm interested to hear what you have about some of the design stuff because for me, the nav is big, and I like a big I like big text, but rid The content is too small for how big the nav is. Either make the main content bigger or make the nav smaller. Oh, yeah.

Add contact info and footer padding

Wes Bos

Since it's such a simple website, rid. I think it's totally fine to to do something like that. I don't think it's too big at all. I really like the background, rid. The blue color that's using the font. I I really like all of this.

Wes Bos

Couple qualms I have is that it doesn't say your name on the website Unless you're in mobile view. Like, if you if you go smaller and make it mobile, it says John George sample.

Topic 58 42:16

Add name to other pages

Wes Bos

And then when you go rid Go bigger. It doesn't say your name anywhere. So if someone were to link me directly Well, it says it says I'm John George Sample. Are you talking to If you go to any other page, like your blog, It doesn't like, who is this guy? Oh, I don't know. This is a sample website. You know? Totally. I feel you on that. Yeah. The mobile nav uses this is rid So it drives me crazy as people use the x character to close the mobile nav. And the capital x or lowercase x, rid. You can tell it's just you typed the x. So use the HTML entity and percent times re Semicolon and then put a title on that that says close nav so that the n ampersand times is the multiplication sign, rid And that gives you a perfectly angled x. It looks so much better, and you don't have to install, like, a font rid or anything to get it when working. It just comes along for free. You don't have to get an SVG or anything like that. Or if you wanna get an SVG, rid I posted a link to Feather Icons. If you don't know Feather Icons, very, very simple icons. You can just click and get an SVG. They're open source. Beautiful. Just grab one of those. Rid. I don't know why that always bugs me, but it just looks, like, sloppy. And, like, people don't necessarily know, oh, I didn't I didn't realize that. It's just an x. Rid Whenever I click something, it looks like an x, but, like, hover over the x on your Mac to close a window. That's not an actual rid x character that's looks like the multiplication sign. Mhmm. So put that in and make sure you have the correct title on it so it's accessible as well. Otherwise, it just reads multiplication sign to your actual user.

Main nav is big but content small

Wes Bos

The asterisk doesn't work on mobile. So rid. It says, hi. I'm John George sample. And then you hover over it, and it says, my first name is John George. That doesn't work on mobile. So you can click it, rid But it doesn't do anything on mobile, so the people might not know. But, overall, I think it's it's a good job. This is another example of a good simple website where You're not trying to do a whole lot, but you're just trying to get some information across, and, it does the deed. Also, there's no contact on here.

Topic 60 44:18

Add contact info

Scott Tolinski

Yeah. Maybe if you want to be hired, put your contact Yeah. Put your contact. On there. That would be good. Yeah. Maybe it's on on the CV page. CV page. No padding on the bottom. That text goes right to the bottom. Yeah. Gotta gotta put some part on there. This would be another good situation. Two birds with 1 stone would be a footer here. What rid we do with the footer? Well, we could put your contact in the footer if you want, and you could could use some additional padding down there as well. Yeah. I agree. This used to be a thing on Sublime Text is You couldn't scroll past the bottom? There's a setting for it now, but I wanna be able to scroll all of it up as far as it can go. Same.

Scott Tolinski

Yeah. We're talking about Xs. All this talk about Xs has got me thinking about one of our sponsors, Mux. That's spelled m u x. Now Mux is really, really cool product. It's mux.com if you wanna head on to their website. I'm gonna give a little quick critique of their website. It's fantastic.

Scott Tolinski

It's easy to tell you what it does. How developers build online video. It's basically that tells you what it is. Who's it for? It's for developers. What are they gonna do with it? Gonna build video. In fact, I'm not the spokesperson, but I'm also a user of Mux. Believe it or not, we use Mux on level up tutorials as our video host, and I have intimate experience writing uploaders Or using the new Mux data, doing all sorts of stuff. And let me tell you, Mux is super cool. You get access to, rid. Basically, directly upload any of your stuff. And then anytime a user wants to watch the video, it does a transcoding process on the fly that is Insanely fast that creates the video on demand. A lot of other video sites, what they do is you ingest your video, And what they do is they create 8 different versions of this video for different sizes, 10 80 p, whatever. And then those those videos are mostly just Sitting there regardless if anybody's using them or not. But Mux doesn't create something until it needs it, which makes your cost less because you're not having to store a bunch of stuff that you don't need. And it also it's just insanely fast. Next time anybody wants to use it, that thing is right there ready to go. We use mugs for a long time. We've been very, very happy with it. If you want to join LevelUp Tutorials, but not just LevelUp Tutorials, Vercel, hey, Robinhood, hey, Equinox, Hopin, Crowdcast, SoulCycle. If you wanna join any of these awesome companies and learn why this type of platform is so good for developers, head on over rid to mux.comforward/syntax and give it a whirl. Check out why Mux is the API first video platform of your dreams. And let me tell you, it is just so cool. Mux.comforward/syntax.

Sponsor ad read for Mux video

Scott Tolinski

See what everybody's talking all about with Mux. It's fantastic. Ready. Alright. This last 1 we have here is

Topic 62 46:49

Review of stordahl.dev

Wes Bos

storedahl.devstordahl.dev, And this one, I really, really like. This is another one that has a lot of fit and finish and just, like, a good good vibe to it. So first of all, It's running on Sanity, which I thought was really cool. I found that out. So in the in the footer, it says built with steel, And I was like, oh, what's Steel? There's a blog post that was posted, like, 2 days ago, introducing Steel, a toolkit for headless ecommerce re Built on Snipkart Insanity, which is really, really cool.

Topic 63 47:30

Unique logo/icon adds personality

Wes Bos

So good job on that.

Wes Bos

Rid. So right off the bat, when you visit the website, there is a really cool little icon of Jam on Toast. I love it when people have, like, their own a logo or icon or something like that for who they are. I don't know what Jam on toast means, but rid. It's pretty cool. So it's nice to meet you. I'm a JavaScript dev living and working in Minneapolis.

Topic 64 47:55

Strong intro text covering key details

Wes Bos

I specialize in content driven development with rid. Jamstack and serverless architecture, passionate about making web experience that are accessible and foster joy in their users. So awesome. Immediately, right off the bat, rid. Who you are, where you're from, what type of tech you work with, and a little bit of extra little something special on the end. You wanna make them joyful and accessible.

Topic 65 48:17

List of core technology stack

Wes Bos

Rid. Then really quickly, it says tech I love, Svelte, Gapsy, Sanity, React, GraphQL, Netlify, SAS, GitHub, install components. So, alright, I have an idea of rid type of stuff that this person works on. I'm available for work. Good. Get to the point. I want you to hire me.

Topic 66 48:34

Effective call to action

Wes Bos

Awesome job there, which is good. Rid And then there is a blog post where each blog post has a custom design image, rid And I think they're just, like, little logos sort of, like, stacked on top of each other with the actual text of the image, and I think that these rid. Look really, really good. It's using a monospace font, which I'm a big fan of, especially for developer blogs. And then finally, at the bottom, there is an email list That has just like this, like, little what do you call that? It's like a an outline.

Topic 67 48:38

Custom illustrations for blog posts

Wes Bos

An outline scribble outline, double outline on it, and it just, like, rid Mix it's just something about that. You have to go look at it. It's cute. Yeah. It's good. Yeah. It looks nice. It's cute. And then there's a shopping cart where you can buy a sticker rid for a dollar 99 using Zipkart. And, like, to me, that just, like, shows, okay, this person is very competent in what they're doing because they're able ready. To build their own website, but also integrate a little shop to it. Like, yeah, the guy's selling a $2 sticker. It's not the biggest thing in the world, but it shows to me that

Topic 68 49:08

Cute outlined email signup form

Scott Tolinski

They're smart enough to know how to to build this type of stuff. Yeah. I like this site a lot. I think it's really nice. It's aesthetically pleasing.

Scott Tolinski

I really like that the little, when you hover over any of the cards in the articles, they do a little bump, bump, bump. I think, I think it's like a 1 or 2 pixel little bump, bump. Yep.

Topic 69 49:46

Shop shows competence with ecommerce

Scott Tolinski

Yeah.

Scott Tolinski

Yeah. I think that could be a little bit smoother of a like, less of a pop and more of a bump. You know what I mean? Mhmm. Yeah.

Scott Tolinski

It's it's not moving that far. So it's not like it needs it, but it's saying, you know, it could be, I think, a little bit this site has a lot of polish in it already. So I I think for the most part, It looks really nice. One thing I did notice in Scott's HTML breakdown is that, there are 2 h one yeah. Yeah. There are 2 h ones on the homepage. Rid One of which is just nice to meet you. That doesn't need to be in h one. I would just have your your name, Jacob, be in h one. You could make that nice to meet you be in h two. That's just fine. But that nice to meet you does not need to be in h one, and it should not be. Yeah. The common thing that we're seeing here is people are mixing up rid The fact that h one tags and h two tags are not for big text. They're for headings. Yep. And if you want big text,

Topic 70 50:04

Smooth out card hover animation slightly

Wes Bos

rid Then use CSS and the appropriate paragraph tag or or whatever, and then just make it bigger Yep. With CSS. Yeah. 1 per page here. We got,

Topic 71 50:51

Site has great polish overall

Scott Tolinski

rid 0 h twos. I would say that tech I love, I'm available to work, recent articles, those drop the h twos. That's just me. Another thing, rid No section tags? That's fine. You don't need them, but, hey, you could use a section tag here. Scott loves them. Yeah. For the recent articles, could be a section tag. The nice to meet you could be a section tag, but, the big one to me is that you have recent articles, which is just screaming article tag for each article. So for each of the cards should be an article, and it is article type content and even says recent article. So make make those articles for each one of those cards instead of, like, a card or whatever rid. They seem to be. Same bit on the blog post page. Each of those should be articles.

Scott Tolinski

And, yeah, that's pretty much my My critique, but overall, the site looks really nice. I really dig it. Yeah. Big fan. Looks like they are also available for hire. So

Topic 72 51:37

Use single H1 for name, H2s for sections

Wes Bos

I'm just looking at this. It's Gatsby, Snipkart, very much my stack.

Wes Bos

Yeah.

Scott Tolinski

Big fan. Yeah. Good job there. So that is it for syntax Highlight. I think this should become a regular thing, and I like your idea of doing a little showcase too. We can even do that as an aside of, like, here's some good work. Check out the good work, and let's talk about why it is good work Yes. And what what makes it so fantastic. And, hopefully, those HTML breakdowns in that are gonna to feature 1 h one per page. Be fantastic.

Topic 73 52:13

Feedback is subjective, take what resonates

Scott Tolinski

But, overall, I think these are all great sites. I think they all could be a little bit better with some small tweaks like stuff that we mentioned. And just at the end of the day, remember, these are just Our opinions, we're looking at this through the eyes of hiring managers, but, you know, that said, you could offer a very different reading on some of these based on your own personal things that we picked that are sick, Wes, do you have a sick pick for us today?

Topic 74 52:44

Sick pick: Mobile soldering power supply

Wes Bos

I do. This is something I got for my birthday recently.

Wes Bos

My wife gave me a, a new soldering iron, and I I haven't tried it yet, so I'm not gonna sick pick that just yet in case it sucks. But re What she did get me along with it is a battery pack that does 60 watts output. So in order for me to use this re soldering iron mobile. You need to be able to provide at least 30 watts or no. Not at least at most 30 watts. Rid. And I was like, okay. And you can do it over USB c. And I was thinking, okay. I I gave you a 30 watt one. But then I was thinking, wouldn't it be nice to be able to rid Run my laptop off of this battery pack if I ever needed it. And my laptop's 80 or 90 watts or whatever, but 60 watts should be enough to re Charge it pretty quickly if I have the thing closed or if I wanna run it with not too much stuff running. So I got this really sick battery pack that has USB and USB c in it, and it has most importantly, has 60 watt output. It's called the RAVPower 2,000 milliamp, 60 watt power delivery, quick charge. It's rid Got all the specifications you need to in order to charge your phone nice and quickly, and this thing is awesome. You have to have a USB charger for it, but rid. The nice thing about that is you can charge it off of your Mac laptop charger if you want because that's that's USB c as well. USB c, I can't wait for the iPhones to be USB c as well because, ready. Yep. It's such a dream when everything is the the same.

Scott Tolinski

So Apple's gonna come out with their own USB c, and it's gonna have, like, a rigid for no reason.

Wes Bos

But they act you you make that joke, but they literally have. It's called Thunderbolt 3 and 4, which is the same thing, but not. Yeah. Same thing, but not Which is frustrating.

Wes Bos

I know. But if you need a really nice battery backup, the only thing it doesn't have, rid Which some of the other ones did have is the wireless charging, which should be nice to just be able to put your phone on top of it. Rid. But I gave that up in exchange for having 60 watt output, which, like, you could probably boost your rid car off this thing if you really wanted to. Yeah.

Scott Tolinski

Neat. Yeah. I need to boost my car right now. My car is dead because I have not driven it in, Like, a year? My my snow tires from last year are still on. I didn't drive it all summer. I'd never dripped the battery at all, so I, like, rid Forgot about it, and I, like, went out to my car. I was like, oh, yeah. The battery's toast.

Wes Bos

Well, that's good, though. You probably

Scott Tolinski

rid Probably save so much money on gas and everything. Yeah. Considering my car is my car is not good. It's a sports car, so it's not good for gas, not like our hybrid.

Scott Tolinski

But Neat. Some battery pack life. I'm gonna stick with a a video game today that's for VR headsets. I'm playing it on the Oculus Quest, and The game is called Walkabout Mini Golf.

Scott Tolinski

And, dude, it is so cool. Rid I I was playing mini golf in my living room last night, and you're walking around the ball. You're like, oh, I gotta get this right angle. You're moving around, and I have enough space in the living room.

Topic 75 55:37

Sick pick: Walkabout Mini Golf VR game

Scott Tolinski

Rid So and and the physics are dead on. Do you gotta swing in in whatever? Dude, it is so cool. I rid Played 1 round of mini golf, and you're, like, in a Pirates Cove, and it feels more like like a very real mini golf place that rid you're going like, your normal one that you went to, and then I did one that took place in Japan with cherry blossom trees and pagodas and stuff like that. And I was just thinking, like, rid This is so cool.

Scott Tolinski

You know, because it's a video game, you can do things like you can climb up a a really tall mountain while you're playing mini golf, but then you don't have to worry about, You know, heights or anything like that. It's just very picturesque. And I play this thing. I didn't wanna stop. It was so much fun.

Scott Tolinski

And, There's a whole bunch of levels, and there's, like, a ball, like, a lost ball. Like, somebody lost their ball hidden in every single hole of every level. So there's, like, little rid. Metagames inside the game where you're trying to find all the lost balls. Because anytime you find one of the lost balls, it becomes one of the ones that you can use because they're all, like, patterned and interesting.

Scott Tolinski

Rid It's just really cool. There's like a haunted house level. Man, I'm loving this thing. So, yeah, Walkabout mini golf. Just got it. Can't stop playing it. Is this on the rid Nintendo Switch? No. This is just VR.

Scott Tolinski

Just VR. Oh, I see. I see. You're swinging the putter like it's you know, like you're really swinging it, And the physics are so good that, like, I feel like I can accurately predict what it's gonna feel like when I swing.

Topic 76 57:00

GeoGuessr is fun online map guessing game

Wes Bos

It's just very cool. That's so cool. And then, like, how does it know you're swinging the putter, though? You have controllers,

Scott Tolinski

and, you have, like, a rid trigger on it, and you're in VR, you know, controller, and you push the trigger button. And that, like, engages the fact that you're holding on to the putter, and you can see it. And it's so dang realistic. Like, I told Courtney I wanted to get her a VR headset just so we could go mini golfing together. Like, oh, we'll just be in the living room mini golfing together because you can do that. You can have, like, online games Where you're all just taking turns and playing like, it would be it would be a lot of fun. I would actually legitimately do that during during times of COVID. It would be perfect for that. You know what? My wife and I were playing the other night, and it was really fun. Is, what's that Google Maps game where you have to guess where in the world you are and you have to put it on a I have not plugged that before.

Wes Bos

GeoGuessr.

Wes Bos

Oh, no? No. I've heard of this. It's called GeoGuessr, and, basically, what it does is it It puts you on Google Street View somewhere in the world, and then you have to drop a pin on the map.

Wes Bos

And you have to use things like rid. Street signs and trees and, types of cars, and you have to be use that to be like, okay. I know I'm in Africa rid. Or you know? And then you drop it, and then whoever gets the closest in after the 5 or 6 tries wins.

Wes Bos

And rid It was really, really fun, and then I went down the rabbit hole. There's, like, streamers that do this Really? That, like, stream themselves, and there's It's unreal how good these people are. They just go on YouTube and search GeoGuessr, and there's these people that are, like, professionals at it.

Scott Tolinski

Yeah. I've never I've I've never played. That sounds fun.

Topic 77 58:45

Never played Geoguessr but sounds fun

Scott Tolinski

Shameless plugs. What do you got? Shameless plugs. Level Up Tutorials. It's a 2 part course this month. The next part's gonna be coming in March. The first part is re Really significant, and it is node fundamentals authentication. We teach you how to build an authentication system. And guess what? We use 0 build tools. We use Nothing we use on the front end. It's just vanilla JS. We're we're talking sending requests. How do we send requests? What do they do? What's the network process? This is a course for anybody who wants to learn how authentication really works and not just like, oh, install Passport and call it a day. No. This is building the authentication system. This rid hashing the passwords. We got some salt and hash going on. We have all sorts of stuff. We talk about the differences between encryption salting and hashing. And at the end of the day, we build a real authentication system that is session based using access and refresh tokens. It's so, so cool. Rid Part 2 of it is gonna include things like 2FA and email verification and diving in even more to some of this stuff. But for this specific series, you're gonna walk out of it with a working node authentication system from scratch, and you're gonna understand exactly what and where and why how everything is done. Re You can find that at level up tutorials.comforward/pro.

Topic 78 59:00

Shameless plugs

Scott Tolinski

Sign up for the year. Save 25%.

Wes Bos

Sweet.

Wes Bos

Re Advanced React .com is my latest updated course. In that, we learn how to build a online store with Advanced React, GraphQL, rid Stripe integration.

Wes Bos

We use a headless CMS called Keystone. Big fan of all of that stuff. Check it out. Advancedreact.com.

Scott Tolinski

Rid Use the coupon code syntax for $10 off. Sick. Alright. Well, that's it. We will see you next Monday rid For a hasty treat. As always, thanks so much for listening. Peace. Peace.

Scott Tolinski

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

Scott Tolinski

Rid.

Share

Play / pause the audio
Minimize / expand the player
Mute / unmute the audio
Seek backward 30 seconds
Seek forward 30 seconds
Increase playback rate
Decrease playback rate
Show / hide this window