Syntax Highlight

So glad.

Rid. I thought I would switch it up the intro here today. We've got a syntax highlight podcast for you. This is where, you send us your Portfolio personal website, and Scott and I will rip it to shreds Yep. And make you feel horrible about it. No. We're, rid. People seem to like these ones where we go through personal websites and say, what's good, what's bad, what I would change, what's good, because it's it's really helpful. Like, when you're doing your own website, So you don't necessarily know, like, what should I add? What am I doing poorly? What are things I should check? Spoiler alert. Nobody checks color contrast rid. After the, like, 4th time of us doing this thing, so we'll talk about that some more. My name is Wes Boss. I'm a developer from Hamilton, Canada. With me, as always, is mister Scott Talinsky, how are you doing today, Scott? Oh, I'm doing just fine. I,

I spelled the word apart, u p, Art today, Up Art.

So that should give you a a clue just at how well my brain is functioning this morning.

No. I had, Man, I had a saw I'd like a software boot loop in my phone yesterday, and I'm the type of person who's just, like, trying to figure it out. And I Could not go to sleep without trying to fix this boot loop on my phone last night, and I was Oh, hey. End up staying awake trying to, like, Do all sorts of stuff to my phone, and I eventually got it this morning by just doing a full wipe from recovery mode and with my computer. But it was like,

rid. I just could not sleep because my brain was like, fixed phone? Fixed phone? Fixed? Fixed phone. And I get I get hung up on that stuff That stuff as well where I'm just like, I can't get past this and I need to be able to figure it out. And the funny thing is, often I just go to sleep Mhmm. And, like, especially if I have, like, a problem that is on one of my sites or something like that, and the code is just not working. And The the real solution usually is just go to bed and, you know, just go fix it in the morning. And usually, you're like, oh, I'm an idiot. I I forgot how this works, but This I'm a hard headed sometimes, and I need to just,

like, brute force it. I feel like I can brute force it sometimes. That was me. And then at some point, I was just like, I'm giving up. I'm going to bed. And then then I couldn't sleep because your brain is just working on it. Yeah. Yep. But here I am today.

I'm drinking coffee and hanging out with the West Boss. What's up, man? Alright.

Rid. Yeah. Doing well. Doing well. It's spring here in Canada. I'm pretty stoked about that.

Finally, we had a long, long, long winter. Today is the 1st day of our No mask mandate here in Canada, which is apparently the in Ontario, apparently, like, the last place in all of North America to, take it off.

So I I walked into Starbucks this morning without a mask, and I felt very, very odd. And Yeah. Yeah. We would drop those guys there without a mask. They're in the boat, and they're all wearing masks rid. So yeah.

Yeah. It it feels weird. Yeah. It feels weird. There's some places I feel more comfortable than others, right, like, Outdoors, obviously. But, like, Costco feels big and open. Like, it doesn't feel like you're getting too close to anyone or whatever.

That it feels a little bit better than, I don't know. Yeah. Straight up. Like, getting it. I don't know. Haircut, something like that. I probably will still pop 1 on, but Oh, I just got a haircut without 1. Yeah. Oh, Okay. You're gonna get the COVID, guys. God. I still haven't gotten. I've been taking it very seriously. So You've been you've been dodging it. Dodging it. Yeah.

Matrix.

Alright. So, we should say if you want us to submit your rid Syntax website for syntax highlight. We are going to add a way to submit it. But right now, just go to the potluck button on the syntax.fm and Pop it in there. Just make sure you mention syntax highlight because that's the word that we search for in the questions, and then we'll we'll do it on the next episode. We do this once every month or rid not not not all that often. Word. Responses today by Prismic, headless CMS, LogRocket, JavaScript session replay, and FreshBooks cloud counting. Talk about All of them partway through the episode.

Alright. 1st one we have here is best best, one ever, bald dot design.

This is it looks to be a design director and front end engineer with a background in psychology, Linguistics and branding.

What can I help you with? Oh, I am b. So it's rid. Interesting. Just mysterious bee person. There's no name on here. It's just bold dot design, which is is pretty cool. And this one this one's unreal. It's rid. So fresh. So good. I think this is probably the best one that is going to be so fresh, so clean, so fast. Rid. So, as soon as you load on it, it's got a nice big logo, b as in bald.

Hello. I'm Bea. Nice to meet I'm a design director, etcetera. We just went over that, the resume. But the design layout of this thing is is really, really nice. There's some nice rid. Animations underneath the industry experience.

You can hover over them to see what those are. So, I don't know how that works on mobile, though, now that I'm thinking about that, because if you are

Let's open it up. Yeah. I'll tell you. That's exactly what I'm doing right now. Yeah. I'm I'm popping it in my inspect element. I'm heading to the rid. Device mode. You go to device mode.

Let's see. Oh, they work on nope. They work. It works actually, it's even rid. It's all been set up for working on mobile, which is really nice. So it's not just a hover or that you have to trigger on mobile. It's it's actually listening for a touch event, rid. And it is extremely responsive, meaning that, like, sometimes you see these little animations and it's like, oh, that doesn't feel that good on mobile.

It is extremely responsive, on mobile. So that is a very, very nice job on there.

It's a I think the type on this is the best we've seen, especially if you go to the resume.

Being able to mix Both serif and sans serif font is a tricky thing for at least for me, where I'm not like a traditional designer. And I think this one does a really it. Nice job at it. If you wanna take a look at the resume

of this page, have you seen that Scott? Yeah. I'm looking at it right now. There there's a lot of nice tricks in here, like, with the smaller re uppercase bold heading that is has, like, letter spacing in between it. Like, those are nice little actual Tricks that I've seen used very well, but this is like it feels very put together in terms of the typography, which is rid. Usually, one of the harder things to do. I mean, it feels it feels well put together, but it doesn't feel like he just plopped the theme on here or something. And maybe he did, but the I mean, I don't know if he did or not. So, I'm kinda just trying to look at the CSS right now. But either way, the the typography overall just feels nice in a in a nice way.

I do love Just like the simplicity of it all, the the header, the b, you hover over the b, gets a little bit of color change. If you keep your mouse over it, it gives some Nice little gradient changes, which is like small touch, very small touch, but, a nice touch. It's not distracting. It's not unnecessary.

They I think this person understands, what what is, like, a a good experience overall, but, like, what just looks nice, what what works well, what's not being too It's not overly designed, not too overwhelming.

And, again, the site is extremely fast. So compliments to the dev of the site, but also Gatsby rid because that's what the site's built in. If you wanna see didn't notice that. Yeah. If you wanna see, just I mean, I could kinda tell it was Gatsby from the the transition where you get the images. You know, it's very Gatsby feel. Oh, yeah. Yeah. You hit refresh on this page, and it's you don't even see the page refresh. It's instant.

So shout out. Gatsby's always been very fast, and and one of the best reasons to use Gatsby is because it's fast. And this feels very, really good as a site. If you go to the work page and click on

one of the apps that he's worked on here.

It's such a good way to present the work that you've done. Rid. Like, this is this is what your portfolio should be. It's not just a link to a website, but you need to, like, show people what did it do, what's the background, what did you use to build it.

Rid. And then they're also some of them have a if you go to the home point color palette one, they do a really good job at rid. Showing the identity colors.

That's exactly what I'm on. I'm right now. It looks great. Wow. That is looks Amazing. Yes. Specifically, go to that one. One thing I don't like, we're just gushing over the site.

And I brought this up because I'm just curious about, like, What would be an actual technical fix for this is that the current page will bold the current page. And when you're on the nav, When you click on the link in the nav, it bolds it, and then it shifts all the other words to the left of it to the right a little or to the left a little bit more because, Like, bolding a font makes it a little bit bigger. And I'm like, okay, that's a little bit weird that you have that shift. Like, what's the actual fix for that? Like, if that was my website, obviously, you want it bold. Rid. The what's the actual fix for that? Would you oh, my fix for that would be, like, duplicate the words rid. Maybe, or use of a CSS before or CSS after, and then bold them so that The NAV automatically takes up the bold space so that when you click it, then it wouldn't jump. Rid. Or you could write a little bit JavaScript where you bold them, figure out how wide they need need to be, and then unbold rid. I'm not sure how quickly you could do that or if you could do that off off Canvas so you don't see the quick little bold. It's obviously not a huge rid deal. But now I'm now I'm just, like, thinking in my head, how would you actually technically solve that? You know? Yeah. Totally. It's yeah. I don't know. Rid. That's one of those things I usually just avoid, because of that. Yeah. Yeah. You probably put it underline or something on it like that. You know? Mhmm. I'm pretty I had that same exact issue on my own personal website, and I opted for just underlining the current page instead of going bold because Because it's not usually a big deal with full page refreshes because the whole page has to rerender. But it is a big deal when you're doing these, rid like React based apps that

immediately cut over to the next page. Right? Totally. Yeah. I don't I don't know. I I would Hi. Yeah. We'll just do an underline. I think that's, like, the only fix there that that makes any sense.

Let's go to the next one here. Let's take a look at This is h o a n g a n h dot dev. It's Anh Huang Nguyen And their site is fun. You know? It's not essentially it's not the most well like, I don't wanna say this is like the most cohesive, like, rid. Beautiful design. But what he has here is, basically, a terminal window that's a fake terminal window. And you have a bunch of little links on the bottom here. And because of that, you can click through and have these, the page change and transition within, essentially, this terminal window. And that experience, I think, rid. And some pages of this site works better than other pages, like the resume or the contact page, the rid. Page. Those contents of pages work really well because it's just typography. Right? And, the way he's using it is a monospace font with colors, And he uses these colors in a way that's a like, it looks like a terminal. Right? Looks like I terminal way.

And that all feels very nice. But the moment that you end up getting into some images stuff and things where it gets a little bit bigger. Like, you get into projects where you have some big images and some in embeds and stuff like that.

You end up having some windows within a window within a window type of deal, and it feels cramped. It feels tight. It feels, yeah, hard to hard to work. And so there in my opinion, there's a couple of solutions that you could have. 1 would be to have The terminal window take up the entire browser space. Right? Then you're not gonna have this claustrophobic feeling. Or You could make sure that the the terminal window is kind of always pinned to the top somewhere to maybe just taking up more of that space because What you end up having is the actual view port ends up being really small for the content.

And some of the content, again, like I mentioned, is iframe. So then you have a frame within a frame.

A frame within a small frame, I should say. And I I've my computer, you know, pretty decently scaled out. So this one is really rich. Again, I love the creative use of making it look like something that it is something else. I did that a long time ago on my my portfolio or my, my resume. I had like a, It looked like, Textmate was the goal. It was just to look like Textmate for my my resume, and it looked fine. It it was easy. It's simplified, whatever. And I like the look. So this type of thing definitely very much speaks to me in the way of I like designs that are are are built this way. I do think maybe you wanna think about the execution a little bit more. Make this thing full width, full height, in my opinion, might might make it just feel a little bit better. Yeah. I agree here. It's,

rid. Really cool to see when when like, maybe you don't wanna design a traditional website because you if you wanna stand out Whoever's looking at it, do something really neat and provide a cool experience by visiting the website. And this is kind of mimicking an actual terminal. Rid. I think it can be dialed in just a little bit more. Just the fonts don't like the one thing that bugs me is the border of the buttons in the font. The font weight is much thicker than the actual border.

You know, like, that's just like one thing that is is kind of bizarre, but I think you're almost there. Rid. Yeah. And all of us, Jen, like the, I don't know, maybe put a border around it. That's yeah.

It's it's almost there. It's it's really how I think about it. Yeah. I really like this when people do something that's nontraditional. It makes You stand out. And if especially if it's executed well, which, like I said, I think this one just some tweaks, and it could be very well executed.

