Big Deno Changes

It’s another potluck! In this episode, Scott and Wes answer your questions about frameworks vs libraries, improving your debugging skills, building a component library, CSS modules vs styled components, writing a good resume, stress management, 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”. Show Notes 01:27 - How do you implement WebRTC? Please tell us more about online streaming, screen sharing, data flow. 03:20 - Which JS library/framework do you think beginners might find the easiest to understand? 05:06 - How do you deal with different case types between different systems in your project? For example, I store records in a Postgres database which typically uses snake_case and then I render them with React, where props are typically camelCase. Is it better to convert the cases back and forth between frontend and backend or just pick one case and use it everywhere? 09:23 - My question is about the difference between a framework and a library. Should we have two separate words? 12:39 - How can I work on improving both my generic problem-solving skills and my debugging skills? I feel like there have got to be some more proactive things I can do to improve in these areas. 17:22 - I just listened to your podcast on making freelancing easier and enjoyed it. You talk about making your own component library. Do you have tips on how to store and manage a component library? 21:39 - What projects do you use Rust for, and do you have any ideas where Rust might be the thing to do when talking web projects? 29:10 - I’ve recently joined a great-paying full-time gig at a big enterprise-level company as a Senior Javascript Engineer (React, Node, etc). I’m humbled to be here - but at times the pace is slow, tickets are scarce, and I feel like I’m not able to really utilize or hone my skillset. I’ve been looking at potentially moving into contracting/agency work - the money seems comparable with the added benefit of new and exciting projects and having more control over them. Do you think contract work would be more fulfilling, or is crazy to leave a cushy job solely because I’m in a sense, bored? 35:26 - I’m currently working on a Next.js project and trying to decide which CSS system to use. What is your take on CSS modules? I know you like styled components a lot, but since there is built-in support for CSS modules with scoped CSS, I find it hard to motivate bringing in styled components. Am I missing something? 38:15 - Regarding Episode 290, you fielded a question regarding Angular and I appreciated your balanced response since I’m primarily an Angular developer at my job. If you could, would you please update the link to the Angular website to point to Angular.io (v10) instead of the AngularJS (v1) website? 40:43 - I really need advice on how to write a good resume, or any tips you may have for getting noticed in the hiring process with only a couple years of experience. I have been applying to many jobs as a front-end developer but I seem to get no response EVER. 47:17 - How do I dynamically assign subdomain/wildcard/slug dynamically during signup process with React and Node? (Like the way Freshbooks does — i.e tenant1.domain.com, tenant2.domain.com, etc.) 48:44 - Wes, I’ve been taking your Mastering Gatsby course, and I’m loving the course so far. My only complaint would be I wish you added a module for CSS. I think it's just because I personally struggle with styling websites. Do either of you have any suggestions on how I can improve in that aspect of web dev? 50:35 - For web developers just starting out in freelancing/building e-commerce sites — from a business perspective, do you recommend we first 1) just code and worry about business stuff later? or 2) go through the government paperwork and be a sole proprietorship? or 3) incorporate (though this costs more)? 54:20 - What’s your approach for handling padding + margin with components? 57:43 - How do you back up sensitive files that do NOT get added to source control (env files, for example)? I have off-site computer backups, and I have .env files on a small thumb drive on my keychain. What do you do? 59:56 - Do you guys have stress management techniques? How do you cope with stressful situations at work, like unexpected tight deadlines? Links Syntax 002: Webcam and audio access with WebRTC and getUserMedia() Syntax 256: WebRTC and Peer-to-Peer Video Calling with Ian Ramzy Daily.co Twilio Svelte https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case Master Gatsby Syntax 292: How to Make Freelancing Easier https://github.com/formium/tsdx https://nx.dev/react https://github.com/lerna/lerna https://www.npmjs.com/package/babel-plugin-module-resolver Deno Rust wasm-pack https://rocket.rs/ Syntax 290: Potluck - Is Angular good? × Stencil.js × Self XSS × SVGs in React × Social Platforms for Devs × Project Handoff × Cleaning Knives × More! Modern CSS Layouts Modern CSS Design Systems Digital Ocean App Platform ××× SIIIIICK ××× PIIIICKS ××× Scott: Eating Out Loud: Bold Middle Eastern Flavors for All Day, Every Day: A Cookbook Wes: Levi’s Barstow Western Shirt Shameless Plugs Scott: Animating Svelte - Black Friday Sale: Sign up for the year and save 50%! Wes: Master Gatsby - Black Friday Sale: All courses 50% 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

25 Nov 20201h 8min

In this Hasty Treat, Scott and Wes talk about client- and server-side validation, and what each is used for! 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:49 - Wes’ story 06:28 - What is the role of client-side validation? Help the user input the correct data as they type it. Show correct data in UI. Show correct UI. Just about all of these things are for the user’s benefit, and how they feel when using the site. 11:10 - What is the role of server-side validation? Validate that all the data is correct before it’s saved to the database Security first and foremost 15:03 - What process should a store follow to validate on the server? Check that correct types are coming in. Very easy with Graphql. Get current stock and price information from unique ids from the database. Confirm that this information is what the user is expecting — if the UI said the user will be charged $40, don’t charge them $50 just because of the updated info. In that case, send back to the user. 17:17 - What do you do if you don’t want people messing with your React state? @fvilers/disable-react-devtools if (process.env.NODE_ENV === 'production') disableReactDevTools() We do this on LUT. Why? Because it’s a deterrent. Links uses.tech Flipp App GraphQL 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

