Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Hasty Treat - Stylin the Unstylables

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="7" data-line-end="8">In this Hasty Treat, Scott and Wes talk about the different kinds of things that are difficult to style, how you can style them, and some future tech to look out for!</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Sanity__Sponsor_9" name="Sanity__Sponsor_9"></a>Sanity - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> <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="12" data-line-end="13"> <a id="LogRocket__Sponsor_12" name= "LogRocket__Sponsor_12"></a>LogRocket - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14"> 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="15" data-line-end="16"> <a id="Show_Notes_15" name="Show_Notes_15"></a>Show Notes</h2> <h3 class="code-line" data-line-start="16" data-line-end="17"> <a id="Can_it_be_styled_Solutions_16" name= "Can_it_be_styled_Solutions_16"></a>Can it be styled? Solutions</h3> <p class="has-line-data" data-line-start="17" data-line-end="18"> 04:28 - Just style the defaults</p> <ul> <li class="has-line-data" data-line-start="18" data-line-end="19"> Most elements can be styled, though some elements are really just multiple elements grouped together into the shadow dom and are hard to style.</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> This leads to us having to re-create the visual UI, and often is a point of making inaccessible UIs.</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> Select</li> <li class="has-line-data" data-line-start="21" data-line-end="24"> Input - number, date, etc. <ul> <li class="has-line-data" data-line-start="22" data-line-end="23"> Very hard to style</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> Often need <code>appearance: none;</code> for mobile</li> </ul> </li> <li class="has-line-data" data-line-start="24" data-line-end="25"> Checkbox / Radio</li> <li class="has-line-data" data-line-start="25" data-line-end="34"> Generally speaking, these CSS Properties can be applied to all inputs: <ul> <li class="has-line-data" data-line-start="26" data-line-end="27"> font-size</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> color</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> padding</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> margin</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> background / images</li> <li class="has-line-data" data-line-start="31" data-line-end="32"> outline (remember focus)</li> <li class="has-line-data" data-line-start="32" data-line-end="34"> border</li> </ul> </li> </ul> <p class="has-line-data" data-line-start="34" data-line-end="35"> 08:20 - Overlap with more dom elements, set background images</p> <ul> <li class="has-line-data" data-line-start="35" data-line-end="37"> Checkbox / Radio / Toggle buttons <ul> <li class="has-line-data" data-line-start="36" data-line-end="37"> Often used <code>:before</code> and <code>:after</code> along with labels — e.g. label + input:checked</li> </ul> </li> <li class="has-line-data" data-line-start="37" data-line-end="39"> Select can have element overlap</li> </ul> <p class="has-line-data" data-line-start="39" data-line-end="40"> 14:13 - Re-implement the UI with JavaScript</p> <ul> <li class="has-line-data" data-line-start="40" data-line-end="42"> Video / Audio <ul> <li class="has-line-data" data-line-start="41" data-line-end="42"> HUGE rabbit hole of things to code</li> </ul> </li> <li class="has-line-data" data-line-start="42" data-line-end="44"> Very important to maintain accessibility</li> </ul> <p class="has-line-data" data-line-start="44" data-line-end="45"> 15:46 - Use a UI Library</p> <ul> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href="https://getbootstrap.com/">Bootstrap</a></li> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href="https://get.foundation/">Foundation</a></li> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href="https://ant.design/">Ant Design</a></li> <li class="has-line-data" data-line-start="48" data-line-end="49"> <a href="https://www.carbondesignsystem.com/">Carbon Design</a></li> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href="https://www.fast.design/">Fast</a></li> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href="https://www.lightningdesignsystem.com/">Lightning Design System</a></li> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href="https://material.io/design">Material Design</a></li> <li class="has-line-data" data-line-start="52" data-line-end="54"> <a href="https://chakra-ui.com/">Chakra</a></li> </ul> <p class="has-line-data" data-line-start="54" data-line-end="55"> 17:20 - Open UI</p> <ul> <li class="has-line-data" data-line-start="55" data-line-end="56"> Documenting all the different types of web UI controls</li> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href="https://open-ui.org/">https://open-ui.org/</a></li> <li class="has-line-data" data-line-start="57" data-line-end="59"> <a href= "https://twitter.com/stubbornella/status/1384889551924121605">https://twitter.com/stubbornella/status/1384889551924121605</a></li> </ul> <h2 class="code-line" data-line-start="59" data-line-end="60"> <a id="Tweet_us_your_tasty_treats_59" name= "Tweet_us_your_tasty_treats_59"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="60" data-line-end="61"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="61" data-line-end="62"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="62" data-line-end="63"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="63" data-line-end="64"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="64" data-line-end="65"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="65" data-line-end="66"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="66" data-line-end="67"> 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 about the different kinds of things that are difficult to style, how you can style them, and some future tech to look out for!
 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 Can it be styled? Solutions 04:28 - Just style the defaults
  Most elements can be styled, though some elements are really just multiple elements grouped together into the shadow dom and are hard to style.
 This leads to us having to re-create the visual UI, and often is a point of making inaccessible UIs.
 Select
 Input - number, date, etc. Very hard to style
 Often need appearance: none; for mobile

 Checkbox / Radio
 Generally speaking, these CSS Properties can be applied to all inputs:  font-size
 color
 padding
 margin
 background / images
 outline (remember focus)
 border

  08:20 - Overlap with more dom elements, set background images
  Checkbox / Radio / Toggle buttons  Often used :before and :after along with labels — e.g. label + input:checked

 Select can have element overlap
  14:13 - Re-implement the UI with JavaScript
  Video / Audio  HUGE rabbit hole of things to code

 Very important to maintain accessibility
  15:46 - Use a UI Library
  Bootstrap

 Foundation

 Ant Design

 Carbon Design

 Fast

 Lightning Design System

 Material Design

 Chakra

  17:20 - Open UI
  Documenting all the different types of web UI controls
 https://open-ui.org/

 https://twitter.com/stubbornella/status/1384889551924121605

  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

Hasty Treat - Stylin the Unstylables

Poslechněte si podcast