Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

2022 CSS Trends and Usage Web Almanac

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 talk about some of the CSS Trends and Usage for 2022 as documented by the Web Almanac - and give some great cleaning tips along the way.</p> <h2 class="code-line" data-line-start="2" data-line-end="3"><a id= "Prismic___Sponsor_2" name="Prismic___Sponsor_2"></a>Prismic - Sponsor</h2> <p class="has-line-data" data-line-start="4" data-line-end="5"> Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at <a href= "https://prismic.io/syntax">prismic.io/syntax</a>.</p> <h2 class="code-line" data-line-start="6" data-line-end="7"><a id= "LogRocket__Sponsor_6" name="LogRocket__Sponsor_6"></a>LogRocket - Sponsor</h2> <p class="has-line-data" data-line-start="8" data-line-end="9"> LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>.</p> <h2 class="code-line" data-line-start="10" data-line-end="11"> <a id="Freshbooks__Sponsor_10" name= "Freshbooks__Sponsor_10"></a>Freshbooks - Sponsor</h2> <p class="has-line-data" data-line-start="12" data-line-end="13"> Get a 30 day free trial of Freshbooks at <a href= "https://freshbooks.com/syntax">freshbooks.com/syntax</a></p> <h2 class="code-line" data-line-start="14" data-line-end="15"> <a id="Show_Notes_14" name="Show_Notes_14"></a>Show Notes</h2> <ul> <li class="has-line-data" data-line-start="16" data-line-end="17"> <strong><a href="#t=00:10">00:10</a></strong> Welcome</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <strong><a href="#t=02:15">02:15</a></strong> Cleaning Sick Pick</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="https://barkeepersfriend.com">Bar Keepers Friend</a></li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <strong><a href="#t=04:40">04:40</a></strong> Web Almanac</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="https://almanac.httparchive.org/">Web Almanac</a></li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <strong><a href="#t=08:23">08:23</a></strong> CSS stylesheets size grow</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <strong><a href="#t=09:49">09:49</a></strong> Popular CSS Class names</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <strong><a href="#t=15:29">15:29</a></strong> How many websites use !important?</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <strong><a href="#t=18:11">18:11</a></strong> Popular pseudo classes</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <strong><a href="#t=20:27">20:27</a></strong> Sponsor: Prismic</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <strong><a href="#t=21:38">21:38</a></strong> CSS Attribute Selectors</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <strong><a href="#t=27:03">27:03</a></strong> Most popular units</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <strong><a href="#t=32:23">32:23</a></strong> calc properties</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <strong><a href="#t=33:13">33:13</a></strong> Sponsor: LogRocket</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <strong><a href="#t=35:15">35:15</a></strong> Top operators when using calc</li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <strong><a href="#t=36:21">36:21</a></strong> Custom Property Names</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <strong><a href="#t=37:39">37:39</a></strong> Property Value types</li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <strong><a href="#t=38:00">38:00</a></strong> Functions</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <strong><a href="#t=39:27">39:27</a></strong> Color names</li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <strong><a href="#t=42:02">42:02</a></strong> Format of color</li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <strong><a href="#t=43:50">43:50</a></strong> Most popular gardient on the web</li> <li class="has-line-data" data-line-start="37" data-line-end="38"> <strong><a href="#t=47:27">47:27</a></strong> Sponsor: Freshbooks</li> <li class="has-line-data" data-line-start="38" data-line-end="39"> <strong><a href="#t=47:57">47:57</a></strong> We don’t know the web</li> <li class="has-line-data" data-line-start="39" data-line-end="41"> <strong><a href="#t=50:39">50:39</a></strong> SIIIIICK ××× PIIIICKS ×××</li> </ul> <h2 class="code-line" data-line-start="41" data-line-end="42"> <a id="_SIIIIICK__PIIIICKS__41" name= "_SIIIIICK__PIIIICKS__41"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="43" data-line-end="44"> Scott: <a href="https://amzn.to/3SStChK">Dawn</a></li> <li class="has-line-data" data-line-start="44" data-line-end="46"> Wes: <a href="https://amzn.to/3CtIuO8">Flat speaker wire</a></li> </ul> <h2 class="code-line" data-line-start="46" data-line-end="47"> <a id="Shameless_Plugs_46" name="Shameless_Plugs_46"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="48" data-line-end="49"> Scott: <a href="https://leveluptutorials.com/">LevelUp Tutorials</a></li> <li class="has-line-data" data-line-start="49" data-line-end="51"> Wes: <a href="https://wesbos.com/courses">Wes Bos Tutorials</a></li> </ul> <h2 class="code-line" data-line-start="51" data-line-end="52"> <a id="Tweet_us_your_tasty_treats_51" name= "Tweet_us_your_tasty_treats_51"></a>Tweet us your tasty treats</h2> <ul> <li class="has-line-data" data-line-start="53" data-line-end="54"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="54" data-line-end="55"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="55" data-line-end="56"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="57" data-line-end="58"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="58" data-line-end="59"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="59" data-line-end="60"> 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 talk about some of the CSS Trends and Usage for 2022 as documented by the Web Almanac - and give some great cleaning tips along the way.
 Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.
 LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
 Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
 Show Notes  00:10 Welcome
 02:15 Cleaning Sick Pick
 Bar Keepers Friend

 04:40 Web Almanac
 Web Almanac

 08:23 CSS stylesheets size grow
 09:49 Popular CSS Class names
 15:29 How many websites use !important?
 18:11 Popular pseudo classes
 20:27 Sponsor: Prismic
 21:38 CSS Attribute Selectors
 27:03 Most popular units
 32:23 calc properties
 33:13 Sponsor: LogRocket
 35:15 Top operators when using calc
 36:21 Custom Property Names
 37:39 Property Value types
 38:00 Functions
 39:27 Color names
 42:02 Format of color
 43:50 Most popular gardient on the web
 47:27 Sponsor: Freshbooks
 47:57 We don’t know the web
 50:39 SIIIIICK ××× PIIIICKS ×××
  ××× SIIIIICK ××× PIIIICKS ×××  Scott: Dawn

 Wes: Flat speaker wire

  Shameless Plugs  Scott: LevelUp Tutorials

 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

2022 CSS Trends and Usage Web Almanac

Poslechněte si podcast