Posts

Z-Indexes in CSS Explained

Z-Index is one of the most confusing and unintuitive properties in CSS, but it’s actually pretty simple once you understand it.

Your first instinct is probably to think that you can just set z-index on any element and that that alone is going to determine its stacking order. This is WRONG.

https://medium.com/@jberniertech/z-indexes-in-css-explained-32f52cb3fab

(originally posted March 16, 2017)

Upgrading to Webpack 2, and Tree-Shaking results

Recently made the upgrade to Webpack 2 because I wanted the tree shaking functionality. Took about a day. Here are some tips, along with the results.

https://medium.com/@jberniertech/upgrading-to-webpack-2-and-tree-shaking-results-e68bd203c974

(originally posted March 14, 2017)

Quick A/B testing

ab -n 500 -c 10 http://0.0.0.0:1337/

Symlinking

const execSync = require('child_process').execSync
execSync("rm -rf node_modules/@app && ln -sf ../src node_modules/@app")
execSync("[ -h ./node_modules/@static ] || ln -sf ../static ./node_modules/@static")

Javascript Absurdities

Javascript is a funky language. Here are some obvious design flaws:

**1. [Regex `test()` method is inconsistent when global flag is set](http://stackoverflow.com/questions/1520800/why-regexp-with-global-flag-in-javascript-give-wrong-results)**

```
var pattern = /hi/g;
pattern.test('hi'); //true
pattern.test('hi'); //false
```

Today at work I spent hours on a witch hunt trying to pinpoint the cause of a bug that was delaying a production release. It ended up coming down to this absurd Javascript quirk within a single "if" statement inside a portion of code that hadn't been touched in a year.

**2. null and undefined**

Having separate null and undefined types just adds unnecessary confusion.

The best way to check whether variable is null or undefined is `if (varname == null)`. Using the triple equals (which is preferred in almost every other situation) will not catch both types.

**3. typeof**

```
typeof [] //"object"
typeof null //"object"…

Docker for noobs

Source

Create your Dockerfile
FROM debian:jessie
# Replace shell with bash so we can source files
RUN rm /bin/sh && ln -s /bin/bash /bin/sh
# Set environment variables
ENV appDir /var/www/app/current
# Run updates and install deps
RUN apt-get update
RUN apt-get install -y -q --no-install-recommends \
    apt-transport-https \
    build-essential \
    ca-certificates \
    curl \
    g++ \
    gcc \
    git \
    make \
    nginx \
    sudo \
    wget \
    && rm -rf /var/lib/apt/lists/* \
    && apt-get -y autoclean
ENV NVM_DIR /usr/local/nvm
ENV NODE_VERSION 6.9.1
# Install nvm with node and npm
RUN curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash \
    && source $NVM_DIR/nvm.sh \
    && nvm install $NODE_VERSION \
    && nvm alias default $NODE_VERSION \
    && nvm use default
# Set up our PATH correctly so we don't have to long-reference npm, node, &c.
ENV NODE_PATH $NVM_DIR/versions…

Setting up a basic dev environment for noobs

This is a tutorial for beginners on how to set up a dev environment on a Mac/OSX (since you'll probably be using one as the primary laptop for your job).

Text Editor - Sublime Text
You'll probably want at least a text editor like [Sublime Text](https://www.sublimetext.com/). Install it, and then set up a `subl` keyword that you can use to launch Sublime from the terminal (eg. `subl filename.txt`)

    sudo ln -s /Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl /usr/local/bin/subl

Next, [install the package manager for Sublime](https://packagecontrol.io/installation).

Then you'll want to install a [nice dark theme](https://github.com/buymeasoda/soda-theme).

Terminal - iTerm, Oh My Zsh
Download [iTerm2](https://www.iterm2.com/). It's much better than the Mac's stock terminal.

Fire it up and install [Oh My Zsh](https://github.com/robbyrussell/oh-my-zsh) via the following command:

    sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell…