917: AI Tools You Should Know

In this episode of Syntax, Scott and Wes talk about their desk setups and how they’ve evolved, both as coders and video and course creators. 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. 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. Hasura - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: hasura.info. We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn. Show Notes 03:36 - Desk Scott Ikea countertop on Jarvis Legs. Four presets - sit, stand, horse stance, lunge Wes 8" Ikea Butcher Block countertop on legs LackRack on wheels underneath Desk at cottage is Maple Live Edge Slab on Hairpin Legs 09:01 - Chair Scott Steelcase Gesture Wes Polished Aluminum Herman Miller Aeron Roller Blade Wheels! 15:39 - Display Scott Vivo Stand 38" LG Curved Ultrawide Vissles-M, Portable Touchscreen Monitor BenQ Monitor Light Wes LG 32" 4k Ultra HD Dell Ultra HD 4k Monitor Rain Design 10032 mStand Laptop Stand 22:49 - Headphones Scott Ultrasone Wes QC35s w/ Wicked Cushions - wish they charged over Wireless 24:58 - Mouse + Keyboard Scott Keychron K3 with optical Apple Magic Trackpad Wes Apple Magic Keyboard - extended in Space Grey Logitech Mx2 29:18 - Laptop Both MacBook Pro 33:43 - Dock + Connecting it all together Scott Caldigit TS3+ Satechi USB-C Slim Multi-Port with Ethernet Adapter Under desk rack Wes Everything is in a Lackrack Caldigit TS3+ Single Cable Hookup Two monitors 6+ webcams Elgato CamLink 2 HDDs Microphone Amazon Powered USB Hub Startech Rack Mounted Power Strip 41:36 - Camera + Capture Scott Sony a7 iii Elgato CamLink Wes Sony RX100 iii 44:11 - Microphone + Capture Scott Audient Nero Monitor Controller M-Audio BX8 EV RE20 Focusrite Scarlett 2i2 dbx 286s Cloudlifter CL-1 BSW RE320POP Wes Heil PR40 + shock mount, boom arm, pop filter Focusrite Scarlett 2i2 ART EQ 351 dbx 286s BSW RE320POP 49:06 - Lighting Scott Neewer Bi-Color 480 LED Traditional three-point lighting (key, fill, backlight) Philips Hue above for color pop Wes Neewer Bi-Color 480 LED on a Wyze Plug Two Backfill LED Color lights BenQ Screenbar 55:22 - Storage / Backup / Home Server Syntax 220: The Synology Show - Backups and Home Server Scott Synology DS918+ 8TB Wes Synology DS918+ 16TB (DS920+ is the latest) 16TB of drives - I don’t use anywhere NEAR that LaCiE Rugged or WD Passport for Time Machine 57:50 - Other / Wish list Scott ReMarkable 2 tablet Apple Pro Display XDR Wes Mindnode Elgato Stream Deck LG 5K2K Curved Display Links GraphQL Code Generator KeystoneJS BSW Ikea Lack Side Table Better Touch Tool Shameless Plugs Scott: Testing with Cypress - Sign up for the year and save 25%! Wes: Advanced React - 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

3 Mar 20211h 5min

In this Hasty Treat, Scott and Wes talk about hireable skills or 2021 — what you need to know to get a job and grow in your career this year! 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. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 04:17 - Code in general Clean, commented, organized Take the extra hour before an application and polish it 06:10 - JS Basics of the language - storing data in Arrays and Objects Looping and flow control Array methods Promises + async await DOM basics - select an element, listen for clicks, update elements Node basics Most of your JS basics apply here Read Files, write files Fetch data and return it 08:38 - CSS Attention to detail - pixel-perfect replication of designs Works well on mobile No reliance on libraries - complete reliance on Bootstrap or Tailwind is a red flag. If you use these things, explain clearly why they are useful to you (e.g. augment your skills, not relied on). 12:54 - Real-world libraries One of the following: React, Vue, Angular Node.js - sending Server data as a response JSON Express, Next.js Popular helper libs Date functions / Moment (Moment is old but its still 2x more popular) Lodash CSS Scoped CSS Pattern libraries 17:15 - What about data structures and algorithms? Yes you obviously need to know about arrays and objects - probably maps and sets too Links lists? Tree structures? Traversal? https://twitter.com/wesbos/status/1353729683486076930 20:26 - Soft skills Know how to talk to PMs and other devs. Know how to stay on top of timelines and schedules while communicating. You won’t last long in any work environment where you aren’t able to fit in. Many devs sometimes get a big head about doing tech - this is not something you want to emulate. Ignore any kind of internal “us vs them” attitude. It’s about the big picture and you’ll go further. Write good, short, emails that don’t sound like you are mad. Links LeetCode Syntax 117: Hasty Treat - How To Email Busy People 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

