Full Stack Radio

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 timeAn overview of the sections and chapters in the bookWhat's covered in the screencastsHow the included color palettes are designed and why they are more useful than the color palettes you're used to generating onlineWhat the font recommendation guide includes and how it's organizedDetails about the included icon setWhat's inside the component gallery, and how it's meant to be usedThe release date! 🎉Sponsors:Rollbar, sign up at rollbar.com/fullstackradio and install Rollbar in your app to receive a $100 gift card for Open CollectiveOh Dear!, sign up with the coupon code "FULLSTACKRADIO" to get 50% off your first monthLinks:Refactoring UI🔥 Design TipsFonts In Use"Getting Real" by Basecamp, our inspiration for structuring the bookRefactoring UI on YouTubePreview of the Refactoring UI icon setPreview of the Refactoring UI color palettesPreview of the Refactoring UI component gallery

Topics include:Why "success" shouldn't mean the same thing to everyoneHow to stay small without doing all the work you don't want to do yourselfWhy it's important to define what "enough" is for your business instead of always feeling the need to do better than you did last yearQuestions to ask yourself to figure out what "success" would be for youHow knowing your "enough" can help you build better products for the people you want to serveWhy you should ignore the people who don't like what you're doing and double down on the people who love itSponsors:Oh Dear!, sign up with the coupon code "FULLSTACKRADIO" to get 50% off your first monthRollbar, sign up at https://rollbar.com/fullstackradio and install Rollbar in your app to receive a $100 gift card for Open CollectiveLinks:Paul's websiteCompany 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!"

Topics include:Why deadlines are criticalUsing manual processes to avoid building features entirelyHow launching a stripped down version of your idea can help you build the right thingRecognizing when you don't need to solve a problem yetWhy you shouldn't design your entire UI up frontHow evolutionary design applies to both code and interface designWhy you should always finish a feature before starting the next oneApplying this approach to Ben's current project TupleSponsors:Rollbar, sign up at https://rollbar.com/fullstackradio and install Rollbar in your app to receive a $100 gift card for Open CollectiveCloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for freeLinks:The Art of Product, Ben's podcastTuple, Ben's current project"You Should Take a Codecation"Trailmix.life, Ben's first codecation SaaSBriefs.fm, Ben's second codecation SaaSNomadlist, by Pieter LevelsAirline ListBasecamp 6 week cycles"How we structure our work and teams at Basecamp""What six weeks of work looks like" (at Basecamp)"Making Sense of MVP", by Henrik Kniberg

Topics include:The history behind Nuxt.jsHow Nuxt.js uses special Page components and file-based routing instead of using a traditional routerCreating dynamic page-based routes without a custom serverHow the asyncData lifecycle hook worksHow server-side rendering works in Nuxt.jsHow Nuxt.js uses intelligent code-splitting to improve performanceHow to use the fetch method to dispatch Vuex actionsUsing the head method to populate head elements on a pageHow layouts and middleware workOptions for generating, serving, and deploying Nuxt applicationsWhen and why would someone use Vue CLI instead of Nuxt?Sponsors:Cloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for freeRollbar, sign up at https://rollbar.com/fullstackradio and install Rollbar in your app to receive a $100 gift card for Open CollectiveLinks:VueConf TO DiscountNuxt.js DocumentationVuepressVue CLI 3

Topics include:How Next.js is different than using create-react-appHow page-based routing works in Next.js vs. a traditional routerThe mechanics behind how components are server-side rendered and picked up by React on the clientWhat it really means to server-render a React app and how it's different from a traditional server-rendered web appHow to use "getInitialProps" to tell Next.js how to render a page on the serverHow dynamic routing works using page-based routingWhat's new in Next.js 7.0Sponsors:Rollbar, sign up at https://rollbar.com/fullstackradio and install Rollbar in your app to receive a $100 gift card for Open CollectiveCloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for freeLinks:VueConf TO DiscountNext.js DocumentationLearn Next.js, official guideNext.js BlogNext.js Examples on GitHub

