debugging tools

Scott and Wes serve up top tools and tricks for rapid idea execution, from JavaScript services like Valtown and Observable to database solutions including LowDB and Google Sheets integration. Get ready to streamline your development ideation process with these tasty insights!

Show Notes

• 00:00 Welcome to Syntax!
• 02:16 Brought to you by Sentry.io.
• 03:14 JavaScript Services.
  • 03:43 Valtown.
  • 05:44 Observable.
  • 06:35 Notebooks.
  • 08:23 Deno Juypter Notebooks.
  • 09:51 Svelte Repl.
  • 10:32 Playgrounds: TypeScript, Tailwind, etc…
• 11:05 CSS Services.
  • 11:10 CodePen.
• 13:14 Full stack services.
• 13:47 Your own stack. Hot Tips & Cool Treats.
  • Wes’s Hot Tips.
  • Scott’s Cool Treats.
  • 21:01 Bun file routing.
  • 24:25 Tooling and tips.
• 26:30 Database.
  • 26:51 Write to a file.
  • 27:40 LowDB.
  • 29:00 SQLite + Drizzle.
  • 29:40 Google Sheets.
  • 30:06 Sheet DB.

Hit us up on Socials!

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott:X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

In this Hasty Treat, Scott and Wes talk about new CSS selectors :has, :where, and :is.

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.

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:25 Welcome
• 01:19 Sponsor: MagicBell
• 02:31 Sponsor: LogRocket
• 03:40 Don’t say stupid
• 05:03 :Has
• MDN :Has

 // Finds all p tags that have an anchor tag as a child p:has(a) {} // Can find children of parent as well // Finds the button of a paragraph that contains an a tag  p:has(a) button {} // Finds all p tags that don't have an anchor tag as a child p:not(:has(a)) {} // Finds all p tags where a is a direct sibling p:has(> a) {} // would find 
Hi
 // would not find 
hi
  

• 06:13 Jargon check
• 11:01 Some examples
• 13:25 Nest navigations
• 13:51 Can I use it?
• 15:52 Is and Where
• MDN :where

In the past we would write

 header p:hover, main p:hover, footer p:hover {   color: red;   cursor: pointer; }  

:where is essentially a short had for making this easier considering the 2nd half of these selectors is the same. Will make your css dryer

 :where(header, main, footer) p:hover {}  

Also super handy in avoiding css blocks being ignored for unsupported features.

 // Doesn't work div:has(p), div:some_new_selector(p)  // Will still work for :has if has is supported :where(div:has(p), div:some_new_selector(p))  

• When to use :Where

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 why people hate CSS, some common issues, and how you can level up.

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:20 - Layout is hard

• block vs inline vs inline-block
  • Learn what this means!
• Flexbox
  • https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• Grid
• Avoid floats
• Wes’ Flexbox Course
• Wes’ CSS Grid Course
• Scott’s Modern CSS Layouts Course

07:43 - I can’t get my thing to get the right style

• Use a scoping system like BEM, CSS in JS, CSS Modules
• Don’t style via IDs
• Avoid !important

11:00 - My thing isn’t looking the way it’s coded

• Dev tools
• Write CSS in the browser
• Check class names

12:11 - I don’t know if I can delete this CSS

• Use tools like https://purgecss.com/
• http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

15:51 - Look at things holistically

Tweet us your tasty treats!

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

In this episode of Syntax, Scott and Wes talk about state in React: local state, global state, UI state, data state, caching, API data 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

3:38 - What is state?

4:58 - What kind of things are kept in state?

• Data
  • Temporary client side data
    • From forms, button clicks, etc.
  • Cached server data
  • Data from API
• UI status
  • AKA isModalOpen
  • isToggled

12:48 - Global state vs. Local state

• Ask yourself: does the data need to be accessed outside this component?
  • If data does need to be accessed a little higher, you can simply move where that state lives. React calls this “lifting state”.
• Do you count Apollo API calls as global state?

21:15 - Managing Local state

• useState, setState
• Passing state & update functions down
• State machines

31:12 - Approaches to Global state

• Redux

  • Complicated, hard to learn
  • Very useful, organized and structured
  • Actions, reducers and more
  • Time traveling do to nature of store
  • Immutability
  • Tons of Redux based hooks libs

• Mobx

  • Based on Observables
    • An Observable is like a Stream and allows to pass zero or more events where the callback is called for each event. Often Observable is preferred over Promise because it provides the features of Promise and more.

• Context

  • Functions just work and update global state.
  • Downside is there are no fancy tools

• Apollo

  • Apollo quires for data in global cache
  • Apollo client for global UI state
    • Not quite there, isn’t super elegant

Links

• Thinkso
• Learn Node!
• Meteor Session
• xstate-react
• React Context
• Mobx
• easy-peasy
• hype.codes
• providerCompose.js
• Relay
• React Podcast

××× SIIIIICK ××× PIIIICKS ×××

• Scott: Command Line Heroes
• Wes: MASSDROP CTRL MECHANICAL KEYBOARD

Shameless Plugs

• Scott: LevelUpTutorials - Gatsby Ecommerce — Subscribe before price goes up!
• 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