1 Mar 202126min

In this episode of Syntax, Scott and Wes talk with Tanner Linsley about React Query, how it works, why you might want to use it, and more! Deque - Sponsor Deque’s free axe browser extension helps developers instantly catch 50% of accessibility bugs while they code. It’s lightweight, easy-to-use, and has zero false positives. Get started for free at deque.com/axe. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax. Guests Tanner Linsley Show Notes 01:56 - What do you do? nozzle.io React Query 06:04 - What is React Query? 24:19 - How does React Query use dev tools? 31:20 - What about React Context? 36:59 - Server-rendered components? 42:40 - Thoughts on static sites? 50:38 - What is the stack? Links Redux Axios Syntax 206: State Machines, CSS and Animations with David K Piano RTK Query Relay Remix Twin.macro Tailwind CSS React Static Next TanStack ××× SIIIIICK ××× PIIIICKS ××× Tanner: React Query - Essentials Course Scott: Govee TV LED Backlights Wes: 1Password Shameless Plugs Tanner: Nozzle.io Scott: Testing with Cypress - 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

24 Feb 20211h 5min

In this Hasty Treat, Scott and Wes talk about the future of testing with Cypress — what it is, how to use it, and more! Deque - Sponsor Deque’s free axe browser extension helps developers instantly catch 50% of accessibility bugs while they code. It’s lightweight, easy-to-use, and has zero false positives. Get started for free at deque.com/axe. 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:55 - What Is Cypress? A visual testing studio that uses a jQuery-like syntax to test your application in browser. Very modern testing solution. 07:36 - Used to be only Chrome Now available for Safari, Firefox, Edge, etc. ??? - What frameworks is it for? Literally anything that runs on a URL in the browser. Cypress just looks at a URL, executes the commands and then checks the results. Can also run on ci/cd via a headless mode. React component testing is experimental. 10:58 - Automation Cypress studio new feature that writes tests for you. 12:37 - Data Intercept + Fixtures or through plugins 15:01 - Cost? It’s free! There is a paid product called Cypress Dashboard that allows you to record tests long-term. Links Cypress bos.af Jest Better Touch Tool 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

22 Feb 202120min

