On Rubber Ducking, Spencer Miskoviak & Chris Schmitz discuss their development experience, excitements, and challenges with React, TypeScript, JavaScript, Design Systems and anything else that might be on their mind this week.
Spencer Miskoviak & Chris Schmitz
Accelerate Nx lernayarn workspaces bazelrush
Using Git to run ESLint on changed files in a feature branch - by Jeff Auriemmareact-i18nexteslint-plugin-i18nextPurgeCSSUnCSSPurifyCSSJeff AuriemmaBlog: jdauriemma.comGitHub: github.com/bignimbus
eslint-plugin-react@typescript-eslint/eslint-plugineslint-plugin-prettiereslint-config-prettiereslint-plugin-jsx-a11yeslint-plugin-react-hookseslint-plugin-testing-libraryeslint-plugin-jest-domeslint-plugin-importeslint-plugin-react-reduxTools for an evolving Design System - use cases for custom linting rules.
Yarn workspacesbabel-loaderreact-fast-refresh-webpack-pluginspeed-measure-webpack-pluginsass (Dart SASS)webpack DLL PluginMake more things into components
ESLint CacheRethinking Design Practices - React Conf AUreact-hot-loaderBraid 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 NotesGraphiQLapollo-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-cutter object factories typed-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
reselect for selectors Normalizing data with normalizr TypeScript's ReturnType using 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) normalizr reselect Scaling data selection on the client react-redux redux-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