But, again, this is the type of thing that would stand up because no offense to just about every other every other site that we've looked at, or will look at. It's not just your first name, a one sentence, description of who you are, and then it links to about projects and blog, you know. And and I hope that doesn't sound harsh to anyone anyone out there because, I would tell you that just about most of these syntax highlights that we open rid do end up looking exactly like that. Hi. I'm Scott Slitsky, a passionate developer who also designs. And here's my links My social media accounts, and here is my home and projects and blogs.

So, again, no events of yours is is like that, but it is Really refreshing to see somebody do something interesting in a way that still feels usable.

Not just like a I don't know, a toy or something weird. Right. And it feels. Yeah, yeah, exactly. Feels usable. Let's go to the next one, which is Kenny Thai,

at Kennytytytytytytytyty.com.

This one is very well done on the design. Rid. Yeah. It's great. Of things. Very well laid out.

We talk about spacing and size of things a lot where something just doesn't feel right. This is an example of one that does feel very, very good in terms of spacing and size and colors.

Rid. Yeah. Good job on that. Nice font uses San Francisco mono, which I have never seen used before.

I guess that comes built in with the Mac. Yeah. I wonder what it looks like on Windows because he's most likely not able to serve that fun. Right? No. There's there's like rid. I looked it up. There's a full it falls back to UI, monospace, Deja View Sands, and then eventually just falls back to monospace. So there's there's There's a good font stack there.

Yeah. Yeah.

Kind of a cool little orb animation floating around behind. It's not too fast. It's not, rid. At least for me, it doesn't feel too

overwhelming. It doesn't feel distracting now. Like a background animation

can be often be very poorly done.

The one thing about these orbs, though, is it's, like, covering the entire website.

So, like, I can't I was just trying to read the description.

I can't escape yours. Select it. I can't select it. Right? You see you guys got a pop of pointer events none on that div and that'll allow any clicks or highlights or anything, rid like, especially, like, if somebody wants to email you, I'll often just copy paste their name because I don't wanna I don't wanna risk spelling their name incorrectly. Right? So make that make that

a thing. You know what I really like is the the projects widget that he has here. Rid. So he has a a project section if you go to the home page. And it's it's basically like a little mini navigation where you have 4 projects. You can select 1. It does a neat little animation, shows you a couple photos, a paragraph link, and GitHub code or tags or whatever to let you kinda know. But what I really like about this is it shows that, Kenny is able to produce a animated feature widget.

So this little feature widget is the type of thing that I would look at as a hiring manager to say, this person is capable of building rid. Interactive widget that feels nice. It animates on. It, works well in different viewport sizes. So Whether you're on mobile or desktop or whatever, it all shuffles very nice. But this is the type of real feature that, rid that you would typically ask of developers to build this interactive widget. This this maybe it's a slideshow or whatever it ends up being. But this type of thing, To me, I think is a, a nice feature because

it it feels like something that you would want to have in a rid. Skill of a developer that you're hiring. One thing I don't like, and this is pretty common, is that there's parts of websites that are only visible once you rid. Roll yes to that section. Mhmm. I don't I I hate that for some reason, because I'm like, oh, just let me see it. And, like, especially on my I'm on my huge 32 inch monitor right here, and there's just a big blank space.

And I was like, okay. Well, is that it? Is that the end of the website? I'm like, oh, maybe I'll scroll down and see. And then I scroll down, I don't know, 200 pixels, and then the about me fades in.

But then it fades out very quickly after that if you scroll up. I was like, just just don't make that fade in. Just have it, rid.

Have it there all the time,

so you you can see this type of thing. Or or if it fades in once, don't have it fade out.

Because, like, when I scroll up and it fades out, then I'm like, oh, okay. Scroll up too far. But I had the exact same spirit experience where it faded out for me When I wasn't far enough past it. Yeah. Yeah. Have it that's actually something you can do very easily with intersection observer

is just listen for it to come in, fade it in, and then turn that intersection observer off. Unobserve it. Right. And you're done. You're done with that until the person it's a nice little once little.

Okay.

It's not. There's some accessibility issues on here, which is like rid.

We hit this in like every single syntax highlight. Is that like it's so easy. Take 26 minutes and hit tab on your website and realize that, oh, your navigation is not accessible via the keyboard. Yep. So that's that's a major issue. And then just go to the accessibility tab, hit check for issues all.

And there's like, rid. I know. Sixty color contrast issues popping up here. Like, it's such a simple thing. And sometimes these color contrast issues are not Like, you have to go through them and say, like, is this actually an issue? Like, for my website, for some reason, I have black text on a white background. And I don't know if it's Something to do with the speckles I have on top of it, but it thinks that there's an issue. There clearly isn't. It's black text on a white background.

But with this one, it's the text is doesn't have enough color contrast. I could eyeball that as a rid. As an issue right off the bat, which is kind of unfortunate because you always design these nice looking things. Yeah. It's a nice subtle grays. And it's really There's a lot of, like, thought put into it. And then, you know, like, no, it doesn't work. You have to make that, like, very much brighter. And it kind of kind of wrecks your design. But That's what you gotta do. It's gotta be, it's gotta be accessible. Right? I I've almost been trained

in my psychology to now find The super light gray text to be unattractive even though I used to like it the look. But now I I'm I'm so tuned into the fact of how inaccessible that is. I see it, and my brain says, oh, I don't like that. Even though I did like it at one point, I I I don't know. It's weird. It's maybe a psychology thing where you're, like, rid. Gotten got a lot of wrist slaps for so long, you're eventually just like, oh, yeah. That is bad. I don't like that. Oh, this is cool. So there's

