Potluck — Corn Shucking × Self-Hosting Images × WordPress × Getting Scammed × Portfolios

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

21 Maalis 20181h 3min

In this episode, Scott and Wes everything about their recording — from gear to software to tips and tricks for creating a good screencast. 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 2:00 Scott's Hardware: EV RE20 DBX 286s Preamp K&M 23850 Microphone Desk Arm Shure KSM32 Blue Snowball Bluebird Scarlet 2i2 4:00 We talk about Different types of microphones Wes' Hardware: Heil PR40 Heil PL2T Boom Arm Audio Technica AT2020 Heil Flush Desk Mount Scarlet 2i2 DBX 286s Preamp EQ351 Equalizer BSW Pop filter for Heil PR40 Heil Shock Mount 14:30 What are the essentials for hardware? Put a t-shirt under your keyboard 16:00 Once you get to record, what do we use? Divvy IShowU Instant Screenflow Uberlayer Loopback 32:00 Making Mistakes Leaving in goof ups and debugging 40:00 Bad screen recordings What is boring? What is annoying? Recording pet peves Tips for sizing your editor Gross sounds Too many files 50:00 What makes a good recording? Good contrast on colour scheme Keeping the code open Short recordings SIIIIICKkkkkkkkk PIXXXXX Wes: CD Player Magnet Phone Holder Scott: OxyLED Motion Sensor Lights 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 Maalis 20181h 7min

In this Hasty Treat (Short episode) we answer your questions about Freelancing - how to charge more, building a portfolio, finding clients and our thoughts on using pre-made WordPress themes. Sign up for the Value Pricing Bootcamp - Sponsor Get Jonathan Stark's free 6 day email course on value based pricing for freelancers over at valuepricingbootcamp.com. Jonathan Stark is the author of Hourly Billing is Nuts and has worked with companies such as Staples, Time and T-Mobile. These days he routinely commands an effective hourly rate of $2000+ per hour, so I'd say you should check his course out. Show Notes 1:00 Our first episode on Freelancing - how to slam dunk freelancing 4:00 Q: Ideas on building a portfolio and landing those first customers Your portfolio doesn't really matter as a web developer Your reputation and referrals is key Reputation in the community is important Put yourself out there! You have to tell people what you do You have to ask people if they need work Good communication is key 8:00 Q: What are some strategies for budging and quoting? Understanding what a website is worth to a client Talking to your client ablut pricing Asking how much they have available to spend Chunking the project into multiple bits so they can build on it 14:00 Q: How do you tell your existing clients that you need to charge more? Clean Scope / Scope Creep Quote in Features and pieces, not entire projects Fixed Pricing Becoming a better/faster developer Getting more expensive as you move Don't charge hourly Taking big Ls 18:30 Q: What is your opinion on value based pricing? We're huge proponents Clients don't like hourly billing The client should know what you are paying and what you are getting 22:00 Q: When is it okay to use WordPress and pre-made themes? Is that cheating? The beauty of open source The business Wes answer The developer Wes answer Building your own starter files Undoing other developer's work 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 Maalis 201829min

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 Maalis 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 Helmi 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 Helmi 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 Helmi 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 Helmi 20181h 15min