MandalaTV
Personal and Professional Blog of Rich Hauck

Christmas Card 2016

by: Rich Hauck

This year, I enlisted the help of two younger artists.

xmas2015card

xmas2015card-inner

IMG_1911

I’m not sure anyone got my Joan Miró reference…

It’s still fun to hear about people’s anticipation for these cards and how some folks collect them. If you know me and want on next year’s list give me a holler.

IMG_1950


Categories:christmas-card
Comments: 0

The TorchBearer Labels That No One Will Ever See

by: Rich Hauck

Okay, so it’s a misleading title (especially now with this post), but it sounds cool.

Before I apparently became famous as the guy in this photo, my former claim to fame was as the “TorchBearer label guy.” I’m (finally) revisiting my past identity by working on the Psycho Curry label, and I figured I’d share a set of  labels that were seen exclusively by the trade show circuit.

The good folks at Datum Storage Solutions are fans of both TorchBearer’s sauces and their labels, and they commissioned me to do two custom labels for mini-bottles for trade shows. The theme: spartans and zombies.

In what’s become a rarity in my workflow, I actually did some starting sketches on paper before moving to digital. Here’s some of the sketches along with the final product.

spartan-2

spartan-1

 

spartan

zombie


Categories:art Illustration
Comments: 0

Harrisburg’s Greenbelt in Infrared

by: Rich Hauck

 

I recently squeezed in a bike ride around the Greenbelt before the autumn’s breeze proved unbearable. I lugged along my SLR and my tripod, and while my tripod bag didn’t survive the trip, I made it out with these infrared photos.

MG_3662

I’ve always found the state hospital grounds to be some of the most tranquil parts of the ‘burg.

MG_3655

 

MG_3688

With a daylight white balance the shots come out very red (below). Personally, I find these far more interesting than converting to B&W, although I realize it’s not for everyone.

MG_3655

I once compared a color-to-black-and-white conversion against an infrared one and was able to generate pretty similar results. Trying to emulate an infrared image in Photoshop would be much more difficult, if not impossible.

 

MG_3694

 

 

I was really surprised to not be able to find an equivalent of the Channel Mixer in Adobe Photoshop’s RAW window. Tweaking the red channel yields some pretty wild results.

_MG_3670


Categories:Harrisburg photography
Tags:infrared
Comments: 0

Revisiting Vermont

by: Rich Hauck

Well, I didn’t manage to do too much traveling this summer, but I did make another trek up to Vermont as part of a beer run/bachelor party. Somehow, no matter how late I stayed up, my body had an internal alarm clock that woke me up around 6 a.m. Fortunately, I made the most of it by taking some beautiful shots of the countryside.

_MG_3610
_MG_3602_MG_3532 _MG_3543

The sunsets weren’t too shabby, either.

_MG_3549 _MG_3558 _MG_3595   IMG_1339

I did say beer, didn’t I? Part of the trip involved visiting Hill Farmstead.

IMG_1356

The ordering process has vastly improved in the course of a year. This time, I wasn’t stuck in a 3-hour line (at least on the Saturday morning when I visited). Instead, I was issued a numbered order card upon entering the brewery. The number assured my place in the queue, and they allow you to visit the tap house (for up to two pints) as you wait.

IMG_1340

I was really surprised that the tap house remained unfinished, as a wooden skeleton was already standing a year before. I can’t fault the brewery, as they’ve clearly been busy with production.

IMG_1348

Lastly, here’s a lovely picture of our group (along with items all found in the barn we rented):

IMG_3618


Categories:travel
Tags:vermont
Comments: 0

Modifying Yeoman gulp-webapp to use Browserify and React JS

by: Rich Hauck

yeoman

I’ve become a big fan of Yeoman’s gulp-webapp generator and have found myself integrating it into my regular development workflow since it handles code testing, text minification, live reloading, and image optimization.

In an effort to integrate Facebook’s React JS library I found several third-party generators, but wasn’t satisfied with any of them. Many stray from the vanilla gulp-webapp, whether it’s switching from SASS to LESS, eliminating Bower, or relying upon Grunt JS instead of Gulp.

One of the closest solutions I uncovered was a React Recipe that ships with the gulp-webapp repository. These step-by-step instructions worked fine, though it relies on your React classes being included in order of dependency. So, if you don’t place the <script> tags representing your classes in the right order within your index.html, your app will fail.

