Arrow functions treat return values in a couple ways.Normally Returns are RequiredThere has traditionally been no implicit return in JavaScript functions. If you write a function using the function keyword, this remains true:function needsReturn() { 'awesome' } needsReturn() // returns undefinedFunc...

With limited time and focus, you get to choose where to spend them.These limits apply to many facets of life. How do they apply to meetings in particular?Meeting MultitaskingWe get choices to attend meetings every day. We can be there for a long time. The classic modern meeting hedge move is to brin...

Heroku is an great option to host a web app for free.Heroku's Sweet SpotHeroku is a platform as a service that is great for developers. You need a few skills to get started. Know how to use git. Well, I guess we're all disqualified already.Heroku doesn't really host websites. It hosts web apps. So, ...

Here's a quick, easy setup for a JSON Rest API.Quick and EasySometimes you want a rest endpoint that you can use for some short-term purpose. You're doing a demo. You're trying to get a candidate to write a client that interacts with an API. You want a fake API for testing.Whatever the purpose, if i...

How to set global styles in Storybook environment.Via AddonsThere are some addons that allow you to set global styles. One that I use is addon-backgrounds. It allows you to set background colors to have your components appear upon.To use it (or other style-affecting addons), install:npm install @sto...

Enforce a git commit message format for your project.Updated: 28 Aug 2017 to use commitmsg hook. Thanks to marionebl.Power of a ConventionYou could choose any format. One git commit message format that I like is conventional commits. With a convention, you can generate a changelog or use tools like ...

Here's a way to remove an array element without mutating the array.Default MutationsBy default, the array methods in JavaScript will mutate your array. Mutation means that the original array is changed in place. A common way to do this is with splice.With splice, you tell the array at which index to...

How to generate snapshot tests for Jest from Storybook.Snapshot TestingSnapshot tests are a type of test that takes your UI in a certain state and serializes it to a string. If this string changes, it means that your UI, for that state, has changed output. Because it's a simple string serialization,...

How to deploy a Next.js static site to Github Pages.Github Pages is a great place to deploy static Next.js sites.Setup Next.jsAs of next@3, a static export of your Next.js site is possible.This is accomplished with:next build && next exportWhen you export, you can specify the output directory with -...

CodeMirror is a great in-browser editor that needs some help when rendered server-side.In-browser Code EditorCodeMirror is a library that provides code and a UI for creating a coding environment inside your browser. There's an editable text area where you can type code, and as you write it, it's syn...

The most powerful teams come from the special combinations of members.Product of TeamsA great team is one that has a great time making a great product.To have a great time, we must enjoy working with the others on the team. We have a productive relationship. We inspire and help one another. We commu...

Your knowledge of a field is deeper when you're focused on it.Your SurroundingsStop wherever you are and consider your surroundings. Look around, making note of things you see. Do this for 30 seconds. Then close your eyes and list all the red items that you saw.Actors sometimes use this exercise to ...

In adopting tech, some are more conservative, some are more progressive, and we can help each other.People and New TechThe world of technology grows every day. There are new things to explore and try out.For some, that endless feed of new contains promises of new potential. They see new capabilities...

Change the page title when the user routes to a new page.A Great ToolThere are many ways to get the page title to change and some great tools to assist you. There is a particularly great tool that will do that and a bit more. It's called react-helmet.It can set anything that occurs in the head of th...

The ecosystem that CSSNext lives within can be confusing to name and navigate. Here's how I see the pieces fitting together.PostCSSBefore we get to CSSNext, let's visit PostCSS. PostCSS provides transform functions for CSS. These functions are written in JavaScript. PostCSS can assemble one or more ...

Why we go to lunch as a part of the interview process.We Need to EatWe're going to need to take time during the day to eat. Why not eat with someone else? Keith Ferrazzi wrote a great book, enticing us to never eat alone.When you're at lunch, eat. Use good manners, but eat like you always would. It'...

Add typing to your process.env access in Node.js.process.env Accessprocess.env is a globally-available object on which environment variables are accessible to your Node.js program.When you ask for an environment variable, such as process.env.MY_VAR, it may or may not be set. If it's set, it'll be re...

Here's a way to setup for types on a Node.js backend app.Flowtype Requires TranspilationFlowtype will provide types for JavaScript, which originally has so little type information that it has essentially none.You'll need to transpile from flowtyped-javascript into vanilla javascript that Node can ru...

Styled components create components that take their styles with them. Primitives style cross-platform components.An Imagined WorldIn his talk, React as a Platform, Leland Richardson imagines what React would be like if it went from "learn once, write anywhere" to "write once, run anywhere".He reason...

How to upsert in Knex.js.Postgres UpsertUpsert is a fantastic feature in SQL that works kind of like "insert a new row, and if it already exists, update it".In Postgres, the syntax is handled as:INSERT INTO table_name (column_name) VALUES (expression) ON CONFLICT (conflict_target) DO UPDATE SET colu...

An easy, consistent way to override CSS modules in React components.CSS ModulesCSS modules are fantastic because they scope your CSS. No longer does everything have to live in the global namespace.A natural boundary to scope CSS to is within a web component. A React component can have a correspondin...

This is a way to integrate flow with Spacemacs.Install FlowFirst, put flow somewhere in your PATH so that Spacemacs can find and use the binary no matter what project you're editing. The best option I've found so far is flow-bin, installed globally:npm install -g flow-binSpacemacs File WatcherPreins...

Here's a way to support both mouse clicks on a desktop and touches on a mobile device for event handling.Mouse EventsMouse events are most familiar, used on websites much earlier than touch. Familiarly, you can detect them and run your own even handlers with:const el = document.querySelector('button...

When you run into a problem, do you see it as permanent or temporary?Permanent Means NatureIf we believe our setbacks are permanent, we believe that's just the way things are. That is the nature of ourselves, our problems, or our world. It's hard to change nature.This is a rough place to be because ...

Never miss a one-on-one. It can send the wrong message.The Business of PeopleOne-on-ones are personal interviews with people you lead. It is a chance to communicate things that you each want the other to know. It's an opportunity to connect with each other as people. One-on-ones are about the busine...

Rest is good for the body and the mind.Humans Need RestRest is an opportunity to disconnect and have downtime. We as humans need it. We are not machines. We have a rhythm to our existence. We respond at different times to the changing circumstances within and without us.We don't operate at a constan...

Let's test-drive some ReasonML code together.The GoalOur goal will be to recreate a simple List.map from the stdlib. Ours will be called Listy.map. To get started, download the exercise on github:git clone [email protected]:jaketrent/reason-kata-map.gitAnd setup the project for development:cd reason-ka...

With some magic, change webpack without ejecting from create-react-app.No Customizations Supportedcreate-react-app was never built to be cracked open. It has so many secrets to hide. It was born in an era of frustration, where JavaScripters wanted to get on the React train but didn't want to go thro...

Here's a way to create and run automated unit tests within the ReasonML ecosystem.Young EcosystemReason is a language based on OCaml, which is not young. Reason compiles to JavaScript via Bucklescript. That's not confusing. :) The Reason/JS/Bucklescript thing is particularly young, which seems obvio...

When things aren't perfect, gratitude can help us see things in a better light.Life is PainAnyone who says differently is selling something.That's overstating it, but it is, nevertheless, universally true that life contains hardships for everyone. Life is meant to be hard -- not just for its own sak...