The Coolest Websites We Found This Month - CourtneyR.dev's 2nd Brain

The Coolest Websites We Found This Month ![rw-book-cover](https://img.youtube.com/vi/YjIM4HYSQaM/maxresdefault.jpg) 🔗 **Source:** [The Coolest Websites We Found This Month](https://www.youtube.com/watch?v=YjIM4HYSQaM) > [!note]+ Document Notes > tags: [web-design, css-techniques, frontend-development] > author: Syntax > source: YouTube > reference: https://www.youtube.com/watch?v=YjIM4HYSQaM > date created: 2024-01-15 10:00 > > # 🏷️ Title: The Coolest Websites We Found This Month >  ## 🧰 Action Inbox - [H1] Explore CSS scroll snap for carousel alternatives — replace heavy JS libraries #performance - [H2] Implement CSS anchor positioning for responsive layouts — modern positioning technique #css - [H3] Experiment with container queries for component-based sizing — contextual responsive design #responsive ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - [Lou Studio](https://loustudio.com) - [Apple App Store Web](https://apps.apple.com) - [OBS Agency](https://obs.agency) ## 📝 Summary - The Syntax team showcases three innovative websites demonstrating cutting-edge CSS and design techniques - Lou Studio features advanced theming with canvas overlays and creative color blending methods - Apple's web App Store implementation uses modern CSS features like scroll snap, anchor positioning, and container queries - OBS Agency creates an artistic book-like experience with layered parallax scrolling and draggable elements - These examples show how modern CSS can replace heavy JavaScript libraries while creating engaging user experiences ## 📖 Main Content The video presents a "gift swap" format where three developers share websites that showcase innovative web techniques. Lou Studio demonstrates sophisticated theming using multiple image overlays and canvas effects rather than simple color value changes. Apple's App Store web version serves as a production example of modern CSS features including scroll snap for carousels, anchor positioning for layout, and container queries for responsive components. OBS Agency creates an artistic experience that balances visual innovation with usability, using parallax effects and draggable layered elements to mimic a physical book interface. The discussion emphasizes that major companies like Apple are successfully shipping these modern CSS features, making them viable for broader adoption. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/YjIM4HYSQaM?t=0) — Introduction to website gift swap - Key idea: Three developers share cool websites with innovative techniques - Evidence: "Today we have a gift swap where the three of us have brought in a website for show and tell" #### ⏱️ [00:30](https://youtu.be/YjIM4HYSQaM?t=30) — Lou Studio theming system showcase - Key idea: Advanced day/night theming using multiple image overlays instead of color changes - Evidence: "They're having the same exact image loaded four different times just in a different color" #### ⏱️ [02:15](https://youtu.be/YjIM4HYSQaM?t=135) — Canvas and video blend techniques - Key idea: Multiple canvas overlays and video elements with CSS blend modes create complex effects - Evidence: "They're using mix blend mode overlay to blend them together" #### ⏱️ [03:45](https://youtu.be/YjIM4HYSQaM?t=225) — Apple App Store web version introduction - Key idea: Apple launched a web-based App Store using modern CSS features - Evidence: "They just recently launched a web-based version of the App Store, which is really neat" #### ⏱️ [04:30](https://youtu.be/YjIM4HYSQaM?t=270) — CSS scroll snap implementation - Key idea: Modern carousel functionality without JavaScript using CSS scroll snap - Evidence: "With CSS scroll snap, you can do so much. And you likely don't need a carousel library anymore" #### ⏱️ [06:00](https://youtu.be/YjIM4HYSQaM?t=360) — CSS anchor positioning for arrows - Key idea: Positioning carousel arrows using CSS anchor positioning relative to content - Evidence: "CSS anchor not something I've seen in many websites let alone such a big website like Apple" #### ⏱️ [07:15](https://youtu.be/YjIM4HYSQaM?t=435) — Container queries for responsive buttons - Key idea: Button sizing based on container size rather than viewport using container queries - Evidence: "Based on how big this container is, I want to make the buttons smaller or bigger" #### ⏱️ [08:45](https://youtu.be/YjIM4HYSQaM?t=525) — Progressive enhancement with supports queries - Key idea: Apple uses feature detection and fallbacks for modern CSS features - Evidence: "They have some fallbacks which is nice" with supports queries for older browsers #### ⏱️ [09:30](https://youtu.be/YjIM4HYSQaM?t=570) — OBS Agency artistic design introduction - Key idea: Book-inspired website with layered, draggable elements and parallax scrolling - Evidence: "They made a website kind of work like a book and that it's actually stacked and layered" #### ⏱️ [10:45](https://youtu.be/YjIM4HYSQaM?t=645) — Parallax implementation details - Key idea: JavaScript-controlled transform values create parallax effects at different speeds - Evidence: "JavaScript is changing its transform y-value, but at a faster speed than the one that's on top" #### ⏱️ [11:30](https://youtu.be/YjIM4HYSQaM?t=690) — Balancing art and usability discussion - Key idea: Artistic web experiences can coexist with usability when appropriate for the context - Evidence: "There's room for art on the internet, folks. And this is art. It is still readable. It's still usable" #### ⏱️ [13:00](https://youtu.be/YjIM4HYSQaM?t=780) — Modern CSS adoption validation - Key idea: If Apple ships modern CSS features in production, they're ready for broader adoption - Evidence: "If Apple is able to ship them on their store that everyone is using, you are able to use this stuff" ## 📚 References - [Lou Studio](https://loustudio.com) - [Apple App Store Web](https://apps.apple.com) - [OBS Agency](https://obs.agency) - [CSS Scroll Snap Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap) - [CSS Anchor Positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning) - [CSS Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries) ## 🗣️ Paraphrase - Lou Studio demonstrates advanced theming by loading multiple versions of the same image in different colors and blending them with opacity changes rather than simple CSS color modifications - Apple's web App Store showcases production-ready modern CSS including scroll snap for touch-friendly carousels, anchor positioning for contextual layouts, and container queries for component-responsive design - OBS Agency creates an artistic book metaphor using layered parallax scrolling and draggable elements while maintaining usability and readability ## 📰 Newsletter 🎨 **Modern CSS Takes Center Stage in Production Websites** This month's website showcase reveals how cutting-edge CSS features are moving from experimental to production-ready. Apple's web App Store demonstrates that scroll snap, anchor positioning, and container queries aren't just developer toys—they're powering real user experiences at scale. **Key Takeaways:** - **CSS Scroll Snap** can replace heavy JavaScript carousel libraries with native, performant scrolling behavior - **Anchor Positioning** enables contextual layouts without complex wrapper divs - **Container Queries** allow truly component-based responsive design The artistic OBS Agency site proves that innovative design and usability aren't mutually exclusive when the context calls for an experience rather than pure information consumption. **Try This:** Replace your next carousel implementation with CSS scroll snap—you might be surprised how much JavaScript you can eliminate while improving performance. Resources: [Learn WordPress](https://learn.wordpress.org/), [Developer Docs](https://developer.wordpress.org/), [WP-CLI](https://wp-cli.org/) ## ✅ Action Items #### WordPress - Core: Evaluate scroll snap for media gallery navigation improvements - Themes: Create design patterns showcasing container queries for responsive components - Design: Develop accessibility guidelines for artistic/experimental themes - Documentation: Document modern CSS feature adoption strategies for theme developers - Community: Share examples of artistic themes that maintain usability standards ## 🧪 Hypotheses - Modern CSS features like scroll snap can significantly reduce JavaScript bundle sizes while improving performance - Container queries enable more modular, component-based responsive design patterns - Artistic web experiences increase user engagement when appropriately matched to content context - Progressive enhancement with feature detection makes modern CSS features viable for production use ### 📊 Methodology - Performance testing comparing CSS scroll snap vs JavaScript carousel implementations - User experience studies measuring engagement with artistic vs minimal web designs - Browser compatibility analysis for modern CSS features across target audiences ### ❓ Questions - How much JavaScript can be eliminated by adopting modern CSS features like scroll snap and anchor positioning? - What are the performance implications of multiple image overlays vs CSS color manipulation for theming? - How do users with disabilities experience these artistic, animation-heavy interfaces? ### 🔮 Future Research - Comprehensive browser support timeline for CSS anchor positioning - Performance benchmarks for canvas vs video vs CSS for animated backgrounds - Accessibility best practices for parallax and animation-heavy interfaces ### 💡 Implications - Practice: Modern CSS features can replace JavaScript libraries, reducing complexity - Performance: Native CSS features typically offer better performance than JavaScript equivalents - Design: Balance between artistic expression and accessibility requires careful consideration - Education: Developers need training on modern CSS features to avoid over-reliance on JavaScript ### 🧠 Learning Styles Assessment Reading level estimate: 10th Grade (technical content with clear explanations) #### 👀 Visual learners - Present: Live website demos, visual code inspection, side-by-side comparisons - Improve: Diagram showing CSS feature compatibility timeline #### 🔊 Aural learners - Present: Detailed verbal explanations, discussion format - Improve: Audio-only summary of key CSS features #### 🗣️ Verbal learners - Present: Clear definitions of technical terms, analogies (book metaphor for OBS site) - Improve: Glossary of modern CSS features #### 🧩 Kinesthetic learners - Present: Live code exploration, interactive demos - Improve: Step-by-step tutorials for implementing each technique #### 🧠 Logical learners - Present: Technical analysis, feature comparison, performance considerations - Improve: Decision matrix for when to use each CSS feature #### 🧑‍🤝‍🧑 Social learners - Present: Team discussion format, shared discovery - Improve: Community challenges to recreate effects #### 🧘‍♀️ Solitary learners - Present: Individual code exploration, self-discovery elements - Improve: Personal experimentation prompts #### 🌿 Naturalistic learners - Present: Real-world production examples, practical applications - Improve: Industry adoption patterns, ecosystem evolution ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Standard HTML structure underneath visual effects - Improve: Ensure ARIA labels for interactive draggable elements #### Keyboard navigation - Present: Basic navigation maintained in examples - Improve: Ensure all interactive elements are keyboard accessible #### Contrast and readability - Present: Text remains readable in artistic designs - Improve: Test contrast ratios across all theme variations #### Text resizing and reflow - Present: Responsive design principles maintained - Improve: Test artistic layouts at 200% zoom #### Media and captions - Present: Video content is decorative/atmospheric - Improve: Provide text alternatives for decorative animations #### Motion and animation - Present: Multiple animations and parallax effects - Improve: Respect prefers-reduced-motion settings ### 🌍 DEIB Assessment #### Cultural breadth - Present: International examples (Lou Studio, Apple global) - Improve: Include examples from diverse geographic regions #### Inclusive language - Present: Technical terminology clearly explained - Improve: Avoid assumptions about prior CSS knowledge #### Neurodiversity support - Present: Multiple learning approaches in video format - Improve: Provide structured text alternatives to video content #### Representation - Present: Technical focus with multiple perspectives - Improve: Include diverse voices in technical discussions #### Accessibility considerations - Present: Discussion of balancing art with usability - Improve: More detailed accessibility analysis of artistic sites ### ✅ Logical Validity #### Strong reasoning - Inductive strength: Good examples support claims about modern CSS viability - Practical reasoning: Sound advice about when artistic design is appropriate - Evidence-based: Uses concrete production examples (Apple) to support claims #### Fallacies - Appeal to authority: "If Apple uses it, you can too" - somewhat valid but oversimplified - False dichotomy: Implies choice between "artistic" vs "usable" when spectrum exists #### Tone of voice - Overall tone: Enthusiastic and educational, encouraging experimentation while acknowledging practical constraints ### 🛡️ DARVO Analysis - Deny: No denial patterns present - Attack: Mild pushback against "just text" preferences, but contextually appropriate - Reverse victim/offender: None identified - Emotional cues: Positive enthusiasm for technical innovation, balanced perspective on usability ## 🎯 Conclusion Modern CSS features are transitioning from experimental curiosities to production-ready tools, as evidenced by Apple's implementation in their web App Store. The key insight is that scroll snap, container queries, and anchor positioning can replace complex JavaScript solutions while improving performance and maintainability. However, the artistic examples also demonstrate that innovation must be balanced with accessibility and user needs—there's room for both functional minimalism and expressive design when appropriately matched to context and audience expectations. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad Purpose: Stage CEE units that become Literature notes. Split level: H3 ### [H1] CSS scroll snap replaces JavaScript carousels effectively > [!quote] [The Coolest Websites We Found This Month](https://www.youtube.com/watch?v=YjIM4HYSQaM) by [[Syntax]] via [[YouTube]]. Published 2024. Accessed 2024-01-15. > "With CSS scroll snap, you can do so much. And you likely don't need a carousel library anymore." Production evidence from Apple's App Store implementation demonstrates viability. [view highlight](https://youtu.be/YjIM4HYSQaM?t=270#H1) #xref #css-features ID:rw_001 ### [H2] Container queries enable component-responsive design patterns > [!quote] [The Coolest Websites We Found This Month](https://www.youtube.com/watch?v=YjIM4HYSQaM) > "Based on how big this container is, I want to make the buttons smaller or bigger." Enables sizing based on container rather than viewport dimensions. [view highlight](https://youtu.be/YjIM4HYSQaM?t=435#H2) #xref #responsive-design ID:rw_002 --- ### 🔖 Atomic Split Pad (Zettel Candidates) Purpose: Promote reusable claims into Atomic notes. Split level: H4 #### [Z1] Modern CSS features reduce JavaScript dependency - When browser support allows, native CSS often outperforms JS solutions - Evidence from Apple's production implementation at 4:30 - Links: [[CSS-Performance]] [[Progressive-Enhancement]] #### [Z2] Artistic web design requires contextual appropriateness - Art sites vs utility sites have different usability requirements - Balance innovation with accessibility needs - Links: [[Web- --- ## Full Transcript [00:00] Hey, what's up? Today we have a gift [00:02] swap where the three of us have brought [00:04] in a website for showand tell that we're [00:07] going to be uh we're going to be showing [00:08] the team something that we found that we [00:10] think is cool, some neat techniques, and [00:13] I've got one uh for the team today. This [00:16] has been on my radar for a little bit. [00:18] It's a design studio, uh Lou Studio, and [00:22] they're the alchemists of the internet. [00:25] I I really like this site for a number [00:27] of reasons, but there's some cool [00:29] techniques going on here. The site looks [00:33] really great. There's a handful of like [00:34] really lovely techniques going on and [00:37] just cool animations and canvas things. [00:40] But as a fan of theming insights, this [00:43] little light day slider to me is one of [00:46] the cooler theming systems I've seen. [00:49] And they have like this is the night [00:50] theme and this is the day theme. And it [00:52] really only affects this main billboard, [00:56] but it's also modifying these buttons. [00:58] You can't really even tell with this [01:00] background in here, but like the the [01:02] colors for these buttons and this button [01:04] and stuff are changing. They're doing it [01:06] in a really odd way, too. So, one of the [01:08] cool things here is that in here they [01:11] have the canvas, which is the [01:13] background, but if you get rid of the [01:14] canvas, you can see this kind of like [01:17] displacement kind of map, but it's not [01:19] displacement map. It's uh like a the [01:21] cloudy kind of uh color tinting that's [01:24] going on. And this actually lets you see [01:26] a little bit more of like when I change [01:27] this up here, it's actually tinting all [01:29] of these buttons and stuff. So, it's not [01:31] just changing the canvas. It's actually [01:33] doing some interesting stuff. But the [01:35] oddest thing I found is that they're [01:38] having the same exact image loaded four [01:42] different times just in a different [01:44] color. and they are changing the opacity [01:49] of all of them to blend the different [01:52] ones together. Even when they have the [01:54] the themes on top of things, the way [01:56] they're doing it is they're not just [01:58] changing color values. They have a color [02:01] overlay of four different color [02:03] overlays. And when you do that slider, [02:05] it's changing the opacity values on all [02:07] of them rather than just manipulating [02:10] and setting values. So, I thought that [02:12] was like really cool and a really [02:13] interesting technique to be able to get [02:15] like really kind of depth and color. [02:17] >> I love it. I think we should normalize [02:19] uh more than just night and dark theme [02:21] like there's an in between. That's [02:22] pretty cool. [02:23] >> There's dusk. [02:25] >> So, there's a video element in here, [02:26] Scott. Did you see that? [02:28] >> Yeah. What's interesting about the video [02:29] element, Wes, is that if we [02:31] >> Well, that's the blobbyiness. [02:33] >> If we hide the video element, [02:36] >> notice how it all just kind of it gets a [02:38] little bit more chill, I think, is the [02:40] best way to describe it. If we bring [02:41] that back. [02:41] >> And then they're using mix blend mode [02:44] overlay to blend them together. Ooh. [02:46] Okay. [02:47] >> So that video isn't done with a shader. [02:48] It's done with a a video which is a cool [02:51] technique too because it's not all just [02:53] like one big canvas. Right. There's [02:54] another cool way they do that down here [02:56] with a canvas uh with these clouds [02:59] because you see this text kind of go in [03:01] and out. That's an overlay. That is in [03:03] fact a canvas overlay on top of [03:07] >> all this stuff. And if you get rid of [03:08] that, the cloudiness kind of goes away [03:11] and the rest is just text colors. So [03:13] there's a lot of fun little things like [03:14] that. There's a lot of usage of canvas. [03:17] But on top of that, even just like the [03:18] general buttons, the general uh [03:20] overlays. Everything on the site looks [03:22] really great. In fact, I really loved [03:24] one of this effect right here. I was [03:25] thinking we could do this for a sin hack [03:28] sometime where we could compete to do [03:29] this little like fade and blur as this [03:32] text comes in. I think it's a cool [03:33] transition right here. Wow, [03:35] >> that's I wonder why they're doing it as [03:37] a video though because like it it seems [03:39] like that blob would be relatively easy [03:42] like generated in canvas. [03:45] >> Yeah. [03:45] >> And then like doing the the blend modes [03:50] all in canvas space is certainly way [03:52] more performant than using like CSS [03:54] blend mode. [03:55] >> It's interesting. Yeah, I wish I I knew [03:57] the answer to that, but I think this is [03:59] a cool site. Yeah, check this out. We'll [04:00] have a link to this available. You can [04:02] paw through it. I think it's a lot of [04:03] neat stuff going on. [04:04] >> All right, I've got a cool website for [04:06] you, and that is the Apple App Store. [04:08] They just recently launched a webbased [04:11] version of the App Store, which is [04:13] really neat. And we actually did an [04:15] entire video diving into it because they [04:18] they famously leaked all of their source [04:20] maps, which allowed us to see the the [04:22] spelt code behind that. But, uh, turns [04:24] out Apple's a little ligious, so we are [04:27] not going to release that video. But [04:29] there are several things that are simply [04:31] just findable via dev tools which I [04:34] think are really neat. So I'm going to [04:36] be focusing on this like scroll slider [04:40] right here because it's made up with [04:42] several I I would say new CSS features. [04:46] So this slider of all of the images here [04:49] is built it's just a UL with a bunch of [04:52] li inside of it and it's using CSS [04:54] scroll snap. So, as you scroll it, you [04:57] can see that it snaps to the closest [05:00] version of each of the thumbnails. And [05:03] that's really nifty because like [05:06] carousels, like JavaScript carousel [05:09] libraries were this absolute massive [05:12] thing. And with CSS scroll snap, you can [05:15] do so much. And you likely don't need a [05:20] carousel library anymore. So, if you [05:22] take a look at this right here, you can [05:23] use DevTools to turn on scroll snap and [05:25] it will show you exactly where each of [05:27] the items starts. Um, they are using [05:30] scroll padding. Um, so that when you do [05:34] scroll it, you see a little bit of the [05:36] the one right here, right? It's not just [05:38] like a clean only show me what four at a [05:41] time. It's actually showing you three [05:44] full ones and then it's cutting off 25 [05:46] pixels of the last one, showing you 25 [05:48] pixels of the first one. [05:50] >> Yeah. So, scroll snap super underrated, [05:52] right, Scott? Like, you've been you've [05:54] been using it like crazy lately. [05:55] >> Yeah, I've been doing I've been I've [05:57] been doing tricks on it. I it it's [05:58] really cool stuff. Uh there's there's [06:00] like some amazing amazing stuff that you [06:03] can do with scroll snap and I feel like [06:05] people are just really sleeping on it. [06:07] Like even just doing a simple like [06:09] Instagram style vertical swiper reel is [06:11] just effortless with like two run CSS. [06:14] um these arrows here which allow you to [06:18] click next and and previous on each of [06:20] them. Those arrows are using CSS anchor [06:24] positioning. And I thought that was kind [06:26] of interesting. So, normally with these [06:28] arrows, what I would do is I would put [06:30] the arrow inside of the carousel or I [06:33] would wrap the entire carousel in a div [06:35] and then the height of the carousel [06:37] would probably be defined by like the [06:40] height of the the contents inside of it. [06:42] And then I would position these arrows. [06:44] you know, like top 50% and then you push [06:46] it back up uh half with translate Y. [06:51] Always I always have to do that when I'm [06:52] doing X and Y. So, what they're saying [06:54] here is they're saying top anchor based [06:56] off of the first piece of artwork. You [06:59] can give an element a anchor name and [07:01] then you can position items based off of [07:04] those elements somewhere else in the [07:06] DOM. And then you're saying 50% from the [07:09] top of that. And then you want to you [07:11] want to base that off of the center. So [07:13] CSS anchor not something I've seen in [07:16] many websites let alone such a big [07:19] website like an apple apple.com website. [07:22] So they have seemingly used a lot of the [07:24] new CSS features and one more of them I [07:26] thought this was pretty neat is some of [07:28] the items in this carousel are videos [07:32] and the video container is using [07:35] container queries and I was like hm I [07:37] wonder why they're doing that. So the [07:40] video container itself [07:42] >> and if you look into it the size of [07:45] these buttons here are based on how wide [07:48] the container is. Normally what you [07:50] would do is you would do like a media [07:51] query and say when the screen is is so [07:53] big make them bigger. But this video can [07:56] be in this case it's a vertical video [07:58] but in this case right here this is like [08:01] a horizontal like a 169 video. And you [08:04] can see the buttons in here are slightly [08:08] bigger than in here. So by using a [08:12] container query, you can say based on [08:15] how big this player is, because the [08:18] video is going to size the container [08:19] itself, not the actual um device itself. [08:22] So based on how big this container is, I [08:25] want to make the buttons smaller or [08:27] bigger. Um, and I dug into it a little [08:30] bit further. we take a look maybe if I [08:32] inspect element on one of these buttons [08:34] here the height of the button images are [08:38] this variable called button size and if [08:40] you click on that you'll see that it [08:43] says at container video max width of 500 [08:46] pixels so when the container is at a [08:48] maximum of 500 pixels then change the [08:51] button size variable to 24 pixels you [08:54] could even go further and use the CQI [08:59] um and CQW CQ8 H those are container [09:02] query and you can make it a percentage [09:03] of it but in this case they're simply [09:05] just saying all right when it's when [09:07] it's 500 pixels or what is max or [09:11] smaller then make the buttons slightly [09:14] smaller and I thought that was a great [09:16] use case of container queries cuz it's [09:18] not contextual for the screen size is [09:20] contextual for how big the the video [09:22] player is. Yeah, man. Anchor, scroll, [09:26] snap, container queries, such massively [09:29] underrated APIs. Um, it's so funny [09:32] because I've been using these more and [09:33] more myself lately. And um, even having [09:35] like the container query units, the CQW, [09:40] CQH, those are just like awesome to use [09:42] and uh, be able to style get the width [09:44] of the container itself on something. [09:46] >> Mhm. [09:47] >> Yeah. I like that they're using uh, [09:48] supports queries, too. So I'm in Firefox [09:50] that I like technically Firefox supports [09:53] top anchor but whatever version I'm [09:56] using for whatever reason it doesn't [09:57] kick in. [09:58] >> So there's like a supports not for [10:01] certain properties and then um and it's [10:04] it's still working in my browser. So [10:05] even though they're using some of the [10:06] latest stuff they're they have some [10:08] fallbacks which is nice. [10:09] >> Yeah, [10:10] >> it I did dig through it and they're [10:11] using some hacks to detect old versions [10:14] of Safari in here as well. supports not [10:18] font Apple system body. There's there's [10:21] all these like little tricks that they [10:23] use to detect older versions of browsers [10:26] and fall back to them. Yeah. What's so [10:29] cool about this is that some people say [10:31] these like we get comments all the time, [10:34] these APIs are great. I can't use them. [10:36] Folks, if if Apple is able to ship them [10:38] on their store that everyone is using, [10:41] you are able to use this stuff. Uh it's [10:43] just a skill issue at that point, right? [10:47] All right, CJ, what do you got for us? [10:49] >> Okay. Uh Scott actually put this site on [10:51] my radar and I've just started to uh [10:53] dive into it, but it's from the OBS [10:56] agency. Their tagline here is books that [10:58] inspire, knowledge that endures, design [11:00] that lives beyond. I don't know if [11:02] they're a design agency or they design [11:04] books, but this is their site. And this [11:05] parallax scroll, first of all, is really [11:07] cool. Like as you scroll, you can see [11:09] that some of the elements behind it are [11:11] scrolling a little bit faster, a little [11:12] bit slower. I really like just the [11:14] aesthetic like this. paper design. Like [11:16] there's like cardboard on top and like [11:18] this is like your punch paper. Um, and [11:20] then they have this really cool feature [11:22] where it's like it might not seem that [11:24] useful that we can't read the stuff [11:25] behind this this element, but if we drag [11:28] it on top, they'll reorient and now we [11:31] can actually read that section of the [11:32] page. So, this is like a really cool [11:34] metaphor for like cuz like they're a [11:36] book company and so they made a website [11:37] kind of work like a book and that it's [11:39] like actually stacked and layered. They [11:41] have this cool um font animation as or [11:43] sorry mouse animation as you kind of [11:45] navigate around. And if you use the [11:48] navigation bar at the top, it also does [11:49] the animation to bring that page uh on [11:52] top of the others. So this is super [11:55] sick. I'm just now diving into how all [11:57] of it works. Um and for me seeing the [12:00] parallax scroll, it's really just a [12:01] matter of changing the Y value um on a [12:04] transform. Let's see. Like if we look at [12:05] this top element here, we can see that [12:08] as I'm scrolling, its containers [12:11] translate 3D is changing the y-value. So [12:14] there's some JavaScript behind the scene [12:15] that's actually setting that y-value. [12:17] But if we take a look at the one that's [12:19] underneath it, similarly, JavaScript is [12:22] changing its transform y-value, but at [12:25] in this case at a faster speed than the [12:27] one that's on top. It's not all CSS. [12:28] There is some JavaScript behind the [12:29] scenes making that stuff happen. And [12:31] yeah, overall cool site. [12:32] >> We've gotten some comments on the Lando [12:34] video. It's like sites should be [12:36] readable and usable. But like man, [12:38] there's room for art on the internet, [12:40] folks. And this is art. It is still [12:42] readable. It's still usable. It It is [12:46] pure art to me. This is just a [12:48] >> a different application. It's not [12:50] anything I've seen. I've seen layers. [12:52] I've seen things stacking. I've seen [12:54] animations. But like the way they've [12:56] done this all is so novel and [12:58] interesting. and they've leaned in kind [13:00] of like a [13:01] >> it's not a skumorphic design aesthetic, [13:04] but it is like a skumor. They they use [13:07] like real textures and real uh lines and [13:10] shapes and things while also still being [13:13] kind of [13:14] >> graphic and it it it feels very cool to [13:17] me. Yeah, I I've really been loving this [13:19] kind of collageish style even though [13:21] this isn't really collagey as much, but [13:23] like that that real paper aesthetic has [13:26] been really cool. We get that a lot [13:28] where anytime you show anything cool, [13:30] people are like, "Just give me a text [13:31] document with all the info." [13:33] >> Yeah. [13:34] >> There certainly if this was like the [13:37] subway website where I'm trying to find [13:40] like what time the next transit comes, I [13:42] would be pissed this like I just want to [13:45] get the date. I do not care about any of [13:47] this. But for a lot of these other [13:48] websites where it's an experience, you [13:51] want to you land on the page and you're [13:53] trying to flex a little to show off the [13:56] vibe of your brand and to make the [13:58] person stop and realize like, oh, this [14:00] is actually a really nifty it's it's [14:03] marketing, right? And of course, you [14:05] still have to be able to consume the [14:07] information, but how that is portrayed [14:09] to you and how you actually experience [14:11] the website is is really important to to [14:14] a brand. And they certainly can be [14:17] extremely obnoxious, but you got to be [14:19] careful with that cuz you can piss [14:20] people off so quickly. [14:22] >> Yeah, [14:22] >> definitely. And and I think Scott's spot [14:24] on like this. This for me walks the [14:26] line. It's like it's aesthetically [14:27] pleasing. It's interesting. And if you [14:29] leave the site for long enough, there's [14:30] there's a a DVD logo uh animation that [14:33] kicks in. [14:34] >> Oh, yeah. [14:35] >> I feel like the the Lando site is on the [14:38] far end of hyperdesign. [14:41] Kind of hard to use. Maybe doesn't work [14:43] on some devices. I feel like this is a [14:44] good middle ground of like they made it [14:46] their own, but it's still usable. You [14:48] can still get the info. Yeah. I love [14:49] this DVD logo screen. [14:51] >> Yeah. And and even the push back like on [14:53] uh not to push back on you, but like the [14:55] comments that were like, I just want the [14:57] info. Like if you're going to the [14:58] Landonorris.com website, like what info [15:01] are you looking to get out of there? If [15:03] you're looking to get like who he is, [15:06] you go to his Wikipedia page. if you're [15:08] like, you know, it the website is meant [15:10] to be like a a celebration of this this [15:13] race car driver and his stuff. It's [15:14] supposed to be just like a cool thing. [15:16] So, yeah, I I don't understand that [15:18] opinion, but hey. [15:19] >> Yeah. And I guess the last thing is I [15:20] was trying to figure out how they did [15:21] the paper textures because uh recently I [15:24] started playing around with CSS blend [15:25] modes and so like you could take a a [15:27] texture with some transparency in it and [15:29] like then blend it with the background [15:30] to make it look like paper. It does. I [15:32] can't seem to find it in the dev tools, [15:34] but it does seem like they actually just [15:35] have an actual paper image that they're [15:38] using behind it, but that would be a [15:39] cool effect as well is because then you [15:41] could apply it to like any colored [15:42] paper. You could you could have your [15:44] cardboard textures, your your stock [15:46] textures, um, and then use blend modes [15:48] to apply it. But it looks like these are [15:50] actually just separate images. [15:51] >> Yeah. Sick. I love this. Wow. What a [15:54] swap that was. Folks, if you have any [15:57] cool stuff that you're seeing around the [15:58] web, I know we're all seeing cool stuff. [16:00] I actually my list of cool stuff is [16:02] miles long, but if you're seeing cool [16:04] stuff, you want to see us dive into it, [16:07] break it down, or explain it or even [16:09] just check out some neat techniques or [16:11] something you want to uh bring to the [16:13] class and show, hit us up. Leave a [16:15] comment below in this video. Let us know [16:17] what you think, what you're finding [16:19] that's cool, or do you hate it all and [16:20] you just want to see a blank ass [16:22] website? So, [16:24] peace. [16:25] >> Peace.  [[3. Resources/Readwise/Full Document Contents/Articles/The Coolest Websites We Found This Month|Full Document Contents]] ## Document Notes --- tags: #web-design #css-techniques #frontend-development author: Syntax source: YouTube reference: https://www.youtube.com/watch?v=YjIM4HYSQaM date created: 2024-01-15 10:00 --- # 🏷️ Title: The Coolest Websites We Found This Month ## 🧰 Action Inbox - [H1] Explore CSS scroll snap for carousel alternatives — replace heavy JS libraries #performance - [H2] Implement CSS anchor positioning for responsive layouts — modern positioning technique #css - [H3] Experiment with container queries for component-based sizing — contextual responsive design #responsive ## 🧭 Table of Contents - [[#📝 Summary]] - [[#📖 Main Content]] - [[#🗒️ Notes]] - [[#📚 References]] - [[#🗣️ Paraphrase]] - [[#📰 Newsletter]] - [[#✅ Action Items]] - [[#🧪 Hypotheses]] - [[#📊 Methodology]] - [[#❓ Questions]] - [[#🔮 Future Research]] - [[#💡 Implications]] - [[#🧠 Learning Styles Assessment]] - [[#📊 Accessibility Assessment]] - [[#🌍 DEIB Assessment]] - [[#✅ Logical Validity]] - [[#🛡️ DARVO Analysis]] - [[#🎯 Conclusion]] ### 🔗 References - [Lou Studio](https://loustudio.com) - [Apple App Store Web](https://apps.apple.com) - [OBS Agency](https://obs.agency) ## 📝 Summary - The Syntax team showcases three innovative websites demonstrating cutting-edge CSS and design techniques - Lou Studio features advanced theming with canvas overlays and creative color blending methods - Apple's web App Store implementation uses modern CSS features like scroll snap, anchor positioning, and container queries - OBS Agency creates an artistic book-like experience with layered parallax scrolling and draggable elements - These examples show how modern CSS can replace heavy JavaScript libraries while creating engaging user experiences ## 📖 Main Content The video presents a "gift swap" format where three developers share websites that showcase innovative web techniques. Lou Studio demonstrates sophisticated theming using multiple image overlays and canvas effects rather than simple color value changes. Apple's App Store web version serves as a production example of modern CSS features including scroll snap for carousels, anchor positioning for layout, and container queries for responsive components. OBS Agency creates an artistic experience that balances visual innovation with usability, using parallax effects and draggable layered elements to mimic a physical book interface. The discussion emphasizes that major companies like Apple are successfully shipping these modern CSS features, making them viable for broader adoption. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/YjIM4HYSQaM?t=0) — Introduction to website gift swap - Key idea: Three developers share cool websites with innovative techniques - Evidence: "Today we have a gift swap where the three of us have brought in a website for show and tell" #### ⏱️ [00:30](https://youtu.be/YjIM4HYSQaM?t=30) — Lou Studio theming system showcase - Key idea: Advanced day/night theming using multiple image overlays instead of color changes - Evidence: "They're having the same exact image loaded four different times just in a different color" #### ⏱️ [02:15](https://youtu.be/YjIM4HYSQaM?t=135) — Canvas and video blend techniques - Key idea: Multiple canvas overlays and video elements with CSS blend modes create complex effects - Evidence: "They're using mix blend mode overlay to blend them together" #### ⏱️ [03:45](https://youtu.be/YjIM4HYSQaM?t=225) — Apple App Store web version introduction - Key idea: Apple launched a web-based App Store using modern CSS features - Evidence: "They just recently launched a web-based version of the App Store, which is really neat" #### ⏱️ [04:30](https://youtu.be/YjIM4HYSQaM?t=270) — CSS scroll snap implementation - Key idea: Modern carousel functionality without JavaScript using CSS scroll snap - Evidence: "With CSS scroll snap, you can do so much. And you likely don't need a carousel library anymore" #### ⏱️ [06:00](https://youtu.be/YjIM4HYSQaM?t=360) — CSS anchor positioning for arrows - Key idea: Positioning carousel arrows using CSS anchor positioning relative to content - Evidence: "CSS anchor not something I've seen in many websites let alone such a big website like Apple" #### ⏱️ [07:15](https://youtu.be/YjIM4HYSQaM?t=435) — Container queries for responsive buttons - Key idea: Button sizing based on container size rather than viewport using container queries - Evidence: "Based on how big this container is, I want to make the buttons smaller or bigger" #### ⏱️ [08:45](https://youtu.be/YjIM4HYSQaM?t=525) — Progressive enhancement with supports queries - Key idea: Apple uses feature detection and fallbacks for modern CSS features - Evidence: "They have some fallbacks which is nice" with supports queries for older browsers #### ⏱️ [09:30](https://youtu.be/YjIM4HYSQaM?t=570) — OBS Agency artistic design introduction - Key idea: Book-inspired website with layered, draggable elements and parallax scrolling - Evidence: "They made a website kind of work like a book and that it's actually stacked and layered" #### ⏱️ [10:45](https://youtu.be/YjIM4HYSQaM?t=645) — Parallax implementation details - Key idea: JavaScript-controlled transform values create parallax effects at different speeds - Evidence: "JavaScript is changing its transform y-value, but at a faster speed than the one that's on top" #### ⏱️ [11:30](https://youtu.be/YjIM4HYSQaM?t=690) — Balancing art and usability discussion - Key idea: Artistic web experiences can coexist with usability when appropriate for the context - Evidence: "There's room for art on the internet, folks. And this is art. It is still readable. It's still usable" #### ⏱️ [13:00](https://youtu.be/YjIM4HYSQaM?t=780) — Modern CSS adoption validation - Key idea: If Apple ships modern CSS features in production, they're ready for broader adoption - Evidence: "If Apple is able to ship them on their store that everyone is using, you are able to use this stuff" ## 📚 References - [Lou Studio](https://loustudio.com) - [Apple App Store Web](https://apps.apple.com) - [OBS Agency](https://obs.agency) - [CSS Scroll Snap Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap) - [CSS Anchor Positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning) - [CSS Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries) ## 🗣️ Paraphrase - Lou Studio demonstrates advanced theming by loading multiple versions of the same image in different colors and blending them with opacity changes rather than simple CSS color modifications - Apple's web App Store showcases production-ready modern CSS including scroll snap for touch-friendly carousels, anchor positioning for contextual layouts, and container queries for component-responsive design - OBS Agency creates an artistic book metaphor using layered parallax scrolling and draggable elements while maintaining usability and readability ## 📰 Newsletter 🎨 **Modern CSS Takes Center Stage in Production Websites** This month's website showcase reveals how cutting-edge CSS features are moving from experimental to production-ready. Apple's web App Store demonstrates that scroll snap, anchor positioning, and container queries aren't just developer toys—they're powering real user experiences at scale. **Key Takeaways:** - **CSS Scroll Snap** can replace heavy JavaScript carousel libraries with native, performant scrolling behavior - **Anchor Positioning** enables contextual layouts without complex wrapper divs - **Container Queries** allow truly component-based responsive design The artistic OBS Agency site proves that innovative design and usability aren't mutually exclusive when the context calls for an experience rather than pure information consumption. **Try This:** Replace your next carousel implementation with CSS scroll snap—you might be surprised how much JavaScript you can eliminate while improving performance. Resources: [Learn WordPress](https://learn.wordpress.org/), [Developer Docs](https://developer.wordpress.org/), [WP-CLI](https://wp-cli.org/) ## ✅ Action Items #### WordPress - Core: Evaluate scroll snap for media gallery navigation improvements - Themes: Create design patterns showcasing container queries for responsive components - Design: Develop accessibility guidelines for artistic/experimental themes - Documentation: Document modern CSS feature adoption strategies for theme developers - Community: Share examples of artistic themes that maintain usability standards ## 🧪 Hypotheses - Modern CSS features like scroll snap can significantly reduce JavaScript bundle sizes while improving performance - Container queries enable more modular, component-based responsive design patterns - Artistic web experiences increase user engagement when appropriately matched to content context - Progressive enhancement with feature detection makes modern CSS features viable for production use ### 📊 Methodology - Performance testing comparing CSS scroll snap vs JavaScript carousel implementations - User experience studies measuring engagement with artistic vs minimal web designs - Browser compatibility analysis for modern CSS features across target audiences ### ❓ Questions - How much JavaScript can be eliminated by adopting modern CSS features like scroll snap and anchor positioning? - What are the performance implications of multiple image overlays vs CSS color manipulation for theming? - How do users with disabilities experience these artistic, animation-heavy interfaces? ### 🔮 Future Research - Comprehensive browser support timeline for CSS anchor positioning - Performance benchmarks for canvas vs video vs CSS for animated backgrounds - Accessibility best practices for parallax and animation-heavy interfaces ### 💡 Implications - Practice: Modern CSS features can replace JavaScript libraries, reducing complexity - Performance: Native CSS features typically offer better performance than JavaScript equivalents - Design: Balance between artistic expression and accessibility requires careful consideration - Education: Developers need training on modern CSS features to avoid over-reliance on JavaScript ### 🧠 Learning Styles Assessment Reading level estimate: 10th Grade (technical content with clear explanations) #### 👀 Visual learners - Present: Live website demos, visual code inspection, side-by-side comparisons - Improve: Diagram showing CSS feature compatibility timeline #### 🔊 Aural learners - Present: Detailed verbal explanations, discussion format - Improve: Audio-only summary of key CSS features #### 🗣️ Verbal learners - Present: Clear definitions of technical terms, analogies (book metaphor for OBS site) - Improve: Glossary of modern CSS features #### 🧩 Kinesthetic learners - Present: Live code exploration, interactive demos - Improve: Step-by-step tutorials for implementing each technique #### 🧠 Logical learners - Present: Technical analysis, feature comparison, performance considerations - Improve: Decision matrix for when to use each CSS feature #### 🧑‍🤝‍🧑 Social learners - Present: Team discussion format, shared discovery - Improve: Community challenges to recreate effects #### 🧘‍♀️ Solitary learners - Present: Individual code exploration, self-discovery elements - Improve: Personal experimentation prompts #### 🌿 Naturalistic learners - Present: Real-world production examples, practical applications - Improve: Industry adoption patterns, ecosystem evolution ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Standard HTML structure underneath visual effects - Improve: Ensure ARIA labels for interactive draggable elements #### Keyboard navigation - Present: Basic navigation maintained in examples - Improve: Ensure all interactive elements are keyboard accessible #### Contrast and readability - Present: Text remains readable in artistic designs - Improve: Test contrast ratios across all theme variations #### Text resizing and reflow - Present: Responsive design principles maintained - Improve: Test artistic layouts at 200% zoom #### Media and captions - Present: Video content is decorative/atmospheric - Improve: Provide text alternatives for decorative animations #### Motion and animation - Present: Multiple animations and parallax effects - Improve: Respect prefers-reduced-motion settings ### 🌍 DEIB Assessment #### Cultural breadth - Present: International examples (Lou Studio, Apple global) - Improve: Include examples from diverse geographic regions #### Inclusive language - Present: Technical terminology clearly explained - Improve: Avoid assumptions about prior CSS knowledge #### Neurodiversity support - Present: Multiple learning approaches in video format - Improve: Provide structured text alternatives to video content #### Representation - Present: Technical focus with multiple perspectives - Improve: Include diverse voices in technical discussions #### Accessibility considerations - Present: Discussion of balancing art with usability - Improve: More detailed accessibility analysis of artistic sites ### ✅ Logical Validity #### Strong reasoning - Inductive strength: Good examples support claims about modern CSS viability - Practical reasoning: Sound advice about when artistic design is appropriate - Evidence-based: Uses concrete production examples (Apple) to support claims #### Fallacies - Appeal to authority: "If Apple uses it, you can too" - somewhat valid but oversimplified - False dichotomy: Implies choice between "artistic" vs "usable" when spectrum exists #### Tone of voice - Overall tone: Enthusiastic and educational, encouraging experimentation while acknowledging practical constraints ### 🛡️ DARVO Analysis - Deny: No denial patterns present - Attack: Mild pushback against "just text" preferences, but contextually appropriate - Reverse victim/offender: None identified - Emotional cues: Positive enthusiasm for technical innovation, balanced perspective on usability ## 🎯 Conclusion Modern CSS features are transitioning from experimental curiosities to production-ready tools, as evidenced by Apple's implementation in their web App Store. The key insight is that scroll snap, container queries, and anchor positioning can replace complex JavaScript solutions while improving performance and maintainability. However, the artistic examples also demonstrate that innovation must be balanced with accessibility and user needs—there's room for both functional minimalism and expressive design when appropriately matched to context and audience expectations. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad Purpose: Stage CEE units that become Literature notes. Split level: H3 ### [H1] CSS scroll snap replaces JavaScript carousels effectively > [!quote] [The Coolest Websites We Found This Month](https://www.youtube.com/watch?v=YjIM4HYSQaM) by [[Syntax]] via [[YouTube]]. Published 2024. Accessed 2024-01-15. > "With CSS scroll snap, you can do so much. And you likely don't need a carousel library anymore." Production evidence from Apple's App Store implementation demonstrates viability. [view highlight](https://youtu.be/YjIM4HYSQaM?t=270#H1) #xref #css-features ID:rw_001 ### [H2] Container queries enable component-responsive design patterns > [!quote] [The Coolest Websites We Found This Month](https://www.youtube.com/watch?v=YjIM4HYSQaM) > "Based on how big this container is, I want to make the buttons smaller or bigger." Enables sizing based on container rather than viewport dimensions. [view highlight](https://youtu.be/YjIM4HYSQaM?t=435#H2) #xref #responsive-design ID:rw_002 --- ### 🔖 Atomic Split Pad (Zettel Candidates) Purpose: Promote reusable claims into Atomic notes. Split level: H4 #### [Z1] Modern CSS features reduce JavaScript dependency - When browser support allows, native CSS often outperforms JS solutions - Evidence from Apple's production implementation at 4:30 - Links: [[CSS-Performance]] [[Progressive-Enhancement]] #### [Z2] Artistic web design requires contextual appropriateness - Art sites vs utility sites have different usability requirements - Balance innovation with accessibility needs - Links: [[Web- --- ## Full Transcript [00:00] Hey, what's up? Today we have a gift [00:02] swap where the three of us have brought [00:04] in a website for showand tell that we're [00:07] going to be uh we're going to be showing [00:08] the team something that we found that we [00:10] think is cool, some neat techniques, and [00:13] I've got one uh for the team today. This [00:16] has been on my radar for a little bit. [00:18] It's a design studio, uh Lou Studio, and [00:22] they're the alchemists of the internet. [00:25] I I really like this site for a number [00:27] of reasons, but there's some cool [00:29] techniques going on here. The site looks [00:33] really great. There's a handful of like [00:34] really lovely techniques going on and [00:37] just cool animations and canvas things. [00:40] But as a fan of theming insights, this [00:43] little light day slider to me is one of [00:46] the cooler theming systems I've seen. [00:49] And they have like this is the night [00:50] theme and this is the day theme. And it [00:52] really only affects this main billboard, [00:56] but it's also modifying these buttons. [00:58] You can't really even tell with this [01:00] background in here, but like the the [01:02] colors for these buttons and this button [01:04] and stuff are changing. They're doing it [01:06] in a really odd way, too. So, one of the [01:08] cool things here is that in here they [01:11] have the canvas, which is the [01:13] background, but if you get rid of the [01:14] canvas, you can see this kind of like [01:17] displacement kind of map, but it's not [01:19] displacement map. It's uh like a the [01:21] cloudy kind of uh color tinting that's [01:24] going on. And this actually lets you see [01:26] a little bit more of like when I change [01:27] this up here, it's actually tinting all [01:29] of these buttons and stuff. So, it's not [01:31] just changing the canvas. It's actually [01:33] doing some interesting stuff. But the [01:35] oddest thing I found is that they're [01:38] having the same exact image loaded four [01:42] different times just in a different [01:44] color. and they are changing the opacity [01:49] of all of them to blend the different [01:52] ones together. Even when they have the [01:54] the themes on top of things, the way [01:56] they're doing it is they're not just [01:58] changing color values. They have a color [02:01] overlay of four different color [02:03] overlays. And when you do that slider, [02:05] it's changing the opacity values on all [02:07] of them rather than just manipulating [02:10] and setting values. So, I thought that [02:12] was like really cool and a really [02:13] interesting technique to be able to get [02:15] like really kind of depth and color. [02:17] >> I love it. I think we should normalize [02:19] uh more than just night and dark theme [02:21] like there's an in between. That's [02:22] pretty cool. [02:23] >> There's dusk. [02:25] >> So, there's a video element in here, [02:26] Scott. Did you see that? [02:28] >> Yeah. What's interesting about the video [02:29] element, Wes, is that if we [02:31] >> Well, that's the blobbyiness. [02:33] >> If we hide the video element, [02:36] >> notice how it all just kind of it gets a [02:38] little bit more chill, I think, is the [02:40] best way to describe it. If we bring [02:41] that back. [02:41] >> And then they're using mix blend mode [02:44] overlay to blend them together. Ooh. [02:46] Okay. [02:47] >> So that video isn't done with a shader. [02:48] It's done with a a video which is a cool [02:51] technique too because it's not all just [02:53] like one big canvas. Right. There's [02:54] another cool way they do that down here [02:56] with a canvas uh with these clouds [02:59] because you see this text kind of go in [03:01] and out. That's an overlay. That is in [03:03] fact a canvas overlay on top of [03:07] >> all this stuff. And if you get rid of [03:08] that, the cloudiness kind of goes away [03:11] and the rest is just text colors. So [03:13] there's a lot of fun little things like [03:14] that. There's a lot of usage of canvas. [03:17] But on top of that, even just like the [03:18] general buttons, the general uh [03:20] overlays. Everything on the site looks [03:22] really great. In fact, I really loved [03:24] one of this effect right here. I was [03:25] thinking we could do this for a sin hack [03:28] sometime where we could compete to do [03:29] this little like fade and blur as this [03:32] text comes in. I think it's a cool [03:33] transition right here. Wow, [03:35] >> that's I wonder why they're doing it as [03:37] a video though because like it it seems [03:39] like that blob would be relatively easy [03:42] like generated in canvas. [03:45] >> Yeah. [03:45] >> And then like doing the the blend modes [03:50] all in canvas space is certainly way [03:52] more performant than using like CSS [03:54] blend mode. [03:55] >> It's interesting. Yeah, I wish I I knew [03:57] the answer to that, but I think this is [03:59] a cool site. Yeah, check this out. We'll [04:00] have a link to this available. You can [04:02] paw through it. I think it's a lot of [04:03] neat stuff going on. [04:04] >> All right, I've got a cool website for [04:06] you, and that is the Apple App Store. [04:08] They just recently launched a webbased [04:11] version of the App Store, which is [04:13] really neat. And we actually did an [04:15] entire video diving into it because they [04:18] they famously leaked all of their source [04:20] maps, which allowed us to see the the [04:22] spelt code behind that. But, uh, turns [04:24] out Apple's a little ligious, so we are [04:27] not going to release that video. But [04:29] there are several things that are simply [04:31] just findable via dev tools which I [04:34] think are really neat. So I'm going to [04:36] be focusing on this like scroll slider [04:40] right here because it's made up with [04:42] several I I would say new CSS features. [04:46] So this slider of all of the images here [04:49] is built it's just a UL with a bunch of [04:52] li inside of it and it's using CSS [04:54] scroll snap. So, as you scroll it, you [04:57] can see that it snaps to the closest [05:00] version of each of the thumbnails. And [05:03] that's really nifty because like [05:06] carousels, like JavaScript carousel [05:09] libraries were this absolute massive [05:12] thing. And with CSS scroll snap, you can [05:15] do so much. And you likely don't need a [05:20] carousel library anymore. So, if you [05:22] take a look at this right here, you can [05:23] use DevTools to turn on scroll snap and [05:25] it will show you exactly where each of [05:27] the items starts. Um, they are using [05:30] scroll padding. Um, so that when you do [05:34] scroll it, you see a little bit of the [05:36] the one right here, right? It's not just [05:38] like a clean only show me what four at a [05:41] time. It's actually showing you three [05:44] full ones and then it's cutting off 25 [05:46] pixels of the last one, showing you 25 [05:48] pixels of the first one. [05:50] >> Yeah. So, scroll snap super underrated, [05:52] right, Scott? Like, you've been you've [05:54] been using it like crazy lately. [05:55] >> Yeah, I've been doing I've been I've [05:57] been doing tricks on it. I it it's [05:58] really cool stuff. Uh there's there's [06:00] like some amazing amazing stuff that you [06:03] can do with scroll snap and I feel like [06:05] people are just really sleeping on it. [06:07] Like even just doing a simple like [06:09] Instagram style vertical swiper reel is [06:11] just effortless with like two run CSS. [06:14] um these arrows here which allow you to [06:18] click next and and previous on each of [06:20] them. Those arrows are using CSS anchor [06:24] positioning. And I thought that was kind [06:26] of interesting. So, normally with these [06:28] arrows, what I would do is I would put [06:30] the arrow inside of the carousel or I [06:33] would wrap the entire carousel in a div [06:35] and then the height of the carousel [06:37] would probably be defined by like the [06:40] height of the the contents inside of it. [06:42] And then I would position these arrows. [06:44] you know, like top 50% and then you push [06:46] it back up uh half with translate Y. [06:51] Always I always have to do that when I'm [06:52] doing X and Y. So, what they're saying [06:54] here is they're saying top anchor based [06:56] off of the first piece of artwork. You [06:59] can give an element a anchor name and [07:01] then you can position items based off of [07:04] those elements somewhere else in the [07:06] DOM. And then you're saying 50% from the [07:09] top of that. And then you want to you [07:11] want to base that off of the center. So [07:13] CSS anchor not something I've seen in [07:16] many websites let alone such a big [07:19] website like an apple apple.com website. [07:22] So they have seemingly used a lot of the [07:24] new CSS features and one more of them I [07:26] thought this was pretty neat is some of [07:28] the items in this carousel are videos [07:32] and the video container is using [07:35] container queries and I was like hm I [07:37] wonder why they're doing that. So the [07:40] video container itself [07:42] >> and if you look into it the size of [07:45] these buttons here are based on how wide [07:48] the container is. Normally what you [07:50] would do is you would do like a media [07:51] query and say when the screen is is so [07:53] big make them bigger. But this video can [07:56] be in this case it's a vertical video [07:58] but in this case right here this is like [08:01] a horizontal like a 169 video. And you [08:04] can see the buttons in here are slightly [08:08] bigger than in here. So by using a [08:12] container query, you can say based on [08:15] how big this player is, because the [08:18] video is going to size the container [08:19] itself, not the actual um device itself. [08:22] So based on how big this container is, I [08:25] want to make the buttons smaller or [08:27] bigger. Um, and I dug into it a little [08:30] bit further. we take a look maybe if I [08:32] inspect element on one of these buttons [08:34] here the height of the button images are [08:38] this variable called button size and if [08:40] you click on that you'll see that it [08:43] says at container video max width of 500 [08:46] pixels so when the container is at a [08:48] maximum of 500 pixels then change the [08:51] button size variable to 24 pixels you [08:54] could even go further and use the CQI [08:59] um and CQW CQ8 H those are container [09:02] query and you can make it a percentage [09:03] of it but in this case they're simply [09:05] just saying all right when it's when [09:07] it's 500 pixels or what is max or [09:11] smaller then make the buttons slightly [09:14] smaller and I thought that was a great [09:16] use case of container queries cuz it's [09:18] not contextual for the screen size is [09:20] contextual for how big the the video [09:22] player is. Yeah, man. Anchor, scroll, [09:26] snap, container queries, such massively [09:29] underrated APIs. Um, it's so funny [09:32] because I've been using these more and [09:33] more myself lately. And um, even having [09:35] like the container query units, the CQW, [09:40] CQH, those are just like awesome to use [09:42] and uh, be able to style get the width [09:44] of the container itself on something. [09:46] >> Mhm. [09:47] >> Yeah. I like that they're using uh, [09:48] supports queries, too. So I'm in Firefox [09:50] that I like technically Firefox supports [09:53] top anchor but whatever version I'm [09:56] using for whatever reason it doesn't [09:57] kick in. [09:58] >> So there's like a supports not for [10:01] certain properties and then um and it's [10:04] it's still working in my browser. So [10:05] even though they're using some of the [10:06] latest stuff they're they have some [10:08] fallbacks which is nice. [10:09] >> Yeah, [10:10] >> it I did dig through it and they're [10:11] using some hacks to detect old versions [10:14] of Safari in here as well. supports not [10:18] font Apple system body. There's there's [10:21] all these like little tricks that they [10:23] use to detect older versions of browsers [10:26] and fall back to them. Yeah. What's so [10:29] cool about this is that some people say [10:31] these like we get comments all the time, [10:34] these APIs are great. I can't use them. [10:36] Folks, if if Apple is able to ship them [10:38] on their store that everyone is using, [10:41] you are able to use this stuff. Uh it's [10:43] just a skill issue at that point, right? [10:47] All right, CJ, what do you got for us? [10:49] >> Okay. Uh Scott actually put this site on [10:51] my radar and I've just started to uh [10:53] dive into it, but it's from the OBS [10:56] agency. Their tagline here is books that [10:58] inspire, knowledge that endures, design [11:00] that lives beyond. I don't know if [11:02] they're a design agency or they design [11:04] books, but this is their site. And this [11:05] parallax scroll, first of all, is really [11:07] cool. Like as you scroll, you can see [11:09] that some of the elements behind it are [11:11] scrolling a little bit faster, a little [11:12] bit slower. I really like just the [11:14] aesthetic like this. paper design. Like [11:16] there's like cardboard on top and like [11:18] this is like your punch paper. Um, and [11:20] then they have this really cool feature [11:22] where it's like it might not seem that [11:24] useful that we can't read the stuff [11:25] behind this this element, but if we drag [11:28] it on top, they'll reorient and now we [11:31] can actually read that section of the [11:32] page. So, this is like a really cool [11:34] metaphor for like cuz like they're a [11:36] book company and so they made a website [11:37] kind of work like a book and that it's [11:39] like actually stacked and layered. They [11:41] have this cool um font animation as or [11:43] sorry mouse animation as you kind of [11:45] navigate around. And if you use the [11:48] navigation bar at the top, it also does [11:49] the animation to bring that page uh on [11:52] top of the others. So this is super [11:55] sick. I'm just now diving into how all [11:57] of it works. Um and for me seeing the [12:00] parallax scroll, it's really just a [12:01] matter of changing the Y value um on a [12:04] transform. Let's see. Like if we look at [12:05] this top element here, we can see that [12:08] as I'm scrolling, its containers [12:11] translate 3D is changing the y-value. So [12:14] there's some JavaScript behind the scene [12:15] that's actually setting that y-value. [12:17] But if we take a look at the one that's [12:19] underneath it, similarly, JavaScript is [12:22] changing its transform y-value, but at [12:25] in this case at a faster speed than the [12:27] one that's on top. It's not all CSS. [12:28] There is some JavaScript behind the [12:29] scenes making that stuff happen. And [12:31] yeah, overall cool site. [12:32] >> We've gotten some comments on the Lando [12:34] video. It's like sites should be [12:36] readable and usable. But like man, [12:38] there's room for art on the internet, [12:40] folks. And this is art. It is still [12:42] readable. It's still usable. It It is [12:46] pure art to me. This is just a [12:48] >> a different application. It's not [12:50] anything I've seen. I've seen layers. [12:52] I've seen things stacking. I've seen [12:54] animations. But like the way they've [12:56] done this all is so novel and [12:58] interesting. and they've leaned in kind [13:00] of like a [13:01] >> it's not a skumorphic design aesthetic, [13:04] but it is like a skumor. They they use [13:07] like real textures and real uh lines and [13:10] shapes and things while also still being [13:13] kind of [13:14] >> graphic and it it it feels very cool to [13:17] me. Yeah, I I've really been loving this [13:19] kind of collageish style even though [13:21] this isn't really collagey as much, but [13:23] like that that real paper aesthetic has [13:26] been really cool. We get that a lot [13:28] where anytime you show anything cool, [13:30] people are like, "Just give me a text [13:31] document with all the info." [13:33] >> Yeah. [13:34] >> There certainly if this was like the [13:37] subway website where I'm trying to find [13:40] like what time the next transit comes, I [13:42] would be pissed this like I just want to [13:45] get the date. I do not care about any of [13:47] this. But for a lot of these other [13:48] websites where it's an experience, you [13:51] want to you land on the page and you're [13:53] trying to flex a little to show off the [13:56] vibe of your brand and to make the [13:58] person stop and realize like, oh, this [14:00] is actually a really nifty it's it's [14:03] marketing, right? And of course, you [14:05] still have to be able to consume the [14:07] information, but how that is portrayed [14:09] to you and how you actually experience [14:11] the website is is really important to to [14:14] a brand. And they certainly can be [14:17] extremely obnoxious, but you got to be [14:19] careful with that cuz you can piss [14:20] people off so quickly. [14:22] >> Yeah, [14:22] >> definitely. And and I think Scott's spot [14:24] on like this. This for me walks the [14:26] line. It's like it's aesthetically [14:27] pleasing. It's interesting. And if you [14:29] leave the site for long enough, there's [14:30] there's a a DVD logo uh animation that [14:33] kicks in. [14:34] >> Oh, yeah. [14:35] >> I feel like the the Lando site is on the [14:38] far end of hyperdesign. [14:41] Kind of hard to use. Maybe doesn't work [14:43] on some devices. I feel like this is a [14:44] good middle ground of like they made it [14:46] their own, but it's still usable. You [14:48] can still get the info. Yeah. I love [14:49] this DVD logo screen. [14:51] >> Yeah. And and even the push back like on [14:53] uh not to push back on you, but like the [14:55] comments that were like, I just want the [14:57] info. Like if you're going to the [14:58] Landonorris.com website, like what info [15:01] are you looking to get out of there? If [15:03] you're looking to get like who he is, [15:06] you go to his Wikipedia page. if you're [15:08] like, you know, it the website is meant [15:10] to be like a a celebration of this this [15:13] race car driver and his stuff. It's [15:14] supposed to be just like a cool thing. [15:16] So, yeah, I I don't understand that [15:18] opinion, but hey. [15:19] >> Yeah. And I guess the last thing is I [15:20] was trying to figure out how they did [15:21] the paper textures because uh recently I [15:24] started playing around with CSS blend [15:25] modes and so like you could take a a [15:27] texture with some transparency in it and [15:29] like then blend it with the background [15:30] to make it look like paper. It does. I [15:32] can't seem to find it in the dev tools, [15:34] but it does seem like they actually just [15:35] have an actual paper image that they're [15:38] using behind it, but that would be a [15:39] cool effect as well is because then you [15:41] could apply it to like any colored [15:42] paper. You could you could have your [15:44] cardboard textures, your your stock [15:46] textures, um, and then use blend modes [15:48] to apply it. But it looks like these are [15:50] actually just separate images. [15:51] >> Yeah. Sick. I love this. Wow. What a [15:54] swap that was. Folks, if you have any [15:57] cool stuff that you're seeing around the [15:58] web, I know we're all seeing cool stuff. [16:00] I actually my list of cool stuff is [16:02] miles long, but if you're seeing cool [16:04] stuff, you want to see us dive into it, [16:07] break it down, or explain it or even [16:09] just check out some neat techniques or [16:11] something you want to uh bring to the [16:13] class and show, hit us up. Leave a [16:15] comment below in this video. Let us know [16:17] what you think, what you're finding [16:19] that's cool, or do you hate it all and [16:20] you just want to see a blank ass [16:22] website? So, [16:24] peace. [16:25] >> Peace. ## Highlights - 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 ([View Highlight](https://read.readwise.io/read/01kcc9kbe8s369tkg3wx76s3pp)) - Tags: 👻 ai highlighted - 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 ([View Highlight](https://read.readwise.io/read/01kcc9kbfh80etpqm3h9r0d5d2)) - Tags: 👻 ai highlighted - 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 ([View Highlight](https://read.readwise.io/read/01kcc9kbhcsytapbv82s0k5bsn)) - Tags: 👻 ai highlighted