Good podcast

Top 100 most popular podcasts

Syntax - Tasty Web Development Treats

Syntax - Tasty Web Development Treats

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.

Subscribe

iTunes / Overcast / RSS

Website

syntax.fm

Episodes

Syntax Desk Setups

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
2021-03-03
Link to episode

Hasty Treat - Hireable Skills for 2021

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 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

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
2021-03-01
Link to episode

React Query + More React with Tanner Linsley

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 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?.

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
2021-02-24
Link to episode

Hasty Treat - The Future of Testing with Cypress

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
2021-02-22
Link to episode

Potluck ? Do titles matter? × Should clients pay for plugins? × Can I debug my baby? × How we prepare for Syntax × Deno × Learning things quickly × More!

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
2021-02-17
Link to episode

Hasty Treat - TypeScript Compilers and Build Tools

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 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: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
2021-02-15
Link to episode

We Review Resumes, Websites, and Online Presence

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 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

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
2021-02-10
Link to episode

Hasty Treat - Keyboard Events Are Surprisingly Interesting

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
2021-02-08
Link to episode

TypeScript Fundamentals

In this episode of Syntax, Scott and Wes talk about TypeScript fundamentals ? what it is, how you use it, why people love it so much, 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.

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 What is TypeScript?

03:12 - Types?

What are types and why should you care? JS is a typed language, it?s just not strongly typed JS does not care about reassignment of a variable to a new type Does not care about your types, but they do exist

06:34 - The Fundamentals

You write your JavaScript code, but each time you create a variable, function, parameter, you ?type it? ? which means you describe what that data will look like. Create a variable: Will it be a string? A number? A custom type of show? Create a function: What params does it take? What type are they? What does it return? Types allow your code to know if there are type errors that would present themselves to the user silently. These are small errors that can be compounded and go unnoticed. This can allow you to prevent shipping code that has these errors by checking your code. Some of the biggest benefits here come via errors in your text editor

13:30 - Explaining the types

You can create your own types Strings Numbers We only have numbers in TS, no floats/ints We do have BigInt though, but not something most people will use Arrays Will be a list of another type Unions This type will be one of the possible options String of DRAFT PUBLISHED or ARCHIVED Intersections An intersection type combines multiple types into one Objects These are custom types where each property is its own type Any Explicit any Implicit any Language types These things are technically just Objects, but they have their own types Dates Timeouts DOM Elements / Nodes Void When a function returns nothing ? usually used with side effects like click handlers Enum A set of named constants Used when you have a select amount of values ? I like to think of these as the select lists of TS String unions are also used for this same thing

30:28 - Inference

Automatic detection of types Typescript will try to infer your types based on their definition Not every type can be inferred, leading to implicit anys and the need for explicit types

33:25 - Getting types

Most popular packages already have types ? you install them like npm i @types/whatever If a package doesn?t have types, you have to create them yourself, which can be annoying MakeTypes Console log a JSON.stringify(obj), and pipe it in Node has types Vanilla JS has types, for the language and all of the DOM - HTMLInputElement React has types Typing Node modules that don?t have types Overall benefits

40:39 - Type hinting

With TS and your editor (VSCode) you?ll get more information about your code as you type it ? allowing you to know exactly what things expect This seems like a small deal but in practice leads to being much more efficient

42:50 - Refactoring

Rename a function, type, or variable and it will be updated everywhere in the project! Moving a function to a new file is actually part of TypeScript Drag + Drop file, update imports

48:10 - Compiling

TSC vs Babel / Esbuild Only TSC type checks Compiling TS with babel will not allow you to break the build on type errors, you?ll need to run TSC in coordination or in the CI/CD Links Snipcart GraphQL Snowpack ××× SIIIIICK ××× PIIIICKS ××× Scott: 1: LumiPets 2: LumiPets Bear Wes: Phomemo Label Printer Shameless Plugs Scott: ESM & Snowpack - 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
2021-02-03
Link to episode

Hasty Treat - New Level Up Tutorials Site

In this Hasty Treat, Scott and Wes talk about the new Level Up Tutorials website ? some of the new tech powering the site, behind-the-scenes decisions, previous iterations, 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.

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:55 - Previous iterations

Originally on Drupal 7 Full re-write to Meteor + Blaze Two sites ? store.leveluptutorials.com and leveluptutorials.com Meteor + React Meteor + Apollo Combine store and site Move to TypeScript NOW

05:30 - Big choices

No Babel up and down the stack UI Mostly unchanged ? React + Styled Components + SCSS Moving more to SCSS, CSS vars Build and dev done via Snowpack 50ms hot reloadin? Mega fast development workflow has been a huge plus Errors in the UI via Snowpack Wrote a custom GraphQL importer plugin API ESBuild Insane speeds Wrote a custom GraphQL importer plugin Mercurious / Fastify Codegen GraphQL code gen to create everything we need for a fully typed codebase Auto-generated React Hooks Hosting render.com for both CLI Custom avalanche CLI that removes the guesswork and makes bulk operations easy Caddy server for easy leveluptutorials.dev in local environments Testing Jest ? API Cypress ? UI Links Digital Ocean app platform https://beta.leveluptutorials.com/ 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
2021-02-01
Link to episode

The Deno Show

In this episode of Syntax, Scott and Wes bring you the long-awaited Deno show ? what it is, what it replaces, how you can 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 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?.

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.

Show Notes

02:13 - What is it?

A secure runtime for JavaScript and TypeScript Built by Ryan Dhal ? same guy who initially built Node.js API is JS or TS out of the box

04:55 - Does it replace / what is it in relation to?