24 Nov 202021min

In this episode of Syntax, Scott and Wes talk with Benjamin Dunphy about running conferences — what to do, what not to do, and what makes a good online conference in a post-Covid world! 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Guests Benjamin Dunphy Show Notes 03:48 - How do you get started running a conference? 10:05 - Which conferences have you run? 18:05 - How do you get speakers? 23:21 - What about paying speakers? 28:26 - Speaker goody bags? 32:40 - You started your own catering company? 35:32 - How has Coronavirus affected the conference space? 43:06 - Should online conferences try to replicate live conferences? Links Reactathon Jamstackconf Epicodus Meetup Flutter Lifted Plate DevRelCon EventLoop Modern Web Summit @Swizec Sanity Review Changes @tylermcginnis Syntax 250: Scott Teaches Wes Svelte and Sapper ××× SIIIIICK ××× PIIIICKS ××× Ben: Serverless Handbook for Frontend Engineers Scott: Tineco Pure One S12 Wes: Chromecast Shameless Plugs Ben: EventLoop Modern Web Summit Scott: Animating Svelte - Sign up for the year and save 50%! 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

18 Nov 20201h 7min

In this Hasty Treat, Scott and Wes talk about CSS Grid Level 3 — why it’s such a cool thing and why they’ve been waiting for it for so long. 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 04:33 - The spec https://drafts.csswg.org/css-grid-3/ https://twitter.com/wesbos/status/1320735900343668738 06:10 - How it works masonry-auto-flow: next; It first puts all the items that are explicitly placed onto the grid. Items that you have a set start/stop value for are first put down. Then it takes the next item that it to be placed and finds a spot for it. This is different because with CSS Grid you normally have to place the next item on the next row or column. grid-template-columns and grid-template-rows can now be marked as masonry and this specifies which axis will be masonry. 09:06 - The implicit grid https://drafts.csswg.org/css-grid-3/#%23implicit-grid The implicit grid is formed in the same way as a regular grid container. However, it’s only used in the grid axis. Interesting in a column situation (see images). 13:25 - Thoughts Power tools for layout in CSS — opens up a ton of possibilities and completes the functionality we use to dream of in CSS. Links David DeSandro https://metafizzy.co/ Chris Coyier https://caniuse.com/ Isotope Flickity 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

16 Nov 202017min

It’s the 300th episode of Syntax! To celebrate, Scott and Wes do a special live call-in episode with Syntax listeners. 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 03:30 - How is this going to work? Ask a Potluck Question Do a Sick Pick Take on a Stump’d Question Do a Shameless Plug 04:45 - Brad https://bradgarropy.com/ Sick Pick: Rogue Fitness Weighted Vests Shameless Plug: Murphy 11:54 - Brittany Shameless Plug: ZTM Academy Andrei Neagoie 16:43 - Jesse Stump’d Question: What are portals in React? Shameless Plug: codeSTACKr YouTube Channel Shameless Plug: VS Code Hero Course - Use coupon code “Syntax” for discount 23:44 - Henri Shameless Plug: https://twitter.com/HenriHelvetica Shameless Plug: JamstackTORONTO 31:27 - Jason Stump’d Question: What does “use strict” do and what are the benefits? 36:48 - Spence mdx-embed https://github.com/PaulieScanlon/mdx-embed 41:33 - James Potluck Question: How do you keep people engaged in a workshop? Stump’d Question: What is the difference between the postfix i++ and the prefix ++i increment operators? Shameless Plug: YouTube for Developers Shameless Plug: James Q Quick YouTube Channel 54:24 - Austin Potluck Question: Problems with ESLint, Prettier and VS Code playing nicely together Shameless Plug: https://erickka.art/ 66:21 - Dave Sick Pick: mmhmm Stump’d Question: What is the difference between the + and ~ sibling selectors in CSS? 78:56 - Gareth Potluck Question: What do you think about the future of mobile development vs traditional mobile app development? Sick Pick: https://darkreader.org/ Shameless Plug: Level Up Tutorials Discord 89:51 - Ackzell and Lewis Ackzell: Sick Pick: JSConf Mexico Shameless Plug: Ackzell YouTube Channel Lewis: Potluck Question: What is your daily routine like, and you do you decide to prioritize projects? Links What Syntax 300 live on Twitch Discord Mux React HLS Player https://30secondsofinterviews.org/ https://dev.to/bdesigned/vscode-setup-with-eslint-and-prettier-1gek https://madewithsvelte.com/mdsvex OBS Streamlabs ESLint Prettier Missive 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

11 Nov 20201h 45min

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 Nov 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 Nov 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 Nov 202020min