Personal and Professional Blog of Rich Hauck

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_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.


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.


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.


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


Comments: 0

Modifying Yeoman gulp-webapp to use Browserify and React JS

by: Rich Hauck


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

    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


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 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.


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.


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: 11

Judging the Battle of the Homebrews

by: Rich Hauck


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).


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.


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
Comments: 2

My Portfolio Site and the Long Hiatus

by: Rich Hauck


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.


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.


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.


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.

Comments: 2

Reviewing at the 2015 AIGA Student Portfolio Review

by: Rich Hauck

AIGA Portfolio Review

At a former student’s suggestion, I attended Central Pennsylvania AIGA’s Student Portfolio Review. As an instructor, I’d been aware of this AIGA event for years, but never attended for three major reasons:

  1. I’m not an AIGA member.
  2. I’m not hiring. I’ve never aspired to hire employees, and always felt that critiquing would mean occupying the space of a potential employer.
  3. I would see my own students’ work, twice. In addition to AIGA’s portfolio review, HACC graphic design students participate in a HACC-only review with local professionals (of which I have participated in for years). To see my own students’ portfolios again would be redundant.

I finally changed my tune this year after realizing that I would get to see the work coming out of other design programs in the Central Pa. area. Teaching in a tight-knit program can be very insular, and I’ve been doing it for over eight consecutive years (I’ll admit, seeing a lot of peers attending as reviewers didn’t hurt my comfort level, either). Central Pa. AIGA president Tim McKenna graciously accommodated my request to not review any of my own students, and I was in.

In all, I reviewed students from York College, Pennsylvania College of Art and Design, Susquehanna University, and Millersville University. The average portfolio was the appropriate size of 10 to 12 pieces, and the best ones were those that had print pieces matted (not under glossy covers!) with an accompanying mock-up. One student relied on a laptop (suitable provided their interactive focus), however, the reflection of the sun and the relatively small window for the projects on the webpage detracted from their presentation. A tablet with a simple slide presentation would have hit that home run for them.

Reviewing these 4th year students made me pity my own students, as my pupils had less than two years of design classes at a community college. On the other hand, I knew some members of my class would hold their own. What reassured me was the founder of a local ad agency telling me that design programs shouldn’t segregate by media—no web design versus print design. This division is something I’ve thought about as a means to afford more time towards a particular focus, but the fact that HACC’s graphic design program integrates these disciplines is probably the right approach.

This founder went on to say how he would not consider hiring a print designer without interactive work in their portfolio, and this echoed my overall concern while attending this review—nearly every design portfolio I saw was print-focused, while the industry is clearly moving more towards digital.

I reviewed two students that had inserted a single web design comp at the tail end of their portfolio—clearly out-of-place with the rest of their work. My response: “You don’t want to do web, do you? Okay, then just take this one out”.

The Millersville student was the exception, having a demo reel on YouTube, a website portfolio, and even an iPad app design. Still, I know that my students were unlikely to show off their website designs—despite taking two classes and having worked on multiple projects, I know that most of them do not have the same confidence in their coding abilities as they do with placing text in InDesign or editing in Photoshop.

Overall, the AIGA student portfolio review provided invaluable real-world feedback to students, and I was grateful to take part in it. I’m also glad it’s mandatory for HACC students, and think that all local design programs should require it.

Ultimately, what I gathered from this event is that the lack of balance between interactive and print work is on an epidemic level, and is one that is not exclusive to my college. Representing the interactive realm, I know this is something I will struggle to help balance in my program, but I hope other instructors saw and recognized it, too.

Comments: 0

The Fate of Barcamp Harrisburg

by: Rich Hauck


I’ve been asked a number of times for the date of BarCamp Harrisburg 2015 on both Twitter and in-person.

The answer, sadly, is there isn’t one.

It’s hard to believe that Harrisburg has had a rendition of BarCamp since 2009, and normally around this time I would be scrambling trying to promote the event and seek sponsors. While 2013 had an incredible turnout, last year’s event saw an unfortunate decline. The lack of 2014 t-shirts aside, I would attribute the lessened attendance to three factors:

  1. A sudden schedule change.
    BarCampHbg has traditionally been held in April, however, the event has always been subject to longtime host Harrisburg University’s room availability. Due to scheduling conflicts, the date was pushed to May. With the warmer weather knocking, many people likely had other engagements.
  2. Harrisburg City Parking.
    With the city’s leasing of street and garage parking came higher rates and longer hours on Saturday. While I can’t scientifically point towards this change as being a definitive factor, it wouldn’t be a surprise, and I’ve talked to other event organizers that have noticed attendance decline during this time.
  3. General interest waning.
    General interest in BarCamps have declined over the years. Just look at the lessening number of camps being held globally on or the stats via Google Trends (below). While BarCamp Philly still has a strong following, I’ve seen BarCampNYC practically evaporate, to the point of once sitting in on a session where attendees asked “Do we even need a bar camp?”. 

Ultimately, none of these factors play into the success of an unconference for learning, sharing, and networking. I look back at all of the past camps with an appreciation for everyone I’ve met and what I’ve learned. I’ve had to explain to attendees that each year’s themes have been different thanks to what the attendees brought, and that some of the smaller camps have actually been more fun.

Last year, HU notified me that they would no longer be able to hold the event on a Saturday. While I could search for another venue, frankly, the thought of it exhausted me. I’ve learned the hard way that without a sponsoring venue one has to navigate facility size, room rental fees, and event insurance. I’m not necessarily opposed to doing this, but I think I’ve reached a point where I shouldn’t be doing this, alone.

I’ve reached out to the organizers of Harrisburg Startup Week (many of whom I met at BarCamp Harrisburg) on the possibility of making BarCamp Harrisburg a part of their schedule of events. There’s nothing definitive, yet, but in the meanwhile, I’d love to hear from you. Is BarCamp Harrisburg worth continuing? Does anyone know of a suitable venue that would sponsor space? Should a fee be collected to help rent a venue? Comment below, and if any details do solidify I’ll be sure to post them.

Adobe Brackets in Education + Favorite Extensions

by: Rich Hauck


I recently spoke with a web design student from another college who mentioned that their program was taught through Adobe Dreamweaver. As a graphic design instructor and web professional, it’s enough to make one cringe.

While Dreamweaver has a nice search and excels at converting word processor copy to HTML, the “design” view and WYSIWYG (without truly knowing what’s being written for you) has always been a crutch. Furthermore, I can’t say I’ve really seen it used professionally in the last 12 years.

Dreamweaver’s changed so significantly in an attempt to keep up with the industry that, upon opening up CC 2014, I felt like a visitor in a foreign land. Regardless, I take pride in the fact that my program at HACC nearly affords me carte blanche when it comes to curriculum and software, and I’ve exercised that freedom to transition our program from Dreamweaver to Adobe Brackets.

While I personally still lean on Sublime Text 3, Brackets is a great learning tool at the right price for students (free!). Originally the underpinning of Adobe’s Edge Code, the fact that it’s open source leaves no surprise why it left its proprietary sibling in the dust.

It’s not perfect, and I did have to wait for it to become stable prior to introducing it to students, but the extensibility of Brackets is a niece touch. While I wish Brackets’ Extension Manager better resembled NPM, Bower, or WordPress’s Plugins directory (as in, having a solid rating/ranking system and dedicated spot for comments and questions), it still works nicely.

Getting to the meat of the post–here’s a list of extensions I requested installed for my class (In no particular order…I’d love to hear suggestions):



Categories:CSS HTML5 javascript webdesign
Comments: 1

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.