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

Image for post
Image for post
Photo by Anders Jildén

👋 Hey! I’m no longer publishing new content on Medium. All new posts will be published on my personal site: https://skovy.dev. This post and all others are at https://skovy.dev/blog.

Recently, I shared typed-scss-modules, a command-line interface (CLI) for generating type definitions for CSS Modules using SASS. I’ve used many npm packages that provide executable commands, such as tsc from TypeScript, or apollo for Apollo GraphQL tooling, but have never created a package with an executable.

Considering typed-scss-modules is a tool for generating TypeScript type definitions, it seemed fit to also be written in TypeScript. But where to start?

📦 Getting Started

After searching around and also digging through various packages that offered executables the packages below were the most helpful when creating a TypeScript command-line npm package. …


Image for post
Image for post
Photo by ariel sion

👋 Hey! I’m no longer publishing new content on Medium. All new posts will be published on my personal site: https://skovy.dev. This post and all others are at https://skovy.dev/blog.

CSS Modules can be a great tool for maintaining styles in a large codebase. It works much like vanilla CSS with the primary difference being all class names are local by default. This works well in modern component-based architectures where a single style module can live alongside the component that relies on those styles.

Since a CSS Module is vanilla CSS by default, it doesn’t introduce a steep learning curve. But in a large codebase, it’s not desirable to repeatedly define specific values (such as color hexes), especially if using a design system. There are approaches specific to CSS Modules for adding support for variables, but SASS is a reliable technology to add support not only for variables but many other useful features. …


An overview of the benefits, general patterns, and tooling.

👋 Hey! I’m no longer publishing new content on Medium. All new posts will be published on my personal site: https://skovy.dev. This post and all others are at https://skovy.dev/blog.

Over two years ago, we started migrating the Handshake frontend tech stack from CoffeeScript and Knockout to TypeScript and React. One of the first things added was a directory named common with a component that was considered “common” and reusable across many features and contexts. The name stuck, and internally we often refer to our design system components as “common components.” …


Image for post
Image for post
Photo by Karsten Würth on Unsplash

👋 Hey! I’m no longer publishing new content on Medium. All new posts will be published on my personal site: https://skovy.dev. This post and all others are at https://skovy.dev/blog.

When working with React, components can be written in a number of ways as functional, class or pure components. In the majority of use cases, they can be used interchangeably. Sprinkle in Redux and decide which file(s) the presentational and container components live along with the mapping functions. Consider adding TypeScript and choosing between a type or interface. What about file structure, naming conventions and maybe a few more libraries? …


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

Image for post
Image for post
Credit to Brad Turner for the logo.

🤔 Why “YATP?”

“Yet Another Tech Podcast”

One day, Chris mentioned something to me about starting a podcast to discuss frontend related topics. I had just seen this tweet, so I couldn’t help but laugh and reply with it.

Although there are a lot of great tech podcasts out there already, we think everyone has unique experiences and perspective that are worth sharing. We both enjoy publishing on Medium but wanted to explore another medium (no pun intended).

One of our core values at Handshake is “Learn. Grow. Repeat.” We see the podcast as an opportunity to do this by exploring new ideas and technology, and refining our ability to share them. However, our favorite part is sharing what we are learning and contributing to the community. …


useTypeScript();

The next version of React (16.7.0-alpha.0) was recently released with added support for React Hooks. Hooks bring many of the features that were only available with class components to function components and can help solve other problems, like “wrapper hell.”

Edit 2019/03/09: React Hooks were released in 16.8.0. See the release blog post for more details.

Image for post
Image for post
Photo by rawpixel on Unsplash.

There is already great documentation coverage for Hooks, and I would recommend reading the React Hooks documentation if you have not yet. …


Image for post
Image for post

👋 Hey! I’m no longer publishing new content on Medium. All new posts will be published on my personal site: https://skovy.dev. This post and all others are at https://skovy.dev/blog.

In a previous post and React meetup talk, I shared several patterns and tools for managing complex features with React and TypeScript. Many of the code samples were using component dot notation, and I briefly mentioned it but did not go in depth about the advantages of using this approach. This post will dive into the advantages of using component dot notation, highlight a few gotchas and provide some examples.

What is component dot notation?

As the name suggests, it’s using a “dot” to access the property of an object, more commonly referred to as dot notation. However, since this is at the component level (which are still just objects), I prefer “component dot notation” for clarity. A quick example of this is React Context. ThemeContext is created and is the top-level component. Both the Provider and Consumer are then sub-components of ThemeContext accessed using dot notation. …


👋 Hey! I’m no longer publishing new content on Medium. All new posts will be published on my personal site: https://skovy.dev. This post and all others are at https://skovy.dev/blog.

When writing frontend tests I always find factories useful for stubbing the data layer. At the simplest level, a factory is responsible for “manufacturing” data — hence the term. Similar to a real-world physical factory, it’s responsible for repeatedly outputting a “unit” following a specification, in this case, an object. …


👋 Hey! I’m no longer publishing new content on Medium. All new posts will be published on my personal site: https://skovy.dev. This post and all others are at https://skovy.dev/blog.

CSS was one of the first technologies I learned and originally piqued my interest for software. After years of writing CSS I’m still amazed what can be done with it. Like many people, I started writing vanilla CSS and later moved on to SCSS. In today’s ecosystem — particularly with component-based frameworks like React or Vue — the “CSS-in-JS” approach is a popular choice for styling components. …


👋 Hey! I’m no longer publishing new content on Medium. All new posts will be published on my personal site: https://skovy.dev. This post and all others are at https://skovy.dev/blog.

Recently, I’ve been hearing about Reason and ReasonReact in JavaScript community newsletters, surveys, and twittersphere. After hearing some interesting things, I decided to play around with it and try to learn it in the best way I know, make a small web app.

Image for post
Image for post

I set out to build a basic sudoku board. It’s straightforward but has enough complexity that would require learning a spectrum of Reason and ReasonReact features such as components, state management, styling, and basics of data structures for preloaded state for various boards and validation. …

About

Spencer Miskoviak

No longer actively posting on Medium. For newer content please visit my personal blog: https://skovy.dev

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store