A podcast for developers interested in building great software products. Every episode, Adam Wathan is joined by a guest to talk about everything from product design and user experience to unit testing and system administration.
In this episode Adam talks to Ben Orenstein about what you can do to stand out if you’re trying to get a job at a small company.
In this episode Adam talks to DHH about using Hotwire to develop Basecamp's new email service HEY while shipping only 40kb of JavaScript to the client.
In this episode, Adam and Jack talk about all the secret tips you need to know to screencast like a pro. Then they go deep into some of the things Adam is working on for Tailwind CSS 2.0, like the new default config file.
Adam and Jack discuss how it sucks when you're forced to change billing platforms, and embark upon a deep dive on the merits of Adam's favorite solutions. We also talk about Jack's recent Radical Icon launch and promotional strategy regrets, which thankfully has a bit of a silver lining, and in Statamic news – the W3C drops WordPress and narrows their next CMS choice down to Statamic and Craft.
Adam and Jack talk about accessible focus styles, Headless UI, the new Tailwind Labs YouTube channel, Tailwind presets, and the progress on the great Statamic Bug-Fix-a-Thon of 2020. They also kick around what "Tailwind Lite" could be and where it might live, Adam spills the beans on a secret Tailwind project, and they get really excited about ideas they totally plan to do but probably never will happen.
Adam and Jack talk about strategies for keeping up with GitHub issues and coping with customer criticism, and how life is going after the Statamic 3 launch. They also talk about the new features in Tailwind 1.8, and work through some branding problems for the new Headless UI project the Tailwind team is working on.
Adam and Jack talk about how the Statamic 3 launch went, and adding GitHub Sponsor tiers to the Statamic GitHub organization and what to give people in exchange for sponsoring. They also talk about the new Tailwind CSS v1.7 release, and the new features like gradient support. Finally, they work through some ideas Adam is preparing for his Laracon talk on “Building component libraries with Tailwind CSS”.
Jack McDade joins Adam to talk about what he's been up to building up to the Statamic 3.0 launch (it's out now!) and Adam shares a bunch of ideas he's been working on for Tailwind CSS v2.0.
In this episode, Adam talks to Gary Bernhardt about building Execute Program, why he chose to build it as a full-stack TypeScript application, and the implications using TypeScript has on what you need to test.
In this episode, Adam talks to Rich Harris about Svelte, and why we should keep pushing forward with the modern web even if it's not perfect yet.
In this episode, Adam talks to Jason Cohen of WP Engine about hiring people to join the Tailwind team, figuring out what to focus on, and learning how to manage.Topics include:How do you decide what role to hire for?Why it's so important to figure out exactly what your biggest struggle is before hiringHow to decide what the most important thing to focus on is when it feels like there's too much to doWhy it's important to consider the impact of hiring for a specific role on your own happiness vs. just the company's bottom lineComing to terms with the fact that you can't do everything, and why it's important to focus on something instead of spreading yourself thin across everythingMistakes people make when they start managing a team for the first timeLinks:Jason's blog, one of the greatest treasure troves of startup advice on the internetDesigning the Ideal Bootstrapped Business, one of Jason's MicroConf talksSupporting the show:I 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 purchase one of my products:Tailwind UI, a collection of professionally designed, fully responsive HTML components built with Tailwind CSS.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.
In this episode, Adam talks to Jason Fried about growing the Tailwind team and how to best use Basecamp to keep his particular company organized. He also walks through tons of real examples from their recent work on HEY, sharing lots of behind-the-scenes stuff about how Basecamp use Basecamp themselves.Topics include:How did Basecamp evolve from being a team/client communication tool to focusing on keeping your whole company organized, and is it really even that different?How exactly should we set up Basecamp on day one to support a small 3-5 person remote software team? What tools should we use and which ones should we ignore for now?Finding the balance between being organized enough and splitting things up too muchHow big should projects be? Is "HEY v1" a project, or is a project something more like "HEY File Attachments"?What tools do you normally enable for regular projects, and how do you use them?How are you normally using chat at the individual project level?Why todo lists should be created by the individuals doing the work, and not the people assigning the workHow should we use the company HQ project? What are some less obvious ideas we can apply there that can make a big difference?Using a "what we're working on" project to keep everyone on the team in the loop and feeling connectedUsing "heartbeats" to summarize the work a team has been doing over a period of time for the rest of the companyAdvice on bringing on new employees and how to assign them their first projectWhen you're such a writing-driven company, how do you make sure decisions get written down when they are made in real-time instead of naturally occurring within Basecamp?Screenshots:Example of a "what did I work on?" check-inExample of a heartbeatExample of the "What Works" projectExample of an announcement in the HQ projectExample of a conversation on a todoLinks:BasecampShape Up, Basecamp's recent book on how they workGoing Remote: Basecamp Walkthrough, a livestream where Jason and DHH go over their real Basecamp accountSupporting the show:I 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 purchase one of my products:Tailwind UI, a collection of professionally designed, fully responsive HTML components built with Tailwind CSSRefactoring 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.
In this episode, Adam talks to Evan You about Vite, a new dev server and build tool for modern JavaScript projects.Topics include:What is Vite and what makes it different than existing tools like Webpack?How do ES Modules actually work in the browser and what are the limitations?Will we ever be able to use ES Modules in production for large complex projects?How does Vite work under the hood, and how does it support non-JS files like Vue files, or CSS files?How hot module replacement is implemented under the hood in ViteOptimizing modules with many dependencies to keep the development experience fastWhat is VitePress and how does it compare to VuePress?Bundling sites for production with ViteWhat's the roadmap for Vite 1.0?Links:ViteVitePressRollupSupporting the show:I 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 purchase one of my products:Tailwind UI, a collection of professionally designed, fully responsive HTML components built with Tailwind CSSRefactoring 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.
In this episode, Adam is talks to Alex DeBrie about DynamoDB, and how it compares to relational databases like MySQL. Topics include: Does DynamoDB only make sense for things like your cache, or is it a good choice for a primary data store? An overview of the terminology used in DynamoDB and how the terminology compares to a relational database How primary keys work in DynamoDB What data types are available in DynamoDB How DynamoDB is a schemaless database Why it's important to understand your access patterns in advance with DynamoDB, unlike in a relational database Understanding why and how you usually have multiple record types in a single DynamoDB table What "index overloading" is in DynamoDB Understanding partition keys and sort keys How to structure your data in DynamoDB to make it possible to query related data, and how those queries work How secondary indexes work, allowing you to access the same data in different ways How to accommodate access patterns you didn't know about before you designed your schema When to flatten relationships vs. nest them Should you use DynamoDB if you aren't "web-scale"? How local development works with DynamoDB Links: DynamoDB Homepage Alex's blog, loaded with great DynamoDB content The DynamoDB Book, Alex's recent book DynamoDB Guide Supporting the show: I 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 purchase one of my products: Tailwind UI, a collection of professionally designed, fully responsive HTML components built with Tailwind CSS 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.
In this episode, Adam is talks to Tom Preston-Werner about Redwood.js, a new full-stack JavaScript framework for building edge-ready web applications. Topics include: What does it mean for Redwood to be a JAMStack framework? What does the React layer look like? What’s new, and what’s leveraging existing community tools? Why Redwood ships with it’s own routing layer What “cells” are in Redwood, and how they aim to provide a declarative abstraction on top of data fetching How Redwood tries to provide clear decoupling behind the front-end and back-end, even though it is providing a full-stack solution What “services” are in Redwood Using Prisma 2 to fetch data from your database in your services What database solutions exist today that work well with Redwood in a serverless environment? Links: Redwood.js homepage PredictCovid.com, a Redwood app in production Example blog application built with Redwood Prisma Supporting the show: I 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 purchase one of my products: Tailwind UI, a collection of professionally designed, fully responsive HTML components built with Tailwind CSS 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.
In this episode, Adam is talks to Tim Neutkens about what's new in Next.js 9.3 and how it's changing the way applications are built at ZEIT. Topics include: An overview of the new getStaticProps, getStaticPaths, and getServerSideProps APIs How Next.js helps you serve static pages from an edge CDN automatically, without affecting the actual authoring experience Using getStaticPaths to statically pregenerate dynamic routes How the fallback feature of getStaticPaths works and lets you statically render pages on-demand to avoid long build times How the upcoming incremental static generation feature will work in Next.js Deploying Next.js to a platform other than Zeit, and how you retain all of Next’s benefits automatically How getServerSideProps is different from getInitialProps Why getServerSideProps actually improves performance, even though it introduces another hop How getServerSideProps results in smaller bundle sizes vs. getInitialProps Using getServerSideProps to safely talk directly to a database, skipping the need for an API Why Zeit as a company has started to favor client-side data fetching with SWR over getInitialProps/getServerSideProps, and how they are combining that with statically pregenerated “shells” for incredibly fast feeling experiences What’s coming next in future releases Links: Next.js Next.js 9.3 Announcement Incremental Static Generation RFC Next.js Code Elimination Demo SWR, ZEIT's data fetching library Supporting the show: I 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 purchase one of my products: Tailwind UI, a collection of professionally designed, fully responsive HTML components built with Tailwind CSS 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.
In this episode, Adam is joined by Michael Chan to talk about how people who identify as React developers are building real web applications, and why it seems like nobody is talking about databases or background jobs anymore. Topics include: What do people actually mean when they say "I used to use Rails, but now I use React"? Why back-end development is still a crucial part of building any web application What third-party services people are using to try and replace custom back-end code Would you default to building a Rails back-end for a React side project, or is your instinct to try and use third-party services only? How far do you think front-end-first frameworks like Next.js are going to get their hands dirty in the back-end? Are new developers missing out by starting with React and not realizing how important tools like Rails and Laravel are for building complete production-ready applications? Are relational databases legacy tech or are they underappreciated? Links: Ruby on Rails React AWS Amplify Firebase Hasura GraphQL: The Documentary OneGraph Next.js Supporting the show: I 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 purchase one of my products: Tailwind UI, a collection of professionally designed, fully responsive HTML components built with Tailwind CSS 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.
In this episode, Adam is joined by Sam Selikoff to talk about some of the interesting technical challenges he faced building Tailwind UI, and how working on the project has influenced how he will build layouts in the future. Topics include: What Tailwind UI is and why we decided to build it How odd numbers can wreak havoc on a user interface, and how to avoid them Crafting the perfect form control Unexpected benefits of working with CSS Grid Abusing single column grids just to use gap, and why we desperately need gap support in Flexbox Links: Tailwind UI Supporting the show: I 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 purchase one of my products: Tailwind UI, a collection of professionally designed, fully responsive HTML components built with Tailwind CSS 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.
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. Topics include: 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 Links: "Rethinking Design Best Practices", Mark's talk at ReactiveConf 2019 Braid, the design system Mark works on Playroom Supporting the show: I 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.
In this episode, Adam talks to Sam Selikoff about Mirage.js and how to use it to build production-ready front-end applications, even if your back-end API isn't ready yet. Topics What 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 suite How Mirage's internal ORM works, and how it can help you mirror your API's behavior more quickly Managing the risks of maintaining a complex stub of your real API with Mirage and keeping them in sync What's next for Mirage Links Mirage.js Mirage.js on GitHub Supporting the show I 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.
In this episode, Adam talks to Caleb Porzio about his new UI library Alpine.js. 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 internally Patterns for extracting reusable behaviours with Alpine The Alpine roadmap Sponsors: Tuple, try the best pair programming app out there for free for two weeks Links: Alpine.js on GitHub The template tag The with statement Proxy objects
In this episode, Adam talks to Ryan Singer of Basecamp about how they plan, structure, and execute on new features. Topics include: Why "fixed time, variable scope" is so important for actually getting things done Integrating development and design into a single process instead of design first, develop later What it means to "shape" work before deciding to work on it What it means to "bet" on a project, and why Basecamp would rather trash a project than extend the deadline by an extra week Taking deadlines seriously, and how it empowers teams to make their own decisions about scope to avoid having to trash the project An example of a project at Basecamp that failed to ship, and working through what they did wrong that led to that outcome De-risking projects by getting input from technical experts on the team before committing to actually doing the work What 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 project How Basecamp avoids iterating on solutions within a cycle without turning projects into fixed time, fixed scope Why 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 decisions Applying "Shape Up" on client projects Sponsors: Tuple, try the best pair programming app out there for free for two weeks Links: Shape Up: Stop Running in Circles and Ship Work that Matters, Ryan's recent book about how they work at Basecamp
In this episode, Adam talks to David Khourshid about using state machines to build UI components that are simpler and more resilient to bugs. 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 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 Sponsors: Tuple, try the best pair programming app out there for free for two weeks DigitalOcean, get your free $50 credit at do.co/fullstack Links: "No, disabling a button is not app logic.", David's recent article on state machines XState Docs
In this episode, Adam talks to Evan You about all of the changes and improvements coming to Vue.js 3.0. Topics include: What were the first feature/change ideas that got the wheels turning for Vue 3 How Vue's underlying VNode data structure is changing and how that affects users who work directly with render functions How the h function works in Vue 3 and how it helps you write code that's more composable How many breaking changes are just removing deprecations vs. hard breaks and how a compatibility build is going to ease the upgrade process The new template compiler and how it will drastically increase performance What 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 slots A deep-dive into reactive vs. refs in the composition API How the composition API compares to hooks in React How provide/inject is being improved for Vue 3 Sponsors: Cloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for free DigitalOcean, get your free $50 credit at do.co/fullstack Links: Vue 3 source code on GitHub Vue RFCs Vue 3 Composition API
In this episode, Adam talks to Alasdair Monk about how they approach CSS at Heroku, and how using a utility-based approach has kept their team happy for the last three years. Topics include: Why Heroku introduced BEM to try and solve their CSS issues and why it didn't work How custom tooling and Ember's component system alleviated any maintainability concerns about littering the HTML with presentational classes Why Heroku still uses some component classes like "btn" and "input" even though they could encapsulate those in an Ember component Why 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 maintainable How 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 system Why the team at Heroku still loves working with this approach, even 3.5 years after introducing it How a utility-based approach has worked just as well for Heroku's marketing properties as it has for their application UI Pylon, Alasdair's experimental CSS library that provides declarative layout primitives in the form of custom HTML elements Sponsors: DigitalOcean, get your free $50 credit at do.co/fullstack Cloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for free Links: purple3, Heroku's utility CSS library for their product UIs shibori3, Heroku's utility CSS library for their marketing properties Pylon, Alasdair's declarative CSS layout library
In this episode, Adam talks to Jonathan Reinink about Inertia.js, a new framework he recently released that lets you build single page applications with Vue, React, or Svelte, without having to give up the productivity benefits of traditional server-side development workflows using tools like Laravel or Rails. Topics include: What Inertia.js is and what problem it solves Why Inertia is more like a protocol than a framework How navigation works in Inertia How form submissions work in Inertia How Inertia automatically updates your assets for visitors when you update your code Handling flash messages and validation errors work Building applications with persistent layouts Showing placeholder screens with Inertia while data is loading Sponsors: Cloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for free DigitalOcean, get your free $50 credit at do.co/fullstack Links: Inertia.js Inertia.js on GitHub Ping CRM, the canonical Inertia.js demo application Placeholder components in Inertia.js Sponsor Jonathan's work on Inertia on GitHub
In this episode, Adam talks to James Long (creator of Prettier) about building Actual, a local-first Electron application with no central database that syncs data peer-to-peer. 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 applications Diving deep into how messages are replayed across clients when network access becomes available to achieve consistent state Using a Merkle tree to efficiently compare the message store from two clients to know which messages need to be synchronized Considerations you need to make when structuring your data to enable eventual consistency What it might look like to move an app like Actual to an offline-first web app where you can't use things like SQLite Sponsors: DigitalOcean, get your free $50 credit at do.co/fullstack Cloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for free Links: Actual Electron Conflict-free replicated data type (CRDT) Hybrid logical clock Merkle tree
In this episode, Adam talks to Rob Walling about choosing, validating, and marketing a viable software product. Topics include: Brainstorming ideas vs. paying attention to your own problems Why it's smart to start with a product that might never make a million dollars a year Should you avoid markets with competition? Why it's a good idea to build something for fewer people Strategies for figuring out how many people have the problem you're trying to solve Why you should start marketing before you start building When should you start charging money for your product? Why getting 1,000 customers is extremely hard and how that affects your pricing Why you don't need an audience to build a software product Sponsors: Cloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for free DigitalOcean, get your free $50 credit at do.co/fullstack Links: Rob's website Startups for the Rest of Us, Rob's podcast Drip, the last software business Rob built TinySeed, Rob's startup accelerator for bootstrappers MicroConf, 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
In this episode, Adam talks to Leslie Cohn-Wein and Rafael Conde about designing and implementing new UI features at Netlify. Topics include: 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 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 Sponsors: DigitalOcean, get your free $50 credit at do.co/fullstack Cloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for free Links: Netlify Analytics Highcharts Abstract Sketch PostCSS postcss-nested postcss-each
In this episode, Adam gets some advice from Ian Landsman of Userscape on marketing and positioning a new Tailwind CSS components directory project he's working on with Steve Schoger. Topics include: Building website templates vs. a UI kit Should the product be positioned as a UI library or an educational resource? One-time purchase pricing vs. subscription pricing vs. some combination of the two Why marketing features can sometimes be better than marketing benefits "Dribbble but with code" Sponsors: Cloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for free DigitalOcean, get your free $50 credit at do.co/fullstack Links: Tailwind CSS Tweet previewing the Tailwind component directory Article on Sketch pricing model MegaMaker Club Thermostat, the NPS survey software Ian is working on
In this episode, Adam talks to Matt Biilmann CEO of Netlify about building the Netlify dashboard, and what makes it feel so fast. Topics include: Walking through how a single screen in the app is rendered in step-by-step detail How they separate container components and presentational components to make things easier to reason about How the Redux store is organized How they handle caching data on the client and deciding when to bust the cache How the API is designed Why they are sticking with REST instead of Graphql How they handle authentication in their app Sponsors: DigitalOcean, get your free $50 credit at do.co/fullstack Cloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for free Links: Netlify React React Router "Presentational and Container Components" by Dan Abramov Netlify's Storybook Immutable Immer redux-funk Netlify Analytics JAMstack Conf
In this episode, Adam talks to Benedikt Deicke about building Userlist.io, a new email automation product for SaaS businesses that he recently launched with his co-founder Jane Portman. Topics include: The risks and technical challenges of building client-side API integrations and why Benedikt decided to focus on a server-side integration for launch Building Userlist with Ember instead of trendier tools like React How the Ember app authenticates with the Rails API Strategies for keeping email deliverability high for Userlist's customers How Benedikt built Userlist's complex segmentation engine by creating a custom AST structure and compiling it to SQL How the automation and email scheduling system works Sponsors: Cloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for free DigitalOcean, get your free $50 credit at do.co/fullstack Links: Userlist.io Slow and Steady, Benedikt's podcast Prosemirror Ember Ruby on Rails Sidekiq Sparkpost
In this episode, Adam talks to Taylor Otwell about Laravel Vapor, the new serverless platform for Laravel applications that was recently announced at Laracon US. Topics include: What is serverless? What AWS services Vapor manages and how they are billed Using a single RDS instance with multiple databases Understanding cold boots with Lambda and how to minimize the effect they have on your application's performance Performance on Vapor How queues work with Vapor Tuning your queue concurrency based on your database connection limit Strategies for preventing your web instances and queue instances from competing for resources How scheduled tasks work with Vapor How file uploads work with Vapor Limitations when running code on Lambda and strategies for working around them Sponsors: DigitalOcean, get your free $50 credit at do.co/fullstack Cloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for free Links: Laravel Vapor Intro to Laravel Vapor, Taylor's talk at Laracon
In this episode, Adam talks to Ryan Toronto about his journey from being a full stack Rails developer to focusing on single page applications, and why application developers should be betting on UI-focused frameworks like Ember, React, and Vue. Topics include: How modernizing a Flash app drove Ryan to start building SPAs How products are really just user interfaces to the end user, and why that means it makes sense to make the UI the core of your codebase Why the backend will continue to be commoditized and application developers will be spending more and more of their time in the UI What makes something a web app instead of a website, and why almost everything is actually an app Why application developers still need to write server-side code right now and what areas have the biggest room for innovation and improvement Sponsors: Cloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for free DigitalOcean, get your free $50 credit at do.co/fullstack Links: EmberMap, Ryan's tutorial site Mirage.js Client-side SQL GraphQL Hasura GraphQL Engine, an automatic GraphQL API over Postgres Conversation on ugprading API requests Interview with Michelle Bu of Stripe
In this episode, Adam talks to Aaron Gustafson about authoring semantic HTML in the context of web applications, where choosing the right element can be a lot more complicated than it seems. Topics include: Can you have more than one "h1" on page? How important is heading order? Why not everything that looks like a heading should necessarily be a heading Why you may want to include invisible headings in some situations What the document outline is and how your use of headings impacts it How to make your heading levels dynamic to make your components more flexible What a "sectioning context" is Can you have multiple "article" elements on one page? What even is an "article" anyways? How to use elements like "section" and "aside" properly Should navigation items be in lists? Why Aaron can't remember the last time he used a "span" Sponsors: DigitalOcean, get your free $50 credit at do.co/fullstack Cloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for free Links: Aaron's personal website HTML5 Element Flowchart from html5 Doctor
In this episode, Adam talks to Mitchell Hamilton about writing your styles directly in your JavaScript components using the CSS-in-JS library Emotion. Topics include: What CSS-in-JS even is What Emotion does differently than other CSS-in-JS libraries How to actually use Emotion to style your projects How the JSX pragma works and what it's for How Emotion works under the hood Performance Adding global styles to your project Style re-use and composition in Emotion Using Emotion with server-side rendering Sponsors: Cloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for free DigitalOcean, get your free $50 credit at do.co/fullstack Links: Emotion Glam Glamor Glamorous Styled Components JSX pragma CSSStyleSheet.insertRule() Global styles in Emotion Server-side rendering in Emotion
In this episode, Adam talks to Jerod Santo of The Changelog about building their custom podcasting platform using Elixir and Phoenix. Topics include: How pattern matching works in Elixir and why it's more powerful than method overloading in other languages How Elixir's pipe operator makes the transition from OO to functional programming more natural Why you don't need to be intimidated by unfamiliar features like GenServers to use Elixir for web app development Noticeable differences between working with Rails and Phoenix and what it was like to transition How the Phoenix ORM makes n+1 queries impossible Why background tasks are a lot easier in Elixir than in an ecosystem like PHP What other tools and technology power the Changelog platform How the Changelog Phoenix app is deployed Sponsors: DigitalOcean, get your free $50 credit at do.co/fullstack Cloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for free Links: Building rapid UI with utility-first CSS, Adam's episode of JS Party Elixir Phoenix Chris McCord on The Changelog The Changelog source code Confident Ruby "Why we chose Turbolinks" Programming Phoenix book Elixir Forum Our Slack
In this episode, Adam talks to Jason Lengstorf about Gatsby, and why using React and GraphQL to build something even as simple as a blog is not as crazy of an idea as it sounds. Topics include: How Gatsby is more than just a static site generator How you create pages with Gatsby and how it's more powerful than traditional static site generators The benefits of having a unified data access layer for all of your content How to build dynamic applications with Gatsby Why Gatsby is actually faster than static HTML How Gatsby makes performance best practices easy Gatsby themes and why they are more exciting than traditional CMS themes Sponsors: Cloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for free DigitalOcean, get your free $50 credit at do.co/fullstack Links: Gatsby GraphQL gatsby-image Reach Router The PRPL Pattern Jason on Twitch
In this episode, Adam talks to Sebastian De Deyne about learning React from the perspective of a Vue developer, and how to translate all of the Vue features you're already comfortable with to React code. Topics include: How Vue focuses on making things easy at the cost of a more complex API, while React focuses on keeping things simple at the cost of a steeper learning curve How to translate Vue's computed properties to React using the useMemo hook How to translate Vue's watchers to React using the useEffect hook How to translate Vue's v-model to React using value props and event listeners How to translate Vue's events to React using callback props How to translate Vue's slots to React by passing JSX as a normal prop How to handle transitions in React with libraries like Pose Sponsors: DigitalOcean, get your free $100 credit at do.co/fullstack Cloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for free Links: Why I prefer React over Vue, from Sebastian's blog React docs Introducing Hooks at React Conf Hooks docs Vue Template Explorer Pose, animation library for React and Vue Overreacted.io, Dan Abramov's React blog
In this episode, Adam talks to Justin Jackson about growing his new SaaS business Transistor to $10,000 in MRR. Topics include: Why you need more than just a product, and what Justin brings to the table in his partnership with Jon How having an audience helped him get his first customers, even in a crowded market Why you should use every advantage you have to get people in the door, even though the only thing that will make customers stay is a great product with great service "People like us do things like this" vs "scratching your own itch" How their affiliate program has been working surprisingly well for them, and how affiliate programs compare to traditional advertising What Justin's day looks like working on Transistor as the marketing focused side of the partnership How Justin and Jon are paying themselves, inspired by Profit First Sponsors: Cloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for free DigitalOcean, get your free $50 credit at do.co/fullstack Links: Transistor, Justin's podcast hosting business Build your SaaS, Justin's podcast on building Transistor with Jon The Good News Podcast, Cards Against Humanity's podcast hosted on Transistor The Transistor blog Transistor's revenue metrics Rewardful, the affiliate SaaS Justin uses Profit First
In this episode, Adam talks to Guillermo Rauch building and deploying serverless web applications with Now. Topics include: How Now is trying to bring the CDN experience to your server-side code How the constraints of serverless can nudge you to build more robust solutions How to talk to a database in a stateless serverless environment Best practices for deploying serverless code when you have a centralized data store Why routing should be handled at the Now configuration level instead of in application code How Now functions are different from microservices, and how you share code between them How Now bundles your project using builders Creating a monolithic project with Now that uses different programming languages for each endpoint How the upcoming "now dev" feature will enable you to simulate a serverless environment locally A behind-the-scenes look at the Now dashboard, how it's built, and the third-party services that power it Sponsors: DigitalOcean, get your free $50 credit at do.co/fullstack Cloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for free Links: ZEIT Next.js Now.sh Now builders on GitHub Now Monorepo example Wordpress running on Now on now Third-party services for serverless projects: Cosmos DB ScaleGrid Compose DynamoDB Firebase Amazon Aurora Auth0
In this episode, Adam talks to Jeffrey Way about the process of building the brand new Laracasts.com with Tailwind CSS. Topics include: How Jeffrey has written CSS historically, and what drew him to a utility-first approach Incrementally replacing Bulma with Tailwind The importance of solidifying your Tailwind configuration before beginning to implement a design The new Tailwind color system Why choosing a color palette in advance is much better than using preprocessor functions like darken() or lighten() How duplicating your markup is often a better solution than trying to write incredibly crafty responsive CSS How Tailwind helps with performance by letting you keep your CSS cached How to use CSS variables to create multiple themes for the same Tailwind site Sponsors: Rollbar, sign up at https://rollbar.com/fullstackradio and install Rollbar in your app to receive a $100 gift card for Open Collective ImageCon, Cloudinary's upcoming conference for any developer who works with rich media. Get 15% off using the code FULLSTACKRADIO15. Links: Laracasts Tailwind CSS Group Hover in Tailwind Mobile Twitter, responsive app without media queries Theming Tailwind demo on GitHub Easy Tailwind Themes Using CSS Variables, free lesson on Laracasts Laravel, Vue and SPAs, Laracasts series on building an SPA with Tailwind CSS LaraCats.com
In this episode, Adam talks to Caleb Porzio about Livewire, a new library he's working on that lets you build interactive user interfaces using server-side code. Topics include: Pain points you run into when you are working in a JS based UI instead of a server-rendered UI What Livewire is and where the inspiration came from How Livewire lets you build interactive user interfaces with server-side code The challenges of stateful long-running processes in PHP and using stateless AJAX requests as an alternative Walking through a worked example of using Livewire to build an interactive dropdown What's next for Livewire Sponsors: ImageCon, Cloudinary's upcoming conference for any developer who works with rich media. Get 15% off using the code FULLSTACKRADIO15. Rollbar, sign up at https://rollbar.com/fullstackradio and install Rollbar in your app to receive a $100 gift card for Open Collective Links: Full Stack Radio T-Shirt + Sticker Pack Pre-orders Caleb's blog, loaded with great Livewire content No Plans to Merge, Caleb's podcast Sharing Data in a Laravel/Vue Application on the Zaengle blog Embrace the Backend, Caleb's talk at Laracon 2018 Phoenix LiveView unveiling at ElixirConf 2018 morphdom Sign up for Livewire updates
In this episode, Adam talks to Jonathan Reinink about a new approach he has been using to build Laravel and Vue.js apps that lets him match the UI fidelity of an SPA, without abandoning server-side routing or data fetching. Topics include: Why the UI fidelity threshold for building an SPA feels so low How forcing yourself to prepare data for Vue helps avoid putting too much logic into your templates Why it's still worth building your app as a traditional server-based web app, even if you are using Vue for your entire UI Performance and complexity benefits of being able to prepare data for the view in a controller instead of having to build an API Strategies for dealing with things like accessing routes, checking authorization rules, and other things you'd normally do in a Blade template Switching from a template-inheritance mindset to a component mindset Sponsors: Rollbar, sign up at https://rollbar.com/fullstackradio and install Rollbar in your app to receive a $100 gift card for Open Collective Cloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for free Links: Laravel Vue.js Server-side apps with client-side rendering, from Jonathan's blog Example project Ziggy, package for accessing your Laravel routes on the client
In this episode, Adam continues his discussion with Sam Selikoff about building single page applications, this time focusing on strategies for keeping your API layer as simple as possible, so all of your complexity lives in your client-side codebase instead of being spread across both. Topics include: Building an API without writing any controller code Thinking of your API like a database as much as possible Modeling everything on the server as a resource, including things like S3 upload signatures Using tools like Firebase to avoid writing an API entirely Sponsors: Rollbar, sign up at https://rollbar.com/fullstackradio and install Rollbar in your app to receive a $100 gift card for Open Collective Cloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for free Links: EmberMap, Sam's Ember.js training site JSON:API, the API spec Sam uses to build his SPA backends JSONAPI::Resources, the Rails gem for declaratively building a JSON:API compliant API Firebase Vuex Apollo GraphQL
In this episode, Adam talks to Sam Selikoff about single page application architecture, and why you should think of client-side applications like desktop applications. Topics include: Why you should think of SPAs as desktop apps instead of web apps Strategies for pushing complexity out of your backend and on to the client Building optimistic UIs Best practices for storing and retrieving data Why you should design your SPAs with an "offline-first" mindset Sponsors: Cloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for free Rollbar, sign up at https://rollbar.com/fullstackradio and install Rollbar in your app to receive a $100 gift card for Open Collective Links: EmberMap, Sam's Ember.js training site Cruddy by Design, Adam's talk on modeling with resources Progressive Enhacement is Dead, Long Live Progressive Enhancement, a talk from Tom Dale that talks about building offline-first web applications Ember Data JSON:API Ember-Orbit
In the spirit of the new year, Adam and Ben Orenstein talk about getting in shape through strength training. Topics include: What exercises you should focus on and why How to develop a system that will force you to make progress The importance of keeping a training journal Why full-body workouts are better than training a specific muscle group each day The importance of mobility for both training and your work life Why building strength is so important as you age Why you shouldn't trust trainers trying to sell complex exercise programs Why you probably shouldn't be running for exercise What equipment you need to get started Sponsors: Rollbar, sign up at https://rollbar.com/fullstackradio and install Rollbar in your app to receive a $100 gift card for Open Collective Cloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for free Links: Starting Strength by Mark Rippetoe 5/3/1 by Jim Wendler Deskbound by Kelly Starrett Atomic Habits by James Clear Strong app for iOS "Why You Should Not Be Running" by Mark Rippetoe The MobilityWOD BattleStar Rogue Fitness Adam's last powerlifting competition on YouTube Habits for Hackers, Ben's latest course
In this episode, Adam talks to Jonathan Reinink about strategies for off-loading resource intensive work from your application code and into your database. Topics include: Issues you run into when you do too much work in code instead of in the database Why memory usage is just as important as query count How being smarter with your database usage can let you avoid hard problems like cache invalidation Denormalizing computable data to make it queryable Using "where not exists" strategically to improve query performance Why the solution to n+1 problems isn't always as simple as eager-loading How subqueries work and how you can use them to avoid memory problems when eager-loading Sponsors: Oh Dear!, sign up with the coupon code "FULLSTACKRADIO" to get 50% off your first month Rollbar, sign up at https://rollbar.com/fullstackradio and install Rollbar in your app to receive a $100 gift card for Open Collective Links: Refactoring UI "Dynamic relationships in Laravel using subqueries" on Jonathan's blog Source code for Jonathan's Laracon Online talk The benefits of NOT EXISTS on StackOverflow Advanced Eloquent, Jonathan's Laravel package
In this episode, Adam and Steve Schoger answer listener questions about UI design, and share all of the details about their upcoming book and design resource Refactoring UI. Questions include: What's your process for getting started on a new design? How do you make your designs feel original? How do you choose fonts for a new project? How do you make complex tables look good, and how do you make them work on mobile? What's the best way to style multiple secondary actions on a page? Refactoring UI topics include: Structuring the book to make it easy to read in a short amount of time An overview of the sections and chapters in the book What's covered in the screencasts How the included color palettes are designed and why they are more useful than the color palettes you're used to generating online What the font recommendation guide includes and how it's organized Details about the included icon set What's inside the component gallery, and how it's meant to be used The release date!
In this episode Adam talks to Paul Jarvis about defining your own version of success and why you might not need to build a big business to achieve it. Topics include: Why "success" shouldn't mean the same thing to everyone How to stay small without doing all the work you don't want to do yourself Why it's important to define what "enough" is for your business instead of always feeling the need to do better than you did last year Questions to ask yourself to figure out what "success" would be for you How knowing your "enough" can help you build better products for the people you want to serve Why you should ignore the people who don't like what you're doing and double down on the people who love it Sponsors: Oh Dear!, sign up with the coupon code "FULLSTACKRADIO" to get 50% off your first month Rollbar, sign up at https://rollbar.com/fullstackradio and install Rollbar in your app to receive a $100 gift card for Open Collective Links: Paul's website Company of One, Paul's upcoming book "Enough already", from Paul's blog "1,000 True Fans", by Kevin Kelly "Find your rat people", from Paul's blog "Sean D'Souza doesn't want to grow his company!"