Full Stack Radio

Topics:

Putting yourself in the shoes of the person reviewing your applicationCrafting a high quality application tailored to a specific positionStanding out in a more traditional hiring process by doing something a little extraShowcasing very specific examples of your work instead of asking the person reviewing your application to go hunting for itHaving good questions for the person interviewing youSharing your ideas and what you think the company should be focused onCreating a job for yourself that doesn?t even existProving that you can take ownership of projects and ship them by yourselfShowing off skills you have that aren?t directly related to the job

Links:

Ben on TwitterTupleTailwind Labs job postings

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.

Links:

HotwireHEY

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.

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 check out our products:

Tailwind UI, a collection of professionally designed, fully responsive HTML components built with Tailwind CSS.Statamic 3, Jack's full-featured flat-file CMS, designed for developers and clients alike.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.

Links:

Changes to Gumroad's PayPal supportRadical iconsJack's hand-drawn avatarsW3C's CMS Selection Report

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 check out our products:

Tailwind UI, a collection of professionally designed, fully responsive HTML components built with Tailwind CSS.Statamic 3, Jack's full-featured flat-file CMS, designed for developers and clients alike.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.

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 check out our products:

Tailwind UI, a collection of professionally designed, fully responsive HTML components built with Tailwind CSS.Statamic 3, Jack's full-featured flat-file CMS, designed for developers and clients alike.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.

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 check out our products:

Tailwind UI, a collection of professionally designed, fully responsive HTML components built with Tailwind CSS.Statamic 3, Jack's full-featured flat-file CMS, designed for developers and clients alike.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.

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?.

Links

Statamic 3.0Tailwind CSS v1.7.0@90sWWE on Twitter

Topics include:

Why Gary decided to write Execute Program as a full-stack TypeScript application instead of using a Ruby or Python backend like he may have traditionallyDo you actually have to write less tests if you have a good type system?What does a good type system give you that tests can't give you?Using io-ts to type check incoming dataHow to think about structuring your code to best take advantage of the benefits your type system gives you and minimize the need to write testsPushing conditional logic to the core of your system to reduce the number of tests you need to write at the edgesThe correlation between type errors and behavioral bugs, and how a type system can help you catch mistakes you don't think to test forDo type errors signal that you're missing a test?Structural vs. nominal type systems, and the benefits of structural type systems like used by TypeScript and GoBest practices for type-checking within a function in a structural type system like TypeScriptThe power of supporting literal types like true or "active" in addition to traditional types

Links:

Destroy All SoftwareExecute ProgramTypeScript"Are tests necessary in TypeScript?"io-tsTypeScript course on Execute ProgramGary's tweet about unions with literal types

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.

Topics include:

What is Svelte and how is it different than other JS frameworks in the space?What special behavior does the Svelte compiler layer on top of vanilla JS syntax and why?Why the lack of render functions in Svelte isn't a real problem in practiceWhat are you giving up when you choose to build your application with something like Rails instead of JavaScript?Why should we be trying to write our applications in a single language, and why should it be JS?What's wrong with striving to write an application entirely in a language like Ruby instead of entirely in JS?Why HEY doesn't really make a good argument against the modern webThoughts on bundle sizes, code-splitting, and why aggressive code-splitting is still better than frequent round trips to a server-rendered appHow Svelte and Sapper handle SSRWhy page transitions are the killer argument for building SPAs if we want to be able to compete with native experiencesShould we be thinking about JavaScript applications as native applications in terms of offline-support and eventual consistency, or should we keep thinking of them as webpages that depend on the network?

Links:

SvelteSapper"Second-guessing the modern web""In defense of the modern web"

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.

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 time

Links:

Jason's blog, one of the greatest treasure troves of startup advice on the internetDesigning the Ideal Bootstrapped Business, one of Jason's MicroConf talks

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.

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 todo

Links:

BasecampShape Up, Basecamp's recent book on how they workGoing Remote: Basecamp Walkthrough, a livestream where Jason and DHH go over their real Basecamp account

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 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.

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:

ViteVitePressRollup

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 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.

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 databaseHow primary keys work in DynamoDBWhat data types are available in DynamoDBHow DynamoDB is a schemaless databaseWhy it's important to understand your access patterns in advance with DynamoDB, unlike in a relational databaseUnderstanding why and how you usually have multiple record types in a single DynamoDB tableWhat "index overloading" is in DynamoDBUnderstanding partition keys and sort keysHow to structure your data in DynamoDB to make it possible to query related data, and how those queries workHow secondary indexes work, allowing you to access the same data in different waysHow to accommodate access patterns you didn't know about before you designed your schemaWhen to flatten relationships vs. nest themShould you use DynamoDB if you aren't "web-scale"?How local development works with DynamoDB

