 Resources from Shawn Wang in 2024

Today, you can't do anything in JavaScript without bumping into a CLI. 

Want to install a library? `yarn` add it. 
Want a React app? `create-react-app`. 
Want to format your JavaScript? `prettier --write`. 
Want your types checked? `tsc`. 
Bundling? Pick from `webpack`, `rollup`, or `parcel`. 
Deploying? `now` or `netlify deploy`. 

CLI's are everywhere, and even if you don't write them, sooner or later you'll have to debug them.

This workshop serves as a comprehensive survey of the state of the art of CLI tooling for everyone looking to make an impact in open source, across their company, and even in their own productivity.

Check out these [**community notes for this course on Github**](https://github.com/eggheadio-projects/build-custom-cli-tooling-with-oclif-typescript-notes).

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

Build Custom Command Line Interface (CLI) Tooling with oclif and TypeScript

Learn TypeScript in practical context with React examples!

Bite-size video tutorials for badass web developers.

egghead

TypeScript for React Developers

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Storybook is a UI component development environment for React, Vue, and Angular. With that, you can develop UI components without running your app.

Here I show how to set up Storybook to display React components from scratch.

Set up Storybook for React from Scratch

Storybook is a UI component development environment for React, Vue, and Angular. With that, you can develop UI components without running your app.

Here I show the best configuration for React Storybook, and walk through adding your very first React Component and Story to your Storybook.

Add your first React Story to Storybook

Storybook is a UI component development environment for React, Vue, and Angular. With that, you can develop UI components without running your app.

Here I show how to add a landing/welcome page to your Storybook, so that first-time viewers get to read a message from you or have some orientation around the structure of the Storybook you are building. We also introduce the idea of sequential additions to your Storybook config so you can get a sense of how to modify it for your own needs.

Add a Welcome Page with Sequential Stories to a React Storybook

Storybook is a UI component development environment for React, Vue, and Angular. With that, you can develop UI components without running your app.

Storybook has a rich Addons ecosystem that really adds a lot to the developer experience. Here I show how to set up the JSX Addon in Storybook to display the code behind React components. The juxtaposition of code and visual display can be very effective documentation for any users of your components.

Display the JSX of a React Storybook Story with the JSX Addon

Storybook is a UI component development environment for React, Vue, and Angular. With that, you can develop UI components without running your app.

Here I show how to set up the Info addon to make your Storybook stories into interactive documentation, including the best way to style the Info addon to your heart's desires.

Apply Style to a React StoryBook with the Info addon to Turn Stories into Documentation

Storybook is a UI component development environment for React, Vue, and Angular. With that, you can develop UI components without running your app.

Here I show how to set up the Knobs decorator in Storybook to make your Storybook stories infinitely interactive based on their props, and not just your predefined Stories.

Create Interactive Storybook Stories with the Knobs Decorator

Storybook is a UI component development environment for React, Vue, and Angular. With that, you can develop UI components without running your app.

Here I show how best to configure a React Storybook to use [Typescript](/q/typescript) (with TSX). This lets you write your reusable components with maximal type safety. Please see the provided code for the full source.

Configure React Storybook for use with Typescript

Storybook is a UI component development environment for React, Vue, and Angular. With that, you can develop UI components without running your app.

In this short video I show how to set up the `react-docgen-typescript-webpack-plugin`, a neat plugin that leverages the types you are -already- writing for Typescript to autogenerate documentation. 

Automate Documentation Generation in your Typescript React Codebase with Storybook

Vim is a highly configurable text editor built to make creating and changing any kind of text very efficient. It is included as "vi" with most UNIX systems and with Apple OS X.

Every programmer starting to work in a *nix environment eventually finds themselves in VIM, the default text editor. Often by mistake! Because VIM lacks the typical polished GUI of normal programs, it can be hard to discover the correct sequence of commands to even exit the program. Once you learn how to exit VIM, then the next task is to also learn how to make VIM do what you want -while- exiting!

In this lesson we cover 7 different ways of exiting VIM, whether you are in EX mode or Command (also known as Escape) mode, whether you are editing a single file or several at once.

Exit Vim

In this course, we will learn how to set up all the necessary infrastructure to build a Design System of reusable React components, with state of the art developer experience enabled by Typescript and Storybook.

A design system is a series of components that can be reused in different combinations. Design systems allow you to manage design at scale. Head to designsystemsrepo.com and you can see Design Systems used by some of the biggest companies and strongest brands from Priceline, Apple, IBM, Wework, Github, and even the US Government. Design Systems can be a significant productivity multiplier in any medium-to-large project or company because you can document your components as you develop them, ensure a consistent look and feel throughout all your screens, and have a seamless workflow between designers and developers.

Introducing Design Systems with React and Typescript in Storybook

Continuous deployment is the gold standard for any DevOps process. Frontend developers can take advantage of the reliability of version control in git, and extend that to the production deployment process. In this lesson we see how to set up and deploy a static site on Netlify, make and push a change to Github to trigger continuous deployment, and revert changes when necessary

Continuously Deploy any Static Site on Netlify

In this lesson we start from an empty directory and bootstrap a React TypeScript app with create-react-app. Then we write our first React TypeScript Component and add our first types, including an optional type.

Write your first React TypeScript Component 

In this lesson we see how to refactor a function component into a class component with typed props and state as well as defaultProps.

Refactor a React TypeScript Function Component into a Class Component with defaultProps

There are many ways to type event handlers with TypeScript, and we use the case study of controlled components to explore the 3 major ways to do this. Then we refactor to use the createRef API to write uncontrolled components, and explore the typing strategies for that as well.

Write Controlled and Uncontrolled Components for Forms with React and TypeScript

TypeScript's Basic Types are worth exploring with a view toward practical usage in React Components. Furthermore, you can comment your components and your types and have them show up in your tooling, for example your IDE, or even autogenerated documentation for your design system.

Write Self Documenting React Props with TypeScript Basic Types and Inline Comments

Here we refactor a React TypeScript class component to a function component with a useState hook and discuss how props and state types can be modeled accordingly.

Write a stateful Component with the React useState Hook and TypeScript

Because @types/react has to expose all its internal types, there can be a lot of confusion over how to type specific patterns, particularly around higher order components and render prop patterns. The widest and most recommended element type is React.ReactNode, and we build up to it by explaining the edge cases.

Use React.ReactNode for the children prop in React TypeScript components and Render Props

Individually defining props doesn't scale especially if you are wrapping native DOM elements, for example for the purpose of building up a Design System. Fortunately, there are easy strategies to lend full TypeScript support to your custom React elements, without excessive typing.

Impersonate Native DOM Elements with React Components and TypeScript for Full Reusability

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

node

Before you use any frameworks, you should know the fundamentals of what makes Node CLI's tick. Here we explain everything you need to know to write a complete Node.js CLI from scratch, parse arguments, publish it to NPM for users, and set up yarn symlinks for optimal developer experience.

Topics

Instructors

Content Type

Shawn Wang