DiscoverSyntax - Tasty Web Development Treats
Syntax - Tasty Web Development Treats
Claim Ownership

Syntax - Tasty Web Development Treats

Author: Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Subscribed: 11,229Played: 471,523
Share

Description

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.
306 Episodes
Reverse
In this Hasty Treat, Scott and Wes talk about a system for writing good commit messages. 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:46 - What are conventional commits? https://www.conventionalcommits.org/en/v1.0.0/ 04:55 - How do you keep track of all the details? https://commitizen-tools.github.io/commitizen/ https://github.com/commitizen/cz-cli https://marketplace.visualstudio.com/items?itemName=vivaxy.vscode-conventional-commits 07:42 - How does it relate to SemVer? Links https://github.com/conventional-changelog/conventional-changelog https://github.com/netflix/unleash Deno 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
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
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
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
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
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
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
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
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
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
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
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
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
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
In this Hasty Treat, Scott and Wes talk about updating web apps that have running for a long time — the problems to look out for and how to avoid them. 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 01:54 - The problem This only affects the client-side 05:28 - What are some solutions: Do nothing and hope the user refreshes. Have a list of assets, or commit hashes. Poll the server periodically, and when there is a new version available: Prompt the user to refresh Just refresh the user (store current state in localstorage and restore) Do a custom component, that checks the last time the user has refreshed (or if new version if available). When they click the link, render a regular instead of a pushstate link. Use a service worker. They will emit an event when a new version is available. Use the above methods to refresh the user. Hot code push. Vuepress has “hot reloading” baked in. Links https://twitter.com/wesbos/status/1306969658751361024 Notion Vuepress Meteor 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
It’s another potluck! In this episode, Scott and Wes answer your questions about getting your first web dev job, what makes a software engineer senior, handing off projects to clients, Angular vs React, the best social platforms for devs, 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:58 - You’ve talked a couple times in the past about the security concerns around target="_blank". You mentioned how adding rel="noopener" and / or rel="noreferrer" can secure this functionality, but what’s to stop a savvy person from going into the dev tools and deleting these attributes before clicking a link? Does this defeat the entire purpose or what? Surely browsers have thought of this and it’s not so easy to hack? 03:48 - Why did you not mention Stencil when talking about web-component in the last Potluck? Can I presume you have not heard of it? It is quite successful and Ionic proves it. We’ve been using it for two years in production. This is the only library that thought web-components through to the end. If you know it, what do you think about it and would you use it? Example of a stencil component: import { Component, Prop, h } from '@stencil/core'; @Component({ tag: 'my-first-component', }) export class MyComponent { // Indicate that name should be a public property on the component @Prop() name: string; render() { return ( My name is {this.name} ); } } 06:12 - Is https://www.syntax.fm supposed to not work? I get a 404. 07:34 - I’m wondering what advice you’d have for someone self-taught switching from a totally non-tech industry (non profit arts, in my case) where I work in a tech role. I’ve hustled and built a portfolio of projects and learned a ton from both of your courses, but I feel that my experience is seen as less valuable because I don’t work in a traditional software/web development environment. Any tips for getting over the final hurdle of getting a dev job? 11:11 - What makes a software engineer senior? 13:08 - I have a Gatsby / Netlify client project about to launch. What’s the best approach in handing over to the (non technical) client? Do I keep in my Github account and just give the client the Netlify CMS login, or create the a Github account for the client that I can access for any maintenance? What do other devs do? 17:55 - I recently blocked all cookies on my mobile browser (Google Chrome), and I noticed something weird. A couple of sites that I know for a fact to have been built using NextJS weren’t working as expected (surprise surprise). They would load as usual, and after a second or so, all the content on the page disappeared, with the error message “sorry: an unexpected error has occurred”. In some cases, the error was printed in the site’s font, and with the same background color on the body. Why does blocking cookies do this to NextJS sites? 21:21 - How often do you make commits? I always hear, “commit often”, but I am hesitant because I feel like I may change my code later on before I make a pull request? I really liked your episode on Git Fundamentals, I would love to see a tutorial/deep dive into Git workflows and practices (when to commit / how often) Should I commit even though I know what I’m working on isn’t complete or I need to refactor it?? What is code review etiquette? 26:59 - Wes, how do you handle captioning and transcripts on your courses? Do you use some tool or service for that or do you do it by hand? 31:11 - I am a recent graduate of a code school that focused on React and Rails. The company that I currently work for uses Angular for part of their stack. I eventually would like to move into a dev spot, but I am finding that Angular feels a bit stuffy and I am not as excited about it as React, Svelte, Vue, etc. I am afraid that if I dive into Angular, I will become less relevant down the road. I want to learn everything, but I only have so much time and don’t want to stunt my growth as a developer. Any thoughts or advice on this would be sick! 36:38 - How do you handle SVGs in React? I know that SVGR exists, but I’d like to avoid adding another dependency if it’s something I can roll on my own. In the past, I’ve created functions that take parameters like fill or stroke to control color, and return a string of SVG code with the arguments interpolated in. Then I place that string into a component using dangerouslySetInnerHTML. I haven’t seen this method used anywhere else, and is probably not best practice. But also, it works, so maybe it’s fine? 39:52 - What social media platforms should you use as a Dev? What is cool to have? What are their benefits? 48:14 - Have you tried an ultrawide monitor for coding, such as 34" or 38"? I feel the extra width would be great for a single monitor setup, but haven’t been able to see one live where I live. Links Syntax 269: Hasty Treat - Target=_blank security issue? What’s the deal with noopener and noreferrer? Syntax 280: Potluck - RIP Firefox? × Safari × Changing Careers × Regression Testing × Google Analytics Alternatives × Malicious Github Users? × Mac vs Windows × More! 8 Mile Syntax 286: Git Fundamentals Rev Angular React Svelte SVGR LevelUp Tuts Discord Dev.to freeCodeCamp ××× SIIIIICK ××× PIIIICKS ××× Scott: 1: Knife Cleaner 2: Scraper 3: Chainmail Scrubber Wes: Scriptable App Shameless Plugs Scott: ReactJS For Everyone - Sign up for the year and save 25%! Wes: Master Gatsby Course - 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
In this Hasty Treat, Scott and Wes talk about enums in JS — what they are, what they do, and how they work in JavaScript. 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:11 - What are enums? A type restricting variables to one value from a predefined set of constants Direction = UP / DOWN / LEFT / RIGHT Role = ADMIN EDITOR AUTHOR VIEWER Day of the Week 05:12 - In GraphQL enum Role { ADMIN EDITOR AUTHOR VIEWER} Then 07:05 - In TypeScript First, declare the type: enum direction = { UP, DOWN, LEFT, RIGHT } Then when you defined your function, use that type type User { role: Role } or type User { role: [Role] } 08:49 - In JavaScript Not in JS yet There is a proposal in stage 1 https://github.com/rbuckton/proposal-enum And a babel plugin: https://www.npmjs.com/package/babel-plugin-const-enum Can use case/switch Can use Object or Map keys Links Syntax 287: Hasty Treat - Records and Tuples in JavaScript 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 of Syntax, Scott and Wes are back with part 2 of Tales from Web Dev Past — this time looking at iFrames, layout trends, icon fonts, web rings, 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. Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax. Show Notes 03:00 - iFrames Sidebar menu target 05:42 - JavaScript image hovers Dreamweaver Photoshop Slice and Select Tool 08:24 - CSS Pie 09:42 - Animated gifs of people and construction http://textfiles.com/underconstruction/ 11:20 - CSS Zoom 1 / IE CSS Hacks Forced IE 7 to redraw floats 13:42 - Layout trends 800x600 fixed websites 960gs Golden Grid 12-col grid creators 16:26 - Sprite maps Spritecow ☠️ Killed icon fonts ☠️ Killed by SVG icons 18:40 - Firebug and Firebug Lite Lite was a bookmarklet 20:14 - Image maps / Background gradients 1px wide and 2000px tall image to make repeating gradients Squidfingers Subtle Patterns Hero Patterns CSS3 Patterns 25:53 - Web rings 27:41 - Glossy buttons 28:09 - Flaming text FlamingText.com 30:01 - Marquee tags Staggered Speed attribute 31:26 - Spacer gifs 34:30 - AngelFire / GeoCities 36:11 - Xanga / LiveJournal 37:29 - Above the fold content Abovethefold.fyi 39:36 - Homestar Runner Links Drupal Omega theme Syntax 032: Designing, Templating, Inlining and Sending Email Mailchimp Litmus Email on Acid Herman Miller Aeron ××× SIIIIICK ××× PIIIICKS ××× Scott: New Rustacean Podcast Wes: Autonomous Ergo Chair Shameless Plugs Scott: Advanced Animating React with Framer Motion - 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
In this Hasty Treat, Scott and Wes talk about records and tuples in javascript — what they are, why you might want to use them, 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:42 - Immutability 05:08 - Records Immutable object Syntax #{x: 1, y: 2} 05:56 - Tuples Immutable array Syntax #[1,2,3,4] 07:18 - For both Referred to as a compound primitive Can contain only primitives, not objects They are compared deeply by their contents rather than their identity assert(#{ a: 1 } === #{ a: 1 }); assert(#[1, 2] === #[1, 2]); assert(#{ a: 1, b: 2 } === #{ b: 2, a: 1 }); Potential for optimizations Optimizations for making deep equality checks fast Optimizations for manipulating data structures Works well with type systems Better integration with the debugger Accessed through normal record.scott object like syntax 13:39 - Stage 2 Links https://github.com/tc39/proposal-record-tuple 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
Git Fundamentals

Git Fundamentals

2020-09-2358:401

In this episode of Syntax, Scott and Wes talk about Git fundamentals — what it is, why you need it, best practices, and more! 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”. 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. Show Notes 03:12 - What is Git? 04:16 - Why do you need it? 06:31 - UI vs command line 09:03 - Commands 101 https://git-scm.com/ init .gitignore file is key right off the bat add add -p - quick review of all the changes you’ve made commit Multiple adds and commits Commit messages should be descriptive push What are origins? pull clone checkout merge fetch stash fork Merge vs pull request Git vs GitHub / Alternatives Bitbucket GitLab 44:25 - Common issues Merge conflicts Files being tracked unintentionally “How do I delete file from GitHub?” git rm -r alias gri="git ls-files --ignored --exclude-standard | xargs -0 git rm -r" Databases in Git? 49:10 - Git clients https://git-scm.com/downloads/guis CLI “Hub” Github CLI GitHub desktop app VS Code integration Source tree Kraken Tower Links VS Code GitLens GitHub Bitbucket GitLab Drupal GitKraken Tower ××× SIIIIICK ××× PIIIICKS ××× Scott: What Had Happened Was Podcast Wes: Yeti Products Shameless Plugs Scott: React For Everybody - 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
loading
Comments (54)

Beatrix Ducz

I'm really interested what do you do if you create an email loop and your internet shuts down? How do you remove the code?

Nov 1st
Reply

Beatrix Ducz

please make a series or a podcast of these! There are so much to learn from mistakes!

Nov 1st
Reply

Beatrix Ducz

if you ever used facebook on android, desktop page setup, and write a message, and delete the text, and start typing again and send it, the letters are reversed. Try it.

Nov 1st
Reply

Beatrix Ducz

I am very satisfied with this episode, it's as precise as can be. :) I'm also not a physio, but have pain and do yoga. :D

Oct 19th
Reply

Hamed Alavi

Cool

Oct 6th
Reply

Beatrix Ducz

just ask the community to send you questions. :)

