Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

How does stuff get added to CSS? Adam Argyle answers!

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 episode of Syntax, Scott and Wes talk with Adam Argyle about how stuff gets added to CSS.</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "LogRocket__Sponsor_9" name="LogRocket__Sponsor_9"></a>LogRocket - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> 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="12" data-line-end="13"> <a id="Freshbooks__Sponsor_12" name= "Freshbooks__Sponsor_12"></a>Freshbooks - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14"> Get a 30 day free trial of Freshbooks at <a href= "https://freshbooks.com/syntax">freshbooks.com/syntax</a> and put SYNTAX in the “How did you hear about us?” section.</p> <h2 class="code-line" data-line-start="15" data-line-end="16"> <a id="Guests_15" name="Guests_15"></a>Guests</h2> <ul> <li class="has-line-data" data-line-start="16" data-line-end="18"> <a href="https://twitter.com/argyleink">Adam Argyle</a></li> </ul> <h2 class="code-line" data-line-start="18" data-line-end="19"> <a id="Show_Notes_18" name="Show_Notes_18"></a>Show Notes</h2> <p class="has-line-data" data-line-start="20" data-line-end="21"> 01:48 - Who are you and what do you do?</p> <p class="has-line-data" data-line-start="22" data-line-end="23"> 04:13 - How does stuff get added to CSS?</p> <p class="has-line-data" data-line-start="24" data-line-end="25"> 06:44 - Github issue proposal or public document</p> <ul> <li class="has-line-data" data-line-start="25" data-line-end="26"> Shares use case</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> Problem made succinct</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> StrawMan solution</li> <li class="has-line-data" data-line-start="28" data-line-end="30"> JS demo</li> </ul> <p class="has-line-data" data-line-start="30" data-line-end="31"> 10:12 - Time</p> <ul> <li class="has-line-data" data-line-start="31" data-line-end="32"> Multiple proposals</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> Comments</li> <li class="has-line-data" data-line-start="33" data-line-end="34"> Back and forth</li> <li class="has-line-data" data-line-start="34" data-line-end="36"> Bikeshedding</li> </ul> <p class="has-line-data" data-line-start="36" data-line-end="37"> 20:00 - Editor’s draft spec (Stage 1)</p> <ul> <li class="has-line-data" data-line-start="37" data-line-end="38"> CSS typed</li> <li class="has-line-data" data-line-start="38" data-line-end="39"> Examples</li> <li class="has-line-data" data-line-start="39" data-line-end="40"> Provided code logic</li> <li class="has-line-data" data-line-start="40" data-line-end="43"> Implementor interest <ul> <li class="has-line-data" data-line-start="41" data-line-end="42"> Can go stale</li> <li class="has-line-data" data-line-start="42" data-line-end="43"> Explainer</li> </ul> </li> <li class="has-line-data" data-line-start="43" data-line-end="47"> Implementor <ul> <li class="has-line-data" data-line-start="44" data-line-end="45"> Prototype behind flags in browser</li> <li class="has-line-data" data-line-start="45" data-line-end="47"> Intent to Prototype (I2P)</li> </ul> </li> </ul> <p class="has-line-data" data-line-start="47" data-line-end="48"> 24:42 - Working Draft (Stage 2)</p> <ul> <li class="has-line-data" data-line-start="48" data-line-end="49"> WPTs</li> <li class="has-line-data" data-line-start="49" data-line-end="50"> Prototype behind flags in browser</li> <li class="has-line-data" data-line-start="50" data-line-end="51"> Needs two or more to graduate</li> <li class="has-line-data" data-line-start="51" data-line-end="53"> Intent to Ship (I2S)</li> </ul> <p class="has-line-data" data-line-start="53" data-line-end="54"> 24:54 - Conference Calls</p> <ul> <li class="has-line-data" data-line-start="54" data-line-end="56"> Around 10 items to discuss <ul> <li class="has-line-data" data-line-start="55" data-line-end="56"> Issues or proposals</li> </ul> </li> <li class="has-line-data" data-line-start="56" data-line-end="60"> Flexible list <ul> <li class="has-line-data" data-line-start="57" data-line-end="58"> Things can be injected as emergency</li> <li class="has-line-data" data-line-start="58" data-line-end="60"> Things can get punted to the next call</li> </ul> </li> </ul> <p class="has-line-data" data-line-start="60" data-line-end="61"> 25:26 - Face 2 Face (F2F)</p> <ul> <li class="has-line-data" data-line-start="61" data-line-end="62"> Four times a year</li> <li class="has-line-data" data-line-start="62" data-line-end="63"> Presentations</li> <li class="has-line-data" data-line-start="63" data-line-end="64"> Breakout sessions</li> <li class="has-line-data" data-line-start="64" data-line-end="65"> Houdini focus groups, etc</li> <li class="has-line-data" data-line-start="65" data-line-end="67"> Try to resolve as many Github issues as possible</li> </ul> <p class="has-line-data" data-line-start="67" data-line-end="68"> 27:34 - Candidate Recommendation (Stage 3)</p> <ul> <li class="has-line-data" data-line-start="68" data-line-end="72"> Could still be behind a flag <ul> <li class="has-line-data" data-line-start="69" data-line-end="70"> Edge cases are being worked through</li> <li class="has-line-data" data-line-start="70" data-line-end="72"> WPTs and standards are being nudged into a final state</li> </ul> </li> </ul> <p class="has-line-data" data-line-start="72" data-line-end="73"> 44:20 - Roles</p> <ul> <li class="has-line-data" data-line-start="73" data-line-end="74"> Spec author</li> <li class="has-line-data" data-line-start="74" data-line-end="83"> Community Member <ul> <li class="has-line-data" data-line-start="75" data-line-end="76"> Print</li> <li class="has-line-data" data-line-start="76" data-line-end="77"> Color</li> <li class="has-line-data" data-line-start="77" data-line-end="78"> Internationalization</li> <li class="has-line-data" data-line-start="78" data-line-end="79"> Box Model</li> <li class="has-line-data" data-line-start="79" data-line-end="80"> AOM</li> <li class="has-line-data" data-line-start="80" data-line-end="81"> JS APIs</li> <li class="has-line-data" data-line-start="81" data-line-end="82"> Renderers</li> <li class="has-line-data" data-line-start="82" data-line-end="83"> etc</li> </ul> </li> <li class="has-line-data" data-line-start="83" data-line-end="84"> Implementor</li> <li class="has-line-data" data-line-start="84" data-line-end="86"> It’s like pub/sub, where spec authors pub and implementors sub, and the community tries to help shape the message that’s published while supporting the subscribers who need to implement and make it real</li> </ul> <p class="has-line-data" data-line-start="86" data-line-end="87"> 46:32 - Questions</p> <ul> <li class="has-line-data" data-line-start="87" data-line-end="88"> What language is CSS written in?</li> <li class="has-line-data" data-line-start="88" data-line-end="89"> What's the deal with Houdini?</li> </ul> <h2 class="code-line" data-line-start="91" data-line-end="92"> <a id="Links_91" name="Links_91"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="92" data-line-end="93"> <a href= "https://github.com/w3c/csswg-drafts">https://github.com/w3c/csswg-drafts</a></li> <li class="has-line-data" data-line-start="93" data-line-end="94"> <a href="https://twitter.com/rachelandrew">@rachelandrew</a></li> <li class="has-line-data" data-line-start="94" data-line-end="95"> <a href="https://twitter.com/hj_chen">@hj_chen</a></li> <li class="has-line-data" data-line-start="95" data-line-end="96"> <a href="https://wiki.csswg.org/ideas/mistakes">Incomplete List of Mistakes in the Design of CSS</a></li> <li class="has-line-data" data-line-start="96" data-line-end="97"> <a href="https://www.youtube.com/watch?v=M3BM9TB-8yA">10 Things I Regret About Node</a></li> <li class="has-line-data" data-line-start="97" data-line-end="99"> <a href= "https://ishoudinireadyyet.com/">https://ishoudinireadyyet.com/</a></li> </ul> <h2 class="code-line" data-line-start="99" data-line-end="100"> <a id="_SIIIIICK__PIIIICKS__99" name= "_SIIIIICK__PIIIICKS__99"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="100" data-line-end= "101">Adam <a href= "https://www.amazon.com/s?k=wok">Wok</a></li> <li class="has-line-data" data-line-start="101" data-line-end= "102">Scott: <a href="https://amzn.to/2YLNFVN">Balance Pad</a></li> <li class="has-line-data" data-line-start="102" data-line-end= "104">Wes: <a href="https://amzn.to/2VtFaww">Security Bit Set</a></li> </ul> <h2 class="code-line" data-line-start="104" data-line-end="105"> <a id="Shameless_Plugs_104" name= "Shameless_Plugs_104"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="105" data-line-end= "106">Adam: <a href="https://thecsspodcast.libsyn.com/">The CSS Podcast</a></li> <li class="has-line-data" data-line-start="106" data-line-end= "107">Scott: <a href= "https://www.leveluptutorials.com/pro">CSS Design Systems</a> - Sign up for the year and save 25%!</li> <li class="has-line-data" data-line-start="107" data-line-end= "109">Wes: <a href="https://wesbos.com/courses/">All Courses</a> - Use the coupon code ‘Syntax’ for $10 off!</li> </ul> <h2 class="code-line" data-line-start="109" data-line-end="110"> <a id="Tweet_us_your_tasty_treats_109" name= "Tweet_us_your_tasty_treats_109"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="110" data-line-end= "111"><a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="111" data-line-end= "112"><a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="112" data-line-end= "113"><a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="113" data-line-end= "114"><a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="114" data-line-end= "115"><a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="115" data-line-end= "116"><a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="116" data-line-end= "117">Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this episode of Syntax, Scott and Wes talk with Adam Argyle about how stuff gets added to CSS.
 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 and put SYNTAX in the “How did you hear about us?” section.
 Guests  Adam Argyle

  Show Notes 01:48 - Who are you and what do you do?
 04:13 - How does stuff get added to CSS?
 06:44 - Github issue proposal or public document
  Shares use case
 Problem made succinct
 StrawMan solution
 JS demo
  10:12 - Time
  Multiple proposals
 Comments
 Back and forth
 Bikeshedding
  20:00 - Editor’s draft spec (Stage 1)
  CSS typed
 Examples
 Provided code logic
 Implementor interest  Can go stale
 Explainer

 Implementor  Prototype behind flags in browser
 Intent to Prototype (I2P)

  24:42 - Working Draft (Stage 2)
  WPTs
 Prototype behind flags in browser
 Needs two or more to graduate
 Intent to Ship (I2S)
  24:54 - Conference Calls
  Around 10 items to discuss  Issues or proposals

 Flexible list  Things can be injected as emergency
 Things can get punted to the next call

  25:26 - Face 2 Face (F2F)
  Four times a year
 Presentations
 Breakout sessions
 Houdini focus groups, etc
 Try to resolve as many Github issues as possible
  27:34 - Candidate Recommendation (Stage 3)
  Could still be behind a flag  Edge cases are being worked through
 WPTs and standards are being nudged into a final state

  44:20 - Roles
  Spec author
 Community Member  Print
 Color
 Internationalization
 Box Model
 AOM
 JS APIs
 Renderers
 etc

 Implementor
 It’s like pub/sub, where spec authors pub and implementors sub, and the community tries to help shape the message that’s published while supporting the subscribers who need to implement and make it real
  46:32 - Questions
  What language is CSS written in?
 What's the deal with Houdini?
  Links  https://github.com/w3c/csswg-drafts

 @rachelandrew

 @hj_chen

 Incomplete List of Mistakes in the Design of CSS

 10 Things I Regret About Node

 https://ishoudinireadyyet.com/

  ××× SIIIIICK ××× PIIIICKS ××× Adam Wok

 Scott: Balance Pad

 Wes: Security Bit Set

  Shameless Plugs Adam: The CSS Podcast

 Scott: CSS Design Systems - Sign up for the year and save 25%!
 Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off!
  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

How does stuff get added to CSS? Adam Argyle answers!

Poslechněte si podcast