Potluck — Freelancing × Leveraging your experience × Component size × Dealing with mediocrity × How to spend “extra time” × Rust vs Node × Free hosting? × More!

In this Hasty Treat, Scott and Wes talk about the state of bundlers in 2020 — Rome, Snowpack, Parcel, Webpack, Rollup, Vite, and more! 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 re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Show Notes 02:39 - What is a bundler? On the one hand, you can write HTML, CSS and JavaScript and open it in the browser On the other hand, your build could be super complex 03:24 - What goes into configuring a bundler? Templating language you use (Jsx, Pug, Vue, etc.) JavaScript you write and compile to: ES6/7/8/9 Typescript CoffeeScript Polyfills Environmental variables CSS loading Image compression Asset Chunking Tree shaking 05:12 - Webpack Hardest to learn, most used currently 07:38 - Rollup Scott’s pick as best option for most features vs ease of use Very powerful Mmmr, tree shaking, plugins, esm 09:52 - Parcel Scott’s simplicity winner pick Easiest to get started with It’s a bundler, but also a dev tool Hot reload Local server Config is done via your package.json Lots of plugins available 12:01 - Npm, Yarn and Yarn 2 It’s a dependency installer rather than a bundler 13:27 - Snowpack Scott’s speed pick of the week Uses ESM by default Like Sonic after a triple shot of espresso HRM Perfect for dev builds, as well as production builds 15:51 - Isobuild / Meteor Scott’s underdog pick of the litter 16:48 - Rome Scott’s mystery pick of the week New tool to do it all Bundler, but also a linter 17:54 - Deno Linter Typescript formatter Bundler (bundle into a single .js file) 20:44 - Let your tool take care of it Gatsby (webpack) Next.js (webpack) Gridsome Create React App Vite (Rollup) Broccoli.js Links Babel Gulp Syntax 212: Pika Pkg Fred Schott Pika Rust Go Software Engineering Daily: Deno and TypeScript with Elio Rivero 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 Marras 202024min

In this episode of Syntax, Scott and Wes talk with Josh Comeau about coding with your voice, accessibility, bootcamps, animation, and more! Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Guests Josh Comeau Show Notes 01:48 - What is your background? 04:33 - Coding with your voice 08:32 - How do you code for a living if you can only do it for a few minutes a day? 21:56 - How has it impacted your productivity? 22:46 - Is it easier with a typed language like Typescript? 26:05 - What about accessibility? 27:14 - How good is the eye tracker? 29:30 - What got you into animation? 35:29 - Favorite app for animations? 40:12 - Being a teacher 41:44 - Is it worth going to a bootcamp? 44:57 - Interactivity in teaching Links joshwcomeau.com @concordia_btcmp @gatsbyjs @khanacademy @unsplash Talon Using Python to Code by Voice Neuralink Tobii 5 Moleskine Apps VLC VSCode freeCodeCamp Syntax 246: Bootcamps, Getting a Job, and Income Share Agreements with Heather Payne https://joshwcomeau.com/css/full-bleed/ Nintendo Switch Navigator.vibrate Voice Driven Development ××× SIIIIICK ××× PIIIICKS ××× Josh: The Utterly Uninteresting and Unadventurous Tales of Fred, the Vampire Accountant Scott: The Neighborhood Listen Wes: Every Tool’s a Hammer by Adam Savage Shameless Plugs Josh: CSS for Javascript Developers | An online course that teaches the fundamentals of CSS for React/Vue devs Scott: Animating Svelte - Sign up for the year and save 25%! Wes: Master Gatsby - Use the coupon code ‘Syntax’ for $10 off! 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

4 Marras 202058min