Links:

DynamoDB HomepageAlex's blog, loaded with great DynamoDB contentThe DynamoDB Book, Alex's recent bookDynamoDB 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 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.

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 layerWhat ?cells? are in Redwood, and how they aim to provide a declarative abstraction on top of data fetchingHow Redwood tries to provide clear decoupling behind the front-end and back-end, even though it is providing a full-stack solutionWhat ?services? are in RedwoodUsing Prisma 2 to fetch data from your database in your servicesWhat database solutions exist today that work well with Redwood in a serverless environment?

Links:

Redwood.js homepagePredictCovid.com, a Redwood app in productionExample blog application built with RedwoodPrisma

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 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.

Topics include:

An overview of the new getStaticProps, getStaticPaths, and getServerSideProps APIsHow Next.js helps you serve static pages from an edge CDN automatically, without affecting the actual authoring experienceUsing getStaticPaths to statically pregenerate dynamic routesHow the fallback feature of getStaticPaths works and lets you statically render pages on-demand to avoid long build timesHow the upcoming incremental static generation feature will work in Next.jsDeploying Next.js to a platform other than Zeit, and how you retain all of Next?s benefits automaticallyHow getServerSideProps is different from getInitialPropsWhy getServerSideProps actually improves performance, even though it introduces another hopHow getServerSideProps results in smaller bundle sizes vs. getInitialPropsUsing getServerSideProps to safely talk directly to a database, skipping the need for an APIWhy 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 experiencesWhat?s coming next in future releases

Links:

Next.jsNext.js 9.3 AnnouncementIncremental Static Generation RFCNext.js Code Elimination DemoSWR, 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 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.

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 applicationWhat third-party services people are using to try and replace custom back-end codeWould 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 RailsReactAWS AmplifyFirebaseHasuraGraphQL: The DocumentaryOneGraphNext.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 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.

Topics include:

What Tailwind UI is and why we decided to build itHow odd numbers can wreak havoc on a user interface, and how to avoid themCrafting the perfect form controlUnexpected benefits of working with CSS GridAbusing 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 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.

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 allLayout challenges you run into due to the way the browser includes line-height in the size of text elementsThe trick Mark's team uses to remove surrounding white space from text elements, without removing the space between wrapping linesUsing a "stack" component to specify the space between sibling elementsIssues with naively just using margin on one side of an element to space elementsThe upcoming "gap" property in CSS and how it proves layout components are a good ideaUsing a "content block" component for horizontal spacing/sizing at the page levelTricks for maintaining vertical rhythm despite 1px borders trying to ruin it all for youWhy 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 2019Braid, the design system Mark works onPlayroom

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.

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 suiteHow Mirage's internal ORM works, and how it can help you mirror your API's behavior more quicklyManaging the risks of maintaining a complex stub of your real API with Mirage and keeping them in syncWhat's next for Mirage

Links

Mirage.jsMirage.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.

Topics include:

What is Alpine and what does it replace?How does Alpine compare to Vue?How does Alpine compare to Stimulus??Why not just use vanilla JavaScript you dummy??How Alpine works internallyPatterns for extracting reusable behaviours with AlpineThe Alpine roadmap

Sponsors:

Tuple, try the best pair programming app out there for free for two weeks

Links:

Alpine.js on GitHubThe template tagThe with statementProxy objects

Topics include:

Why "fixed time, variable scope" is so important for actually getting things doneIntegrating development and design into a single process instead of design first, develop laterWhat it means to "shape" work before deciding to work on itWhat it means to "bet" on a project, and why Basecamp would rather trash a project than extend the deadline by an extra weekTaking deadlines seriously, and how it empowers teams to make their own decisions about scope to avoid having to trash the projectAn example of a project at Basecamp that failed to ship, and working through what they did wrong that led to that outcomeDe-risking projects by getting input from technical experts on the team before committing to actually doing the workWhat exactly is the deliverable a design/development team receives from leadership at the start of a project that they are expected to be able to succeed with?The difference between macro planning and micro planning on a projectHow Basecamp avoids iterating on solutions within a cycle without turning projects into fixed time, fixed scopeWhy designers at Basecamp start by actually building the very rough "Times New Roman" version of a UI with HTML and CSS before spending time on high fidelity visual design decisionsApplying "Shape Up" on client 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