I felt that calling require() at the top of my Javascript class files to pull only the necessary dependencies was a more elegant solution. Call it nostalgia, but this is cleaner code harks back to my days of tinkering with Java and ActionScript. This approach requires Webpack or Browserify, of which I chose the latter. I should mention I came across this blog post that accomplished what I wanted to do, but it’s for a much earlier version of gulp-webapp and doesn’t work with the current version.

So here’s what I came up with:

1. Install the standard gulp-webapp by calling yo gulp-webapp in your command line.

  1. Install React via Bower: bower install --save react 
  2. Include the newly-downloaded React as a dependency in app/index.html (<script src="/bower_components/react/react.js"></script>)
  3. Install NPM dependencies: sudo npm install --save-dev browserify reactify vinyl-source-stream 
  4. Change gulpfile.js to include custom scripts() task. Task scripts() is called in serve() and html(). Task watch() has been modified to watch /.tmp and /scripts for changes. Here’s the scripts task:gulp.task('scripts', function() {
    return browserify({
    //paths: ['./app/scripts/'],
    entries: ['./app/scripts/App.js'],
    transform: ['reactify'],
    debug: true
    })
    .bundle()
    .pipe(source('main.js'))
    .pipe(gulp.dest('.tmp/scripts/'));
    });

    Basically, this task looks at App.js, converts it and all dependencies from JSX to regular JavaScript, then outputs all of the code into /tmp/scripts/main.js.

    When publishing via gulp build, it will JSHint the compiled JavaScript before copying it from /tmp into the /dist folder.

  5. Add javascript class files to /scripts directory. Delete main.js (as the gulpfile’s scripts() task will generate a main.js file). I chose *.js extensions only so that my text editor (Sublime Text 3 and Atom) would recognize the files and color the syntax.
  6. Add <div id="app"></div> to index.html, as this is where the app is being told to render itself in /app/scripts/App.js.

 

The whole thing is available on GitHub. I hope it helps someone else out. Feel free to drop me a line if there’s something that can be improved.

 


Categories:CSS javascript webdesign
Comments: 0

BarCampHbg is back. And that’s a good thing.

by: Rich Hauck

BarCampHbg7

This is a follow-up to my previous post, “The Fate of Barcamp Harrisburg“.

Well, while I was relatively comfortable coming to terms with barcamp ending, many of you were not, and that’s a good thing. I received a lot of supportive feedback, and as a result, Barcamp Harrisburg will go on for its seventh consecutive year with a new date and a new host for 2015.

Working with the great folks at The Tech Council of Central PA, BarCampHbg will help serve as a kickoff event for the week-long UPNEXTFEST. Formerly Harrisburg Startup Weekend, UPNEXTFEST helps to nurture the local and potential startup community.

This year’s camp is scheduled for Saturday, October 10, 2015 at ITT Technical Institute Harrisburg. It’s only a little ways from downtown, and along with the venue change comes relief from paid parking(!).

More info will be coming soon and posted to the BarCampHbg website. In the meanwhile, save the date. If you’re interested in sponsoring, please drop a line to info@barcamphbg.org. Hope to see you there!

 


Categories:Harrisburg javascript mobile webdesign
Comments: 6

Drawing The Burg Cover

by: Rich Hauck

The Burg June 2015

If you wander around Central Pennsylvania this month you’re likely to find a copy of The Burg at a newsstand with my work on the cover. I have been illustrating for this monthly magazine for the past few months now, and despite the inevitable time constraints of print, I’m pretty proud of my work on the June 2015 cover.

The concept started as a map that would feature local venues representing the Central Pennsylvania region. The initial list handed to me clocked in at 27 venues, including Red Rabbit, Mt. Gretna, and the Perry County Fair. I countered to refine the list, as I was concerned that too many destinations would clutter the piece (not to mention take a long time to draw!). Ultimately, I narrowed the list down and included the state capitol to help define the region.

sketch

An original rough sketch using Google Maps colors

I wasn’t provided any direction for color, so I started using colors from Google Maps. I quickly ruled this out as I became concerned that the beige backdrop would pale on newsprint. I was also concerned that the negative space would be a little boring, so I began experimenting with handwriting locations. You could say I was drawing from Paula Scher’s Maps for inspiration, though this approach ironically looks similar to what Stephen Michael Haas did for The Burg in January.

