<p class="has-line-data" data-line-start="7" data-line-end="8">In this episode of Syntax, Scott and Wes talk about React Hooks, one year later — what’s changed, how to use them, 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"> 1:26 - Hooks vs Render Props</p> <ul> <li class="has-line-data" data-line-start="19" data-line-end="20"> Hooks win hands down</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> useState</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> useReducer</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> useRef</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> useContext</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> useEffect</li> <li class="has-line-data" data-line-start="25" data-line-end="27"> Custom hooks to hide and encapsulate functionality</li> </ul> <p class="has-line-data" data-line-start="27" data-line-end="28"> 35:06 - How we use them</p> <ul> <li class="has-line-data" data-line-start="29" data-line-end="35"> <p class="has-line-data" data-line-start="29" data-line-end="30"> Scott</p> <ul> <li class="has-line-data" data-line-start="30" data-line-end="31"> Index that imports all custom hooks</li> <li class="has-line-data" data-line-start="31" data-line-end="32"> Babel alias to hooks folder</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> Import { useHook } from ‘hooks’</li> <li class="has-line-data" data-line-start="33" data-line-end="35"> useContextState</li> </ul> </li> <li class="has-line-data" data-line-start="35" data-line-end="41"> <p class="has-line-data" data-line-start="35" data-line-end="36"> Wes</p> <ul> <li class="has-line-data" data-line-start="36" data-line-end="37"> useResizeObserver</li> <li class="has-line-data" data-line-start="37" data-line-end="38"> useForm</li> <li class="has-line-data" data-line-start="38" data-line-end="39"> useGridRower</li> <li class="has-line-data" data-line-start="39" data-line-end="41"> useWickedFavIcon</li> </ul> </li> </ul> <p class="has-line-data" data-line-start="41" data-line-end="42"> 45:54 - Which built-in hooks do we not use?</p> <ul> <li class="has-line-data" data-line-start="43" data-line-end="44"> useImperativeHandle</li> <li class="has-line-data" data-line-start="44" data-line-end="45"> useCallback</li> <li class="has-line-data" data-line-start="45" data-line-end="47"> useDebugValue</li> </ul> <p class="has-line-data" data-line-start="47" data-line-end="48"> 48:22 - Are hooks harder to learn?</p> <ul> <li class="has-line-data" data-line-start="49" data-line-end="50"> Wes: Yes — but easier to maintain after the fact</li> <li class="has-line-data" data-line-start="50" data-line-end="52"> Scott: Yes — harder conceptually and initially but easier after concepts are understood</li> </ul> <p class="has-line-data" data-line-start="52" data-line-end="53"> 50:29 - Are classes going away?</p> <ul> <li class="has-line-data" data-line-start="54" data-line-end="55"> Wes: I say yes</li> <li class="has-line-data" data-line-start="55" data-line-end="57"> Scott: Double yes</li> </ul> <h2 class="code-line" data-line-start="57" data-line-end="58"> <a id="Links_57" name="Links_57"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="58" data-line-end="59"> <a href="https://syntax.fm/show/092/react-hooks">Syntax Ep 092: React Hooks</a></li> <li class="has-line-data" data-line-start="59" data-line-end="60"> <a href= "https://overreacted.io/making-setinterval-declarative-with-react-hooks/"> Making setInterval Declarative with React Hooks - Dan Abramov</a></li> <li class="has-line-data" data-line-start="60" data-line-end="61"> <a href= "https://github.com/tleunen/babel-plugin-module-resolver">babel-plugin-module-resolver</a></li> <li class="has-line-data" data-line-start="61" data-line-end="62"> <a href= "https://github.com/wesbos/awesome-uses/blob/master/src/components/FavIcon.js"> awesome-uses</a></li> <li class="has-line-data" data-line-start="62" data-line-end="64"> <a href="https://uses.tech/">uses.tech</a></li> </ul> <h2 class="code-line" data-line-start="64" data-line-end="65"> <a id="_SIIIIICK__PIIIICKS__64" name= "_SIIIIICK__PIIIICKS__64"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="65" data-line-end="66"> Scott: <a href= "https://www.youtube.com/playlist?list=PLKBPwuu3eCYkScmqpD9xE7UZsszweVO0n">Ars Technica War Stories</a></li> <li class="has-line-data" data-line-start="66" data-line-end="68"> Wes: <a href= "https://www.amazon.com/Mpow-Headphones-Protection-Function-Tangle-Free/dp/B078YQW26K/">Mpow CH1 Kids Headphones</a></li> </ul> <h2 class="code-line" data-line-start="68" data-line-end="69"> <a id="Shameless_Plugs_68" name="Shameless_Plugs_68"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="69" data-line-end="70"> 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="70" data-line-end="72"> 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="72" data-line-end="73"> <a id="Tweet_us_your_tasty_treats_72" name= "Tweet_us_your_tasty_treats_72"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="73" data-line-end="74"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="74" data-line-end="75"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="75" data-line-end="76"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="76" data-line-end="77"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="77" data-line-end="78"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="78" data-line-end="79"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="79" data-line-end="80"> 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 about React Hooks, one year later — what’s changed, how to use them, 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 1:26 - Hooks vs Render Props Hooks win hands down useState useReducer useRef useContext useEffect Custom hooks to hide and encapsulate functionality 35:06 - How we use them Scott Index that imports all custom hooks Babel alias to hooks folder Import { useHook } from ‘hooks’ useContextState Wes useResizeObserver useForm useGridRower useWickedFavIcon 45:54 - Which built-in hooks do we not use? useImperativeHandle useCallback useDebugValue 48:22 - Are hooks harder to learn? Wes: Yes — but easier to maintain after the fact Scott: Yes — harder conceptually and initially but easier after concepts are understood 50:29 - Are classes going away? Wes: I say yes Scott: Double yes Links Syntax Ep 092: React Hooks Making setInterval Declarative with React Hooks - Dan Abramov babel-plugin-module-resolver awesome-uses uses.tech ××× SIIIIICK ××× PIIIICKS ××× Scott: Ars Technica War Stories Wes: Mpow CH1 Kids Headphones 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 

Syntax - Tasty Web Development Treats

React Hooks - 1 Year Later

<p class="has-line-data" data-line-start="7" data-line-end="8">In this Hasty Treat, Scott and Wes talk about how to hire an assistant — something that can make your life a lot easier as a solo developer.</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="Show_Notes_12" name="Show_Notes_12"></a>Show Notes</h2> <p class="has-line-data" data-line-start="14" data-line-end="15"> 2:34 - Finding someone</p> <ul> <li class="has-line-data" data-line-start="16" data-line-end="20"> Virtual Assistant <ul> <li class="has-line-data" data-line-start="17" data-line-end="18"> Offset timezones can be handy</li> <li class="has-line-data" data-line-start="18" data-line-end="20"> Flexible is great - two hours here, two hours there</li> </ul> </li> </ul> <p class="has-line-data" data-line-start="20" data-line-end="21"> 5:55 - Types of tasks to delegate</p> <ul> <li class="has-line-data" data-line-start="22" data-line-end="23"> Support</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> Email replies</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> Mail and shipping items</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> Invoicing</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> Expenses</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> Research - find emails for X</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> Blog post edits</li> <li class="has-line-data" data-line-start="29" data-line-end="31"> Sponsorships</li> </ul> <p class="has-line-data" data-line-start="31" data-line-end="32"> 14:50 - Standard Operating Procedures</p> <ul> <li class="has-line-data" data-line-start="33" data-line-end="34"> If something happens more than once, make an SOP</li> <li class="has-line-data" data-line-start="34" data-line-end="36"> Common questions that come up</li> </ul> <p class="has-line-data" data-line-start="36" data-line-end="37"> 18:07 - Tools</p> <ul> <li class="has-line-data" data-line-start="38" data-line-end="39"> 1Password</li> <li class="has-line-data" data-line-start="39" data-line-end="40"> Missive</li> <li class="has-line-data" data-line-start="40" data-line-end="43"> Custom backend tools for: <ul> <li class="has-line-data" data-line-start="41" data-line-end="42"> Managing courses</li> <li class="has-line-data" data-line-start="42" data-line-end="43"> Issuing refunds</li> </ul> </li> <li class="has-line-data" data-line-start="43" data-line-end="44"> Chromebook</li> <li class="has-line-data" data-line-start="44" data-line-end="46"> Google Docs</li> </ul> <p class="has-line-data" data-line-start="46" data-line-end="47"> 21:52 - Hours</p> <h2 class="code-line" data-line-start="48" data-line-end="49"> <a id="Links_48" name="Links_48"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href="https://1password.com/">1Password</a></li> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href="https://missiveapp.com/">Missive</a></li> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href="https://www.notion.so/">Notion</a></li> <li class="has-line-data" data-line-start="52" data-line-end="53"> <a href="https://freshbooks.com/syntax">Freshbooks</a></li> <li class="has-line-data" data-line-start="53" data-line-end="55"> <a href= "https://syntax.fm/show/184/desktop-and-mobile-apps-with-a-single-codebase"> Syntax Ep 184: Desktop & Mobile Apps With a Single Codebase</a></li> </ul> <h2 class="code-line" data-line-start="55" data-line-end="56"> <a id="Tweet_us_your_tasty_treats_55" name= "Tweet_us_your_tasty_treats_55"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="57" data-line-end="58"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="58" data-line-end="59"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="59" data-line-end="60"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="60" data-line-end="61"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="61" data-line-end="62"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="62" data-line-end="63"> 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 how to hire an assistant — something that can make your life a lot easier as a solo developer. 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 2:34 - Finding someone Virtual Assistant Offset timezones can be handy Flexible is great - two hours here, two hours there 5:55 - Types of tasks to delegate Support Email replies Mail and shipping items Invoicing Expenses Research - find emails for X Blog post edits Sponsorships 14:50 - Standard Operating Procedures If something happens more than once, make an SOP Common questions that come up 18:07 - Tools 1Password Missive Custom backend tools for: Managing courses Issuing refunds Chromebook Google Docs 21:52 - Hours Links 1Password Missive Notion Freshbooks Syntax Ep 184: Desktop & Mobile Apps With a Single Codebase 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 

Hasty Treat - Hiring an Assistant

