Podcast log - June 2021

TOP Full Stack Radio: Ep. 130: David Khourshid - Building Better UI Components with State Machines

In this episode, Adam talks to David Khourshid about using state machines to build UI components that are simpler and more resilient to bugs.

• What exactly is a finite state machine?
• Why trying to keep track of a component's status using boolean flags leads to bugs and complex code
• Why it makes so much more sense to keep track of a component's state using some sort of label
• How simple it can actually be to implement UI component logic with a state machine and why you shouldn't think of it as complex or over-engineering
• How you can think of using state machines in UI programming to be like an inversion of the typical approach you may have taken in the past, where actions become scoped to certain states instead of actions needing to inspect the current state
• What events might look like in your state machine and where you're actually sending them from and to
• Advice for naming your events
• What it means to "transition" between states
• How using a state machine makes it easy to provide slightly different behavior for the same action based on the current state
• The benefits of visualizing your state machines
• Using the XState library to build state machines in JavaScript

TOP Full Stack Radio: Ep. 134: Mark Dalgleish - You Should Be Using Layout Components

In this episode, Adam talks to Mark Dalgleish about common mistakes people make in their approach to constructing layouts, and how dedicated layout components can make your component system much easier to work with.

• What problems you run into when baking white space into components, and why your components should never contain any surrounding white space at all
• Layout challenges you run into due to the way the browser includes line-height in the size of text elements
• The trick Mark's team uses to remove surrounding white space from text elements, without removing the space between wrapping lines
• Using a "stack" component to specify the space between sibling elements
• Issues with naively just using margin on one side of an element to space elements
• The upcoming "gap" property in CSS and how it proves layout components are a good idea
• Using a "content block" component for horizontal spacing/sizing at the page level
• Tricks for maintaining vertical rhythm despite 1px borders trying to ruin it all for you
• Why tools like React are so important for being able to implement designs in a way that matches how designers think

Startups For the Rest of Us: Ep. 544: Annual Raises, Finding Good Startup People, and More Listener Questions with Josh Pigford

Rob Walling and Josh Pigford answer listener questions on topics such as annual pay increases, B2B SaaS price adjustments, white-label versus branded products, and hiring startup-minded individuals.

• Approaches to implementing annual raises within a startup
• Communicating price increases to customers effectively
• Evaluating the pros and cons of offering white-label products
• Strategies for attracting and hiring individuals suited for startup environments

Startups For the Rest of Us: Ep. 548: The Grind of Building a SaaS During Nights & Weekends

In this episode, Rob Walling discusses the challenges and strategies of building a SaaS product while managing a full-time job and personal commitments.

• Time management techniques for balancing work, side projects, and personal life
• Setting realistic goals and expectations for side projects
• The importance of self-care to prevent burnout
• Real-life examples of successful entrepreneurs who started their businesses as side projects

Full Stack Radio: Ep. 124: Leslie Cohn-Wein & Rafael Conde - Designing the User Interface at Netlify

In this episode, Adam talks to Leslie Cohn-Wein and Rafael Conde about designing and implementing new UI features at Netlify.

• Creating pixel-perfect mockups in advance vs. designing and implementing in tandem
• Working with existing JS libraries for interactive UI features vs. hand-rolling a custom implementation from scratch
• How design systems play into the design process at Netlify, and how mockups aren't meant to be implemented pixel-for-pixel
• What tools Netlify uses to design new features and manage the design process
• What technologies Netlify uses to keep their UI consistent
• Using modern CSS features like CSS grid