Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Reacting to State of CSS Survey

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 go over some of the results the State of CSS survey for 2023, including drop-shadow, subgrid, logical properties, media range, and more! <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:25">00:25:21</a> Welcome</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="#t=01:31">01:31:22</a> Soccer update</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="#t=03:52">03:52:05</a> Syntax Brought to you by Sentry</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="#t=04:03">04:03:18</a> <a href= "http://StateOfCSS.com">StateOfCSS.com</a></li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="https://2023.stateofcss.com/en-US">State of CSS 2023</a></li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="#t=04:21">04:21:11</a> Top 5 Most Used Features</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="#t=09:13">09:13:09</a> Drop-shadow</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="#t=13:00">13:00:11</a> Subgrid</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="#t=18:31">18:31:21</a> Logical properties</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="#t=20:11">20:11:20</a> Media range</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="#t=20:52">20:52:11</a> Object view box</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="#t=23:10">23:10:14</a> Anchor positioning</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="#t=28:21">28:21:09</a> Intrinsic sizing keywords</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="#t=29:32">29:32:00</a> View Transitions API</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="https://caniuse.com/">Can I use… Support tables for HTML5, CSS3, etc</a></li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="https://astro.build/">Astro</a></li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href= "https://syntax.fm/show/580/supper-club-astro-2-0-with-fred-schott"> Supper Club × Astro 2.0 with Fred Schott — Syntax Podcast 580</a></li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="#t=31:43">31:43:18</a> Updates to colors in CSS</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="#t=35:07">35:07:05</a> Accent color, current color</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="#t=36:36">36:36:11</a> Scroll snap and overscroll behaviour</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="#t=39:04">39:04:22</a> Touch action</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="#t=40:16">40:16:01</a> Line clamp or variable font</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <a href="https://v-fonts.com/">Variable Fonts</a></li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href="#t=45:28">45:28:11</a> Accessibility features</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href="#t=48:33">48:33:12</a> :Has has jumped</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href="#t=49:32">49:32:11</a> @Property</li> <li class="has-line-data" data-line-start="30" data-line-end="32"> <a href="#t=53:52">53:52:13</a> SIIIIICK ××× PIIIICKS ×××</li> </ul> <h2 class="code-line" data-line-start="32" data-line-end="33"> <a id="_SIIIIICK__PIIIICKS__32"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="34" data-line-end="35"> Scott: <a href= "https://www.amazon.com/dp/B08BR4QV8Z?th=1&linkCode=sl1&linkId=30dd8a123a0b101f6e0e4e2edcc170b4&language=en_US"> Kodiak Cakes Strawberries & Cream Oatmeal Packets (Pack of 6)</a></li> <li class="has-line-data" data-line-start="35" data-line-end="37"> Wes: <a href= "https://www.amazon.ca/s?k=BEABA+Clip+Containers,+Food+Storage+Containers,+Baby+Food+Storage+Containers+with+Lid,+Baby+Food+and+Toddler+Snack+Containers,+Baby+Essentials,+(Small)&linkCode=gs3&linkId=5c63a9bbd7c096ed4e1144ec769d870a&tag=isi777-20"> Food Storage Containers, Baby Food Storage Containers with Lid, Baby Food and Toddler Snack Containers</a></li> </ul> <h2 class="code-line" data-line-start="37" data-line-end="38"> <a id="Shameless_Plugs_37"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="39" data-line-end="40"> Scott: <a href="https://www.tiktok.com/@sntaxfm">Syntax Podcast (@syntaxfm) | TikTok</a></li> <li class="has-line-data" data-line-start="40" data-line-end="42"> Wes: <a href="https://fitc.ca/event/webu23/">Web Unleashed 2023 - FITC</a></li> </ul> <h2 class="code-line" data-line-start="42" data-line-end="43"> <a id="Tweet_us_your_tasty_treats_42"></a>Tweet us your tasty treats</h2> <ul> <li class="has-line-data" data-line-start="44" data-line-end="45"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="48" data-line-end="49"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="50" data-line-end="51"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href="https://bsky.app/profile/wesbos.com">Wes Bos on Bluesky</a></li> <li class="has-line-data" data-line-start="52" data-line-end="53"> <a href="https://bsky.app/profile/tolin.ski">Scott on Bluesky</a></li> <li class="has-line-data" data-line-start="53" data-line-end="54"> <a href="https://bsky.app/profile/syntax.fm">Syntax on Bluesky</a></li> </ul>

In this episode of Syntax, Wes and Scott go over some of the results the State of CSS survey for 2023, including drop-shadow, subgrid, logical properties, media range, and more!
 Show Notes  00:25:21 Welcome
 01:31:22 Soccer update
 03:52:05 Syntax Brought to you by Sentry
 04:03:18 StateOfCSS.com

 State of CSS 2023

 04:21:11 Top 5 Most Used Features
 09:13:09 Drop-shadow
 13:00:11 Subgrid
 18:31:21 Logical properties
 20:11:20 Media range
 20:52:11 Object view box
 23:10:14 Anchor positioning
 28:21:09 Intrinsic sizing keywords
 29:32:00 View Transitions API
 Can I use… Support tables for HTML5, CSS3, etc

 Astro

  Supper Club × Astro 2.0 with Fred Schott — Syntax Podcast 580

 31:43:18 Updates to colors in CSS
 35:07:05 Accent color, current color
 36:36:11 Scroll snap and overscroll behaviour
 39:04:22 Touch action
 40:16:01 Line clamp or variable font
 Variable Fonts

 45:28:11 Accessibility features
 48:33:12 :Has has jumped
 49:32:11 @Property
 53:52:13 SIIIIICK ××× PIIIICKS ×××
  ××× SIIIIICK ××× PIIIICKS ×××  Scott: Kodiak Cakes Strawberries & Cream Oatmeal Packets (Pack of 6)

 Wes: Food Storage Containers, Baby Food Storage Containers with Lid, Baby Food and Toddler Snack Containers

  Shameless Plugs  Scott: Syntax Podcast (@syntaxfm) | TikTok

 Wes: Web Unleashed 2023 - FITC

  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

Reacting to State of CSS Survey

Poslechněte si podcast