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. <a id= "Prismic___Sponsor_2" name="Prismic___Sponsor_2"></a>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 <a href= "https://prismic.io/syntax">prismic.io/syntax</a>. <a id= "LogRocket__Sponsor_6" name="LogRocket__Sponsor_6"></a>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 <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>. <a id="Freshbooks__Sponsor_10" name= "Freshbooks__Sponsor_10"></a>Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at <a href= "https://freshbooks.com/syntax">freshbooks.com/syntax</a> <a id="Show_Notes_14" name="Show_Notes_14"></a>Show Notes <ul> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="#t=00:10">00:10</a> Welcome</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="#t=02:15">02:15</a> 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"> <a href="#t=04:40">04:40</a> 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"> <a href="#t=08:23">08:23</a> CSS stylesheets size grow</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="#t=09:49">09:49</a> Popular CSS Class names</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="#t=15:29">15:29</a> How many websites use !important?</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="#t=18:11">18:11</a> Popular pseudo classes</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="#t=20:27">20:27</a> Sponsor: Prismic</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <a href="#t=21:38">21:38</a> CSS Attribute Selectors</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href="#t=27:03">27:03</a> Most popular units</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href="#t=32:23">32:23</a> calc properties</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href="#t=33:13">33:13</a> Sponsor: LogRocket</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href="#t=35:15">35:15</a> Top operators when using calc</li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href="#t=36:21">36:21</a> Custom Property Names</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <a href="#t=37:39">37:39</a> Property Value types</li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <a href="#t=38:00">38:00</a> Functions</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <a href="#t=39:27">39:27</a> Color names</li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <a href="#t=42:02">42:02</a> Format of color</li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <a href="#t=43:50">43:50</a> Most popular gardient on the web</li> <li class="has-line-data" data-line-start="37" data-line-end="38"> <a href="#t=47:27">47:27</a> Sponsor: Freshbooks</li> <li class="has-line-data" data-line-start="38" data-line-end="39"> <a href="#t=47:57">47:57</a> We don’t know the web</li> <li class="has-line-data" data-line-start="39" data-line-end="41"> <a href="#t=50:39">50:39</a> SIIIIICK ××× PIIIICKS ×××</li> </ul> <a id="_SIIIIICK__PIIIICKS__41" name= "_SIIIIICK__PIIIICKS__41"></a>××× SIIIIICK ××× PIIIICKS ××× <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> <a id="Shameless_Plugs_46" name="Shameless_Plugs_46"></a>Shameless Plugs <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> <a id="Tweet_us_your_tasty_treats_51" name= "Tweet_us_your_tasty_treats_51"></a>Tweet us your tasty treats <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>

Podurama

Home

Trending

Personal

Your Podcasts

New Episodes

My Files

Favourite Episodes

Tags (Folders)

Recently Played

Bookmarks

Followed Playlists

2022 CSS Trends and Usage Web Almanac

Syntax - Tasty Web Development Treats