Syntax - Tasty Web Development Treats

Scott and Wes talk about how to deal with being overwhelmed with our fast paced industry. How do you keep you and your team's skills up to date? Wes' Note: Scott came up with the title for this one. I know. 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. They are also hiring! netlify.com/careers Freshbooks - Sponsor If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. Show Notes 1:00 WELCOME Scott is 32! Happy Birthday Wes Relaunched his React for Beginners course! 4:00 That feeling Being okay with not knowing everything 9:00 How to wait it out When you should jump into a library 1.0 of libraries Dogfooding 13:00 Just In Time learning Doubling down on the fundamentals 21:00 What is JAM Stack? 22:00 Why do you need to stay up to date? Moving or Losing Jobs Comfy Chairs 25:00 Hipster Web Developers 27:00 Someone think of the customers! Technical Debt Falling in love with web development again Constantly challenging yourself 30:00 Complacency in Web Devleopment Motivating Comfortable Web Developers You have to stay up to date 32:00 Working on the weekends Real Talk: part of your job is staying up to date How to find time to learn on the clock 36:00 Adding new tech to projects as a way to learn 39:00 What if your senior developer is holding back progress? How to convince your team or boss that you aren't just a hipster and this new tech is worth it Show them the why! 47:00 Okay, I want to stay up to date. How? Strong handle on fundamentals Twitter Twitter WebDev Reddit NodeJS is Cancer Kitze's LOL Tweet JavaScript Weekly Lunch and Learns Meetups Siiiiiiiick Pixxxx Scott: Never Split The Difference Wes: Containers Podcast Shameless Plugz Scott: Pro Gatsby Wes: React For Beginners 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 Mars 20181h 8min

Wes and Scott talk all about Static Site Generators! 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. They are also hiring! netlify.com/careers Freshbooks - Sponsor If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. Show Notes 1:00 Woah Scott's Audio! 4:00 #TastyTreats Winners 8:00 What are static site generators? 10:00 Benefits of Static Site Generators Gatsby StaticGen.com Jekyll Hugo Hexo 24:00 More complicated apps as static sites Next.js Static Export Nuxt.js 34:00 Limitations of a static site What happens when you need something on the server? Snipcart for Ecommerce Algolia Awestruct Hot Hot Reloading 41:00 Using with a Headless CMS Reloading The Pages 48:00 WHAT WHAT Scott is Canadian?! 50:00 Where can you host a Static Site? Literally Anywhere Github Pages Netlify rsync WPGraphQL Siiiiiiiick Pixxxx Scott: JSRefactor Wes: Auto Rename Tag Shameless Plugz Level Up Pro ES6 For Everyone 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 Feb 20181h 4min

Scott and Wes talk about working with images, videos and big zips. How do you host them? Do you need a CDN? What about compression?! Cloudinary Cloudinary is the best way to host, compress and transform your images on the web. Sign up for their free tier and get 10GB of bandwidth for free! Also check out Cloudinary's ImageCon conference - use the code SYNTAX99 for a discount when checking out. Xojo — Sponsor Xojo is a cross-platform development tool for creating native apps for desktop, mobile, web and Raspberry Pi. With Xojo you really can write just one version of your app, say, on the Mac, click a button, and have a completely native Windows version too. Xojo lets you abstract yourself from specific platform details, so you can focus on what makes your app unique. All apps have completely native controls, even if they weren’t developed on that platform. Just use drag and drop to create your user interface, and one language to program the functionality. Users also include Fortune 500 companies, citizen developers, professional developers, IT, hobbyists and students - anyone who wants to build apps faster. Listeners of this show get 20% off with the coupon code SYNTAX over at xojo.com/syntax Show Notes 1:30 Chit-chatting about GraphQL Testing 3:45 What is a CDN? Why do you need one? How does the internet even work? 7:00 Amazon S3 + Cloudfront CacheFly MaxCDN Cloudflare 11:30 Talking about Image Formats WebP WebP CanIUse 16:00 Losslesss VS Lossy Stripping image meta data like EXIF Image Optim App ImageMin Gulp ImageMin ImageMin Webpack ImageMin Plugins on npm 26:00 How we use Cloudinary 29:00 Hosting, Encoding and Compressing Videos Our Stacks Explained Syntax Podcast Vimeo Pro YouTube DL BrightCove Wista Sprout Video Cloudinary Video 41:00 What is Cloudflare? Cloudflare Video is coming 46:30 Web Torrent Apparently Spotify doesn't use P2P any longer 50:00 Big Zips! How do we host large video downloads? Amazon S3 + Cloudfront Handbrake Backblaze B2 55:00 Video Formats 59:00 SVGO SVGOMG Siiick Pixxxx Wes: Node Inspector Manager Scott: iShowUInstant Shameless Plugz Level Up Pro Wes' Courses 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 Feb 20181h 8min

In this show, Scott and Wes talk about about sending both transactional and marketing email. Everything from designing to templating to inlining the CSS to getting it sent. Enjoy! Freshbooks - Sponsor If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. Xojo — Sponsor Xojo is a cross-platform development tool for creating native apps for desktop, mobile, web and Raspberry Pi. With Xojo you really can write just one version of your app, say, on the Mac, click a button, and have a completely native Windows version too. Xojo lets you abstract yourself from specific platform details, so you can focus on what makes your app unique. All apps have completely native controls, even if they weren’t developed on that platform. Just use drag and drop to create your user interface, and one language to program the functionality. Users also include Fortune 500 companies, citizen developers, professional developers, IT, hobbyists and students - anyone who wants to build apps faster. Listeners of this show get 20% off with the coupon code SYNTAX over at xojo.com/syntax Show Notes 0:00 WELCOME! 2:00 An update on GraphCool, Prisma and Yoga 3:45 Syntax Contest! You can win a free course from either Scott or Wes by screenshotting yourself listening to the podcast and uploading to Twitter or Instagram. We will pick 1 winner from Twitter and 1 winner from Instagram Make sure to tag @wesbos and @stolinski on Twitter and @wesbos and @stolinskion Instagram #TastyTreats 5:40 Email ain't easy! 6:20 How do Scott and Wes use email in their apps and businesses? Transactional vs Marketing Email 9:00 Dealing with multiple emails and modifier Signing in with Facebook vs Email?! 11:00 Transactional Email The Process to creating single one-off email 13:00 Scott's Setup: Handlebars Meteor Email Docs Mandrill Wes' Setup Pug Templating - the artist formerly known as Jade Juice CSS Inliner Foundation for Emails Inky NodeMailer Postmark 20:00 Why does email get blocked? Amazon SES SendGrid MailGun MJML Email Reputation MailTrap MailHog 30:00 Designing Emails CSS is very limited MJML React Email Templating Tony from Twitter also told me about HTML 37:22 Debugging and Testing Emails Litmus Email on Acid is way cheaper 45:00 Marketing Emails MailChimp Drip 52:00 Host your own Platforms Sendy Email Octopus Mautic MailTrain Siiick Pixxxx Scott: Personal Capital Wes: Nothing is Sick this week 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 Feb 20181h 2min

Freshbooks - Sponsor If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. Show Notes 0:00 Goofing Around 1:30 Real show starts 2:12 Scott explains his breakdancing hobby "Breaking" is breakdancing What is flavour? 10:20 Wes talks about being into BBQ World's Longest Yard Sale Wes has a large Big Green Egg and a MiniMax BGE 19:00 Scott talks about how he is into making music Domestic Robot Scott is starting up a new project called "Shift. Super." 21:30 How do you find time for these hobbies? Avoiding burnout Work/Life Balance Buy in from significant others 28:00 Wes talks about working out and going on date nights with his wife Hamilton is cool Home Renos 35:00 Doing a downtown job Problem Solving 40:00 Scott talks about his love for KungFu Movies 5 Fingers of death 5 Deadly Venoms secret service of the imperial court Boxer from shantung 36th Chamber of Shaolin Human Lanterns 46:00 What kind of cars do we drive? 55:00 What YouTube channels do you watch? Wes: Jeannies Garage It's Alive with Brad Wranglestar Mattias Wandel Main Woodgears Mattias Wandel Secondary Channel Big Clive How it's Made Alex French Guy Cooking Scott: RedLetterMedia stance theneedledrop BroScienceLife 1:05:00 What are you working on Personally / Mentally? Habit Tracker Doing a downtown job Quuuuuiiiiiick SIIIIIIICK PICKS Dan Carlin's Hardcore History: Addendum Scott: Whatever You Think, Think the Opposite Wes: Tracy Osbourne's Hello Web Design 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 Feb 20181h 15min

