5 Tools in 5 Minutes @ Design+Startup

A five minute quick talk about the tools I use everyday.

At Square we iterate rapidly and constantly on web interfaces. Thus it's crucial we select and maintain development tools that promote efficiency and quality in our work.

Presented at Design+Startup. Organized by First Round Capital at IDEO SF.
http://designplusstartup.com/

**Apologies, the "style guide" and "xScope" sections have screencast videos which do not translate to speaker deck.

Transcript

1. in five 5
3. Beau Smith @beau
9. Square card reader Square register pay with Square
11. Public Site Dashboard Signup & Activation Flow Internal (Admin, Risk, Metrics)
12. Square style guide
13. Square style guide Public Site Style Guide
15. Twitter Bootstrap
23. kippt.com
24. kippt.com
27. $msg-width: 500px $msg-padding: 15px $msg-icon-width: image-width("icon-info.png") .flash-message width: $msg-width - ($msg-padding * 2) - $msg-icon-width padding-right: $msg-padding + $msg-icon-width padding-left: $msg-padding Embed logic into your style sheets Maths!
28. Ooooooh, rounded corners… CSS3 .flash-message +border-radius(5px) .flash-message { -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; } CSS…
29. Delightfully simple with Compass Sprites
30. Delightfully simple with Compass Sprites error.png info.png success.png foo-sprite.png
31. Delightfully simple with Compass Sprites foo-sprite.png .icon-sprite, .icon-error, .icon-info, .icon-success { background: url('../images/icon-sa3bc8b9105.png') no-repeat; } .icon-error { background-position: 0 0; height: 19px; width: 20px; } .icon-info { background-position: 0 -19px; height: 21px; width: 20px; } .icon-success { background-position: 0 -40px; height: 21px; width: 20px; }
32. bit.ly/sass-why
37. Your Code Editor [ ]
39. Introduce me to your top five… @beau #designplusstartup
40. Introduce me to your top five… @beau #designplusstartup