Dev Tools Power — Elements Tab

In this Hasty Treat, Scott and Wes talk about their experiences with float tanks! 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:28 - What is a float tank? 6:47 - What are the benefits? 8:50 - How did you feel during the float? 17:28 - Would you do it again? Links The Joe Rogan Experience 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

14 Loka 201923min

It’s another potluck! In this episode, Scott and Wes answer your questions about freelancing, handing off projects to other developers, terminal configs, podcast apps, how much flexbox is too much flexbox, npm dependencies, 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. 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:49 - Q: I’m interested in freelancing full-time and have some projects, big and small, lined up over the next few months to work on the side. How much work is a good amount of work to transition into freelancing full-time? 9:52 - Q: How much flexbox is too much flexbox? Is it a bad idea to use a dozen flexboxes for a viewport-filling application? 13:19 - Q: Can you explain the “potential” benefit of resetting CSS and whether it’s necessary? In which circumstances should we use such an approach? 15:26 - Q: I would love to hear an episode, or potluck segment, about your shell/fish/zsh configs. Maybe explain little tweaks you’ve made and why you’ve chosen the shell you use. 23:26 - Q: I always get confused on when and how to use .bind() method. Any pointers on when I should use .bind(), like in what situations? I also see it used a lot in React apps, but have no idea why they are using it. Could you explain this in detail? 27:02 - What are your suggestions for handing off client sites for freelance work? I don’t take many contracts (I have another full time job) but I’ll take one here or there during summer to supplement a little bit. I’m finding it difficult to make a clean hand-off when the project is finished. The contractual requirements are met and like anything, there are always tweaks to be made. I’ll handle some minor deployment issues without billing, but I struggle with where to draw the line. What suggestions do you have? 35:19 - This question is for Wes. I live in Central New York, and every time I go on the highway heading north or south I see several Ontario license plates. Where are ya’ll going all the time? Is there a secret Canadian spot down here? 38:20 - Each time I re-open an old project I lose so much time with npm dependencies being outdated and it drives me mad! I’m starting to dislike npm and everything around it, but is it npm only? How does other languages like php, python or GO handle this mess of dependencies? Are we better today than yesterday and I’m just complaining about nothing? 43:50 - Which podcast player do you use (Android, PC, or other phone/tablet), and why? Where do you listen to them? Links Flexbox React Native CSS Grid Normalize iTerm2 zsh Fish Hyper Wes’ Command Line Power User Course Overcast Pocket Casts Planet Money Joe Rogan The Indicator ××× SIIIIICK ××× PIIIICKS ××× Scott: Garmin vivoactive 3 Wes: Untitled Goose Game Shameless Plugs Scott: Svelte For Beginners - Sign up for the year and save 25%! Wes: Wes’ Instagram 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 Loka 201955min

In this Hasty Treat, Scott and Wes talk about feature and release planning — dealing with bugs, task management, 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 4:06 - Wes: Features are logged into software (Github, Jira, etc.) I use a Kanban board - I bubble them up and down in the order in which I want to release them I don’t plan for Q1, Q1, etc… Tear off an issue, tackle it, test and deploy. 10:39 - Scott: All issues/features get a priority tag (e.g. p1 → p4) regardless of the system Bugs go in Github Features and platform improvements go in Notion Table of priorities (with git branch, lead dev, release number, emoji icon, what it contains, etc.) Links Github Trello Kanban Jira Canny Notion Getting Things Done 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

7 Loka 201919min

In this episode, Scott and Wes talk with Etienne Lemay, developer of Missive, about his experience building Missive, best practices, and the pros and cons of building desktop and mobile apps with a single codebase. 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 0:57 - What is Missive? 6:10 - What is the desktop app built in? 9:44 - Did you use any particular libraries for the front-end? 11:44 - How are you managing state? 13:37 - Is it challenging to do all of this in JS? 15:07 - What was the catalyst for the “multi-conversation swipe”? 21:32 - What is the mobile app built in? 24:00 - What are the advantages of Cordova? 30:30 - How do you manage offline/syncing/etc. so well in a JS app? 34:56 - How do you test it? 36:52 - Have you looked into Cypress? 39:35 - How do you style it? Links @EtienneLem Missive Spark CoffeeScript Backbone Redux Typescript Electron Webpack Javascript30 Cordova React Native Fastlane Amazon S3 Cypress Sass TailwindCSS Svelte Syntax 176: Building Steam Games with React ××× SIIIIICK ××× PIIIICKS ××× Scott: Disgraceland Podcast Wes: Wagner 590 Spray Gun Etienne: Prettier Shameless Plugs Scott: Svelte Course Coming Soon! - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! Etienne: Missive 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 Loka 201957min