Dev Lifts - Sponsor Dev Lifts - Thad and JC are on a mission to make web developers healthy. Get a Personal Training and Nutrition Plan — use the code SYNTAX for $75 off. They have also just announced their slack-only memberships for $5/month Freshbooks - Sponsor If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. Show Notes 01:10 you should try out the new Syntax Soundboard by Andre Madarang Have a Question?! Submit it here! 03:00 Skateboarding on a TRAMPOLINE?! 04:30 Q: What are your favourite features coming to HTML 5.2 Dialog Box Multiple Main Tags Thanks Jordan! 10:00 Q: How do you retain all the info you learn like a sponge? Thanks Ozan 13:30 What are your favourite CSS Libraries / Frameworks? Thanks Blake! 21:00 What were some of the struggles you had early on in your career? How did you overcome them? Learning how to read error logs and messages Dealing with Impatience Coding is very frustrating 26:50 What are High Order Components and Render Props? High Order Components React Render Props Video: Michael Jackson - Never Write Another HoC React Downshift React Reconciliation 34:45 Q: When should you just drop the towel on code? When should you throw in the towel on code? Scrapping a codebase and moving from PHP to JS Let's talk about if it's worth it 41:00 Q: What is the best way for a JS beginner to get their hands dirty? Don't work on apps, work on pieces! 47:50 How do you recommend a designer falling in love with frontend dev sharpen their skills while being (happily) committed to a full time design position? Should designers code? SIIIIIIICK PICKS Scott: It’s Not How Good You Are, It’s How Good You Want to Be Scott: Whatever You Think, Think the Opposite Wes: Tony Robins Podcast Wes: The Kevin Rose Show Shameless Plugs Scott: New React Native Course! Wes: CSS Grid 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

31 Jan 20181h 3min

Xojo — Sponsor Xojo is a cross-platform development tool for creating native apps for desktop, mobile, web and Raspberry Pi. With Xojo you really can write just one version of your app, say, on the Mac, click a button, and have a completely native Windows version too. Xojo lets you abstract yourself from specific platform details, so you can focus on what makes your app unique. All apps have completely native controls, even if they weren’t developed on that platform. Just use drag and drop to create your user interface, and one language to program the functionality. Users also include Fortune 500 companies, citizen developers, professional developers, IT, hobbyists and students - anyone who wants to build apps faster. Listeners of this show get 20% off with the coupon code SYNTAX over at xojo.com/syntax Show Notes Take a drink every time Wes says exactly 01:10 CSS Grid course is out! 03:50 The most basic hosting / services WordPress.org, Medium, Wix, Squarespace 05:00 Your Cheap PHP/Apache Hosts Endurance International Group owns most of the cheap web hosting world cPanel Bluehost doing shady stuff Siteground seems p good 13:20 Service Based Hosting Heroku Zeit's Now Galaxy 15:00 What does "spinning down" mean? Deploying to these services 17:20 How these services do instant cut-overs to new servers SSL Certificates 20:00 You should listen to the Our Stacks Explained episode. Zeit's Now Alias mLab MongoDB Hosting Compose MongoDB Hosting 29:00 Raw Server Space Linode Digital Ocean Rackspace Digital Ocean Droplets Digital Ocean's docs are 👌👌👌👌 32:00 What is Nginx?! Let's Encrypt Mozilla's SSL config generator Caddy Server 38:20 Docker 40:00 SPA Apps - React, Angular, Vue... How to handle Routing Netlify SICK PICKS Wes: Magnetic Magsafe-life USB cable for micro USB, USB-c and Lightning Wes: Magsafe-like USB that can handle a 87w Macbook Pro Wow: MONGOOSE VS SNAKE VIDEO Scott: Bulk Supplements Shameless Plugs Scott: Levelup Tutorials Pro Wes: CSS Grid 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

24 Jan 201852min

Freshbooks — Sponsor If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. Show Notes 02:55 Wes' Async + Await talk on YouTube from DotJS JavaScript is Asynchronous Ryan Dhal (Creator of Node.js) original Node.js talk 06:00 Callback Hell Q Bluebird What is a promise? Promises are an IOU 8:30 Async + Await IS promises What is Async + Await? How does the code look? Returning values from an await 15:20 Performance Considerations MEGA PROMISES Promise.all() Here is an example: const [weather, store] = Promise.all(getWeather(), getStores()); 19:22 This stuff is 100% native Most new Browser APIs are build on Promises Fetch() Some examples: await fetch(' https://api.github.com/users/wesbos').then(data => data.json()) OR await (await fetch(' https://api.github.com/users/wesbos')).json() Axios 22:48 The Payment Request API You should listen to episode 006 on accepting money on the internet Web Animation API 27:00 Snackisodes Snack Packs Hasty Treats?!!! 28:00 Making callback-based functions promised basked es6-promisify util.promisify() 30:00 Error Handling Methods View my slides for some code examples. Try/Catch High Order Function Just handle the error when you callIt().catch(dealWithIt); Node's process.on('unhandledRejection') event 36:00 Browser Support Babel it! 38:00 AbortController() Abortable Fetch SIIIIICK PICKS 42:00 Scott: Ring Doorbell Wes: The Indicator Podcast 47:00 Sick Tip Chrome's Autoplay is changing Details on this Visit chrome://media-engagement to see your scores Shameless Plugs Fullstack GraphQL CSS Grid Course is coming sooooon! 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

17 Jan 201854min