In this Hasty Treat, Scott and Wes talk about web dev certifications — are they worth it, or a waste of time? Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Show Notes 02:12 - Certifications 05:30 - We have standards, and people move faster than standards. jQuery moved faster than vanilla JS Typescript is sometimes preferred over regular JS We have universities that offer web developer certs and many of them are a joke The point is that programming is the wild west — it’s far too broad and moves far too fast for us to try and fit it in a box 10:28 - Do certifications mean anything? 14:30 - How do you know if you have enough skills (when you’re job hunting)? 19:04 - Some jobs do require a certification AWS Google Links https://openjsf.org/certification/ https://www.sentiatechblog.com/imposter-syndrome-how-to-display-front-end https://twitter.com/wesbos/status/1318192217824124928 https://twitter.com/photonstorm/status/1318193404312944641 https://twitter.com/Ky1e_S/status/1318193954085634048 https://twitter.com/ArleyM/status/1318194323821912067 https://twitter.com/ajitbohra/status/1318194600335470592 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

2 Marras 202020min

In this episode of Syntax, Scott and Wes are back for another episode of spooky web dev stories — listener-submitted stories about web dev gone wrong. 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 re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. 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. Show Notes 03:28 - Jack Rhysider Story 06:28 - Dirty Dicks JSON 08:23 - CMS Disaster 10:58 - Oh No Hotel 11:19 - FTP 12:19 - Push Notification Hell 13:16 - DVD Nightmare 15:15 - Bad Words Again 16:23 - Mo Money 17:01 - Bass Ackwards 18:17 - Taxi Coding 19:36 - Bad Env 21:30 - Login As 21:50 - Email Subscribers Plugin 22:33 - 1 in 300 Chance of the C-Word 24:24 - Production Target 26:12 - A Happy SEO Ending 28:26 - Just Oof 29:48 - I’ve Fallen and I Can’t Get Up 30:54 - Crypto 32:34 - rm -rf 33:42 - Never Deploy on Fridays 35:31 - Million Dollar Scramble 36:22 - Deleting Production 37:11 - 500,000 Concurrent Problems 39:14 - Deleting a Government Website 40:36 - You Ruined the Surprise! 45:23 - Mr. D Hole 46:48 - One Expensive Race Condition 48:43 - Yikes 51:11 - Always Be Closing 51:44 - Adidas - All Day I Delete A Site Links @JackRhysider Darknet Diaries Podcast ExpressionEngine #ghosts chefkoch.de Sendgrid Magento Evite ××× SIIIIICK ××× PIIIICKS ××× Scott: Fastify Wes: 🇨🇦 Mr Chefer Meat Thermometer 🇺🇸 Mr Chefer Meat Thermometer Shameless Plugs Scott: Level Up Pro - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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 Loka 20201h 2min

In this Hasty Treat, Scott and Wes talk about Temporal Date Objects in JavaScript — a WICKED AWESOME API for working with times and dates. Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Show Notes 05:11 - Temporal Now You can get now Temporal.now.___ 07:58 - Temporal Instants A Temporal.Instant represents a fixed point in time, without regard to calendar or location. Most common way to show it is nanoseconds since unix epoch. Can be formatted a few different ways. 09:59 - Calendar Support for different types of calendars 11:43 - Durations Temporal.Duration There are .from and .add and subtract() methods 12:47 - Other interesting parts Timezones Temporal.ZonedDateTime Temporal.YearMonth - represents a ym = new Temporal.YearMonth(2019, 6) // => 2019-06 14:51 - Polyfill (unstable) Links Fixing JavaScrip Date - Maggie Pint https://github.com/tc39/proposal-temporal https://github.com/tc39/proposal-temporal/blob/main/docs/calendar.md#methods https://github.com/tc39/proposal-temporal/blob/main/docs/duration.md 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

26 Loka 202016min

