MandalaTV
Personal and Professional Blog of Rich Hauck

Anatomy of a TorchBearer Sauces Label

by: Rich Hauck

slaughter

After a few years of dormancy, I got back on the horse and created two new TorchBearer Sauces labels. The first (above) is a reinterpretation of the original Slaughter label, which was created by the now-defunct Neiman Group. The label really needed to be revised due to the change in bottle sizes several years ago.

The labels have have more recently featured real people, and in this case, local blogger Sara Bozich graces it (sorry Jaime, you’ll get a label, soon!). If you’ve ever sampled Sara’s Slaughter meatball recipe, you’d immediately know why she’s been immortalized, here.

Of course, translating real people into cartoons requires a balance of not defaming them, yet exaggerating them in the askew perspective of the TorchBearer label world. The example above definitely took far more versions than any other, and I was constantly running it by the Sara and the hot sauce brass.

horseradish-sketch

Grant’s label was far easier. It was initially inspired by a picture of Grant as a child on a tricycle, but the horse version (below) ultimately trumped the original sketch.

smokey-horseradish

As with all of the other labels I’ve drawn, everything’s done digitally with Photoshop, Illustrator, and a Wacom Cintiq. They generally take 20-40 hours a each, so I’m looking forward to a break before the next one.


Categories:advertising art food and drink photoshop
Comments: 1

Visiting New England

by: Rich Hauck

It’s hard to believe it’s been over a month since Daphyn and I took a trip for our 10-year anniversary up to New England. The original plan was to get lobster (mission accomplished!), though the quest for Spencer Trappist ale and Hill Farmstead beer were more than just coincidence.

I seem to have more and more friends making trips exclusively for beer. Bless them, but there’s too much culture to be missed. Besides stops at the Ben & Jerry’s factory tour (a bit too touristy for me), the Cabot Cheese tour, and various stops for lobster, we took a stroll through Strawbery Banke, paid homage to Emily Dickinson at her home, and saw the largest collection of one of America’s great painters.

Here’s a few shots that I felt just wouldn’t receive justice on Instagram.


Categories:webdesign
Comments: 0

Baseball-Themed Roadtrip

by: Rich Hauck

baseball

It started with this crazy idea last year to take my sister-in-law to the movie site of Field of Dreams in Dyersville, IA. Since we were spending that much time in the car, I figured why not take the opportunity to finally visit Wrigley and see my Chicago-based (not Wisconsin!) friend Becca. Throw in an impromptu stop at the home field of the White Sox along with some missed opportunities at touring some Frank Lloyd Wright homes, and  it’s suddenly a baseball-themed road trip.

comiskey

Our first stop into the Windy City had us ushered into U.S. Cellular Field, the home of the Chicago White Sox. I managed to take a picture of the rest place of Comiskey Park (the White Sox home from 1910 to 1990), located in the parking lot across 35th Street. We were provided parking and ushered in with a small crowd, not realizing that a high school all-star game was taking place. Regardless, we were provided free parking as well as an opportunity to wander through a portion of the ballpark.

IMG_3590 us-cellular2

I’d always been curious about U.S. Cellular, as it has the dubious distinction of being the last ballpark built before Camden Yards, meaning it just missed out on the retro craze. It doesn’t have the character of a warehouse in the outfield, but they’ve certainly put in a fair share of effort renovating the place. I’ll have to reserve judgement for when I actually attend a game.

Next up was Wrigley, and I was grateful to visit it prior to the proposed renovation that is supposed to start next month. I love the fact that the primary souvenir store had to be built across the street (clearly for space issues) and that the game day crowd spilled out onto the streets. It reminds me of the old Yankee Stadium, and harkens to a time in which architects didn’t account for personal space upon approaching a large sporting venue.

wrigley-exterior

wrigley

Overall, the Friendly Confines are rather quaint. We benefited from the nice breeze coming from Lake Michigan, which was just viewable from our seats. The bullpens flanked the ballpark, similar to another park I saw the previous week.

wrigley-interior

Escalators? Elevators? None seemed to be found here, as it’s a labyrinth of catwalks to the upper deck. The exposed suite level certainly makes the rest of us feel less bourgeoisie.

chicago-dog

I don’t think I’ve come across a more vibrant-looking hot dog than the Vienna Beef dogs at Wrigley. Overall, though, I found the food options relatively sparse.

Other disappointments: walking behind the bleachers and batter’s eye is limited to ticket holders of that area, meaning we couldn’t circumambulate the field. While I liked the hand-operated scoreboard, I found it difficult to find certain stats (I suppose I wasn’t trying hard enough after Pittsburgh started losing). The worst thing, though, was the video screen in left field. I can only imagine how frustrating it must be for video post-production folks to design around such a narrow strip of a screen. It seemed like a hollow attempt to bridge this landmark to modern times.

