error tracking

Wes and Scott talk through server components, the difference between server components and client components, reasons to run something server side, how server components work, using forms and buttons, what they like and don’t like about it, and tips to learn more.

Show Notes

• 00:10 Welcome
• 00:52 Syntax Brought to you by Sentry
• 01:39 New Heights with Scott and Wes
• 04:33 What are React Server Components?
• 10:52 The difference between server components and client components
• Tweet: "React Server + Client Components Visualized There is a bit of a learning curve to learn new patterns, but the ease of going between client and server will be worth it.
• 11:37 Why would you want to run something server side?
• 15:22 Components are server rendered by default
• 16:40 What is JS sprinkles?
• 17:29 How do server components work?
• 18:51 Moving an existing site to React server components take a while
• 20:27 The rules
• 27:12 Form Actions + Server Actions
• 32:07 Buttons can have actions
• 36:32 React Suspense
• 39:13 What we like
• Ryan Florence thread
• 41:54 What we don’t like
• 47:13 Design patterns
• 47:35 Other things
• RSC Devtools
• Introducing Waku
• Mux
• 49:22 Sick Picks

Sick Picks

• Scott: ASUS ZenDrive V1M External DVD Drive
• Wes: Leatherman Arc

Shameless Plugs

• Scott: Syntax YouTube
• Wes: Wes Bos Courses

Hit us up on Socials!

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

In this Hasty Treat, Scott and Wes explain what the jargon you hear in JavaScript means.

Sentry - Sponsor

If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at freshbooks.com/syntax

Show Notes

• 00:25 Welcome
• 01:06 Sponsor: Sentry
• 01:59 Sponsor: Freshbooks
• 02:27 What does that even mean?
• 02:55 Everything in JavaScript is an Object!
• 04:43 X is just Syntactic Sugar
• 09:00 Functions are first class citizens
• 10:04 Object Literals or Template Literals
• 11:12 Declarative vs Imperative

Tweet us your tasty treats

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes talk about the coupon engines they’ve built and use on their courses.

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

• 00:26 Welcome
• 01:12 Sponsor: Prismic
• 02:32 Sponsor: LogRocket
• 04:06 What we use for coupons
• Stripe
• Braintree
• 06:27 Structure of our coupons
• 10:43 Products and carts
• 13:59 Country validation
• 15:11 Affiliate codes
• 16:36 Chaining rules together
• 19:41 Tracking coupons
• 20:54 Automatically applied coupons
• 22:12 Quick tips for coupons

Tweet us your tasty treats

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes talk about their tips and tricks for being consistent if you’re trying to create.

Sentry - Sponsor

If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

MagicBell - Sponsor

MagicBell is the The notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months.

Show Notes

• 00:44 String cheese theory
• 01:49 Sponsor: Sentry
• 03:41 Sponsor: MagicBell
• 05:26 Being consistent is the key to success
• 07:12 Commit to it
• 09:13 Plan and schedule
• 13:42 Being accountable to someone
• 18:11 Break things down into smaller tasks
• 20:25 Measure goals
• 22:14 Revise the plan

Tweet us your tasty treats

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes talk about CSRF (Cross Site Request Forgery)!

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.

Sentry - Sponsor

If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

Show Notes

05:40 - What is it?

• https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html#samesite-cookie-attribute
• Someone can submit a form FROM or TO your domain, automatically.

07:50 - Solutions

• SameSite Cookie
• https://medium.com/swlh/secure-httponly-samesite-http-cookies-attributes-and-set-cookie-explained-fc3c753dfeb6
  • Lax — Default value in modern browsers. Cookies are allowed to be sent with top-level navigations and will be sent along with GET requests initiated by a third party website. The cookie is withheld on cross-site subrequests, such as calls to load images or frames, but is sent when a user navigates to the URL from an external site, such as by following a link.
  • Strict — As the name suggests, this is the option in which the Same-Site rule is applied strictly. Cookies will only be sent in a first-party context and not be sent along with requests initiated by third party websites. The browser sends the cookie only for same-site requests (that is, requests originating from the same site that set the cookie). If the request originated from a different URL than the current one, no cookies with the SameSite=Strict attribute are sent.
  • None — Cookies will be sent in all contexts, i.e sending cross-origin is allowed. The browser sends the cookie with both cross-site and same-site requests.
• CSRF Token
• Check Origin / Referrer Headers
• Captcha
• Ask for Password
• Token

Tweet us your tasty treats!

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes talk about technical debt — what it is, why does it occur, and some techniques for reducing and avoiding it.

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.

Sentry - Sponsor

If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

Show Notes

03:17 - What is technical debt

• Outdated or hard to update code
• If you groan when you have to work on it, it might be a sign of technical debt
• Brittle code, easily breakable
• Quirks and features