Topics include:

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

Sponsors:

Tuple, try the best pair programming app out there for free for two weeksDigitalOcean, get your free $50 credit at do.co/fullstack

Links:

"No, disabling a button is not app logic.", David's recent article on state machinesXState Docs

Topics include:

What were the first feature/change ideas that got the wheels turning for Vue 3How Vue's underlying VNode data structure is changing and how that affects users who work directly with render functionsHow the h function works in Vue 3 and how it helps you write code that's more composableHow many breaking changes are just removing deprecations vs. hard breaks and how a compatibility build is going to ease the upgrade processThe new template compiler and how it will drastically increase performanceWhat were the goals of the class-based component API and why was it cancelled?The new composition API and how it will help you write more reusable logic without the downsides of mixins or scoped slotsA deep-dive into reactive vs. refs in the composition APIHow the composition API compares to hooks in ReactHow provide/inject is being improved for Vue 3

Sponsors:

Cloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for freeDigitalOcean, get your free $50 credit at do.co/fullstack

Links:

Vue 3 source code on GitHubVue RFCsVue 3 Composition API

Topics include:

Why Heroku introduced BEM to try and solve their CSS issues and why it didn't workHow custom tooling and Ember's component system alleviated any maintainability concerns about littering the HTML with presentational classesWhy Heroku still uses some component classes like "btn" and "input" even though they could encapsulate those in an Ember componentWhy simply introducing any sort of rigid CSS architecture wasn't enough and why switching to a utility CSS approach specifically was critical to making UI development at Heroku more maintainableHow with a non-utility CSS approach, every new feature always seemed to require writing new CSS, no matter how many "reusable" components existed in the systemWhy the team at Heroku still loves working with this approach, even 3.5 years after introducing itHow a utility-based approach has worked just as well for Heroku's marketing properties as it has for their application UIPylon, Alasdair's experimental CSS library that provides declarative layout primitives in the form of custom HTML elements

Sponsors:

DigitalOcean, get your free $50 credit at do.co/fullstackCloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for free

Links:

purple3, Heroku's utility CSS library for their product UIsshibori3, Heroku's utility CSS library for their marketing propertiesPylon, Alasdair's declarative CSS layout library

Topics include:

What Inertia.js is and what problem it solvesWhy Inertia is more like a protocol than a frameworkHow navigation works in InertiaHow form submissions work in InertiaHow Inertia automatically updates your assets for visitors when you update your codeHandling flash messages and validation errors workBuilding applications with persistent layoutsShowing placeholder screens with Inertia while data is loading

Sponsors:

Cloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for freeDigitalOcean, get your free $50 credit at do.co/fullstack

Links:

Inertia.jsInertia.js on GitHubPing CRM, the canonical Inertia.js demo applicationPlaceholder components in Inertia.jsSponsor Jonathan's work on Inertia on GitHub

Topics include:

How do you keep data synchronized between two different clients when all of the data is stored locally instead of in the cloud?Understanding conflict-free replicated data types and how they help when building distributed applicationsDiving deep into how messages are replayed across clients when network access becomes available to achieve consistent stateUsing a Merkle tree to efficiently compare the message store from two clients to know which messages need to be synchronizedConsiderations you need to make when structuring your data to enable eventual consistencyWhat it might look like to move an app like Actual to an offline-first web app where you can't use things like SQLite

Sponsors:

DigitalOcean, get your free $50 credit at do.co/fullstackCloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for free

Links:

ActualElectronConflict-free replicated data type (CRDT)Hybrid logical clockMerkle tree

Topics include:

Brainstorming ideas vs. paying attention to your own problemsWhy it's smart to start with a product that might never make a million dollars a yearShould you avoid markets with competition?Why it's a good idea to build something for fewer peopleStrategies for figuring out how many people have the problem you're trying to solveWhy you should start marketing before you start buildingWhen should you start charging money for your product?Why getting 1,000 customers is extremely hard and how that affects your pricingWhy you don't need an audience to build a software product

Sponsors:

Cloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for freeDigitalOcean, get your free $50 credit at do.co/fullstack

Links:

Rob's websiteStartups for the Rest of Us, Rob's podcastDrip, the last software business Rob builtTinySeed, Rob's startup accelerator for bootstrappersMicroConf, the conference Rob organizes"The Stairstep Approach to Bootstrapping""Why You Should Start Marketing the Day You Start Coding""Traction" by Gabriel Weinberg"SaaS Marketing Essentials" by Ryan Battles"Start Small, Stay Small", Rob's book

Topics include:

Creating pixel-perfect mockups in advance vs. designing and implementing in tandemWorking with existing JS libraries for interactive UI features vs. hand-rolling a custom implementation from scratchHow design systems play into the design process at Netlify, and how mockups aren't meant to implemented pixel-for-pixelWhat tools Netlify uses to design new features and manage the design processWhat technologies Netlify uses to keep their UI consistentUsing modern CSS features like CSS grid

Sponsors:

DigitalOcean, get your free $50 credit at do.co/fullstackCloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for free

Links:

Netlify AnalyticsHighchartsAbstractSketchPostCSSpostcss-nestedpostcss-each

Topics include:

Building website templates vs. a UI kitShould the product be positioned as a UI library or an educational resource?One-time purchase pricing vs. subscription pricing vs. some combination of the twoWhy 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 freeDigitalOcean, get your free $50 credit at do.co/fullstack

Links:

Tailwind CSSTweet previewing the Tailwind component directoryArticle on Sketch pricing modelMegaMaker ClubThermostat, the NPS survey software Ian is working on

Topics include:

Walking through how a single screen in the app is rendered in step-by-step detailHow they separate container components and presentational components to make things easier to reason aboutHow the Redux store is organizedHow they handle caching data on the client and deciding when to bust the cacheHow the API is designedWhy they are sticking with REST instead of GraphqlHow they handle authentication in their app

Sponsors:

DigitalOcean, get your free $50 credit at do.co/fullstackCloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for free

Links:

NetlifyReactReact Router"Presentational and Container Components" by Dan AbramovNetlify's StorybookImmutableImmerredux-funkNetlify AnalyticsJAMstack Conf

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 launchBuilding Userlist with Ember instead of trendier tools like ReactHow the Ember app authenticates with the Rails APIStrategies for keeping email deliverability high for Userlist's customersHow Benedikt built Userlist's complex segmentation engine by creating a custom AST structure and compiling it to SQLHow 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 freeDigitalOcean, get your free $50 credit at do.co/fullstack

Links:

Userlist.ioSlow and Steady, Benedikt's podcastProsemirrorEmberRuby on RailsSidekiqSparkpost

Topics include:

What is serverless?What AWS services Vapor manages and how they are billedUsing a single RDS instance with multiple databasesUnderstanding cold boots with Lambda and how to minimize the effect they have on your application's performancePerformance on VaporHow queues work with VaporTuning your queue concurrency based on your database connection limitStrategies for preventing your web instances and queue instances from competing for resourcesHow scheduled tasks work with VaporHow file uploads work with VaporLimitations when running code on Lambda and strategies for working around them

Sponsors:

DigitalOcean, get your free $50 credit at do.co/fullstackCloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for free

Links:

Laravel VaporIntro to Laravel Vapor, Taylor's talk at Laracon

Topics include:

How modernizing a Flash app drove Ryan to start building SPAsHow 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 codebaseWhy the backend will continue to be commoditized and application developers will be spending more and more of their time in the UIWhat makes something a web app instead of a website, and why almost everything is actually an appWhy 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 freeDigitalOcean, get your free $50 credit at do.co/fullstack

Links:

EmberMap, Ryan's tutorial siteMirage.jsClient-side SQLGraphQLHasura GraphQL Engine, an automatic GraphQL API over PostgresConversation on ugprading API requestsInterview with Michelle Bu of Stripe

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 headingWhy you may want to include invisible headings in some situationsWhat the document outline is and how your use of headings impacts itHow to make your heading levels dynamic to make your components more flexibleWhat a "sectioning context" isCan you have multiple "article" elements on one page?What even is an "article" anyways?How to use elements like "section" and "aside" properlyShould 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/fullstackCloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for free

Links:

Aaron's personal websiteHTML5 Element Flowchart from html5 Doctor

Topics include:

What CSS-in-JS even isWhat Emotion does differently than other CSS-in-JS librariesHow to actually use Emotion to style your projectsHow the JSX pragma works and what it's forHow Emotion works under the hoodPerformanceAdding global styles to your projectStyle re-use and composition in EmotionUsing Emotion with server-side rendering

