Angular notes and animation

Standard

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

ng-repeat

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

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:

Icon font character encoding

Standard

Using icon fonts, had some trouble figuring out how to display as a character vs in css content. Basically you can swap out &#x with \. CSS is more proper due to accessibility.

In HTML, using hex:

In CSS, using content property (you need to use utf-8 that looks like \)

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