blueprint

The entire illustration was completed over a weekend in Photoshop CC 2014 on a Cintiq 22HD Touch (no paper was harmed in the making of this illustration!). I’d recently watched the documentary “Stripped” where one of the illustrators drew in blue on their second pass. I decided to try the same approach. It’s probably not too noticeable, but I sadly ran out of time and didn’t get to redraw the capitol building or Hollywood Casino as I’d sought out to do.

Cover no text

Here’s the final illustration with the text layer hidden.

I shared early drafts with some friends for feedback and one friend mentioned that it looked similar to the labels I’d done for TorchBearer Sauces. While there’s not much I can do about that (it’s my work and carries my handwriting, too), though it somehow got me thinking about Richard Diebenkorn’s Ocean Park series. As a result, I tried underpainting instead of  the solid bold colors of the sauce labels.

The finished product did have me a little nervous about which landmarks I chose to include. I anticipated people complaining on why I chose to include this coffee shop’s name over another, or why I excluded smaller attractions for larger ones. Fortunately, feedback has been good (though no one seems to recognize the barn at Fort Hunter).

I really appreciate how “The Burg” editor-in-chief Larry Binda and the lovely Megan Davis have included me in their fantastic little publication, and I’m already working on an illustration for next month’s issue.


Categories:art Harrisburg
Comments: 12

Judging the Battle of the Homebrews

by: Rich Hauck

IMG_0761

Last weekend, I had the distinct pleasure of serving as a judge for the “Harrisburg Beer Week Battle of the Homebrew Clubs” competition as a part of the inaugural Harrisburg Beer Week. My good friend Chelsie, one of the organizers of Harrisburg Beer Week, invited me to judge. I immediately asked how I could possibly be qualified, though I suppose my futile attempts to surpass my friend Tierney on Untappd unique check-ins has exposed me to a decent number of beers. In full disclosure this is was not a BJCP-certified event, and like the rest of the week’s festivities, the proceeds benefited Harrisburg River Rescue.

Before the event, I was style preference to judge, to which I said I wasn’t picky. Clearly, it was a mistake, as I was assigned IPAs, which may just be my least favorite style (and here I thought the popularity of IPAs would have made it some other judge’s first choice).

IMG_0758

Confession: I felt like I had no idea what I was doing.

Fellow judges included a beer distributor, a professional brewer, a beer podcaster, and an attorney (who felt as under-qualified as I did, despite specializing in alcohol and the law).

The beers on the judging table were labeled not only with style and name, but (unfortunately) with the brewer’s names. Some of these brewers were friends of mine, and the other judges confessed of similar relationships. I didn’t pay much attention to it (if anything, I felt as if I was more critical to my friends), though we did recommend to organizer Chris Harvey that it be handled anonymously in the future.

Ultimately, I truly believe the judging was unbiased. A second round of judging had us choose the best overall beer from each judge’s final picks. This second round didn’t have brewers names staring back at us (Perhaps a correction from the first round?) and was done regardless of style.

Two things did surprise me: despite appearance being only one criteria, I think this subtle detail proved to be a tell-tale sign of which beers would advance. A concurrent “People’s Choice” series of awards surprisingly didn’t echo our judging results in any way.

IMG_0759

Rating beer is hard. It’s not just a matter of drinking and giving a score on a five-point scale. Our grading criteria included aroma, clarity, mouthfeel, and overall perception and loyalty to style. Fellow judge Steph Heffner from Beer Busters gave me the really handy tip of smelling and rating aroma for all the entries prior to tasting. It was definitely helpful, as all those scents can get mixed up with the taste.

The experience actually reminded me of why I often grade on a curve when I teach–I can get a little too critical. I know some of the other judges chose to remain anonymous on their judging sheets, but I didn’t. Nonetheless, I was a little embarrassed that my rudimentary tasting notes and condemnatory scores made it into the hands of the contestants. One beer announced itself as a Heady Topper clone, and taste-wise, it was really close, but I denounced it for its lack of visual clarity. In another case, I found myself practically apologizing to one of my brewer friends for giving him such a low score on his beer. All this despite his being the second highest score I awarded, despite his beer winning an award as one of the best in the competition, and despite me recognizing it as a solid 5/5 on Untappd.

Overall, it was fun and there was a lot of great beer. Check out The Beer Busters video summary to get a good sense of the vibe at the event.


