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...

How to set fallbacks for CSSNext variables for which values aren't present.CSSNext VariablesCSSNext is a library that allows you to use tomorrow's CSS syntax and features today -- much as Babel does for JavaScript. One such feature is CSS variables.The variables are defined like::root { --superHot: ...

How I like to write JS arrow functions with no parameters.Arrow FunctionsAn arrow function is a syntax that defines as a function in an expression without using the function keyword. They're great because of their terse, understandable syntax. They serve well as inline functions. They have automatic...

Feature flagging in your frontend code will allow you to release continually.Continuous DeliveryContinuous delivery means that we release often, getting developed value to our users as quickly as we can. The master branch remains ready for production and contains all that we've written into our prod...

Dispatched action types must be unique. Namespacing can help.Redux ActionsRedux actions represent the important things that your app can do. "Important" might consist of things that need to be saved or things that the app as a whole might want to know about. Actions are represented as plain old Java...

Managing our own performance can be powerful and will be better than someone else doing it.What Success Looks LikeWhen you're successful, you'll know it, and so will your leader? Or will you? Or will they?When you state what success looks like, it makes it obvious. It reveals what you and your leade...

Edit your Github repo's wiki in your favorite editor.Github WikiYou likely have many of your code repos on Github. They have this nice feature of a built-in wiki per repository, so you can put helpful documents right next to the code.Perhaps you have wondered where these docs are stored, or perhaps ...

A long dependency list in a Node project is part of the philosophy.Different StacksThere are different tech stacks for different folks. Much of code is art, and there are so many ways that people prefer to experience art. I've heard people who are unused to Node look at a Node codebase and marvel at...

As a new programmer, you may be more challenged in landing jobs early in your career. Here are a few resume tips that focus on how to express your passion and early learning experiences.EnthusiasmIt's true for everyone, but more so for junior programmers, that your enthusiasm for the job will go a l...

Projects are simple and lightweight in Spacemacs, and it's awesome.No New ProjectIn Spacemacs you never go to the Spacemacs menu and select "New Project". What am I saying.. you keyboard to glory, typing Cmd-N for a new project. But no, Spacemacs doesn't even do this. You just start editing a file a...

Here are a couple helpful packages that will help you write better npm-scripts.rimrafrimraf is a package for removing directories. It is the equivalent of running rm -rf. You could, of course, use this unix command directly in your npm-scripts, but then your windows users would be hosed.First, insta...

JSX looks like markup in your JavaScript. It's not, and here's how the transform works.JSX OutputJSX is a superset of JS that allows you to write what looks like markup in your JavaScript code. It's often used for UI coding, because it looks like you can define HTML UIs, such as in React:import Reac...

Get your media queries right for mobile-first styling.FlexibilityThe best and most foundational styles for mobile or responsive design will be those that offer flexibility. "Flexible" means those elements that can respond to a changing viewport size without a media query. A media query defines a bre...

Developers and managers dream of fullstack developers.The Manager's Fullstack DreamA manager wants fullstack developers to fulfill a dream. He'll be able to staff any project. He'll be able to recruit from the widest talent pool. He'll be able to replace any developer with any other. He'll be able t...

Learn the syntax to export in these two styles in Node.js.Single Exportmodule.exports is the export style for a single export in a module. If you want to be able to require, alias, and use a single thing from a module, you would use this style. You would have a-module.js like:module.exports = () => ...

Jest is easy to use on a Lerna repo with a bit of config.Lerna Manages the Mono RepoLerna is a fantastic library for managing a mono repo. A mono repo is a version control repository that contains many separate but often related artifacts. These artifacts might be separate projects. They often have ...

We should be ok with ourselves and others saying this.A Terrible Admission"I don't want to learn that." I can feel terrible with I say this. In fact, I don't think I can hardly bring myself to say it. If I think it, I still feel terrible.I want to learn all the things. I want to be able to help out ...

These days, getting prettier into spacemacs is easy.I've tried a few different methods, and recently I tried again and found one that worked well out of the box. There is a repo for spacemacs-prettier at praveenperera/spacemacs-prettier that is the best I've found so far.InstallTo install, clone the...

A generator function is a different, special function.Differentiating SyntaxBecause it's different, a generator function has a syntax to mark it as such:function* myGenerator() {}Note the * after function. This is the function declaration difference. The * can be applied to arrow functions ()* => {}...

Easy and fully-highlighted code in Keynote presentations.Code in PresentationsYou're prepping to give your next big talk on some technical subject. You want a slide deck, and you want some nice code samples complete with syntax highlighting. You could get these a number of ways. You could take scree...

The most lightweight way to get an async/await function.No Async Function?It sure would be nice if you could await something without needing to wrap it in an async function. But, language-wise, these two go together. If you use await outside an async function, it's an invalid token. Inside the async...

Now, recreate the soup.., er library. You'll have a lot to figure it out, but it can be worth the price.In The BeginningWhen we write code, we stand on the shoulders of those that went before us. We use their tools and artifacts to make something bigger and better. Sometimes, however, it might be wo...

Writing ../../ can be a pain when importing modules from relative directories. Webpack can help.Vanilla JS Module ImportsJavaScript module systems usually use the filesystem as the API for importing files. There has long been a distinction between import paths for npm modules vs. local files:npm mod...

Don't worry that it's already been done. It has, and it hasn't. It doesn't really matter. Make your art.The Prize and Illusion of InventionDoesn't invention feel like such a prize? It's so good to feel like you've contributed something truly original to the universe. That happens, but not often. How...

Here's an easy example of how to send email using the aws-sdk on Node.js.Install SDKYou have the full power of Amazon's AWS SDK as soon as you install it for Node/JavaScript:npm install aws-sdkGet AuthorizedMake sure you setup a user in Amazon's IAM service that has access to the SDK. You'll need a ...

It's easy to make a video embed responsive, but it's not the default. Here are some styles that will help.Default YouTube EmbedWhen you find a video in YouTube you'd like to embed, it offers you some embed markup that looks something like this:This embed code is fine, except the width and height dim...

Styling children elements in styled-jsx doesn't have an ideal solution. Here's one way.What is styled-jsx?styled-jsx is a library to support CSS-in-JS. It was developed by Zeit for use in their awesome Next.js (React) apps.One of its great benefits is that it provides isolation of styles between UI ...