One of the qualms I had here is there's a little question mark, and I hovered over it. And this is the thing that gets me all the time is if you hover over an icon that has no text beside it, You must give you a tooltip, like just a title attribute on that link or that button to say what it is. So I hover over this question mark and nothing happens. So I was like, should I click it? I clicked it. And there's a whole bunch of more buttons that don't tell me what they do. And I started clicking the plus button, and it adds more of those circles in the background, which is very fun and a very nice touch. But just add some add some attributes on it because all buttons that don't have a label must be hoverable, rid. Both for accessibility, also just for, like, everyone that's visiting your website. It needs to know what your buttons do. So add a title tag. And, again. Like we say this over and over again.

26 minutes run your website through an accessibility

tracker. That's That's always a big red flag if somebody's looking to hire you. Yeah. Yeah. And I I think that's a good a good point because so many of these, like, this one is so close, but You you get that keyboard navigation in there. You you fix up some of those color contrast issues.

You you tweak it just a little bit, and this goes from something that you're you're having Some kind of negative feeling about because of those issues to something you're only saying is very good. Like, oh, this is very good. Right? But hey rid Hey hey, Wes. You know what else is very good? It's tax time. It's it's tax time. And, no Tax time. Yeah. Tax time means we get to talk about tax time in FreshBooks. Wes, You wanna talk about FreshBooks? I do. FreshBooks just got a sweet new feature,

and it is the ability to rid. Add receipts by just taking a photo of them or just uploading uploading a version of it. So, what I normally do, rid. And I'm sure my sister hates this is that I get a it's not so much anymore, but I still get a stack of Actual receipts. Like the other day, I had a bunch of buy a bunch of stamps for the stickers, and I got these I got actual physical receipt.

And then I put them in a pile and I take a photo of them all. I sent them to my system and say, put these in FreshBooks. You know? Now FreshBooks has the ability to rid. Just take a photo, and it will automatically detect all the information about it, and it's very good. Like, I had a huge, rid. Receipt? I'm not sure how it would do with the those Walgreens or is it CVS? Who does those big receipts in the States? I I think it is rid. CBS. I'm not quite sure if it's CBS or Walgreens. So yeah. But I I took a picture of a huger seat, and it's got all subtotals and totals and taxes and everything in it. It picked it all So you just scan them all. It has a really nice process where I can just immediately scan them right into here, and then My sister can go through and verify them all. So, like, okay. That is the actual amount. That is the right amount. Or the oh, taxes were not added on that one. Add the taxes.

So really, really cool feature that they just added to FreshBooks. So if you are a small business or a Sole proprietor, freelancer, you name it. Check out FreshBooks at freshbooks.comforward/ syntax.

That's gonna get you a 30 day unrestricted free trial. Thank you, FreshBooks, for sponsoring.

Sick. Alright. Cool. Let's move on to the next one, which we're gonna do is rubenolivera.tech.

That's r u b e n oliveira.tech. I don't know why I'm spelling things today after I I after I painfully admitted that I spelled Apart with a u, what is going on with me today? So I I'm gonna stop spelling these, but, rubenolivera.tech Is, okay. So this one, just like the last one, is a first name and then a single sentence and then the social links. So, like, that's not a problem. That's how my side is. That's how a lot of sites are. And in, you know, that's how every developer does that. And then they're like, look, a 100 out of a 100 on, Google speed score. So, Ruben, I'm not hating on you specifically, but it is it is Interesting to me how many of these sites I chose not to put on this list because they look and feel very much like this in terms of what this is.

So if you're really truly wanting to stand out or make yourself, you know, not just feel like it's it's the same thing that we've seen a bunch before, You know, maybe you can get away from doing this kind of stuff. And and I personally I I on my scotttellinski.com, I moved away from some of those things and and, like, almost went brutalist instead of saying, alright. Here's how the thing here's how the The sites are I'm gonna take those kind of expectations. I'm gonna make it just a little obnoxious.

Intentionally make it a little obnoxious. And that's fine.

But at least it's something. Right? It's something different. It's something a little bit different. So, Ruben, your site is fine. There's there's nothing Bad about it, necessarily, but we I think there are some some issues here besides the fact that it's not really, like, standy Audi. 1, we don't have an SSL certificate, which, rid.

Normally, you would say that's not a big deal. Right? This is a static site. There's no reason this stuff needs to be encrypted. But nowadays, like, Every single hosting provider out there makes it easy to have an SSL certificate. They make it effortless. Right? Netlify, render, Vercel, anyone, you pop this thing open into any of those hosts, and it's going to just give you an SSL certificate.

So what I would be looking at as somebody who would be, you know, potentially looking to hire you would be to say, why why doesn't this happen SSL suit? Like, what where's where's the hold up there? What's the reason? So that's just one one thing. Yeah. It's at a point now where browsers make it look scary. They make it look scary. When you don't have there's a lock with a rid. Red Cross thread. Yeah. You know? There's a skull and crossbones in a poison jar in, there's the vomiting emoji.

Rid. I I just I feel like I'm not sure why this one was submitted because it's it doesn't seem totally finished. Like, if you go to projects, it says, Built my personal website and like no shade. Maybe he's a brand new developer as well, but like put some more stuff on there. Have a have a bit more the Or don't include it all. One little thing that was a red flag to me is that the image was resized, not proportionally.

So there's a width and a height put on it, but it's not a square image. Rid. So you can tell that it's stretched, and that's just one of those those things that gets my, spidey senses tingling. And you might not know that, rid. But as somebody who sees a lot of websites and has been in the game for a long time, especially somebody if somebody's trying to hire you, they will immediately notice, oh, that image looks stretched.

And that that seems to be a bit of a, like, a a red flag, I think. So do you know why it's a red flag for me? It's an intention to detail thing. Totally. Where If this person does not notice that their image is squished or stretched, then are they going to notice, like, Those types of things and the designs that I'm paying them to implement. So it's a big deal, and it the squished image feels like it could just be like, oh, it's a little rid. Image. No big deal. But to me, it's a it's a big deal because it does. It it definitely hurts that feeling of this person Pays attention. Right? So, Ruben, you gotta fix that, man.