<p class="has-line-data" data-line-start="7" data-line-end="8">In this episode of Syntax, Scott and Wes talk about soft skills tips — productivity, planning, communication, and more.</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Sentry__Sponsor_9" name="Sentry__Sponsor_9"></a>Sentry - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11">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="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="Show_Notes_15" name="Show_Notes_15"></a>Show Notes</h2> <p class="has-line-data" data-line-start="17" data-line-end="18"> 2:20 - Productivity</p> <ul> <li class="has-line-data" data-line-start="19" data-line-end="20"> Make a todo list and prioritize</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> Get ideas out of your brain</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> Use a tool like Notion as a second brain</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> Batch related things together</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> Recharge when you need it</li> <li class="has-line-data" data-line-start="24" data-line-end="26"> Have a system and stick to it</li> </ul> <p class="has-line-data" data-line-start="26" data-line-end="27"> 16:34 - Finishing projects</p> <ul> <li class="has-line-data" data-line-start="28" data-line-end="29"> Start</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> Do a little every day</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> Go all-in for a few days</li> <li class="has-line-data" data-line-start="31" data-line-end="33"> Clearly identify what needs to be done (Github issues, todo app)</li> </ul> <p class="has-line-data" data-line-start="33" data-line-end="34"> 23:30 - Planning tips</p> <ul> <li class="has-line-data" data-line-start="35" data-line-end="36">I use Mind Node</li> <li class="has-line-data" data-line-start="36" data-line-end="37"> Whimsical</li> <li class="has-line-data" data-line-start="37" data-line-end="38"> Write it down when you have an idea</li> <li class="has-line-data" data-line-start="38" data-line-end="40"> Put everything in a calendar</li> </ul> <p class="has-line-data" data-line-start="40" data-line-end="41"> 30:24 - Communication</p> <ul> <li class="has-line-data" data-line-start="42" data-line-end="43"> Be honest and upfront with deadlines</li> <li class="has-line-data" data-line-start="43" data-line-end="44"> Give yourself padding — many people are overly optimistic</li> <li class="has-line-data" data-line-start="44" data-line-end="45"> Don’t let people expect communication from you, at all, or at all times</li> <li class="has-line-data" data-line-start="45" data-line-end="46"> Assume good intentions</li> <li class="has-line-data" data-line-start="46" data-line-end="48"> Don’t be a jerk to clients or coworkers</li> </ul> <p class="has-line-data" data-line-start="48" data-line-end="49"> 40:28 - Skill and career advancement</p> <ul> <li class="has-line-data" data-line-start="50" data-line-end="51"> FDD — fun driven development</li> <li class="has-line-data" data-line-start="51" data-line-end="52"> Share what you learn</li> <li class="has-line-data" data-line-start="52" data-line-end="53"> Don’t let other’s progress get you down — there is always someone smarter doing crazier stuff</li> <li class="has-line-data" data-line-start="53" data-line-end="54"> Solve your own problems</li> <li class="has-line-data" data-line-start="54" data-line-end="55"> Apply and interview for anything that’s interesting</li> <li class="has-line-data" data-line-start="55" data-line-end="56"> Track your progress</li> <li class="has-line-data" data-line-start="56" data-line-end="57">I want to ___, I wish I could ____, You are lucky that you get to _____</li> <li class="has-line-data" data-line-start="57" data-line-end="59"> Just start! Seriously. Plan on doing something.</li> </ul> <h2 class="code-line" data-line-start="59" data-line-end="60"> <a id="Links_59" name="Links_59"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="60" data-line-end="61"> <a href="https://todoist.com/">Todoist</a></li> <li class="has-line-data" data-line-start="61" data-line-end="62"> <a href="https://culturedcode.com/things/">Things</a></li> <li class="has-line-data" data-line-start="62" data-line-end="63"> <a href="https://www.notion.so/">Notion</a></li> <li class="has-line-data" data-line-start="63" data-line-end="64"> <a href="https://evernote.com/">Evernote</a></li> <li class="has-line-data" data-line-start="64" data-line-end="65"> <a href="https://notable.md/">Notable</a></li> <li class="has-line-data" data-line-start="65" data-line-end="66"> <a href="https://beginnerjavascript.com/">Beginner Javascript</a></li> <li class="has-line-data" data-line-start="66" data-line-end="67"> <a href= "https://www.leveluptutorials.com/tutorials/level-1-electron">Level 1 Electron</a></li> <li class="has-line-data" data-line-start="67" data-line-end="68"> <a href="https://uses.tech/">uses.tech</a></li> <li class="has-line-data" data-line-start="68" data-line-end="69"> <a href="https://basecamp.com/books/rework">Rework</a></li> <li class="has-line-data" data-line-start="69" data-line-end="70"> <a href="https://twitter.com/jasonfried">Jason Freid</a></li> <li class="has-line-data" data-line-start="70" data-line-end="71"> <a href="https://twitter.com/dhh">David Heinemeier Hanson</a></li> <li class="has-line-data" data-line-start="71" data-line-end="72"> <a href="https://basecamp.com/books/calm">It Doesn’t Have To Be Crazy At Work</a></li> <li class="has-line-data" data-line-start="72" data-line-end="73"> <a href="https://mindnode.com/">Mind Node</a></li> <li class="has-line-data" data-line-start="73" data-line-end="74"> <a href="https://whimsical.com/">Whimsical</a></li> <li class="has-line-data" data-line-start="74" data-line-end="75"> <a href="https://javascript30.com/">Javascript30</a></li> <li class="has-line-data" data-line-start="75" data-line-end="76"> <a href="https://codesandbox.io/">CodeSandbox</a></li> <li class="has-line-data" data-line-start="76" data-line-end="77"> <a href="https://streaksapp.com/">Streaks</a></li> <li class="has-line-data" data-line-start="77" data-line-end="79"> <a href= "https://www.youtube.com/channel/UCkfmbKrdAH3_NHkbAZhWqIw/videos">Xerf Xpec YouTube Channel</a></li> </ul> <h2 class="code-line" data-line-start="79" data-line-end="80"> <a id="_SIIIIICK__PIIIICKS__79" name= "_SIIIIICK__PIIIICKS__79"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="80" data-line-end="81"> Scott: <a href= "https://www.youtube.com/watch?v=ypdnSS0La7s">Katsumi Horii Project - Sky Cruisin’ Album</a></li> <li class="has-line-data" data-line-start="81" data-line-end="83"> Wes: <a href= "https://store.amplifi.com/products/amplifi-alien">AmpliFi ALIEN Router</a></li> </ul> <h2 class="code-line" data-line-start="83" data-line-end="84"> <a id="Shameless_Plugs_83" name="Shameless_Plugs_83"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="84" data-line-end="85"> Scott: <a href= "https://www.leveluptutorials.com/pro">Animating React with Framer Motion</a> - Sign up for the year and save 25%!</li> <li class="has-line-data" data-line-start="85" data-line-end="87"> Wes: <a href="https://beginnerjavascript.com/">Beginner Javascript</a> - Use the coupon code ‘Syntax’ for $10 off!</li> </ul> <h2 class="code-line" data-line-start="87" data-line-end="88"> <a id="Tweet_us_your_tasty_treats_87" name= "Tweet_us_your_tasty_treats_87"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="88" data-line-end="89"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="89" data-line-end="90"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="90" data-line-end="91"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="91" data-line-end="92"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="92" data-line-end="93"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="93" data-line-end="94"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="94" data-line-end="95"> 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 about soft skills tips — productivity, planning, communication, and more. 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”. 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. Show Notes 2:20 - Productivity Make a todo list and prioritize Get ideas out of your brain Use a tool like Notion as a second brain Batch related things together Recharge when you need it Have a system and stick to it 16:34 - Finishing projects Start Do a little every day Go all-in for a few days Clearly identify what needs to be done (Github issues, todo app) 23:30 - Planning tips I use Mind Node Whimsical Write it down when you have an idea Put everything in a calendar 30:24 - Communication Be honest and upfront with deadlines Give yourself padding — many people are overly optimistic Don’t let people expect communication from you, at all, or at all times Assume good intentions Don’t be a jerk to clients or coworkers 40:28 - Skill and career advancement FDD — fun driven development Share what you learn Don’t let other’s progress get you down — there is always someone smarter doing crazier stuff Solve your own problems Apply and interview for anything that’s interesting Track your progress I want to ___, I wish I could ____, You are lucky that you get to _____ Just start! Seriously. Plan on doing something. Links Todoist Things Notion Evernote Notable Beginner Javascript Level 1 Electron uses.tech Rework Jason Freid David Heinemeier Hanson It Doesn’t Have To Be Crazy At Work Mind Node Whimsical Javascript30 CodeSandbox Streaks Xerf Xpec YouTube Channel ××× SIIIIICK ××× PIIIICKS ××× Scott: Katsumi Horii Project - Sky Cruisin’ Album Wes: AmpliFi ALIEN Router Shameless Plugs Scott: Animating React with Framer Motion - Sign up for the year and save 25%! Wes: Beginner Javascript - 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 

Soft Skills Tips

<p class="has-line-data" data-line-start="7" data-line-end="8">In this Hasty Treat, Scott asks Wes about Cloudflare — which services he uses, which ones he doesn’t, why, and more!</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="Show_Notes_12" name="Show_Notes_12"></a>Show Notes</h2> <p class="has-line-data" data-line-start="14" data-line-end="15"> 2:45 - What do you personally use Cloudflare for?</p> <ul> <li class="has-line-data" data-line-start="16" data-line-end="17"> DNS provider</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> Domain registration at cost</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> Caching</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> DDoS protection</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> Hiding server IP address</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> Free HTTPS</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> Firewall rules</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> Scrape shield</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> Lightweight stats</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> Serverless functions</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> DNS</li> <li class="has-line-data" data-line-start="27" data-line-end="29"> Cloudflare Warp</li> </ul> <p class="has-line-data" data-line-start="29" data-line-end="30"> 16:40 - What are you not using?</p> <ul> <li class="has-line-data" data-line-start="31" data-line-end="32"> KV storage</li> <li class="has-line-data" data-line-start="32" data-line-end="33"> Video streaming</li> <li class="has-line-data" data-line-start="33" data-line-end="35"> Deep customization around blocking/errors</li> </ul> <p class="has-line-data" data-line-start="35" data-line-end="36"> 19:49 - How do you set it up?</p> <h2 class="code-line" data-line-start="37" data-line-end="38"> <a id="Links_37" name="Links_37"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="38" data-line-end="39"> <a href="https://www.cloudflare.com/">Cloudflare</a></li> <li class="has-line-data" data-line-start="39" data-line-end="40"> <a href="https://beginnerjavascript.com/">Beginner Javascript</a></li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <a href="https://www.digitalocean.com/">Digital Ocean</a></li> <li class="has-line-data" data-line-start="41" data-line-end="42"> <a href="https://dnsimple.com/">DNS Simple</a></li> <li class="has-line-data" data-line-start="42" data-line-end="43"> <a href="https://letsencrypt.org/">Let’s Encrypt</a></li> <li class="has-line-data" data-line-start="43" data-line-end="44"> <a href= "https://syntax.fm/show/224/serverless-cloud-functions-part-1">Syntax Ep 224: Serverless / Cloud Functions - Part 1</a></li> <li class="has-line-data" data-line-start="44" data-line-end="45"> <a href="https://begin.com/">Begin</a></li> <li class="has-line-data" data-line-start="45" data-line-end="47"> <a href="https://www.youtube.com/watch?v=px1Tn0LTqcs">7-Eleven hit “Dance The Slurp”</a></li> </ul> <h2 class="code-line" data-line-start="47" data-line-end="48"> <a id="Tweet_us_your_tasty_treats_47" name= "Tweet_us_your_tasty_treats_47"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="48" data-line-end="49"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="52" data-line-end="53"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="53" data-line-end="54"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="54" data-line-end="55"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this Hasty Treat, Scott asks Wes about Cloudflare — which services he uses, which ones he doesn’t, why, and more! 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 2:45 - What do you personally use Cloudflare for? DNS provider Domain registration at cost Caching DDoS protection Hiding server IP address Free HTTPS Firewall rules Scrape shield Lightweight stats Serverless functions DNS Cloudflare Warp 16:40 - What are you not using? KV storage Video streaming Deep customization around blocking/errors 19:49 - How do you set it up? Links Cloudflare Beginner Javascript Digital Ocean DNS Simple Let’s Encrypt Syntax Ep 224: Serverless / Cloud Functions - Part 1 Begin 7-Eleven hit “Dance The Slurp” 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 

Hasty Treat - Scott asks Wes about Cloudflare

