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 nul

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, &a

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