Syntax - Tasty Web Development Treats

Scott and Wes Chat about burnout! Freshbooks - Sponsor This is episode Wes mentions the free book Breaking The Time Barrier. Get a 30 day free trial of Freshbooks at freshbooks.com/syntax. Fluent Conf - Sponsor Developers, software engineers, designers, and web performance professionals flock to Fluent in pursuit of a common goal: building a better web. That means delivering fast, secure, accessible experiences to users and customers. Fluent covers a broad range of technologies and topics to provide web programming professionals with the skills, connections, and inspiration needed to build better online and mobile experiences. Fluent is this June 11-14 in San Jose, CA. Save 20% today with code: SYNTAX Show Notes 01:50 What is burnout? Losing Enthusiasm for web development That Hustle 7:00 Why is being burnt out bad? Putting off hobbies 12:30 How do you prevent burnout? Farming out Work Automating content Busy work 18:00 Aggressively turn down meetings Work to cut out busy work Locus on Control Managing Email and Notifications Scrubbing Plates 24:00 Health and Nutrition Sleep 27:00 Motivation What to do when you just don't like the work you are working on Small Wins Learning new Things Getting a new job Taking Courses Keeping Up With The Codeashians 37:00 Being overworked at work Overtime 41:00 So you've burnt out, what do you do? How do you reignite the spark? Taking a day off Delegating GitHub Online chat with other developers ×SICK×PICKS× Wes: Dewalt 20v Drill Set Wes: Dewalt 20v Cordless Web/Dry Vac MERU Shameless Plugs Vue.js for Everyone SMASH that Subscribe Button on Wes' YouTube 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 and Scott talk all about testing! SnapShooter - Sponsor SnapShooter is a Digital Ocean backup service. You get fine grain control over when you backup and how long you backup for. Easily restore from previous snapshots. Use the code SYNTAX to get 20% off your first 12 months. Fluent Conf - Sponsor Developers, software engineers, designers, and web performance professionals flock to Fluent in pursuit of a common goal: building a better web. That means delivering fast, secure, accessible experiences to users and customers. Fluent covers a broad range of technologies and topics to provide web programming professionals with the skills, connections, and inspiration needed to build better online and mobile experiences. Fluent is this June 11-14 in San Jose, CA. Save 20% today with code: SYNTAX Show Notes 3:00 Testing Talk Is testing scary? 8:00 Unit Testing Pure Functions Mutations Pass in dates to functions 11:40 Integration Testing Integration Testing Mémé 14:00 Visual Regression Testing 17:00 End to End Testing 21:00 Why would you want to test? Confidence Easy Refactoring Finding edge cases 33:00 Test Runners vs Assertion Libraries Jest Mocha Cucumber BBD (Big Black Dog) BDD (Behaviour Driven Development) Cypress.io Enzyme React Testing Library 50:00 Mocking Spy Functions 54:00 Snapshot Testing Jest Snapshot Testing 57:00 TDD (Test Driven Development) BDD (Behaviour Driven Development) Continuous Integration Travis CI ×SICK×PICKS× None today! Shameless Plugs Vue.js for Everyone SMASH that Subscribe Button on Wes' YouTube 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 and Scott dive into jQuery. Is it dead? Should you still use it? Why not? What are some alternatives? 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 replayer and a performance monitor. Get 14 days free over at https://logrocket.com/syntax 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 03:00 A stroll down jQuery Memory Lane What was the first jQuery plugin you wrote? jQuery Conference jQuery IRC room Ben Alman 9:00 jQuery UI jQuery Mobile Sencha Touch nvr 4get where u come from 13:00 So, why is jQuery going away? 16:00 The Selector API Sizzle Bling.js querySelectorAll Docs 21:00 Working with Ajax Fetch Axios 27:00 Dom Traversal Element.matches() You don't need jQuery 30:00 Data / Utility Functions Lodash Just use Map/Reduce/Filter Data Massaging 💆🏻‍ 34:00 Cross Browser Compatability Polyfill.io 37:00 Event Listeners Event Delegation Listening for events on multiple elements 47:00 Final Thoughts on jQuery JavaScript30 The JS Foundation Seeeaaaaacccckkkk PIX Scott: MJML Desktop App Wes: HyperSelect LED Utility Light Shameless Plugs Vue.js for Everyone All of 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

In this episode, Scott and Wes chat about 20 different ways you can improve the perf, speed and overall user experience of your websites. Cloudinary - Sponsor 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. Fluent Conf - Sponsor Developers, software engineers, designers, and web performance professionals flock to Fluent in pursuit of a common goal: building a better web. That means delivering fast, secure, accessible experiences to users and customers. Fluent covers a broad range of technologies and topics to provide web programming professionals with the skills, connections, and inspiration needed to build better online and mobile experiences. Fluent is this June 11-14 in San Jose, CA. Save 20% today with code: SYNTAX Show Notes So many perf tips came in over twitter, so in addition to this podcast I'd recommend you read all the replies to this tweet 0:00 We just cracked 1,000,000 downloads! Thank you! 4:00 Network Tips Reducing the amount of HTTP requests A little bit about HTTP2 An interview about http2 8:00 Use Caching and LocalStorage Turn on aggressive caching on your server - long expire times What is gzip? / Enabling gzip 12:00 Using a CDN Listen to our episode on CDNs and #BigZips 13:00 When to load your JS Blocking Requests 15:00 Use Lazy Loading 17:00 Preloading content with Link rel="preload" rel="prefetch" 19:00 Picture, picturefill and srcset="" Article on srcsrc and Picture srcset vs picture/source elements 25:00 Image Compression One less jpg Serve less data 26:00 Inline SVG Talk about Font Awesome 33:00 CSS and JS Code Critical CSS 37:00 Remove unused code Purify CSS no-unused-imports with ESlint 38:00 Code Splitting 40:00 Transpile less babel-preset-env 41:00 Tree shaking Hoyyyy its a tree shaker 42:00 Async ans defer attributes on your script tags Amazing site that visualizes async and defer 45:00 Icon Fonts Web Fonts Native Font Stack: Good: font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 47:00 font-display 49:00 Troubleshooting Performance Simulate Slow Network Speed Google Page Speed Wes' Page Speed Video SIIIIICKkkkkkkkk PIXXXXX Scott: WiFi Surge Protector Wes: KitSound Bluetooth Airline Converter Shameless Plugs Scott is working on a Vue course! Wes is working on his Advanced React 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

Explore the art of screencasting with tips on selecting the right microphones for professional audio quality. Discover essential recording tools and software, from Divvy to Loopback, aimed at enhancing your workflow. The hosts share amusing anecdotes about common recording blunders and how leaving in mistakes can add charm to your content. Learn the significance of good design choices for viewer engagement and get inspired by personal experiences that highlight the value of feedback and continuous improvement.

Delve into freelancing secrets, from crafting a standout portfolio to charging what you're worth. Learn how to build credibility through referrals and networking rather than relying solely on your work samples. Discover effective strategies for discussing pricing while keeping clients in the loop. Plus, navigate the ethical landscape of using pre-made themes versus custom development. Finally, get tips on self-promotion and communicating your value to clients, ensuring a successful freelance career!

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

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.