Blog

Refactor checklist

Read the file Take notes, add comments to explain the functionality Write passing unit tests Create a new file Switch unit tests to work on the new file Rewrite feature from scratch This way you're not stuck thinking through the problem the same way…

CSS Modules in ReasonML

Here's a super simple way to use CSS/SCSS modules with ReasonML. Note: this guide assumes that you already have your environment set up for Reason and CSS/SCSS Modules and only covers how to import and use the CSS/SCSS modules in your re files. I'm…

Bug fix checklist

There's nothing more bittersweet than finally solving a bug that you've been stuck on for hours, only to realize that you were on the wrong tab or git branch. We've all been there, and I've made this quick checklist to go through each time something…

Securing open source packages

Not to scare you too much, but did you know that according to scans done by the trusted Snyk, they found 77% of ~443K sites that they scanned contained at least one vulnerable NPM package? Security should not be an afterthought, like it is for most…

Common git commands

Git is a powerful version control system that allows people and teams to collaborate on source codes more efficiently and effectively. It saves history, allows you to work on features or bugs in parallel, peer review code before saving it to…

Using native system fonts

Here's the native system font stack that I use for all of my projects, unless the client has a preference to something else. Why use this font stack? Loading special fonts takes time to load, and sometimes leads to the dreaded flash when a website…

Common Vim commands

Vim is an old-school editor that's inspired by vi, the built-in editor on Linux terminals/shells. It's extremely powerful and designed with speed in mind, so practically everything can be done without using a mouse, via shortcuts and commands. A lot…

Single line to help debug CSS

As the name of the title suggests, this will be a very short post, though it's saved me countless hours of trying to see exactly where your HTML is laid out on your page. The code It's as simple as it gets. This line of CSS code says "outline all of…

Creating a copyright date that updates automatically

Practically every website has a footer with a copyright message at the bottom and a date for the copyright. On many of the websites that I've redesigned, there wasn't a simple function that updated the date for the copyright's year automatically…

Labeling function parameters in ReasonML

A common source of confusion for many people writing JavaScript applications are function arguments. Unless you use the object as a parameter pattern, it can get really difficult, really fast to remember how many arguments your function accepts and…

Piping functions in ReasonML

If you've read through the ReasonML docs before, you may have noticed that there's not too much information available on their syntax sugar for piping functions, which is one of my personal favorite features of using ReasonML. The pipe operator The…

Naming functions and variables

Naming things is hard. It's easy to remember what your functions, variables and files do/are without a good name in the moment that it's fresh in your mind, but it gets exponentially more difficult to remember as time passes by. Here are a few tricks…

Shorter syntax for event handler functions in React

If you've ever seen an older React.js component that contains state and/or an event handler function, i.e. handleClick, handleChange, etc. then you've probably seen the class written something like the example below: or maybe with the bind method…

Smart vs dumb components in React

You've probably heard the term "smart" and "dumb" in React.js before. "Smart" components are written as JavaScript classes and contain things like state and lifecycle hooks (such as componentDidMount(), etc.) and usually contain a variety of other…

Using prop types in React

PropTypes are an indispensable tool for declaring the types for your React.js component's props so that when the application is running and an incorrect type is passed, you'll see an error warning in the console. PropTypes are highly recommended if…

Creating modules with ReasonML

As we briefly discussed in my previous blog post about pattern matching in ReasonML, ReasonML is really powerful syntax for JavaScript with a lot of extra functionality to make your code more straightforward. One of the most important concepts to…

Pattern matching with ReasonML

ReasonML is a hot new JavaScript-like syntax with types, pattern matching, functional programming patterns built-in and much, much more. It's an incredible API from the brilliant minds at Facebook and I highly recommend trying it out if you haven't…

Customizing Prism

Prism.js is a syntax highlighter for code blocks on webpages. It's what I (and most other developers) use for sharing code blocks online when it's not embedded from a service like GitHub. Using built-in themes You can choose one of their built-in or…

React stateless functional components

Unless your component has internal state that it needs to manage, it's better to use a simpler type of component called "stateless functional components." Here are a few tips on using these in your application. Components without props These are…

Announcing Bulma Classnames

TL;DR - In addition to Sushi Commerce, I'm working on a simple, but powerful way to write Bulma.css classnames! Expected to release in May 2018 The problem Bulma is very modular and powerful css framework, similar to Bootstrap, Foundation, etc. One…

Using objects as function parameters

TL;DR Using an object as a parameter instead of individual values can make it easier to read and call functions, especially when there are a lot of parameters. Without using an object as a parameter (simple example) This is a very simple function and…

What I learned as a developer

TL;DR — Forget about competition. We all have unique skills that add value to what you’re doing — stay different. Talent comes from doing something you love. I wasn’t always an engineer. As a musician with a heavy passion for creating anything that…