<p class="has-line-data" data-line-start="7" data-line-end="8">In this episode of Syntax, Scott and Wes do a part 2 about Serverless — databases, files, secrets, auth, 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="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="Show_Notes_15" name="Show_Notes_15"></a>Show Notes</h2> <p class="has-line-data" data-line-start="17" data-line-end="18"> 2:47 - Wes tried Cloudflare Workers</p> <ul> <li class="has-line-data" data-line-start="19" data-line-end="21"> Also this is so cool:</li> </ul> <blockquote> <p class="has-line-data" data-line-start="21" data-line-end="22"> Hey Wes, just listened to the latest Syntax episode on the serverless setup. Not sure if it’s an episode idea or not, but if you wanna do a bit of a dive on Cloudflare’s service workers, I’m currently leading an “invisible infrastructure migration” right now from a legacy WordPress setup to a new Storyblok/Netlify setup. We’re using Cloudflare’s service workers to basically “stitch” the headers/menus/footers from the old WordPress site into our new Netlify pages, but serving the page back as if it was part of the normal domain. This means we can migrate from the old to the new slowly without massively disrupting SEO, doing a lengthy/costly rebuild, etc.</p> </blockquote> <ul> <li class="has-line-data" data-line-start="23" data-line-end="24">A word on Digital Ocean</li> <li class="has-line-data" data-line-start="24" data-line-end="26"> Kubernetes + FAAS allows you to scale up/down</li> </ul> <p class="has-line-data" data-line-start="26" data-line-end="27"> 13:54 - Secret management</p> <ul> <li class="has-line-data" data-line-start="28" data-line-end="29"> Some have a great UI</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> Some have a CLI</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> Some only have production</li> <li class="has-line-data" data-line-start="31" data-line-end="33"> Some have dev/staging/prod</li> </ul> <p class="has-line-data" data-line-start="33" data-line-end="34"> 16:24 - Vendor lock-in</p> <ul> <li class="has-line-data" data-line-start="35" data-line-end="38"> Two kinds of vendor lock-in <ul> <li class="has-line-data" data-line-start="36" data-line-end="37"> Lock into a low-level provider (Like AWS, or MongoDB)</li> <li class="has-line-data" data-line-start="37" data-line-end="38"> Lock into a framework</li> </ul> </li> <li class="has-line-data" data-line-start="38" data-line-end="42"> Questions to ask: <ul> <li class="has-line-data" data-line-start="39" data-line-end="40"> Can I go, take my app as-is, and host it on another provider?</li> <li class="has-line-data" data-line-start="40" data-line-end="41"> Can I refactor the config and run my code as-is?</li> <li class="has-line-data" data-line-start="41" data-line-end="42"> Do I need to refactor my code for it to run on other platforms?</li> </ul> </li> <li class="has-line-data" data-line-start="42" data-line-end="43"> Next.js will only run on Now</li> <li class="has-line-data" data-line-start="43" data-line-end="44"> There is a community package</li> <li class="has-line-data" data-line-start="44" data-line-end="45"> Begin all runs on Arc.codes</li> <li class="has-line-data" data-line-start="45" data-line-end="47"> Firebase is locked in?</li> </ul> <p class="has-line-data" data-line-start="47" data-line-end="48"> 25:12 - Sharing dependencies</p> <ul> <li class="has-line-data" data-line-start="49" data-line-end="50"> Each function will have its own package.json, which can be a pain</li> <li class="has-line-data" data-line-start="50" data-line-end="51"> Publish utils a private module</li> <li class="has-line-data" data-line-start="51" data-line-end="52"> AWS Layers</li> <li class="has-line-data" data-line-start="52" data-line-end="53"> Import/export</li> <li class="has-line-data" data-line-start="53" data-line-end="55"> Bundle and tree shake</li> </ul> <p class="has-line-data" data-line-start="55" data-line-end="56"> 30:26 - Local development</p> <ul> <li class="has-line-data" data-line-start="57" data-line-end="58"> Now dev</li> <li class="has-line-data" data-line-start="58" data-line-end="59"> NPX sandbox</li> <li class="has-line-data" data-line-start="59" data-line-end="61"> Wrangler for Cloudflare workers</li> </ul> <p class="has-line-data" data-line-start="61" data-line-end="62"> 36:40 - Existing applications</p> <ul> <li class="has-line-data" data-line-start="63" data-line-end="64"> Difficult to move with many routes, but easy to move a Graphql API that has one single route</li> <li class="has-line-data" data-line-start="64" data-line-end="65"> Maybe do piece by piece instead of all at once</li> <li class="has-line-data" data-line-start="65" data-line-end="67"> Begin has http express method</li> </ul> <p class="has-line-data" data-line-start="67" data-line-end="68"> 45:21 - Data</p> <ul> <li class="has-line-data" data-line-start="69" data-line-end="70"> Any DB you want</li> <li class="has-line-data" data-line-start="70" data-line-end="71"> Dynamo DB integrated into many</li> <li class="has-line-data" data-line-start="71" data-line-end="72"> Firebase</li> <li class="has-line-data" data-line-start="72" data-line-end="73"> KV Storage for Cloudflare workers</li> <li class="has-line-data" data-line-start="73" data-line-end="75"> <a href="https://fauna.com/">Fauna</a></li> </ul> <p class="has-line-data" data-line-start="75" data-line-end="76"> 48:14 - File storage</p> <ul> <li class="has-line-data" data-line-start="77" data-line-end="78"> Generally files go in the associated file place like Amazon S3, Backblaze B2, Cloudinary</li> <li class="has-line-data" data-line-start="78" data-line-end="80"> Many also have this integrated as well</li> </ul> <p class="has-line-data" data-line-start="80" data-line-end="81"> 52:18 - Auth</p> <ul> <li class="has-line-data" data-line-start="82" data-line-end="83"> Serverless is ephemeral and stateless</li> <li class="has-line-data" data-line-start="83" data-line-end="85"> JWT likely as sessions will work, but doesn’t really make sense</li> </ul> <h2 class="code-line" data-line-start="85" data-line-end="86"> <a id="Links_85" name="Links_85"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="86" data-line-end="87"> <a href="https://workers.cloudflare.com/">Cloudflare Workers</a></li> <li class="has-line-data" data-line-start="87" data-line-end="88"> <a href="https://www.akamai.com/">Akamai</a></li> <li class="has-line-data" data-line-start="88" data-line-end="89"> <a href="https://www.mongodb.com/cloud/stitch">MongoDB Stitch</a></li> <li class="has-line-data" data-line-start="89" data-line-end="90"> <a href="http://youtube.com/watch?v=9wvEwPLcLcA">Hitler uses Kubernetes</a></li> <li class="has-line-data" data-line-start="90" data-line-end="91"> <a href="https://www.digitalocean.com/">Digital Ocean</a></li> <li class="has-line-data" data-line-start="91" data-line-end="92"> <a href="https://kubernetes.io/">Kubernetes</a></li> <li class="has-line-data" data-line-start="92" data-line-end="93"> <a href="https://firebase.google.com/">Firebase</a></li> <li class="has-line-data" data-line-start="93" data-line-end="94"> <a href="https://cloud.google.com/">Google Cloud</a></li> <li class="has-line-data" data-line-start="94" data-line-end="95"> <a href="https://arc.codes/">Architect</a></li> <li class="has-line-data" data-line-start="95" data-line-end="96"> <a href="https://nextjs.org/">Next.js</a></li> <li class="has-line-data" data-line-start="96" data-line-end="97"> <a href="https://zeit.co/home">Now.sh</a></li> <li class="has-line-data" data-line-start="97" data-line-end="98"> <a href="https://begin.com/">Begin</a></li> <li class="has-line-data" data-line-start="98" data-line-end="99"> <a href="https://www.netlify.com/">Netlify</a></li> <li class="has-line-data" data-line-start="99" data-line-end="100"> <a href="https://github.com/zeit/now">Now</a></li> <li class="has-line-data" data-line-start="100" data-line-end= "101"><a href= "https://github.com/cloudflare/wrangler">Wrangler</a></li> <li class="has-line-data" data-line-start="101" data-line-end= "102"><a href= "https://www.apollographql.com/docs/apollo-server/federation/introduction/"> Apollo Federation</a></li> <li class="has-line-data" data-line-start="102" data-line-end= "103"><a href= "https://microsoft.github.io/monaco-editor/">Monaco</a></li> <li class="has-line-data" data-line-start="103" data-line-end= "104"><a href="https://www.postman.com/">Postman</a></li> <li class="has-line-data" data-line-start="104" data-line-end= "105"><a href="https://codesandbox.io/">Codesandbox</a></li> <li class="has-line-data" data-line-start="105" data-line-end= "106"><a href="https://aws.amazon.com/dynamodb/">DynamoDB</a></li> <li class="has-line-data" data-line-start="106" data-line-end= "107"><a href="https://aws.amazon.com/s3/">Amazon S3</a></li> <li class="has-line-data" data-line-start="107" data-line-end= "108"><a href= "https://www.backblaze.com/b2/cloud-storage.html">Backblaze B2</a></li> <li class="has-line-data" data-line-start="108" data-line-end= "110"><a href="https://cloudinary.com/">Cloudinary</a></li> </ul> <h2 class="code-line" data-line-start="110" data-line-end="111"> <a id="_SIIIIICK__PIIIICKS__110" name= "_SIIIIICK__PIIIICKS__110"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="111" data-line-end= "112">Scott: <a href= "https://www.amazon.com/Power-Bad-Negativity-Effect-Rules-ebook/dp/B07Q3NHPGZ">The Power of Bad by John Tierney</a></li> <li class="has-line-data" data-line-start="112" data-line-end= "114">Wes: <a href="https://amzn.to/2VhBbUt">Socket Organizer</a></li> </ul> <h2 class="code-line" data-line-start="114" data-line-end="115"> <a id="Shameless_Plugs_114" name= "Shameless_Plugs_114"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="115" data-line-end= "116">Scott: <a href= "https://www.leveluptutorials.com/pro">Animating React with Framer Motion</a> - Sign up for the year and save 25%!</li> <li class="has-line-data" data-line-start="116" data-line-end= "118">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="118" data-line-end="119"> <a id="Tweet_us_your_tasty_treats_118" name= "Tweet_us_your_tasty_treats_118"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="119" data-line-end= "120"><a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="120" data-line-end= "121"><a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="121" data-line-end= "122"><a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="122" data-line-end= "123"><a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="123" data-line-end= "124"><a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="124" data-line-end= "125"><a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="125" data-line-end= "126">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 do a part 2 about Serverless — databases, files, secrets, auth, 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. 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. Show Notes 2:47 - Wes tried Cloudflare Workers Also this is so cool: Hey Wes, just listened to the latest Syntax episode on the serverless setup. Not sure if it’s an episode idea or not, but if you wanna do a bit of a dive on Cloudflare’s service workers, I’m currently leading an “invisible infrastructure migration” right now from a legacy WordPress setup to a new Storyblok/Netlify setup. We’re using Cloudflare’s service workers to basically “stitch” the headers/menus/footers from the old WordPress site into our new Netlify pages, but serving the page back as if it was part of the normal domain. This means we can migrate from the old to the new slowly without massively disrupting SEO, doing a lengthy/costly rebuild, etc. A word on Digital Ocean Kubernetes + FAAS allows you to scale up/down 13:54 - Secret management Some have a great UI Some have a CLI Some only have production Some have dev/staging/prod 16:24 - Vendor lock-in Two kinds of vendor lock-in Lock into a low-level provider (Like AWS, or MongoDB) Lock into a framework Questions to ask: Can I go, take my app as-is, and host it on another provider? Can I refactor the config and run my code as-is? Do I need to refactor my code for it to run on other platforms? Next.js will only run on Now There is a community package Begin all runs on Arc.codes Firebase is locked in? 25:12 - Sharing dependencies Each function will have its own package.json, which can be a pain Publish utils a private module AWS Layers Import/export Bundle and tree shake 30:26 - Local development Now dev NPX sandbox Wrangler for Cloudflare workers 36:40 - Existing applications Difficult to move with many routes, but easy to move a Graphql API that has one single route Maybe do piece by piece instead of all at once Begin has http express method 45:21 - Data Any DB you want Dynamo DB integrated into many Firebase KV Storage for Cloudflare workers Fauna 48:14 - File storage Generally files go in the associated file place like Amazon S3, Backblaze B2, Cloudinary Many also have this integrated as well 52:18 - Auth Serverless is ephemeral and stateless JWT likely as sessions will work, but doesn’t really make sense Links Cloudflare Workers Akamai MongoDB Stitch Hitler uses Kubernetes Digital Ocean Kubernetes Firebase Google Cloud Architect Next.js Now.sh Begin Netlify Now Wrangler Apollo Federation Monaco Postman Codesandbox DynamoDB Amazon S3 Backblaze B2 Cloudinary ××× SIIIIICK ××× PIIIICKS ××× Scott: The Power of Bad by John Tierney Wes: Socket Organizer Shameless Plugs Scott: Animating React with Framer Motion - 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 

More on Severless - Databases × Files × Secrets × Auth × More!

<p class="has-line-data" data-line-start="7" data-line-end="8">In this Hasty Treat, Scott and Wes talk about container queries, what they are and how you can use them.</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Sentry__Sponsor_9" name="Sentry__Sponsor_9"></a>Sentry - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11">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="12" data-line-end="13"> <a id="Show_Notes_12" name="Show_Notes_12"></a>Show Notes</h2> <p class="has-line-data" data-line-start="14" data-line-end="15"> 4:30 - The General Idea</p> <ul> <li class="has-line-data" data-line-start="16" data-line-end="18"> <a href="https://bkardell.com/blog/TowardResponsive.html?1">Toward Responsive Elements — Brian Kardell</a></li> </ul> <p class="has-line-data" data-line-start="18" data-line-end="19"> 6:20 - Problems</p> <ul> <li class="has-line-data" data-line-start="20" data-line-end="21"> It’s not as easy as, “how do we write them”</li> <li class="has-line-data" data-line-start="21" data-line-end="24"> Some of the requirements may need a fundamental change to browser engines <ul> <li class="has-line-data" data-line-start="22" data-line-end="24"> May be very impractical and take a long time</li> </ul> </li> </ul> <blockquote> <p class="has-line-data" data-line-start="24" data-line-end="25"> “Did you know, for example, that there are multiple many year long efforts with huge investments underway already aimed at unlocking many new things in CSS? There are - and I don’t mean Houdini!” ~ Brian Kardell</p> </blockquote> <p class="has-line-data" data-line-start="26" data-line-end="27"> 8:56 - What’s been happening?</p> <ul> <li class="has-line-data" data-line-start="28" data-line-end="29"> Lots of conversations</li> <li class="has-line-data" data-line-start="29" data-line-end="31"> Dead ends</li> </ul> <blockquote> <p class="has-line-data" data-line-start="31" data-line-end="32"> “How do we make this into more solvable problems?” and “How do we actually make some progress, mitigate risk - take a step, and and actually get something to developers?” ~ Brian Kardell</p> </blockquote> <ul> <li class="has-line-data" data-line-start="33" data-line-end="36"> ‘containment’ and ResizeObserver, <ul> <li class="has-line-data" data-line-start="34" data-line-end="36"> <a href= "https://webkit.org/blog/9997/resizeobserver-in-webkit/">Implemented in all browsers in about 2 years</a></li> </ul> </li> </ul> <p class="has-line-data" data-line-start="36" data-line-end="37"> 12:00 - Progress</p> <ul> <li class="has-line-data" data-line-start="38" data-line-end="40"> Lot’s of discussion <ul> <li class="has-line-data" data-line-start="39" data-line-end="40"> Goog, Moz, Apple, smart people</li> </ul> </li> <li class="has-line-data" data-line-start="40" data-line-end="41"> Not there yet</li> <li class="has-line-data" data-line-start="41" data-line-end="43"> Big ideas that could go somewhere</li> </ul> <p class="has-line-data" data-line-start="43" data-line-end="52"> <code>.foo { display: grid; grid-template-columns: switch( (available-inline-size > 1024px) 1fr 4fr 1fr; (available-inline-size > 400px) 2fr 1fr; (available-inline-size > 100px) 1fr; default 1fr; ); }</code></p> <blockquote> <p class="has-line-data" data-line-start="53" data-line-end="54">“A whole lot of the problems with existing ideas is that they heave to loop back through (expensive) phases potentially several times and make it (seemingly) impossible to keep CSS rendering in the same frame.” ~ Brian Kardell</p> </blockquote> <ul> <li class="has-line-data" data-line-start="55" data-line-end="57"> Or a system based on resizeObserver</li> </ul> <blockquote> <p class="has-line-data" data-line-start="57" data-line-end="58"> “In the coming months I hope to continue to think about, explore this space and continue discussions with others. I would love to publish some research and maybe some new (functional) experiments with JS that aim to be ‘closer’ to a path that might be paveable.” ~ Brian Kardell</p> </blockquote> <ul> <li class="has-line-data" data-line-start="59" data-line-end="60"> <a href= "https://github.com/ZeeCoder/container-query">https://github.com/ZeeCoder/container-query</a></li> <li class="has-line-data" data-line-start="60" data-line-end="62"> <a href= "https://github.com/FreddyFY/styled-container-query">https://github.com/FreddyFY/styled-container-query</a></li> </ul> <h2 class="code-line" data-line-start="62" data-line-end="63"> <a id="Links_62" name="Links_62"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="63" data-line-end="64"> <a href="https://uses.tech/">uses.tech</a></li> <li class="has-line-data" data-line-start="64" data-line-end="65"> <a href="https://www.linkedin.com/in/ian-kilpatrick-9b68a373/">Ian Kilpatrick</a></li> <li class="has-line-data" data-line-start="65" data-line-end="67"> <a href="https://github.com/jaredpalmer/tsdx">Jared Palmer’s tsdx</a></li> </ul> <h2 class="code-line" data-line-start="67" data-line-end="68"> <a id="Tweet_us_your_tasty_treats_67" name= "Tweet_us_your_tasty_treats_67"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="68" data-line-end="69"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="69" data-line-end="70"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="70" data-line-end="71"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="71" data-line-end="72"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="72" data-line-end="73"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="73" data-line-end="74"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="74" data-line-end="75"> 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 container queries, what they are and how you can use them. 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 4:30 - The General Idea Toward Responsive Elements — Brian Kardell 6:20 - Problems It’s not as easy as, “how do we write them” Some of the requirements may need a fundamental change to browser engines May be very impractical and take a long time “Did you know, for example, that there are multiple many year long efforts with huge investments underway already aimed at unlocking many new things in CSS? There are - and I don’t mean Houdini!” ~ Brian Kardell 8:56 - What’s been happening? Lots of conversations Dead ends “How do we make this into more solvable problems?” and “How do we actually make some progress, mitigate risk - take a step, and and actually get something to developers?” ~ Brian Kardell ‘containment’ and ResizeObserver, Implemented in all browsers in about 2 years 12:00 - Progress Lot’s of discussion Goog, Moz, Apple, smart people Not there yet Big ideas that could go somewhere .foo { display: grid; grid-template-columns: switch( (available-inline-size > 1024px) 1fr 4fr 1fr; (available-inline-size > 400px) 2fr 1fr; (available-inline-size > 100px) 1fr; default 1fr; ); } “A whole lot of the problems with existing ideas is that they heave to loop back through (expensive) phases potentially several times and make it (seemingly) impossible to keep CSS rendering in the same frame.” ~ Brian Kardell Or a system based on resizeObserver “In the coming months I hope to continue to think about, explore this space and continue discussions with others. I would love to publish some research and maybe some new (functional) experiments with JS that aim to be ‘closer’ to a path that might be paveable.” ~ Brian Kardell https://github.com/ZeeCoder/container-query https://github.com/FreddyFY/styled-container-query Links uses.tech Ian Kilpatrick Jared Palmer’s tsdx 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 

