React and d3

After spending some time reading up on vue I have decided to switch back to honing my React skills a bit more. The Boulder area job market has a few opportunities that mention vue, and while that might dominate the market in a year or two React seems to be where it’s currently at. There are several organizations that are either actively migrating from Angular to React or are keen on doing so, and that’s work I’d probably find interesting.

Another area I’d love to be able to focus on again professionally is data visualizations. I’ve done work with both d3 and highcharts in the past and started reading up a bit on integrating d3 with React. In the past I found Scott Murray’s d3 tutorials instrumental in picking up d3 so I bought a copy of his recently updated second edition “Interactive Data Visualization for the Web: An Introduction to Designing with D3“. I’m currently about halfway through and it’s a good refresher, although I find myself skipping through a lot of the JavaScript basics it delves into, the book being partially targeted at people wishing to develop visualizations without any prior web development experience. It’s good because he delves into a lot of details that can be glossed over, but are still helpful in helping concrete my understanding of subjects I haven’t thought about in a while.

On interesting challenge is that both React and d3 want to update the DOM. There are different ways to implement a d3 visualization within React, that doesn’t seem to be much of a challenge at all. But animations and transitions aren’t so easy. Two articles I’ve found helpful are:

This blog is currently a WordPress installation being hosted by a 1and1 account I’ve had since the beginning of time, and I’m looking into various options for hosting one or more node.js project for pushing some functional examples as I continue tinkering with React. I plan on getting together get some d3 animations using the good old join, exit, update & enter patterns.

 

 

Please note: This post contains one or more Amazon affiliate links, which I will occasionally use with a product and/or seller I’ve had good personal experiences with.

React is kinda fun

My First ApplicationI know React now! I spent the last few days heads-down wrapping my head around React and putting together some code to teach myself the basics, and it was easier to pick up than I thought. I had to spend some time reading up on stuff I hadn’t played with before like JavaScript arrow functions and went down a few rabbit holes going between the stable and beta releases of material ui, and it’s been fun! It feels good to get back to thinking about js code in terms of MVC/MVVC/MV* after spending so much time focused entirely on build systems, print CSS and cross-client email development.

While it’s temping to stick with React and put together some decent portfolio examples, I’m going to switch gears and learn Vue over the next couple days instead. After spinning back up into application development mode, skimming through the vue docs makes it look pretty easy to grasp, so I’ll have another bullet point for my resumé shortly! After that it’s onto Angular. And turkey.

[react, angular, vue].learning();

jQueryNavigating the modern JavaScript ecosystem is something that requires a lot of course-correction. Years ago simply knowing core JavaScript was enough and wrapping my head about the XMLHttpRequest object before the term AJAX was coined really helped me build some cool interactive prototypes, manipulating the DOM and using parent & child nodes to store data and resize-friendly grid logic for natively ‘responsive’ apps.

As someone who is currently in the midst of a job search for front-end development opportunities, I’m taking some time to educate myself on modern technologies. These days there’s an ever-changing slew of JavaScript libraries, responsive frameworks, views, models, routing, and every company has a different tech stack. Knowing HTML, CSS and JavaScript are like being proficient with flour, sugar and eggs; you can always put something together and grasp any recipe with enough time, and JavaScript frameworks are the same way.

AngularYears ago I worked with Angular and like a lot of people I had a love/hate relationship with it. I could implement complex interfaces quickly, but the architecture was unforgiving and after years of leveraging vanilla JavaScript to support legacy browsers across different operating systems, it felt constraining to do everything the Angular way. I know there has been a lot of work to improve it since then and there are numerous opportunities for Angular developers at the moment, but I need to ramp up on Angular 2 and 4 to learn enough to realistically look into those kind of roles.

After working with Angular I spent some time coding Knockout, which I really enjoyed, and then did significant application development with Backbone. I’m slightly embarrassed to admit how much I leverage jQuery these days (with a dash of underscore), but it really does provide inarguable convenience. I’ve done pretty extensive work with it and developed jQuery libraries as a contractor a few years ago.

The two technologies I’m currently excited about are react and vue. My overall impression so far is that vue has some arguable benefits over react, but that react has a larger community around it and I’ll be opening myself to more front-end development opportunities if I focus on learning react.

ReactBeyond reading introductions and going through tutorials, my experience has been that conceptualizing a project and developing it is the best way to learn a new technology (Like building a rocket bike to hone one’s skills at hardware integration and interval timing-based microprocessor programming and barely even setting the apartment on fire twice∗, crybaby roommate.) Consequently I’ve got a small project in mind and will be using it as a jumping point for wrapping my head around react, which so far has been making a lot of sense, the details of which I’ll be posting about next!

 

 

 

 

 

 

∗ Kidding, kidding.. just a couple of issues releasing the hardware’s magic smoke while learning about MOSFETs, servos, and insulation, nothing even high-voltage, please don’t raise my renter’s insurance

Oh right, I’m a programmer – here’s an engine test

Years ago when dinosaurs roamed the Earth and computer monitors weighed more than golden retrievers I went to college and got a very nice degree that has nothing to do with how I’ve supported myself for the last two decades. I decided to diverge from the whole Professional Writing thing and pick up HTML and JavaScript just in case the Internet took off. It provided the basis for a career that started with PHP web application development where I figured out two things:

  1. Most engineers suck at user interface
  2. I enjoy focusing on front-end development

While the second point does speak to a special kind of masochism, I channeled it into a career, learning CSS, SCSS, a veritable cornucopia of JavaScript libraries and frameworks, cross-platform website/web application development, and email creation for both modern software and Microsoft products. (Yeah, I went there. Shame, Outlook. Shame.)

