Full Stack Radio

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