Rubber Ducking: Recent Episodes
Spencer Miskoviak & Chris Schmitz
On Rubber Ducking, Spencer Miskoviak, Chris Schmitz & guests discuss their development experience, excitements, and challenges with React, TypeScript, JavaScript, Design Systems, and anything else that might be relevant.
- Accelerate
- Nx
- lerna
- yarn workspaces
- bazel
- rush
- Using Git to run ESLint on changed files in a feature branch - by Jeff Auriemma
- react-i18next
- eslint-plugin-i18next
- PurgeCSS
- UnCSS
- PurifyCSS
- Jeff Auriemma
- Blog: jdauriemma.com
- GitHub: github.com/bignimbus
- eslint-plugin-react
- @typescript-eslint/eslint-plugin
- eslint-plugin-prettier
- eslint-config-prettier
- eslint-plugin-jsx-a11y
- eslint-plugin-react-hooks
- eslint-plugin-testing-library
- eslint-plugin-jest-dom
- eslint-plugin-import
- eslint-plugin-react-redux
- Tools for an evolving Design System - use cases for custom linting rules.
- Yarn workspaces
- babel-loader
- react-fast-refresh-webpack-plugin
- speed-measure-webpack-plugin
- sass (Dart SASS)
- webpack DLL Plugin
- Make more things into components
- ESLint Cache
- Rethinking Design Practices - React Conf AU
- react-hot-loader
- Braid Design System
In this episode, Chris and Spencer discuss using Apollo and tooling to work with TypeScript to generate type definitions based on the schema, using the schema for mocking in testing, and more.
Show Notes
- GraphiQL
- apollo-tooling used for codegen
This episode, Chris and Spencer discuss server-side rendering with React and TypeScript along with the challenges of incorporating other libraries.
This week Robin Lim joins Chris and Spencer to discuss engineering management and his path from a software engineer, to an engineering manager and currently a director of engineering.
Following up on previous discussions, Chris and Spencer discussion the early work to adopt code splitting with React, TypeScript, and webpack.
Show Notes
- TSConfig module (esnext/commonjs)
- TSConfig removeComments
- webpack splitChunks config
- React.lazy / React.Suspense
This episode Chris and Spencer discuss efforts to "decouple" webpack from the Rails Asset Pipeline by implementing a lighter version using webpack plugins and a few Rails helpers.
Show Notes
- webpack
- Rails Asset Pipeline
- Sprockets
- Squeezing Webpack into backend frameworks
On this episode, Chris & Spencer discuss starting to collect frontend performance metrics and the different metrics that can be collected.
- Google Web Fundamentals
- First Paint
- Time to Interactive
- tti-polyfill
- First Input Delay
- Turbolinks
- Rails Asset Pipeline
In this episode, Chris & Spencer discuss approaches for maximizing the value of a design system for product, design, engineering, and other stakeholders. Covering how it can fit into the product development life-cycle and how to think about [1] using the system as is, [2] modify the system, or [3] one-off the implementation (avoid the system).
- styled-components
- Reach UI
- Lerna
A quick follow-up to the previous experimentation episode, and a more in-depth discussion around "what belongs in Redux?", the evolution of thoughts around it and athe lessons learned around a bad abstraction Spencer wrote.
Show Notes
- Episode 11 - Experimentation and Feature Rollouts
- Episode 4 - Scaling Redux
- redux-form
In this episode, Chris & Spencer discuss code generation specifically around using CSS Modules, SASS and TypeScript to add additional type-safety when referencing class names using the typed-scss-modules package.
Show Notes
typed-scss-modules- Generating TypeScript definitions for CSS Modules using SASS
- Creating a CLI with TypeScript
- CSS Modules VSCode Extension
cooky-cutterobject factoriestyped-css-modules- TypeScript
esModuleInterop - Apollo tools
foreman- Rubber Ducking Episode 2: Code Generator
- Using Code Generators to Share and Document Best Practices
This episode, Chris & Spencer discuss feature rollouts, experimentation toggles, tracking, specific components and consuming the toggles on the client.
Show Notes
- LaunchDarkly
- Fullstory
- Segment
In this episode, Chris & Spencer discuss testing our design system components with react-testing-library and the recent news of Yarn being rewritten in TypeScript (along with other features and changes).
Show Notes
- Yarn's Future - v2 and beyond
- Mocha
- Chai
- Enzyme
- Rubber Ducking Publication on Medium
- react-testing-library
- Jest
- RRU 043: Testing React Apps Without Testing Implementation Details with Kent C. Dodds
- Capybara
- Mocking CSS Modules with Jest
This episode, Chris & Spencer discuss querying (selecting) data on the client, how they use reselect with Redux, and the pros/cons they experienced when initially adopting it up to today.
Show Notes
- Episode 4: Scaling Redux
reselect
On this Episode, Chris & Spencer discuss recent efforts migrating from a monolith to domain-driven services, replicating data with Google PubSub, creating a GraphQL endpoint and consuming that endpoint with React, Apollo and TypeSript.
Show Notes
- Adopting GraphQL and Transitioning to Domain-Driven Services
- PubSub
- GraphQL
- graphql-ruby
- React Apollo
- Apollo TypeScript Definitions Generator
- GraphQL Introspection
In this episode, Chris & Spencer discuss their current efforts to migrate the design system (components, colors, typography, etc.) to a dedicated repository covering the various tooling and processes around publishing a package to a private registry, testing, linting, documentation and automated releasing with semantic-release.
Show Notes
- Migrating a design system to a dedicated repository - Medium
- MDX
- Docz
- CODEOWNERS
- semantic-release
- commitlint
- commitizen
- yarn link
reselectfor selectors- Normalizing data with
normalizr - TypeScript's
ReturnTypeusing type conditionals - The previous package we used for object factories:
rosiejs - Spencer's package for object factories:
cooky-cutter
Brad Turner (the first guest!) joins Chris & Spencer on this episode to discuss recent changes in the colors in Handshake's Design System, the decision process and how the color system was developed.
- Brad’s Colors App
- Brad’s Twitter
- Lyft Color System
On this episode of Rubber Ducking, Chris & Spencer discuss their experience using Redux in the context of React and TypeScript.
redux- A Philosophy of Software Design (Book)
normalizrreselect- Scaling data selection on the client
react-reduxredux-logger- Redux Devtools
redux-form
Chris and Spencer discuss the recent release of React Hooks and speculate on what it means for day-to-day development on feature work, what might change and potential pros and cons of different scenarios.
- Making Sense of React Hooks by Dan Abramov
- React Hooks and Suspense videos by Kent C. Dodds
- Example showing concerns color-coded
- React Hooks Documentation
- React Conf 2018
- React Hooks type definitions closed in favor of this Pull Request
- React v16.6.0 release blog post
Chris and Spencer discuss the Principles of Component API Design (or Prop Design) and lessons they've learned while creating components.
- Principles of Component API (Prop) Design
- Make Impossible States Impossible
- Using component dot notation with TypeScript to create a set of components
- Building the Next Generation of Search at Handshake