It’s another potluck! In this episode, Scott and Wes answer your questions about job titles, clients and freelancing, debugging, the creative process behind the Syntax podcast, Deno, how to learn things quickly, and more! 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. 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. Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 01:17 - Do either of you have a pattern that you follow for rolling back Promise.all rejections? I am looking for an elegant way of reversing any promises that may have resolved before one was rejected. For instance, any db writes or 3rd-party webhooks that were created during the sign-up flow, but then need to be removed if one of the promises was rejected. 04:51 - I’ve been doing a bunch of client projects lately that use Gatsby with the WordPress API. I have the clients set up a hosting service for WordPress and a Netlify account connected to a GitHub repo on my account for Gatsby. What I’m struggling with is the idea of having to keep these repos on my GitHub account for as long as these sites are live. But it doesn’t seem all that sensible to have these non-technical clients also set up their own GitHub account that they grant me access to for building these projects. Do you have any suggestions? 08:45 - Hey guys! Been listening to the podcast since I was starting out and it has been super helpful, entertaining, and hilarious. Two-part question. First, when would you consider a dev “full-stack”? I work for a small company that does WordPress, GraphQL, Node, React, TypeScript…lots of variety. I was hired as a front-end dev, but have since done work in PHP and Node, and even my boss has assured me I do full-stack work. However, I am not being paid as a full-stack dev. Can’t figure out if this is because I work part-time (I have a baby) or some other reason. Should I be asking for a raise as a part-time employee? 12:43 - When working freelance for a client, and you need to purchase something, for example the CPT UI plugin or something like WP Migrate DB Pro to help you build the site, do you either pay for it yourself and add it to the clients invoice at the end? Or do you ask them to pay for it when you need it? So many small “gotchas” I’m needing to get over! 18:02 - I just had a baby girl 4 months ago. When she is crying I sometimes catch myself trying to debug her to find out what is wrong. My wife thinks I am weird, but I guess I am just in the habit of trying to fix problems. Have you ever experienced this? 22:17 - How do you prepare for the Monday and Wednesday podcast? What is it like, and what is the creative process behind it? 29:03 - How would one go about using JavaScript to load all images from a folder in order to render them dynamically on a page? I looked around and only see answers using jQuery and PHP. In the end I want my client to be able to drop images into (or remove them from) the images folder and the site would just populate the image slider with all the images. Is this problem solvable with JavaScript, or is it time to learn something new? 35:26 - I have a side project with a Node backend that sends out reminders to signed-up users about various deadlines that they opt-in to. It started out pretty small but as the user base is now in the thousands, I’m worried that my reminder send functionality won’t be able to keep up with the increasing volume. It’s basically just a daily CRON job that loops through users and finds the different notifications to send out - either through Twilio or Postmark. Is there a more efficient way to perform large CRON jobs such as this? Curious how each of you guys would tackle this problem. 42:29 - Hey guys, great overview episode on Deno (ep 322). This got me thinking, again, of the proliferation of tools and technologies in our industry and ecosystems. Say we’ve already “identified” the technology or tool and now we need to get familiar. As course designers constantly exploring new tools and technologies, what are some ways you can most efficiently and productively grasp actionable understanding (i.e. shortest route to Neo’s “I know kung-fu”)? And can you share any “hacks” or “pro-tips” that can help surmount that initial learning curve and tech-stack fatigue? Links SnipCart Syntax 228: More on Severless - Databases × Files × Secrets × Auth × More! FileReader API Syntax 322: The Deno Show Syntax 044: How To Learn Things Quickly Twilio Postmark Begin.com RabbitMQ Syntax 035: Keeping Up with the Codeashians. Dealing with our fast paced industry. ××× SIIIIICK ××× PIIIICKS ××× Scott: Hario Filter-In Cold Brew Tea Bottle Wes: Slonik USB Headlamp Shameless Plugs Scott: Testing With Cypress - Sign up for the year and save 25%! Wes: Advanced React - 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

17 Feb 202157min

In this Hasty Treat, Scott and Wes talk about the differences between compilers and build tools in TypeScript. 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 code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 03:38 - What is a TypeScript compiler? Do we still need Babel / WebPack? 07:49 - Babel Transpiler It doesn’t do typechecking New JS features that aren’t in TypeScript yet 10:22 - SWC Rust based compiler Doesn’t do type checking (yet) https://github.com/swc-project/swc/issues/571 13:03 - Deno Uses tsc right now Might move to Rust https://github.com/denoland/deno/issues/5432 13:36 - Surcase https://github.com/alangpierce/sucrase#transforms 14:46 - ESBuild Compiles, but doesn’t do any type checking Fastest 17:39 - What about bundlers? Parcel Snowpack Webpack ESBuild When might you still need a bundler? To handle different types of files that are non-standard Like importing CSS and images Treeshaking Smaller bundle files Typescript can concatenate to a single file, or all .js files, but smaller / smarter bundles still need a tool for that Polyfills Typescript does convert to syntax, but will not polyfill features Something like Promise Syntax can be transpiled to old code Methods like allSettled aren’t Links Syntax 324: TypeScript Fundamentals Syntax 322: The Deno Show 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

15 Feb 202122min