Categories:christmas-card Harrisburg
Tags:#hbgbeerweek
Comments: 2

My Portfolio Site and the Long Hiatus

by: Rich Hauck

hii-site

After a two-year hiatus marked by large projects and life in general, I finally (and quietly) re-launched the most challenging project any designer HAS EVER FACED.

One’s own portfolio site.

Many years ago, I was contracted to design and build such a site for an agency. It was a genius move in my opinion, as the internal politics are often set aside with such an approach.

My previous company site was completed in 2012, right around the time that responsive web design was becoming inescapable. It wasn’t long before my site was caught feeling stale, and I quickly moved to redo it.

Then, some large contract jobs pushed my portfolio to the backburner, and my new site went from being 95 percent complete to an afterthought. Nearly two years later, I sought to finish what I’d started, and I found it rather introspective to revisit my own development process.

2012.

This site relied exclusively on JQuery to make what was essentially a single-page app. Ultimately, it wasn’t tremendously SEO friendly, and there was no minification going on, so the download wasn’t necessarily heavy, but it was cumbersome.

Yes, I was using a reflection in the design, which only added more wrinkles to the elder face of my non-responsive site.

2013.

I truly believe the future of front-end development is one that uses object-oriented programming principles, so I decided to build my site foundation in Angular JS, which was gaining a lot of popularity at the time. My problem was, while Angular was evolving quickly, it was still pretty cutting edge, leading me to some unmarked roads. I started with a pre-1.0 version, and at the time, handling transition animations (now accomplished with ngAnimate) was still in a nightly build and making things search engine-friendly had me looking into headless browsers.

For layout, I was using Bootstrap. For icons, I was using Font Awesome for general icons and Foundation’s icon library for social icons. For animations, I was dabbling with the handly little Animate.css.

2015.

I returned to my working portfolio site which was 95 percent complete, yet settled in Angular 1.2. Thankfully, the time away allowed browsers to catch up, and I am confident that IE9 and below needn’t be supported any longer.

News had been revolving around Angular 2.0, and I think Google really blindsided their community when they announced Angular 2.0 as being a completely different animal than the current Angular 1.3, one with an entirely different architecture and syntax. Not wanting to be on a sinking ship, I chose Facebook’s React for a similar project and basked in the glow of its simplicity. I definitely wanted to rebuild my portfolio with React, but time won out and I needed something up.

I proceeded to update Angular in my project from 1.2 to 1.3. This Angular migration guide made a world of difference, as controller instantiations are completely different.

For layout, I migrated to Bourbon Neat. Besides having a cooler name (Mmm…bourbon), I liked that it was in SASS and didn’t require so many appended classes on my markup.

With the inclusion of social media icons in FontAwesome I removed Foundation as a dependency. Perhaps the biggest change, though was the inclusion of Yeoman into my workflow. It just brings so much to the table–Bower package management (so I’m no longer hunting and gathering plugins), JSHint for testing Javascript validation, LiveReload to refresh my browser upon file save, and image optimization.

I chose the Gulp flavor over Grunt simply because I like the simplicity of the code. While there are several generators for creating projects in Angular, I tested them all out and settled on the vanilla generator-gulp-webapp.

I don’t necessarily like the “magic” that comes with Yeoman’s gulp-load-plugins, as having a ‘$’ in the code to represent all plugins loaded really dumbs down my understanding of which particular plugin is called. That said, I found that, unlike in 2013, the Angulartics module was waiting for me to solve my headless browser/SEO problem. I also discovered that ng-annotate was essential to wiring up with generator-gulp-webapp to get it to publish.


So, as I said, introspective. Is this all too technical for me to be called a designer? I hope not.

Following a brief conversation the other day a designer responded to me with “…so, you’re more a developer.”

While I know the industry pigeonholes folks these days, I think it’s the responsibility of a designer to know how things work and appreciate the design of process and code in the projects they are a part of. With posts like this, I’m just hoping to create more of a dialogue about it, too.


Categories:webdesign
Comments: 3

About Rich Hauck

Rich Hauck

I'm a creative technologist at Hauck Interactive, Inc. and an adjunct instructor at HACC. I live in Harrisburg, Pa. with my wife and two boys. I enjoy good coffee, Trappist beers, Orioles baseball, and good design.


Archives