Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

CSS Wishlist

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.

In this Hasty Treat, Scott and Wes talk through their wishlist for CSS in 2023 including mixins, range selectors, fit text, robust color functions, overflown, and more. <h2 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2" name="Show_Notes_2"></a>Show Notes</h2> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <a href="#t=00:26">00:26</a> Welcome</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="#t=01:09">01:09</a> Snow skate update</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="#t=03:01">03:01</a> Mixins</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="#t=05:06">05:06</a> Range selector</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="#t=09:36">09:36</a> :first-of-column :last-of:column / row</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="https://github.com/w3c/csswg-drafts/issues/1943">Ability to target items in nth-row of autofilled, implicit grid</a></li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="#t=11:43">11:43</a> Fit Text</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="#t=13:34">13:34</a> Overflow-x, overflow-y control</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="#t=15:36">15:36</a> Full support for CSS with Inline Styles</li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="#t=16:24">16:24</a> nth-of-found()</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="#t=18:18">18:18</a> Robust Color functions</li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="#t=22:19">22:19</a> resize: both but no overflow or scroll</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href="#t=23:39">23:39</a> Animate height auto</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="#t=23:57">23:57</a> Full attr() support</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="#t=25:07">25:07</a> CSS References</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href= "https://gist.github.com/threepointone/61e990b450712cfd7dd0bb87ed0c2982"> CSS References</a></li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href="#t=26:59">26:59</a> overflown + :stuck</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="#t=28:56">28:56</a> Multi-line selectors</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="#t=30:35">30:35</a> Container Queries - select the container itself</li> <li class="has-line-data" data-line-start="23" data-line-end="25"> <a href="#t=32:04">32:04</a> :is-scrolled - select a container when it’s scrolled</li> </ul> <h2 class="code-line" data-line-start="25" data-line-end="26"> <a id="Tweet_us_your_tasty_treats_25" name= "Tweet_us_your_tasty_treats_25"></a>Tweet us your tasty treats</h2> <ul> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="33" data-line-end="34"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this Hasty Treat, Scott and Wes talk through their wishlist for CSS in 2023 including mixins, range selectors, fit text, robust color functions, overflown, and more.
 Show Notes  00:26 Welcome
 01:09 Snow skate update
 03:01 Mixins
 05:06 Range selector
 09:36 :first-of-column :last-of:column / row
 Ability to target items in nth-row of autofilled, implicit grid

 11:43 Fit Text
 13:34 Overflow-x, overflow-y control
 15:36 Full support for CSS with Inline Styles
 16:24 nth-of-found()
 18:18 Robust Color functions
 22:19 resize: both but no overflow or scroll
 23:39 Animate height auto
 23:57 Full attr() support
 25:07 CSS References
  CSS References

 26:59 overflown + :stuck
 28:56 Multi-line selectors
 30:35 Container Queries - select the container itself
 32:04 :is-scrolled - select a container when it’s scrolled
  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 Wishlist

Poslechněte si podcast