Aug 24th
Reply

Harvey Read

You also need to be able to go in for sports. Ideally, don't overload your body with too hard training. It helped me to do it right and with pleasure https://motify.com/category/healthy-fitness. An experienced trainer scheduled the exercises and supported me.

Aug 18th
Reply

Beatrix Ducz

is that freelancing course for americans?

Jun 8th
Reply

Josh Saint Jacque

The discussion of data structures and algorithms completely missed the number one reason web devs do need to learn them: interviews. It's frustrating because you're unlikely to use them, but if you want the job you'll likely need to know them.

May 27th
Reply

Mile Balenović

ive enjoyed the talk so much, thanks!

May 12th
Reply

Farshad Hasanpour

speaking of Iran I live here and it's challenging to do bussiness -_-

Apr 9th
Reply

James Lau

There needs to be more mental health episodes/podcasts for developers in general.

Apr 7th
Reply

Beatrix Ducz

hi guys, Brad Traversy recommended this podcast, and I can tell I'm eager to learn react. I come from php. I have listened to about 40 episodes so far and I've learned a lot! Still at Sep 19, a lot to go. Thank you for spreading the knowledge.

Apr 5th
Reply

Beatrix Ducz

traffic lights work differently in different countries. :)

Mar 26th
Reply

Beatrix Ducz

omg geocities, nearly forgot :D

Mar 14th
Reply

Sai Besabella

I think im gonna switch to tea! Thanks guys!

Jan 4th
Reply

Samane Yaghoobi

Such a Great subject for the show!

Nov 28th
Reply

eric wyns

hey guys i got a question. Have you ever coded while drunk/high?? #420 #darkpurp

Sep 26th
Reply

Hitesh Batra

lots of good stuff to listen. thanks for this podcast

Aug 21st
Reply

Akshay Kumar

and this will apply even for messages. people need to understand while chatting with anyone, it should be spot on

Aug 9th
Reply
Download from Google Play
Download from App Store