In this Hasty Treat, Scott and Wes are talking about developing better habits — strategies, avoiding distractions, 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 2:03 - Habits we’re trying to build Scott Focus on one project at a time Alfred tasks to quit apps and block sites Not being efficient with my time Daily todo lists and utilizing calendar Too much screen time Listening to music in the background instead of having the TV on Wes Flossing Mindless context switching 13:37 - General strategies for building habits Make them trackable Easy enough to not ignore them Quantifying them is key Make them small enough Be accountable Tell other people your habits and have them remind you about them Replace bad habits with good things Design a sticker Reply to three emails Drink some water Celebrate your wins productively Keep the streak alive Can’t do x until y is done Links uhabits Done Loop K-Safe Alfred Codepen Atomic Habits The Power of Habit 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

30 Syys 201927min

In this episode, Scott and Wes are trying something new! It’s called Practical, in which Scott and Wes take a topic and flesh out all the theory into something super practical. Today’s topic comes from a listener question asking how they would build a simple version of a modern web app like Twitter, Reddit, or Airbnb. 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. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Show Notes 3:03 - Backend Express Node GraphQL MongoDB 14:45 - Frontend React Next.js Styled components Stay as close to real CSS as possible 22:39 - Deployment process Serverless Now Ideally one app that handles everything 28:38 - Email Syntax Ep 32: Designing, Templating, Inlining and Sending Email mjml Juice Inky Nodemailer Postmark Mailjet Mandrill Get everyone set up and working in two different systems, so you can switch easily if something goes wrong 33:32 - Users / Auth / Cookies / Permissions Use something a pre-existing package or service rather than role your own (though it can get expensive quickly) Passport Auth0 accounts-js 38:48 - Images Cloudinary imgIX 41:50 - Other things to be aware of Handling cash Stripe PayPal Braintree Recurly Queueing Links Ruby on Rails Django Meteor MySQL PHP Postgres Mongoose Drip ConvertKit Feathers David Luecke Tweetdeck Next.js react-router Reach Router Gatsby Digital Ocean Heroku Redux Svelte Gridsome Mailchimp ××× SIIIIICK ××× PIIIICKS ××× Scott: K-Safe Wes: Bon Appetit YouTube Channel Shameless Plugs Scott: Svelte Course Coming Soon! - Sign up for the year and save 25%! Wes: Flexbox.io 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

25 Syys 201951min

In this Hasty Treat, Scott and Wes are talking about automation — apps, workflows, resources, 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:16 - Alfred workflows 9:32 - Smart home routines 13:16 - Bash scripts & aliases 18:43 - Other Links Alfred Wyze Cam Google Home Drip Divvy 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

23 Syys 201923min

It’s another potluck! In this episode, Scott and Wes answer your questions about webpack, serverless, agencies, recruiters, CSS Grid, media queries 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 5:06 - Q: What do you think about webpack vs parcel vs the old way (gulp, etc.)? 11:30 - Q: What is your opinion on AWS Lambda functions? 15:42 - Q: How do you push new Syntax.fm episodes into production? Each episode is written in markdown. Do you have a different branch for each episode and merge into master? What’s your strategy to avoid releasing the episode before the intended date? 21:24 - Q: Can Scott share some of his experiences working at an agency? Are there any red flags for when you should jump ship? 30:44 - Q: Whats the deal with recruiters? How do they work, and should you use one to land a new job? 36:46 - Q: What do you think about Upwork? Is it possible to find cool full-time jobs there or is it only ‘work for beer’? 41:28 - Q: If my website is already fast, why should I sacrifice my developer experience and learn a new syntax? 44:17 - Q: Will there be a CSS grid inspector on Chrome? Do you use any 3rd party grid inspectors or stick with Firefox’s CSS grid inspector? 46:39 - Q: What the best way to handle media queries in Gatsby with styled components? Links Webpack Parcel Gulp Codeship Semaphore r/reactjs r/webdev Wordpress Upwork Fiverr Svelte Syntax 173: Hasty Treat - Wes & Scott Look At Svelte 3 Firefox CSS Grid Inspector ××× SIIIIICK ××× PIIIICKS ××× Scott: DIY Air Filter Box Fan Air Filter Wes: Ripride with Andy Roy - Episode 6 with Steve-O 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

18 Syys 201959min