Full Stack Radio

TopicsWhat is Mirage and how does it work?What makes Mirage better than a dummy JSON server you run on another port?What makes Mirage better than running your actual API locally?Using Mirage for actual development, and not just for your test suiteHow Mirage's internal ORM works, and how it can help you mirror your API's behavior more quicklyManaging the risks of maintaining a complex stub of your real API with Mirage and keeping them in syncWhat's next for MirageLinksMirage.jsMirage.js on GitHubSupporting the showI decided to stop taking sponsors for the show because I think advertisements are annoying and no one wants to listen to them.If you do want to support the show, the best way to do it is to pick up one of my books or courses:Refactoring UI, a book and video series I put together with Steve Schoger on designing beautiful user interfaces, without relying on a designer.Advanced Vue Component Design, a course on designing simpler, more flexible Vue components that are both more powerful and easier to maintain.Test-Driven Laravel, a massive video course on designing robust Laravel applications with TDD. Learn how to build a real-world application from scratch without writing a single line of untested code.Refactoring to Collections, a book and video course that teaches you how to apply functional programming principles to break down ugly, complex code into simple transformations — free of loops, complex conditionals, and temporary variables.

Topics include:What is Alpine and what does it replace?How does Alpine compare to Vue?How does Alpine compare to Stimulus?“Why not just use vanilla JavaScript you dummy?”How Alpine works internallyPatterns for extracting reusable behaviours with AlpineThe Alpine roadmapSponsors:Tuple, try the best pair programming app out there for free for two weeksLinks:Alpine.js on GitHubThe template tagThe with statementProxy objects

Topics include:Why "fixed time, variable scope" is so important for actually getting things doneIntegrating development and design into a single process instead of design first, develop laterWhat it means to "shape" work before deciding to work on itWhat it means to "bet" on a project, and why Basecamp would rather trash a project than extend the deadline by an extra weekTaking deadlines seriously, and how it empowers teams to make their own decisions about scope to avoid having to trash the projectAn example of a project at Basecamp that failed to ship, and working through what they did wrong that led to that outcomeDe-risking projects by getting input from technical experts on the team before committing to actually doing the workWhat exactly is the deliverable a design/development team receives from leadership at the start of a project that they are expected to be able to succeed with?The difference between macro planning and micro planning on a projectHow Basecamp avoids iterating on solutions within a cycle without turning projects into fixed time, fixed scopeWhy designers at Basecamp start by actually building the very rough "Times New Roman" version of a UI with HTML and CSS before spending time on high fidelity visual design decisionsApplying "Shape Up" on client projectsSponsors:Tuple, try the best pair programming app out there for free for two weeksLinks:Shape Up: Stop Running in Circles and Ship Work that Matters, Ryan's recent book about how they work at Basecamp

Topics include:What exactly is a finite state machine?Why trying to keep track of a component's status using boolean flags is leads to bugs and complex codeWhy it makes so much more sense to keep track of a component's state using some sort of labelHow 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-engineeringHow 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 stateWhat events might look like in your state machine and where you're actually sending them from and toAdvice for naming your eventsWhat it means to "transition" between statesHow using a state machine makes it easy to provide slightly different behavior for the same action based on the current stateThe benefits of visualizing your state machinesUsing the XState library to build state machines in JavaScriptSponsors:Tuple, try the best pair programming app out there for free for two weeksDigitalOcean, get your free $50 credit at do.co/fullstackLinks:"No, disabling a button is not app logic.", David's recent article on state machinesXState Docs

Topics include:What were the first feature/change ideas that got the wheels turning for Vue 3How Vue's underlying VNode data structure is changing and how that affects users who work directly with render functionsHow the h function works in Vue 3 and how it helps you write code that's more composableHow many breaking changes are just removing deprecations vs. hard breaks and how a compatibility build is going to ease the upgrade processThe new template compiler and how it will drastically increase performanceWhat were the goals of the class-based component API and why was it cancelled?The new composition API and how it will help you write more reusable logic without the downsides of mixins or scoped slotsA deep-dive into reactive vs. refs in the composition APIHow the composition API compares to hooks in ReactHow provide/inject is being improved for Vue 3Sponsors:Cloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for freeDigitalOcean, get your free $50 credit at do.co/fullstackLinks:Vue 3 source code on GitHubVue RFCsVue 3 Composition API

