Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Can Vanilla CSS Replace Sass Yet?

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 episode of Syntax, Wes and Scott go through all the features of Sass and decide where we are at with Native CSS alternatives, giving each feature a rating of replaceable, plausible, or missing.</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:11">00:11</a></strong> Welcome</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=01:17">01:17</a></strong> Easter updates</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <strong><a href="#t=04:17">04:17</a></strong> Getting into Sass</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <strong><a href="#t=06:03">06:03</a></strong> What is PostCSS?</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <strong><a href="#t=09:52">09:52</a></strong> CSS Variables</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <strong><a href="#t=13:49">13:49</a></strong> CSS Nesting</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="https://developer.chrome.com/articles/css-nesting/">CSS Nesting - Chrome Developers</a></li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href= "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting"> postcss-plugins/plugins/postcss-nesting at main · csstools/postcss-plugins</a></li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <strong><a href="#t=23:13">23:13</a></strong> Colors</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="https://syntax.fm/show/479/css5-color-functions">CSS5 Color Functions — Syntax Podcast 479</a></li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <strong><a href="#t=29:08">29:08</a></strong> CSS Looping</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <strong><a href="#t=34:20">34:20</a></strong> Mixins or extends</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <strong><a href="#t=39:34">39:34</a></strong> CSS Partials</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="https://preset-env.cssdb.org/features/#color-mix">Features - PostCSS Preset Env - CSSTools</a></li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <strong><a href="#t=44:29">44:29</a></strong> CSS Math</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <strong><a href="#t=49:40">49:40</a></strong> Functions</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="https://ishoudinireadyyet.com/">Is Houdini Ready Yet?</a></li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <strong><a href="#t=52:04">52:04</a></strong> Firefox and Safari support</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <strong><a href="#t=55:08">55:08</a></strong> Back to Functions</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <strong><a href="#t=56:21">56:21</a></strong> BEM Syntax</li> <li class="has-line-data" data-line-start="24" data-line-end="26"> <strong><a href="#t=58:51">58:51</a></strong> SIIIIICK ××× PIIIICKS ×××</li> </ul> <h2 class="code-line" data-line-start="26" data-line-end="27"> <a id="_SIIIIICK__PIIIICKS__26"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="28" data-line-end="29"> Scott: <a href="https://amzn.to/3mpIiuc">Solar Lantern</a></li> <li class="has-line-data" data-line-start="29" data-line-end="31"> Wes: <a href="https://amzn.to/3MwaMNd">Cotton Candy Machine</a></li> </ul> <h2 class="code-line" data-line-start="31" data-line-end="32"> <a id="Shameless_Plugs_31"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="33" data-line-end="34"> Scott: <a href="https://sentry.io">Sentry</a></li> <li class="has-line-data" data-line-start="34" data-line-end="36"> Wes: <a href="https://wesbos.com/courses">Wes Bos Tutorials</a></li> </ul> <h2 class="code-line" data-line-start="36" data-line-end="37"> <a id="Tweet_us_your_tasty_treats_36"></a>Tweet us your tasty treats</h2> <ul> <li class="has-line-data" data-line-start="38" data-line-end="39"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="39" data-line-end="40"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="41" data-line-end="42"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="42" data-line-end="43"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="43" data-line-end="44"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="44" data-line-end="45"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this episode of Syntax, Wes and Scott go through all the features of Sass and decide where we are at with Native CSS alternatives, giving each feature a rating of replaceable, plausible, or missing.
 Show Notes  00:11 Welcome
 01:17 Easter updates
 04:17 Getting into Sass
 06:03 What is PostCSS?
 09:52 CSS Variables
 13:49 CSS Nesting
 CSS Nesting - Chrome Developers

  postcss-plugins/plugins/postcss-nesting at main · csstools/postcss-plugins

 23:13 Colors
 CSS5 Color Functions — Syntax Podcast 479

 29:08 CSS Looping
 34:20 Mixins or extends
 39:34 CSS Partials
 Features - PostCSS Preset Env - CSSTools

 44:29 CSS Math
 49:40 Functions
 Is Houdini Ready Yet?

 52:04 Firefox and Safari support
 55:08 Back to Functions
 56:21 BEM Syntax
 58:51 SIIIIICK ××× PIIIICKS ×××
  ××× SIIIIICK ××× PIIIICKS ×××  Scott: Solar Lantern

 Wes: Cotton Candy Machine

  Shameless Plugs  Scott: Sentry

 Wes: Wes Bos Tutorials

  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

Aplikace Youradio Talk

Can Vanilla CSS Replace Sass Yet?

Poslechněte si podcast