Node It?s a replacement for Node.js Express Web Server Frameworks like Express will run on Deno, but Express itself won?t currently run because they are build on Node APIs https://github.com/oakserver/oak Serverless Deno can be used for anything, so it can be used for serverless functions, or a traditional web server Serverless, Deno and TypeScript with Brian Leroux React / Vue / Svelte These things are just JavaScript, so they should/will work in Deno. Deno will replace your tooling. More involved things like Next.js that require Node APIs won?t work until. https://alephjs.org/ SSR It comes with all browser APIs out of the box! Fetch Window + Add Event listener Webpack / Parcel / Snowpack Deno is a bundler Prettier Deno is a formatter TSC Deno is a TypeScript compiler and runtime ESLint Deno is a linter Jest Deno is a Test Runner NPM Deno is a package manager - it pulls in packages from URLs

14:51 - Modules

ES modules from the start Modules are loaded from URLs Why? No package registry to worry about This is how the browser works Import from URL You can also specify it in the json file https://github.com/oakserver/oak/blob/main/deps.ts https://deno.land/ Fetch is built in! It?s a browser API, but who cares?! Browser APIs window.add event Listener Deno is event based, like the browser

20:10 - A nice standard library

https://github.com/denoland/deno/tree/master/std

22:14 - WASM

Deno can run WASM with the same APIs that the browsers can Node is doing this too (experimental)

25:06 - Multi-threading with Web Workers

26:13 - Speed

It?s fast! They took everything they learned from Node - good and bad Built in Rust From what we understand: V8 is written in C++ Node is written in C, C++ and JavaScript How it talks to V8 - Rust sits in-between the JS runtime, and the C++ V8 runtime and communicates between the two. https://github.com/denoland/deno/blob/master/core/examples/hello_world.rs

29:44 - Security

Sandboxed ?allow-read ?allow-net -allow-write https://deno.land/[email protected]/getting_started/permissions#permissions-list You can specify which dirs it can access

33:39 - Run from anywhere

https://www.npmjs.com/package/npx Deno run https://cool.com/whatever.ts

37:43 - Async out of the box

Everything is based on async + await / promises right away. No callback APIs, no promise wrapping. Top level await

38:53 - Node Compatibility

Node APIs are being filled This means if a browser package ships an ES module of a package, we can just import it

42:21 - What we?ve built

A bunch of sample scripts Lots of simple demos Very intuitive Fetched and downloaded every single Syntax mp3 https://twitter.com/wesbos/status/1326345600141582336

46:54 - Hosting

Literally any linux server (Linode, Digital Ocean, etc.) https://begin.com/ https://fly.io/

48:29 - Final thoughts

Scott: Now is a great time to learn, but don?t put any crucial work into that space unless you are ready to write everything. Libraries are still being written and evolved. Docs are still sparse. Many things didn?t work on first try. I had to read lots of source. Wes: If You know JS or TS, you are already 90% there. The package ecosystem isn?t there yet Battle-tested ××× SIIIIICK ××× PIIIICKS ××× Scott: Boom/Bust: The Rise and Fall of HQ Trivia Wes: Orthopaedic Pillow Shameless Plugs Scott: Deno 101 For Web Developers - 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
2021-01-27
Link to episode

Hasty Treat - The New AVIF Image Format Is Unreal

In this Hasty Treat, Scott and Wes talk about AVIF ? what it is and how you might use it!

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 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:10 - What is AVIF?

AVIF is derived from the keyframes of an AV1 video Royalty free (big deal) What about WebP? Basically half the file size of a WebP for free, which was already about half the size of a jpeg It?s a lossy format ? ie it inherently will degrade the image https://jakearchibald.com/2020/avif-has-landed/ No animation

10:53 - How to implement

Cloudinary is in beta, but you can try it Gatsby supports it https://squoosh.app/ Imagemin https://github.com/nucliweb/imagemin-avif https://avif.io/ https://github.com/dreampiggy/AVIFQuickLook https://github.com/vercel/next.js/pull/20765 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
2021-01-25
Link to episode

Potluck ? $100k Dev Jobs × Sponsored Blog Posts × How To Keep Your Skills Up To Date × Libraries vs Custom × Dev Tools × More!

It?s another potluck! In this episode, Scott and Wes answer your questions about VS Code, JavaScript, $100k-per-year dev jobs, sponsored blog posts, how to use dev tools, how to keep your skills up to date, 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.

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.

Show Notes

02:01 - Not so much a question as me saying thanks! I started web dev as a bartender/college dropout in 2017 when Syntax was pretty new. I rarely miss an episode, and this year I?m starting my first >$100k JS job! Your show has always been fun, kept my attention in the realm of web dev, and helped guide my interest ? I think it has been extremely valuable to my career so far, and I look forward to more.

04:10 - How do I know when to pull in a package rather than write similar functionality myself? And is there a rule for when enough is enough, in terms of having too many packages? What I?m most concerned about is bundle size. It doesn?t seem to take a lot of packages before Webpack notifies you about large bundle sizes, so what would be best practice?

11:27 - What is your opinion of doing a sponsored post or guest post on your own site? And if you?re in favor, what sorts of terms, payment, etc. would you outline or charge for it?

18:20 - Do you have/know of any resources for those that want to learn more about selling digital products through e-commerce? The sources I?ve found (Scott?s e-commerce/Gatsby courses & Next.js commerce demo page) focus more on creating stores that sell physical products. Are there any gotchas when selling digital vs physical?

22:10 - Do you have any tips for keeping your skills up to date while taking a break from work? I?m a frontend dev currently six months into my year-long maternity leave and I feel like my brain has turned to soup. I listen to podcasts and read blog posts but it never feels like enough. Time and energy are very limited for me to work on personal projects!

25:11 - I remember you guys saying something about making your own UI component libraries. Do you use some CSS libraries like Tailwind or even Bootstrap or others for this, or do you write your Sass/CSS from scratch?

30:52 - Would be interested to hear some of the common ways you use dev tools (chrome dev tools, react dev tools, redux, etc.). I feel like there is a lot of information in there that I am not utilizing properly to help figure out problems during development. Would be cool to hear an overview of how you use the different tabs, some of the most commons things to look for, etc.

