Update 2017: Skills and Things I do

Standard

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

Designing

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.

Writing

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.

Programming

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.

Teaching

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.

Responsive images with srcset and sizes

Standard

Eric Portis has written the best tutorial/explanation I’ve seen yet on implementing responsive images. I gave up on making responsive images when working on my portfolio because I couldn’t find consistent and understandable best practices. Now I may go back and try it again.

The key takeaway is that you declare the format of the image with srcset and then use the sizes attribute as the media query.

The tutorial: Srcset and sizes

A quick reference example:

Little known but nifty css

Standard

Documenting some of my latest finds in CSS.

Icon fonts and [] attribute selector
Used icomoon.io today to create fonts from svg files. It was really easy to implement too! 2 CSS rules: one @font-face to embed and one [data-icon]:before to place content. Note the way to select by attribute. This is ie8+ compatible!

attr() value
Did you know you can set the property in CSS to an attribute’s value? That one blew mind! So, you can do something like, :before{ content: attr(data-icon); }. Paired with an icon font, you can get some crazy cool values! ie8+
http://davidwalsh.name/css-content-attr

Counters
You can display and increment numbers next to anything using css counters. Why would this be good?  Well imagine you need to have incrementing numbers across multiple types of elements and you’d rather not use an ol… Say rows in a table. Well now you can. Plus ie8+ compatible!
http://davidwalsh.name/css-counters

CSS tutorial: Create text bubbles that resize & truncate text

Standard

Dealing with dynamic text can be particularly troublesome for designers especially when there is no min/max length. Truncation is nice for large amounts of text but doesn’t apply to inline elements that scale nicely for small amounts. Well, proof of concept time.

Play with the sample code

flexible-textbubbles

So, as a web developer, have you ever been asked to add a text bubble to your page?

No problem. Super lazy way would be to cut a background image. A better, less lazy way would be to add a little border-radius here, and and some padding and you’re done.

Did your designer ask for the width of the bubble to be dependent on the dynamic text?

Sure, put the background color on a span so that width is based on the text.

Oh, did she mention that the text needs to also truncate nicely when it becomes longer than the content area?

… shit.

The trick here is the have two nested elements. One inline, and one block.

  • inline elements (like spans) get their width based on the content. Thus add the background color to the inline element.
  • block elements (like divs) have a fixed width and thus can also have overflow properties.

A few things to note

  • Need to hide the overflow and set the ellipsis for the text. (Line 6)
    overflow: hidden;
    text-overflow: ellipsis;
  • Need to prevent line wrapping. (line 17)
    white-space: nowrap;
  • Need to add the same border radius on both containers. This way the border is applied when both short and when cropped long.
  • The pointy is a css pointy as shown here.

Play with the sample code

Code Corner

Standard

New thing I learned today: text-overflow: elipsis and rem units

You can truncate a line of text with an elipses (or other string) at the end.

Doesn’t work for multi-line text blocks. Browser limited to firefox 7+.

text-overflow: elipsis;
white-space: nowrap;
overflow: hidden;

You can also use rem for units instead of ems

Reference: Jonathan Snook

html { font-size: 62.5%; } /* bases font size = 10px */
body { font-size: 14px; font-size: 1.4rem; } /* 14px */
h1 { font-size: 24px; font-size: 2.4rem; } /* 24px */

Picking a CSS framework.

Standard

I really like the 960gs, but I want to make an adaptive site. So I’ve been on the hunt for a css framework that includes 2 things: a set of media queries, a set of grid classes.  It’s been frustrating since many of the frameworks seems to have one but not the other. Of course I want to get this up in < 1 day. So far I think Simple grid is the best followed closely by Skeleton.

Frameless grid

  • Very little documentation. Seems to require LESS framework compiling?
  • Can’t figure out how to use quickly
  • Stack overflow: How to read less css

Less grid

  • Still have to define pixel widths for each media format? slow!

Skeleton

  • based on 960gs
  • Worried about page load, unminified, non-cdn
  • Have to Redefine lots styles.

Simple grid

  • Nice nesting of columns.
  • Seems the easiest to start up.
  • Worried about page load, unminified, non-cdn