I left out some Cubs fans booing my Orioles hat. While I didn’t understand their beef with an out-of-division non-rival, I suppose a century without a championship can leave any fan base disgruntled.

cobwebs

A spider web blocked entry to a row, and the size of it in such a public place simply blew me away. I suppose Wrigley’s arachnids simply work overtime between games.

group

Lastly, we (or perhaps I should say primarily Andrew) drove roughly 7 hours round-trip from Chicago to Dyersville. I guess I miscalculated that one.

field-of-dreams1

Is it crazy to drive that far to see a cornfield? Maybe. Some people asked me if I was going during Father’s Day to see Kevin Costner and members of the original cast revisit the field for the film’s 25th anniversary. “Not for the hundreds of dollars they wanted for tickets!”, I’d reply. Now that’s crazy.

field-of-dreams


Categories:ballparks travel
Comments: 0

Northern California

by: Rich Hauck

Here’s a few more tidbits from my trip. Coincidentally, I got to see a lot of old friends, yet somehow didn’t bother to take pictures with them…


Categories:travel
Comments: 0

Visiting AT&T Park

by: Rich Hauck

att-park-facade

Last week I found myself in sunny California for the first time in 7 years. Naturally, I took a (mandatory!) detour to AT&T Park, home of the San Francisco Giants, and subsequently crossed another ballpark off of my list.

att-park

 

AT&T Park is often mentioned in the same breath as Baltimore’s Camden Yards, and based on pictures I’d seen of the Giants home, I never thought that AT&T was really worthy of comparison (not to mention that “Oriole Park at Camden Yards” is such a superior ballpark name). I’ll admit, though, I was really impressed once I entered Barry Bonds’ former home.

I was excited to try out Passbook (though I’ll always prefer tickets) at the gate, but I ended up using my printed-out paper ticket to enter, as the attendant was having issues scanning phones. Architecturally, it was a little weird to have to take an escalator to reach the promenade level, but the low ceilings reminded me of older stadiums. Once inside, the view of McCovey Cove past the outfield gives the park a really relaxed vibe.

I finally quashed my curiosity around the mammoth glove and Coke bottle (it’s a kids’ slide!) in left field, and I was amused at the lack of bullpens (you can see a battery practicing along the first base line, above). Foursquare urged me to try the garlic fries (sorry, Yankee Stadium got that out of my system), and some of the rather unique fare included Ghirardelli Chocolate stands and wine bars throughout the ballpark.

flags

The breeze really had these flags roaring over some of the action. I’d expected the flags to be ordered according to team standing (similar to the ones mounted above Yankee Stadium’s facade), but I just couldn’t make sense of the order, here.

 

sign
Ironically, I attended an Orioles game the night before with a friend who complained about fan traffic obstructing our view mid-pitch. It’s fascinating to see how teams handle things differently. Perhaps we need these cards in Baltimore…

no-standing

I suppose when you’ve had a great record the past few years and a few recent World Series championships under your belt, you need crowd control. Strolling behind the outfield felt like being pushed through cattle chutes, as “NO STANDING” signs guided fans through the park. I took pictures here while constantly wondering if security would scold me.

cove

Thank you Curtis Granderson for exhibiting what a home run falling into McCovey Cove looks like. I didn’t get to see the LED splash counter (located on the right field wall) update since Granderson plays for the visiting Mets, but I saw firsthand why kayakers act like moths to a flame.

att-back

Here’s a view of the South Beach Harbor behind AT&T Park.

field-of-dreams-message

I came across this quote on my way out of the ballpark. It’s a convenient tease for my next weekend adventure…

 


Categories:ballparks
Comments: 0

Logos and Skill Graphs on Your Résumé (and why you shouldn’t use them)

by: Rich Hauck

Ahhh, portfolio season. It’s that time of the year where the instructor in me critiques and guides students towards refining their portfolios.

It’s also that time of year where I almost always see at least one student attempt some sort of complicated data visualization or complex bar chart allegedly illustrating their skill. These charts often involve Adobe software logos accompanied by a self-diagnosed ability on a range of 0 to 100. You know, something like this:

ratings

I always steer my students away from this approach. Why shouldn’t use it, either?

It’s biased, and could make you look arrogant (or ignorant!).

I’ve taught classes based in Photoshop and have used the software for over a decade. I’m no candidate for the Photoshop Hall of Fame, but I think I’m a competent instructor. I know my Photoshop Etiquette, I’m comfortable color correcting in LAB, and I’ve made my own automated script and actions.

That said, I know next to nothing about SWOP or any of the 3D tools, so there’s no way I’d consider rating myself near 100 percent. Frankly, I think to do so is insulting to those who know more than me, yet I find students often rate themselves at 95 to 100 percent. It’s what we don’t know that hurts us, isn’t it?

