Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Supper Club × Adam Argyle on What's New in CSS

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 supper club episode of Syntax, Wes and Scott talk with Adam Argyle about a ton of new CSS features that have arrived or are coming soon, as well as his new site Gradient.style. <h2 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h2> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <a href="#t=00:34">00:34</a> Welcome</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="#t=01:05">01:05</a> Guest introduction</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="https://bsky.app/profile/nerdy.dev">Adam on Bluesky</a></li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="https://twitter.com/argyleink">Adam on Twitter</a></li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="#t=01:48">01:48</a> CSS buckets</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href= "https://nerdy.dev/new-relative-units-ric-rex-rlh-and-rch">New CSS Relative Units · January 6, 2023</a></li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="#t=03:16">03:16</a> rex rch ric rlh</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="#t=08:06">08:06</a> Gradient.style</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="https://gradient.style/">CSS HD Gradients</a></li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="https://open-props.style/">Open Props: sub-atomic styles</a></li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="#t=13:49">13:49</a> What are style queries vs container queries vs state queries?</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="https://una.im/style-queries/">una.im | Style Queries</a></li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="https://developer.chrome.com/blog/style-queries/">Getting Started with Style Queries - Chrome Developers</a></li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="https://caniuse.com/css-container-queries-style">CSS Container Style Queries | Can I use… Support tables for HTML5, CSS3, etc</a></li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="#t=18:09">18:09</a> Trig functions</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href= "https://web.dev/css-trig-functions/#:~:text=The%20core%20three%20%E2%80%9Ctrig%20functions,between%20%E2%88%92%E2%88%9E%20and%20%2B%E2%88%9E%20"> Trigonometric functions in CSS</a></li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="https://codepen.io/web-dot-dev/pen/ExePgOg">CSS Trigonometric Functions: cos() and sin(): dots on a circle</a></li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="#t=19:57">19:57</a> Live transitions</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href= "https://www.creativebloq.com/advice/understand-the-12-principles-of-animation"> Understand Disney’s 12 principles of animation | Creative Bloq</a></li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="#t=25:08">25:08</a> View transitions</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="https://live-transitions.pages.dev/">View Transitions Demo</a></li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href= "https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API"> View Transitions API - Web APIs | MDN</a></li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <a href="#t=26:01">26:01</a> Text-wrap balance</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href= "https://developer.chrome.com/blog/css-text-wrap-balance/">CSS text-wrap: balance - Chrome Developers</a></li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href="#t=26:45">26:45</a> Text-wrap pretty</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href="#t=27:44">27:44</a> What’s the future of the browser landscape?</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href="#t=31:44">31:44</a> nth-child(An+B [of S])</li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href="#t=33:06">33:06</a> Cascade layers</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <a href="#t=34:40">34:40</a> CSS Nesting</li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <a href="#t=38:03">38:03</a> Animate discrete properties</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <a href="#t=39:42">39:42</a> Linear function</li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <a href="https://linear-easing-generator.netlify.app/">Linear easing generator</a></li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <a href="#t=41:33">41:33</a> Media query range syntax</li> <li class="has-line-data" data-line-start="37" data-line-end="38"> <a href="#t=42:04">42:04</a> Subgrid everywhere</li> <li class="has-line-data" data-line-start="38" data-line-end="39"> <a href="#t=44:41">44:41</a> Media query range and variables?</li> <li class="has-line-data" data-line-start="39" data-line-end="40"> <a href="https://syntax.fm/">UI Elements - Basics, Best Practice, and Built Ins — Syntax Podcast 612</a></li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <a href="#t=45:32">45:32</a> env variables</li> <li class="has-line-data" data-line-start="41" data-line-end="42"> <a href= "https://syntax.fm/show/343/hasty-treat-css-nesting-1">Hasty Treat - CSS Nesting 1 — Syntax Podcast 343</a></li> <li class="has-line-data" data-line-start="42" data-line-end="43"> <a href="#t=46:59">46:59</a> Animation composition</li> <li class="has-line-data" data-line-start="43" data-line-end="44"> <a href="#t=49:50">49:50</a> Select menu HTML element</li> <li class="has-line-data" data-line-start="44" data-line-end="46"> <a href="#t=52:16">52:16</a> SIIIIICK ××× PIIIICKS ×××</li> </ul> <h2 class="code-line" data-line-start="46" data-line-end="47"> <a id="_SIIIIICK__PIIIICKS__46"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <h2 class="code-line" data-line-start="48" data-line-end="49"> <a id="Shameless_Plugs_48"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href="https://onewheel.com/">Onewheel // Future Motion</a></li> <li class="has-line-data" data-line-start="51" data-line-end="53"> <a href="https://nerdy.dev/">Adam Argyle</a></li> </ul> <h2 class="code-line" data-line-start="53" data-line-end="54"> <a id="Tweet_us_your_tasty_treats_53"></a>Tweet us your tasty treats</h2> <ul> <li class="has-line-data" data-line-start="55" data-line-end="56"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="57" data-line-end="58"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="58" data-line-end="59"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="59" data-line-end="60"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="60" data-line-end="61"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="61" data-line-end="62"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> <li class="has-line-data" data-line-start="62" data-line-end="63"> <a href="https://bsky.app/profile/syntax.fm/wesbos.com">Wes Bos on Bluesky</a></li> <li class="has-line-data" data-line-start="63" data-line-end="64"> <a href="https://bsky.app/profile/tolin.ski">Scott on Bluesky</a></li> <li class="has-line-data" data-line-start="64" data-line-end="65"> <a href="https://bsky.app/profile/syntax.fm">Syntax on Bluesky</a></li> </ul>

