Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

695: 5 New CSS Features You Should Know

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

In this episode of Syntax, Wes and Scott talk about 5 new CSS features :nth-child(4 of .neat), CSS Motion Path, Scroll Snap, Scroll Driven Animations, and Margin Trim. <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <a href="#t=00:25">00:25</a> Welcome</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="#t=01:10">01:10</a> :nth-child(4 of .neat)</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="https://caniuse.com/css-nth-child-of">selector list argument of :nth-child and :nth-last-child CSS pseudo-classes | Can I use</a></li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="#t=06:43">06:43</a> CSS Motion Path</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="#t=10:38">10:38</a> Scroll Snap</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href= "https://css-tricks.com/practical-css-scroll-snapping/">Practical CSS Scroll Snapping</a></li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="#t=14:36">14:36</a> Scroll Driven Animations</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="https://scroll-driven-animations.style/">Scroll-driven Animations</a></li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href= "https://syntax.fm/show/619/supper-club-bramus-van-damme-on-css">Supper Club × Bramus Van Damme on CSS</a></li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="#t=16:58">16:58</a> Margin Trim</li> </ul> <h3 class="code-line" data-line-start="16" data-line-end="17"> <a id="Hit_us_up_on_Socials_16"></a>Hit us up on Socials!</h3> Syntax: <a href="https://twitter.com/syntaxfm">X</a> <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> <a href="https://www.threads.net/@syntax_fm">Threads</a> Wes: <a href="https://twitter.com/wesbos">X</a> <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: <a href="https://twitter.com/stolinski">X</a> <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a>

In this episode of Syntax, Wes and Scott talk about 5 new CSS features :nth-child(4 of.neat), CSS Motion Path, Scroll Snap, Scroll Driven Animations, and Margin Trim.
 Show Notes  00:25 Welcome
 01:10 :nth-child(4 of.neat)
 selector list argument of :nth-child and :nth-last-child CSS pseudo-classes | Can I use

 06:43 CSS Motion Path
 10:38 Scroll Snap
 Practical CSS Scroll Snapping

 14:36 Scroll Driven Animations
 Scroll-driven Animations

 Supper Club × Bramus Van Damme on CSS

 16:58 Margin Trim
  Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
 Wes: X Instagram Tiktok LinkedIn Threads
 Scott: X Instagram Tiktok LinkedIn Threads

Aplikace Youradio Talk

695: 5 New CSS Features You Should Know

Poslechněte si podcast