Topics include:Why Heroku introduced BEM to try and solve their CSS issues and why it didn't workHow custom tooling and Ember's component system alleviated any maintainability concerns about littering the HTML with presentational classesWhy Heroku still uses some component classes like "btn" and "input" even though they could encapsulate those in an Ember componentWhy simply introducing any sort of rigid CSS architecture wasn't enough and why switching to a utility CSS approach specifically was critical to making UI development at Heroku more maintainableHow with a non-utility CSS approach, every new feature always seemed to require writing new CSS, no matter how many "reusable" components existed in the systemWhy the team at Heroku still loves working with this approach, even 3.5 years after introducing itHow a utility-based approach has worked just as well for Heroku's marketing properties as it has for their application UIPylon, Alasdair's experimental CSS library that provides declarative layout primitives in the form of custom HTML elementsSponsors:DigitalOcean, get your free $50 credit at do.co/fullstackCloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for freeLinks:purple3, Heroku's utility CSS library for their product UIsshibori3, Heroku's utility CSS library for their marketing propertiesPylon, Alasdair's declarative CSS layout library

Topics include:What Inertia.js is and what problem it solvesWhy Inertia is more like a protocol than a frameworkHow navigation works in InertiaHow form submissions work in InertiaHow Inertia automatically updates your assets for visitors when you update your codeHandling flash messages and validation errors workBuilding applications with persistent layoutsShowing placeholder screens with Inertia while data is loadingSponsors:Cloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for freeDigitalOcean, get your free $50 credit at do.co/fullstackLinks:Inertia.jsInertia.js on GitHubPing CRM, the canonical Inertia.js demo applicationPlaceholder components in Inertia.jsSponsor Jonathan's work on Inertia on GitHub

Topics include:How do you keep data synchronized between two different clients when all of the data is stored locally instead of in the cloud?Understanding conflict-free replicated data types and how they help when building distributed applicationsDiving deep into how messages are replayed across clients when network access becomes available to achieve consistent stateUsing a Merkle tree to efficiently compare the message store from two clients to know which messages need to be synchronizedConsiderations you need to make when structuring your data to enable eventual consistencyWhat it might look like to move an app like Actual to an offline-first web app where you can't use things like SQLiteSponsors:DigitalOcean, get your free $50 credit at do.co/fullstackCloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for freeLinks:ActualElectronConflict-free replicated data type (CRDT)Hybrid logical clockMerkle tree

Topics include:Brainstorming ideas vs. paying attention to your own problemsWhy it's smart to start with a product that might never make a million dollars a yearShould you avoid markets with competition?Why it's a good idea to build something for fewer peopleStrategies for figuring out how many people have the problem you're trying to solveWhy you should start marketing before you start buildingWhen should you start charging money for your product?Why getting 1,000 customers is extremely hard and how that affects your pricingWhy you don't need an audience to build a software productSponsors:Cloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for freeDigitalOcean, get your free $50 credit at do.co/fullstackLinks:Rob's websiteStartups for the Rest of Us, Rob's podcastDrip, the last software business Rob builtTinySeed, Rob's startup accelerator for bootstrappersMicroConf, the conference Rob organizes"The Stairstep Approach to Bootstrapping""Why You Should Start Marketing the Day You Start Coding""Traction" by Gabriel Weinberg"SaaS Marketing Essentials" by Ryan Battles"Start Small, Stay Small", Rob's book

Topics include:Creating pixel-perfect mockups in advance vs. designing and implementing in tandemWorking with existing JS libraries for interactive UI features vs. hand-rolling a custom implementation from scratchHow design systems play into the design process at Netlify, and how mockups aren't meant to implemented pixel-for-pixelWhat tools Netlify uses to design new features and manage the design processWhat technologies Netlify uses to keep their UI consistentUsing modern CSS features like CSS gridSponsors:DigitalOcean, get your free $50 credit at do.co/fullstackCloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for freeLinks:Netlify AnalyticsHighchartsAbstractSketchPostCSSpostcss-nestedpostcss-each