35:20 - I am graduating from a bootcamp next month and I feel severe insecurities/imposter syndrome. For whatever reason, I freeze up when it comes to coming up with code or writing things myself, mainly in JS. When in class, watching tutorials, following along, or viewing other people's code, I can tell you exactly what is going on, why it is being done, and I can change and add things and explain them. But when it comes to starting from a blank slate, I freeze, as if everything I know about programming has gone out the window. Do you have any advice as to how to get past this hurdle? I feel like at this point I shouldn?t be feeling like this, but maybe this is normal?

40:36 - Do you think developers have a responsibility to help reduce CO2 emissions caused by the web? A BBC news article stated that ?HD video streaming on a phone generates about eight times more in emissions than standard definition (SD)? and noted that on a small screen, the viewer might not even notice the difference. Should the developer limit the resolution available to mobile devices, or should they let the end user choose?

47:53 - I was hoping that you guys could give me, and other listeners, advice on ?knowing when you?ve bitten off more than you can chew?? Often I?ll be working on a project for fun, or possibly building out my portfolio, and I?ll continue to get excited about features that I?d like to add to my current app or what have you. At first glance, the ideas or features seemed reasonable enough to tackle, but hours later, I?ll find myself stuck, realizing that I?m in over my head, as I?ve tried to take on something that I?m not yet experienced enough to work with, or I?m lacking the man-power to complete it in a timely manner. At the same time, I want to challenge myself so that I can grow, but sometimes I feel that I?m not using my time wisely. So my question to you is, where is the line between challenging ourselves to take on new and difficult tasks and scaling back our current work to make it more approachable and less overwhelming?

55:01 - What is the right use-case for a database, and what is the right use-case for a headless CMS? Is a headless CMS just a database + a user-friendly way of entering data into that database? Is there a secure way of querying Sanity directly from the frontend if I have data that I want to be only available to logged-in users?

Links Syntax Listener Questions Bundle Phobia Shopify Snipcart Styled Components BEM Mux ××× SIIIIICK ××× PIIIICKS ××× Scott: Double Sided Mounting Tape Wes: Secret Aardvark Habanero Hot Sauce Shameless Plugs Scott: All Courses - 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
2021-01-20
Link to episode

Hasty Treat - CSS Typography and Systems

In this Hasty Treat, Scott and Wes talk about CSS typography, and how to quickly get up and running with type systems.

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

05:00 - How do you define type at the start of a new project?

15:03 - How do media queries and screen sizes affect your system?

16:58 - Why are systems in type important?

20:21 - How do you design a type system?

Scott?s type system: /* Font Sizes */ --baseFontSize: 1rem; --baseNavSize: 0.64rem; --smallFontSize: 0.8rem; --smallestFontSize: 0.512rem; --xtra-big-ass-heading: 3.052rem; --xtra-heading: 2.441rem; --heading-1: 1.953rem; --heading-2: 1.563rem; --heading-3: 1.25rem; --heading-4: var(--baseFontSize); --heading-5: var(--smallFontSize); --heading-6: 0.64rem; --heading-7: var(--smallestFontSize); Links https://type-scale.com/ 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
2021-01-18
Link to episode

Reactathon LIVE

In this episode of Syntax, Scott and Wes are coming at you live from Reactathon with audience-favorite segments including All I Want for Christmas in React, JS or Nay-s (or Both), Overrated / Underrated, Hot Take Tweets, Listener Questions, 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.

Magic Bell - Sponsor

MagicBell, the embeddable notification inbox - magicbell.io. Use the coupon code SYNTAX to get a 20% discount if you sign up in the next two weeks.

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

04:17 - All I Want for Christmas in React is:

Suspense for data fetching On mount animations Unmount for me Single file components preventDefault shortcut Input to state mapping

09:45 - JS or Nay-s (or Both)

Shout out to Pigeonhole Graphene - 1) Carbon atoms organized in a hexagonal lattice, or 2) An opinionated Python library for building GraphQL Libraries in Python? Floodlight - 1) A super simple syntax highlighter for XHTML documents, or 2) a large light used to illuminate dark outdoor spaces? Toy Machine - 1) An early 2000s skate brand, or 2) A Vue-based GUI for creating state machines? Joplin - 1) A free, open-source note taking and to-do application based on markdown, or 2) A city in the northwestern corner of Missouri? Noco - 1) A JavaScript library that connects to No Code tools including bubble.io, or 2) A smart car battery maintainer & charger? Innr - 1) A smart lightbulb, or 2) A CSS in JS library for selecting parent selectors? Cabkoma Strand - 1) A thermoplastic carbon fiber composite rod used in modern buildings, or 2) A Redux-like state management library for Svelte? Sputnik V - 1) Code name for the upcoming WordPress release with built-in headless CMS mode, or 2) A non-replicating viral vector COVID-19 vaccine?

18:44 - Overrated / Underrated

Deno ESM import from URL (no npm) Remix.run Xstate

27:49 - Hot Take Tweets

https://twitter.com/wesbos/status/1336367385683636225

34:34 - Listener Questions

Q: If you recently started doing web dev work, which career path would you choose - startup, FANG, or freelance? Q: TypeScript all the things? Q: What do you do to keep up with the latest and greatest changes in tech - front-end libraries, new languages, etc.? Q: Can you share some exclusive BBQ tips? Q: What do you expect of Blitz.js in the next few years? Q: What?s the first node module you install in a brand new React project besides React itself? Q: Thoughts on using languages other than JS and TS with React like Kotlin? Q: Do you have an approach for optimizing hi-res images that are stored in your back-end, like S3 for your Gatsby website? Links Watch the live recording of this episode: https://www.youtube.com/watch?v=8xJpxj6T1BQ Formik Mux Syntax Ep 206: State Machines, CSS and Animations with David K Piano Check My Hair - Wes Bos Houdini.How Rust Cloudinary LockPickingLawyer YouTube Channel ××× SIIIIICK ××× PIIIICKS ××× Scott: VS Code color conversion extensions Wes: Acrylic lock picking kit Shameless Plugs Scott: All Courses - 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
2021-01-13
Link to episode

