Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Supper Club × Bramus Van Damme on 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.

<p class="has-line-data" data-line-start="0" data-line-end="1">In this supper club episode of Syntax, Wes and Scott talk with Bramus Van Damme all about CSS, what the CSS Working Group is, how he got good at blogging, setting custom property types in CSS, view transition API, and so much more.</p> <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"> <strong><a href="#t=00:35">00:35</a></strong> Welcome Bramus Van Damme</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=02:29">02:29</a></strong> Who is Bramus?</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="https://www.linkedin.com/in/bramus/">Bramus Van Damme - Developer Relations Engineer - LinkedIn</a></li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="https://www.bram.us/category/original-content/">Original Content – Bram.us</a></li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="https://twitter.com/bramus">Bramus on Twitter (@bramus)</a></li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="https://github.com/bramus/">bramus on GitHub (Bramus!)</a></li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <strong><a href="#t=03:33">03:33</a></strong> What is the CSS Working Group?</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="https://www.w3.org/blog/CSS/">CSS WG Blog</a></li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="https://github.com/w3c/csswg-drafts">w3c/csswg-drafts: CSS Working Group Editor Drafts</a></li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <strong><a href="#t=11:18">11:18</a></strong> How did you get so good at blogging?</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="https://web.dev/css-trig-functions/">CSS Trig functions</a></li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <strong><a href="#t=14:02">14:02</a></strong> Scroll Driven Animations</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href= "https://www.bram.us/2022/10/27/scroll-linked-animations-with-scrolltimeline-and-viewtimeline/"> Bram.us: Scroll linked animations with scrolltimeline and viewtimeline/</a></li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href= "https://developer.chrome.com/articles/scroll-driven-animations/">Chrome Dev blog: Scroll driven animations/</a></li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href= "https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline"> MDN Animation timeline</a></li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href= "https://scroll-driven-animations.style/">Scroll-driven-animations.style</a></li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <strong><a href="#t=25:53">25:53</a></strong> What’s going on with Houdini?</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href= "https://ishoudinireadyyet.com/">IsHoudiniReadyYet.com</a></li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="https://web.dev/css-props-and-vals/">CSS Props and Vals</a></li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <strong><a href="#t=27:09">27:09</a></strong> Why do you need to set a custom property type in CSS?</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <strong><a href="#t=29:08">29:08</a></strong> How do you debug values in CSS?</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <strong><a href="#t=30:12">30:12</a></strong> What is Scope Styling?</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <strong><a href="#t=34:50">34:50</a></strong> But when can I use it?</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <strong><a href="#t=36:18">36:18</a></strong> What’s the status of the view transition API?</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href= "https://developer.chrome.com/docs/web-platform/view-transitions/">View Transitions</a></li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <strong><a href="#t=40:53">40:53</a></strong> What are you looking forward to in CSS?</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <strong><a href="#t=42:19">42:19</a></strong> Would CSS ever get a strict mode?</li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <strong><a href="#t=47:05">47:05</a></strong> Supper Club Questions</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <a href="https://zsh.sourceforge.io/">ZSH - THE Z SHELL</a></li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <a href="https://github.com/zsh-users/antigen">zsh-users/antigen: The plugin manager for zsh.</a></li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <a href="https://web.dev/">web.dev</a></li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <a href="https://developer.chrome.com/en/blog/">Blog - Chrome Developers</a></li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <a href="https://feedly.com/">Welcome to Feedly</a></li> <li class="has-line-data" data-line-start="37" data-line-end="39"> <strong><a href="#t=52:40">52:40</a></strong> SIIIIICK ××× PIIIICKS ×××</li> </ul> <h2 class="code-line" data-line-start="39" data-line-end="40"> <a id="_SIIIIICK__PIIIICKS__39"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="41" data-line-end="43"> Meetups</li> </ul> <h2 class="code-line" data-line-start="43" data-line-end="44"> <a id="Shameless_Plugs_43"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="45" data-line-end="47"> <a href= "https://scroll-driven-animations.style/">Scroll-driven-animations.style</a></li> </ul> <h2 class="code-line" data-line-start="47" data-line-end="48"> <a id="Tweet_us_your_tasty_treats_47"></a>Tweet us your tasty treats</h2> <ul> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="52" data-line-end="53"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="53" data-line-end="54"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="54" data-line-end="55"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="55" data-line-end="56"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href="https://bsky.app/profile/syntax.fm/wesbos.com">Wes Bos on Bluesky</a></li> <li class="has-line-data" data-line-start="57" data-line-end="58"> <a href="https://bsky.app/profile/tolin.ski">Scott on Bluesky</a></li> <li class="has-line-data" data-line-start="58" data-line-end="59"> <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 Bramus Van Damme all about CSS, what the CSS Working Group is, how he got good at blogging, setting custom property types in CSS, view transition API, and so much more.
 Show Notes  00:35 Welcome Bramus Van Damme
 02:29 Who is Bramus?
 Bramus Van Damme - Developer Relations Engineer - LinkedIn

 Original Content – Bram.us

 Bramus on Twitter (@bramus)

 bramus on GitHub (Bramus!)

 03:33 What is the CSS Working Group?
 CSS WG Blog

 w3c/csswg-drafts: CSS Working Group Editor Drafts

 11:18 How did you get so good at blogging?
 CSS Trig functions

 14:02 Scroll Driven Animations
  Bram.us: Scroll linked animations with scrolltimeline and viewtimeline/

 Chrome Dev blog: Scroll driven animations/

  MDN Animation timeline

 Scroll-driven-animations.style

 25:53 What’s going on with Houdini?
 IsHoudiniReadyYet.com

 CSS Props and Vals

 27:09 Why do you need to set a custom property type in CSS?
 29:08 How do you debug values in CSS?
 30:12 What is Scope Styling?
 34:50 But when can I use it?
 36:18 What’s the status of the view transition API?
 View Transitions

 40:53 What are you looking forward to in CSS?
 42:19 Would CSS ever get a strict mode?
 47:05 Supper Club Questions
 ZSH - THE Z SHELL

 zsh-users/antigen: The plugin manager for zsh.

 web.dev

 Blog - Chrome Developers

 Welcome to Feedly

 52:40 SIIIIICK ××× PIIIICKS ×××
  ××× SIIIIICK ××× PIIIICKS ×××  Meetups
  Shameless Plugs  Scroll-driven-animations.style

  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 × Bramus Van Damme on CSS

Poslechněte si podcast