Hard lessons learned from setting up React + Webpack + Mocha + Chai + Enzyme

I had a really difficult time this morning setting up React + Webpack + Mocha + Chai + Enzyme. All roads with Mocha seem to lead to Karma, which I don’t want to use because I don’t want the complexity of a headless browser. And, all past roads with Mocha but without Karma seem to be pre-Webpack/Babel.

A Mocha + Chai test looks like this:

2016-04-18 at 7.35 AM

Pretty simple, huh? But, to get the test to actually run, I had to…

1. Define my dependencies

2016-04-18 at 7.36 AM

2. Transpile a separate js-tests file

2016-04-18 at 7.38 AM

3. Add a bunch of mumbo jumbo to keep Enzyme from breaking while transpiling

2016-04-18 at 7.39 AM

4. Set up a Grunt task to run Mocha

2016-04-18 at 7.40 AM

5. Voila!

2016-04-18 at 7.41 AM

I’m using Grunt with Webpack because that’s what I copy and pasted from the Feeling RESTful theme (and Grunt is what I’m used to generally).

 

Election 2010: Issues and Impact

For Election 2010, we built an interactive mosaic that tries to emphasize the wide diversity of perspectives NYCity News Service reporters captured before and after. Vistors can filter these faces by relevant metadata, and click on a face to access a short video or audio interview with the person.

The entire product was done with HTML/CSS/Javascript (jQuery) in about an afternoon. Each mug wrapper has classes with values for each metadata field. Presentation is driven by adding further classes based on those values. Originally, I was going to pull from an API and refresh the entire view but what I ended up with proved to be a better solution.

In the future, I think it’d be more interesting to filter based on issue instead of demographic. Also, I didn’t think about this at the start, but there is a performance loss on page load when every single piece is a video interview as the browser queues all of the hidden Vimeo players.

Later: Michelle and I took a look at the project this evening and I think it’s the first time I’ve seen it truly from the user’s perspective. Most notably: video embed performance sucks and needs fixing. It would also be useful to have the filter values sorted alphabetically (and numerically). Clicking on a new filter should close the active video player. Clicking on a new mug that’s at the bottom of the page should scroll the user back up to the overlay. Lastly, when activating filters, the informational overlays should only appear on mugs that match the filter.