Tools for an evolving Design System

Design Systems evolve over time. What are some tools that can help make system-wide changes?

design system, jscodeshift, eslint, typescript

Decoupling a component's style from it's semantic meaning

An overview using the "as" prop pattern to control a component's rendered element

design systems, react, typescript, discriminated union

Typescript Explained In Javascript: Conditional Types

4th post in "TypeScript explained in JavaScript" series

Exploring TypeScript's Conditional Types with JavaScript

typescript, conditional types

Typescript Explained In Javascript: Mapped Types

3rd post in "TypeScript explained in JavaScript" series

Exploring TypeScript's Mapped Types with JavaScript

typescript, mapped types

Typescript explained in Javascript: extends

2nd post in "TypeScript explained in JavaScript" series

Exploring TypeScript's extends keyword using JavaScript.

typescript, extends

TypeScript explained in JavaScript: keyof

1st post in "TypeScript explained in JavaScript" series

Exploring TypeScript's keyof operator using JavaScript.

typescript, keyof

Make more things into Components

Encapsulating more logic and concepts into components.

react, components

Named Parameters in JavaScript

A quick look at how to use named parameters and the benefits.

javascript, named parameters, named arguments

Design System Principles

General principles for building and maintaining a design system.

design systems, principles, rules

The Hard Thing About Simple Words

A hard thing explained using only the ten hundred words people use the most often.

webpack, illustrated, simple words

React Concurrent Mode with TypeScript

Getting started with React Concurrent Mode and Suspense with TypeScript.

react concurrent mode, react suspense, typescript, type definitions, @types

Creating a custom transform for jscodeshift

Using a jscodeshift transform to automatically update Font Awesome imports to enable tree shaking.

jscodeshift, abstract syntax tree, codemod, font awesome, tree shaking

Check for missing dependencies with yarn and webpack

A plugin to check if there are missing or incorrect packages installed with yarn as a webpack plugin

webpack plugin, yarn

Contributing to DefinitelyTyped for the first time

A guide to add missing type definitions to the DefinitelyTyped repository

typescript, definitely typed, @types, first time contributing

Server side rendering icons with Font Awesome

Avoid Font Awesome flickering large icons on initial load with server side rendering

server side rendering, react, font awesome

Code splitting with webpack and TypeScript

An overview of code splitting with webpack, in a TypeScript and React app

webpack, typescript, react, code splitting, dynamic import

Tree Shaking Font Awesome Icons

An overview of tree shaking dead code with webpack and a specific example with Font Awesome

webpack, tree shaking, font awesome

Separating webpack from the Rails Asset Pipeline

An approach for decoupling a webpack build process from the Rails Asset Pipeline build process

webpack, rails asset pipeline, build process

Measuring Frontend Performance (in modern browsers)

The supported browser APIs and polyfills for measuring frontend performance.

frontend performance, time to interactive, first input delay, first paint, first contentful paint, typescript

Techniques for effectively using Object Factories for Testing

A few patterns for effectively using object factories for testing.

object factory, testing, typescript, best practices

Hello Gatsby, Goodbye Medium

Moving my personal content to skovy.dev with Gatsby.

gatsby, netlify

Creating a CLI with TypeScript

The tooling and steps to create a command-line npm package written in TypeScript.

typescript, command line interface, npm, yarn

Generating TypeScript definitions for CSS Modules using SASS

Tooling and approaches for integrating CSS Modules, SASS, and TypeScript to add additional type-safety when importing the styles.

react, css modules, typescript, sass

Migrating a design system to a dedicated repository

An overview of the benefits, general patterns, and tooling for maintaining a design system in its own repository.

design systems, react, semantic-release, typescript

Introducing Rubber Ducking: A Podcast about all things “frontend”

Chris Schmitz and I are excited to share Rubber Ducking, a podcast about React, TypeScript, CSS, Design Systems, GraphQL and anything related.

podcast, react, typescript, design systems

Using React Hooks with TypeScript

useTypeScript(); A few quick examples of what it will look like to use Hooks with TypeScript.

react, hooks, typescript

Using Code Generators to Share and Document Best Practices

Code generators are a great way to automate the small repetitive decisions and save time among many other advantages.

react, generator, rails, typescript, javascript

Component Dot Notation with TypeScript

The advantages of using component dot notation (accessing sub-components from a top-level component), a few gotchas and some examples.

react, components, dot notation, typescript

Object factories for testing in TypeScript

Introducing cooky-cutter, an object factory package written to be type-safe with TypeScript.

object factory, typescript, testing

Writing maintainable styles and components with CSS Modules

An overview of CSS Modules and some of the advantages the styling approach can provide.

css, styling, css modules

Thoughts after creating my first React app with ReasonML

My initial impressions after making a small web app written in ReasonML.

reasonml, javascript, react

Scaling data selection on the client

What is a selector? How do they help 'scale' querying data on the client?

react, redux, reselect

A Simple Blog with GraphQL, Apollo, React Router & styled-components.

An exploration into some of the other trending technologies in the JavaScript and React ecosystem today through a small web app.

graphql, apollo-client, styled-components, react-router