Hasty Treat - The Status of Element Queries / Container Queries

<p class="has-line-data" data-line-start="7" data-line-end="8">In this Hasty Treat, Scott and Wes talk about how to make servers fast!</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Sentry__Sponsor_9" name="Sentry__Sponsor_9"></a>Sentry - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11">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="12" data-line-end="13"> <a id="Show_Notes_12" name="Show_Notes_12"></a>Show Notes</h2> <p class="has-line-data" data-line-start="14" data-line-end="15"> 3:58 - Ram / Memory</p> <ul> <li class="has-line-data" data-line-start="16" data-line-end="17"> Things like variables, functions, callstacks, application cache, sessions are all stored in memory</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> Large processes can eat up lots of memory</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> Reading 1,000,000 lines of a CSV</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> npm installing</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> Swap Memory</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> If your node application is limited by memory, it will crash or wait longer for memory to be freed up (garbage collection)</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> Garbage collection can take up CPU resourced</li> <li class="has-line-data" data-line-start="23" data-line-end="25"> High-performance databases</li> </ul> <p class="has-line-data" data-line-start="25" data-line-end="26"> 7:52 - CPU</p> <ul> <li class="has-line-data" data-line-start="27" data-line-end="28"> The processor on your server - the brains of the computer</li> <li class="has-line-data" data-line-start="28" data-line-end="29">A task - like 1 + 1, or function handleClick(), takes CPU time - the faster the processor, and the more cores it has, the faster it can think and perform these tasks</li> <li class="has-line-data" data-line-start="29" data-line-end="31">A faster CPU means your node app will start more quickly</li> </ul> <p class="has-line-data" data-line-start="31" data-line-end="32"> 9:26 - GPU</p> <ul> <li class="has-line-data" data-line-start="33" data-line-end="34"> Most servers don’t have a GPU</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> GPUs are not only good for graphics, but they are great at solving complex tasks</li> <li class="has-line-data" data-line-start="35" data-line-end="36"> Bitcoin mining is fast on a GPU</li> <li class="has-line-data" data-line-start="36" data-line-end="38"> Machine Learning</li> </ul> <p class="has-line-data" data-line-start="38" data-line-end="39"> 11:47 - Disk Space</p> <ul> <li class="has-line-data" data-line-start="40" data-line-end="41"> SSD vs HDD</li> <li class="has-line-data" data-line-start="41" data-line-end="42"> The files have to be read from the hard drive and served up to the web server - the hard drive speed determines how fast they can be read, and how fast they can be written</li> <li class="has-line-data" data-line-start="42" data-line-end="43"> SSD is more expensive but makes for a much faster application</li> <li class="has-line-data" data-line-start="43" data-line-end="44"> HDD is cheaper and is better for storing larger files that aren’t as time-sensitive</li> <li class="has-line-data" data-line-start="44" data-line-end="46"> An SSD will mean your node app will start faster and serve up files more quickly</li> </ul> <h2 class="code-line" data-line-start="46" data-line-end="47"> <a id="Links_46" name="Links_46"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href="https://www.mongodb.com/cloud/atlas">Atlas</a></li> <li class="has-line-data" data-line-start="48" data-line-end="50"> <a href="https://www.digitalocean.com/">Digital Ocean</a></li> </ul> <h2 class="code-line" data-line-start="50" data-line-end="51"> <a id="Tweet_us_your_tasty_treats_50" name= "Tweet_us_your_tasty_treats_50"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="52" data-line-end="53"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="53" data-line-end="54"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="54" data-line-end="55"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="55" data-line-end="56"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="57" data-line-end="58"> 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 how to make servers fast! 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 3:58 - Ram / Memory Things like variables, functions, callstacks, application cache, sessions are all stored in memory Large processes can eat up lots of memory Reading 1,000,000 lines of a CSV npm installing Swap Memory If your node application is limited by memory, it will crash or wait longer for memory to be freed up (garbage collection) Garbage collection can take up CPU resourced High-performance databases 7:52 - CPU The processor on your server - the brains of the computer A task - like 1 + 1, or function handleClick(), takes CPU time - the faster the processor, and the more cores it has, the faster it can think and perform these tasks A faster CPU means your node app will start more quickly 9:26 - GPU Most servers don’t have a GPU GPUs are not only good for graphics, but they are great at solving complex tasks Bitcoin mining is fast on a GPU Machine Learning 11:47 - Disk Space SSD vs HDD The files have to be read from the hard drive and served up to the web server - the hard drive speed determines how fast they can be read, and how fast they can be written SSD is more expensive but makes for a much faster application HDD is cheaper and is better for storing larger files that aren’t as time-sensitive An SSD will mean your node app will start faster and serve up files more quickly Links Atlas Digital Ocean 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 

Hasty Treat - What makes a server fast?

<p class="has-line-data" data-line-start="7" data-line-end="8">In this episode of Syntax, Scott and Wes talk about serverless and cloud providers - the benefits, limitations, providers and more!</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "TECH_Domains__Sponsor_9" name="TECH_Domains__Sponsor_9"></a>.TECH Domains - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11">If you need eyes on your project, you’ll need a domain, and .TECH is perfect for representing your brand. Find out if your .TECH domain is available at <a href= "https://go.tech/syntax2020">go.tech/syntax2020</a>. Use the coupon code Syntax2020 and get 90% off 1- 5- and 10-year domain names.</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="Show_Notes_15" name="Show_Notes_15"></a>Show Notes</h2> <p class="has-line-data" data-line-start="17" data-line-end="18"> 4:05 - What is Serverless?</p> <ul> <li class="has-line-data" data-line-start="19" data-line-end="20"> URL driven</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> Startup/shut down (Heroku works this way)</li> <li class="has-line-data" data-line-start="21" data-line-end="23"> Digital Ocean droplet works differently</li> </ul> <p class="has-line-data" data-line-start="23" data-line-end="24"> 8:15 - What are the benefits?</p> <ul> <li class="has-line-data" data-line-start="25" data-line-end="26"> Scale up specific functions rather than everything - aka potentially cheaper</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> Security - your singular server instance being hacked is not a possibility</li> <li class="has-line-data" data-line-start="27" data-line-end="30"> Less knowledge overhead required <ul> <li class="has-line-data" data-line-start="28" data-line-end="29"> You don’t need to manage your own server</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> Empowers front-end devs to do more</li> </ul> </li> <li class="has-line-data" data-line-start="30" data-line-end="33"> Faster deploys <ul> <li class="has-line-data" data-line-start="31" data-line-end="33"> Only re-deploy the code that changed</li> </ul> </li> </ul> <p class="has-line-data" data-line-start="33" data-line-end="34"> 17:05 - What can you host on Serverless?</p> <ul> <li class="has-line-data" data-line-start="35" data-line-end="36"> Static Files - SPA (React)</li> <li class="has-line-data" data-line-start="36" data-line-end="37"> Single functions</li> <li class="has-line-data" data-line-start="37" data-line-end="39"> It can be in JS, Python, GO, PHP</li> </ul> <p class="has-line-data" data-line-start="39" data-line-end="40"> 18:07 - What can’t you host on Serverless?</p> <ul> <li class="has-line-data" data-line-start="41" data-line-end="42"> Entire applications</li> <li class="has-line-data" data-line-start="42" data-line-end="43"> Large apps have slow coldstarts</li> <li class="has-line-data" data-line-start="43" data-line-end="45"> 500mb limit</li> </ul> <p class="has-line-data" data-line-start="45" data-line-end="46"> 23:40 - Raw Providers</p> <ul> <li class="has-line-data" data-line-start="47" data-line-end="48"> Google Cloud</li> <li class="has-line-data" data-line-start="48" data-line-end="49"> Azure</li> <li class="has-line-data" data-line-start="49" data-line-end="50"> AWS Lambda</li> <li class="has-line-data" data-line-start="50" data-line-end="51"> SAP</li> <li class="has-line-data" data-line-start="51" data-line-end="52"> Red Hat</li> <li class="has-line-data" data-line-start="52" data-line-end="53"> IBM Cloud Functions</li> <li class="has-line-data" data-line-start="53" data-line-end="54"> Cloudflare Workers</li> <li class="has-line-data" data-line-start="54" data-line-end="56"> Kind of cool because they work like service workers where you can intercept any HTTP request</li> </ul> <p class="has-line-data" data-line-start="56" data-line-end="57"> 27:33 - Easy Providers + Frameworks</p> <ul> <li class="has-line-data" data-line-start="58" data-line-end="59"> Begin + Arc.codes</li> <li class="has-line-data" data-line-start="59" data-line-end="60"> Zeit Now + Next.js</li> <li class="has-line-data" data-line-start="60" data-line-end="61"> Anything + Serverless</li> <li class="has-line-data" data-line-start="61" data-line-end="62"> Netlify</li> <li class="has-line-data" data-line-start="62" data-line-end="63"> AWS Amplify</li> <li class="has-line-data" data-line-start="63" data-line-end="64"> Apex Up - TJ Holowaychuk</li> <li class="has-line-data" data-line-start="64" data-line-end="66"> Open Faas + Digital Ocean</li> </ul> <h2 class="code-line" data-line-start="66" data-line-end="67"> <a id="Links_66" name="Links_66"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="67" data-line-end="68"> <a href="https://www.heroku.com/">Heroku</a></li> <li class="has-line-data" data-line-start="68" data-line-end="69"> <a href="https://www.digitalocean.com/">Digital Ocean</a></li> <li class="has-line-data" data-line-start="69" data-line-end="70"> <a href="https://www.meteor.com/hosting">Meteor Galaxy</a></li> <li class="has-line-data" data-line-start="70" data-line-end="71"> <a href= "https://blog.codepen.io/2017/10/03/145-preprocessors-lambda/">Codepen Radio: Preprocessors and Lambda</a></li> <li class="has-line-data" data-line-start="71" data-line-end="72"> <a href="https://zeit.co/home">Zeit Now</a></li> <li class="has-line-data" data-line-start="72" data-line-end="73"> <a href= "https://twitter.com/maxsteenbergen/status/1226994154510725120">Wes’ tweet about serverless</a></li> <li class="has-line-data" data-line-start="73" data-line-end="74"> <a href= "https://twitter.com/maxsteenbergen">@maxsteenbergen</a></li> <li class="has-line-data" data-line-start="74" data-line-end="75"> <a href="https://uses.tech/">uses.tech</a></li> <li class="has-line-data" data-line-start="75" data-line-end="76"> <a href="https://cloud.google.com/gcp/">Google Cloud</a></li> <li class="has-line-data" data-line-start="76" data-line-end="77"> <a href="https://azure.microsoft.com/">Azure</a></li> <li class="has-line-data" data-line-start="77" data-line-end="78"> <a href="https://aws.amazon.com/lambda/">AWS Lambda</a></li> <li class="has-line-data" data-line-start="78" data-line-end="79"> <a href="https://www.sap.com/index.html">SAP</a></li> <li class="has-line-data" data-line-start="79" data-line-end="80"> <a href="https://www.redhat.com/">Red Hat</a></li> <li class="has-line-data" data-line-start="80" data-line-end="81"> <a href="https://cloud.ibm.com/functions/">IBM Cloud Functions</a></li> <li class="has-line-data" data-line-start="81" data-line-end="82"> <a href="https://workers.cloudflare.com/">Cloudflare Workers</a></li> <li class="has-line-data" data-line-start="82" data-line-end="83"> <a href="https://begin.com/">Begin</a></li> <li class="has-line-data" data-line-start="83" data-line-end="84"> <a href="https://arc.codes/">Arc.codes</a></li> <li class="has-line-data" data-line-start="84" data-line-end="85"> <a href="https://serverless.com/">Severless</a></li> <li class="has-line-data" data-line-start="85" data-line-end="86"> <a href="https://www.netlify.com/">Netlify</a></li> <li class="has-line-data" data-line-start="86" data-line-end="87"> <a href="https://aws.amazon.com/amplify/">AWS Amplify</a></li> <li class="has-line-data" data-line-start="87" data-line-end="88"> <a href="https://apex.sh/docs/up/">Apex Up</a></li> <li class="has-line-data" data-line-start="88" data-line-end="89"> <a href="https://www.openfaas.com/">Open Faas</a></li> <li class="has-line-data" data-line-start="89" data-line-end="90"> <a href="https://twitter.com/tjholowaychuk">@tjholowaychuk</a></li> <li class="has-line-data" data-line-start="90" data-line-end="91"> <a href="https://www.youtube.com/watch?v=dpHizW9Ojsg">Scott tries Begin.com</a></li> <li class="has-line-data" data-line-start="91" data-line-end="93"> <a href="https://www.reddit.com/r/SyntaxFM/">SyntaxFM Reddit</a></li> </ul> <h2 class="code-line" data-line-start="93" data-line-end="94"> <a id="_SIIIIICK__PIIIICKS__93" name= "_SIIIIICK__PIIIICKS__93"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="94" data-line-end="95"> Scott: <a href= "https://www.youtube.com/channel/UCiP_FwGyJQ_6P8k5ON5mncQ">Matt McMuscles YouTube Channel</a></li> <li class="has-line-data" data-line-start="95" data-line-end="97"> Wes: <a href= "https://www.youtube.com/channel/UCjFaPUcJU1vwk193mnW_w1w">Modern Vintage Gamer</a></li> </ul> <h2 class="code-line" data-line-start="97" data-line-end="98"> <a id="Shameless_Plugs_97" name="Shameless_Plugs_97"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="98" data-line-end="99"> Scott: <a href= "https://www.youtube.com/user/LevelUpTuts/videos">Scott’s YouTube Channel</a></li> <li class="has-line-data" data-line-start="99" data-line-end="101"> Wes: <a href="https://beginnerjavascript.com/">Beginner Javascript Course</a> - Use the coupon code ‘Syntax’ for $10 off!</li> </ul> <h2 class="code-line" data-line-start="101" data-line-end="102"> <a id="Tweet_us_your_tasty_treats_101" name= "Tweet_us_your_tasty_treats_101"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="102" data-line-end= "103"><a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="103" data-line-end= "104"><a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="104" data-line-end= "105"><a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="105" data-line-end= "106"><a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="106" data-line-end= "107"><a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="107" data-line-end= "108"><a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="108" data-line-end= "109">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 about serverless and cloud providers - the benefits, limitations, providers and more! .TECH Domains - Sponsor If you need eyes on your project, you’ll need a domain, and .TECH is perfect for representing your brand. Find out if your .TECH domain is available at go.tech/syntax2020. Use the coupon code Syntax2020 and get 90% off 1- 5- and 10-year domain names. 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. Show Notes 4:05 - What is Serverless? URL driven Startup/shut down (Heroku works this way) Digital Ocean droplet works differently 8:15 - What are the benefits? Scale up specific functions rather than everything - aka potentially cheaper Security - your singular server instance being hacked is not a possibility Less knowledge overhead required You don’t need to manage your own server Empowers front-end devs to do more Faster deploys Only re-deploy the code that changed 17:05 - What can you host on Serverless? Static Files - SPA (React) Single functions It can be in JS, Python, GO, PHP 18:07 - What can’t you host on Serverless? Entire applications Large apps have slow coldstarts 500mb limit 23:40 - Raw Providers Google Cloud Azure AWS Lambda SAP Red Hat IBM Cloud Functions Cloudflare Workers Kind of cool because they work like service workers where you can intercept any HTTP request 27:33 - Easy Providers + Frameworks Begin + Arc.codes Zeit Now + Next.js Anything + Serverless Netlify AWS Amplify Apex Up - TJ Holowaychuk Open Faas + Digital Ocean Links Heroku Digital Ocean Meteor Galaxy Codepen Radio: Preprocessors and Lambda Zeit Now Wes’ tweet about serverless @maxsteenbergen uses.tech Google Cloud Azure AWS Lambda SAP Red Hat IBM Cloud Functions Cloudflare Workers Begin Arc.codes Severless Netlify AWS Amplify Apex Up Open Faas @tjholowaychuk Scott tries Begin.com SyntaxFM Reddit ××× SIIIIICK ××× PIIIICKS ××× Scott: Matt McMuscles YouTube Channel Wes: Modern Vintage Gamer Shameless Plugs Scott: Scott’s YouTube Channel Wes: Beginner Javascript Course - 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 