In this supper club episode of Syntax, Wes and Scott talk with Adam Argyle about a ton of new CSS features that have arrived or are coming soon, as well as his new site Gradient.style.
 Show Notes  00:34 Welcome
 01:05 Guest introduction
 Adam on Bluesky

 Adam on Twitter

 01:48 CSS buckets
 New CSS Relative Units · January 6, 2023

 03:16 rex rch ric rlh
 08:06 Gradient.style
 CSS HD Gradients

 Open Props: sub-atomic styles

 13:49 What are style queries vs container queries vs state queries?
 una.im | Style Queries

 Getting Started with Style Queries - Chrome Developers

 CSS Container Style Queries | Can I use… Support tables for HTML5, CSS3, etc

 18:09 Trig functions
  Trigonometric functions in CSS

 CSS Trigonometric Functions: cos() and sin(): dots on a circle

 19:57 Live transitions
  Understand Disney’s 12 principles of animation | Creative Bloq

 25:08 View transitions
 View Transitions Demo

  View Transitions API - Web APIs | MDN

 26:01 Text-wrap balance
 CSS text-wrap: balance - Chrome Developers

 26:45 Text-wrap pretty
 27:44 What’s the future of the browser landscape?
 31:44 nth-child(An+B [of S])
 33:06 Cascade layers
 34:40 CSS Nesting
 38:03 Animate discrete properties
 39:42 Linear function
 Linear easing generator

 41:33 Media query range syntax
 42:04 Subgrid everywhere
 44:41 Media query range and variables?
 UI Elements - Basics, Best Practice, and Built Ins — Syntax Podcast 612

 45:32 env variables
 Hasty Treat - CSS Nesting 1 — Syntax Podcast 343

 46:59 Animation composition
 49:50 Select menu HTML element
 52:16 SIIIIICK ××× PIIIICKS ×××
  ××× SIIIIICK ××× PIIIICKS ××× Shameless Plugs  Onewheel // Future Motion

 Adam Argyle

  Tweet us your tasty treats  Scott’s Instagram

 LevelUpTutorials Instagram

 Wes’ Instagram

 Wes’ Twitter

 Wes’ Facebook

 Scott’s Twitter

 Make sure to include @SyntaxFM in your tweets
 Wes Bos on Bluesky

 Scott on Bluesky

 Syntax on Bluesky

Aplikace Youradio Talk

Supper Club × Adam Argyle on What's New in CSS

Poslechněte si podcast