Syntax - Tasty Web Development Treats

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

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

Discover the world of email management, from designing and templating to sending transactional and marketing emails. The hosts dive into efficient strategies for ensuring deliverability and overcoming common pitfalls with HTML email design. They explore tools like MailHog and MJML to streamline the development process while emphasizing the importance of user experience and reputation. Moreover, they share insights into maximizing open rates and enhancing content creation in email marketing, revealing the balance between simplicity and automation.

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

The hosts kick things off with a quirky soundboard featuring fun quotes. They dive into the evolution of HTML 5.2, discussing its new features and semantic integrity. Personal stories about early career struggles add a relatable touch, alongside insights on learning error messages. The conversation shifts to the benefits of CSS frameworks like Bootstrap for quick designs. React concepts like higher-order components and render props are explored, highlighting their versatility. Finally, practical tips for JavaScript beginners encourage project-based learning.

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

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

Snipcart — Sponsor Snipcart allows you to create online shopping carts without any backend work. It's entirely client-side which means it's the perfect fit for anyone building a SPA in React, Angular or any other framework. Check out the full list of features over at Snipcart.com/syntax and sign up for three months free! 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(id: 027) { notes }} 02:40 What is GraphQL anyways? GraphQL Relational Data 04:45 How is it different than REST? 08:30 GraphQL's self documenting Nature 09:20 You don't need to replace your existing REST api It can sit infront of multiple APIs 10:00 GraphQL Resolvers Apollo Link State does local data as well 11:50 GraphQL on the client side Relay Apollo GraphQL Request Lokka Nano 13:30 Why we like Apollo Setup is amazingly fast 15:00 Pagination Refreshing of data 18:00 The GraphQL Core Concepts Queries Mutations Filtering and Sorting It's not really a query language 21:00 How do you say Schema? 22:00 More on Resolvers 22:50 Mutations Updating the cache 27:00 Using with existing APIs Do you have two schemas now? One for MongoDB and one for GraphQL? 35:00 CMS and Static Site Generators that run on GraphQL Gatsby WP-GraphQL GraphCMS 45:00 Graph Cool 53:00 Apollo Link Apollo VS Redux 56:00 Graphiql SIIIIICK PICKS Wes: The Indicator Podcast Scott: You Don't Know JS Shameless Plugs Free GraphQL Tuts from Scott 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

Dev Lifts — Sponsor Dev Lifts will create a personal training plan tailored to your 2018 health and fitness goals. Use the code SYNTAX for $50 off. Join with a friend and we'll make you a Buddy Plan that you can do together (nutrition will still be tailored on a per-individual basis, but workouts will be something you can both do together)! Plus, use the coupon code below and you'll both get $100 off. Enter each other's email address as the coupon code and your discount will be applied to your invoices (invoices are sent manually currently, so I'll apply the discount for you both once you've both signed up). Valid thru January 31, 2018. The Show Notes! 01:00 Scott's New Redux Course Redux Docs What is Redux? Why do we need it? 06:00 Modifying Your State Immutability 07:15 Actions + Actions Creators Dispatching 09:00 Reducers 14:00 Wes' Redux Tutorial 18:30 What is the difference between Cookies and JWT? 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

Wes details "Breakout" — his email management strategy for overwhelmed creatives and Scott and Wes chat about how they have their prettier setup. 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. The Show Notes! 01:00 Wes' notes on the Breakout Email Management System 02:00 Do you like minisode or snackisode? Any other ideas for names for these short episodes? 04:00 Email is often busywork 04:30 You likely have a decision problem 06:00 Kill it at the source! How do you stop email from getting to you in the first place? 08:00 Your inbox is not the world's TODO list Process it when you get it Getting Things Done 09:30 Filter! Filter! Filter! 10:30 Germans sure do get a lot of vacation time! 13:00 Expansions Using Robots for empathy Text Expander aText 15:30 Dictation is great! 17:30 Video responses 18:30 Defer 19:19 Batch Processing Email Send + Archive 20:31 Stop emailing yourself 24:00 Listener Question: How do you use Prettier? 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