Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

This Is Yak Shaving

DZone's Guide to

This Is Yak Shaving

Making a library for Javascript with D3 and ReactJS to build black boxes is insanely complex and rife with errors, here's a try to do it and document it.

· Web Dev Zone
Free Resource

Get deep insight into Node.js applications with real-time metrics, CPU profiling, and heap snapshots with N|Solid from NodeSource. Learn more.

I sat down to write about a rendering technique I use to quickly wrap random D3 code in React components. I call them "blackbox components" because they're a black box.

It's already a chapter in React+D3v4 and a CodePen. How hard can it be to write a post?

Then I thought, "This is dumb. People shouldn't keep rewriting this. It should be an npm module."

So, I started making a library.

Then, I remembered that compiling libraries sucks.

So, I went to copy config files from an old transition library I did. But the files were old and out of date. Possibly copied from a 0.2.x version of create-react-app.

Terrible.

So I looked for a create-react-lib because the -app version creates too much stuff that libraries don't need. Like all the setup for index.html and assets and webpack dev and webpack prod and eslint and jest and a default app page and…

Couldn't find one. Used create-react-app, ejected, copied config files, removed the parts I don't need.

30 minutes in: no post, no library, but I’ve got the config I need to get started.

So, I copied the code from CodePe, cleaned it up, and added some imports & exports. Made it Real Code.

Then I thought, "You know, this technique can work for things that aren't SVG. There's plenty of stuff people might wanna use."

So I added a version that uses <div> instead of <g>.

Then I compiled. node_modules/babel-cli/bin/babel.js src --out-dir lib. It worked!

Now, how do I test this?

So, I started writing an example project. Create react app and all of that. npm link to use unpublished library. Neat trick, that.

I started with the same axis example from CodePen. import BlackboxSvgHOC, use it to make an Axis component, render in an <svg>.

Error. Files not found.

Investigate, find a typo in the filename, fix, reload, renders default React app.

Waitaminute! Where's my example axis? How am I gonna add more awesome examples if I can't even load an axis?

Sigh. There's a nasty error in the console. Pretty sure I've never seen this one before.

How do you even debug that?

So I went to play Dirt3 for 20 minutes.

Then I wrote this story. And I wish I was kidding, but it took me an hour. Twitter is distracting.

Three hours after I started: no article, no library, no working code, no example project.

This is yak shaving. Don't do this.

You should follow me on twitter, here.

Node.js application metrics sent directly to any statsd-compliant system. Get N|Solid

Topics:
reactjs ,javascript ,d3js ,programming

Published at DZone with permission of Swizec Teller, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}