I'm trying to see what the site is built in. It looks like it's just CSS, HTML.

Let's review the source of the JavaScript.

But yeah. Again, Ruben. Yeah. If if you don't have anything in your project's page, you're gonna wanna do that. The post page has post test post. This is my 1st post.

So, again, feels like just, oh, lorem ipsum text. Yeah. Don't include that if you don't if you're not using it, not needing it. Alright. Let's get on to the next one.

Rid. Is, a b g n dot me.

Hello. I'm Alban.

I'm a Swedish Dutch This one definitely has that Swedish feel to it right off the bat. I think this is an excellent job of adding spacing and design. So a lot of times people want to go for very simple websites.

And this is an excellent rid Design for a simple website because people tend to just go top to bottom. Right? And if you're going simple, you could also just Make columns. And this one has some really nice columns. I think the one thing I want to point out on this one is the online resume.

It's very simple, nice and clear.

It makes a good use of font weights, makes good use of bullet points, and then just a little bit of Color added in the different projects,

that your eyes are drawn immediately to that. So excellent, excellent job there. What function so well about this resume is that if you were to save this as a PDF, you were to do print, save as PDF.

This right here is the resume. Right? This thing looks good enough To be just the straight up resume. In fact, it looks better than most resumes that I've seen. And and oftentimes, this is, like, such a a major thing with resumes or people wanna do, like, a pop up color or something creative in their resume, and then it's just it ends up hurting. Right? Because it feels like They shouldn't have done this. It's distracting. It's taking away. But, this one, on the other hand, uses very minimal rid Color and very minimal design, so to say, but it's just enough where it makes it feel very put together. It makes it feel like a template In an Apple program or something like pages or one of those things. Like, there it's like a here's the modern resume template in a good way. Right? So this thing exists in a in a way that I think is is so nice because it's a shareable, resume that not only functions like a traditional resume and looks like a traditional resume.

But it also actually is impressive in a technological and design sense and the fact that it's responsive, it works well, It's in the browser. It's all those things. And it's a good usage of attention to detail, I think.

All in all, I think this site does definitely nails Simple.

Simple but nice. Simple but nice is a really, really good one. It's true. Like, people think simple means

low effort, But it's very hard to make a simple website, I think, you know, because you just want to keep adding in stuff.

It's kind of nice. There's links to talks that he's done.

Right off the bat, you see all the different projects he's worked on. Coiner, Anvil, rid. Quick dot n v I it's just awesome. There's a users page. I'm very happy to see how many people actually have a users page. There's many users pages? I was gonna say the same thing. Just like every yeah. Wes, you're a trendsetter, man. There you go. So how many people we have users dot tech. How many people are on there now? 624 people have used these pages now. So that's that's a thing. That's a thing. Hey, cool. I like it. Yeah. Excellent job, Alban. That rid. Swedish design is showing through on your website. Totally. You wanna grab the next one there, Scotty? I

do.

Next one. Actually, Before we get into the next one, let's actually take a quick break to talk about LogRocket.

Mhmm. Like, today, we're we're going over a lot of things that are visual. Right? And LogRocket is The error and exception handling tool that is the most visual as in you get a a scrubbable video replay of the Crime being committed in your code. You can see the user do the thing that broke the thing, and you can see their mouse move around and and get closer as they click the button they're not supposed to And then they click it and it breaks your site. Now you found that out because you have a scrubbable video replay to see that happen. And but not only that, is the the The tools that they give you and these new tools they've added recently are all around the basis of making your applications a better experience for the users. So You're gonna be able to stop guessing why bugs happen because of that that nice scrubbable replay, but you're also going to get to see how customers use your site and then Allow you to better engage and retain and convert customers as well. So there's a lot of new features around that are Not just solving bugs and solving issues, but really understanding user behavior. And to me, errors go along right around with that. So So this also works with any of the stuff you know and love, React, Angular Redux, JavaScript, Ember, Vue. They can add Svelte on here because I use this for Svelte, And it works just fine, perfectly, in fact. So check it out on logrocket.comforward/syntax.

Sign up today, and you'll get 14 days for free.

Alright. Next one here is, bradleyshellnut.com.

And Bradley Shellnut.

Bradley Shellnut.

He has It's funny he has little icons, a b for Bradley, a shell, and then a nut.

So that's his header.

Bradley shell nut, which is Which is kinda cute. It it's funny that there's, like, 3 links, and you can hover over all of them, but they all take you just to the home page. It's kinda fun. It's kinda it's kinda cute.

So shout out Bradley.

Really nice piece there. Good.

This site is I think this site, rid. It's fast to click around. It works well. It, you know, functions very nicely as a site, but there's something very claustrophobic about it. Unless, I'm sure you you will, latch onto that. This one's actually built with React and Gatsby installed components and deployed on Netlify, all that stuff that we like to to use over here. So it's no no wonder that it's so fast.

He also has a users page, by the way. Yeah. I wonder if he, maybe he took my of the course because this this is the stack that we learn.

Yeah. So it looks really nice in in some regards. But in others, I think the typography is Kind of an issue on this site.

So everything is OneNote, so to say. Right? There's no Hierarchy of the typography in many ways because, yes, you have a one heading that's a little bit bigger than everything else. But the way that the text is designed or the typography is designed on the site, it makes me feel like I'm just looking at a blob of white.

Just this Just to see see of of of white text on a black background. And I'm I'm wondering what you would have to be the fix for this. I know what my fixes would be. I would choose maybe a different rid Font for the headings and body text, or I would bold the heading text quite a bit.

I would add some paragraph spacing or some line line height. I guess it's margin on this because the line height looks fine, And the paragraph spacing looks fine. I think it's just line height overall or, margin overall is is not abundant.

Rid. And and maybe just putting 1 rim margin on every top and bottom of everything would help.

