For my first post I decided I should give some background as to how I got to where I am today!

The Start

I started at a small engineering firm about 3 years ago, with only some minor coding knowledge. While coding was supposed to be a portion of my position, I became more interested in moving our data visualization dashboard forward.

The initial stack was pretty simple, data fetching from .csv, some minor database interaction through a small php backend. The frontend was initially built using DC.js and jQuery, with no webpack or build/toolchain.

We quickly began to stress the limits of what DC could do perfomantly. Thus began my first major project: writing a custom charting library.

The First Project

First I needed to learn how to create a library that could be referenced under a common namespace. So I read the d3.js source code! Went in and copied the umd header section and started going.

Then it was callbacks, how to get functions to update something in a constructed function (hindsight should have made it a class, but hindsight is 20/20, we're also not at the end).

The initial code was pretty ugly and not DRY even in the slightest. No base to extend from. The only upside is we got away from the limitations of DC.js, and cleared up quite a bit of rendering jank.

The downside: still importing jQuery(30kb), d3.js (70kb) and at it's most lean my library @ 70kb. And that was only the dependencies. The rest of our code was over 200kb.

This led to the next step: removing jQuery.

The removal of dependencies and the start of webpack

jQuery was relatively easy to remove. d3 does many of the same things jQ does. One dependency gone!

Now I had seen webpack mentioned before, but up to this point we only had minimal use for it, and as it complicated our build chain, it took a bit for us to adopt it. Once we got it figured out, it was life changing. Still not using npm at this point, but it was a start.

lithtml

We then moved to using lithtml. I had though of moving to a ui framework for a bit, at at the time this was the least daunting option.

From here I started my second project, a quasi-framework using lithtml as the render agent.

After struggling with implementation I decided, this has already been done, why not use an established library. So I started messing around with React. But not wanting to get bound up with its ties to Facebook, I opted for preact!

preact + TypeScript

Once we started to use preact, I opted to use ts along side, for proper prop checking.

This also came with properly using npm, and a fairly in depth webpack config.

At this point we had fully transitioned to preact, but the charting library had gone pretty much untouched, with some preact wrappers for proper integration.

Then came my most recent and now open source project preact-charts!

preact-charts and OSS contributing

This started out as creating a small library for us to use internally, but I open sources it as all the current chart libs were react based, with no pure preact equivalents. It's still a WIP, but its stable, and currently supports both preact 8 and the upcoming preact X.

Then I got into supporting the libraries I used. Started with some bug reports, that slowly turned into pull requests.

I now enjoy helping out with the preact typescript definitions where I can!

Hopefully in the future I will continue to engage more with the dev community, and help out on many more projects along the way.

Want to give a shout out to the preact team! All are super friendly and willing to help make your pull requests as awesome as possible and help out on slack. Without their support, I would not have the confidence to help out where I can!