Hasty Treat - A Podcast About Nothing

In this Hasty Treat, Scott and Wes talk about nothing ? null, undefined, void, false, 0, ??, NaN, [], {}, never ? all sorts of values that could mean the things that do not exist.

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:35 - Undefined

Implicitly nothing A variable declared, but not set is undefined

04:25 - Null

Explicitly nothing

04:41 - Null vs Undefined

Null has a value of nothing Undefined does not have a value You can set variables to either If you want to set a score variable to nothing, set it to null If you want to un-set a value, set it to undefined == will check if a value is either null or undefined

05:35 - Void

In Javascript You can pop void in front of calling a function and it will return undefined (even if that function returns a value) I?ve seen it on links that go nowhere (don?t do this ? use a button) To prevent an arrow function from leaking onSubmit="javascript:void()" is a quick-n-easy prevent default on forms In Typescript Void is when you don?t care about what is returned from a function, or if nothing is returned A click handler that goes off and does stuff (side effect) can return void

09:15 - Never (in Typescript)

Some functions will never return: Functions that throw errors Functions that have infinite loops Also, unreachable variables have a type of never if(true == false) { let var = 'this will never be true'; }

11:05 - Falsy values

0, -0, 0n false ?? (empty string) Empty array Is a value Its .length can be falsy Empty object Is a value Its object.keys(object) length can be falsy (0) 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
2021-01-11
Link to episode

2021 Predictions

In this episode of Syntax, Scott and Wes talk about their predictions for 2021!

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.

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.

Show Notes

02:06 - ESM

Scott: It?s going to be big Snowpack Wes: Everything going forward should be ESM

05:44 - Wes: Remote work will grow

Whole new talent pool opens up Whole new living situations open up

08:23 - Scott: Deno will grow

Deno 101 for Web Developers

11:12 - Wes: Tooling will fade away

Less setup, more behind the scenes Rome Deno Linter Formatter Transpiler Tester Parcel2 Snowpack Nextjs

14:14 - Scott: Greater usage of other languages to build Javascript

esbuild Rust Go

19:35 - Wes: Programming communities will gain traction

Github Discussions Forem Circle spectrum Discourse

23:25 - Scott: More WASM

Mongo Spline

27:19 - Typescript

Wes: Typescript will become more popular Scott: Tooling will get better VS Code

29:37 - React

Scott: Scoped CSS in React will evolve SSR and hydration will be better Wes: People will fall out of love with React Or more magic will get added to React

32:52 - Scott: More web component frameworks

Stencil

33:17 - Scott: Markdown and mdx-like frameworks will skyrocket in use

33:59 - Wes: Gatsby

Hosted GraphQL / SSR / Render on demand Solve the pain of long build times Syntax 308: Gatsby vs Next.js in 2021 Next.js

35:24 - Scott: AR tech will grow

Target AR app

36:38 - Wes: AI will become accessible

Something as easy as a search result RTX Voice

38:43 - VS Code

Scott: It will continue dominating Cloud and shared coding env will become better Figma Wes: Github Codespaces

40:18 - CSS

Wes: Color functions More use of built-in features Scoped CSS Scott: People are going to love and use CSS variables Modern CSS Design Systems Course

42:39 - Serverless

Scott: Ease of use will get better and better Wes: Netlify Vercel

45:30 - Wes: Enterprise Jamstack will become a thing

Cloudflare hosting Next.js Gatsby Sapper SvelteKit

46:30 - PWAs might become more popular

Apple will never want you to go around the app store ××× SIIIIICK ××× PIIIICKS ××× Scott: Ted Lasso Wes: Neewer Dimmable Bi-Color LED Shameless Plugs Scott: Deno 101 for Web Developers - 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
2021-01-06
Link to episode

Hasty Treat - Hyper Productivity with Keyboard Shortcuts + Window Management

In this Hasty Treat, Scott and Wes talk about keyboard shortcuts, window management, and how to stay productive.

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 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:54 - Karabiner-Elements

06:11 - Better Touch Tool

13:55 - ScreenFlow

17:52 - VS Code Shortcuts

21:20 - Text Expander

23:00 - Clipy

Links Davinci Resolve Divvy Uberlayer Elgato Stream Deck iShowU Rocket Clipy source 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
2021-01-04
Link to episode

2020 In Review

In this episode of Syntax, Scott and Wes talk about 2020 in review ? predictions, hits and misses, hot tech, what they worked on, 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.

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

01:43 - Predictions from 2020

CSS Subgrid CSS Houdini CSS features not supported in older browsers yet Scrollsnap - IE 11 and up. Lot?s of mobile issues. position:sticky - no IE at all NPM tink Installer-less npm Load packages at runtime into a shared cache across all projects Intelligently download the parts you need Yarn PnP / Yarn 2 Hard links to eliminate package duplication Shared cache across all projects Pika & Snowpack Deno React Suspense in more libraries Suspense for Server Rendering Meteor New ownership. v1.9 just dropped with lots of promise for future growth Svelte 3 Vue 3 Apollo 3.0 came out Fine grain cache control Hooks API Custom logic over how things are read and merged New dev tools Next.js 10.0 came out Images! Gatsby A single useQuery (made possible by suspense) Serverless Going to get easier Begin Next.js / Now Functions Headless CMS Thunderdome Sanity WordPress WPGraphQL Keystone Strapi RedwoodJS Blitz.js Cypress End to end testing We got Firefox support in 2020 Modulz Exports to JS component Figma Was already amazing in 2019 Constantly improving and adding new features Can import from Sketch Auto Layout Spline

42:24 - What other tech was hot in 2020?