Serverless / Cloud Functions - Part 1

<p class="has-line-data" data-line-start="7" data-line-end="8">In this Hasty Treat, Scott and Wes talk about Framer Motion — why it is so cool, and how it can improve animations in your projects.</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="Show_Notes_12" name="Show_Notes_12"></a>Show Notes</h2> <p class="has-line-data" data-line-start="14" data-line-end="15"> 4:53 - The 411</p> <ul> <li class="has-line-data" data-line-start="16" data-line-end="17"> Previous knowns as Pop Motion Pose</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> Animation library with focus on ease of use</li> <li class="has-line-data" data-line-start="18" data-line-end="20"> Utilizes both spring and duration based animations</li> </ul> <p class="has-line-data" data-line-start="20" data-line-end="21"> 7:19 - Pose</p> <ul> <li class="has-line-data" data-line-start="22" data-line-end="23"> Pose was previously more pose based - aka you made scenes and toggled between them</li> <li class="has-line-data" data-line-start="23" data-line-end="25"> This still exists within Motion as variants, but isn’t the main way</li> </ul> <p class="has-line-data" data-line-start="25" data-line-end="26"> 8:06 - The New New</p> <ul> <li class="has-line-data" data-line-start="27" data-line-end="31"> motion.div <ul> <li class="has-line-data" data-line-start="28" data-line-end="29"> animate prop is basically a live value for the animation</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> initial for initial state</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> exit for animating out with use of animatePresence</li> </ul> </li> <li class="has-line-data" data-line-start="31" data-line-end="33"> Hard stuff made easy <ul> <li class="has-line-data" data-line-start="32" data-line-end="33"> drag prop</li> </ul> </li> <li class="has-line-data" data-line-start="33" data-line-end="34"> Full control over properties like duration and easing</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> Orchestration features, this then that</li> <li class="has-line-data" data-line-start="35" data-line-end="37"> Variants <ul> <li class="has-line-data" data-line-start="36" data-line-end="37"> Multiple scenes allow you to orchestrate many animations with a single state change</li> </ul> </li> <li class="has-line-data" data-line-start="37" data-line-end="38"> Handles hover and tap easily</li> <li class="has-line-data" data-line-start="38" data-line-end="39"> Scroll values</li> <li class="has-line-data" data-line-start="39" data-line-end="41"> SVG path animations</li> </ul> <p class="has-line-data" data-line-start="41" data-line-end="42"> 19:45 - Final Thoughts</p> <ul> <li class="has-line-data" data-line-start="43" data-line-end="44"> Framer Motion is easier</li> <li class="has-line-data" data-line-start="44" data-line-end="45"> React Spring is much smaller</li> <li class="has-line-data" data-line-start="45" data-line-end="47"> React Spring makes very complex animation possible</li> </ul> <h2 class="code-line" data-line-start="47" data-line-end="48"> <a id="Links_47" name="Links_47"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="48" data-line-end="49"> <a href="https://www.framer.com/motion/">Framer Motion</a></li> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href="https://www.react-spring.io/">React Spring</a></li> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href="https://www.framer.com/api/motion/examples/">Framer Motion Examples</a></li> <li class="has-line-data" data-line-start="51" data-line-end="53"> <a href="https://www.framer.com/">Framer X</a></li> </ul> <h2 class="code-line" data-line-start="53" data-line-end="54"> <a id="Tweet_us_your_tasty_treats_53" name= "Tweet_us_your_tasty_treats_53"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="54" data-line-end="55"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="55" data-line-end="56"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="57" data-line-end="58"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="58" data-line-end="59"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="59" data-line-end="60"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="60" data-line-end="61"> 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 Framer Motion — why it is so cool, and how it can improve animations in your projects. 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 4:53 - The 411 Previous knowns as Pop Motion Pose Animation library with focus on ease of use Utilizes both spring and duration based animations 7:19 - Pose Pose was previously more pose based - aka you made scenes and toggled between them This still exists within Motion as variants, but isn’t the main way 8:06 - The New New motion.div animate prop is basically a live value for the animation initial for initial state exit for animating out with use of animatePresence Hard stuff made easy drag prop Full control over properties like duration and easing Orchestration features, this then that Variants Multiple scenes allow you to orchestrate many animations with a single state change Handles hover and tap easily Scroll values SVG path animations 19:45 - Final Thoughts Framer Motion is easier React Spring is much smaller React Spring makes very complex animation possible Links Framer Motion React Spring Framer Motion Examples Framer X 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 

Hasty Treat - Get Movin' With Framer Motion