I think there's A couple of things here is, first, he's using, like, fear of code Yeah. Which is, like, a coding font for text. I do that. I I should talk because I also use operator mono on my blog. I use Mona Lisa for mine, you know? Oh, yeah. But I think this is using like a, What is it? Like a monospace version of that. And it might be too hard to grok it Very quickly because you are used to reading text not in something that is monospace. Right? Also, rid. The text spans the entire width of the thing, and that's it's never a good idea to make your text go all the way across rid. The thing, like, let's see how wide this this thing is here.

1700 pixels wide tax. I I have to jog across my room to read this.

The the start of it. Right.

Rid.

It's just it's too wide. You need to, you need to make that much.

If you ever have, like, text that has to there's nothing on it. You have to put a max width on the wrapper of that text. Like, I'm just going to go right ahead. I'm going to grab that div. I'm going to say probably a max with the 500 on that will make it look a lot better. I'm going to I'm going to see 500 p x.

Rid. That's way too small.

Let's see here.

Yeah. But about 850 p x Immediately makes it look a lot easier. I still find the text a lot hard to read. I think it's because, like Scott was saying, there's I don't know what to look at. It's just all exactly the same color. There's no differentiation.

It's all the same weight. Just The heading is a little bit bigger, but not enough that I think to look at it. So it's just it's just a little bit overwhelming. So I think There's something that could be done there. I also would probably try to figure out if you can find a nonmonos based version of that. Like the Sphero code

Have like, I know operator mono has a version that is not mono spaced. Yeah. I'm I'm I'm just, like, kinda tweaking on some stuff. I'm I'm in the inspect element. Bradley, I'm I'm inspect Element. I'm changing your stuff. I I I just turned the the body text to be a straight up. I just wrote sans serif, and I'm just using the default sans serif font. And, like, instantly, the site becomes more readable. And then I add I agree.

A bunch of margin to the headings, and it instantly becomes more readable. Because I The monospace font can work as a heading. But, again, when you start getting into straight up monospace for that, the body text in that way, and there is a lot of body text, then it does feel very intense.

Rid. Some of these underlines in your links feel very intense.

A lot of the times doing a dark website, It's very tricky because there's so many dark modes out there on websites that don't look good.

And it's because they did it like it's like a brown mode or it's all kind of washed out. Right. It's very tricky to pick a rid. Very good dark colors that will go along with it. So maybe it's just too much dark or a little bit too heavy on there. I don't know exactly what it is. Or maybe the the color that was picked.

That is it. So the text on it is like this kind of like off white color. Rid. Maybe that like, what what happens? Let's let's try it, Scott. What happens when you make that light text just like pure white. Yeah. It looks a lot better when it's just pure white. Yeah. So maybe there's not not enough differentiation there. But otherwise, like like we're being we're being picky here because it is a nice website. But like like Scott said, there's something about it, you know, something

Something something that is is bugging me a little bit. You know? Something that could just be tidier. And and and what we're trying to do, Bradley, is not make you feel bad about your site because your site Is like, I'd be very happy to receive this as, like, a site to look at if I'm hiring someone to say, okay. This person, you know, has the core skills that they could build this quick site that, rid. Has some some, you know, interactivity and whatever in it. But at the end of the day, what we're trying to do here is make your site really pop. And and I think Really Poppin is gonna be, you know, is is gonna be those typography issues, those spacing issues, some of those things. Just just tweak on that stuff a little bit more. And again, you're you're definitely like learning and growing. And this is I think would be a great opportunity for you to just tune it up just a little bit and really take it. Take that next step. Rid. Yeah. I think I'm pretty sure this

was a base from one of my courses because the yellow is my yellow.

Appreciate that.

It's not the yellow he's using.

Shell yellow is what that one is. But the actual yellow rid. In in the if you look up the CSS variables is is the exact text that I use, which I shout out to that yellow. That's the best yellow out there. Yeah. Oh, you get

We're really, it's amazing, Wes, that we both found each other that we, well, like, yellow so much. I was at the doctor the other day, And I'm wearing my old north my old school North Face that's, like, bright yellow, the nineties one, and I have a yellow phone case on my phone. The doctor is like, So you like yellow? I was just like,

yeah. Yeah. Love yellow. Oh, that's great. I was designing my TypeScript rid. TypeScript course website in, in my design program the other day, and I was just like, don't, like, rid. Don't do it. Don't do it. Don't do it. Don't do it. Grunge in yellow. It's yellow. It's yellow. It's got grunge. My immediate go to. Yeah.

Mhmm. Next one is hunter jennings.dev.

Again, I'm not gonna spell this one. Hunter jennings.dev.

Now, Bradley, I want you to take a look at this site because I think he does a really good job of having very readable text.

And this one to me feels Just it feels very nice.

You know what I really like is this dark gold he's using. He's using, like, a a not black rid. Gray, but it's like a dark super dark gray. But he is using white for the body text.

He uses italics and serifs together that look really nice, And then he uses really great, like, royal dark gold bronze color. And it might be a little low on the contrast scale, but it rid. Feels really nice and really well designed and is a very, very nice color scheme. So overall, I think This this site feels very pro to me.

It does feel a little bit like maybe like a a template or something. I Oh, no. It feels nice. If I were to receive this as a site, I I haven't looked through the HTML or anything yet, Hunter. But rid. I think overall, this thing looks and feels very good. And this is the type of thing that if I were to receive this, I would feel confident with the work that that person's going to be bringing. Rid. Yeah. Yeah. This is a good example of, like, you don't need to blow it out. You don't need to wow us if you're not a amazing designer or whatever. Well, I know what you're saying, but The thing about that is is it takes a talented designer well designed. To be something this simple and have it look this good.

There there's it's such a weird quality. There's something very, ethereal about it, where you're like, I I can't put my finger on what Looks so good about it, but the spacing, the fonts, the typography, the colors,