ES Modules is king We?re ready in the browser Node shipped stable Deno has it Snowpack Bundlers and tools Snowpack Vite Rollup made gains Rome GraphQL got way easier Battle of the Types Typescript Flow Reason Rust Wasm Viable to use Starting to exist in more real ways

52:53 - Working from home

Remote work is hotter than ever Starlink is coming Webcams - Cam Link Discord Remote Pairing Live Share - I used VS Code with Jed from Keystone Tuple

57:13 - Code libraries

React Query Alpine.js Stencil

59:25 - Personal / Professional updates

Hard year for productivity Published more than 100 episodes of Syntax Links Syntax 216: Tech To Watch In 2020 Adam Argyle https://ishoudinireadyyet.com/ Syntax 212: Pika Pkg Fred Schott Level Up Tutorials: Deno 101 For Web Developers React Suspense Sapper How to Supercharge Your Productivity with GraphQL Tooling by Scott Tolinski Wes? Master Gatsby Course Syntax 308: Gatsby vs Next.js in 2021 Syntax 299: Hasty Treat - Bundlers in 2020 https://github.com/ffmpegwasm/ffmpeg.wasm ××× SIIIIICK ××× PIIIICKS ××× Scott: Innr Bulbs Wes: Pendleton Weighted Blanket Shameless Plugs Scott: All Courses - 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
2020-12-30
Link to episode

Hasty Treat - Hosting + Web Services Pricing Explainer

In this Hasty Treat, Scott and Wes talk about how hosting and web services pricing works, and how to figure out what you need, and what you don?t.

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:55 - Per minute

Spin up, do the work, spin down Popular in serverless space Can apply to other types of computing such as graphics, AI, machine learning, etc.

03:49 - By resources

Ram CPU Disk space

06:02 - Per ?dyno?

These are Heroku Linux servers You can add more dynos and make your app faster They scale it for you

08:54 - By bandwidth

Sitting files Inbound (ingress) Output

12:24 - By DB calls or entries

Databases

14:04 - By users

This is more of a Sass thing, but can bleed into hosting too Seat-based - Netlify does something like this

17:23 - By apps

Digital Ocean app platform Each app is $5

21:22 - By ?work?

Cloudinary does transforms on images Mux Links Heroku AWS Digital Ocean Meteor Galaxy Linode Rackspace MediaTemple GoDaddy Bluehost Backblaze B2 Mux GraphQL Github Netlify 1Password Cloudinary Firefox Containers Chrome grouped tabs Brave Digital Ocean app platform Cloudflare Vercel Prisma 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
2020-12-28
Link to episode

Potluck ? New Macs × Podcast Statistics × E-commerce Testing × WordPress × Charging More × Learning Web Dev × More!

It?s another potluck! In this episode, Scott and Wes answer your questions about new Macs and web development, podcast statistics during COVID, is it still worth it to learn WordPress, dealing with imposter syndrome, 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.

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

00:47 - Roch Tolinski ? You guys are doing a downtown job!!!

02:45 - Yesterday Apple announced their new Macs. They seem pretty sweet, but I was curious, what does this mean for the world of web developers? Will my current apps slowly stop being supported? Will things like brew and node and npm still work on those new machines? Would it be smart to start learning new programs to be prepared for the transition?

10:20 - Hey, great show! No really, great show. What is better for working at home/the office, iMac or MacBook Pro?

13:25 - What are your thoughts on Remix? And has your listenership gone down since COVID-19? I have heard that less people listen to podcasts now because they no longer commute.

19:33 - What is your approach to testing for e-commerce sites? I am about to launch a client?s online store and I?m sick with worry that a simple plugin upgrade will impact the store, and that I won?t know about it till a disgruntled customer complains.