06:55 - Why does it occur

• Over time, any garden left un-pruned will become overgrown
• Many people, many code styles
• Using hot new frameworks / techniques
  • This is why seasoned developers don’t jump on new things
• You allow users to do literally anything

13:18 - Techniques for avoiding it

• Deny your FOMO of new things
• Abstract
• Write good tests
• Don’t put off refactors
• Update dependencies frequently
• Good standards
  • Etsy has thousands of devs

20:08 - Examples in the real world

• Airline websites open in new windows all the time
• Cellphone carrier flashes the screen 100x

22:15 - Unfixable technical debt

• Agency work sometimes

Links

• Next
• React Router
• TailwindCSS
• Redux
• Etsy
• Dave Ramsey

Tweet us your tasty treats!

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes talk about 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

In this Hasty Treat, Scott and Wes are back with another edition of Stump’d! where they try to stump each other with interview questions.

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

3:54 - What is the difference between NULL and undefined?

5:40 - What is short circuit evaluation in JS?

7:25 - What is use strict?

9:07 - What is the only value not equal to itself in JS?

10:36 - When would you create a static class member?

11:54 - What is a pure function?

13:08 - What is JSONP?

14:24 - Describe the layout of the CSS box model?

Tweet us your tasty treats!

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes talk about portfolios - best practices, organization, and how to use what people are looking for to stand out in the right ways.

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

3:21 - Include screenshots (or don’t). Often clients can ruin a site after you hand it off.

6:19 - Include list of technologies used

7:25 - Include list of problems solved

7:48 - Use company logos (if allowed)

9:13 - Show mockups on modern laptops/phones

10:04 - Show your work (mockups, sketches, layouts, etc.)

11:39 - Keep it updated

12:10 - You don’t need a million examples — max out somewhere around five. People just need a few quick examples of the type of stuff you work on.

14:11 - What about using side projects and tutorials?

16:28 - Dribbble, Github and Instagram are all valid portfolio options as well — often that is the first place people look. Don’t ignore these.

• A hot stuff profile on any of these will make you more hireable. Make sure it’s creative and looks nice.

Links

• Wordpress
• Google
• Ford
• Air Canada
• Dribbble
• Github
• Instagram

Tweet us your tasty treats!

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes talk about communication — why it’s important, how to improve, building good habits, tools 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”.

Show Notes

3:59 - Why it’s important

• Projects can live or die by the team’s communication
• Project timelines can be disrupted leading to big problems with scheduling

5:53 - How to improve communication skills

• PRACTICE
• Pay attention to what works
• Have a system – standups, weekly meetings, etc.
• Over communicating can be annoying but effective
• Realize that people can’t read your mind, so having your intentions and timelines public and known is important

9:12 - Building good habits

• Need to practice
• Build systems to support new habits

11:04 - Tools we use to communicate

• Email / Standups
• Notion
• GitHub Issues
• Slack
• Missive

Links

• Syntax 075: Hasty Treat - Feedback and Criticism

Tweet us your tasty treats!

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes dive into documentation - how to avoid common pitfalls and overwhelm, as well as how to read, understand and get the most out of documentation.

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

5:10 - What are the different kinds of documentation?

• Tutorials

• Docs

• API references

• Video docs

• Examples of good documentation

  • Stripe
  • Next.js Examples
  • New PayPal Docs
  • Gatsby
  • Jest
  • Meteor

14:34 - How to read documentation

• Understanding how you learn will save you lots of time

16:03 - Understanding Parameters

• Parameter types
• Required / Optional
• Parameter order

22:45 - How do you tackle learning something new?

• Look at some examples
• Scan the entire docs to get an idea of the surface area
• Have something specific in mind that you want to build

27:34 - What to do when the docs suck?

• Look at other people’s code
• Chat rooms
• Tests for examples
• Read the source code
• Github search
• Contribute

Tweet us your tasty treats!

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets

In this Hasty Treat, Scott and Wes try to stump each other with interview questions from 30 Seconds of Interviews.

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

4:33

• What is the difference between the postfix (i++) and prefix (++i) increment operators?

7:15

• What’s the difference between a static method and an instance method?

9:25

• What is a focus ring? What is the correct solution to handle them?

11:20

• How does hoisting work in JavaScript?
• Syntax 017 - 22 Buzz Words Explained — Mutations, Pure Functions , Serverless, Hoisting, MVC + More

12:47

• What are the advantages of using CSS preprocessors?

14:29

• What is memoization?

15:48

• Describe the different ways to create an object. When should certain ways be preferred over others?

19:15

• What is event delegation and why is it useful? Can you show an example of how to use it?

22:06

• How do you compare two objects in JavaScript?

26:00

• Can you describe how CSS specificity works?

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