Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Bike Shedding — Developer Opinions Explained

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 bike shed some common developer opinions.</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Prismic__Sponsor_9" name="Prismic__Sponsor_9"></a>Prismic - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> 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="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="Mux__Sponsor_15" name="Mux__Sponsor_15"></a>Mux - Sponsor</h2> <p class="has-line-data" data-line-start="16" data-line-end="17"> Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit <a href= "https://mux.com/syntax">mux.com/syntax</a>.</p> <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="19" data-line-end="20"> 04:27 - Event params</p> <ul> <li class="has-line-data" data-line-start="20" data-line-end="22"> e, evt, ev, or event?</li> </ul> <p class="has-line-data" data-line-start="22" data-line-end="23"> 06:36 - CSS variables</p> <ul> <li class="has-line-data" data-line-start="23" data-line-end="25"> —red or —primary?</li> </ul> <p class="has-line-data" data-line-start="25" data-line-end="26"> 09:31 - CSS colors</p> <ul> <li class="has-line-data" data-line-start="26" data-line-end="27"> <a href= "https://twitter.com/rem/status/1386694431710007298">https://twitter.com/rem/status/1386694431710007298</a></li> <li class="has-line-data" data-line-start="27" data-line-end="29"> RGB, HSL, HEX?</li> </ul> <p class="has-line-data" data-line-start="29" data-line-end="30"> 11:52 - Default exports vs named exports</p> <p class="has-line-data" data-line-start="31" data-line-end="32"> 14:45 - JavaScript import ordering</p> <p class="has-line-data" data-line-start="33" data-line-end="34"> 17:09 - Foo / Bar / Baz in examples</p> <p class="has-line-data" data-line-start="35" data-line-end="36"> 21:18 - Light vs dark themes</p> <p class="has-line-data" data-line-start="37" data-line-end="38"> 24:00 - longVerboseNamesDescribingWhatItIsOrDoes vs x</p> <p class="has-line-data" data-line-start="39" data-line-end="40"> 26:54 - VScode vs WebStorm (IDE) vs Vim</p> <p class="has-line-data" data-line-start="41" data-line-end="42"> 31:12 - TypeScript Generics: <T> vs <ThingName></p> <p class="has-line-data" data-line-start="43" data-line-end="44"> 34:39 - Indentation-base syntax</p> <ul> <li class="has-line-data" data-line-start="44" data-line-end="46"> <a href= "https://twitter.com/LeahLundqvist/status/1386693374305095680">https://twitter.com/LeahLundqvist/status/1386693374305095680</a></li> </ul> <p class="has-line-data" data-line-start="46" data-line-end="47"> 37:37 - Max line length</p> <p class="has-line-data" data-line-start="48" data-line-end="49"> 40:21 - One reduce, vs multiple .map()/flat(),filter()</p> <pre data-initialized="true" data-gclp-id="1"> <code class="has-line-data" data-line-start="51" data-line-end= "70">async function getStatus() {    const res = await sendCommand('AT!GSTATUS');    const result = res.result     .split('\n')     .map((x: string) => x.split(`\t\t`))     .flat()     .filter(Boolean)     .map((x: string) => x.trim())     .map((x: string) => x.split(`    \t`))     .flat()     .filter((x: string) => x.includes(':'))     .map((x: string) => x.split(`:`))     .map(([prop, val]: [string, string]) => [prop, val.trim()])    return Object.fromEntries(result); } </code> </pre> <p class="has-line-data" data-line-start="71" data-line-end="72"> 42:50 - index.js files</p> <ul> <li class="has-line-data" data-line-start="72" data-line-end="73"> <a href= "https://twitter.com/sevilhelm/status/1386693971112562694">https://twitter.com/sevilhelm/status/1386693971112562694</a></li> <li class="has-line-data" data-line-start="73" data-line-end="74"> ComponentName.js vs ComponentName/index.js</li> <li class="has-line-data" data-line-start="74" data-line-end="76"> <a href= "https://twitter.com/rleggos/status/1386694773021552641">https://twitter.com/rleggos/status/1386694773021552641</a></li> </ul> <p class="has-line-data" data-line-start="76" data-line-end="77"> 48:20 - Ligatures and fancy fonts</p> <ul> <li class="has-line-data" data-line-start="77" data-line-end="79"> <a href= "https://twitter.com/badsyntax/status/1386695010859507713">https://twitter.com/badsyntax/status/1386695010859507713</a></li> </ul> <p class="has-line-data" data-line-start="79" data-line-end="80"> 50:30 - Regular functions vs anon functions in a variable vs arrow functions</p> <ul> <li class="has-line-data" data-line-start="80" data-line-end="81"> function hey() {}</li> <li class="has-line-data" data-line-start="81" data-line-end="82"> const hey = function() {}</li> <li class="has-line-data" data-line-start="82" data-line-end="84"> const hey = () ⇒ {}</li> </ul> <p class="has-line-data" data-line-start="84" data-line-end="85"> 52:44 - Explicit return vs implicit return</p> <h2 class="code-line" data-line-start="86" data-line-end="87"> <a id="_SIIIIICK__PIIIICKS__86" name= "_SIIIIICK__PIIIICKS__86"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="87" data-line-end="88"> Scott: <a href="https://amzn.to/3dUU6xv">Ego Mower</a></li> <li class="has-line-data" data-line-start="88" data-line-end="90"> Wes: <a href= "https://www.google.com/search?q=pass-through+socket+set&rlz=1C5CHFA_enUS886US886&ei=RNKpYN2MBaixggfS14voBg&oq=pass-through+socket+set&gs_lcp=Cgdnd3Mtd2l6EAMyAggAMgIIADICCAAyAggAMgQIABAeMgQIABAeMgQIABAeMgQIABAeMgQIABAeMgQIABAeOgcIABBHELADUO4bWO4bYJcgaAFwAngAgAF5iAHJAZIBAzEuMZgBAKABAaoBB2d3cy13aXrIAQjAAQE&sclient=gws-wiz&ved=0ahUKEwjdvp2l9N7wAhWomOAKHdLrAm0Q4dUDCA4&uact=5">Pass-Through Socket Set</a></li> </ul> <h2 class="code-line" data-line-start="90" data-line-end="91"> <a id="Shameless_Plugs_90" name="Shameless_Plugs_90"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="91" data-line-end="94"> <ul> <li class="has-line-data" data-line-start="91" data-line-end="94"> Scott:<br /> 1: <a href="https://www.leveluptutorials.com/pro">Level Up Tutorials Pro Spring Sale</a> - 50% off annual subscriptions!<br /> 2: <a href="https://www.leveluptutorials.com/pro">Github Actions with Brian Douglas</a></li> </ul> </li> <li class="has-line-data" data-line-start="94" data-line-end="96"> 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="96" data-line-end="97"> <a id="Tweet_us_your_tasty_treats_96" name= "Tweet_us_your_tasty_treats_96"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="97" data-line-end="98"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="98" data-line-end="99"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="99" data-line-end="100"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="100" data-line-end= "101"><a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="101" data-line-end= "102"><a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="102" data-line-end= "103"><a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="103" data-line-end= "104">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 bike shed some common developer opinions.
 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.
 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.
 Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax.
 Show Notes 04:27 - Event params
  e, evt, ev, or event?
  06:36 - CSS variables
  —red or —primary?
  09:31 - CSS colors
  https://twitter.com/rem/status/1386694431710007298

 RGB, HSL, HEX?
  11:52 - Default exports vs named exports
 14:45 - JavaScript import ordering
 17:09 - Foo / Bar / Baz in examples
 21:18 - Light vs dark themes
 24:00 - longVerboseNamesDescribingWhatItIsOrDoes vs x
 26:54 - VScode vs WebStorm (IDE) vs Vim
 31:12 - TypeScript Generics: vs 
 34:39 - Indentation-base syntax
  https://twitter.com/LeahLundqvist/status/1386693374305095680

  37:37 - Max line length
 40:21 - One reduce, vs multiple.map()/flat(),filter()
 async function getStatus() {  const res = await sendCommand('AT!GSTATUS');  const result = res.result  .split('')  .map((x: string) => x.split(`\t\t`))  .flat()  .filter(Boolean)  .map((x: string) => x.trim())  .map((x: string) => x.split(`  \t`))  .flat()  .filter((x: string) => x.includes(':'))  .map((x: string) => x.split(`:`))  .map(([prop, val]: [string, string]) => [prop, val.trim()])  return Object.fromEntries(result); }  42:50 - index.js files
  https://twitter.com/sevilhelm/status/1386693971112562694

 ComponentName.js vs ComponentName/index.js
 https://twitter.com/rleggos/status/1386694773021552641

  48:20 - Ligatures and fancy fonts
  https://twitter.com/badsyntax/status/1386695010859507713

  50:30 - Regular functions vs anon functions in a variable vs arrow functions
  function hey() {}
 const hey = function() {}
 const hey = () ⇒ {}
  52:44 - Explicit return vs implicit return
 ××× SIIIIICK ××× PIIIICKS ×××  Scott: Ego Mower

 Wes: Pass-Through Socket Set

  Shameless Plugs   Scott: 1: Level Up Tutorials Pro Spring Sale - 50% off annual subscriptions! 2: Github Actions with Brian Douglas

 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

Bike Shedding — Developer Opinions Explained

Poslechněte si podcast