In this episode of Syntax, Scott and Wes talk about spooky web dev stories — listener-submitted stories about web dev gone wrong. 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. Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Show Notes 03:12 - The Most Expensive Boolean Ever 06:19 - An Actual Logging Issue 09:37 - Snitches Get Stitches 10:41 - The Spooky Office Skeleton 12:04 - Prevent the Default of Making Money 13:52 - Computer Magic Trick 14:42 - Update Score 15:59 - Change Reaction 19:30 - Personal Mongodb 20:26 - Hello Rob! 22:08 - SSN Regex 23:06 - WordPress Plugins 23:52 - Loggin Ya In, Ya F’in Dummy 24:58 - A Hostel Coding Environment 25:59 - A Graceful Exit 27:27 - Favicon DDOS 28:07 - Common Cents 29:03 - Open Source Vendors 33:04 - Don’t Leave the Country 35:09 - Apostrophe Catastrophe 35:43 - Env 36:05 - A Christmas Miracle 36:43 - The One Million Dollar Bill 39:00 - The Hacker Who Dropped the DB 40:19 - The Tech Lead Who Uses Alert Statements 46:14 - Lorem Ipsum 46:58 - Malicious Compliance Links Indigo.ca r/MaliciousCompliance ××× SIIIIICK ××× PIIIICKS ××× Scott: Hades Game Wes: LED Flame Bulb Smaller LED Flame Bulbs Shameless Plugs Scott: Animating Svelte - Sign up for the year and save 25%! Wes: Master Gatsby - Use the coupon code ‘Syntax’ for $10 off! 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 Loka 202054min

In this Hasty Treat, Scott and Wes talk about stretching for developers — techniques, misconceptions, and how to feel better. 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 re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Show Notes 03:21 - Devs do the following Head forward looking at screen Shoulders forward Sitting a lot Weak core Carpel tunnel from typing 06:02 - Stretching misconceptions Static holds Dynamic controlled movements first and foremost 07:52 - Stretches to help Dynamic twists Cat / Cow Flat down / Curl up spine Arm hang to decompress spine Wrist stretches and strengthening for carpel tunnel Horse stance at standing desk to be office weird person Shoulder circles Doorway stretches 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

19 Loka 202020min

In this episode of Syntax, Scott and Wes talk about how to make freelancing easier — how to avoid burnout, and tips and tricks to make it successful. Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. 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. Show Notes 02:15 - Code Use starters and resets and component libraries Don’t build in something you don’t know, unless you have time and budget to do so — WP is good enough for most projects Feel free to go over time on projects if you are learning something new Re-use code from project to project Target similar types of clients 13:09 - Communication Often, clear and frequent People won’t be mad for being too informed — just know when to leave out the technical jargon Clients typically don’t care about Git, React, etc. — they care about results Don’t overwhelm them Train your clients that you aren’t available 24/7 22:19 - Time management Set calendar alerts early and often to not miss communications Set meetings at 9am, don’t wait around all day for meetings Block off large amounts of time for dev — you won’t be able to get meaningful work done in one-hour slots 27:54 - Contracts + quoting Have a boilerplate contract that you can just fill in Same for a quote Value-based billing 33:47 - Billing + taxes Don’t be shy when talking about money. Be clear on what you need, when you need it, and on what terms. This is business. This is your art, but it’s also your business Pay quarterly taxes - most likely Or don’t and take the small hit — then you can pay once a year Put taxes into another account if you aren’t good with money Get a billing management system or get an accountant — you need to focus on working on code Wave Apps, Xero, Freshbooks 42:03 - Marketing Be loud — people need to know what you offer The best marketing is a referral from a previous client If you show up, return emails and do a good job, you’ll kill it Show people what you are excited about: blog posts, videos, tweets, etc. Go where your clients are: Do you want to be serving small businesses? Family and friends Do you want to be a hired gun for a technical team? Conferences/Twitter, blog posts 48:25 - Final thoughts Scott — It’s ok if freelancing isn’t for you. Not everyone is great at all of these factors, myself included. However, with practice, you can be your own boss, work on your own terms, and make money. Also, don’t be afraid to take on longer contracts with established teams and companies. Wes — Freelancing can be a great filler between jobs or career transitions. Links Syntax 117: Hasty Treat - How To Email Busy People Freshbooks - Breaking the Time Barrier Design Is a Job - Mike Monteiro Wave Xero Freshbooks ××× SIIIIICK ××× PIIIICKS ××× Scott: Displaced Gamers YouTube Channel Wes: Battery Adapter for DeWALT 20V Max 18v Dock Power Connector Shameless Plugs Scott: React For Everyone - Sign up for the year and save 25%! Wes: Master Gatsby - Use the coupon code ‘Syntax’ for $10 off! 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 Loka 202058min