Here's Why Docker Images Start With "FROM ubuntu"

In Docker, we run processes in isolated environments, such as Rails applications or Node.js applications. Why, then, do Docker "image" files start with lines like FROM ubuntu? Are  containers running full Ubuntu operating systems? If not, why do we specify an entire operating system? For that matter, what does it even mean to "run an operating system? These instructions are tailed for MacOS users, but work for Linux users as well. Just replace Homebrew with your package manager. Let's install

How to get Three.js Shader Source Code at Runtime

Three.js builds its shaders with a complex system of string concatenation based on data in your scene, like the current number of lights. Under the hood, at least as of r100, Three.js builds shaders using a function called initMaterial, which happens only at render time, if the material is new or needsUpdate is set. To get the Three.js running shader code without having to do a

My First AWS "Free Tier" hosting bill was $900

TL;DR I built my novel shader graph editor, ShaderFrog , on AWS and chose the "wrong" configuration. Learn from my easily avoidable ignorance and pain and Amazon's dark UI patterns. Trying out AWS When preparing to launch ShaderFrog I looked for cloud server options. I had a Rackspace server, but it was too expensive and I wanted to reduce costs. My only other experience was with scammy shared hosts like BlueHost, and I wanted to learn somet

Setting up GSuite GMail Custom Domains With AWS Route53

Do you want to send emails from your custom domain hosted on AWS? There's a few pitfalls that aren't well documented. The free, official "Check MX" tool will help you debug these issues, and you should use it, but it doesn't have Route53 specific instructions. 1. Log in to AWS and go to Route53 Log in to your AWS management console and find the "Route 53" (direct link ) prod

React's JSX Doesn't Violate Separation of Concerns

TL;DR React was open sourced in 2013 . Three years later, my blog posts still receive many false arguments about JSX. Let's get on the same page. "JSX Violates Separation Of Concerns" React is mainly the view layer. React is only the view layer . We're only in one

Webpack: When To Use And Why

TL;DR It took me a long time to understand Webpack and how it fits in the build process. This is what I wish someone had told me. What is Webpack? How does Webpack compare to Grunt, Gulp, Browserify, Brunch, etc? What's a "development server?" What on earth is require("coffee!./cup.coffee");? Stop it. Webpack is a build tool that puts all of your assets, including Javascript, images, fonts, and CSS, in a dependency graph. Webpack lets you use require() in your source code to point to local fi

How to Create Custom iTerm2 Window Arrangements

By following these steps, we'll learn how to create a custom keyboard shortcut to automatically spawn a set of windows and splits with processes running. Screenshot of the "Restore Window Arrangement" iTerm2 shortcutiTerm2 is useful software, but this process is complicated. I've attempted to document known pitfalls. How to Create a Custom Window Arrangement Close all iTerm2 windows. We'll use the "Save Window Arrangement" feature which saves all windows. Any windows open in the background wil

The Mental Model That Helped Me Finally Understand "Flux"

TL;DR This is what I wish someone had told me when I struggled learning Flux. It's not straightforward, not well documented, and has many moving parts. This is a follow-up to ReactJS For Beginners . Should I Use Flux? If your application deals with dynamic data then yes, you should probably use Flux. If your application is just static views that don't share state, and you never save nor update data, then no, Flux won't give you any benefit.

The Mental Model That Finally Helped Me Understand ReactJS

TL;DR I struggled for a long time trying to understand React. This is what I wish someone had told me. What is React? How does React compare to Angular, Ember, Backbone, et al? How do you handle data? How do you contact the server? What the heck is JSX? What is a "component"? Stop. Stop it right now. React is MAINLY THE VIEW LAYER. React is mentioned in the same breath as other Javascript frameworks, but "React vs Angular" doesn't make sense because they aren't directly comparable. Angular

Dealing With Compiled Files in Git

Why might you need this? If you have file A, and every time you change A, file B gets rebuilt, and you have to commit file B, these steps will help you. These examples are written with Sass in mind. You should avoid committing built or compiled files to Git. Always try to fix that first. These steps are only a last resort. 1. Don't Show Minified CSS In Your Diffs Why: We don't want to see huge blobs of minified CSS when we run git diff.  We only care about diffs of the