The Coolest Websites We Found This Month  Hey, what's up? Today we have a gift swap where the three of us have brought in a website for showand tell that we're going to be uh we're going to be showing the team something that we found that we think is cool, some neat techniques, and I've got one uh for the team today. This has been on my radar for a little bit. It's a design studio, uh Lou Studio, and they're the alchemists of the internet. I I really like this site for a number of reasons, but there's some cool techniques going on here. The site looks really great. There's a handful of like really lovely techniques going on and just cool animations and canvas things. But as a fan of theming insights, this little light day slider to me is one of the cooler theming systems I've seen. And they have like this is the night theme and this is the day theme. And it really only affects this main billboard, but it's also modifying these buttons. You can't really even tell with this background in here, but like the the colors for these buttons and this button and stuff are changing. They're doing it in a really odd way, too. So, one of the cool things here is that in here they have the canvas, which is the background, but if you get rid of the canvas, you can see this kind of like displacement kind of map, but it's not displacement map. It's uh like a the cloudy kind of uh color tinting that's going on. And this actually lets you see a little bit more of like when I change this up here, it's actually tinting all of these buttons and stuff. So, it's not just changing the canvas. It's actually doing some interesting stuff. But the oddest thing I found is that they're having the same exact image loaded four different times just in a different color. and they are changing the opacity of all of them to blend the different ones together. Even when they have the the themes on top of things, the way they're doing it is they're not just changing color values. They have a color overlay of four different color overlays. And when you do that slider, it's changing the opacity values on all of them rather than just manipulating and setting values. So, I thought that was like really cool and a really interesting technique to be able to get like really kind of depth and color. >> I love it. I think we should normalize uh more than just night and dark theme like there's an in between. That's pretty cool. >> There's dusk. >> So, there's a video element in here, Scott. Did you see that? >> Yeah. What's interesting about the video element, Wes, is that if we >> Well, that's the blobbyiness. >> If we hide the video element, >> notice how it all just kind of it gets a little bit more chill, I think, is the best way to describe it. If we bring that back. >> And then they're using mix blend mode overlay to blend them together. Ooh. Okay. >> So that video isn't done with a shader. It's done with a a video which is a cool technique too because it's not all just like one big canvas. Right. There's another cool way they do that down here with a canvas uh with these clouds because you see this text kind of go in and out. That's an overlay. That is in fact a canvas overlay on top of >> all this stuff. And if you get rid of that, the cloudiness kind of goes away and the rest is just text colors. So there's a lot of fun little things like that. There's a lot of usage of canvas. But on top of that, even just like the general buttons, the general uh overlays. Everything on the site looks really great. In fact, I really loved one of this effect right here. I was thinking we could do this for a sin hack sometime where we could compete to do this little like fade and blur as this text comes in. I think it's a cool transition right here. Wow, >> that's I wonder why they're doing it as a video though because like it it seems like that blob would be relatively easy like generated in canvas. >> Yeah. >> And then like doing the the blend modes all in canvas space is certainly way more performant than using like CSS blend mode. >> It's interesting. Yeah, I wish I I knew the answer to that, but I think this is a cool site. Yeah, check this out. We'll have a link to this available. You can paw through it. I think it's a lot of neat stuff going on. >> All right, I've got a cool website for you, and that is the Apple App Store. They just recently launched a webbased version of the App Store, which is really neat. And we actually did an entire video diving into it because they they famously leaked all of their source maps, which allowed us to see the the spelt code behind that. But, uh, turns out Apple's a little ligious, so we are not going to release that video. But there are several things that are simply just findable via dev tools which I think are really neat. So I'm going to be focusing on this like scroll slider right here because it's made up with several I I would say new CSS features. So this slider of all of the images here is built it's just a UL with a bunch of li inside of it and it's using CSS scroll snap. So, as you scroll it, you can see that it snaps to the closest version of each of the thumbnails. And that's really nifty because like carousels, like JavaScript carousel libraries were this absolute massive thing. And with CSS scroll snap, you can do so much. And you likely don't need a carousel library anymore. So, if you take a look at this right here, you can use DevTools to turn on scroll snap and it will show you exactly where each of the items starts. Um, they are using scroll padding. Um, so that when you do scroll it, you see a little bit of the the one right here, right? It's not just like a clean only show me what four at a time. It's actually showing you three full ones and then it's cutting off 25 pixels of the last one, showing you 25 pixels of the first one. >> Yeah. So, scroll snap super underrated, right, Scott? Like, you've been you've been using it like crazy lately. >> Yeah, I've been doing I've been I've been doing tricks on it. I it it's really cool stuff. Uh there's there's like some amazing amazing stuff that you can do with scroll snap and I feel like people are just really sleeping on it. Like even just doing a simple like Instagram style vertical swiper reel is just effortless with like two run CSS. um these arrows here which allow you to click next and and previous on each of them. Those arrows are using CSS anchor positioning. And I thought that was kind of interesting. So, normally with these arrows, what I would do is I would put the arrow inside of the carousel or I would wrap the entire carousel in a div and then the height of the carousel would probably be defined by like the height of the the contents inside of it. And then I would position these arrows. you know, like top 50% and then you push it back up uh half with translate Y. Always I always have to do that when I'm doing X and Y. So, what they're saying here is they're saying top anchor based off of the first piece of artwork. You can give an element a anchor name and then you can position items based off of those elements somewhere else in the DOM. And then you're saying 50% from the top of that. And then you want to you want to base that off of the center. So CSS anchor not something I've seen in many websites let alone such a big website like an apple apple.com website. So they have seemingly used a lot of the new CSS features and one more of them I thought this was pretty neat is some of the items in this carousel are videos and the video container is using container queries and I was like hm I wonder why they're doing that. So the video container itself >> and if you look into it the size of these buttons here are based on how wide the container is. Normally what you would do is you would do like a media query and say when the screen is is so big make them bigger. But this video can be in this case it's a vertical video but in this case right here this is like a horizontal like a 169 video. And you can see the buttons in here are slightly bigger than in here. So by using a container query, you can say based on how big this player is, because the video is going to size the container itself, not the actual um device itself. So based on how big this container is, I want to make the buttons smaller or bigger. Um, and I dug into it a little bit further. we take a look maybe if I inspect element on one of these buttons here the height of the button images are this variable called button size and if you click on that you'll see that it says at container video max width of 500 pixels so when the container is at a maximum of 500 pixels then change the button size variable to 24 pixels you could even go further and use the CQI um and CQW CQ8 H those are container query and you can make it a percentage of it but in this case they're simply just saying all right when it's when it's 500 pixels or what is max or smaller then make the buttons slightly smaller and I thought that was a great use case of container queries cuz it's not contextual for the screen size is contextual for how big the the video player is. Yeah, man. Anchor, scroll, snap, container queries, such massively underrated APIs. Um, it's so funny because I've been using these more and more myself lately. And um, even having like the container query units, the CQW, CQH, those are just like awesome to use and uh, be able to style get the width of the container itself on something. >> Mhm. >> Yeah. I like that they're using uh, supports queries, too. So I'm in Firefox that I like technically Firefox supports top anchor but whatever version I'm using for whatever reason it doesn't kick in. >> So there's like a supports not for certain properties and then um and it's it's still working in my browser. So even though they're using some of the latest stuff they're they have some fallbacks which is nice. >> Yeah, >> it I did dig through it and they're using some hacks to detect old versions of Safari in here as well. supports not font Apple system body. There's there's all these like little tricks that they use to detect older versions of browsers and fall back to them. Yeah. What's so cool about this is that some people say these like we get comments all the time, these APIs are great. I can't use them. Folks, if if Apple is able to ship them on their store that everyone is using, you are able to use this stuff. Uh it's just a skill issue at that point, right? All right, CJ, what do you got for us? >> Okay. Uh Scott actually put this site on my radar and I've just started to uh dive into it, but it's from the OBS agency. Their tagline here is books that inspire, knowledge that endures, design that lives beyond. I don't know if they're a design agency or they design books, but this is their site. And this parallax scroll, first of all, is really cool. Like as you scroll, you can see that some of the elements behind it are scrolling a little bit faster, a little bit slower. I really like just the aesthetic like this. paper design. Like there's like cardboard on top and like this is like your punch paper. Um, and then they have this really cool feature where it's like it might not seem that useful that we can't read the stuff behind this this element, but if we drag it on top, they'll reorient and now we can actually read that section of the page. So, this is like a really cool metaphor for like cuz like they're a book company and so they made a website kind of work like a book and that it's like actually stacked and layered. They have this cool um font animation as or sorry mouse animation as you kind of navigate around. And if you use the navigation bar at the top, it also does the animation to bring that page uh on top of the others. So this is super sick. I'm just now diving into how all of it works. Um and for me seeing the parallax scroll, it's really just a matter of changing the Y value um on a transform. Let's see. Like if we look at this top element here, we can see that as I'm scrolling, its containers translate 3D is changing the y-value. So there's some JavaScript behind the scene that's actually setting that y-value. But if we take a look at the one that's underneath it, similarly, JavaScript is changing its transform y-value, but at in this case at a faster speed than the one that's on top. It's not all CSS. There is some JavaScript behind the scenes making that stuff happen. And yeah, overall cool site. >> We've gotten some comments on the Lando video. It's like sites should be readable and usable. But like man, there's room for art on the internet, folks. And this is art. It is still readable. It's still usable. It It is pure art to me. This is just a >> a different application. It's not anything I've seen. I've seen layers. I've seen things stacking. I've seen animations. But like the way they've done this all is so novel and interesting. and they've leaned in kind of like a >> it's not a skumorphic design aesthetic, but it is like a skumor. They they use like real textures and real uh lines and shapes and things while also still being kind of >> graphic and it it it feels very cool to me. Yeah, I I've really been loving this kind of collageish style even though this isn't really collagey as much, but like that that real paper aesthetic has been really cool. We get that a lot where anytime you show anything cool, people are like, "Just give me a text document with all the info." >> Yeah. >> There certainly if this was like the subway website where I'm trying to find like what time the next transit comes, I would be pissed this like I just want to get the date. I do not care about any of this. But for a lot of these other websites where it's an experience, you want to you land on the page and you're trying to flex a little to show off the vibe of your brand and to make the person stop and realize like, oh, this is actually a really nifty it's it's marketing, right? And of course, you still have to be able to consume the information, but how that is portrayed to you and how you actually experience the website is is really important to to a brand. And they certainly can be extremely obnoxious, but you got to be careful with that cuz you can piss people off so quickly. >> Yeah, >> definitely. And and I think Scott's spot on like this. This for me walks the line. It's like it's aesthetically pleasing. It's interesting. And if you leave the site for long enough, there's there's a a DVD logo uh animation that kicks in. >> Oh, yeah. >> I feel like the the Lando site is on the far end of hyperdesign. Kind of hard to use. Maybe doesn't work on some devices. I feel like this is a good middle ground of like they made it their own, but it's still usable. You can still get the info. Yeah. I love this DVD logo screen. >> Yeah. And and even the push back like on uh not to push back on you, but like the comments that were like, I just want the info. Like if you're going to the Landonorris.com website, like what info are you looking to get out of there? If you're looking to get like who he is, you go to his Wikipedia page. if you're like, you know, it the website is meant to be like a a celebration of this this race car driver and his stuff. It's supposed to be just like a cool thing. So, yeah, I I don't understand that opinion, but hey. >> Yeah. And I guess the last thing is I was trying to figure out how they did the paper textures because uh recently I started playing around with CSS blend modes and so like you could take a a texture with some transparency in it and like then blend it with the background to make it look like paper. It does. I can't seem to find it in the dev tools, but it does seem like they actually just have an actual paper image that they're using behind it, but that would be a cool effect as well is because then you could apply it to like any colored paper. You could you could have your cardboard textures, your your stock textures, um, and then use blend modes to apply it. But it looks like these are actually just separate images. >> Yeah. Sick. I love this. Wow. What a swap that was. Folks, if you have any cool stuff that you're seeing around the web, I know we're all seeing cool stuff. I actually my list of cool stuff is miles long, but if you're seeing cool stuff, you want to see us dive into it, break it down, or explain it or even just check out some neat techniques or something you want to uh bring to the class and show, hit us up. Leave a comment below in this video. Let us know what you think, what you're finding that's cool, or do you hate it all and you just want to see a blank ass website? So, peace. >> Peace., The Coolest Websites We Found This Month, YouTube, 01kcc9be1fgsgqfkxfykhsj66a.