Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

CSS Trends Almanac for 2022 Part 2

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, it’s part 2 of Wes and Scott’s journey through the CSS Trends Almanac for 2022 talking through the rest of the popular CSS properties on the web.</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= "Sanity__Sponsor_6" name="Sanity__Sponsor_6"></a>Sanity - Sponsor</h2> <p class="has-line-data" data-line-start="8" data-line-end="9"> <a href="http://Sanity.io">Sanity.io</a> is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at <a href= "https://www.sanity.io/create">sanity.io/create</a>. Get an awesome supercharged free developer plan on <a href= "https://www.sanity.io/syntax">sanity.io/syntax</a>.</p> <h2 class="code-line" data-line-start="10" data-line-end="11"> <a id="LogRocket__Sponsor_10" name= "LogRocket__Sponsor_10"></a>LogRocket - Sponsor</h2> <p class="has-line-data" data-line-start="12" data-line-end="13"> 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="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:06">00:06</a></strong> Welcome</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href= "https://syntax.fm/show/525/2022-css-trends-and-usage-web-almanac">Syntax 525 - 2022 CSS Trends and Usage Web Almanac Part 1</a></li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <strong><a href="#t=01:22">01:22</a></strong> Smart home updates</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <strong><a href="#t=04:05">04:05</a></strong> Box sizing: border box</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <strong><a href="#t=06:57">06:57</a></strong> CSS Columns</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <strong><a href="#t=09:20">09:20</a></strong> Aspect Ratio</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="https://caniuse.com/mdn-css_properties_rotate">Can I Use CSS Properties Rotate</a></li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <strong><a href="#t=09:53">09:53</a></strong> Transitions and animations</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <strong><a href="#t=13:36">13:36</a></strong> Transition time</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <strong><a href="#t=17:05">17:05</a></strong> Steps as a timing function</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <strong><a href="#t=19:01">19:01</a></strong> Sponsor: Prismic</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <strong><a href="#t=19:43">19:43</a></strong> Blend modes</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <strong><a href="#t=23:57">23:57</a></strong> Responsive web design</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <strong><a href="#t=26:31">26:31</a></strong> Prefers Color Scheme</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <strong><a href="#t=27:48">27:48</a></strong> Popular breakpoints</li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <strong><a href="#t=30:57">30:57</a></strong> Sponsor: LogRocket</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <strong><a href="#t=32:06">32:06</a></strong> Feature queries and @ supports</li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <strong><a href="#t=34:59">34:59</a></strong> Logical and physical properties</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <strong><a href="#t=37:59">37:59</a></strong> css-in-js</li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <a href= "https://dev.to/srmagura/why-were-breaking-up-wiht-css-in-js-4g9b">Sam Magura - Why We’re Breaking Up with CSS-in-JS</a></li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <a href= "https://bradfrost.com/blog/link/why-were-breaking-up-with-css-in-js/"> Brad Frost - Why We’re Breaking Up with CSS in JS</a></li> <li class="has-line-data" data-line-start="37" data-line-end="38"> <strong><a href="#t=42:28">42:28</a></strong> Sass</li> <li class="has-line-data" data-line-start="38" data-line-end="39"> <strong><a href="#t=43:20">43:20</a></strong> Print styles</li> <li class="has-line-data" data-line-start="39" data-line-end="40"> <strong><a href="#t=45:38">45:38</a></strong> Sponsor: Sanity</li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <strong><a href="#t=46:38">46:38</a></strong> Longhand properities</li> <li class="has-line-data" data-line-start="41" data-line-end="42"> <strong><a href="#t=48:21">48:21</a></strong> Non-existant properties</li> <li class="has-line-data" data-line-start="42" data-line-end="44"> <strong><a href="#t=52:06">52:06</a></strong> SIIIIICK ××× PIIIICKS ×××</li> </ul> <h2 class="code-line" data-line-start="44" data-line-end="45"> <a id="_SIIIIICK__PIIIICKS__44" name= "_SIIIIICK__PIIIICKS__44"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="46" data-line-end="47"> Scott: <a href="https://amzn.to/3zwGhj6">Front Bumper Drillless Plate Holder</a></li> <li class="has-line-data" data-line-start="47" data-line-end="49"> Wes: <a href="https://amzn.to/3h0xvmT">1U Server Rack</a></li> </ul> <h2 class="code-line" data-line-start="49" data-line-end="50"> <a id="Shameless_Plugs_49" name="Shameless_Plugs_49"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="51" data-line-end="52"> Scott: <a href="https://leveluptutorials.com/">LevelUp Tutorials</a></li> <li class="has-line-data" data-line-start="52" data-line-end="54"> Wes: <a href="https://wesbos.com/courses">Wes Bos Tutorials</a></li> </ul> <h2 class="code-line" data-line-start="54" data-line-end="55"> <a id="Tweet_us_your_tasty_treats_54" name= "Tweet_us_your_tasty_treats_54"></a>Tweet us your tasty treats</h2> <ul> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="57" data-line-end="58"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="58" data-line-end="59"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="59" data-line-end="60"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="60" data-line-end="61"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="61" data-line-end="62"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="62" data-line-end="63"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this episode of Syntax, it’s part 2 of Wes and Scott’s journey through the CSS Trends Almanac for 2022 talking through the rest of the popular CSS properties on the web.
 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.
 Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.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.
 Show Notes  00:06 Welcome
 Syntax 525 - 2022 CSS Trends and Usage Web Almanac Part 1

 01:22 Smart home updates
 04:05 Box sizing: border box
 06:57 CSS Columns
 09:20 Aspect Ratio
 Can I Use CSS Properties Rotate

 09:53 Transitions and animations
 13:36 Transition time
 17:05 Steps as a timing function
 19:01 Sponsor: Prismic
 19:43 Blend modes
 23:57 Responsive web design
 26:31 Prefers Color Scheme
 27:48 Popular breakpoints
 30:57 Sponsor: LogRocket
 32:06 Feature queries and @ supports
 34:59 Logical and physical properties
 37:59 css-in-js
 Sam Magura - Why We’re Breaking Up with CSS-in-JS

  Brad Frost - Why We’re Breaking Up with CSS in JS

 42:28 Sass
 43:20 Print styles
 45:38 Sponsor: Sanity
 46:38 Longhand properities
 48:21 Non-existant properties
 52:06 SIIIIICK ××× PIIIICKS ×××
  ××× SIIIIICK ××× PIIIICKS ×××  Scott: Front Bumper Drillless Plate Holder

 Wes: 1U Server Rack

  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

CSS Trends Almanac for 2022 Part 2

Poslechněte si podcast