So, unless you’ve taken an official Adobe certification program, you’re likely using your own yardstick, meaning it’s biased, and the ceiling is limited to your own knowledge.

Outdated logos can make you look out-of-touch with industry standards.

Which version of the software are you proficient in?

Software companies often revise their logos with each major upgrade to visually indicate to their customers that there’s a new release. This means that you’ll either need replace those logos in your résumé (and be familiar with the software upgrades) or risk looking behind in the times.

I always struggle to even recommend what to put on a résumé. Should you list the latest version number with the software?

Coding languages don’t have logos*.

I’ve seen students place Dreamweaver as a proficiency.

Seeing Sublime Text, Atom, or Brackets would probably look better, but this is a flawed approach and is detrimental to marketing oneself, as an employer is more impressed with HTML skills (or a GitHub account!) and not proficiency in a particular code editor. After all, it’s more important to know what the software is writing as opposed to knowing a particular text editor.

*Okay, so PHP, HTML5, NodeJS, CSS3, etc. have logos…But JavaScript doesn’t!

It’s copyright/trademark infringement.

Now, I seriously doubt a company like Adobe or Microsoft will be sending out cease-and-desist letters to up-and-coming designers (they likely welcome the free promotion), however, at its core, you’re using copyrighted logos without the owner’s permission. A potential employer could construe it as a general disrespect, or worse, an ignorance of copyright law.

The graph is statistically inaccurate or poorly designed.

The bar graph itself is a representation of the designer’s skill, and often it’s not well thought out. For instance, the designer may not accurately measure the bar widths. Would hash marks in the bar help illustrate the value? Should the bar graph indicate the value as a fraction or percentage somewhere? Is any of it even necessary?

The presentation itself unlocks the door to the designer’s thought process, and if the presentation isn’t optimal, what does it say about the designer?

Is it really necessary?

I understand the allure; résumés and about pages can often be plain and text-heavy in a designer’s eyes, and the inclusion of a chart or graphic is an opportunity to show off some visual flair, make statistics more interesting, and help break up the copy. Still, the points above should really make one evaluate the need for such a chart, as opposed to a simple list.


Categories:HTML5 javascript photoshop webdesign
Comments: 0

The Best Beer Central PA Money Can Buy

by: Rich Hauck

beer

So this is a hyper-localized post, but my local news outlet, PennLive, has launched a beer bracket in an attempt to uncover “The best beers you can buy in the Harrisburg area” (per the video).

The beer-drinking friends I’ve spoken with (many of which have Untappd résumés that dwarf mine) have quietly labeled these brackets as “idiotic”, “uninformed”, and “poorly conceived”. It’s definitely an imperfect system, one in which we will soon see different styles such as IPAs pitted against porters. Fortunately, seasonal beers were exempt, but entire categories like sours and lambics are, sadly, absent. Personally, I cringed to see the possibility of a Stella Artois have the chance to go head-to-head with a bourbon-barrel (New Holland’s “Dragon’s Milk Stout”, which I rooted for but was, albeit understandably, eliminated in the first round).

I’m not sure PennLive can be held at fault. They clearly attempted to line up similar styles in the first round. More importantly, the pool of beers was compiled (and is still judged by) reader votes. At a glance, it may seem as if PennLive is trying to bring exposure to lesser-known beers available in the area, but realistically, it’s about getting more readers.

No, the blame can be laid upon the feet of the voting readers. Still, I think PennLive would have done better to balance the results by running a parallel competition comprised of the votes of local beer-drinking experts. Rather than have experts weigh-in on vote tallies, have them suggest beers! Everything needs experts, and it’s not as if the community-driven Yelp is handing out Michelin stars…

So, where do I leave this? Well, I’m curious, what you, my friends and readers, think is the best beer you can buy in the Harrisburg area. Leave a comment and tell me your favorite.

We certainly have our share of distribution limitations and blessings (being at Tröegs‘ doorstep remains the envy of many Californians, and Al’s of Hampden continues to be our local Mecca). My favorite easily acquirable beer remains Chimay Blue. It’s one I keep going back to on occasion. What’s yours?

chimay


Categories:food and drink Harrisburg
Comments: 3

Using Yeoman to Create a Website Workflow

by: Rich Hauck

Up until now, I’d always embarked on a new web project by either downloading all of the necessary components (HTML5 Boilerplate, JQuery, etc.) or keeping a local copy of such popular projects on my hard drive and copying them into to a new folder. I’d known about command line installers for quite awhile, but shied away from them as being too intimidating or complicated. I’d also worked in Sass, the CSS precompiler, but found debugging too frustrating, as (at the time) browser inspectors like Firebug didn’t provide support.

I’d say Yeoman has really changed all of this for me. It has generators to pull all of the necessary dependencies and publishes minified files that are optimal for performance. I always feel like I’m light years behind when I come across stuff like this, but seeing the source code of other sites helps let me know that I’m not that late to the ball.

