Syntax - Tasty Web Development Treats

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.

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