<p class="has-line-data" data-line-start="7" data-line-end="8">In this episode of Syntax, Scott and Wes talk about web dev GUIs — what are they, are they going to replace developers, are they good or bad, and more!</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Hasura__Sponsor_9" name="Hasura__Sponsor_9"></a>Hasura - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> Hasura is an open source real-time GraphQL engine. It connects to your databases & microservices and instantly gives you a production-ready GraphQL API. Check it out at <a href= "https://hasura.io/">Hasura.io</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> <p class="has-line-data" data-line-start="17" data-line-end="18"> 1:30 - What is “codeless”?</p> <ul> <li class="has-line-data" data-line-start="19" data-line-end="20"> The codeless movement is coming in with a force. Are they just selling something? Or is it a real concern?</li> <li class="has-line-data" data-line-start="20" data-line-end="27"> All types of jobs are being replaced by computers <ul> <li class="has-line-data" data-line-start="21" data-line-end="22"> Truckers</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> Cashiers</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> Lawnmowers</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> Doctors</li> <li class="has-line-data" data-line-start="25" data-line-end="27"> Why not web developers?</li> </ul> </li> </ul> <p class="has-line-data" data-line-start="27" data-line-end="28"> 7:22 - First experience building sites with a GUI?</p> <ul> <li class="has-line-data" data-line-start="29" data-line-end="31"> <a href= "https://www.adobe.com/products/dreamweaver.html">Dreamweaver</a></li> </ul> <p class="has-line-data" data-line-start="31" data-line-end="32"> 10:18 - Entire website builders:</p> <ul> <li class="has-line-data" data-line-start="33" data-line-end="34"> <a href="https://www.wix.com/">Wix</a></li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <a href="https://www.squarespace.com/">Squarespace</a></li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <a href="https://webflow.com/">Webflow</a></li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <a href="https://www.modulz.app/">Modulz</a></li> <li class="has-line-data" data-line-start="37" data-line-end="38"> <a href="https://thegrid.io/">Grid.io</a></li> <li class="has-line-data" data-line-start="38" data-line-end="40"> Wordpress Builders</li> </ul> <p class="has-line-data" data-line-start="40" data-line-end="41"> 13:17 - When are GUIs useful?</p> <ul> <li class="has-line-data" data-line-start="42" data-line-end="43"> Brochure site</li> <li class="has-line-data" data-line-start="43" data-line-end="45"> Basic e-commerce</li> </ul> <p class="has-line-data" data-line-start="45" data-line-end="46"> 20:26 - Is a GUI/Codeless always better?</p> <ul> <li class="has-line-data" data-line-start="47" data-line-end="49"> It depends what you’re capable of doing</li> </ul> <p class="has-line-data" data-line-start="49" data-line-end="50"> 25:21 - Levels of hell GUI assistance in builders</p> <ul> <li class="has-line-data" data-line-start="51" data-line-end="52"> CMS - Just modifying content and basic markup</li> <li class="has-line-data" data-line-start="52" data-line-end="53"> Access to code, drag blocks into place</li> <li class="has-line-data" data-line-start="53" data-line-end="54"> No or minimal access to code</li> <li class="has-line-data" data-line-start="54" data-line-end="56"> No modification outside of options</li> </ul> <p class="has-line-data" data-line-start="56" data-line-end="57"> 31:36 - Are there GUIs for making applications?</p> <ul> <li class="has-line-data" data-line-start="58" data-line-end="59"> Native Mobile</li> <li class="has-line-data" data-line-start="59" data-line-end="61"> <a href="https://zapier.com/">Zapier</a></li> </ul> <p class="has-line-data" data-line-start="61" data-line-end="62"> 36:54 - Are jobs at risk?</p> <ul> <li class="has-line-data" data-line-start="63" data-line-end="68"> <p class="has-line-data" data-line-start="63" data-line-end="64"> Yes</p> <ul> <li class="has-line-data" data-line-start="64" data-line-end="65">I think a lot of WordPress tinkering has already been replaced</li> <li class="has-line-data" data-line-start="65" data-line-end="66"> The guy who knows what buttons to push is at risk?</li> <li class="has-line-data" data-line-start="66" data-line-end="68"> Webmaster jobs where the roll was just occasionally updating HTML and text</li> </ul> </li> <li class="has-line-data" data-line-start="68" data-line-end="73"> <p class="has-line-data" data-line-start="68" data-line-end="69"> No</p> <ul> <li class="has-line-data" data-line-start="69" data-line-end="70"> Government</li> <li class="has-line-data" data-line-start="70" data-line-end="71"> Educational institutions</li> <li class="has-line-data" data-line-start="71" data-line-end="73"> Major corporations that can’t have their content stored via a service</li> </ul> </li> </ul> <p class="has-line-data" data-line-start="73" data-line-end="74"> 39:55 - Our favorite GUIs to help development</p> <ul> <li class="has-line-data" data-line-start="75" data-line-end="81"> <p class="has-line-data" data-line-start="75" data-line-end="76"> Scott:</p> <ul> <li class="has-line-data" data-line-start="76" data-line-end="77"> <a href="https://www.netlify.com/">Netlify</a></li> <li class="has-line-data" data-line-start="77" data-line-end="78"> <a href="https://www.heroku.com/">Heroku</a></li> <li class="has-line-data" data-line-start="78" data-line-end="79"> <a href="https://studio3t.com/">Studio 3T</a></li> <li class="has-line-data" data-line-start="79" data-line-end="81"> <a href="https://code.visualstudio.com/">VS Code</a></li> </ul> </li> <li class="has-line-data" data-line-start="81" data-line-end="89"> <p class="has-line-data" data-line-start="81" data-line-end="82"> Wes:</p> <ul> <li class="has-line-data" data-line-start="82" data-line-end="83"> Sketch CSS Export</li> <li class="has-line-data" data-line-start="83" data-line-end="84"> <a href="https://www.digitalocean.com/">Digital Ocean</a></li> <li class="has-line-data" data-line-start="84" data-line-end="85"> <a href="https://cyberduck.io/">Cyberduck</a></li> <li class="has-line-data" data-line-start="85" data-line-end="86"> <a href="https://panic.com/transmit/">Transmit</a></li> <li class="has-line-data" data-line-start="86" data-line-end="87"> <a href="https://ohmyz.sh/">ZSH</a></li> <li class="has-line-data" data-line-start="87" data-line-end="89"> <a href="https://code.visualstudio.com/">VS Code</a></li> </ul> </li> </ul> <h2 class="code-line" data-line-start="89" data-line-end="90"> <a id="Links_89" name="Links_89"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="90" data-line-end="91"> <a href= "https://www.theverge.com/2019/8/30/20839810/irobot-terra-autonomous-lawnmower-roomba-robot-fcc-beta-release-date-2020"> Roomba’s first autonomous lawnmower</a></li> <li class="has-line-data" data-line-start="91" data-line-end="92"> <a href="https://notepad-plus-plus.org/">Notepad++</a></li> <li class="has-line-data" data-line-start="92" data-line-end="93"> <a href= "https://en.wikipedia.org/wiki/Yahoo!_GeoCities">Geocities</a></li> <li class="has-line-data" data-line-start="93" data-line-end="94"> <a href= "https://en.wikipedia.org/wiki/Angelfire">Angelfire</a></li> <li class="has-line-data" data-line-start="94" data-line-end="95"> <a href="https://www.sketch.com/">Sketch</a></li> <li class="has-line-data" data-line-start="95" data-line-end="96"> <a href="https://www.figma.com/">Figma</a></li> <li class="has-line-data" data-line-start="96" data-line-end="97"> <a href="https://www.gatsbyjs.org/">Gatsby</a></li> <li class="has-line-data" data-line-start="97" data-line-end="98"> <a href="https://products.office.com/en-us/excel">Excel</a></li> <li class="has-line-data" data-line-start="98" data-line-end="99"> <a href="https://www.meteor.com/">Meteor</a></li> <li class="has-line-data" data-line-start="99" data-line-end="100"> <a href="https://recurly.com/">Recurly</a></li> <li class="has-line-data" data-line-start="100" data-line-end= "101"><a href="https://gumroad.com/">Gumroad</a></li> <li class="has-line-data" data-line-start="101" data-line-end= "103"><a href="https://begin.com/">Begin.com</a></li> </ul> <h2 class="code-line" data-line-start="103" data-line-end="104"> <a id="_SIIIIICK__PIIIICKS__103" name= "_SIIIIICK__PIIIICKS__103"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="104" data-line-end= "105">Scott: <a href= "https://podcasts.apple.com/us/podcast/the-baron-of-botox/id1493450409">Baron of Botox</a></li> <li class="has-line-data" data-line-start="105" data-line-end= "107">Wes: <a href= "https://www.amazon.com/Owlet-Baby-Monitor-Infants-Ultimate/dp/B06ZZXYD6S">Owlet Smart Sock</a></li> </ul> <h2 class="code-line" data-line-start="107" data-line-end="108"> <a id="Shameless_Plugs_107" name= "Shameless_Plugs_107"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="108" data-line-end= "109">Scott: <a href= "https://www.leveluptutorials.com/pro">How To Build A GraphQL API</a> - Sign up for the year and save 25%!</li> <li class="has-line-data" data-line-start="109" data-line-end= "111">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="111" data-line-end="112"> <a id="Tweet_us_your_tasty_treats_111" name= "Tweet_us_your_tasty_treats_111"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="112" data-line-end= "113"><a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="113" data-line-end= "114"><a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="114" data-line-end= "115"><a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="115" data-line-end= "116"><a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="116" data-line-end= "117"><a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="117" data-line-end= "118"><a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="118" data-line-end= "119">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 about web dev GUIs — what are they, are they going to replace developers, are they good or bad, and more! Hasura - Sponsor Hasura is an open source real-time GraphQL engine. It connects to your databases & microservices and instantly gives you a production-ready GraphQL API. Check it out at Hasura.io. 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 1:30 - What is “codeless”? The codeless movement is coming in with a force. Are they just selling something? Or is it a real concern? All types of jobs are being replaced by computers Truckers Cashiers Lawnmowers Doctors Why not web developers? 7:22 - First experience building sites with a GUI? Dreamweaver 10:18 - Entire website builders: Wix Squarespace Webflow Modulz Grid.io Wordpress Builders 13:17 - When are GUIs useful? Brochure site Basic e-commerce 20:26 - Is a GUI/Codeless always better? It depends what you’re capable of doing 25:21 - Levels of hell GUI assistance in builders CMS - Just modifying content and basic markup Access to code, drag blocks into place No or minimal access to code No modification outside of options 31:36 - Are there GUIs for making applications? Native Mobile Zapier 36:54 - Are jobs at risk? Yes I think a lot of WordPress tinkering has already been replaced The guy who knows what buttons to push is at risk? Webmaster jobs where the roll was just occasionally updating HTML and text No Government Educational institutions Major corporations that can’t have their content stored via a service 39:55 - Our favorite GUIs to help development Scott: Netlify Heroku Studio 3T VS Code Wes: Sketch CSS Export Digital Ocean Cyberduck Transmit ZSH VS Code Links Roomba’s first autonomous lawnmower Notepad++ Geocities Angelfire Sketch Figma Gatsby Excel Meteor Recurly Gumroad Begin.com ××× SIIIIICK ××× PIIIICKS ××× Scott: Baron of Botox Wes: Owlet Smart Sock Shameless Plugs Scott: How To Build A GraphQL API - 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 

Are Web Dev GUIs Going to Replace Us?

<p class="has-line-data" data-line-start="7" data-line-end="8">In this Hasty Treat, Scott and Wes talk about hobbies — how they can improve your life and make you a better developer, as well as the hobbies they enjoy.</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Sentry__Sponsor_9" name="Sentry__Sponsor_9"></a>Sentry - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11">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="12" data-line-end="13"> <a id="Show_Notes_12" name="Show_Notes_12"></a>Show Notes</h2> <p class="has-line-data" data-line-start="14" data-line-end="15"> 3:19 - What are our hobbies?</p> <ul> <li class="has-line-data" data-line-start="16" data-line-end="23"> <p class="has-line-data" data-line-start="16" data-line-end="17"> Wes: Focus on one thing, learn it, move along</p> <ul> <li class="has-line-data" data-line-start="17" data-line-end="18"> Kombucha, Fermentation and Curing Projects</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> Bike flipping</li> <li class="has-line-data" data-line-start="19" data-line-end="20"> Kids ride on repairs + hacks</li> <li class="has-line-data" data-line-start="20" data-line-end="21"> ATV fixing</li> <li class="has-line-data" data-line-start="21" data-line-end="23"> ICE to Battery conversion</li> </ul> </li> <li class="has-line-data" data-line-start="23" data-line-end="33"> <p class="has-line-data" data-line-start="23" data-line-end="24"> Scott:</p> <ul> <li class="has-line-data" data-line-start="24" data-line-end="25"> Dance - 15+ years</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> Weightlifting / fitness</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> Video games</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> Watching hockey</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> Design</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> Computing / coding</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> Snowboarding</li> <li class="has-line-data" data-line-start="31" data-line-end="33"> Kung fu movies</li> </ul> </li> </ul> <p class="has-line-data" data-line-start="33" data-line-end="34"> 9:00 - Why are they good?</p> <ul> <li class="has-line-data" data-line-start="35" data-line-end="36"> Fuel your coding project</li> <li class="has-line-data" data-line-start="36" data-line-end="37"> Maybe could even become your key to a job you love</li> <li class="has-line-data" data-line-start="37" data-line-end="38"> They keep your mind sharp</li> <li class="has-line-data" data-line-start="38" data-line-end="39"> Good for downtime</li> <li class="has-line-data" data-line-start="39" data-line-end="42"> Good for mental health and mood <ul> <li class="has-line-data" data-line-start="40" data-line-end="41"> Can be meditative</li> <li class="has-line-data" data-line-start="41" data-line-end="42"> Be cognizant of what they do to your mental state</li> </ul> </li> <li class="has-line-data" data-line-start="42" data-line-end="43"> Promotes creativity and critical thinking</li> <li class="has-line-data" data-line-start="43" data-line-end="45"> Fun man</li> </ul> <p class="has-line-data" data-line-start="45" data-line-end="46"> 17:54 - How do you find a hobby?</p> <ul> <li class="has-line-data" data-line-start="47" data-line-end="53"> <p class="has-line-data" data-line-start="47" data-line-end="48"> Wes</p> <ul> <li class="has-line-data" data-line-start="48" data-line-end="49">I always need an end game</li> <li class="has-line-data" data-line-start="49" data-line-end="50">I want to grow hot peppers</li> <li class="has-line-data" data-line-start="50" data-line-end="51">I want a wicked ATV for cheap</li> <li class="has-line-data" data-line-start="51" data-line-end="53">I think batteries are fascinating but I need something real to do</li> </ul> </li> <li class="has-line-data" data-line-start="53" data-line-end="57"> <p class="has-line-data" data-line-start="53" data-line-end="54"> Scott - I start with the fascination</p> <ul> <li class="has-line-data" data-line-start="54" data-line-end="55">I think dancing is cool, but I could never learn</li> <li class="has-line-data" data-line-start="55" data-line-end="57">I think _____ is cool, but I don’t know where to start</li> </ul> </li> <li class="has-line-data" data-line-start="57" data-line-end="59"> <p class="has-line-data" data-line-start="57" data-line-end="58"> Deep dark YouTube holes</p> <ul> <li class="has-line-data" data-line-start="58" data-line-end="59"> YouTube has an endless selection of educational content</li> </ul> </li> <li class="has-line-data" data-line-start="59" data-line-end="60"> <p class="has-line-data" data-line-start="59" data-line-end="60"> Facebooks groups or forums</p> </li> <li class="has-line-data" data-line-start="60" data-line-end="63"> <p class="has-line-data" data-line-start="60" data-line-end="61"> Meetups / volunteering</p> <ul> <li class="has-line-data" data-line-start="61" data-line-end="63"> Introverts will have a hard time with this, push yourself</li> </ul> </li> </ul> <p class="has-line-data" data-line-start="63" data-line-end="64"> 22:50 - What is your hobby?</p> <ul> <li class="has-line-data" data-line-start="65" data-line-end="66"> <a href="https://twitter.com/SyntaxFM">Tweet us @syntaxfm</a></li> <li class="has-line-data" data-line-start="66" data-line-end="68"> <a href="https://www.reddit.com/r/SyntaxFM/">SyntaxFM Reddit</a></li> </ul> <h2 class="code-line" data-line-start="68" data-line-end="69"> <a id="Links_68" name="Links_68"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="69" data-line-end="71"> <a href="https://www.oculus.com/quest/">Oculus Quest</a></li> </ul> <h2 class="code-line" data-line-start="71" data-line-end="72"> <a id="Tweet_us_your_tasty_treats_71" name= "Tweet_us_your_tasty_treats_71"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="72" data-line-end="73"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="73" data-line-end="74"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="74" data-line-end="75"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="75" data-line-end="76"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="76" data-line-end="77"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="77" data-line-end="78"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="78" data-line-end="79"> 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 hobbies — how they can improve your life and make you a better developer, as well as the hobbies they enjoy. 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 3:19 - What are our hobbies? Wes: Focus on one thing, learn it, move along Kombucha, Fermentation and Curing Projects Bike flipping Kids ride on repairs + hacks ATV fixing ICE to Battery conversion Scott: Dance - 15+ years Weightlifting / fitness Video games Watching hockey Design Computing / coding Snowboarding Kung fu movies 9:00 - Why are they good? Fuel your coding project Maybe could even become your key to a job you love They keep your mind sharp Good for downtime Good for mental health and mood Can be meditative Be cognizant of what they do to your mental state Promotes creativity and critical thinking Fun man 17:54 - How do you find a hobby? Wes I always need an end game I want to grow hot peppers I want a wicked ATV for cheap I think batteries are fascinating but I need something real to do Scott - I start with the fascination I think dancing is cool, but I could never learn I think _____ is cool, but I don’t know where to start Deep dark YouTube holes YouTube has an endless selection of educational content Facebooks groups or forums Meetups / volunteering Introverts will have a hard time with this, push yourself 22:50 - What is your hobby? Tweet us @syntaxfm SyntaxFM Reddit Links Oculus Quest 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 

Hasty Treat - The Power of Hobbies

