Desktop & Mobile Apps With a Single Codebase
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
Hasty Treat - Developing Better Habits
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
Practical: How would we build Airbnb, Twitter, or Reddit?
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
Hasty Treat - Automating Stuff
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
Potluck - Why Webpack? × Serverless × Agencies × Recruiters × CSS Grid × MQ in Styled Components
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
Hasty Treat - The TLD Game
In this Hasty Treat, Scott and Wes are playing a game! It’s called the TLD game, where Scott and Wes try to stump each other with questions about top level domains. 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:55 - The rules of the game We pick a TLD from a list, and the other person needs to guess: Is it for a country or business? -5 points What country, business, or type of business is it for? -5 points How much per year does it cost to register? You may also say “unregisterable” +/- off by $$ is scott.___ and wes.___ available? -10 for each 5:40 - .BO 7:51 - .BZH 9:50 - .BANANAREPUBLIC 11:15 - .BABY 14:04 - .KR 16:09 - .MOTO 17:25 - .AW 19:16 - .IM Links 101Domain 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
16 Syys 201922min
How We Record, Edit, and Host Our Courses
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 Syys 20191h 4min
Hasty Treat - Moving from PHP to Node
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 Syys 201917min
