Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Our Code Styles

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, Wes and Scott talk about their coding styles - functional vs object oriented, interfaces vs types, tabs vs spaces, should comments exist? And a whole lot more.</p> <h2 class="code-line" data-line-start="2" data-line-end="3"><a id= "Freshbooks___Sponsor_2" name= "Freshbooks___Sponsor_2"></a>Freshbooks - Sponsor</h2> <p class="has-line-data" data-line-start="4" data-line-end="5">Get a 30 day free trial of Freshbooks at <a href= "https://freshbooks.com/syntax">freshbooks.com/syntax</a></p> <h2 class="code-line" data-line-start="6" data-line-end="7"><a id= "Sentry__Sponsor_6" name="Sentry__Sponsor_6"></a>Sentry - Sponsor</h2> <p class="has-line-data" data-line-start="8" data-line-end="9">If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting <a href= "https://sentry.io">Sentry.io</a> and using the coupon code TASTYTREAT during sign up.</p> <h2 class="code-line" data-line-start="10" data-line-end="11"> <a id="Sanity__Sponsor_10" name="Sanity__Sponsor_10"></a>Sanity - Sponsor</h2> <p class="has-line-data" data-line-start="12" data-line-end="13"> <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="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:07">00:07</a></strong> Welcome</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <strong><a href="#t=01:56">01:56</a></strong> Functional vs object oriented</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <strong><a href="#t=03:49">03:49</a></strong> Interfaces vs types</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <strong><a href="#t=05:38">05:38</a></strong> Tabs vs spaces</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <strong><a href="#t=07:02">07:02</a></strong> Semicolons vs no semicolons</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <strong><a href="#t=08:10">08:10</a></strong> Let vs const</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <strong><a href="#t=09:33">09:33</a></strong> Do you explicitly type or allow TypeScript do it’s magic?</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <strong><a href="#t=11:26">11:26</a></strong> Naming variables</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href= "https://en.wikipedia.org/wiki/Naming_convention_(programming)">Naming convention for programming</a></li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <strong><a href="#t=15:13">15:13</a></strong> Methods of looping</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <strong><a href="#t=18:03">18:03</a></strong> if statement curlys</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <strong><a href="#t=20:57">20:57</a></strong> Naming files</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <strong><a href="#t=24:46">24:46</a></strong> Inline testing vs running test as a process</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <strong><a href="#t=25:31">25:31</a></strong> Sponsor: Freshbooks</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <strong><a href="#t=26:37">26:37</a></strong> CSS property:val; or property: val;</li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <strong><a href="#t=27:40">27:40</a></strong> CSS nesting?</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <strong><a href="#t=29:49">29:49</a></strong> Alphabetizing CSS properties</li> <li class="has-line-data" data-line-start="33" data-line-end="34"> <strong><a href="#t=31:11">31:11</a></strong> Rems, Ems, PX, Etc…</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <strong><a href="#t=33:37">33:37</a></strong> How do you center something in CSS?</li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <strong><a href="#t=35:22">35:22</a></strong> How do you make something 100% height?</li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <strong><a href="#t=36:52">36:52</a></strong> Sponsor: Sentry</li> <li class="has-line-data" data-line-start="37" data-line-end="38"> <strong><a href="#t=37:30">37:30</a></strong> Should comments exist?</li> <li class="has-line-data" data-line-start="38" data-line-end="39"> <a href= "https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments"> Better Comments</a></li> <li class="has-line-data" data-line-start="39" data-line-end="40"> <a href= "https://twitter.com/wesbos/status/1384916003444961282?s=21&t=Iz9mOT6bctSccV4pw8xjOA"> Wes’ custom parser for VS Code</a></li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <a href= "https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree"> Todo Tree</a></li> <li class="has-line-data" data-line-start="41" data-line-end="42"> <strong><a href="#t=42:31">42:31</a></strong> Creating HTML</li> <li class="has-line-data" data-line-start="42" data-line-end="43"> <strong><a href="#t=45:28">45:28</a></strong> Components in app or in isolation?</li> <li class="has-line-data" data-line-start="43" data-line-end="44"> <strong><a href="#t=47:41">47:41</a></strong> Sponsor: Sanity</li> <li class="has-line-data" data-line-start="44" data-line-end="45"> <strong><a href="#t=48:45">48:45</a></strong> Single component per file vs multiple</li> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href="https://storybook.js.org">Storybook</a></li> <li class="has-line-data" data-line-start="46" data-line-end="47"> <strong><a href="#t=50:22">50:22</a></strong> Naming components</li> <li class="has-line-data" data-line-start="47" data-line-end="48"> <strong><a href="#t=51:19">51:19</a></strong> General stuff</li> <li class="has-line-data" data-line-start="48" data-line-end="50"> <strong><a href="#t=53:55">53:55</a></strong> ××× SIIIIICK ××× PIIIICKS ×××</li> </ul> <h2 class="code-line" data-line-start="50" data-line-end="51"> <a id="_SIIIIICK__PIIIICKS__50" name= "_SIIIIICK__PIIIICKS__50"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="52" data-line-end="53"> Scott: <a href= "https://www.amazon.com/dp/B07DBZW49H?th=1&linkCode=sl1&tag=leveluptuts01-20&linkId=920f70555b9377dadede744ec2447748&language=en_US&ref_=as_li_ss_tl"> Scott’s iPad case for kids</a></li> <li class="has-line-data" data-line-start="53" data-line-end="55"> Wes: Garbage can with custom bags.</li> </ul> <h2 class="code-line" data-line-start="55" data-line-end="56"> <a id="Shameless_Plugs_55" name="Shameless_Plugs_55"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="57" data-line-end="58"> Scott: <a href="https://leveluptutorials.com/">LevelUp Tutorials</a></li> <li class="has-line-data" data-line-start="58" data-line-end="60"> Wes: <a href="https://wesbos.com/courses">Wes Bos Tutorials</a></li> </ul> <h2 class="code-line" data-line-start="60" data-line-end="61"> <a id="Tweet_us_your_tasty_treats_60" name= "Tweet_us_your_tasty_treats_60"></a>Tweet us your tasty treats</h2> <ul> <li class="has-line-data" data-line-start="62" data-line-end="63"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="63" data-line-end="64"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="64" data-line-end="65"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="65" data-line-end="66"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="66" data-line-end="67"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="67" data-line-end="68"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="68" data-line-end="69"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this episode of Syntax, Wes and Scott talk about their coding styles - functional vs object oriented, interfaces vs types, tabs vs spaces, should comments exist? And a whole lot more.
 Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax
 Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
 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.
 Show Notes  00:07 Welcome
 01:56 Functional vs object oriented
 03:49 Interfaces vs types
 05:38 Tabs vs spaces
 07:02 Semicolons vs no semicolons
 08:10 Let vs const
 09:33 Do you explicitly type or allow TypeScript do it’s magic?
 11:26 Naming variables
 Naming convention for programming

 15:13 Methods of looping
 18:03 if statement curlys
 20:57 Naming files
 24:46 Inline testing vs running test as a process
 25:31 Sponsor: Freshbooks
 26:37 CSS property:val; or property: val;
 27:40 CSS nesting?
 29:49 Alphabetizing CSS properties
 31:11 Rems, Ems, PX, Etc…
 33:37 How do you center something in CSS?
 35:22 How do you make something 100% height?
 36:52 Sponsor: Sentry
 37:30 Should comments exist?
  Better Comments

  Wes’ custom parser for VS Code

  Todo Tree

 42:31 Creating HTML
 45:28 Components in app or in isolation?
 47:41 Sponsor: Sanity
 48:45 Single component per file vs multiple
 Storybook

 50:22 Naming components
 51:19 General stuff
 53:55 ××× SIIIIICK ××× PIIIICKS ×××
  ××× SIIIIICK ××× PIIIICKS ×××  Scott: Scott’s iPad case for kids

 Wes: Garbage can with custom bags.
  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

Our Code Styles

Poslechněte si podcast