<p class="has-line-data" data-line-start="7" data-line-end="8">In this episode of Syntax, Scott and Wes talk about running backups and a home server — Synology setups, apps, 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="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="Show_Notes_15" name="Show_Notes_15"></a>Show Notes</h2> <p class="has-line-data" data-line-start="17" data-line-end="18"> 2:03 - What is it?</p> <ul> <li class="has-line-data" data-line-start="19" data-line-end="21">A little headless computer</li> </ul> <p class="has-line-data" data-line-start="21" data-line-end="22"> 5:07 - Drives</p> <ul> <li class="has-line-data" data-line-start="23" data-line-end="25"> WD Red or Seagate Ironwolf — They are loud, you can put SSDs in them, but it’s $$</li> </ul> <p class="has-line-data" data-line-start="25" data-line-end="26"> 6:25 - RAID</p> <p class="has-line-data" data-line-start="27" data-line-end="28"> 11:17 - Power</p> <ul> <li class="has-line-data" data-line-start="29" data-line-end="30"> Backup</li> <li class="has-line-data" data-line-start="30" data-line-end="31"> Time Machine over the network</li> <li class="has-line-data" data-line-start="31" data-line-end="32"> You can upgrade the memory</li> <li class="has-line-data" data-line-start="32" data-line-end="34"> SSDs</li> </ul> <p class="has-line-data" data-line-start="34" data-line-end="35"> 22:40 - Backing up your Backups</p> <ul> <li class="has-line-data" data-line-start="36" data-line-end="37"> Mirror folders to Backblaze B2</li> <li class="has-line-data" data-line-start="37" data-line-end="39"> Slow, but worth it</li> </ul> <p class="has-line-data" data-line-start="39" data-line-end="40"> 30:53 - Apps</p> <ul> <li class="has-line-data" data-line-start="41" data-line-end="42"> Plex + Emby</li> <li class="has-line-data" data-line-start="42" data-line-end="43"> Storage Analyzer</li> <li class="has-line-data" data-line-start="43" data-line-end="44"> Docker - anything really</li> <li class="has-line-data" data-line-start="44" data-line-end="45"> Node js ;)</li> <li class="has-line-data" data-line-start="45" data-line-end="46"> Security cameras</li> <li class="has-line-data" data-line-start="46" data-line-end="47"> Pi-hole or custom DNS server</li> <li class="has-line-data" data-line-start="47" data-line-end="48"> Moments</li> <li class="has-line-data" data-line-start="48" data-line-end="50"> Drive</li> </ul> <h2 class="code-line" data-line-start="50" data-line-end="51"> <a id="Links_50" name="Links_50"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href= "https://www.telestream.net/screenflow/">Screenflow</a></li> <li class="has-line-data" data-line-start="52" data-line-end="53"> <a href="https://www.synology.com/en-us">Synology</a></li> <li class="has-line-data" data-line-start="53" data-line-end="54"> <a href="https://amzn.to/30WJaag">DS918+</a></li> <li class="has-line-data" data-line-start="54" data-line-end="55"> <a href="https://amzn.to/36xMQRc">DS219+</a></li> <li class="has-line-data" data-line-start="55" data-line-end="56"> <a href="https://amzn.to/2GtWd9W">WD Red Drives</a></li> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href="https://amzn.to/36yho56">Seagate Iron Wolf</a></li> <li class="has-line-data" data-line-start="57" data-line-end="58"> <a href="https://amzn.to/2uQYFVz">Govee Thermometer</a></li> <li class="has-line-data" data-line-start="58" data-line-end="59"> <a href="https://zeit.co/">Now</a></li> <li class="has-line-data" data-line-start="59" data-line-end="60"> <a href= "https://www.sanity.io/blog/introducing-squizzy-our-totally-serverless-kahoot-clone-powered-by-sanity-io"> Squizzy</a></li> <li class="has-line-data" data-line-start="60" data-line-end="61"> <a href="https://www.backblaze.com/b2/">Backblaze B2</a></li> <li class="has-line-data" data-line-start="61" data-line-end="62"> <a href="https://www.plex.tv/">Plex</a></li> <li class="has-line-data" data-line-start="62" data-line-end="63"> <a href="https://emby.media/">Emby</a></li> <li class="has-line-data" data-line-start="63" data-line-end="64"> <a href= "https://www.synology.com/en-global/knowledgebase/DSM/help/StorageAnalyzer/StorageAnalyzer_desc"> Storage Analyzer</a></li> <li class="has-line-data" data-line-start="64" data-line-end="65"> <a href="https://daisydiskapp.com/">DaisyDisk</a></li> <li class="has-line-data" data-line-start="65" data-line-end="66"> <a href="https://www.docker.com/">Docker</a></li> <li class="has-line-data" data-line-start="66" data-line-end="67"> <a href="https://nodejs.org/">Node.js</a></li> <li class="has-line-data" data-line-start="67" data-line-end="68"> <a href="https://www.raspberrypi.org/">Raspberry Pi</a></li> <li class="has-line-data" data-line-start="68" data-line-end="69"> <a href="http://dokku.viewdocs.io/dokku/">Dokku</a></li> <li class="has-line-data" data-line-start="69" data-line-end="70"> <a href= "https://www.reddit.com/r/homedefense/comments/9qwkbr/opinion_on_synology_vs_blue_iris/"> Synology vs Blue Iris</a></li> <li class="has-line-data" data-line-start="70" data-line-end="71"> <a href= "https://www.synology.com/en-us/dsm/feature/moments">Moments app</a></li> <li class="has-line-data" data-line-start="71" data-line-end="72"> <a href="https://pi-hole.net/">Pi-hole</a></li> <li class="has-line-data" data-line-start="72" data-line-end="74"> <a href="https://www.discourse.org/">Discourse</a></li> </ul> <h2 class="code-line" data-line-start="74" data-line-end="75"> <a id="_SIIIIICK__PIIIICKS__74" name= "_SIIIIICK__PIIIICKS__74"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="75" data-line-end="76"> Scott: <a href= "https://shop.lululemon.com/p/gift-ideas/Abc-Jogger-Skinny/_/prod9640028?color=32476">Lululemon Men’s Jogger</a></li> <li class="has-line-data" data-line-start="76" data-line-end="78"> Wes: <a href="https://amzn.to/30WJaag">DS918+</a></li> </ul> <h2 class="code-line" data-line-start="78" data-line-end="79"> <a id="Shameless_Plugs_78" name="Shameless_Plugs_78"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="79" data-line-end="80"> Scott: <a href="https://www.leveluptutorials.com/pro">How to Build a GraphQL API</a> - Sign up for the year and save 25%!</li> <li class="has-line-data" data-line-start="80" data-line-end="82"> 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="82" data-line-end="83"> <a id="Tweet_us_your_tasty_treats_82" name= "Tweet_us_your_tasty_treats_82"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="83" data-line-end="84"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="84" data-line-end="85"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="85" data-line-end="86"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="86" data-line-end="87"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="87" data-line-end="88"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="88" data-line-end="89"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="89" data-line-end="90"> 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 about running backups and a home server — Synology setups, apps, 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. 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. Show Notes 2:03 - What is it? A little headless computer 5:07 - Drives WD Red or Seagate Ironwolf — They are loud, you can put SSDs in them, but it’s $$ 6:25 - RAID 11:17 - Power Backup Time Machine over the network You can upgrade the memory SSDs 22:40 - Backing up your Backups Mirror folders to Backblaze B2 Slow, but worth it 30:53 - Apps Plex + Emby Storage Analyzer Docker - anything really Node js ;) Security cameras Pi-hole or custom DNS server Moments Drive Links Screenflow Synology DS918+ DS219+ WD Red Drives Seagate Iron Wolf Govee Thermometer Now Squizzy Backblaze B2 Plex Emby Storage Analyzer DaisyDisk Docker Node.js Raspberry Pi Dokku Synology vs Blue Iris Moments app Pi-hole Discourse ××× SIIIIICK ××× PIIIICKS ××× Scott: Lululemon Men’s Jogger Wes: DS918+ Shameless Plugs Scott: How to Build a GraphQL API - 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 

The Synology Show - Backups and Home Server

<p class="has-line-data" data-line-start="7" data-line-end="8">In this Hasty Treat, Scott and Wes talk about the non-glamorous skills that will improve your life as a developer!</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="Show_Notes_12" name="Show_Notes_12"></a>Show Notes</h2> <p class="has-line-data" data-line-start="14" data-line-end="15"> 3:13 - Why it’s needed</p> <ul> <li class="has-line-data" data-line-start="16" data-line-end="17"> Make you a better dev</li> <li class="has-line-data" data-line-start="17" data-line-end="19"> Make big tasks easier</li> </ul> <p class="has-line-data" data-line-start="19" data-line-end="20"> 7:00 - Why we don’t do it</p> <ul> <li class="has-line-data" data-line-start="21" data-line-end="22"> Because it’s hard</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> It’s boring - sometimes</li> <li class="has-line-data" data-line-start="23" data-line-end="25"> It’s not our focus</li> </ul> <p class="has-line-data" data-line-start="25" data-line-end="26"> 7:24 - Good command line skills</p> <ul> <li class="has-line-data" data-line-start="27" data-line-end="28"> Get around file system</li> <li class="has-line-data" data-line-start="28" data-line-end="30"> Copy, move, delete things</li> </ul> <p class="has-line-data" data-line-start="30" data-line-end="31"> 8:58 - Keyboard skills</p> <ul> <li class="has-line-data" data-line-start="32" data-line-end="33"> Jump by word/line/BOL/EOL</li> <li class="has-line-data" data-line-start="33" data-line-end="34"> Learn 1 new shortcut per week</li> <li class="has-line-data" data-line-start="34" data-line-end="36"> Custom keybindings for common tasks</li> </ul> <p class="has-line-data" data-line-start="36" data-line-end="37"> 14:22 - Communication and interpersonal skills</p> <ul> <li class="has-line-data" data-line-start="38" data-line-end="40"> Check out <a href= "https://syntax.fm/show/125/hasty-treat-communication-skillz">Syntax 125: Hasty Treat - Communication Skillz</a></li> </ul> <p class="has-line-data" data-line-start="40" data-line-end="41"> 14:41 - Time management</p> <ul> <li class="has-line-data" data-line-start="42" data-line-end="43"> Focus apps to help</li> <li class="has-line-data" data-line-start="43" data-line-end="44"> How long will something take?</li> <li class="has-line-data" data-line-start="44" data-line-end="46"> Revisit past projects when they are done and see how long it took</li> </ul> <p class="has-line-data" data-line-start="46" data-line-end="47"> 16:36 - Good file hygiene</p> <ul> <li class="has-line-data" data-line-start="48" data-line-end="49"> Good folder structure</li> <li class="has-line-data" data-line-start="49" data-line-end="50"> Delete old cruft</li> <li class="has-line-data" data-line-start="50" data-line-end="51"> Clear your recycle</li> <li class="has-line-data" data-line-start="51" data-line-end="52"> Desktop and downloads are off-limits</li> <li class="has-line-data" data-line-start="52" data-line-end="54"> Create template structures or tools for commonly used structures</li> </ul> <h2 class="code-line" data-line-start="54" data-line-end="55"> <a id="Links_54" name="Links_54"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="55" data-line-end="56"> <a href="https://commandlinepoweruser.com/">Wes’ Command Line Power User Course</a></li> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href="https://www.synology.com/">Synology</a></li> <li class="has-line-data" data-line-start="57" data-line-end="58"> <a href="https://marketplace.visualstudio.com/">VSCode</a></li> <li class="has-line-data" data-line-start="58" data-line-end="59"> <a href= "https://marketplace.visualstudio.com/items?itemName=suming.react-proptypes-generate"> React PropTypes Generate</a></li> <li class="has-line-data" data-line-start="59" data-line-end="60"> <a href= "https://syntax.fm/show/125/hasty-treat-communication-skillz">Syntax 125: Hasty Treat - Communication Skillz</a></li> <li class="has-line-data" data-line-start="60" data-line-end="61"> <a href="https://macpaw.com/cleanmymac">CleanMyMac</a></li> <li class="has-line-data" data-line-start="61" data-line-end="63"> <a href="https://daisydiskapp.com/">DaisyDisk</a></li> </ul> <h2 class="code-line" data-line-start="63" data-line-end="64"> <a id="Tweet_us_your_tasty_treats_63" name= "Tweet_us_your_tasty_treats_63"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="64" data-line-end="65"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="65" data-line-end="66"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="66" data-line-end="67"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="67" data-line-end="68"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="68" data-line-end="69"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="69" data-line-end="70"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="70" data-line-end="71"> 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 non-glamorous skills that will improve your life as a developer! 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. Show Notes 3:13 - Why it’s needed Make you a better dev Make big tasks easier 7:00 - Why we don’t do it Because it’s hard It’s boring - sometimes It’s not our focus 7:24 - Good command line skills Get around file system Copy, move, delete things 8:58 - Keyboard skills Jump by word/line/BOL/EOL Learn 1 new shortcut per week Custom keybindings for common tasks 14:22 - Communication and interpersonal skills Check out Syntax 125: Hasty Treat - Communication Skillz 14:41 - Time management Focus apps to help How long will something take? Revisit past projects when they are done and see how long it took 16:36 - Good file hygiene Good folder structure Delete old cruft Clear your recycle Desktop and downloads are off-limits Create template structures or tools for commonly used structures Links Wes’ Command Line Power User Course Synology VSCode React PropTypes Generate Syntax 125: Hasty Treat - Communication Skillz CleanMyMac DaisyDisk 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 

Hasty Treat - Non-Glamorous Skills You Should Have