Topics include:What JSON Web Tokens are and how to use them to authenticate usersStrategies for invalidating stateless API tokensUsing cookie and session authenticationUsing authentication-as-a-service solutions like Auth0Proxying requests to your API to simplify CORS issuesProtecting against XSS attacksSponsors:Cloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for freeRollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 daysLinks:JSON Web TokensSecuring Angular Applications, Ryan's bookSecurity Headers scanning tool"I’m harvesting credit card numbers and passwords from your site. Here’s how."https://auth0.com/"CORS is bad for performance" Twitter thread

Topics include:How modern JS frameworks have made the web less accessibleHow Reach UI is making it easier for people to build accessible components without sacrificing customizabilityThe importance of using the correct markupHow focus trapping worksAdding keyboard navigation to components in a way that makes sense for screenreader usersThe challenges of building an accessibility-focused UI librarySponsors:Rollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 daysCloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for freeLinks:Reach UIReact Native for WebWAI-ARIA Authoring PracticesVoiceOverNVDAHiding elements visually but not from screenreadersRyan's Advanced React Workshop TourRyan's Online React Courses

Topics include:Why goals aren't useful on their ownThe four rules that guide human behaviorUsing environment design to encourage the habits you want to adoptBuilding habits of avoidanceWhy being productive is really about decision makingSponsors:Cloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for freeNetlify, incredibly powerful static site hosting for freeLinks:JamesClear.comPre-order Atomic Habits, James' upcoming bookJames' Newsletter

Topics include:How to fetch and reconstitute an aggregate from its eventsUsing generators to make it easy to transform event streamsWhat it looks like to apply an event to an aggregateHow to create events and what they look likeImplementing a message repository for fetching events from storageHow to raise events from inside your aggregatesHow to persist aggregates at the end of a requestWhat it looks like to insert new events into storageDispatching events to consumers to produce side effectsUsing event consumers to create and update projectionsSponsors:Netlify, incredibly powerful static site hosting for freeCloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for freeLinks:Full Stack Radio #85EventSauce, Frank's event sourcing library

Topics include:The benefits of pairing with someone more experienced than youThe benefits of pairing with someone less experienced than youHow pairing helps you build things fasterWhy pairing often removes the need for code reviewHow to get started with pairing if you've never done it beforeSponsors:Cloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for freeNetlify, incredibly powerful static site hosting for freeLinks:Tuple, the remote pairing tool Ben is buildingTuple's Pair Programming GuideThe Art of Product, Ben's podcast with Derrick ReimerBen's blogPair programming on Wikipedia"Extreme Programming Explained" by Kent Beck"How to Improve as a Programmer"Llewellyn’s strong-style pairingThe Pomodoro TechniqueVehikl podcast episode on pairing

Topics include:Why you should choose a market before getting too attached to the type of product you want to createWhy it can make sense to create products in different categories if they are for the same peopleWhy a CSS framework and a TDD course have more in common than it soundsWhy you might be happier having a job than running a business if you want to spend your time doing a specific type of workWhat you should be doing instead of racking your brain for app ideasSponsors:Netlify, incredibly powerful static site hosting for freeCloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for freeLinks:"Anything You Want" by Derek SiversAdam's tweet storm after re-reading "Anything You Want"Justin's talk on product validation at MicroConf 2018Justin's websiteJustin's Marketing for Developers courseBuild your SaaS, Justin's podcast about building Transistor.fm

Topics include:Why Derrick chose to build Level as an SPAChoosing Elm over React or VueHow Elm is sort of like a language and framework combinedMoving to Phoenix from RailsWhy getting abstractions right feels easier in a functional languageHow "contexts" help you organize your Phoenix codeThe benefits of GraphQL over RESTWhat it looks like to implement GraphQL on the serverAvoiding n+1 queries with GraphQLSponsors:Rollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 daysCloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for freeLinks:LevelLevel live-coding screencasts on YouTubeElm, the functional programming language Derrick is using on the frontendAn Introduction to Elm, the official tutorialThe Elm ArchitectureElixir, the functional programming language Derrick is using on the backendPhoenix, the Elixir frameworkContexts in PhoenixGraphQLAbsinthe, GraphQL implementation for Elixir