Workflow

  1. First, ensure you have Sass installed.On Mac:
    Using a Mac? Congratulations, Macs ship with Ruby installed, so you’ll install Sass by opening up your Terminal (which you’ll find in Applications > Utilities) or iTerm and typing:

    gem install sass

    if you run into an error, it’s likely it’s a permission error, meaning you’ll need to install Sass using sudo (superuser do):

    sudo gem install sass

    Once installed, double check the installation by typing:

    sass -v

    This should return the version of Sass installed.

    On PC:
    you’ll want to run RubyInstaller.

    NOTE: In both cases, you may want to use Sass 3.3.0 alpha, as it supports CSS Source Maps.

    gem install sass -v '>=3.3.0alpha' --pre
  2. Next, you’ll need to download NodeJS. There is an installer that’s available for both PC and Mac (as well as a binary for Linux). This will also install Node Package Manager (NPM). NPM is Node’s collection of software libraries that automate installing, upgrading, configuring, and deleting scripts.
  3. With Node installed, you can proceed to install Yeoman. Yeoman is a scaffolding tool for automating the creation of Web applications. You can do this by opening up the Terminal (Mac) or Command Line (PC) and typing the following:
    npm install -g yo

    (Node is a global installation, meaning the above call should work regardless of which directory you are in in the command line). Yeoman automatically installs Grunt, a javascript task runner (which will build, watch, and publish files), as well as Bower, Twitter’s package manager.

    In order for Yeoman to generate a project, it needs to know what code generator to use. In this case, we’ll focus on webapp, which scaffolds out a front-end web application, or website template (and also happens to be the focus of the Yeoman website example).

    Yeoman’s website contains a list of official generators along with a list of community-contributed generators (I’ve found the Angular and WordPress ones to be particularly useful).

  4.  While in the command line, type:
    npm install -g generator-webapp

    and hit “Enter”. You should see a series of lines go be listing all of the dependencies being installed.

  5. Next, create a folder on your hard drive where you wish to install your website template (do this either in your operating system or by mkdir [foldername]). Then navigate to that folder in the Terminal. You can either do this by typing cd [path] or, if you’re lazy like me, typing “cd”+space and dragging the target folder right into the command line window.
  6. Once you’re in this folder, you can proceed to install the webapp by typing this in the command line:
    yo webapp

    yeoman

    Choose your options and it will install the following files and folder structure:

    • /app – This is where you will develop and modify your site template
    • bower.json – This is a file telling bower what library
    • /node_modules – This directory contains all of the dependencies required for the project and referred to in the Gruntfile.
    • Gruntfile.js – This file tells Grunt what to do with your app folder when you publish your app. It will include file minification and consolidation.
    • package.json – This file is used by Grunt to list all devDependencies. Leave devDependencies alone, however, you can modify your app’s name and version.
    • /test – This folder contains unit tests.
  7. Next, call the following in the command line:
    grunt serve

    This will create a static web server and open your default browser to point to your webapp’s app folder. You will want to use Firefox 29+ or the most recent version of Chrome, as these will support scss files in the web developer console.More importantly, calling grunt serve also does grunt watch, which means it will poll your /app folder for changes. As soon as you save any file, it will detect the change and reload the latest version in the browser.

    As this is happening, your command line window will show “Waiting…”. If at any point you wish to return to the prompt, you can type control+c to return to the prompt.

    In the past, I’d used the live view in Brackets (Adobe’s excellent open source text editor) or the Compass framework by itself. I’d still advocate Brackets, however, Grunt doesn’t break the connection between editor and browser when you open the developer console.

  8. Once you are satisfied with your app, you can return to the command prompt, type the following, and hit “Enter”:
    grunt build

    This will instruct Grunt to use the commands and preferences defined in Gruntfile.js and build out your app in a new folder: /dist (the location of this distribution folder can be changed in the Gruntfile.js under the yeoman project settings found in grunt.initConfig()).

By default, the webapp’s Gruntfile.js will include instructions to minify all files and images within the app folder. If you want to change any of the publish settings, you can simply change the Gruntfile. For example, if you want to prevent the HTML page from minifying (as I do, since I’m likely to inject server-side calls), you can either modify the preferences for htmlmin (L248) or comment out where Grunt registers the task (see grunt.registerTask() on L389).

I questioned this workflow every step of the way. I investigated ways to include CSS and Javascript source maps, then I tried revising the cachebusters to query strings instead of file name prefixes (until I discovered prefixes were more reliable). I also looked into using Koala as a watch tool instead of Grunt. In the end, I have no doubt this generator has gone under extensive scrutiny, and it’s something I’m currently building into my workflow.


Categories:HTML5 javascript webdesign
Comments: 0

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.