24:57 - I?m getting into web development through college (just trying for an associate's to start) and I?m noticing the intro courses are very hard to get into. I?ve been self-teaching so I kind of feel like I?m ahead. The intro to computing logic (basic algorithms) teacher teaches very slowly and forces us to use an awful software called Raptor to create pseudo programs. I?ve been asking to actually use a language rather than the software but the teacher doesn?t have enough programming knowledge to grade the actual language assignments. I feel like this course is a step back from what I already know. I was just wondering if you guys have any tips on getting through the grueling ?required? courses?

31:04 - So it's been announced now that Sapper will never hit 1.0, and instead Svelte core functionality is being expanded and Sapper is being deprecated. I know you all don?t have any inside info, but kind of wondering how Scott feels about this and what he?s doing with his Sapper site in the nebulous time between the big announcement and the release of the next Svelte version?

35:17 - I?m currently working through a full-stack Udemy course to make the switch away from my day job to try freelance web development. I want to start taking on some easier freelance jobs to help make a little extra money and build my portfolio, and I see WordPress recommended as an easy way to do this. My question is, would it be worth undertaking the learning process to pick up some PHP and learn basic WordPress development so that I can start freelancing now, or would I be better served just focusing on HTML, CSS and JS and waiting until I broaden my understanding of these languages before I start taking on some preliminary clients?

39:22 - If I plan to use WordPress as a headless CMS, how do I make sure the WordPress site itself is not publicly accessible? As far as I know, there?s no ?API-only? mode for WordPress (like there is for, say, Rails or Laravel) and if I install a WordPress site on a server, it?s going to be discoverable online. I?d hate to have people find the WordPress API site and think it was my website ? or for my static site to have to compete with my WordPress API for prominence in search engines. How do people ensure this doesn?t happen?

42:01 - If I have a Vue.js website running on WordPress, how could I dynamically insert Vue components from the WordPress backend (e.g. have a post that inserts a Vue.js poll component)? I don?t want to recompile every time.

44:24 - I?ve heard you mention previously that you have used WordPress to host sites in the past. I?m keen to learn how you have created your own themes for those sites. Did you write your own PHP, etc, or is there another way? I?m hoping to learn a bit more about developing for WordPress as it?s a skill I?d like to have in my back pocket, and would love to hear about any resources you would recommend for this.

47:51 - I?ve been a web developer for over 15 years. Unfortunately, I had to leave web development for personal reasons. I have a lot of great skills. Unfortunately, because I?ve been out of the game for so long my resume is full of holes. All the current experience I have is project-based or freelance-based. I do not have the ability to show long-term projects or anything stable on my resume. I?m trying to get my first job back in the field after my long absence. It has proven to be nearly impossible. I am listening to your Tasty Treat about certifications and certified education. I agree that certifications do not show actual skill. I also agree that just because I do not have longevity and consistency on my resume that I do not have the skills to pay the bills. How can I get my first job back in the field? I am working on small projects to highlight my skills but no one really seems to care. What would you do?

53:36 - I am currently in a food service job, but would love to move into the dev/design field. I have a year of experience in JavaScript, HTML, and CSS/Sass, as well as React, Gatsby, Next, and Node ( thank you both for helping with those ). I have a small amount of experience with freelance web design and development, but feel I am greatly underselling myself ($150 for a Gatsby site built for a friend and less than $100 for a couple Fiverr gigs). I have seen freelance work out well for my friends and family, but I am terrified of having to find clients. I have a hard time valuing my work and fold when money is brought up. There is always a part of me that says to just shoot high and have them talk the price down, but I hate the confrontation. How should I go about finding my first $1,000 client and how can I show the client that my work is worth more without talking about the tech involved?

Links https://isapplesiliconready.com/ https://github.com/ThatGuySam/doesitarm https://www.electronjs.org/blog/apple-silicon#how-does-it-work Missive VS Code Screenflow Figma Sketch Brew MongoDB iTerm2 Hyper Davinci Resolve https://remix.run/ React Router ExpressionEngine Keystone.js Advanced Custom Fields Dreamweaver Sapper Svelte https://svelte.dev/blog/whats-the-deal-with-sveltekit Rollup https://www.snowpack.dev/ Udemy Laravel https://www.tempertemper.net/blog/stop-search-indexing-for-netlify-deploy-previews-and-branch-deploys Vercel Netlify Syntax 297: Hasty Treat - Certifications? Government Specified JavaScript Skills? Design is a Job by Mike Monteiro ××× SIIIIICK ××× PIIIICKS ××× Scott: 1: Chameleon: Hollywood Con Queen 2: Q Clearance: The Hunt for QAnon Wes: truLOCAL Shameless Plugs Scott: Deno 101 For Web Developers - 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
2020-12-23
Link to episode

Hasty Treat - How Would We Script a PS5 Buying Bot?

In this Hasty Treat, Scott and Wes talk about the PS5 bot debacle, and how they would do it differently!

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:12 - Scott?s strategy

Go to Reddit and refresh until someone posts a link and then GO GO GO Don?t buy on sites that allow simple bots to work TBH I don?t know how to code this type of bot and would prob end up accidentally buying a ton of stuff

05:06 - Wes? strategy

https://mcbroken.com/ You need a way to find out of there is stock Find out of there is an API endpoint you can hit (inspect element) If there is not, you?ll need to scrape the site. Fetch(url). text() Regex Cheerio Puppeteer (slower, easier to run) Save any data that you want in a database. Text-based database is great. Lowdb SQLite DynamoDB (if doing serverless) Re-run the scrape every N mins When there IS a match you can: Send a text message - Twilio Send an email - Postmark Try to fill out the form and submit it yourself document.querySelector()

11:35 - Things that get in the way

Blocked IP Use a VPN Captcha or Cloudflare Run it on your local computer Use Puppeteer to get all cookies and headers Links https://twitter.com/bahamagician/status/1329430249151533066 stocktrack.ca 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
2020-12-21
Link to episode

Serverless, Deno and TypeScript with Brian Leroux

In this episode of Syntax, Scott and Wes talk with Brian Leroux about severless, Deno, Typescript, and more!

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?.

Guests Brian Leroux Show Notes

02:17 - What?s your background?

06:18 - What is serverless? Why is serverless so awesome?

14:07 - What changes from moving from an existing app to a new app?

16:15 - What is a cold start?

17:46 - What languages are suitable for serverless?

19:14 - What do you think about Deno?

24:23 - How does Architect work?

31:14 - What do you think about Typescript?

40:35 - Do you think websites should work without JavaScript?

44:51 - What about sharing code?

Links Begin Architect Scott Tries Begin Lambda https://alephjs.org/ Deno Typescript Digital Ocean Azure Remix Svelte Puppeteer Yumda DynamoDB ××× SIIIIICK ××× PIIIICKS ××× Brian: Begin Fingerprinting Scott: Been Here For Too Long Wes: Grabber Tool Shameless Plugs Brian: Begin Proxy Scott: All Courses - 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
2020-12-16
Link to episode

Hasty Treat - 300th Episode Tech Chat

In this Hasty Treat, Scott and Wes talk about their 300th episode and the tech behind it.

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:15 - The things we tried

Zoom Breakout rooms Hopin - $$$ Streamyard

04:24 - What we used

Discord Room as a waiting room Roles to give access An a/v room where Wes and Scott were hanging Lots of questions about Slack vs Discord OBS ObS to stream to three locations ObS Streamlabs does this easily Screen capture did a better job than using the video source from Discord Youtube, Youtube, and MUX Streamlabs can stream to 4 sources at once MUX How we got Syntax.fm/live to work Create a new live stream on Mux via their UI Get stream address and key Point Streamlabs to it HLS m3u8 address from Mux into a HLS react player Looping intro video Principle for mac Watch how I did it on youtube - https://www.youtube.com/watch?v=I6pSlESq_bY Music Song Scott wrote Recording Audio Wes recorded two streams locally All audio on stream was piped through BlackHole on Scott?s machine Used Loopback to pipe Discord audio into an input Scott + Guest were on the same channel, possibly compressed Sounded good! Links Zoom Hopin Streamyard Discord OBS MUX Slack Spectrum Streamlabs VLC Twitch react-hls-player Principal BlackHole Loopback 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
2020-12-14
Link to episode

Gatsby vs Next.js in 2021

In this episode of Syntax, Scott and Wes talk about Gatsby vs Next. A lot has changed in the last year ? what are the differences, and do the recommendations from Syntax 120 still hold true?

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

03:34 - Server-rendered

Both do server rendered Gatsby is gone at build time Next is done at build and on deploy

05:26 - Static generation

getStaticProps() getServerSideProps()

08:25 - Re-rendering pages

Gatsby can be re-rendered and re-deployed - any CMS lets you do this on only the pages that changed. Gatsby-cloud Next.js has the revalidate flag that will re-render when stale

18:54 - Data management

Gatsby has a built in GraphQL API feature with Next.js has nothing - it?s not their problem. Use Apollo, or SWR, React Query, or redux, or whatever you want.

23:16 - Client-side data

Neither do anything, next.

26:33 - Dynamic Pages

List of 100 shoes, each one gets a page List of four types of shoes: basketball, runners, casual, bowling, etc. List of 10 colors: each color gets its own page. List of 12 sizes, each size gets its own page. Now it gets complicated when you do this: Show me basketball shoes, in red, in size 5 600 pages minimum What about size 6+7? Then you get into having to fetch data on the client side - but all your data is in GraphQL?! The queries are different! Gatsby will get ?Hosted GraphQL?: https://twitter.com/kylemathews/status/1252803849775009794

30:41 - Routing

Neither do nested routing still Both do folder based wrapper

34:50 - Hosting

Anywhere

35:54 - Images

Compression/resize Lazy loading SVG Blur up Next 10 released first revision of Next.js image It?s not as good as Gatbsy-image Must specify width and height, whereas gatsby has fixed and fluid Compression No blur up Yes lazy loading both don?t support gifs Gatbsy requires annoying GraphQL query OR another plugin like MDX to do it Not for long! https://twitter.com/ascorbic/status/1320770231657238529 Next.js is just 
2020-12-09
Link to episode

Hasty Treat - Why should I use React Hooks?

In this Hasty Treat, Scott and Wes talk about React Hooks and why you might want to use them instead of class components.

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:54 - Decouple the UI from the logic

This wasn?t impossible with class-based components, but we started using HOC to do this. With hooks, it makes you decouple what it does and how it looks. Makes things like GraphQL code gen possible Multiple pieces of state or functionality Share commonly used functionality among projects and components

10:31 - Reduction in code

Lifecycle methods were often redundant. useEffect offers a way to prevent the duplication that can happen with component did update and did mount. This gives you a way to say, ?Hey, run this code when these things change.?

13:30 - useEffect?s dependencies

These give you access to targeted control over side effects rather than just something changed.

14:15 - Easier to grok

What happens? When? Where? It?s mostly in the hook.

16:09 - Simplicity in usage

Thing, updateThing is more targeted than set state Ref makes way more sense with useRef String refs weren?t great, the function ref thing was obnoxious

21:07 - Gripes about Hooks

Naming is kind of odd Vue did a better job with the names Links https://github.com/pmndrs/jotai https://github.com/rehooks https://twitter.com/youyuxi/status/1327328144525848577/photo/1 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
2020-12-07
Link to episode

Sickpickisode - 2020 Web Developer Gift Guide

It?s an entire episode of Sick Picks! In this episode of Syntax, Scott and Wes talk about their 2020 developer gift guide!

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.

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:17 - Home + Cooking

Cold Brew Maker 1 Gal - https://amzn.to/3pcKkKM 2 Quart - https://amzn.to/3eIV921 Nordic Ware Half Sheet / Quarter Sheet Pans - https://amzn.to/3pbCWit Precut parchment - https://amzn.to/35dtWld Gaffers Tape - https://amzn.to/3lfH7aG Tineco Pure S12 - https://amzn.to/3kelPsX Instant Read Thermometer - https://amzn.to/3k9VNHf Tea Haus - https://teahaus.com/ Whetstone - https://amzn.to/32nYi2z Re-usable Silicone Mats - https://amzn.to/35dtWld Air Fryer - https://amzn.to/38uX4X1

13:27 - Games

Baba Is You Untitled Goose Game Hades Jackbox Party Pack

17:16 - Tech

Headphones Sony WH1000XM4 - https://amzn.to/2Ube8c8 Bose QC35 - https://amzn.to/3lrKrQp Wyze Noise-Cancelling Headphones - https://wyze.com/wyze-headphones.html USB-C Hub - https://amzn.to/3keljem Black Camo Wicked Cushions - https://amzn.to/3eGQA8q Mech Keyboard - https://www.keychron.com/products/keychron-k3-wireless-mechanical-keyboard?utm_source=navi%20to%20K3&utm_medium=navi%20bar&utm_campaign=navi%20to%20K3 Braided USB Cables Lightning: https://amzn.to/2IkqLiT USB-C: https://amzn.to/3lfrBeX

25:24 - Smart Home

Wyze Cams - https://amzn.to/2UmPINf Light Switches Lutron Dimmer - https://amzn.to/2U7OBk2 Leviton Dimmer: https://amzn.to/3pbzaFZ Google Nest Hub

33:22 - Desk Stuff

Fatigue Mat - https://amzn.to/3eIXXw5 Rollerblade Gang Chair wheels - https://amzn.to/3nbNLPJ MX3 Mouse - https://amzn.to/3lg8SQn Wireless Charger Pad - https://amzn.to/36gIdNj Anker USB charging Hub - https://amzn.to/3n7IGYV

36:43 - Live Streaming / Sick WFH Setups

Elgato Stream Deck - https://amzn.to/35ehXnk Elgato Camlink - https://amzn.to/3kih6Gl Knockoff Camlink - https://amzn.to/3eIX0Ux Husky Adjustable Desk: https://www.homedepot.com/p/Husky-62-in-Adjustable-Height-Work-Bench-Table-HOLT62XDB12/301810799 Neewer Dimmable Bi-Color LED Studio Key - https://amzn.to/32rYAVX RGB LED - https://amzn.to/3kg1LWZ Vivo Pneumatic Mic Arm - https://amzn.to/2Ube8c8

49:07 - Fitness

Concept 2 Rower Powerblocks Cheap bands - https://amzn.to/35cZ1W4 Kettle Bells - https://amzn.to/3eFocnc

51:44 - Clothes

https://www.dvlpr.io/ Naked and Famous Super Guy Jeans https://huckberry.com/ https://shop.lululemon.com/p/men-joggers/Abc-Jogger/_/prod8530240?color=29283 Everlane Uniform Crewneck Levis Denim Shirts: Barstow Western Fjallraven Flannels Links https://www.eufylife.com/ Shameless Plugs Scott: All Courses - 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
2020-12-02
Link to episode

Hasty Treat - Writing Good Commit Messages

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
2020-11-30
Link to episode

Potluck - Frameworks vs Libraries × Debugging × CSS Modules vs Styled Components × Resumes × Stress Management × More!

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.comtenant2.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
2020-11-25
Link to episode

Hasty Treat - Client vs Server Data Validation

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
2020-11-24
Link to episode

How to Run a Conference with Benjamin Dunphy

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
2020-11-18
Link to episode

Hasty Treat - CSS Grid Masonry (Grid Level 3)

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
2020-11-16
Link to episode

300th LIVE SHOW SPECTACULAR!

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
2020-11-11
Link to episode

Hasty Treat - Bundlers in 2020

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 - NpmYarn 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
2020-11-09
Link to episode

Voice Coding is Really Good with Josh Comeau

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
2020-11-04
Link to episode

Hasty Treat - Certifications? Government Specified JavaScript Skills?

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
2020-11-02
Link to episode

Spooky Web Dev Stories ? Part 2

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
2020-10-28
Link to episode

Hasty Treat - Temporal Date Objects in JavaScript

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
2020-10-26
Link to episode

Spooky Web Dev Stories ? Part 1

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
2020-10-21
Link to episode

Hasty Treat - Stretching For Developers with Scott

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
2020-10-19
Link to episode

How to Make Freelancing Easier

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
2020-10-14
Link to episode

Hasty Treat - Updating / Restarting Long-Running Web Apps

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
2020-10-12
Link to episode

Potluck - Is Angular good? × Stencil.js × Self XSS × SVGs in React × Social Platforms for Devs × Project Handoff × Cleaning Knives × More!

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
2020-10-07
Link to episode

Hasty Treat - Enums in JS (GraphQL and Typescript)

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
2020-10-05
Link to episode

Tales from Web Dev Past - Part 2

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
2020-09-30
Link to episode

Hasty Treat - Records and Tuples in JavaScript

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
2020-09-28
Link to episode

Git Fundamentals

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
2020-09-23
Link to episode

Hasty Treat - Our First Bucks Made From Web Dev, Teaching, YouTube and Tutorials

In this Hasty Treat, Scott and Wes talk about their first steps in the word of entrepreneurship and web dev specifically.

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

Wes:

First money: check for $300 First website: Pool company First ad sense income: Craigonomics First YouTube: import large SQL database with bigdump First online Product: Sublime Text - Ryan Christiani First in-person teaching: HackerYou First project at agency: Jet Cooper

Scott:

First dev gig: parents tea store First design gig: Perpetual First YouTube video: Adobe Premier 101 First BIG YouTube video: Sass Tutorials First ad sense income: scotttolinski.com blog post about music promotion sites First online product: Sass Mastery First project at agency: Nu Step Links https://twitter.com/wesbos/status/1276500155789910016 Audiojungle Themeforest Juno College @steveschoger Smashing Mag Css Tricks Packt Publishing 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
2020-09-21
Link to episode

Writing Good CSS

In this episode of Syntax, Scott and Wes talk about writing good CSS.

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

02:11 - Frameworks

Utility: Tailwind, TayconsBulma Frameworks: FoundationBootstrap Classless base starters: https://github.com/dbohdan/classless-css HTML5 UP / A template

13:37 - Preprocessors

Sass Stylus Less Regular CSS Variables Color functions - not yet

19:42 - Tools

PostCSS is like Babel for CSS. Some good plugins: https://github.com/postcss/postcss#plugins CSS min/max for clamp Autoprefixer Autoreset - reset a component Gap instead of grid-gap Simple-vars Postcss-modules SugarSS Preset env

34:19 - Stylint

Stylint More than just a basic linter Capable of complex rules in your CI process - i.e. if you are using a color, make sure it?s a CSS variable

36:37 - Removing unwanted CSS

PurgeCSS - Tailwind uses this PurifyCSS

41:17 - Writing maintainable CSS / scoping solutions

Component-based CSS Modules Naming Convention Based BEM SMACSS CSS Variables Powerful when utilized with things like calc() to avoid out of sync values Know which browsers you need to support Links Syntax 197: Hasty Treat - Tips For Writing Good CSS Compass Susy Grunt Gulp Linaria Astroturf Houdini Svelte Syntax Highlight Dhanish Gajjar - https://www.instagram.com/dhanishgajjar/ ××× SIIIIICK ××× PIIIICKS ××× Scott: Rustlings Wes: Class Action Park Documentary 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
2020-09-16
Link to episode

Hasty Treat - Time Block Planning

In this Hasty Treat, Scott and Wes talk about time block planning ? what it is and how it can help you increase your productivity!

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:50 - What is time block planning

03:12 - How TBP has helped Scott stay focused

04:46 - How it helps family life

05:57 - How to plan your week

11:00 - How to deal with setbacks

Links Cal Newport Todoist Deep Work Deep Questions 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
2020-09-14
Link to episode
A tiny webapp by I'm With Friends.
Updated daily with data from the Apple Podcasts.