Sponsors:Cloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for freeRollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 daysLinks:LevelThe War on Developer Productivity, the Level manifestoLevel live-coding screencasts on YouTubeGhost, open-source publishing platformDiscourse, open-source discussion platform"After 5 years and $3M, here's everything we've learned from building Ghost",

Topics include:What even is JSX, really?Why JSX is not a templating a languageHow render functions workAdvantages of JSX over templatesHow to translate template features like v-if to JSXHow event listeners work with JSXJSX gotchas to watch out forSponsors:Cloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for freeRollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 daysLinks:Introducing JSX from the React documentationRender Functions & JSX in the Vue.js documentationVue.js Template Explorer, see how Vue compiles templates to render functionsbabel-plugin-transform-vue-jsx on GitHubVue Templates in JSX, article by Sebastian De DeynePrettier code formatterHyperscriptWhy React uses "className" instead of "class"Writing Vue.js Render Functions in JSX from Alligator.io

Topics include:Why has Ember stuck around when other frameworks from the same era haven't?What do you get when you choose Ember that you don't get with other frameworks?How does Ember's UI layer compare to React/Vue?What choices does Ember make differently than frameworks like React and Vue?How does Ember do state management?Why Ember is a great choice if you value stabilitySponsors:Rollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 daysCodeship, check out how they performed in Forrester's latest Continuous Integration Tools reportLinks:EmberMap, Sam's Ember.js training siteEmber.js Documentationember-cli-tailwind, Tailwind CSS add-on for EmberHandlebars, Ember's templating language"Should we use controllers?", on how controllers fit into Ember when also using componentsEmber DataEmber's release cycleembercasts, Ember.js training for beginners

Topics include:What is Vuex and where did it come from?The benefits of centralizing all of your application's state into one placeWhat sort of state belongs in Vuex and what state should stay local to a componentWhat all the Vuex terminology means, like actions, mutations, getters, etc.How you initially populate a Vuex storeStrategies for organizing all of the state in a storeCommon mistakes people make with VuexDealing with forms when using VuexSponsors:Rollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 daysCodeship, check out how they performed in Forrester's latest Continuous Integration Tools reportLinks:Advanced Vue Component Design, Adam's upcoming courseVuex DocumentationThe Elm ArchitectureIntro to Vuex on CSS Tricks by Sarah Drasner

Topics include:Why global state is better than an event busWhy and how to avoid using this.$parentCustom events vs. callback propsWhen to use watchers and when you don't need toWhy you should prefer computed properties over methodsInline templates vs. scoped slotsUsing components to share code instead of mixins or directivesSponsors:Rollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 daysCodeship, check out how they performed in Forrester's latest Continuous Integration Tools reportLinks:Advanced Vue Component Design, Adam's upcoming courseChris on GitHubChris on Patreon"7 Secret Patterns Vue Consultants Don't Want You To Know", Chris' recent presentation"Methods, Computed, and Watchers in Vue.js" by Sarah DrasnerPortalVue, library for rendering elements outside of their parent componentvue-enterprise-boilerplate

