Storybook addons need a matching @storybook/addons version. Here's how to ensure it gets it.Addons Need a ChannelIn Storybook, you preview the components you're writing with some nice surround UI to navigate and manipulate them. For this UI to communicate with the preview pane, there is a channel co...

Here's how to install an old, previously-installed brew formula.(tested on Hombrew 1.36)Deprecated: List Available Versions on TapThere used to be a command, brew versions, where you'd try to list the versions of a formula ready to install. If I was looking for hugo versions, I'd type brew versions ...

Webpack's externals property indicates code is available in the runtime environment.Cannot Resolve ModuleIn a recent project, I ran the webpack build and got an error something like:ERROR in ./~/xmlhttprequest/lib/XMLHttpRequest.js Module not found: Error: Cannot resolve module 'child_process' in /U...

The triple dot in JavaScript can be used as a spread operator or in a destructuring assignment.The SyntaxIn the latest versions of JavaScript, the triple dot (or ...) is used as a new syntax for two separate concepts:Spread operationDestructuring assignmentBut because the syntax (at least the ...) i...

Here's the difference between React PropTypes.oneOf and PropTypes.oneOfType.Why PropTypesPropTypes are a way for you to indicate how you want your React Components used. By defining PropTypes, React will warn developers when they're passing the wrong props to your component, preventing bugs and givi...

Here's an example of a Result type in Flow.Updated 27 Oct 2017 per Harish's suggestion for using exact object types.Result TypeIn functional programming, a Result type can be useful for representing things that might fail. It becomes a common interface that you can return from these potentially-fail...

Solo coding can be done so-as not to be "in a corner" and produce high quality code.This thing was not done in a cornerActs 26:26How We Describe ThingsHow we describe things exposes what we think about them. Often I have heard solo coding as "in a corner", as "coming out of a dark room after hours o...

Don't publish your .babelrc file to npm if you have pre-built your package.Publish .babelrc if Compiling Still RequiredIt's possible that you intend for others to compile the code you publish to npm. You'd do this if you published your source to npm without precompiling but are using features not in...

Here's how to type props for a child component that has props cloned onto it.This is for you, @nguyenmanh1507! :)React Clone Props onto ChildrenIn React, you can send props to children. This is a way for a parent component to provide a child component with data it didn't already have.Many times this...

Flowtype gives type errors to help you consider all function code paths.Other Potential PathsOften we are only paying attention to the happy path that we're developing in our code. This may lead to bugs later on that we hadn't anticipated from the other code paths that exists in different branches o...

Here's a way to hide an app from the application switcher UI in MacOS.App SwitcherThe application switcher UI is what shows up when you press Cmd-Tab in MacOS. It allows easy switching between apps.If, for some reason, you don't want your app to show up there, you can do that with a small change to ...

How to make React error boundaries work in event handlers.React Error BoundariesIn React 16 there is a new feature called error boundaries.This feature allows you to wrap components in React components that act as try-catch blocks. These boundary components have a new lifecycle method implemented ca...

My family makes my creativity possible and enables it.InspiringI have been creating things since I was a small child. I believe there's an innate desire within us as humans to create.More than this nature, however, I was blessed with the nuture of parents who really instilled confidence and support ...

It matters more what you do with your learning than what you learn.Why Learn?Why do you learn new things? Why do you approach a new programming language? Why do you want to learn?We all feel like growing. And growing, in itself, brings its own kind of satisfaction.I hear "What should I learn?" or "H...

Today, reading prose is important to getting the job done in code.The Prebaked WorldHow much software has been created in today's coding environment? A lot! There is a lot of existing art, and we build upon it to do bigger and better things.We make new, interesting combinations of things. Our job be...

A way to deploy multiple packages in Lerna monorepo to Heroku.Lerna PackagesLerna is a project that allows you to manage multiple JavaScript projects in a a single monorepo.The packages are stored in a packages/ directory. For our purposes, let's say that we have this directory structure with 2 proj...

Here are a few reasons why I prefer and default to stateless functional React components.Two FlavorsThere are two syntaxes available to write your React components. One, class style:import React from 'react' class MyComponent extends React.Component { render() { return My component! } }The other, fu...

When we have real hope in a better future, we are grateful for every attempt others make to help us get there.Real HopeHope is a quiet faith. It’s an assurance of things not seen. It is graceful.We believe that the future holds improvement. This comes quietly. This doesn’t come while shouting, argui...

This is an example of how I like to name related subcomponents in React.Meaning of RelatedRelated components are those that are used together to perform some greater task. They work together.A related component might define its relationship as a subcomponent, used as a child of a parent component.To...

We get hung up on how we make something when we could just be making it.Creations ShippedWhat's really important is what you shipped. How you accomplished this feat is influential in getting the thing shipped, sure. But the "how" can also get in the way.When taught silver-smithing by his mom, Richar...

How to render the current route's active links on the server.Client-side Active LinksOn the client, the tool you might usually reach for is the obvious one: window.location. If my current location matches the link's intended location, I can style an anchor tag as active route.This might look like:co...

Reasons for separating a React component into its own module.It's an ArtSo much in decision-making depends on context. Separating modules, just like painting a picture, is an art because there's no single best way to accomplish good modularization. Here are some of the things that I think about -- s...

Use a slack #channel, not @channel, to broadcast.Who are you talking to?Who do you want to tell your great thing to? Who are you trying to reach?This question is answered by the #channel that you are in. If you are in the #engineering channel and type something and send it, everyone in that channel ...

Advancements in JavaScript further the frontend craft. Here are some advancements that I believe are important to us today.Rapid Spec ImprovementsHasn't it felt like there have been a lot of upgrades to JavaScript itself in recent years? I feel like the TC39 committee, responsible for evolving the l...

Modern frontend dev is enabled by growing browser capabilities. There are many exciting things happening in browserland. Here are a few that I care about.Offline SupportThe new approach to handling offline support, embodied in service workers, is so much better than what came before. It's now like y...

What writing JavaScript looks like for a modern web developer.I'll assume, for a moment that I'm that modern web developer. Hopefully my profile is modern and webby enough. We'll use my own experiences as a hopefully informative prototype of what writing JS in the modern web can look like.Bet on Jav...

Increased user expectations are driving what modern frontend dev entails.Here are a few things that the modern frontend web developer must concern himself with in order to make the applications that his users desire.AnimationsAnimations are now common place. Animations help provide polish for your p...

The first and most important step is to make it work.Works or BustWhat kind of a product do you have if it simply doesn't work? You don't. You really have nothing. It doesn't work.If you have something that works, there is at least potential value being delivered. You can test it. You can get feedba...

Make getInitialProps available to child components in Next.jsWhat is getInitialPropsNext.js adds a great little function to top-level (page) components. It gives access to a number of properties, such as the request and response objects and url information such as the pathname. For the full list, se...

Some projects are open-sourced to provide inspiration.Open by DefaultRecently I heard a talk where the speaker encouraged us to, when we make something, ask ourselves "could this be open source?". It was a good talk, and it's a good question.I think we can ask a better question: Why shouldn't this b...