everything works well together in a way where it's just cohesive and nice and pleasant to look at. So true. Like, I would not be able to make a site like my design style. No, I'm a good designer or anything, But my design sire is much more maximalist, and I and my stuff looks good because I just keep adding stuff until it looks that, you know? And I don't know that I could design a very simple website like this where obviously a lot of a lot of time rent. Spent on where do I put italics? There's only 2 spots on the entire website that have italics, but I noticed it. You know? Hunter understands seasoning. He understands seasoning.

Seasoning. Yeah. There you go. That's it. Well seasoned dish. I mean, like, Again, those are the things like that. The italics being dropped in there or just that, like, the one pop of color. And we always used to talk about that music so much. Where so I went to music school for those of you who don't know, and in many of my composition courses, were, like, electronic music based composition stuff.

And many students, myself included, would have a trouble when you're creating something. If you like an element, it is hard not to throw that element all over the place. Rid. I actually, I used to record a lot of music as, like, an artist, and I had this one synth that I really loved. It was called Cat's chainsaw, And it sounded like it sounded like one of those, like, scary ghosts that you hear on Halloween that's like and Yeah. I used that thing Way too much. It was to the point of like, oh, man. I got an open space in here. Let's just toss some cat chainsaw into that open space.

Rid and what Hunter understands that so many people like myself have a hard time understanding is that you don't need Stuff in all the spaces. Sometimes you need you need you need to use something, and you need to use it once. I need to put just a little togarashi over here. That's what I need. And that that, the color, the whatever, that's that that's a spice and seasoning. So good job, Hunter. Awesome job. There's couple accessibility issues here. Again.

We don't need to say this to every single one. There is. Hunter did custom focus styles. Shout out To Hunter on that one, that you don't see that a whole lot, where if you tab through the links, they have a custom border around each of the links.

But then they're like Light mode, dark there's light mode, dark mode, and then, Seinfeld cookie mode, which is, I guess, I'm assuming that means that your let your OS decide if it should be light or dark. Seinfeld cookie mode? You know, remember the Seinfeld cookie? No. Rid. The Seinfeld cookie? It's the black and white cookie. Oh.

It's the it's oh, man. One of the best Seinfeld episodes out there. Black and white cookie. They go into this. They go to get, like, a pie before some sort of dinner party.

And they he has a black and white cookie, and it's like a unity cookie and, bringing the world together.

It's a really funny remember the word unity cookie, but that's that's as far as I go. Yeah.

It's it's awesome.

But so you don't know what that black and white cookie is because when you hover it, It doesn't have a title tag on it. Right? So just slap a little title attribute on all those links. Yeah. And then we'll know that you click that. You get a signed file cookie. Love it.

Let's talk about one of our sponsors. That is Prismic at Prismic dot io. They are a headless CMS, and they have a really cool thing that's called Slices.

And it's going to make a lot of sense for how you build websites, especially if you're building marketing websites where you need to click together things. So They allow you to sign up, immediately just use their GUI to create all your content types.

And then you can assemble all those content types rid into sections, and those sections can be made into pages. Right? They call this slices. And I think it's a really neat way to approach building websites because, rid. You're not just making pages anymore, especially if you're doing a whole bunch of marketing. You've got, information about your product. Rid. You have details about your product. You have, people that are involved with it. You have, maybe other companies. You have all these pieces of data, And you want to click those together to actually build out a website. So what you do is you define your content types, then you create those content out of that content types, and you click them together to create pages.

A really, really neat way of creating websites. And quite honestly, that's what page builders are these day. And it's just like a, it's a whole CMS rid. That is built with that in mind. It's it's awesome. They do your images, your video, your all your condensates, your data relationships, your, rid. Your inputs, you name it. Check it out. Prismic dot i0 syntax.

They have a whole bunch of starters on that page, whether using View or React or they it works rid Literally anything. So check it out. Thank you, Prismic, for sponsoring.

Alright. Next one is rid. Matthew Farlim. Farlim. There we go. .Comfarlim.

It's not Farlim. Farlim. Farlim. Farlim.

Rid.

So this one does the, we used to see this a lot more. I don't think we see it as much anymore as When you land on the page, all you see is the logo, and then you got to scroll to start seeing the rest of it. So that was That was a really popular thing maybe 5 or 6 years ago. I don't know that that's a great idea anymore.

It's kind of Sometimes you see these trends and people do it, but there is at least as a bouncing arrow. It tells you that you need to scroll down.

Rid. Although once you pass that, bam, immediately see everything that you need to see. Who am I? I'm sure you already know. My name is Matthew Farlam. I'm a full stack dev from the GTA. Shout out GTA.

That's one funny thing is anytime I say GTA, people are like, Grand Theft Auto.

Rid. Yeah. Greater Toronto area. That's what that means.

Picture. I always like when people put a picture of themselves, so it feels a little bit More personal.

Again, this is like your standard website, has your 3 columns of all of your information that you need To understand,

I feel like this one probably needs a little bit more spice. What do you think there, Scott? Yeah. Yeah. I I think that is really what it comes down to is I think it needs a little bit more More spice. There there's some interesting things, you know, like, I I think there's interesting aspects of it, But there there are, like, a little ways you could tune it up. The one thing that it it this is, like, a really a funny nitpick to say, But, like, it's funny that it says, here's what sets me apart from others in my field. And then there's the the SVG icon, the heading, and then a quick blurb. But these are these are things that I've seen on, like, tens of thousands of websites.

So, like saying that Here's what sets me apart and then have a feature that is, like, does not set you apart is is a little funny to me, but, like yeah. I mean, it it's fine.

That said yeah. Well, what is it about this site that I think could be a little bit better? I do think with, like, the splash screen, you know, that first initial screen.

I personally instead of having, like, the scroll down arrow, I personally would have, like, the navigation there that you could just click instead of That, you know, instead of having to scroll down. So, like, having the navigation above the fold, quote, unquote, I know above the fold sends people some people into a tizzy. But, the above the fold above the fold, I would probably have that navigation up there because some people don't wanna scroll. They just wanna click on a thing, and there's a thing. I'm gonna click it. Right? Yeah. Another interesting thing, when you click the home, it takes you to the splash screen. Nobody cares about that.

