July 7th, 2021 × #Web Development#Portfolios#Design
Syntax Highlight — We Review Your Portfolios
Scott and Wes review listener submitted websites and portfolios, providing feedback on design, code, accessibility, and more. They also discuss Scott's upcoming move, funny kid stories, and share picks for lever wire connectors, podcasts, and web dev courses.
- Scott bought and sold a house, moving in August
- Reviewing user submitted websites and portfolios
- Scott is getting his own office in his new house
- Wes suggests names for Scott's new office
- Scott and family taking a break this summer during the move
- Reviewing website for Erica Cud
- Suggestions for improving color contrast on Erica's site
- Tip about setting card height based on content
- Overall positive feedback on simplicity of Erica's site
- Tip to make social links more prominent
- Review of Damon Bolstra's site - fun animations but some accessibility issues
- Tip to move some over the top animations to separate pages
- Feedback on clashy design elements on Damon's site
- Emphasizing importance of basic accessibility
- Tip to remove some distracting background elements
- Story about kid eating too many granola bars
- Scott's sprinkler was damaged during house sale
- Review of Walter Jenkins' site
- Feedback on scroll effects and typography
- Tip about header structure and spacing
- Suggestion for better text contrast
- Scott discovers interactive map is live transit data
- Tip to call out interactivity of map more
- Font weight tip when using Google Fonts
- Praise for Suhit's clean, polished site design
- Benefits of small whimsical touches on sites
- Praise for restrained use of special effects
- Discussion on resume format - HTML vs PDF
- Scott's simple GitHub readme approach
- Review of Jacob Pawlak's site
- Feedback on header structure and font usage
- Emphasizing proper HTML structure
- Reiterating paragraph vs heading differences
- Praise for portfolio integration on Jacob's site
- Tips for resume design and formatting
- Funny banter about image formats
- Introducing Martin Van Hoof's site
- Praise for fast page transitions on Martin's site
- Discussion about non-standard WebKit textstroke CSS
- Feedback on logo hover animation on Martin's site
- Issue with contact form on Martin's site
- HTML heading structure should match content hierarchy
- Goal is to provide helpful portfolio feedback
- Wes' sick pick - lever wire connectors
- Scott's sick pick - What Had Happened Was podcast
- Scott's shameless plug for Level Up Tutorials Svelte course
- Wes' shameless plug for his courses
Transcript
Announcer
You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready.
Scott bought and sold a house, moving in August
Announcer
Treats out there. Strap yourself in and get ready. Here is Scott Talinski and Wes Boss. Welcome to Syntax. Today, we've got a Syntax highlight where we review your Folios, websites, resumes, you name it. Scott and I are in no position to do this, but we're gonna do it anyway.
Reviewing user submitted websites and portfolios
Announcer
Rid No. No. The idea is that we're gonna just take a look at user submitted websites and sort of give our ideas of rid. That we like, things that we don't like, things that could be possibly changed. And if you are trying to get a job, trying to up your job, rid. This is a good episode to listen to because we talk about just, like, little things here and there that could make or break somebody passing on you in your website.
Announcer
We have 3 awesome companies sponsoring today. Sanity, which is a structured content CMS. LogRocket does, rid JavaScript session replay and Cloudinary does hosting image transformation.
Announcer
We'll talk about them partway through the episode.
Announcer
You doing today, mister Scott Tolinski?
Scott is getting his own office in his new house
Scott Tolinski
Hey.
Scott Tolinski
I'm doing good.
Scott Tolinski
Big life news. We have bought and sold a house, So it is official as of this is the 1st 1st episode we recorded since it's we've all closed and everything like that, although We are not moving until August, but, yeah, it is been very, very hectic over here, and you we're not Going far. We're staying in Denver, but, hey, we we needed some bedrooms for our kids really is what it came down to. So our Our little 19 19 twenties bungalow is is going to be gone for us. So, unfortunately, that is it's very sad at the same time, but, Man, I'm excited my,
Announcer
new new house Your new place looks
Scott Tolinski
so sick. It's pretty sick. And Yeah. We have an external office, So I'm gonna get to have my own full Stack Shack. Did you decide on the name yet? No. But you had so many good ones. So I'm just gonna close my eyes and point out one of the ones that you picked out, like The level up hut or something like that, which is very funny.
Announcer
Let's see. What did I name it? The code abode, The code caboose, level up lodge. I think level up lodge would be good because you're in Colorado.
Scott Tolinski
I'm in Colorado, and our house is in, like, an aspen tree forest. It's not really, but, like, the previous owner planted, like, a 1,000 aspen trees, so it's like There you go. Yeah. Very logy.
Announcer
Syntax shanty, the level hut
Scott Tolinski
Level hut tutorials, the code cottage, the code cave, the Talinsky tab, the level up lodge. I already said that one. You came up with all of these in, like, 5 seconds. I was, like, maybe had 1 in a So do you, really have a future in naming coding checks?
Wes suggests names for Scott's new office
Announcer
That is good. Yeah. I'm very curious to hear what you name it, And, also, maybe we can have a a little hasty on your like, once you get it all set up. Oh, yeah. My new setup's gonna be dope. I think I'm gonna change my paint color. We're gonna see. Maybe we're not gonna both do dark blue paint anymore. I might do black. I don't know. I haven't decided yet. Rid That'd be pretty cool. Yeah. We'll see. There's nothing I like talking more about than desk setups rid and offices and things like that. So very, very into talking about that.
Scott and family taking a break this summer during the move
Scott Tolinski
Yeah. Well, I'm I'm pumped. It's gonna be my first rid Real office that's not a bedroom. This is a bedroom office. My previous one is a bedroom office, and I'm gonna have an office office. It's gonna be pretty cool, so I'm going to be very excited to move. And and because of that, we're gonna be taking we're gonna be taking some time off, but you guys won't know that, by just listening to the podcast. We're we're not gonna miss any episodes, but we're recording a whole bunch a little bit early so that we can take a couple of months off for a some little summer vacay while Scott moves, and Wes hangs out at the cottage and all sorts of fun stuff. A little swim swim. Yeah. Yeah. Cool. Well, let's get into it here because rid We don't need to talk about this stuff anymore. Let's get into some portfolios.
Scott Tolinski
Now the first one is going to be c u d d dot I o, rid. Cud.i0.
Reviewing website for Erica Cud
Scott Tolinski
This is Erica Cud, and her website has one one. I think it's Next. Js. Think you can kinda tell just from the HTML, which is nice because she gets full server side rendering on that stuff. And I love that when I'm looking at HTML and anything to see that in there. It's not necessarily like one of those it's not a deal breaker or anything, but I love to see it. There are some neat things about this site. It has a really nice Shared animation transition between the home and about page. I don't know if you have this open west. If you click about in the nav, Her photo goes from front and center to the side, tab over there on the side and animates nicely in between. Things slide up.
Scott Tolinski
Everything is very readable and clear. There's not a whole lot of you're you're not necessarily, like, we know. Where do I go? What do I do? What's on here. So for the most part, it's all very readable and clear. It's simple. The portfolio is here's 4 items. Here's their links. Here's their code links if They exist, and here's a 1 sentence description, and here's some tags about what they do.
Scott Tolinski
So all of that That it is very, very it it's nice, and there's a lot of nice fluid motion between things. It's nice and simple. I I do appreciate all of that. Not trying to get crazy with a portfolio or anything.
Scott Tolinski
Some notes here for you, Erica.
Scott Tolinski
Check the color contrast on that on that white on blue. I fired it up in rid c0olors.co contrast checker, which is actually a really nice site. And I I posted the link in the show notes here so you can do that as well. Rid. That contrast because it is a pretty poor contrast ratio without white on blue, and that is definitely something I noticed just by looking at it. Especially when you have such a thin thin font, it becomes pretty hard to be readable, so you'll probably want to adjust that in some sort of way. That's a tough one because, You know, that's your your your brand color here. So, Wes, what would you do for this white on blue if you were trying to make this readable? I'm gonna put you on the spot here. Rid Yeah. That's a good I I definitely bump up the weight to something like that. Maybe throw
Suggestions for improving color contrast on Erica's site
Announcer
a little drop shadow on that type of thing. It's it's always hard with that type of stuff because, like, you clearly rid the font for your website and the color for your website, and sometimes those things are don't work rid just because they're inaccessible or whatnot.
Announcer
So I would probably jack that up, the the weight. You could also some, like, background color on each of the links.
Announcer
There's probably something cool you could do with it because there's the whole nav itself is tilted, rid. Which I appreciate that kind of little quirkiness on a website. So it's probably something, like, quirky you could do with that to also make it Background accessible.
Scott Tolinski
Yeah. You're right. You could maybe, yeah, do something geometric there or something. But either way, the contrast is too low, so you'll wanna take a look at that. I like Your use of CSS variables, which are are very nice. I peep some CSS variables in there. All that all looks nice. One thing is is also on the the the projects Page here. You have these cards. Now I'm guessing that, Erica, you've primarily looked at this on a browser window that might be The aspect ratio would be, like, considered landscape.
Scott Tolinski
Because anytime you you're getting into this browser window, when the browser window is A little bit taller than it is wider, a little bit even just tall in general.
Scott Tolinski
You have these cards throughout the site that look like they're pinned Essentially, to take up the full height of the site, it looks kinda weird in some instances. Like, for here on my portfolio, I'm seeing a ton of white space Between the paragraph describing the text and the tags that you have that indicate the technology that this is made. So I would probably Have them scoot up to the tallest content rather than having them stretch out to the very bottom.
Scott Tolinski
That's just a, you know, a minor nitpick.
Tip about setting card height based on content
Scott Tolinski
The only reason I say that is because it looks like a mistake on my browser. It doesn't look like it's you know, just especially because the the tags are are pushed down there. It looks like a little bit of a mistake. Another thing is the card headings for your projects are all h twos for the project name.
Scott Tolinski
Those should not be h rid choose those to probably be something like an h three or an h four.
Scott Tolinski
If you think about it like this, you're like page title, which is most typically your name is going to be the h one, and then the section titles should be h twos. And then you could think of that if you have minor content in there, like project titles, that's gonna get into the h three, h four territory. So So just something to think about with your headings. But overall, a lot of great stuff going on, and I I love that you you thought about animations. You have server side rendering. There's a lot of really neat stuff going on in here. So just get that contrast checked out and maybe some of those little small things. And I I mean, this is a a really nice site.
Announcer
Rid Yeah. I'm just looking oh, never mind. I was just gonna say the the one tricky thing that happens is if you have a logo that is an image, there's often no text.
Overall positive feedback on simplicity of Erica's site
Announcer
Rid. There is no text in this, but there is an ARIA label on it, which is great. So that is not actually an issue. The other thing is the GitHub, Twitter, LinkedIn resume links very close to the bottom.
Announcer
Mhmm. Yeah. And so they're sorta hard to find, especially if you are on mobile or something like that. And for me, at least, that's something I rid. I look for immediately when I go to a developer's website. I was like, where's their Twitter? Where's their GitHub? Like, if I'm, like, trying to say look for a legitimizer, as Scott would say, just check somebody out online past their own website. I immediately go look for their GitHub, and I look for their rid Twitter. And, like, these things don't need to be super popular or super, like, full of stuff. I just need to see that they're there, and I would probably put that as, like, a subnav or maybe rework the whole nav and put those items in it. A lot of the other people we are Doing today put them as, like, icons
Tip to make social links more prominent
Scott Tolinski
in their navigation or or as, like, a side thing. And I'm only thinking I think if you bumped them up Just ever a little bit away from the bottom right there. But you you're right. If on mobile though, that would get lost towards the bottom. I say this because I I typically put mine, My social link's in the bottom as well. So your attack on social links in the bottom kinda feels like an attack on me personally, and
Announcer
I'm just joking, obviously. And, like, honestly, I do as well. Like, I don't I don't have read. Links to my Twitter or GitHub or anything.
Announcer
Actually, I don't even have yeah. Mine is in the footer, but, like, I I color them a little different, and I put a bit more space around them. Maybe that's a a good approach as well. I got rid of mine entirely, but I should probably put them back. Next one we have here is Damon Bolstra, which is at damonbolstra.com.
Announcer
Rid This one, I I really like the design of this one. It seems like that seems to be a thing with a lot of a lot of these website is that there's not too much design on it, And I think developers in general are a bit afraid to I don't know. Like, I I find most developer websites are very, very minimal, and they they all rid Kinda look the same.
Review of Damon Bolstra's site - fun animations but some accessibility issues
Announcer
This one definitely plays outside those boundaries.
Announcer
There's animation.
Announcer
There is rid Some really cool mountains on the bottom. There is parallax scrolling, but, like, not obnoxious, just like rid Kinda as you scroll, the stars move at different rates. There's a little bit of animation, some three d stuff, just all around, like, really good amount of stuff. The rid The one thing that is weird to me is that the nav on the sidebar only comes out when you scroll, like, 30 pixels down.
Announcer
So, like, I know from experience that a lot of people visit a website and then fold their hands and sit there and look at it. Rid And relying on people to scroll to trigger things is sometimes very confusing to them, or they might they might just miss it. It's a duplication of the top nav, though. Oh, you're right. So okay.
Scott Tolinski
It only shows up when the nav has scrolled past. Okay. I take that back then, Damon. I didn't wanna interrupt you, but I, You know, I I figured I would let you go wherever you're gonna go.
Announcer
I said come back and put it in my face. No. That's good. Okay. So that also is a good point. It's like, Sometimes you're getting feedback from people, and those people are just
Tip to move some over the top animations to separate pages
Scott Tolinski
not very smart, and they don't know what they're talking about. Yeah. I personally haven't seen you know, you typically when you see that, like, The header and you scroll and something happens with the nav, it's not a super common pattern. And, honestly, if it was me, rid. What I would do is just nix that top nav entirely and have only the the side one and not have it come and go And just leave it there the whole time and then just not have to worry about that because it's it's like you're duplicating that that navigation and also that, but, like, the links aren't even, like, the same. So to give explanation for visualist or people listening to this, the links in the top navigation are links. Right? They're just text links, but the ones in the sidebar that slide in, they look like buttons. Right? They explicitly look like buttons. So I would style those to be the same because they are the same thing. So if you're gonna Them be, you know, 1 coming in and 1 going. Style them to be the same thing. I don't think those need the whole button treatment.
Scott Tolinski
They can get the same rid. Same treatment. That was especially because many of the buttons on the site link externally whether it's a visit site or or view on GitHub. So I would look at those buttons and think maybe those are external links or something.
Feedback on clashy design elements on Damon's site
Scott Tolinski
There are some, like, neat things about the site. I think it's very, very cool. It is a bit janky on my machine. I don't know what or why. I don't know if it's janky for you, Wes, but the scroll, when I'm scrolling, It's having a hard time for me. That's buttery for me. Okay. It could just be that my computer is like, I don't know what's going on with the CPU in my computer, but it's been there's a lot of stuff going on in the site.
Scott Tolinski
I would also say maybe maybe some of your your patterns are a bit clashy. I know that this seems like it's trying to be a bit clashy, but rid There are some, you know, stripes stripes and circles issues going on here with, you know Yeah. You might wanna at least make it a little bit more cohesive some of the stuff is a lot of fun, but it definitely feels like a little clashy.
Scott Tolinski
Yeah. It doesn't look intentionally clashy. I think that's what rid Scott's saying here. Yeah. Yeah. Right. It's not trying to be, like, brutalist or whatever, but there are still some issues where it is clashing. Yeah.
Emphasizing importance of basic accessibility
Announcer
One thing, and I'm I'm gonna say this about a lot of the stuff that comes up. I'll just say it all now, is that if you throw the axe dev tools rid. On your browser and run it on your page, there's, I don't know, 50 or so issues that pop up that you could fix Very quickly, like like, in probably half an hour. Mhmm. And I'm not just saying that because they're sponsor of our podcast. I'm hating that because if somebody is looking to hire you rid. And accessibility is something they care about for their developers, which is most often the case. They are going to run an accessibility test.
Announcer
And if they see things like images that don't have alt text or buttons that cannot be keyboard focused or just like rid Low hanging fruit in accessibility world. Like, this kind of stuff should be done regardless of like, in in my mind, rid Having the very easy accessibility stuff not on your website is like having a link or having a broken image on your website. Mhmm. Rid Kind of the the same area. I was like, oh, why did you overlook that thing? That that was such a simple simple thing to fix. So I would get the axe Dev tools for your your Chrome extension or Firefox.
Announcer
Open up the in your dev tools, check for issues, rid All issues, and then it runs a little a little thing, and it will find
Scott Tolinski
all kinds of little quick fixes. So I would run that. Make sure you do that. And I think that's such a good point because there's so many, like, nice touches on this site where you have the stars, you have the mountains, the moon, this sort of vibes. You have a lot of, like, really nice things, but then There are are situations where, like you said, if you run that, that really negates a lot of that nice nice stuff. Right? It's like you've built up this goodwill with some of the cool stuff, But then you're kinda taking it away. Another thing you know what? I don't know how will you feel about this, Wes, but, like, know what? I don't need this whole circuit board background business. The stars and moon background is so nice, but then you're blocking it with a bunch of other backgrounds and a bunch of other textures. I think if you were to get rid of that circuit board and have it just go straight through to the stars and stuff, and then you have maybe you could keep the sites heading that way, and then it's gonna be less clashy.
Scott Tolinski
Same with the games. I don't need this Asteroids video game going on behind it. You already have a nice background, so you're just kind of, like, layering thing on thing on thing, And it can feel very overwhelming. I think what is fun about this is that it's obviously a playground
Tip to remove some distracting background elements
Announcer
for learning and trying new things.
Announcer
And what I've seen people do in the past is instead of putting it all on 1 page, like, write a blog post about what you learned and then use those effects rid. In, like, the asteroids canvas background.
Announcer
Like, put that on a separate page. Yes. Write a blog post about how you implemented it or Or have, like, a little area called,
Scott Tolinski
Experiments or Experiments. Yeah. Exactly. And just, like, try that stuff out on different random pages because it's, Clearly, it shows me that you love having fun with this stuff, and it's impressive that you figured out how to make all this stuff work, but maybe put them on separate pages to display that. Know, I think that's such a good point too because if I see this as a site and they're using, like, an asteroids game in the background, I'm saying, you know, that doesn't work for me. It feels like it's too much. It feels like it's Distracting or taking away. But then in the same regard, like you said, if there was an experiment section of the site where they had a blog post saying, hey. I made this cool asteroids thing, Then that suddenly goes from a detriment to a plus to me. I'm looking at that and saying, oh, cool. This person is experimenting. They're trying new things. This is fun. This is interesting. But, you know, it's like in Top Chef or whatever when they're trying to throw all the tricks they know onto 1 dish. You don't need to throw all the tricks you know into 1 dish. You can make several little mini dishes that are, you know, showcasing those tricks to their fullest extent That's a good point. Or even, like, yeah, making it a little tastier. Rid Scott's on fire with the, explanations today. We just recorded another one on buzzwords, and he had some good ones in there too. Well, the one on buzzwords was stolen somebody else, but, you know, they're both food explanations here, and maybe that's just because Landon ate all of our granola bars that we have for breakfast.
Story about kid eating too many granola bars
Scott Tolinski
Woke up early yesterday, and and the the first thing Courtney says is, Landon, can you tell dad how many granola bars you ate this morning? He just went in the pantry and went How many did he eat? It was, like, 3 or 4, but it was, like, all of the ones that we had had for the week. It was like, you know, you you buy a bunch of the RX. Rid It was the RX bar, so they weren't weren't cheapos.
Announcer
Oh, that's hilarious. We one of our kids did that with yogurt the other day where they just, like, They had, like, 3 yogurts with Caitlyn, and then I came over and took over. And they had a couple with me, and then they're like, my tummy hurts. And we're like, well, how many yogurts did you have? 6.
Scott Tolinski
I wonder why that. You wonder why your tummy hurts.
Scott's sprinkler was damaged during house sale
Scott Tolinski
Yeah.
Scott Tolinski
Oh, one more small thing. I don't wanna, I don't wanna seem like we're ripping on you. There's a lot of cool stuff in this site. So, you know, Just take that. Yeah. Border radius. This is a common pet peeve amongst people. When you have a container that has border radius and then you have padding inset And then you have what is the same border radius.
Scott Tolinski
That doesn't work. There's a formula for doing it where the padding needs to be taken to account From the border radius. So Google padding border radius design or something like that. You'll find some some explanation as to what you need to do here. But at the long story short is if your card has a specific border radius, those images should have a tighter border radius rather than a wider border radius. That way, the the corners line up, and they don't look like they're this weird corner. Yes. That's like a little minor design nitpick, but people will have that nitpick. At the very, very least, just eyeball it. Yes. Yep. Yep. I wonder what the math is. The well, the math is just padding plus the number, I think. So whatever the padding is, if it's 10 pixels, I think you can just count on adding 10 pixels or minusing 10 pixels from the border radius. I think that's what it is, though. Rid Okay. That makes sense, I think. You know what else makes sense? What? Using one of our sponsors today, and I'm talking about rid. One of the sponsors that will be the perfect back end data source for you because it allows you to have the flexibility that you need when working in modern sites. I'm talking about Sanity atsanity.io.
Scott Tolinski
West, you wanna hit them with Sanity?
Announcer
I wanna hit you with Sanity. Sanity is a structured content CMS, so it's a service. Rid. But the way that you start with the services, you npm install it, and you can initialize a project. You create all your content types. Ready. Create your relationships, and it gives you this thing called Sanity Studio, which, best of both worlds, is already done for you, but rid It's code that runs on your machine, on your host, wherever you wanna actually run it. Like, it's like a full blown product that they give to you, And then you can add code to it, which, like, like, props to them for doing that because imagine running a company ready. Where, you basically just give the code to run the product to your users and say, here you go. You can customize it if you want, which rid. It just shows how how good the actual Sanity Studio is, where it's just, like, done for you, but you can edit and make new components, make new inputs, and add rid Any custom validations that you want, any any custom relationships between your data. If you're working on a project and you need a CMS for your project. They do images and all that good stuff as well. Whether you're pulling that into a Vue or Svelte Or using GraphQL or hosting a Netlify or React app. Literally anything it will work with. Check it out. Sanity.i0forward/ syntax, And that is gonna give you double the free usage tier, so you can just go ham on your next project. Thank you, Sanity, for sponsoring. Sick. Alright. This next one's from Walter
Review of Walter Jenkins' site
Scott Tolinski
k Jenkins.
Scott Tolinski
This is Walter Jenkins' site. It is pretty cool. He says Walter Jenkins at maps plus data plus processing, and he's got a neat map of a city. I'm not sure what the city is. It is not Denver. I can tell you that. But it is a city, and it's a map, and it's got some data points on it. It's pretty neat. And so this this site's really neat. You know, it has rid A very common structure where you have nav in the top right. It's a single page app in the truest sense where you click on an item and it scrolls you down to the current section Or at least it hops you down. It doesn't necessarily scroll you, which honestly, I don't I don't really mind that either way. I don't need it to visually scroll my site.
Scott Tolinski
And so it has the the 1st initial page is this big clean and and honestly nice spacing. You have a text that is scrolly or a cursive font, but he actually Took the care to put a border around it, a border on the font, which believe it or not, it makes it way more readable on this map despite this fact that the map's not that intense, And it's the same background ish color as the map. Yeah. It uses text shadow. It's using text shadow? Yeah. It's using a couple text Shadows to sort of go up and over and down and and left.
Feedback on scroll effects and typography
Scott Tolinski
Okay. Yeah. So it's using the text shadow trick to make a a border rid Essentially, around the text without it necessarily being a shadow shadow. There are are some really nice things about this site. Forgive me, Walter, if I don't spend a ton of time on the The nice stuff. Because the nice stuff is nice. Overall, it's a it's a very, you know, nice looking site. Some of my nitpicks about this site would be the h the header structure of it. For instance, you got a lot of h twos in here. For instance, your your maps, data, and processing headers, these little buttons here are at, Like, the very first sections, those are just little headers. I don't think those should be whatever they are. Same with, you know, the blog and projects and stuff, those can be h twos. But to me, it seems like these little maps data processing, those can be h fours even, h threes, I guess, if you don't have any h fours.
Scott Tolinski
Nitpick right there.
Scott Tolinski
Another one would be the whole transparency on this content section.
Scott Tolinski
It's not a huge problem for me to read this, but I feel like some people would have a hard time reading the text rid. In this section with the transparency of the background Oh, yeah. I feel like you could make this more opaque or even completely opaque and not transparent at all, but that's just me personally.
Scott Tolinski
We get a good look at the map. I know you wanna show off that map and say, hey. Here's this map behind here. We get a good look at the map, so I don't know if we need to see the map through the rest of the site. Minor nitpicking your CSS here, your whole heading Walter Jenkins part has some Height issues.
Tip about header structure and spacing
Scott Tolinski
So this is, like, very, very minor, but, like, go ahead and try to select the text that says maps. You can't do it unless you start lower Because that header, if you inspect element on that the initial Walter Jenkins header, the header actually sits on top of that section. Rid. So that that's one of those things that you won't notice, but if you look and maybe highlight it and inspect element or something, you'll see that. And it's not a huge concern, but if I was somebody and I'm trying to Double click on maps to inspect maps. It's not gonna let me do it. It's gonna inspect that header because it's sitting on top of it. Again, minor nitpick there. Another one, you have, continued to your repo in a cursive like, sort of like a cartoony cursive font. Just make that make that a a bold, Normal sans serif font. That thing being cursive, it's too small, too hard to read. A lot of people will have issues with that. It's not helping you being in cursive. So just make it a Bold underline text, a little bit bigger, maybe the same font size as you're heading there because the headings aren't super huge. That's a lot of my things. Maybe there's some contrast issues on those Tags as well. We have a white on orange, so we wanna make sure that we throw that through our contrast checker and check the contrast just to eyeball in it. It looks kinda weird.
Suggestion for better text contrast
Scott Tolinski
Last one is the last section where you have those 3 social links. Feels kind of unfinished, feels kind of out of order. So what I would do is make that section either the height of those links. Just tune it up so you don't need a full, like, full screen version of that or put some maybe, like, a header that says social links or contact me here or something like that, maybe some Text labels on there just to fill it out a little bit more, but you have this big open space and then just, like, 3 links kind of randomly inserted in there. So just A heads up there looks a little unfinished in that last section. But overall, nice stuff. I think the the colors are nice. The vibe is nice. You know, that that cursive font really does work for that main header. I might only leave it in the main header and then just drop it everywhere else if it's me, but overall, you know, cool stuff. Rid. Yeah. The the dots just moved
Announcer
on me, and then that got me curious to what what the dots were. So I went into dev tools, and I was watching it. And it's the Saint Louis transit system. I think that's where all their buses are. Oh, okay.
Announcer
Super cool. Rid. And I what I would do is put, like, like, a little blinking or, like, a countdown clock to when that changes Because, like, that might just have been a screenshot to me. But, but the fact that it's the actual live data,
Scott discovers interactive map is live transit data
Scott Tolinski
That's wicked. So maybe flex that a little bit more. You could even, like, have, like, a little, like, little, like, question mark or something. You could hover over it, and it could give you a little about this. Like, what's going on here? Oh, this is the the Saint Louis transit system, and it updates here. Like, I mean, I I wanna know about this because this does feel like a a nice little rid Or almost like a little experiment. One thing that I immediately saw when the page load is and it gave off a bit like, I don't mean to Don't mean to be rude here, but it gave off a bit of a,
Tip to call out interactivity of map more
Announcer
like, amateur vibe to it was that I could tell that the font was bolder than the font was meant to be. So I went into dev tools, and this happens a lot because people just go and get a Google font. Like, this one's called Pacifico, and Pacifico has one weight. Rid. But if you just apply that to things in the browser that are already bold, like all of the heading tags already have a heavy weight on them, Then the browser will attempt to make them bolder. It will fake bold them, and I could I don't necessarily have a super good typographic eye, but rid. I could tell they were bolder than they had to be. So I just went into my dev tools and just did font weight, like, rid. 250 or a100 or something like that just to unset the fake bold, and it looks way better. Yeah. So, like, read. Everywhere on the blog, all of these headings are using this fake bold, and they're just a little bit too pudgy.
Announcer
And whoever made this font obviously did a good job Making it look good. So take that fake bold off of all of your headings, and it will look really, really good. Oh, it makes it look so much more crisp, And the rest of the website is very crisp. This map is super crisp. The colors work together really well.
Announcer
So going a little bit further with that would such a good Otherwise, I think Scott did a good job.
Announcer
I would make the
Font weight tip when using Google Fonts
Scott Tolinski
navigation links a little bit more bold. Sorry. I'm on I'm on my slow Internet right I keep cutting Scott off. What's up? No. I was just gonna say that's a very common thing. That's a very common thing. And so, like, shout out to, like, anybody. Check your font weights. Check sure Even if the font can go to 800 or 900, make sure you're loading the 800 or 900 variant of that because, Like what you said, Wes, the the the browser will attempt to fake bold it, and that fake bold always looks a little bit off. Yeah. If if there's no wait for that, don't use it. Just use the ones that that come along. And I was just checking the
Announcer
Pacifico. There's only regular. Yeah. So there is no bold version of it, so take that off.
Announcer
Otherwise, good job. I I think this is a nice looking I'd I'm a sucker for this, like, royal dark dusty blue, rid. So big fan of that. Next one we have is Suhit dot me.
Announcer
That is an awesome domain name. Obviously, Suhit is his first name, read. And I'm gonna go ahead and say this is an example of a website that has polish that looks really, really good. So When I often, when we look at these websites, I say, ah, you know what? This the site looks good, but there's a difference between rid. Like, this is one of my 1st websites, and this website has polish. Mhmm. And I don't know if this is a template or not, but this thing looks Awesome. So whatever had been done here did Suhit did a awesome job.
Announcer
Why is the design on point? Rid. The fonts are really smooth. The colors aren't offensive.
Praise for Suhit's clean, polished site design
Announcer
The padding is done really, really well.
Announcer
Pretty much everything on this website, rid I am a big fan of it uses Interfont, which is, like everybody's using Interfont on their website right now, and I can't get enough of it. Every time I see it, I'm like, oh, what's
Scott Tolinski
rid That fun. I like that. Those fun little animations
Announcer
throughout the website. So if you hover over top of the picture of them, it It moves the photo just a little bit. Those types of things, we talk about whimsy on the podcast a lot. Those types of things add a little bit of whimsy to your website, And it makes the person who's on the website go, okay. I see what they did here. They they made themselves a website, but then they went rid 10% further and polished it up, and then they went another 10% and added these little Easter eggs into the website so that when I'm visiting the website, there goes rid Little bits of, like, oh. Oh, I can't believe they did that. They thought about me. Like, I have the most basic whimsy on my website, which is you go to west boss.com, and rid. If you have a very large screen, it says, wow. You have a big monitor.
Announcer
And, like, at least once a day, I get a email or a tweet from somebody being like, Nice, Wes. Nice.
Announcer
You know? Like, those little things are fun for someone who visits your website.
Benefits of small whimsical touches on sites
Scott Tolinski
I think, you know, besides this site looking amazing, So congrats, Suhit. This site is awesome. I think it looks great. The text is good. The spacing's good. There's a lot of, like, nice little Nice to use the the spice that you've added here works well as spice. It's not overpowering, the dish.
Scott Tolinski
You know what I you know what I really like About what you just talked about, Wes, is when I used to make music a lot, the one of the biggest issues that people had when they made music because I went to I went to music school for basically music production. And one of the the biggest issues that people would have would be that they really like this particular instrument VST or this little particular sound they like. So what do they do? Just throw it in there. Whole bunch.
Scott Tolinski
And the the professors would always be, wouldn't this note or wouldn't this thing be way more effective If you did it once in the in the course of a 4 minute long song, you did it once for about 5 seconds rather than repeatedly. Rid And that was the hardest thing to learn was that restraint.
Scott Tolinski
And while this site does have a lot of, like, really cool little things, if you compare this Some of the other ones that we've looked at that have cool little things but maybe too many cool things. This site has a lot of restraint because you have this really cool Animation stuff going on in the top, and you have some neat little things like that, the clipping of the photo and the x and things like that. Re Once you get to sections like the projects where the information is about your project, I mean, this is all about the projects here. It's it's white background, read. Bold bold text for the headings, very readable, not overly designed, not like nothing getting in the way here. It feels very much like, re Here is my my stuff. Here's here's how it is. And if you want some nice stuff, there's some nice stuff here too. Those west boss elements like you were saying, like, that wow, you have a big screen stuff, That stuff should not be there. Those Easter eggs should not be smacking you in the face. They should be, like you said, for the few people who will attempt to, like, just rid. Poking prod on the site, that's when they should show up. They shouldn't show up for every person. I know some of those little fun techniques are are really that you want to share them with everybody, but at the end of the day, I think this is a really well executed version of
Praise for restrained use of special effects
Announcer
fun stuff, but not too much fun stuff. Ready. The resume on this one is really a really good example of a resume as well. If you click through it, all the resumes here are in PDF version.
Announcer
And I'm gonna share. What do you think about that? If you had a resume, would you do a HTML version and then have an option to download PDF, or would you just go straight to PDF download?
Scott Tolinski
It defaults to opening it in the browser. Right? Yeah. Yeah.
Scott Tolinski
I would have it do that and just have a default opening in the browser. I don't know. PDF is weird in general. You know, I would probably because this is what I've done in the past. I would You know, when I You know, when I used to have my resume on my site, I have my resume on the site and not just as a PDF, but I understand, you know, keeping that up to date and everything. So yeah. No. That's a tough call. Yeah.
Announcer
This is a good example of a a resume. It's a little bit crowded, but it is a single page. I think it can have a little color added to it. But besides that, rid If I just scan it really quickly, TypeScript, React, Next. Js, Rust, r, bolded, c sharp, WebGL, rid Bolded. I can just quickly scan it.
Discussion on resume format - HTML vs PDF
Announcer
The phone number, email address is all up top.
Announcer
It says GitHub colon and then links So the GitHub and same with LinkedIn, I don't think those it seems a bit unnecessary to put the word GitHub colon in front of GitHub .com.
Announcer
We know what GitHub and LinkedIn is Because it says it in the URL, so probably he can get rid of that. That will that will, clear up a little bit of the the clutteredness.
Announcer
But, like, this is just rid. Awesome example. If if you want a good example of a resume, I think that this is it because you can click through to actual work. Like, this is not just like I I worked with a big team and made amazing projects. It's like, I built this thing with this technology, and here's the link. You know? Like, you can actually go and see it right now, which is really nice when you can possibly do that. So same thing with the even on Suhit's GitHub.
Announcer
This is something I need to do. So he spent the time and did a custom
Scott Tolinski
read me on the GitHub, which is rid I'm currently working on 123. I'm currently learning 123. Here's how to reach me. Here's my URL. So a plus. You you know what I did for my GitHub readme? I just, like, copied and pasted. Like, I I just I I came up with a bunch of words to the stuff that I do and I'm into, and I just, like, wrote them down on my thing in, like, an h two or something. And I just, like, copied and pasted those in my GitHub ReadMe. It's just like, okay. Whatever. It's this is it. Zolium note.
Scott Tolinski
That's good. Yeah. You know what else is good, Wes? What is good? LogRocket.
Scott's simple GitHub readme approach
Scott Tolinski
LogRocket is honestly one of the best rockets you can be on because this is a rocket that shows you how your errors and exceptions happen in a video replay. So you sign up for this service. You drop a a small little script on your site, kinda like a Google Analytics deal, and then what you do is you just wait for those errors to roll in because you know what? We build stuff, and errors, they roll in. They just happen whenever you build in anything. And so what this allows you to do is get a scrubbable video replay to See those errors and exceptions as they happen, and you get a you get to see the user's clicks. You get the network tab. You get the error logs. You get all of that stuff and more. If you use Redux, you even get that Redux, rid Dev tools up in there. So it is so very cool. Check it out at log rocket.comforward/ syntax, And you will get 14 days for free. So thank you so much for LogRocket for sponsoring.
Scott Tolinski
Alright. Next site here is from, Jacob.
Review of Jacob Pawlak's site
Scott Tolinski
Pawlak, p a w l a k. I don't I don't know this for certain, but that sounds kind of Polish. I don't I might be making that up.
Scott Tolinski
Honestly have no idea if that's the correct pronunciation. So, Jacob, I'm so sorry if you are 1 Polish to not having the last name of Pollak It's pronounced, so okay. All that out of the way. Let's talk about your site. A lot of really cool stuff going on here. There's an initial page loading that feels really great. It does this, like, Sliding panes thing. And it even works if you're on the page and just hit command r. It does, like, these square slide in in front and then the site's revealed. And then once the site's revealed, there's no layout shift happening. Your photo loads in, and that's, like, really, really great.
Scott Tolinski
So for me, that loading animation is a big, big win. I think it's fantastic, and it happens when you change pages.
Scott Tolinski
Although, like, let's for instance, I just rid. When to change to go to the contact page, and I don't know why, but it took a long time. And I kinda feel like this site was maybe not doing anything for a second. Rid. So I'm not sure why that page load took a long time to go to the contact section. You may want to check that out. Maybe it's just my Internet. Who knows? Either way, I think there's a lot of things that are working really well. The most part, I think the typography looks really great. The heading sizes and everything look good in terms of the the size and the spacing where you have your Your heading text, your next paragraph, your next paragraph, your next paragraph, everything looks very cohesive there. I'm not sure if I 100% love the Text transform upper case for the serif font in the navigation. I might just make that, normal, not all upper case, but, you know, that's just me.
Feedback on header structure and font usage
Scott Tolinski
We gotta be very careful about our HTML here because, like I said, everything looks great, and I think you you don't want the aesthetic of any of these things to change. Right? But you hi, I'm Jacob. That's an h one. Then you have a huge paragraph, and it's actually two, 2 paragraphs. And believe it or not, here's a little Easter egg. Wes, go ahead and double click on that main paragraph
Announcer
or that very first one under, hi. I'm Jacob. Rid I saw that when I was initially looking at it. For some reason, I'm always just when I'm visiting websites, I'm just selecting text. Is that something you do as well? Rid. Yeah. Me too. Sometimes people have, like, awful colors with their highlight. I'm like, what are you doing? Like, I can't read this when I'm Yeah. Highlighting it. So good job here. So Jacob has a little,
Scott Tolinski
white text on the white background so you can only see it when you're highlighting. He's doing this intentionally. It's a nice little Easter egg. And I I think this is the exact kind of stuff we're talking about. It's not smacking you in the face, but it's it's here for people like Wes and I. But what I wanted to talk about was this HTML here. So high on Jacob has an h one, but then you have, like, 3 straight sentences in a paragraph, and all of those are in h three.
Emphasizing proper HTML structure
Scott Tolinski
That ain't a heading, Jacob. That's, that's some body text. So just style that. That's a p if I've ever seen one. That's a body text rid have I ever seen. And and believe it or not, it was. If you go to the very next paragraph, which is even longer, that's an h four. So, Jacob, you got some h issues here where, like, These are just paragraphs, and I know it's important paragraphs, but please make them paragraphs. The headings should be headings, headings, headings, like recent projects and stuff I like. Those are headings. But then even the text under recent projects, we're here front a few of my recent completed projects for more complete that that's an h rid 4, I think that should not be an h four or an h five or whatever. That should be a paragraph as well. If you need, like, a good explanation of still, like, why these shouldn't be different heading values, go
Announcer
rid and listen to episode 354 on the surprisingly exciting world of HTML elements. Now explain, like, why you need to make sure you have
Scott Tolinski
Headings and paragraphs in the right order, not just the font size you want for each of them. Yeah. Yeah. Because, like I said, the the visually, they look as they should look, you don't wanna change that, but they should be paragraphs.
Scott Tolinski
Another thing is here, you have this really gorgeous view button that's like a circle that hovering over some of your recent projects.
Reiterating paragraph vs heading differences
Scott Tolinski
I really like it, but I kinda hate that it follows my mouse. And I would like this more if this just appeared as, like, an indicator on each image individually because I'm the type of person who uses my mouse to, like, look at things. I know that seems weird, but, like, if I'm hovering over The Inktoberfest, I suddenly cannot read that word or, like, oh, I want to hover over the very next one. So I my mouse immediately goes to the center to hover over it, and then it hovers over in that View text sits on top of the words entirely, and now I can't read it. Again, this is just a a me thing how I use sites, but I have a feeling like other people do. Yeah. I love it. Rid. Do you love it? Yeah. It doesn't just, like, use the x and y coordinates. Like, it, it uses, like, a Bezier curve to animate it in. So if you move it really quickly, it takes, like, a split ready. 2nd to catch up. Yeah. It's like a spring. Yeah. You know, maybe if it was behind the text and I, like, I could still read whatever the title was, you put a little Slight drop shadow on there and you have it sitting behind it, maybe that would work better for me. Something about it just makes it hard for me to read whatever I'm trying to read at that moment. But overall, you know, Jacob, I really like the aesthetic of the site. The slideshow in the bottom is not really super usable. You have to I guess, you have to click it to load it Or you have to click the little tiny little arrows or the little tiny little segments at the bottom. There's no, like, arrows to scroll through, and it doesn't auto scroll through. So So just either make that auto scroll through or put some little arrows on the side of it or something. Other than that, great work. I really like the,
Praise for portfolio integration on Jacob's site
Announcer
rid The portfolio section of this because if you have nice looking work using that, as part of your portfolio. So in this case, he's got some T shirts, some really nice photos that were taken, and just integrating those photos into the design is really key. So good job on that. I think that's a I think more people need to do that, especially if you work on a website that was professionally designed.
Announcer
If your website doesn't look that good, then you can use Screenshots and mock ups of the actual image.
Announcer
There's some SSL issues on some of the pages, specifically a T shirt page. It's just a a link was used For HTTP or a link to an image, just fix that because that's a that will throw a security issue on some people's browsers because it's mixed content, and that could be actual issues.
Announcer
The design of the resume looks really good, so this is another if you Want a good example of a resume? Go and check this resume out.
Announcer
There's different colors of the resume that you can download Oh. Which I think is funny.
Tips for resume design and formatting
Announcer
Initially, it was like, what are the what are the different colors mean? But I I think I got it pretty quickly.
Announcer
So it's a nice layout of the resume.
Announcer
The one thing is if you download 1 of the resumes, then the animation to the page starts, but it never finishes because, at least in my Browser, I downloaded the PDF. So it just leaves you on that gray transition.
Announcer
So maybe add, like, a timer to say, like, alright. If this thing hasn't transitioned back to the page After 4 seconds, then explicitly take it off.
Announcer
And then the last thing on the T shirts page, the Text is white, and it is overlaying a a white piece of the photo, and you just can't read it at all. So you probably have to pop a black background or a transparent background on that sucker, when you have images in the background. But overall, this is a really nice looking clean website, and it makes me feel very calm
Scott Tolinski
to read it. I agree. It also makes me calm. You know what else makes me calm is one of our sponsors, Cloudinary. Cloudinary, it makes me calm because honestly, Dealing with issues is is great, but, you know, there's so many formats today. All these formats. What am I I can't hold all these formats. I can't even, I don't know which ones to use when and where and how and what. I was like, floor mats? Floor yeah. Floor mats. Yeah. All these floor mats. What are you talking about, Wes? With these form rid. Formats.
Scott Tolinski
We have all these the ability to do so many cool things in images, but Cloudinary really makes it even that much cooler because now if you wanna serve the right image to the right browser. All you have to do is say format auto on that thing in a URL, and Cloudinary will serve up the right smallest, read. Image for that particular user, it's so very cool. And on top of that, but there's a ton of additional transformation tools. If you wanna serve up an image that focuses them on somebody's face, you wanna make an old timey sepia photo, you want West Boss in there, whatever, you could do so many cool things with forms on demand.
Funny banter about image formats
Scott Tolinski
And what's so cool about it being on demand is that the very first time somebody requests that specific image quality size, whatever, read. It creates it on the spot. And every other time, it it it saves it, caches it, and keeps it there in Cloudinary. So the next time somebody else goes to request that same image, it loads rid. Instantaneously, not that it doesn't the 1st time, but even faster than the 1st time. I've been using Cloudinary and LevelUp tutorials for a long time now, like, since we started, Even before we start the podcast, really, and it is really my favorite image hosting service. So check it out at cloudinary .com will have a link in the show notes for you to click on and let them know that you heard about Cloudinary from Syntax.
Scott Tolinski
So give it a try here, and you will not be disappointed. So thank you so much for Cloudinary for sponsoring. The Cloudinary website,
Announcer
They've been, like, rolling out little design tweaks here and there. Every time I look at it, they're doing border radius right. We're talking about border radius earlier.
Announcer
They're in design with all the border radius on it. They're, like, fully embracing the, like, heavy border radius trend, and I think they've done a good job. It looks really good.
Announcer
Last 1 we have here is Martin Van Hoof. So first of all Woah. Props to being Dutch person.
Announcer
I really like Dutch people.
Introducing Martin Van Hoof's site
Announcer
Not that I don't like other people, but I very much like Dutch people.
Announcer
This rid is I'm gonna call this the subtle flex of the skill. So Martin is obviously very talented, but there's a lot in this website that shows that Martin's got the It's not in your face. There's not asteroids be being thrown around. I'm sure Martin could do asteroids, but this is very, very subtle. Rid. Lots of attention to detail in the little bits of this website.
Praise for fast page transitions on Martin's site
Announcer
It's very fast to transition from page to page, which I think is something that people lose rid when they do these single page portfolio pages because you don't get that opportunity to wow the visitor when they switch from page to page, And it goes really, really fast. Like, go to Martin's website. It's mrtnvh.com, and just click from page to page and see how quickly It transitions, and, like, the navigation never budges. It's always there.
Scott Tolinski
It is so good.
Announcer
So good. The outline of the text, how do you do outline of text like that? What is that using?
Scott Tolinski
That's a good question. I mean, it could be using box shadow. Let's check it out. Could be SVG.
Scott Tolinski
WebKit Textstroke.
Scott Tolinski
WebKit Textstroke.
Announcer
And WebKit Textstroke is supported in Firefox. Did you know that? That rid is odd. Is text stroke is not,
Scott Tolinski
is that is that a standard yet? But why would it be WebKit text stroke? I mean, Why wouldn't they just have a text stroke for Firefox?
Announcer
They don't because text stroke is in this is from the docs. The feature is nonstandard and is not on a standards track.
Announcer
Do not use it on production sites. So what happened is that WebKit just threw it in. They put it behind offender prefix because they say you shouldn't use this, but nobody listened.
Announcer
And then everyone complains that Firefox doesn't support this rid Imaginary API called Textstroke. So they implemented WebKit Textstroke in Firefox, and now we have this standard, nonstandardized
Scott Tolinski
CSS API. And it works in everything except for Internet Explorer. So by all means, it seems fine to me. That's wild. I didn't know too much about this.
Discussion about non-standard WebKit textstroke CSS
Scott Tolinski
Martin, I love this site. I think it's fantastic. My favorite thing about it is the play that you have with the the main logo Where they're a little bit overlapped. One's outlined, one's not. You hover over it, and they go kind of on top of each other. It is very good. I love the hover states where you can see the the words. You know, there's some contrast issues here and there trying to read it, but it feels like it's Intentionally having issues in terms of, like it's like almost like a brutalist thing rather than, like, you know, I absolutely want you to read this. It's it's almost like the words And those situations are are less important. So, you know, I don't necessarily mind that aspect of it. There's a lot of little even subtle things, like when you're navigating from page to page. It says front end developer, whatever that little fade in that it does is a little just super nice.
Feedback on logo hover animation on Martin's site
Scott Tolinski
Every single thing on this site, I think, is very nice. So Shout out to you, Martin. I think this is a fantastic site. Looks great. Feels great. Yeah. One thing here I got beef with is the email button.
Announcer
So if you wanna email him, I have never I have not set up my, like, email thing. So rid I when I hover over it, I immediately look to the bottom left and say, what is this email? And it's not in there.
Issue with contact form on Martin's site
Announcer
So How do I know what your email is? Mhmm. So I click it, and then it opens up Chrome Stable, which is not a browser I ever use, And then tries to make me sign in to, whatever. And I have pretty sure I have that set up. It might be because it's trying to dodge, like, spam filters where it doesn't explicitly show it, but I would much prefer that just be a mail to link. And then you right click copy email address,
Scott Tolinski
but it's probably spam now that I'm thinking about it. Yeah. I have some beef too with the headings now that I've checked your HTML. I'm sorry, Martin. I love the aesthetic of your site, but there's a lot of heading issues. We're like, let's see. I'm trying to get this to load here. We're like things like your rid. If you go to projects, each one of your individual projects is all in an h one. That's a no go, or at least half of it is an h one. It's kind of weird. It's almost like you were using the the heading tags for their visual aesthetic rather than, like, what they are. Like, if you have a project, some of them will be, like, The h one is the first part of it, and then an h two is the 2nd part of it for the individual project.
HTML heading structure should match content hierarchy
Scott Tolinski
But then you even get into the I'm trying to look through your here. Hold on one second.
Scott Tolinski
Let's do a a find for h twos. For instance, on the project page Let's see.
Scott Tolinski
Yeah. Each one of your projects is in h two. H one, how many h ones are there? There's a whole bunch of h ones in here when you really just want 1 per page. Just keep that in mind. Just basically, go through, and I would just say 1 h one per page, most likely 1 h two per page, And then the individual projects should probably be in h three. But yeah. None the other than that, I mean, aesthetically, this thing is rock solid. So Just fix up that HTML. Take a take a good look at it, and this thing looks great.
Announcer
Good example of a minimalist site, I would think, Because sometimes people people think a minimalist site is just a a link to their email, and then they get a 100 rid on, LighthouseScore.
Announcer
But this is an example of a real website but still maintains a minimalist look. So great job.
Announcer
That is it for all of our portfolios and websites to review. Hopefully, you enjoyed that. We don't have a way right now for people to submit them. I know that there was a couple people who said, can I submit mine? And I said, absolutely. Let me know when it's finished. And then they sent them to me, and then I lost them. So I apologize if you sent it to me. We'll make some sort of submission form or whatever at some point so you can submit yours. If you enjoyed this, Let us know at Syntax FM. We're still trying to hone in on what this syntax highlight, looks like. So if there's parts you do or don't like, let us know, And, we'll take that into account for the next one. Yeah. I think at the end of the day, we're just trying to provide
Goal is to provide helpful portfolio feedback
Scott Tolinski
value for the people who would like some notes or feedback on their work. They don't know What it is or why they're they're not getting maybe the interest that they're wanting to when they're sharing their portfolio to potential employers or things like that. Also do wanna call out some some really, really shining examples like Martin said are just, you know like, if I were to see that in my You know, somebody were to send me that as, like, a potential candidate, I would be interested because I think it's it's very, very good work. Right? It's important that that we show all all, all kinds of things. And, again, if we have anything critical to say about your work, we're we're here to help right now, and that's the whole goal of these episodes here is to not only help you, but to get people thinking about what are the types of things that different job reviewers or portfolio reviewers are going to be looking at, the the types rid. The holes that we can poke through it before somebody else is poking those holes into it while you're at a a place of a little bit more higher stakes. Rid So that is it for this syntax highlight. Let's get into the sick picks part of the show where we pick things that we find to be pretty darn sick. Wes, you have any sick pics? Hit them to me. I've got 1, and this is for anyone who's connecting
Announcer
any sort of wires that need to be Unconnected at some point. Woah. Yeah. Generally, when you're connecting 2 wires together, you use what's called a wire nut. Or in Canada, we call them morets, which is a very weird word. It's like a French word, I'm assuming.
Wes' sick pick - lever wire connectors
Scott Tolinski
I wonder what that means. I've never heard that word here in the States, but that could just be me. You've never heard that? Moret?
Announcer
Moret. Yeah.
Announcer
I don't know. Rid That's definitely Canadian. Canadian often has weird words for things.
Announcer
Anyways, those things are kinda hard to get together and and whatnot.
Announcer
And I recently bought a big pack of these things that are called Wago connectors or, like, lever nuts, they're often called. Rid The Europeans listening to this website are going to laugh because this has been a standard in Europe for forever, and this is just how you connect rid 2 wires together in Europe. But in Canada, we just jam them into this little plastic thing and turn it. Oh, yeah. That's what we do. Yeah. But rid You can get these, like, little lever nuts where you you put the wires into this hole, and you put the wire down, and they are nice and tight. And it's very easy to undo them rid And if you need to, like, rewire something so I'm doing sprinklers right now. And every single time that you twist the wire on and untwist it, it's kinda It's kinda bad for the wire, and you could break it. So these are really, really hand handy lever nuts. You can find them at your Local Home Depot or any anywhere you're buying your electrical supplies.
Scott Tolinski
These things look cool. Yeah. I never feel super confident
Announcer
Yeah. Because, like, when wires, like, heat up and cool down, they're constantly moving, and over time, they those wire nuts can fall off. So rid These seem to be it's funny that, like, the the way we do things in North America is often never the best way, rid And, it's funny when when we stumble upon something that they're doing in Europe and be like, these things are way better. It's so much easier, and it's so much faster, and You could pack them into a box much more nicely.
Scott Tolinski
Yeah. It's very fun. It's funny, Wes. I know you've been doing a lot of sprinkler work. Yes.
Scott Tolinski
Rid We we were selling our house. Whoever put the the stake in to to have the for sale sign in rid. Punctured our water line our sprinkler line in one of our zones. I know. And I didn't know. So get this. So it's been real. Like, we've had Several consecutive a 100 degree days, and I did not notice. But I just noticed because we I water, via my smart device. It, like, does, like, rid. Water at sunup and sundown, and the the front yard zone number 3 was just getting roasted. And I was thinking, this is a high sun zone. It's probably just getting too much Let me just increase up the water here. And it wasn't until, like, 3 days in, I noticed that, you know, only the the grass around the sign was green because that's obviously rid. Was leaking, and I was like gonna have, like, a sinkhole in your front yard. Oh my god. I was so annoyed. I called them up. I was like, can I pull the sign? I pulled the sign up. I had to do some rid. Some major sprinkler repair myself, this weekend. But it's funny, you know, you get chance to teach Landon a little bit about, like, here's how we chop up the grass, and here's how we Connect to the line and do a new line. I know you've been in that world, but, had a little detour into sprinkler land. Okay. My sick pick is going to be a podcast I've sick picked before, but the 2nd season of this is actually, just Finished, and it was fantastic.
Scott Tolinski
So this is the podcast of what had happened was by Open Mic Eagle in the 1st season was with Prince Paul, who's a legendary producer.
Scott's sick pick - What Had Happened Was podcast
Scott Tolinski
And this season was on LP, who was also a legendary producer, but different aesthetic than Prince Paul. I've been a big fan of LP forever and ever since high school for a very, very long time.
Scott Tolinski
And this covers, you know, everything from his early days of company flow to when he was, having DefJunks, which is a hugely influential Independent music label. And then all the way through even into there's an episode on basically each of the Run the Jewels albums, which have become rid. Just hugely celebrated. So, you know, I I've seen LP in concert many, many times throughout his career. He's one of my favorite artists. And hearing the stories and the intentions behind this, I always felt like he was a smart guy based on his music. You know, some musicians, you can just say, like, I think this this is all very calculated. It's all very well thought out. Yeah. I almost didn't even realize just how smart and how calculated and well thought out it all was, whether or not his his record label or even the release of his album's Hugely, hugely influential musicians. So what had happened was is a fantastic podcast. They do just like an hour long interviews, rid Talking about different stages of different, producers and their their careers. So give it give it a listen. If you haven't listened to the 1st season As well, the season with Prince Polly talks about all the the De La Soul albums and the creation of those handsome boy modeling school and and, I mean, what a a a treasure of a podcast. So check it out. What had happened was alright. Shameless pit, shameless plicks? Shameless pics? Yeah. Shameless pics, where we plug things that we worked on. Now I have a course that's coming out on Svelte components where we take several rid. Of components that you need in just about every site, and we break down how to make them sort of good, better, best type of deal.
Scott Tolinski
It's almost like, Wes' like rid 30 where you're picking, you know, several different projects, but to a much much smaller degree because we're talking about Svelte foundational stuff where we're teaching how to work with Svelte actions. We're teaching how to, like okay. Here we have, like, a search filter. Alright. The basic version of the search filter is, yeah, type in a text box and it filters. Well, then what happens if we added some animations or some input on focus on blur? We tweak the CSS. We make this thing a lot nicer. And we just do that with several different components whether it's modals, toast messages, those types of deals. So check it out at leveluptutorials.comforward/pro.
Scott's shameless plug for Level Up Tutorials Svelte course
Scott Tolinski
Sign up today and save 25% if you sign up for the year. You'll get access to that along with any other Svelte course content that we have for you, Which is let let me tell you, it's a lot right now. We're doing a lot of svelte stuff. We're getting svelte over there. Level up tutorials. So if that's something you're interested in learning, we got you covered. I will shamelessly plug
Announcer
all of my courses. If you wanna check out Learn JavaScript, Full Stack, Advanced React, and GraphQL, re Rec for beginners, CSS Grid, learn node. You name it. You got it. Westboss.comforward/courses.
Wes' shameless plug for his courses
Announcer
I'm running a summer sale Right now, it is hot hot hot. Big big sale on all of my courses.
Announcer
You can use syntax for an extra $10 off on top rid of the current sale. So check it out. Westboss.comforward/courses.
Scott Tolinski
The course is so high. You're gonna need to put some, re What are you at all day? Sunscreen.
Scott Tolinski
Fire extinguisher. Yeah. Some sunscreen on there. I was trying to work on the on top top deal, but I couldn't I couldn't pull it together. So, well, that's it for syntax this week. We will hear from you or hear from us next week. I don't know what we're talking about, but it's gonna be awesome. So It's already recorded, and we could see. Yes. But I don't have that open, Wes.
Announcer
And parcel 2.
Scott Tolinski
And parcel 2. Lumi, I'm saying it rid now. Thanks to West Boss's TikTok show. Peace out.
Announcer
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.
Announcer
Rid.