Although I love programming I have learned that there can be too much of a good thing. Years ago I decided to do web development professionally but keep it largely isolated from what I do in my free time. I took an introductory course in Arduino back when working in Philadelphia and have been hooked ever since, hacking away in one form or another with increasingly complex projects. There’s something insanely fun about envisioning a physical project, solving the design and technical hurdles to make it happen, ingesting new skills and techniques, and solving problems there are no clear answers to. As a front end developer, everything I do comes down to the placement and manipulation of rectangles. While you can accomplish some pretty amazing things with those rectangles and the content within them, programming custom hardware opens up even more interesting possibilities.

Thruster with electronics box

The most recent one, and the project I plan on documenting on this site, is the fake rocket engine I strap to the back of my bike. The video above is a preliminary test before I had integrated the purple control box seen below.

I’m a regular on the Thursday Night Cruise here in Boulder, where people dress up, adorn their bikes with lights and decorations, and roam the streets and paths in big rolling party.

I’ve been contributing my own wee shenanigans as I’ve gotten more involved over my past few years in town, especially after getting a 3D Printer (Flashforge Creator Pro) last year, and this is the most recent outcome of my tinkering. I was recently invited to bring the rocket setup down to Pueblo, CO for their first Maker Faire where I got some great feedback on my project and enough people asked for details that I realized I should probably put together some sort of online description beyond the one I provided for the Faire.

Side view with electronics box closed

The entire contraption has evolved over time, but the original pieces are still in place. The body is a juice container on its side with an almond container stuck on front of it. An RGB (multicolor) light strip is glued to the inside of the almond container where it shows through the plastic, the rest of which is covered in reflective metal repair tape. A combination of components printed using silver PLA and translucent NinjaFlex help diffuse the lights on the exterior. The lights are used to emulate a spinning effect with Arduino-driven logic. The back ‘thruster’ contains a small ring of similarly multicolored lights that are used for a flickering effect, wrapped in plastic to make them waterproof enough to survive the condensation of freezing solid.

Exhaust port with LEDs

Inside the intermix container is a small amount of dry ice. A fan pulls air in from the front of the assembly (almond container), through the dry ice, and out the back passing through the light ring. A small pump, also controlled by the processor, sprays pre-heated water drawn from an insulated container onto the dry ice. The heat introduced causes the dry ice to evaporate, emulating smoke. A small heating pad mounted on the bottom provides enough warmth to prevent the water from freezing solid after passing over the dry ice, allowing it to drain into a small gravity-container attached to the rear of the engine.

Electronics box internals

The entire thing is driven by an Arduino Mega and while the documentation leaves much to be desired I’ve shared the code driving this whole thing on github:

https://github.com/Delvach/bike-engine-effects

Stay tuned, I’ll be compiling a more detailed page about Tiffany the Wonder Bike and her faux turbine engine in the near future! There is also a whole slew of updated behaviors I need to document, including numerous light modes with sound reactivity on the front of the control box.

Front-mounted control box

Apparently photography is hard

LED light strip
RGBW strip with some printed endcaps

One of the things that software developers learn to abhor is the word, ‘just’. Just refactor that bit.. I’ll just migrate this code to a different place.. just tweak the CSS placement a little bit. If only twitching burned calories.

Consequently I should have known better than to just take some photos for my site. Most of the professional web development I’ve done over the years has either been part of a collaboratively-built web application or work that nondisclosure agreements prevent me from, well, disclosing. Not like secret government work on chem-trails or squirrel surveillance or such, simply code that folks would rather not have leave the building because of intellectual property. The end result is that while I have a nice long resumé, I don’t have a solid online portfolio demonstrating my talents, such as they are. I also have numerous hobbies that people seem to find interesting, which include a decent amount of Arduino code that I’ll be starting to maintain on github.

So I’ll just take some photos of stuff to go along with it all, throw them up on a default WordPress theme, and get on with the whole project documentation thing! But it sure is dark on my work bench, and pictures I snap in the kitchen don’t look too great with scrambled egg remnants in the background. The iPhone camera doesn’t provide much control over settings, so I’ll just use the Canon Elph 100 I got a few years ago. I’ll just set up the table, move some lights, maybe spring for a roll of paper from a photo place as a cheap background. I’ll just grab my roll of RGBW Neopixel LED’s, control them with an Arduino, real quickly design and 3D print some mounts for a PVC tube to hang from eye hooks screwed into the ceiling and mount a flexible Neopixel matrix of 256 RGB LED’s under the camera until I realized that the red, green & blue @ 100% cast a purple hue that doesn’t match the output from RGBW with white @ 100%.

Well that was a fun weekend! And it all came together just in time for the roommate to come home to discover that the dining room is, in fact, a modular photo studio. But after all the time we’ve spend playing Blair Witch (which is when he walks into a quiet room and I’m standing in the corner- timing is everything), surprises aren’t much of a surprise.

Living room photo shoot

Initializing…

Hello! This is my first post as I start to set up a new personal portfolio & project gallery. The site is admittedly using a default WordPress theme as I’m just ramping up with FoundationPress and plan on making my own theme as part of some ongoing self-education, but before any of that fun I’ll be adding some actual contents!

By trade I’m a front-end web developer who started working with HTML and JavaScript in the late 90’s, enjoys (S)CSS for some masochistic reason, and devotes entirely too much time and energy into 3D printing and Arduino-based amateur electronics, the fruits of which I’ll be showcasing on this site.

I live in beautiful Boulder, Colorado where I’m a regular on the Thursday Night Cruise. It’s possible that I own more than one fairly epic cat shirt.

Ben Del Vacchio