In this episode of Syntax, Scott and Wes review resumes, websites, and online presences, and discuss pros and cons, what you should focus on, and more! 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. Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 04:32 - Why does an impression matter? All of this stuff comes together to work in your favour when you are hunting for a job. 05:14 - What goes into an online presence? Twitter Share what you know Online website Design Messaging Effort Personal life Blog Resume It’s not about being popular, it’s about relationships and positioning yourself as an expert. People mix up their hatred for “influencers” with having a rock solid network of people who they can help and who can help them. 07:25 - A couple stories @HenriHelvetica You don’t know how many times I’ve tried to convince (esp people of color) to try a lightning talk. This stuff gets you to research, and you might even make discoveries. I know it’s a step out of the comfort zone for many, and that’s cool, but don’t be upset at those who go for it, and land some work. I do (did) lunch n learns @ Juno, and I started to end them w/ a post bootcamp life — tell them what it’s like, and to be active on twitter (share what you read, what you’re working on, listen to others, follow great devs, etc.). One person DM’d me to tell me she took that in and decided to try. “I never forgot that time you gave a talk at HY and one thing that you emphasized was to make your voice known on Twitter. You said that this has opened many opportunities for you and that’s been happening to me more and more recently. I never set out to build my account but the growth has indeed happened and along with it, opportunities from people I’ve never expected.” 09:40 - Ash Connolly https://ashconnolly.com/ https://www.notion.so/ashconnolly/Ash-Connolly-321c5a65350f477897ed025f4daa1bb0 Software Engineer Using new tech with high end clients Review Pros Clean, simple design, but doesn’t feel like it’s missing something Animations are a nice touch Easy to see their work (e.g. photo, title, short paragraph, link) Testimonials is good, I might change the word testimonials, but that’s small Cons Nitpick - footer emphasis color looks like a link HTML is good, but missing some semantic tags like , , , too reliant on divs Resume Pros Good idea of what Ash has accomplished (e.g. just by reading his summary, I’m left feeling impressed because of his client base and his extras like writing for FreeCodeCamp and Marvel Blog). Work history - good way of describing what he did. “Carried out performance audits and site speed improvements” Links to writings and side projects Cons Lists Brad Frost as someone who shared his post. This feels a little weird. Nitpick - CSS & CSS3, HTML & HTML5 on the languages. In 2021, just put HTML & CSS. Work history - WAY way too much. Keep it to one sentence and three or four bullet points for each job. Ain’t nobody gonna read all that. 20:48 - Matthew Bidwell https://matty.dev/ Backend dev Not focused on dev Review: Banging domain It’s clear who he is, what he is about Links to Twitter, Github and LinkedIn right away Blog posts showing he knows what he’s talking about 24:42 - Leah Lundqvist https://leah.link Review: Pros Fantastic aesthetics on site Good lead paragraph Cons I’m not sure what work she actually does Github pages are great for digging but not curation or showing off Same with Twitter For instance, I saw on Twitter that Leah made https://app.airport.community/app/rec1CbVg4J5aqScUQ but there was no mention of it anywhere else. A page full of the most recent / best projects with quick links is essential for anyone. Don’t make them hunt for it Twitter review: Unreal Pinned tweet 31:04 - Ismail Ghallou https://smakosh.com/ Best one yet Clear explanation right off the bat Dribbble - shows me he’s up on the latest Open source Testimonials Talks Blog https://twitter.com/smakosh - Twitter lines up Most recent tweets about tech 40:18 - Jhey Tompkins https://jhey.dev/ Whimsey Sound! Good use of CSS and SVG animation 46:28 - Wes’ website websos.com Can’t view source Whimsey The right kind of animation The link to the Syntax podcast has no indication that it’s going to take you offsite. The background image is good, but not as good with a wide browser. Custom scrollbars are nice Overall the site is a delight 53:25 - Scott’s website scotttolinski.com Font’s a little big Link to documentary is great Bio should include links Page animations are great Showing personal life / interests is good Super fast Links https://twitter.com/wesbos/status/1350961135269400580 Syntax 298: Voice Coding is Really Good with Josh Comeau Josh Comeau Doug DeMuro ××× SIIIIICK ××× PIIIICKS ××× Scott: Swedish Dishcloths Wes: Paper Wheels Knife Sharpening System Shameless Plugs Scott: Testing with Cypress - 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

10 Feb 20211h 7min

In this Hasty Treat, Scott and Wes talk about keyboard events and some of the fascinating things you can do with them! 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. 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:04 - The Events http://keycode.info/ keydown beforeInput Keypress - deprecated inputType tells you whether the event is inserting text, replacing text, inserting a line break, etc. keyup change event - only fires when you focus out https://github.com/w3c/uievents/issues/220 08:02 - Event meta data "key": "c", "keyCode": 67, "which": 67, "code": "KeyC", "location": 0, "altKey": false, "ctrlKey": false, "metaKey": true, "shiftKey": false Others: .locale .repeat 16:46 - Media keys https://developers.google.com/web/updates/2019/02/chrome-73-media-updates play, pause, ect Overkill app: https://krausefx.com/blog/introducing-overkill-dont-let-itunes-interrupt-your-workflow 18:32 - When might you use key codes? Space bar to stop a video on a page Building a game Making a web app feel more like an app Links Better Touch Tool Syntax 315: Hasty Treat - Hyper Productivity with Keyboard Shortcuts + Window Management 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

8 Feb 202122min