<p class="has-line-data" data-line-start="7" data-line-end="8">It’s another potluck! In this episode, Scott and Wes answer your questions about dev culture fit, Slack communities, vanilla Javascript, backpacks, Raspberry Pi, beards, and more!</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "TECH_Domains__Sponsor_9" name="TECH_Domains__Sponsor_9"></a>.TECH Domains - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11">If you need eyes on your project, you’ll need a domain, and .TECH is perfect for representing your brand. Find out if your .TECH domain is available at <a href= "https://go.tech/syntax2020">go.tech/syntax2020</a>. Use the coupon code Syntax2020 and get 90% off 1- 5- and 10-year domain names.</p> <h2 class="code-line" data-line-start="12" data-line-end="13"> <a id="Netlify__Sponsor_12" name="Netlify__Sponsor_12"></a>Netlify - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14"> Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up <a href= "https://netlify.com/syntax">netlify.com/syntax</a> for more info.</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"> 3:10 - Q: Recently I took a job as a lead dev doing the exact kind of work I’ve always wanted to do. But after the first week, I really hate it. I feel like I don’t fit in and I’m seeing many red flags. There are no processes and there doesn’t seem to be any real excitement around what we are building. What should I do? Do I suck it up for a while? Or do I start looking for something else, potentially taking a pay cut (and moving back into doing web dev as opposed to building apps) to work at another creative agency with people who are more my jam?</p> <p class="has-line-data" data-line-start="19" data-line-end="20"> 10:32 - Does Syntax have a Discord or Slack community channel to collaborate on topics?</p> <p class="has-line-data" data-line-start="21" data-line-end="22"> 12:00 - What is one thing that <em>really</em> annoys you about Javascript? I’m curious if you could change one thing about the language itself, what would it be?</p> <p class="has-line-data" data-line-start="23" data-line-end="24"> 15:08 - Have you tried Fauna DB?</p> <p class="has-line-data" data-line-start="25" data-line-end="26"> 19:13 - What are your thoughts on including tutorial projects in a portfolio? (For example, putting the Sick Fits site from Wes’ Advanced React course in a portfolio.) I’m relatively new to React and have a couple of my own projects, but a bunch of projects from following a course.</p> <p class="has-line-data" data-line-start="27" data-line-end="28"> 23:58 - A site you’re maintaining is hacked, how do you handle fixing it?</p> <p class="has-line-data" data-line-start="29" data-line-end="30"> 30:28 - My bookmarks are overwhelming! I just started learning web dev and even though I sort my bookmarks into folders, I end up with so much that I don’t even know how to use them. What do you guys do for managing bookmarks on browsers?</p> <p class="has-line-data" data-line-start="31" data-line-end="32"> 34:15 - How would you recommend integrating React and other modern JS frameworks into (more or less) “static” or “brochure” websites? Say for instance I have a banking website that has mostly static content, but also has complicated JS pieces such as calculators, location finders and sign-up forms? I currently reach for jQuery & jQuery plugins for these pieces of functionality, but React and Vue sound like they could also help solve these one-off pieces of functionality. Most tutorials and examples are based on creating apps from the ground up, but what if you only want to sprinkle these frameworks in and only use them where JS is necessary? How might the both of you solve for these scenarios?</p> <p class="has-line-data" data-line-start="33" data-line-end="34"> 38:00 - I was wondering whether you could share which backpack, or bag do you use for carrying your laptops? I’m looking for something that would be useful for carrying my 16" Macbook Pro, but also could hold some other stuff like groceries, clothes, or other various things that one may want to put there.</p> <p class="has-line-data" data-line-start="35" data-line-end="36"> 41:50 - Do you write out a vanilla <code>fetch()</code> in your components that need it, or do you use a fetch “wrapper” written by yourself or someone else? If so, what does it look like?</p> <p class="has-line-data" data-line-start="37" data-line-end="38"> 46:16 - Have you ever done any automation projects using a Raspberry Pi? I am trying my hand at remote access to the solar power setup at our ‘bach’ (pronounced ‘batch’) here in New Zealand, which is the same thing as a ‘cottage’ in Canada. Finding it hard to find good resources for this online as most get really technical really fast. My idea is to take the RS485 modbus data and just send it up to a DB every 5 minutes or so.</p> <p class="has-line-data" data-line-start="39" data-line-end="40"> 51:38 - What do Wes and Scott think about beards and have you ever thought about growing one?</p> <h2 class="code-line" data-line-start="41" data-line-end="42"> <a id="Links_41" name="Links_41"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="42" data-line-end="43"> <a href= "https://syntax.fm/show/215/hasty-treat-picking-the-stack-for-uses-tech-gatsby-react-context-styled-components"> Syntax 215: Hasty Treat - Picking the Stack for uses.tech - Gatsby, React, Context, Styled Components</a></li> <li class="has-line-data" data-line-start="43" data-line-end="44"> <a href="https://www.reddit.com/r/SyntaxFM/">r/SyntaxFM/</a></li> <li class="has-line-data" data-line-start="44" data-line-end="45"> <a href="https://fauna.com/">Fauna</a></li> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href="https://hasura.io/">Hasura</a></li> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href="https://neo4j.com/">neo4j</a></li> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href="https://advancedreact.com/">Wes’ Advanced React Course</a></li> <li class="has-line-data" data-line-start="48" data-line-end="49"> <a href="https://getpocket.com/">Pocket</a></li> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href="http://www.fullstackradio.com/132">Full Stack Radio 132: Caleb Porzio - Just Enough JavaScript with Alpine.js</a></li> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href="https://amzn.to/2trxQa8">Peak Design Everyday Bag</a></li> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href="https://www.raspberrypi.org/">Raspberry Pi</a></li> <li class="has-line-data" data-line-start="52" data-line-end="54"> <a href="https://en.wikipedia.org/wiki/Extreme_ironing">Extreme ironing</a></li> </ul> <h2 class="code-line" data-line-start="54" data-line-end="55"> <a id="_SIIIIICK__PIIIICKS__54" name= "_SIIIIICK__PIIIICKS__54"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="55" data-line-end="56"> Scott: <a href="https://amzn.to/37cWPMT">Shogun Wheel Yoga Wheel</a></li> <li class="has-line-data" data-line-start="56" data-line-end="58"> Wes: <a href="https://amzn.to/2REGVEi">Velcro Cable Ties</a></li> </ul> <h2 class="code-line" data-line-start="58" data-line-end="59"> <a id="Shameless_Plugs_58" name="Shameless_Plugs_58"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="59" data-line-end="60"> Scott: <a href="https://www.leveluptutorials.com/pro">How To Make a GraphQL Server</a> - Sign up for the year and save 25%!</li> <li class="has-line-data" data-line-start="60" data-line-end="62"> Wes: <a href="https://beginnerjavascript.com/">Beginner Javascript</a> - Use the coupon code ‘Syntax’ for $10 off!</li> </ul> <h2 class="code-line" data-line-start="62" data-line-end="63"> <a id="Tweet_us_your_tasty_treats_62" name= "Tweet_us_your_tasty_treats_62"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="63" data-line-end="64"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="64" data-line-end="65"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="65" data-line-end="66"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="66" data-line-end="67"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="67" data-line-end="68"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="68" data-line-end="69"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="69" data-line-end="70"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

It’s another potluck! In this episode, Scott and Wes answer your questions about dev culture fit, Slack communities, vanilla Javascript, backpacks, Raspberry Pi, beards, and more! .TECH Domains - Sponsor If you need eyes on your project, you’ll need a domain, and .TECH is perfect for representing your brand. Find out if your .TECH domain is available at go.tech/syntax2020. Use the coupon code Syntax2020 and get 90% off 1- 5- and 10-year domain names. Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info. Show Notes 3:10 - Q: Recently I took a job as a lead dev doing the exact kind of work I’ve always wanted to do. But after the first week, I really hate it. I feel like I don’t fit in and I’m seeing many red flags. There are no processes and there doesn’t seem to be any real excitement around what we are building. What should I do? Do I suck it up for a while? Or do I start looking for something else, potentially taking a pay cut (and moving back into doing web dev as opposed to building apps) to work at another creative agency with people who are more my jam? 10:32 - Does Syntax have a Discord or Slack community channel to collaborate on topics? 12:00 - What is one thing that really annoys you about Javascript? I’m curious if you could change one thing about the language itself, what would it be? 15:08 - Have you tried Fauna DB? 19:13 - What are your thoughts on including tutorial projects in a portfolio? (For example, putting the Sick Fits site from Wes’ Advanced React course in a portfolio.) I’m relatively new to React and have a couple of my own projects, but a bunch of projects from following a course. 23:58 - A site you’re maintaining is hacked, how do you handle fixing it? 30:28 - My bookmarks are overwhelming! I just started learning web dev and even though I sort my bookmarks into folders, I end up with so much that I don’t even know how to use them. What do you guys do for managing bookmarks on browsers? 34:15 - How would you recommend integrating React and other modern JS frameworks into (more or less) “static” or “brochure” websites? Say for instance I have a banking website that has mostly static content, but also has complicated JS pieces such as calculators, location finders and sign-up forms? I currently reach for jQuery & jQuery plugins for these pieces of functionality, but React and Vue sound like they could also help solve these one-off pieces of functionality. Most tutorials and examples are based on creating apps from the ground up, but what if you only want to sprinkle these frameworks in and only use them where JS is necessary? How might the both of you solve for these scenarios? 38:00 - I was wondering whether you could share which backpack, or bag do you use for carrying your laptops? I’m looking for something that would be useful for carrying my 16" Macbook Pro, but also could hold some other stuff like groceries, clothes, or other various things that one may want to put there. 41:50 - Do you write out a vanilla fetch() in your components that need it, or do you use a fetch “wrapper” written by yourself or someone else? If so, what does it look like? 46:16 - Have you ever done any automation projects using a Raspberry Pi? I am trying my hand at remote access to the solar power setup at our ‘bach’ (pronounced ‘batch’) here in New Zealand, which is the same thing as a ‘cottage’ in Canada. Finding it hard to find good resources for this online as most get really technical really fast. My idea is to take the RS485 modbus data and just send it up to a DB every 5 minutes or so. 51:38 - What do Wes and Scott think about beards and have you ever thought about growing one? Links Syntax 215: Hasty Treat - Picking the Stack for uses.tech - Gatsby, React, Context, Styled Components r/SyntaxFM/ Fauna Hasura neo4j Wes’ Advanced React Course Pocket Full Stack Radio 132: Caleb Porzio - Just Enough JavaScript with Alpine.js Peak Design Everyday Bag Raspberry Pi Extreme ironing ××× SIIIIICK ××× PIIIICKS ××× Scott: Shogun Wheel Yoga Wheel Wes: Velcro Cable Ties Shameless Plugs Scott: How To Make a GraphQL Server - Sign up for the year and save 25%! Wes: Beginner Javascript - 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 

Potluck - Dev Culture Fit × Slack Communities × Vanilla JS × Backpacks × Raspberry Pi × More!

<p class="has-line-data" data-line-start="7" data-line-end="8">In this Hasty Treat, Scott and Wes talk about community building online — some of the different software techniques and things you can do to either get started with a web community or join one.</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Sentry__Sponsor_9" name="Sentry__Sponsor_9"></a>Sentry - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11">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="12" data-line-end="13"> <a id="Show_Notes_12" name="Show_Notes_12"></a>Show Notes</h2> <p class="has-line-data" data-line-start="14" data-line-end="15"> 7:16 - Chat options</p> <ul> <li class="has-line-data" data-line-start="16" data-line-end="17"> Slack</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> Discord</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="https://discord.gg/ccMC6kB">Level Up Tutorials Discord</a></li> <li class="has-line-data" data-line-start="18" data-line-end="20"> Faster communication</li> </ul> <p class="has-line-data" data-line-start="20" data-line-end="21"> 9:00 - Forum based</p> <ul> <li class="has-line-data" data-line-start="22" data-line-end="23"> Indexable</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> Searchable</li> <li class="has-line-data" data-line-start="24" data-line-end="25"> Slower communication</li> <li class="has-line-data" data-line-start="25" data-line-end="26"> Discourse</li> <li class="has-line-data" data-line-start="26" data-line-end="27"> Spectrum</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> Facebook groups</li> <li class="has-line-data" data-line-start="28" data-line-end="30"> Reddit</li> <li class="has-line-data" data-line-start="28" data-line-end="30"> <a href="https://www.reddit.com/r/SyntaxFM/">Syntax Reddit</a></li> </ul> <p class="has-line-data" data-line-start="30" data-line-end="31"> 27:27 - Commenting systems</p> <ul> <li class="has-line-data" data-line-start="32" data-line-end="33"> YouTube comments</li> <li class="has-line-data" data-line-start="33" data-line-end="35"> Comments systems in general</li> </ul> <h2 class="code-line" data-line-start="35" data-line-end="36"> <a id="Links_35" name="Links_35"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="36" data-line-end="37"> <a href="https://github.com/">Github</a></li> <li class="has-line-data" data-line-start="37" data-line-end="38"> <a href="https://slack.com/">Slack</a></li> <li class="has-line-data" data-line-start="38" data-line-end="39"> <a href="https://discordapp.com/">Discord</a></li> <li class="has-line-data" data-line-start="39" data-line-end="40"> <a href="https://www.discourse.org/">Discourse</a></li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <a href="https://spectrum.chat/">Spectrum</a></li> <li class="has-line-data" data-line-start="41" data-line-end="42"> <a href="https://www.reddit.com/">Reddit</a></li> <li class="has-line-data" data-line-start="42" data-line-end="44"> <a href="https://www.reddit.com/r/reactjs/">r/reactjs</a></li> </ul> <h2 class="code-line" data-line-start="44" data-line-end="45"> <a id="Tweet_us_your_tasty_treats_44" name= "Tweet_us_your_tasty_treats_44"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="48" data-line-end="49"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="51" data-line-end="52"> 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 community building online — some of the different software techniques and things you can do to either get started with a web community or join one. 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 7:16 - Chat options Slack Discord Level Up Tutorials Discord Faster communication 9:00 - Forum based Indexable Searchable Slower communication Discourse Spectrum Facebook groups Reddit Syntax Reddit 27:27 - Commenting systems YouTube comments Comments systems in general Links Github Slack Discord Discourse Spectrum Reddit r/reactjs 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 

Hasty Treat - Building A Community Slack, Discord, Spectrum, Discourse, Forums

Wes Bos and Scott Tolinski are two full stack web developers who like to break down complex topics and make them easy to understand.

hubhopper

Syntax - Tasty Web Development Treats

hubhopper