Sponsors:

Cloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for freeDigitalOcean, get your free $50 credit at do.co/fullstack

Links:

EmotionGlamGlamorGlamorousStyled ComponentsJSX pragmaCSSStyleSheet.insertRule()Global styles in EmotionServer-side rendering in Emotion

Topics include:

How pattern matching works in Elixir and why it's more powerful than method overloading in other languagesHow Elixir's pipe operator makes the transition from OO to functional programming more naturalWhy you don't need to be intimidated by unfamiliar features like GenServers to use Elixir for web app developmentNoticeable differences between working with Rails and Phoenix and what it was like to transitionHow the Phoenix ORM makes n+1 queries impossibleWhy background tasks are a lot easier in Elixir than in an ecosystem like PHPWhat other tools and technology power the Changelog platformHow the Changelog Phoenix app is deployed

Sponsors:

DigitalOcean, get your free $50 credit at do.co/fullstackCloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for free

Links:

Building rapid UI with utility-first CSS, Adam's episode of JS PartyElixirPhoenixChris McCord on The ChangelogThe Changelog source codeConfident Ruby"Why we chose Turbolinks"Programming Phoenix bookElixir ForumOur Slack

Topics include:

How Gatsby is more than just a static site generatorHow you create pages with Gatsby and how it's more powerful than traditional static site generatorsThe benefits of having a unified data access layer for all of your contentHow to build dynamic applications with GatsbyWhy Gatsby is actually faster than static HTMLHow Gatsby makes performance best practices easyGatsby 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 freeDigitalOcean, get your free $50 credit at do.co/fullstack

Links:

GatsbyGraphQLgatsby-imageReach RouterThe PRPL PatternJason on Twitch

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 curveHow to translate Vue's computed properties to React using the useMemo hookHow to translate Vue's watchers to React using the useEffect hookHow to translate Vue's v-model to React using value props and event listenersHow to translate Vue's events to React using callback propsHow to translate Vue's slots to React by passing JSX as a normal propHow to handle transitions in React with libraries like Pose

Sponsors:

DigitalOcean, get your free $100 credit at do.co/fullstackCloudinary, 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 blogReact docsIntroducing Hooks at React ConfHooks docsVue Template ExplorerPose, animation library for React and VueOverreacted.io, Dan Abramov's React blog

Topics include:

Why you need more than just a product, and what Justin brings to the table in his partnership with JonHow having an audience helped him get his first customers, even in a crowded marketWhy 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 advertisingWhat Justin's day looks like working on Transistor as the marketing focused side of the partnershipHow 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 freeDigitalOcean, get your free $50 credit at do.co/fullstack

Links:

Transistor, Justin's podcast hosting businessBuild your SaaS, Justin's podcast on building Transistor with JonThe Good News Podcast, Cards Against Humanity's podcast hosted on TransistorThe Transistor blogTransistor's revenue metricsRewardful, the affiliate SaaS Justin usesProfit First

Topics include:

How Now is trying to bring the CDN experience to your server-side codeHow the constraints of serverless can nudge you to build more robust solutionsHow to talk to a database in a stateless serverless environmentBest practices for deploying serverless code when you have a centralized data storeWhy routing should be handled at the Now configuration level instead of in application codeHow Now functions are different from microservices, and how you share code between themHow Now bundles your project using buildersCreating a monolithic project with Now that uses different programming languages for each endpointHow the upcoming "now dev" feature will enable you to simulate a serverless environment locallyA 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/fullstackCloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for free

Links:

ZEITNext.jsNow.shNow builders on GitHubNow Monorepo exampleWordpress running on Now on nowThird-party services for serverless projects: Cosmos DBScaleGridComposeDynamoDBFirebaseAmazon AuroraAuth0

Topics include:

How Jeffrey has written CSS historically, and what drew him to a utility-first approachIncrementally replacing Bulma with TailwindThe importance of solidifying your Tailwind configuration before beginning to implement a designThe new Tailwind color systemWhy 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 CSSHow Tailwind helps with performance by letting you keep your CSS cachedHow 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 CollectiveImageCon, Cloudinary's upcoming conference for any developer who works with rich media. Get 15% off using the code FULLSTACKRADIO15.

Links:

LaracastsTailwind CSSGroup Hover in TailwindMobile Twitter, responsive app without media queriesTheming Tailwind demo on GitHubEasy Tailwind Themes Using CSS Variables, free lesson on LaracastsLaravel, Vue and SPAs, Laracasts series on building an SPA with Tailwind CSSLaraCats.com ?

Topics include:

Pain points you run into when you are working in a JS based UI instead of a server-rendered UIWhat Livewire is and where the inspiration came fromHow Livewire lets you build interactive user interfaces with server-side codeThe challenges of stateful long-running processes in PHP and using stateless AJAX requests as an alternativeWalking through a worked example of using Livewire to build an interactive dropdownWhat'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-ordersCaleb's blog, loaded with great Livewire contentNo Plans to Merge, Caleb's podcastSharing Data in a Laravel/Vue Application on the Zaengle blogEmbrace the Backend, Caleb's talk at Laracon 2018Phoenix LiveView unveiling at ElixirConf 2018morphdomSign up for Livewire updates

?You can now pre-order Full Stack Radio shirts and stickers! Learn more ?

Topics include:

Semantic versioning and why there hasn't been a v1.0 release alreadyHow v1.0 will be encouraging people to leverage the default design systemBreaking changes and what the upgrade story will be likeWhat's coming after Tailwind CSS v1.0

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 Collective

Links:

Full Stack Radio T-Shirt + Sticker Pack Pre-ordersTailwind CSSAdam's Work Journal, where writes about his progress on v1.0The v1.0 To-Do ListPR explaining the new config format

Topics include:

Why the UI fidelity threshold for building an SPA feels so lowHow forcing yourself to prepare data for Vue helps avoid putting too much logic into your templatesWhy it's still worth building your app as a traditional server-based web app, even if you are using Vue for your entire UIPerformance and complexity benefits of being able to prepare data for the view in a controller instead of having to build an APIStrategies for dealing with things like accessing routes, checking authorization rules, and other things you'd normally do in a Blade templateSwitching 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 CollectiveCloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for free

Links:

LaravelVue.jsServer-side apps with client-side rendering, from Jonathan's blogExample projectZiggy, package for accessing your Laravel routes on the client

Topics include:

Building an API without writing any controller codeThinking of your API like a database as much as possibleModeling everything on the server as a resource, including things like S3 upload signaturesUsing 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 CollectiveCloudinary, 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 siteJSON:API, the API spec Sam uses to build his SPA backendsJSONAPI::Resources, the Rails gem for declaratively building a JSON:API compliant APIFirebaseVuexApollo GraphQL

Topics include:

Why you should think of SPAs as desktop apps instead of web appsStrategies for pushing complexity out of your backend and on to the clientBuilding optimistic UIsBest practices for storing and retrieving dataWhy 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 freeRollbar, 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 siteCruddy by Design, Adam's talk on modeling with resourcesProgressive Enhacement is Dead, Long Live Progressive Enhancement, a talk from Tom Dale that talks about building offline-first web applicationsEmber DataJSON:APIEmber-Orbit

Topics include:

What exercises you should focus on and whyHow to develop a system that will force you to make progressThe importance of keeping a training journalWhy full-body workouts are better than training a specific muscle group each dayThe importance of mobility for both training and your work lifeWhy building strength is so important as you ageWhy you shouldn't trust trainers trying to sell complex exercise programsWhy you probably shouldn't be running for exerciseWhat 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 CollectiveCloudinary, sign up and get 300,000 images/videos, 10GB of storage and 20GB of monthly bandwidth for free

Links:

Starting Strength by Mark Rippetoe5/3/1 by Jim WendlerDeskbound by Kelly StarrettAtomic Habits by James ClearStrong app for iOS"Why You Should Not Be Running" by Mark RippetoeThe MobilityWOD BattleStarRogue FitnessAdam's last powerlifting competition on YouTubeHabits for Hackers, Ben's latest course

Topics include:

Issues you run into when you do too much work in code instead of in the databaseWhy memory usage is just as important as query countHow being smarter with your database usage can let you avoid hard problems like cache invalidationDenormalizing computable data to make it queryableUsing "where not exists" strategically to improve query performanceWhy the solution to n+1 problems isn't always as simple as eager-loadingHow 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 monthRollbar, 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 blogSource code for Jonathan's Laracon Online talkThe benefits of NOT EXISTS on StackOverflowAdvanced Eloquent, Jonathan's Laravel package

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 month

Links:

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