9 Ways to Stay Sane While Working Remotely

In this episode, Scott and Wes talk about how they make courses — recording, editing, hosting, best practices, 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. 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 5:42 - Recording Wes: Screenflow Uberlayer Loopback Heil PR40 Heil PL-2T dbx 286s Focusrite Scarlett 2i2 Scott: Screenflick iShow HD Divvy Principal for Mac EV RE-20 dbx 286s Focusrite Scarlett 2i2 Sony a7 III Logic 33:04 - Editing Wes: Screenflow Speed up slow typing Edit out some goof-ups (but not all) Edit immediately after recording so I’m in the same headspace and can easily re-record Scott: Hire a video editor Cut out all blank spaces in audio, because I know that pauses are typically where I stop to think Normalize audio DaVinci Resolve 16 42:31 - Hosting Wes: Wistia Vimeo Rev Backblaze Amazon S3 My own course platform, with additional controls added via React Scott: YouTube Vimeo Plyr Video Player Backblaze Amazon S3 Custom course platform 52:46 - Common Questions Links Syntax 014: Our Stacks Explained Adobe Premier Pro Figma VS Code Audio-Technica AT2020 Blue Bluebird BSW Sweetwater Tim Smith - Video Editing ××× SIIIIICK ××× PIIIICKS ××× Scott: Hyperdrive Wes: PicQuic Screwdriver Shameless Plugs Scott: LevelUpTutorials Pro - Advanced Gatsby & Shopify - 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

11 Sep 20191h 4min

In this Hasty Treat, Scott and Wes talk about moving from PHP to Node — pitfalls to avoid, best practices 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”. Show Notes 3:43 - Servers need to be started and baby sat 4:48 - There is no built-in file system based routing 6:34 - Some "gotchas" 7:02 - Functional programming 8:17 - Async vs sync 11:11 - Event lifecycles 12:09 - Dependencies 14:17 - Keyed arrays Links Wes’ tweet thread Forever PM2 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

9 Sep 201917min

In this episode, Scott and Wes talk with Drew Conley about building games with Javascript. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Show Notes 1:58 - What is Danger Crew? 5:25 - Did you have a background in game dev before this? 8:36 - What were the initial resources you went to to make a game in React? 10:27 - How much of it is Canvas? 13:06 - What other libraries are you using? 14:00 - How did you lay out the environments? 16:35 - How is text rendered? 22:40 - How did you do all of the animation? 26:08 - What performance issues did you run into? 27:31 - How do you handle user states and saves? 29:21 - Is there any server side aspect? 30:42 - What was the process for creating the level editor? 34:38 - How did you publish the game / wrap it as an executable to sell? 38:16 - How do you update it? 39:43 - How difficult was creating the game logic? 41:20 - The dev theme in the game is super prominent, did that make working on it more fun? Links Steam Danger Crew aseprite Buy Danger Crew Drew Conley Pixels to SVG GameMaker Making an editor Electron ××× SIIIIICK ××× PIIIICKS ××× Drew: Strange Planet Instagram Wes: MX Master Config Tweet Thread Scott: Figma Shameless Plugs Drew: Danger Crew Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! Scott: LevelUpTutorials Pro - Advanced Gatsby & Shopify 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

4 Sep 201952min

In this Hasty Treat, Scott and Wes are back with another edition of Stump’d! where they try to stump each other with interview questions. 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:54 - What is the difference between NULL and undefined? 5:40 - What is short circuit evaluation in JS? 7:25 - What is use strict? 9:07 - What is the only value not equal to itself in JS? 10:36 - When would you create a static class member? 11:54 - What is a pure function? 13:08 - What is JSONP? 14:24 - Describe the layout of the CSS box model? 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

2 Sep 201916min

In this episode, Scott and Wes talk about creating APIs — what’s happening behind the scenes and why it’s important. 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 and using the coupon code “tastytreat”. Show Notes 2:15 - How do you build an API from scratch? 3:54 - Choose an API type REST GraphQL 8:15 - Setup some sort of server that will accept requests and send responses Express Koa Meteor 11:11 - Document the endpoints What is the end point What parameters are required Filters Sorting Headers required What you get back when you hit this endpoint Any request limits Examples in common languages JS PHP Ruby 21:20 - Naming Make it obvious 27:39 - Securing Only accept requests from logged-in users oAuth Cookie/Session jwt API key CORS Check roles - access level Syntax 055: Hasty Treat - User Role Systems 32:42 - Protecting Rate limit Whitelist / blacklist Cloudflare 36:00 - Write resolvers Modify data if needed Send back the data requested Send back the correct HTTP code Log what happened 37:56 - Tools Postman Swagger Links Stripe ××× SIIIIICK ××× PIIIICKS ××× Scott: Hoax Podcast Wes: Solar Lights Shameless Plugs Scott: LevelUpTutorials Pro - Advanced Gatsby & Shopify 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

28 Aug 201946min