So there should be no reason to, like, link to that splash screen, Matthew. Like, if anything, maybe link to the who am I if you're gonna have 3. If you want 3 links They're the the home projects in contact. Maybe you have one of them linked to the who am I section to take you right there instead of to the, billboard part of it, the splash screen part of it. What else? The who am I section is kind of broken up into 2 columns where you have the image being floated from the text. I would probably just keep that Two columns because what happens is after the the the image finishes, the text flows underneath it, and it makes it feel a little bit weird and then maybe too wide. So I'd probably just keep that as 2 separate columns completely, and then maybe bump the photo down to be in line with the 1st paragraph text. But again, I don't know. There's a small nitpick in the design. Can we,

rid. Clap for Matthew for being, I think, the 1st person who put title text on their icons here. Yeah. So if you Scroll down to the bottom and there's the link to GitHub, Instagram, LinkedIn, Twitter and YouTube, which, by the way, I love that everybody needs to have those because If I'm checking somebody out online, immediately, I want to see their website, but I also want to see I don't know. I I maybe I'm a little bit nosy, but I wanna see, like, what are they doing on Instagram? What what's their GitHub look like? I don't care about LinkedIn, but a lot of people do. You know? You're right. Rid. That's something we we talked a lot about in the 1st syntax highlight. We haven't really talked about as much as we've been getting to people's websites.

But, like, reviewing this person is like a candidate. Yeah. Right. We want to dive into who they are. I see the cutest dog ever,

has kids. Look at that. Good job. Good job. One one thing is that, like, I don't everybody uses so much gray on their websites.

And, like, He obviously is a good designer. There's there's lots of examples of of designer. And also when you hover over All of the icons, it changes the background color to, like like, blue for Twitter and and, Pink for Instagram and purple for GitHub.

Like, put those on by default. Add a little bit of pizzazz

Yeah. To to your website a little. There's more colors than gray in the world. Yeah. I hear you. Have some yellow. Go try to keyboard now this site to us. What happens for you? Nothing. Nothing.

Oh, they are. You can tell that. So not even nothing but intentionally keyboard

highlighting was stripped. But not only that, like, I can't even get it to focus on anything. Is there like a tab order being removed? You can tell that the designer developer dreamer

Icons get focused at some point. Interesting.

Because which they shouldn't be focused because they are not Links. They're not links.

Rid But then the nav is not focused. Oh, but there also is there's there's full oh, there's full alt text.

The alt text on designers says fancy pen icon in a circle. Oh. I like that. What does the developer one say? Code icon in a circle.

Single cloud icon in a circle.

Good job there. So the obviously, the accessibility was thought of a lot. And there's title text, but they're all. But the tab, that's a easy fix. I think tab order. Yeah.

Stop rid. Stripping all of your focus styles. We should say that to the world right now.

Never ever ever ever rid. Say outline none on everything without having to go and put in additional focus styles. I know it looks ugly with the dots around your thing, but you can't just strip those all out because you don't like the look of it, because that is a big middle finger to very a lot of your users. You'd be surprised at how many users, myself included,

like to use a keyboard to Go around your website. Yes. Sometimes it's easier to click tab and and go. I can't get I can't get the the focus styles to work on on the navigation at all. Even turning outline on outline one case. What do we gotta do here to to get this? What do we gotta do here? Any link cursor pointer. Just I'm just, like, not able to navigate the site by tab. So just figure those issues out. I don't know if it's a tab.

Either way, it seems like it was most likely intentionally

removed, which Yeah. Outline 0. A active. A hover. Outline 0. Mhmm.

Rid. There's your problem.

Found it. Alright. Let's move on to the next section of the show, which is sick picks. This is a section where we pick things that are Sick. Do you have any sick picks for me today, Scott? Alright. I'm just going to sick pick,

show that we've been watching on Netflix, rid Which is probably a lot of people are watching it by now. It's just this bad vegan documentary. My sick pick. We're both rid together. It's this year's Tiger King type of deal where you're just just watching in the horror show.

You just you sit up. You you sit Down with the couch. You you get your popcorn. You're like, I'm gonna watch this horror show. I'm gonna watch this person completely lose their entire life because Of, you know, psychological manipulation and abusive behavior. And it is shocking.

The whole thing is shocking.

Very sad story. Very sad story about a restaurant tour who kind of gets completely taken advantage of and,

just like mentally abused mentally abused into crazy guy. You like you watching go, how can this possibly happen? But like, you just don't rid. Just don't understand. I still don't understand. And that's 1. My one criticism of it is they didn't have anybody that was like a psychologist to come on. Oh, yeah. This is how These people are manipulative, but the story is crazy.

The story is crazy, and, we put it on, and it was you know, production, all that stuff is very good. But I I totally agree with you and especially because, like, Courtney, it it just, you know, had a discussion between Courtney and I were just like, How does this happen? And then you think about it, and you're like, yeah. But there's time and time although you look at the way that this guy abused her, and you'd say, how is Anybody falling for this because Yeah. Everything the guy says is is, like, in is this idiotic? Right? It's just Out out of control idiotic, and you read it, and you're just cringing because you're just like, I can't believe, anybody could fall for this. But time and time and time again, There it it seems like, there these documentaries expose that people are so Manipulatable into being essentially robots for other people. Yeah. And you see it with, like, the Wild Wild Country or any of these Cult leader ones. Tinder swindler. Did you watch that one? I didn't watch that one. Courtney didn't want Oh, you gotta watch that one next. Yeah.

We should probably watch it. But any of these times where you see people get psychologically abused and they turn into essentially drones, it's like, yeah. It It really just happens. Some people are really just that capable of manipulation and that capable of of just horrendous, You know, psychological abuse that it you could really just man, it it's just scary. I don't know that that somebody could become that, Transformed essentially from from the situation or that is just a couple