Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

The Fundamentals Leftovers - Terminal, Shortcuts, View Source, Github + More!

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 continue their discussion of fundamentals — Bash, text editors, Regex, Github, Dev tools, and more!</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="Sentry__Sponsor_12" name="Sentry__Sponsor_12"></a>Sentry - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14">If you want to know what’s happening with your errors, track them with <a href="https://sentry.io/">Sentry</a>. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting <a href= "https://sentry.io/">Sentry.io</a> and using the coupon code “tastytreat”.</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> <p class="has-line-data" data-line-start="17" data-line-end="18"> 03:17 - Typing</p> <ul> <li class="has-line-data" data-line-start="19" data-line-end="21"> Take an online typing test or skills - <a href= "https://www.keybr.com/">https://www.keybr.com/</a></li> </ul> <p class="has-line-data" data-line-start="21" data-line-end="22"> 07:02 - Bash / Terminal</p> <ul> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href= "https://docs.microsoft.com/en-us/windows/wsl/about">WSL</a></li> <li class="has-line-data" data-line-start="24" data-line-end="25"> What directory am I in?</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> SSH</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> How to copy / paste / remove files and folders</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> z</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> Nice prompt (<a href= "https://ohmyz.sh/">ZSH</a> or <a href= "https://fishshell.com/">fish</a>)</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> Know how to get out of VIM/VI and how to use it for fast editing</li> <li class="has-line-data" data-line-start="30" data-line-end="32"> Know how to make an alias</li> </ul> <p class="has-line-data" data-line-start="32" data-line-end="33"> 13:19 - Text editors</p> <ul> <li class="has-line-data" data-line-start="34" data-line-end="35"> Command Palette</li> <li class="has-line-data" data-line-start="35" data-line-end="36"> Keyboard shortcuts (just look them up!)</li> <li class="has-line-data" data-line-start="36" data-line-end="37"> Click through to source</li> <li class="has-line-data" data-line-start="37" data-line-end="38"> Multiple cursors</li> <li class="has-line-data" data-line-start="38" data-line-end="39"> Find/replace master</li> <li class="has-line-data" data-line-start="39" data-line-end="41"> Find and replace across files</li> </ul> <p class="has-line-data" data-line-start="41" data-line-end="42"> 18:37 - Regex</p> <ul> <li class="has-line-data" data-line-start="43" data-line-end="44"> Regex101</li> <li class="has-line-data" data-line-start="44" data-line-end="46"> <a href="https://regexone.com/">https://regexone.com</a> will teach you just enough</li> </ul> <p class="has-line-data" data-line-start="46" data-line-end="47"> 22:03 - OS Basics</p> <ul> <li class="has-line-data" data-line-start="48" data-line-end="49"> Switching apps</li> <li class="has-line-data" data-line-start="49" data-line-end="50"> Unzipping</li> <li class="has-line-data" data-line-start="50" data-line-end="51"> File organization</li> <li class="has-line-data" data-line-start="51" data-line-end="53"> Searching for/in files</li> </ul> <p class="has-line-data" data-line-start="53" data-line-end="54"> 28:50 - Googling</p> <ul> <li class="has-line-data" data-line-start="55" data-line-end="56"> Learn how to google well</li> <li class="has-line-data" data-line-start="56" data-line-end="57"> What words to use and what not to</li> <li class="has-line-data" data-line-start="57" data-line-end="58"> Basic operators “-”, ",</li> <li class="has-line-data" data-line-start="58" data-line-end="59"> Use <a href="https://www.reddit.com/">Reddit</a>: for opinions</li> <li class="has-line-data" data-line-start="59" data-line-end="61"> Add dates - example: Library has been out for 6 months, and you can filter out</li> </ul> <p class="has-line-data" data-line-start="61" data-line-end="62"> 33:08 - Navigating GitHub</p> <ul> <li class="has-line-data" data-line-start="63" data-line-end="64"> Explore for finding interesting projects and creators</li> <li class="has-line-data" data-line-start="64" data-line-end="65"> Know how to clone a repo</li> <li class="has-line-data" data-line-start="65" data-line-end="66"> Create repo and push to it</li> <li class="has-line-data" data-line-start="66" data-line-end="67"> <a href= "https://octolinker.now.sh/">https://octolinker.now.sh/</a> to click through to files</li> <li class="has-line-data" data-line-start="67" data-line-end="69"> Use <a href="https://www.octotree.io/">Octotree</a> to navigate</li> </ul> <p class="has-line-data" data-line-start="69" data-line-end="70"> 36:20 - Navigating source</p> <ul> <li class="has-line-data" data-line-start="71" data-line-end="72"> View source</li> <li class="has-line-data" data-line-start="72" data-line-end="73"> Where to start in a repo (ie the entrance to a project)</li> <li class="has-line-data" data-line-start="73" data-line-end="74"> Most code repos are easier to read and understand than you give yourself credit for - it will improve your code reading and parsing skills</li> <li class="has-line-data" data-line-start="74" data-line-end="76"> Access to the minds of other developers</li> </ul> <p class="has-line-data" data-line-start="76" data-line-end="77"> 37:31 - Knowing how to pick the right dev tools pane</p> <ul> <li class="has-line-data" data-line-start="78" data-line-end="79"> Is it network based?</li> <li class="has-line-data" data-line-start="79" data-line-end="80"> Does it happen once you click something?</li> <li class="has-line-data" data-line-start="80" data-line-end="81"> Toggling CSS on/off</li> <li class="has-line-data" data-line-start="81" data-line-end="83"> When console logging makes sense vs using a better tool</li> </ul> <h2 class="code-line" data-line-start="83" data-line-end="84"> <a id="Links_83" name="Links_83"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="84" data-line-end="85"> <a href="https://www.typingtest.com/">TypingTest.com</a></li> <li class="has-line-data" data-line-start="85" data-line-end="86"> <a href="https://commandlinepoweruser.com/">Wes’ Command Line Power User</a></li> <li class="has-line-data" data-line-start="86" data-line-end="87"> <a href="https://karabiner-elements.pqrs.org/">Karabiner</a></li> <li class="has-line-data" data-line-start="87" data-line-end="88"> <a href="https://folivora.ai/">BetterTouchTool</a></li> <li class="has-line-data" data-line-start="88" data-line-end="90"> <a href="https://www.alfredapp.com/">Alfred</a></li> </ul> <h2 class="code-line" data-line-start="90" data-line-end="91"> <a id="_SIIIIICK__PIIIICKS__90" name= "_SIIIIICK__PIIIICKS__90"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="91" data-line-end="92"> Scott: <a href= "https://www.pbs.org/wgbh/nova/series/the-fabric-of-the-cosmos/">The Fabric of the Cosmos</a></li> <li class="has-line-data" data-line-start="92" data-line-end="94"> Wes: <a href= "https://www.studioneat.com/products/cosmonaut">Cosmonaut Stylus</a></li> </ul> <h2 class="code-line" data-line-start="94" data-line-end="95"> <a id="Shameless_Plugs_94" name="Shameless_Plugs_94"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="95" data-line-end="96"> Scott: <a href="https://www.leveluptutorials.com/pro">All Courses</a> - Sign up for the year and save 25%!</li> <li class="has-line-data" data-line-start="96" data-line-end="98"> 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="98" data-line-end="99"> <a id="Tweet_us_your_tasty_treats_98" name= "Tweet_us_your_tasty_treats_98"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="99" data-line-end="100"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="100" data-line-end= "101"><a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="101" data-line-end= "102"><a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="102" data-line-end= "103"><a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="103" data-line-end= "104"><a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="104" data-line-end= "105"><a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="105" data-line-end= "106">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 continue their discussion of fundamentals — Bash, text editors, Regex, Github, Dev tools, and more!
 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.
 Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.
 Show Notes 03:17 - Typing
  Take an online typing test or skills - https://www.keybr.com/

  07:02 - Bash / Terminal
  WSL

 What directory am I in?
 SSH
 How to copy / paste / remove files and folders
 z
 Nice prompt (ZSH or fish)
 Know how to get out of VIM/VI and how to use it for fast editing
 Know how to make an alias
  13:19 - Text editors
  Command Palette
 Keyboard shortcuts (just look them up!)
 Click through to source
 Multiple cursors
 Find/replace master
 Find and replace across files
  18:37 - Regex
  Regex101
 https://regexone.com will teach you just enough
  22:03 - OS Basics
  Switching apps
 Unzipping
 File organization
 Searching for/in files
  28:50 - Googling
  Learn how to google well
 What words to use and what not to
 Basic operators “-”, ",
 Use Reddit: for opinions
 Add dates - example: Library has been out for 6 months, and you can filter out
  33:08 - Navigating GitHub
  Explore for finding interesting projects and creators
 Know how to clone a repo
 Create repo and push to it
 https://octolinker.now.sh/ to click through to files
 Use Octotree to navigate
  36:20 - Navigating source
  View source
 Where to start in a repo (ie the entrance to a project)
 Most code repos are easier to read and understand than you give yourself credit for - it will improve your code reading and parsing skills
 Access to the minds of other developers
  37:31 - Knowing how to pick the right dev tools pane
  Is it network based?
 Does it happen once you click something?
 Toggling CSS on/off
 When console logging makes sense vs using a better tool
  Links  TypingTest.com

 Wes’ Command Line Power User

 Karabiner

 BetterTouchTool

 Alfred

  ××× SIIIIICK ××× PIIIICKS ×××  Scott: The Fabric of the Cosmos

 Wes: Cosmonaut Stylus

  Shameless Plugs  Scott: All Courses - 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

The Fundamentals Leftovers - Terminal, Shortcuts, View Source, Github + More!

Poslechněte si podcast