In this Hasty Treat, Scott and Wes talk about Svelte 3 — initial impressions and more! 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 2:16 - What is Svelte? 11:32 - Sapper 13:05 - Svelte Native 14:58 - Questions we have What’s the Typescript story here? How hard would it be to convert a large React app to Svelte? Will Svelte be able to capture the market share it needs to grow and compete? Would you (Wes & Scott) use this? Links https://svelte.dev/examples#hello-world Mustache Webpack Rollup.js Next.js Sapper Svelte Native React Native Svelte - Typescript support Rethinking Reactivity 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

26 Aug 201922min

It’s another potluck! In this episode, Scott and Wes answer your questions about deploying applications, the value of Typescript, live coding via Twitch 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 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 1:35 - Q: I prefer using grid-row and grid-column instead of grid-area. But is grid-area more performant? For example, in Flexbox, it’s a best practice to use the shorthand flex property instead of writing out flex-grow, flex-shrink and flex-basis. 4:04 - Q: Do you have any advice how to deploy an application? What do you think about AWS, Zeit, Heroku, Firebase? Do you use automation tools like Circle CI or Buddy.works? I also wonder if we should keep whole application on one server, or split it up. 9:36 - Q: A career advice question: I’m best at being a front-end/javascript developer - but in a quest to my make job(s) easier, I’ve also been getting into fullstack architecture - namely CI/CD (TravisCI, GitlabCI) and Kubernetes. I’m feeling like I’m spreading myself a little thin, and I guess I’m just finding it a bit frustrating (configuring Kubernetes is a lot of bashing your head against the wall). I know that my skills as a front-end developer are already valuable, whereas I can’t say the same for my Kubernetes/CICD skillset. I’m wondering whether I should narrow my scope a bit. Maybe this is just the frustrating hump I’m climbing over, and in six months I’ll be happy with where I’m at, but interested to hear your thoughts. One thing I’ve been thinking about is, maybe I should step back from the network architecture type stuff (ie. Kubernetes) and focus more on DevOps that is closer to the front-end stack (ie. writing tests, VSCode tooling, commit hooks, CI tools, etc.). 13:07 - Q: Do you think Typescript adds value to React, or more complexity than value? When should you choose Typescript for a project? 18:09 - Q: I am in a well known Bootcamp, and as of right now (from what they have taught us) this is what I am working with: HTML/CSS, JavaScript, jQuery, Node, Express, SQL, Auth, MVC, APIs, React, Redux. As we finish off the program, they are going over Java. I do want to learn Java, however I feel like my time would be better spent fine-tuning my knowledge on my stack. And I can learn Java at some other time. Do you recommend that I fully engage with Java and try to absorb some of the basics and fundamentals now, or do you recommend that I take this last month we have here and strengthen my current skills so I do better during my technical interviews? And by the way thanks for everything you do, it helps :) 22:02 - Q: Have you seen the live coding going on at Twitch? Thoughts? Maybe a Syntax stream in the future? There’s a good list at livecoders.dev. Thanks for all you do. Keep killin’ it! 26:11 - Q: How do you handle people (i.e. C# bastards) who think JavaScript is a joke and is going to be overthrown by Blazor or some other C# library framework? Can’t we all just get along and live in the same industry? I’m having a hard time being the adult in these kinds of responses around the web, and in random discussions with people I know very well. 29:55 - Q: There are plenty of places saying that it is important to secure API keys by not embedding them in front-end code. Cool. I’m on board! But there is not many that tell you specifically how to do this. How do you safely use an API key in a CRUD project? 34:15 - Q: Do you plan to launch a Syntax.fm app? 45:49 - Q: I was hired as a junior developer at a company in the last year. It’s my first development job and I was so excited. The interview and application were all about React and fullstack development. However now that I’ve been here a while, I have found out the company does primarily dev ops work. None of this was mentioned in the interview or application, but it looks like soon it will be the majority of my workload. I am feeling very discouraged and was wondering what you guys would do in this situation? Links Develop Denver AWS Zeit Heroku CircleCI Buddy.works Travis CI Gitlab CI Kubernetes VSCode Typescript Blazor Linkedin ××× SIIIIICK ××× PIIIICKS ××× Scott: VIVO Premium Heavy Duty Arm Wes: AmazonBasics Pro-Style Spring Sprayer Kitchen Faucet, Oil-Rubbed Bronze Shameless Plugs Scott: LevelUpTutorials Pro - Gatsby Ecommerce Wes: All Courses - Beginner JS Course 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

21 Aug 201946min

In this Hasty Treat, Scott and Wes talk about documentation libraries, starting and maintaining projects, how to publish React components to NPM, 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”. Show Notes 2:40 - Create React Library 6:55 - Documentation libraries 10:54 - What I’m building 13:13 - Linking library to projects 14:52 - Improvements and community thoughts Links Rollup testing-library/react-testing-library transitive-bullshit/create-react-library leveluptuts/fresh How To Make a React Component Library - Making A React Library React Styleguidist Storybook Docz DocSource npm-link Yarn wesbos/dump wesbos/Waait 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

19 Aug 201917min