Building a Day One Journal as a Static Site

TL;DR

I built metalsmith-dayone to add Day One data to a metalsmith blog.

Over the past year I've found that Day One is a great app to keep me "journaling". It's easy to use and has a lot of great features that I use to write. It keeps everything private which is what I want most of the time, but I do use it to flesh out ideas for things I might blog or for memories that I might want to share.

This left me wanting to ability easily publish a subset of entries.

Day One does have an export feature, but I found that the publishability of the exports left a lot to be desired. It can do text or HTML, but both of these end up with just one page, even if you export hundreds of entries.

But there's also a JSON export option! Which meant all I had to do was spend a few nights writing (and rewriting and rewriting) some code, and I'd soon be able to publish a site about all the cute things my daughter does.

Read more

Fun with ES2015: Pascal

Just some fun code to determine Pascal's triangle for a certain number using some (borderline unreadable 😄) ES2015 patterns.

// Utils
const last = arr => arr[arr.length - 1]
const withoutLast = arr => arr.slice(0, -1)
const sumWithNext = arr => (val, index) => val + arr[index + 1]

// Sum the values from a row
const createRowValues = arr => withoutLast(arr).map(sumWithNext(arr))

// Create row padded by the start values
const createRow = (previous, start) => [
  start,
  ...createRowValues(previous),
  start
]

// Appends a new row based on the last row
const appendRow = start => rows => [
  ...rows,
  createRow(last(rows), start)
]

// Takes a starting value and the number of rows and returns a nested array
const pascal = (rows, start = 1) => [...Array(rows)].reduce(
  appendRow(start),
  [[start]]
)

pascal(10)

// [ [ 1 ],
//   [ 1, 1 ],
//   [ 1, 2, 1 ],
//   [ 1, 3, 3, 1 ],
//   [ 1, 4, 6, 4, 1 ],
//   [ 1, 5, 10, 10, 5, 1 ],
//   [ 1, 6, 15, 20, 15, 6, 1 ],
//   [ 1, 7, 21, 35, 35, 21, 7, 1 ],
//   [ 1, 8, 28, 56, 70, 56, 28, 8, 1 ],
//   [ 1, 9, 36, 84, 126, 126, 84, 36, 9, 1 ],
//   [ 1, 10, 45, 120, 210, 252, 210, 120, 45, 10, 1 ] ]

Bulk Edit Strava Activities Plugin

TL;DR

Check out the GitHub repo or demo gif.

At some point earlier this year, I wanted to change all my https://strava.com activities from private to public (gotta get on those segment leaderboards!). This looked like a hassle to do by hand, and I'm always looking for a good excuse to prove the XKCD Theory of Automation. So I started coding.

Read more

Deploying Greenkeeper PR Branches with Surge and Codeship

As I've mentioned before, Greenkeeper is pretty great. Another tool I love is Surge, which allows you to quickly and easily publish any static content to the web. These two tools can be combined in a pretty cool way to allow you to see a built version of your site anytime Greenkeeper finds a release that doesn't match your versioning strategy.

Read more

React Invariant Violation / Minified Exception on iOS 8 with Webpack + Babel

TL;DR

Check out this gist to see the bug.

I ran into a head-scratcher over the weekend that I needed document, because I spent a few more hours than I wanted to trying to see why a deployed project wasn't working at all on iOS 8.4.

My project is using react, webpack, and babel. One of the babel plugins I'm using is babel-plugin-transform-react-inline-elements which transforms react elements to increase performance in production.

I'm also using the babel-polyfill (which includes the core-js shim) to polyfill some features like Symbols.

The project was working fine locally on iOS 8, but when deployed I was getting an error from react.

Read more