2016 in review: webpack, and finally trusting flexbox

Two changes this year, and both were me catching up rather than being early. In July webpack replaced gulp in my main project. And somewhere around spring I stopped writing float-based grids.

Swapping gulp for webpack

Gulp does a fine job of "take these files, transform them, write them out". What it does badly is dependencies: knowing that this component needs that stylesheet, and shipping only what is used.

The migration was not fun. A gulpfile reads like a recipe, top to bottom. A webpack config reads like a description of a graph, and for the first week every error message is about a loader I have not heard of. I kept both in the project for months, which is the honest way these migrations actually go.

Worth it? For the one large project, yes. For the small marketing sites, absolutely not, and I left those alone. That distinction is the actual lesson of 2016 for me: adopt per project, not per developer.

Flexbox in production

Support is good enough now that a fallback for old IE is a business decision rather than a technical one. You look at the analytics, and the answer is usually "let them have a single column".

What still costs me time is not support, it is the handful of behaviours that are easy to get wrong.

flex: 1 is not width: 50%. The shorthand expands to flex: 1 1 0%. That 0% is the basis, and it means the item's own content no longer decides its starting size, so two items end up exactly equal however long their text is. If you want them to grow from their content width:

.item {
    flex: 1 1 auto;
}

A flex item will not shrink below its content. Every item gets min-width: auto by default, so one long unbreakable URL pushes your layout past the viewport:

.item {
    min-width: 0; /* then handle wrapping where the text actually lives */
}

IE11 needs the shorthand written out in full. It mishandles a unitless basis and sometimes ignores flex: 1 altogether:

.item {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

Gutters still need a negative margin. There is no gap for flexbox yet. It exists in the Grid spec and browsers will get there, but for now:

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -0.75rem;
}

.row > * {
    flex: 1 1 auto;
    padding: 0 0.75rem;
}

Ugly, works everywhere, and it will be the first thing I delete when gap lands.

In short

Swapped the task runner for a module bundler on the one project big enough to need it, and stopped writing float-based grids.

The year in commits