Topics include:Wrapping non-Vue libraries as Vue components to maintain a consistent paradigmUsing Popper.js with Vue to build dropdowns and tooltipsUsing portals to build better modal componentsPatterns for making it easier to reuse components throughout an applicationWhich Tailwind CSS component classes Jonathan chose to extract (and which ones he didn't)How Jonathan chose to customize his Tailwind configuration for his projectUsing Tailwind's advanced screen options to better accommodate a sidebar layoutHow Jonathan is using Purgecss to reduce his CSS from 110,000 lines of code 1.7mb in development to 8.8kb in productionSponsors:Codeship, check out how they performed in Forrester's latest Continuous Integration Tools reportRollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 daysLinks:Advanced Vue Component Design, Adam's upcoming course"Building a Sortable Component with Vue.js", replay from Adam's recent live streamVue.jsTailwind CSSTurbolinksPopper.js positioning libraryPikaday date picker libraryVue.nextTick()PortalVue, library for rendering elements outside of their parent componentPortals in ReactPurgecss

Topics include:What does "event sourcing" even mean?What do terms like "aggregate" and "projection" mean in the context of event sourcing?What are the benefits of modeling something with event sourcing vs. a traditional state-based approach?How events are usually storedWhy and how you might build multiple projections from a single event streamHow events in event sourcing differ from the sort of events you might already be using in your projectsA walkthrough of what the actual code would look like to model a "publish blog post" feature using event sourcingSponsors:Rollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 daysCodeship, check out how they performed in Forrester's latest Continuous Integration Tools reportLinks:Advanced Vue Component Design, Adam's upcoming courseFrank's BlogEventSauce, Frank's new PHP event sourcing libraryEvent Store event sourcing database"Event Sourcing" introduction by Martin Fowler"Event Sourcing" talk by Greg Young at GOTO 2014

Topics include:Challenges with testing Vue components prior to vue-test-utilsHow vue-test-utils works and what it looks like to test a componentChoosing a test runnerCommon mistakes people make when testing their componentsMocking and stubbing external dependenciesCombining unit testing with snapshot testingSponsors:Codeship, check out how they performed in Forrester's latest Continuous Integration Tools reportRollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 daysLinks:vue-test-utils on GitHubvue-test-utils Documentation"Testing Vue.js Applications", Edd's bookEnzyme testing utility for ReactjsdomJest, Edd's recommended test runnermocha-webpackMocking in JestSnapshot testing in JestAsync Vue components

Topics include:What JavaScript looked like at Basecamp before StimulusWhy Basecamp chose to create a new framework instead of using React, Angular, or VueHow Basecamp uses server-rendered partials instead client-side templatesWhy David decided to start "On Writing Software Well"Evaluating patterns in practice and choosing between conflicting approachesUsing concerns/mixins to organize classes with many featuresApplying resourceful routing to singular resourcesSponsors:Rollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 daysCodeship, check out how they performed in Forrester's latest Continuous Integration Tools reportLinks:Stimulus HomepageStimulus on GitHubDavid's blog post introducing StimulusTurbolinksWebpacker"Server-generated JavaScript Responses (SJR)" (2013)respond_to, returning multiple formats from the same Rails controller"On Writing Software Well" 1: Removing the need for code comments2: Using callbacks to manage auxiliary complexity3: Using globals when the price is right4: Not every model is backed by a database5: Testing without test damage or excessive isolationBasecamp's "Getting Real" YouTube channel

Topics include:Using animation to make interfaces easier to useThe difference between animations and transitionsWhen to use CSS animations vs. JavaScript animationsWhich CSS properties are safe to animateHow to use techniques like FLIP to make sure your animations are performantRecommended libraries for building complex animationsStrategies for keeping animation code maintainableSponsors:Codeship, check out how they performed in Forrester's latest Continuous Integration Tools reportRollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 daysLinks:Sarah's Personal WebsiteSarah on CodePen"SVG Animations", Sarah's book"Functional Animation", Sarah's talk on using animation to create spatial awareness and make interfaces easier to useGreenSock animation library"Animation in Design Systems", Sarah's article at 24 ways"FLIP Your Animations", using the FLIP technique to make animations more performantTransitions in Vue.js"Animating Vue", Sarahs' talk from VueConf 2017Web Animation Workshops with Sarah and Val Head

Topics include:What is a "higher order component"?How do you replicate the render prop pattern from React with Vue?Using scoped slots to build components with no UIUsing render functions without using JSXHow Vue's built-in components like `` work under the hoodSponsors:Codeship, check out how they performed in Forrester's latest Continuous Integration Tools reportRollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 daysLinks:Vue.js HomepageThe Vue Point, the official Vue.js blog on MediumHigher-Order Components, from the React documentation"Use a Render Prop!" by Michael Jackson, an introduction to render prop components in ReactScoped Slots documentationRender Functions documentation"Writing Abstract Components with Vue.js", tutorial on writing a render function component with VueFetch Component Demo, based on the component Evan describes in the podcast

Topics include:What makes an application "multitenant" really?Choosing between a shared database or multi-database setupApproaches for identifying the current tenantPerformance considerationsHow multitenancy impacts how you integrate with external servicesSponsors:Codeship, check out how they performed in Forrester's latest Continuous Integration Tools reportRollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 daysLinks:"Building Multitenant Applications", video of Tom's talk from Laracon US 2017Slides from Tom's multitenancy talk"Online migrations at scale" on the Stripe engineering blog"Migrating replication lag and reducing read load with freno" on the GitHub engineering blog

Kent gives a behind-the-scenes look at how the library uses the render prop pattern to allow maximum customizability without complex configuration.Sponsors:Rollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 daysCodeship, check out how they performed in Forrester's latest Continuous Integration Tools reportLinks:downshift on GitHub"Introducing downshift for React" from Kent's blog"Use a Render Prop!" post by Michael Jackson"Compound Components" talk by Ryan Florencematch-sorter, Kent's best-match sorting libraryAwesome React Render Propsreact-toggled, Kent's toggle component libraryKent's newsletter"Learn React Fundamentals and Advanced Patterns", blog post introducing Kent's React courses

Sponsors:Rollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 daysCodeship, check out how they performed in Forrester's latest Continuous Integration Tools reportLinks:Refactoring Rails, Ben's refactoring courseThe 30 Day Code Quality Challenge, Ben's free 30-day code quality courseRefactoring from Good to Great, Ben's popular refactoring talkDecompose Conditional, an example of "make the implicit explicit"Introduce Parameter ObjectReplace Conditional with PolymorphismChasing Perfect, Adam's talk about refactoring with polymorphismIntroduce Null ObjectReplace Method with Method Object"Why Ruby Class Methods Resist Refactoring" from the Code Climate blogCollection Pipeline, Martin Fowler's article on replacing loops with array transformationsCuring the Common Loop, Adam's talk on refactoring loops and conditionalsRefactoring to Collections, Adam's book and video seriesBoundaries, Gary Bernhardt's talk about OO, functional programming, and immutability

Topics include:Why Tailwind doesn't include buttons or formsIs Tailwind for front-end developers or back-end developers?Best practices around extracting component classesUsing Tailwind with existing CSS or on top of other frameworksOptimizing Tailwind's generated file sizeNew features planned for upcoming Tailwind releasesSponsors:Rollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 daysCodeship, check out how they performed in Forrester's latest Continuous Integration Tools reportLinks:Tailwind CSS HomepageTailwind CSS GitHub repositoryTailwind CSS discussion forum@tailwindcss on TwitterBuilt with Tailwind, a curated list of cool stuff built with TailwindTailwind Expo, more cool stuff built with TailwindTailwind CSS lessons on Egghead.io, by Simon Vrachliotispurgecss, amazing tool for removing unused CSS from your codebaseUsing PurgeCSS to remove unused Tailwind CSS classes, by Andrew Del PreteJason Beggs' personal site, built with Tailwind and optimized with PurgeCSSBuilding a Login Page with Tailwind CSS, tutorial by Mustafa EhsanIntroducing Tailwind CSS on Scotch.io by Ezeugwu Paschal

Sponsors:Rollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 daysCodeship, check out how they performed in Forrester's latest Continuous Integration Tools reportLinks:Tailwind CSS HomepageTailwind CSS GitHub repositoryTailwind CSS discussion forum@tailwindcss on Twitter"CSS Utility Classes and Separation of Concerns", Adam's post on moving from "semantic" CSS to utility-first"Rebuilding Laravel.io with Tailwind CSS", a video walkthrough of implementing a design with Tailwind

Sponsors:Rollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 daysLinks:Diana's personal websitePrimer, GitHub's design systemPrimer modules on GitHub"Introducing Design Systems into Chaos", Diana's recent talk on her work on design systems at GitHubPercy, a visual regression testing toolPrimer CSS on TwitterGitHub Design on Twitter

Topics include:How to pick great fontsChoosing a color scheme for your projectDesigning in greyscaleRecreating existing interfaces from scratchRecommended design toolsWhat you should design first on a new pageStrategies for making things look professional without graphic design skillsSponsors:Rollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 daysLinks:Steve's BlogLittle UI Details, a collection of Steve's hot design tipsGoogle Fonts, prefiltered"12 Google Fonts You Can't Go Wrong With", by SteveSystem Font Stack courtesy of CSS-TricksInter UI font family (formerly "Interface")WhatFont Chrome ExtensionFonts In UseDribbble color picker"Color in UI Design" by Erik Kennedy (great resource on HSL)Sketch, design tool for macOSFigma, cross-platform design tool"Building a professional design tool for the web", on how Figma is written in C++ and compiled to asm.js"Epicenter Design" by 37signalsDoodle, example of a small UIExample login page, from ShippoRefactoring UI "Redesigning Laravel.io" case studyZondicons, Steve's free SVG icon setHero Patterns, Steve's free SVG background pattern galleryPushsilver, example of Hero Patterns in useHeroicons, Steve's premium marketing icon kit

Topics include:Why you shouldn't start with SaaSHow to find ideas from client projectsWhat to do before you make a landing pageWhy your first product doesn't have to be the one that makes you richUsing open source to build an audienceSponsors:Rollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 daysCodeshipLinks:Getting Real by 37signals (now Basecamp)Startups for the Rest of Us podcastStoremapper, interview with Tyler Tringas for IndieHackersPippin's PluginsThe Stairstep Approach to Bootstrapping by Rob WallingThe Freedom Ladder by Justin Jackson"The $61,392 Book Launch That Let Me Quit My Job", story of how Adam released his first product and went independentMarketing for Developers, Justin's book and courseRefactoring UI landing pageJustin's Laracon 2017 Talk

Topics include:How their approaches have changed over timeFeature tests vs. unit tests, when to use eachTesting code that interacts with external servicesUsing fakes instead of mocksContract testsTesting view data vs. rendered HTMLSponsors:Rollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 daysCodeshipLinks:Test-Driven Laravel, Adam's testing courseLaravel Horizon test suiteLaravel Fakes documentation"Don't Mock What You Don't Own", Adam's screencast on testing wrappers for external services"Writing Your Own Test Doubles", Adam's blog post on using fakes instead of mocks"Preventing API Drift with Contract Tests", Adam's screencast on using traits to create contract tests between fake and real implementations

Topics include:What is PostCSS, really?PostCSS vs. other preprocessors like Less and SassExamples of things PostCSS can doHow to use PostCSS to add your own features to CSSHow to disguise custom features as valid CSS so PostCSS will parse itPorting Tailwind CSS from Less to PostCSS and why it's been awesomeSponsors:Rollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 daysCodeshipLinks:Tailwind CSS, Adam's upcoming CSS frameworkCSS Utility Classes and "Separation of Concerts", blog post explaining the motivation behind TailwindPostCSS.orgcssnext"Create Your Own Plugin", PostCSS tutorial at tuts+PostCSS API documentation

Topics include:General project structureDealing with initial load flickerSharing routes between Vue and your serverHandling authorization rules on the clientComparing strategies for getting data into your Vue componentsBest practices for sharing state between sibling componentsSigns you should extract a child componentUsing Vue to wrap up third-party librariesSponsors:Rollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 daysCodeshipLinks:Vue.jsAll Vue.js lessons on LaracastsZiggy, package for sharing routes between Laravel and VuePromise.takeAtLeast, helper Adam uses to slow down fast AJAX callsCustom Events in VueVuex, state management library for VueTurbolinksSimple State Management, from the Vue documentation

They also discuss the benefits of using a Turbolinks-style approach for small teams, and how Turbolinks on mobile compares to other popular tools like Ionic.Sponsors:Rollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 daysCodeshipLinks:TurbolinksTurbolinks iOS adapterTurbolinks Android adapterTurbolinks 5: I Can't Believe It's Not Native!, presentation by Sam StephensonHybrid Sweet Spot: Native navigation, web content, article on how Basecamp builds mobile apps by DHHIonic, Angular based mobile frameworkTurbolinks lessons at Laracasts

They talk about the problems this approach has solved for them, the surprising workflow benefits, and some tips and tricks for using this approach well.Sponsors:Rollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 daysCodeshipLinks:BEM, the Block Element Modifier CSS methodologyAbout HTML semantics and front-end architecture, a blog post by Nicolas Gallagher that heavily inspired the way Adam writes CSSImplementing Designs with Utility-Focused CSS, a recorded live stream where you can watch Adam implement a design using his work-in-progress CSS frameworkBeard, David Hemphill's utility frameworkTachyons, a popular utility frameworkfractures utility frameworkturrettcss utility framework

Adam talks about some of the UI design challenges he and Steve have been trying to solve, and shares some of the creative solutions they came up with.Sponsors:Hired, sign up at https://www.hired.com/fullstackradio to double your signing bonus to $2000 if you get a job through HiredRollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 daysLinks:PushSilver, David's invoicing appDavid's fight videoPushSilver discount, just for Full Stack Radio listenersInterviews with Laura Roeder, the founder of MeetEdgarKiteTail, Adam's checkout platformBuilding KiteTail #6, newsletter update with lots of UI design detailsBidSketch, proposal software tool with the "see a sample" email capture call-to-action

Adam gives an update on gracefully handling errors in the KiteTail checkout process, launching Zttp as an open-source package, and how he used Lumen to power the Zttp integration test suite.Sponsors:Rollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 daysHired, sign up at https://www.hired.com/fullstackradio to double your signing bonus to $2000 if you get a job through HiredLinks:PushSilver Infinite pre-launch page"How to Double Your Trial-to-Paid Conversion Rate with Onboarding", Rob Walling's talk at SaaSFest 2016Zttp on GitHubLumen, the Laravel microframeworkThe Lumen server behind Zttp's test suite"Test-Driving Webhook Failures", the live stream where Adam and David worked through the HTTP testing approach that inspired the Zttp test suiteCraft and Commerce, the ConvertKit conference Adam is attending this month"Building KiteTail"

Adam shares the details behind his decision to bring on a co-founder for KiteTail, talks the collaboration process when working on an app with somebody else, and give an update on where he's at with getting KiteTail integrated into the Test-Driven Laravel course app.Sponsors:Hired, sign up at https://www.hired.com/fullstackradio to double your signing bonus to $2000 if you get a job through HiredRollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 daysLinks:PushSilver, David's invoicing appKiteTail, Adam's checkout platform"Designing the Ideal Bootstrapped Business" by Jason CohenSketch's non-subscription annual pricing modelZttp, the underground fight club style HTTP librarySteve Schoger, Adam's KiteTail co-founderZondicons SVG icon library by SteveZondicons Blade package to easily embed inline SVG icons in Laravel applicationsHero Patterns, free repeating SVG background patterns by SteveHeroicons SVG marketing icon library by SteveBuilding KiteTail, details about KiteTail live streams, newsletter, etc.Previous KiteTail live streams on Adam's YouTube channel

Topics include:Thermostat.io and NPS surveysCharging more vs. charging lessFinding a niche for PushSilver and how to appeal to that nicheOne-time purchase lifetime plans for SaaSPercentage-based vs. tiered pricingSponsors:Rollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 daysHired, sign up at https://www.hired.com/fullstackradio to double your signing bonus to $2000 if you get a job through HiredLinks:Thermostat.io, Ian's new NPS survey toolPushSilver, David's invoicing appKiteTail, Adam's checkout platformJesse Mecham on Founder Chats, talking about selling YNAB on the Steam storeNet Promoter Score

They chat about topics like:Dogfooding Cron Dog in PushSilverDealing with complex validationWhy we hate auto-saving UIsValidation issues when supporting "draft" modelsExpanding the scope of KiteTailDifferent ways to handle client-side image previewBuilding a Cron Dog SDKSponsors:Rollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 daysHired, sign up at https://www.hired.com/fullstackradio to double your signing bonus to $2000 if you get a job through HiredLinks:MicroConfCrondog, David's scheduled webhook appPushSilver, David's invoicing appKiteTail, Adam's checkout platformConvertKit, the app Adam uses for email that helped inspire the new direction for KiteTail"The $61,392 Book Launch That Let Me Quit My Job", Adam's blog post about his first book launch

We also talk a lot about different strategies for securing webhooks, and what we're looking forward to at MicroConf.Sponsors:Rollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 daysHired, sign up at https://www.hired.com/fullstackradio to double your signing bonus to $2000 if you get a job through HiredLinks:Crondog, David's new recurring task appKiteTail, Adam's new checkout appHow GitHub secures webhooksHMAC on WikipediaLaravel Spark, the boilerplate Laravel skeleton David's usingMicroConf Start Edition

David introduces Crondog, the new product he's working on to help developers manage dynamic recurring tasks in their applications.Adam introduces KiteTail, an app that lets you create webhook-driven hosted checkout pages; something he wishes he'd had when he launched his course.From here on out, Full Stack Radio will follow David and Adam's journey building these new products; discussing interesting technical, design, and business challenges they face along the way.Sponsors:Rollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 daysHired, sign up at https://www.hired.com/fullstackradio to double your signing bonus to $2000 if you get a job through HiredLinks:Crondog, David's new recurring task appKiteTail, Adam's new checkout appPushSilver, David's existing invoicing appDonorGive, an app David worked on that motivated him to build CronDogLaravel Spark, the boilerplate Laravel skeleton David's using"What's KiteTail?", Adam's blog post introducing KiteTailTest-Driven Laravel, Adam's course app that inspired him to build KiteTailMicroConf Start Edition

Sponsors:Rollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 daysHired, sign up at https://www.hired.com/fullstackradio to double your signing bonus to $2000 if you get a job through HiredLinks:Michelle on TwitterStripe ElementsStripe's Engineering BlogStripe CheckoutStripe RadarBuilding Stripe's API, by Amber FengMove Fast, Don't Break Your API, by Amber Feng

Sponsors:Rollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 daysHired, sign up at https://www.hired.com/fullstackradio to double your signing bonus to $2000 if you get a job through HiredLinks:Form Requests in LaravelAfter Validation hooks in Laravel"Stripe CVC and ZIP checks can be bypassed" forum postCustom Rule Objects, enhancement Adam is working onHTML5 Form Validation

As I mention in the show, if you've been thinking about checking out Test-Driven Laravel, the course is still available at the early access price for the next few weeks:Learn more about Test-Driven Laravel Early AccessSponsors:Rollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 daysHired, sign up at https://www.hired.com/fullstackradio to double your signing bonus to $2000 if you get a job through HiredLinks:Test-Driven Laravel, Adam's TDD courseNoel's blogRails 4 Test Prescriptions, Noel's book on testingTake My Money, Noel's book on payment handlingNoel's screencast on floating point precisionRubyMoney gemngrokvcr gem

Sponsors:Rollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 daysHired, sign up at https://www.hired.com/fullstackradio to double your signing bonus to $2000 if you get a job through HiredLinks:DripScaling SaaS, Derrick's blogThe Drip stack:Ruby on RailsAWSPostgreSQLSidekiqSendGridRedis

Sponsors:Rollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 daysHired, sign up at https://www.hired.com/fullstackradio to double your signing bonus to $2000 if you get a job through HiredLinks:Test-Driven Laravel Early Access, Adam's new TDD coursewesbos.com, Wes' blog and personal websiteJavaScript 30, Wes' new free courseThe Getting Things Done methodologyThingsTodoistAlfredTextExpanderSend and Archive in GmailBehind the Scenes of Wes' course platformWes Bos on YouTube

Sponsors:Rollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 daysHired, sign up at https://www.hired.com/fullstackradio to double your signing bonus to $2000 if you get a job through HiredLinks:Test-Driven Laravel Early Access, Adam's TDD courseUserScape, Ian's businessHelpSpot, UserScape's help desk productShady Tactics in our Midst from Ian's blogShady Tactics, Round 2Securing the Five-Figure Sale, Ian's new free eBook on landing enterprise salesThe Lean StartupEdgar, social media tool with invite-only sign up flow

Sponsors:Rollbar, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 daysHired, sign up at https://www.hired.com/fullstackradio to double your signing bonus to $2000 if you get a job through HiredLinks:Putting Your Laravel Controllers on a Diet, an older blog post by Adam on form objectsForm Requests in LaravelFineuploader, JS file upload libraryDropzoneJS, another JS file upload library