Update 2017: Skills and Things I do


Time to do a quick post to reflect on what I’ve been doing at work…


At ClearGraph, I’m the only designer thus it falls to me to make designs for lots of things.

  • App Design: Flows, interaction and visual design for our main analytics app. One challenge is trying to define our brand yet also building in the flexibility to white-label or embed our app. Some of the more daring design choices can’t be used because it won’t meld with another company’s visual identity. I primarily use Sketch and InVision.
  • Motion design: We need to do product videos to help sell our product. I use Premiere and After Effects to edit the videos with Pond5 stock music to go behind our voice-over.
  • Hard goods: business cards, t-shirts, stickers, trade-show backdrops, pricing sheets. I am a sucker for Moo’s spot gloss.


I’m a bit surprised by the amount of writing that I do as a part of my job. Since marketing has become one of my responsibilities, I’ve been forced to substantially increase the amount I write. (Previously, I couldn’t tell the difference between marketing and sales. Now I think of it as: Marketing = effort to get people to hear about and contact us. They’d become a “lead”. Sales = effort to take leads and then convert them into paying customers.)

  • Essential communication: email, chat (Slack), code review, project descriptions (task management)
  • Product Blog posts: public feature announcements/walk-throughs in the ClearGraph Blog
  • Social Media: Twitter, Facebook, Linked In, email newsletter. Basically have to notify people that a blog post has happened.
  • ClearGraph Website, App, and marketing materials: It’s interesting how difficult it is to write error messages with good tone. (I dislike “Oops” in errors – makes light of an error and doesn’t come off as empathetic)
  • Help Center: Gotta give help for all the things. FYI – Support articles should be short, clear and accurate.


This year I’ve done a lot less programming. We’ve been doing a lot more back-end, infrastructure work so the front-end stuff I’d hop in to help with is a lot more limited. That being said, I still try to keep up by learning a few new skills in the code-world.

  • SVG: lots of cool things going on here. Working to move away from icon fonts to SVG. Also doing more animating SVG using CSS.
  • D3: Starting to finally tinker with D3 as a way of visualizing data in svg using js. Specifically looking at the tree graph and force graphs.
  • CSS: I’ve been working a lot with SASS, but I’m keeping a really close eye on the compatibility charts with CSS grid and CSS variables (oh and position: sticky!). As soon as there’s strong coverage across the board, we’ll put those properties to use.


I stopped teaching at Academy of Art University. I had fun guiding students, but I felt too pressed for time regarding homework review and updating class materials. My last semester was interesting though – I tried using github and cloud9 for editing and turning in. There were some hiccups like filesize limits on github pushes, but overall was pretty successful as a free platform setup for coding.

On another note, I’ve gotten a couple of interview requests from early UC Davis design students. I love helping out students, but I also wonder what kind of things they’re looking for. I wish I could offer more entry level jobs to help them along.

Installing Bower packages in Angular


Learned something dumb today. I was having trouble getting the angular-scroll package to work at all. Then I remembered having similar problems months ago. Best to write this down to remember once and for all.

Add the –save flag

Most front-end packages on GitHub have installation procedures that look like this:

However, if you’re using a task manager like gulp or grunt to squash vendor scripts, you’ll probably also need to add the --save  flag in order to actually add the package to your bower.json config file.

Add the package to your angular module

Can’t also forget to add the package to the angular app module

Marketing Learnings


I’m getting started handling the Google AdWord Campaigns over at ClearGraph. Here’s some of the more interesting tid-bits I wouldn’t have found without talking to the Google consultants.

Ad Extensions are awesome

The content under the ad description are ad extensions. You can place as many as you want without costing you any extra per click. It’s an interesting way to incentivize people to provide structured content compared to the rather tiny description character limit.

Retargeting search ads

You can increase your search ad bid for Google cookied people who previously visited your site. This helps you appear on top more often in normal keyword searches. As a by-product, it also improve ad quality score since they’re more likely to click your ad. Suggested increase was +40%.

Better conversion tracking using position based attribution

Sometimes people will click on more than 1 ad before signing up. By default, only the final ad gets a conversion point. Like a sport’s assists, the “position based” model splits the conversion point between all ads that contribute to the conversion.

Tools > conversion actions > attribution model, pick “position based”.

Track Cross-device conversions

For some reason, it defaults to false.

Tools > settings, check “Include cross-device conversions”.

Self review, October 2014


Note 11/16/2016: This is 2 years old now sitting in my draft bin. I figure it’s ok to publish. It marks a time of about 6 months into my time at Archives.com (Ancestry acquisition) from Hotwire. It was me jumping from Designer to Developer which seemed a big change at the time. Now… not quite as much. Maybe I’ll write a followup this year.

(Originally written Sep 26, 2014)

Process and project management
You don’t know the true value of something until it’s gone. I happy about my experience with scrum agile. I can finally see the formal training process is paying off. I do miss having a scrum Master- it’s really important for aligning the different types of team members into common goals that they need to work on beyond the daily stories.

Taking an actual jump into being a developer galvanized a lot of new leaning. I really wonder how much I would have learned on my own without the pressure and exposure via work.
Git and sass are now in my All Time Favorite list. That’s high praise given a year ago I barely knew they existed. Require js and module patterns have finally started to make sense but I’m still having difficulty since different frameworks implement them with slight differences (angular).

With Eduardo’s evangelization, I’ve fully transitioned to designing in Sketch. I love the art boards and accurate effects though I do miss Photoshop’s smart objects.

Angular notes and animation


Two quick things I wish I knew about angular:

  • ng-repeat fcns only work on arrays, not js objects
  • use different classes for animating ng-hide vs. ng-if


  • filter
  • orderBy
  • limitTo

Animation classes

  • ng-hide, ng-show: .ng-add, .ng-remove
  • ng-if: .ng-enter, .ng-leave
  • add/remove classes: .myclass-add, .myclass-remove
  • There’s also -active (end state), -stagger (use for delaying)

Sass media Queries


CSS Media queries for high res screens are a pain to research. Too much noise/complaining/explanation, not enough actual code. So I thought I’d post my version for people to see in simplicity. (Note: it’s in sass) Tested on normal and retina screens: Chrome 41.0.2, Safari 8.05, Firefox 37.0.1, iOS 8.3

Sass media query mixin

Usage in my scss partial (like _header.scss)

HTML Viewport tag