Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Power of Working Code and Designers Who Develop (with Aaron Shekey) - 360iDev Denver, August 2015

The Power of Working Code and Designers Who Develop (with Aaron Shekey) - 360iDev Denver, August 2015

I presented with Aaron Shekey, the designer of and my partner in crime on Hum, about our process and what it's like for a developer and a designer who develops to work together.

http://justhum.com

Ellen Shapiro
PRO

August 19, 2015
Tweet

More Decks by Ellen Shapiro

Other Decks in Technology

Transcript

  1. The power of working code
    and designers who develop
    360|iDev 2015 Denver, CO

    View Slide

  2. The power of “working code”
    and designers who develop
    360|iDev 2015 Denver, CO

    View Slide

  3. Introductions

    View Slide

  4. GitHub
    Adobe
    Sevnthsin
    Aaron Shekey
    Product Designer

    View Slide

  5. View Slide

  6. Vokal
    The Nerdery
    Ellen Shapiro
    iOS Developer

    View Slide

  7. View Slide

  8. Songwriting for iPhone

    View Slide

  9. Demo

    View Slide

  10. Why learn to code?

    View Slide

  11. Quit drawing pictures of apps
    Understand your craft
    Improve collaboration
    WHY LEARN TO CODE?
    1
    2
    3

    View Slide

  12. QUIT DRAWING PICTURES OF APPS
    1

    View Slide

  13. QUIT DRAWING PICTURES OF APPS
    1

    View Slide

  14. QUIT DRAWING PICTURES OF APPS
    1

    View Slide

  15. UNDERSTAND YOUR CRAFT
    2
    “Hunter S. Thompson re-typed
    The Great Gatsby just to get the
    feel of writing a great novel.”
    Everything is a Remix

    View Slide

  16. IMPROVE COLLABORATION
    3

    View Slide

  17. IMPROVE COLLABORATION
    3

    View Slide

  18. How to learn to code?

    View Slide

  19. Be passionate
    Build tiny prototypes
    Embrace trial and error
    Be fearless in your incompetence
    HOW TO LEARN TO CODE
    1
    2
    3
    4

    View Slide

  20. Just start building

    View Slide

  21. Sorting reveal

    View Slide

  22. Settings reveal

    View Slide

  23. You can do this!

    View Slide

  24. Until you can’t

    View Slide

  25. Bringing in a developer

    View Slide

  26. Iterate on UI quickly and easily
    Forces you to keep your code clear
    Lets you focus on the hard parts
    THE GOOD PARTS
    1
    2
    3

    View Slide

  27. FOCUS ON THE HARD PARTS
    3

    View Slide

  28. FOCUS ON THE HARD PARTS
    3
    Fixes for #557: Crash when trying to delete from search view
    Possible fixes for #554: IOOB crash when a song stops
    Fixes for #555: The static waveform view is bad at math
    Fixes for #543: Inline player disappears after going to background

    View Slide

  29. FOCUS ON THE HARD PARTS
    3
    Using updated model to regenerate CoreData files
    Updating MOGenerator script to use new model.
    Add new CoreData model and setup / test automatic migration
    Updating JSON parsing for recordings and songs.
    Dropbox Wrapper, take 1

    View Slide

  30. FOCUS ON THE HARD PARTS
    3
    Using updated model to regenerate CoreData files
    Updating MOGenerator script to use new model.
    Add new CoreData model and setup / test automatic migration
    Updating JSON parsing for recordings and songs.
    Dropbox Wrapper, take 1
    Dropbox Wrapper, take 1 bfb89e2 E Mar 10, 2014, 9:08 PM
    1.4 Build 29d63cc A Feb 10, 2015, 6:06 PM

    View Slide

  31. So many lines of “working code”
    Huge, unruly methods
    Not quite the MVC I’d been taught
    THE NOT SO GOOD PARTS
    1
    2
    3

    View Slide

  32. SO MANY LINES OF “WORKING CODE”
    1
    UIImageView *soundSoft = [[UIImageView alloc]
    initWithFrame:CGRectMake(-27, 8, 17, 18)];
    soundSoft.image = [UIImage imageNamed:@"soundSoft.png"];

    View Slide

  33. SO MANY LINES OF “WORKING CODE”
    1
    UIImageView *soundSoft = [[UIImageView alloc]
    initWithFrame:CGRectMake(-27, 8, 17, 18)];
    soundSoft.image = [UIImage imageNamed:@"soundSoft.png"];

    View Slide

  34. HUGE, UNRULY METHODS
    2

    View Slide

  35. NOT QUITE THE MVC I’D BEEN TAUGHT
    3
    }
    }
    @end

    View Slide

  36. But it works

    View Slide

  37. “Some of the worst
    code I’ve ever written
    has been in my most
    successful projects.”
    –Jared Sinclair
    Judicious Use of Shitty Code

    View Slide

  38. “If, in the end, the code
    looks easy — unimpressive,
    even, as if a middle-school
    kid could have written it —
    then good.”
    –Brent Simmons
    How Not To Crash #9: Mindset

    View Slide

  39. View Slide

  40. View Slide

  41. continueTrackingWithTouch:(UITouch *)touch
    withEvent:(UIEvent *)event
    Aaron’s

    View Slide

  42. continueTrackingWithTouch:(UITouch *)touch
    withEvent:(UIEvent *)event
    Aaron’s
    if ( touchLocation.x < self.segment ) {
    CGRect tick01Frame = self.tick01.frame;
    tick01Frame.origin.y = -2.5;
    [UIView animateWithDuration:0.5
    delay:0
    usingSpringWithDamping:0.6f
    initialSpringVelocity:0.0f
    options:UIViewAnimationOptionCurveLinear
    animations:^{
    self.tick01.frame = tick01Frame;
    }
    completion:^(BOOL finished) {
    }
    ];
    } else {
    CGRect tick01Frame = self.tick01.frame;
    tick01Frame.origin.y = 2.5;
    [UIView animateWithDuration:0.5
    delay:0
    usingSpringWithDamping:0.6f
    initialSpringVelocity:0.0f
    options:UIViewAnimationOptionCurveLinear
    animations:^{
    self.tick01.frame = tick01Frame;
    }
    completion:^(BOOL finished) {
    }
    ];
    }

    View Slide

  43. - (BOOL)continueTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event
    {
    [self popTickIfNeededFromTouch:touch];
    return [super continueTrackingWithTouch:touch withEvent:event];
    }
    continueTrackingWithTouch:(UITouch *)touch
    withEvent:(UIEvent *)event
    Ellen’s

    View Slide

  44. - (void)popTickIfNeededFromTouch:(UITouch *)touch
    {
    // Figure out where the hell the thumb is.
    CGRect trackRect = [self trackRectForBounds:self.bounds];
    CGRect thumbRect = [self thumbRectForBounds:self.bounds
    trackRect:trackRect
    value:self.value];
    CGFloat sliderLoc = CGRectGetMidX(thumbRect);
    // Animate tick based on the thumb location
    for (NSInteger i = 0; i < self.tickViews.count; i++) {
    [self animateTickIfNeededAtIndex:i forTouchX:sliderLoc];
    }
    }
    continueTrackingWithTouch:(UITouch *)touch
    withEvent:(UIEvent *)event
    Ellen’s

    View Slide

  45. justhum/HUMSlider

    View Slide

  46. Tips for working with
    designers who develop

    View Slide

  47. Talk about how to break things up
    Build AutoLayout Helper Methods
    Have empathy and patience
    FOR DEVELOPERS
    1
    2
    3

    View Slide

  48. Talk about how to break things up
    Build AutoLayout Helper Methods
    Have empathy and patience
    FOR DEVELOPERS
    1
    2
    3

    View Slide

  49. Be maddeningly obvious
    Leave copious TODOs and FIXMEs
    Expect UI ‘regressions’
    FOR DESIGNERS
    1
    2
    3

    View Slide

  50. “If your goal is to build a successful business,
    then stop trying to impress your heroes. Learn as
    you go. Be messy. Don’t use new technologies.
    Don’t use new languages for their own sake.
    Don’t waste time trying to think of the most
    elegant way to break an egg. Just smash it on
    the counter and leave a FIXME: comment and
    move on. The only question that matters: is this
    app fun or what?”
    –Jared Sinclair

    View Slide

  51. Songwriting for iPhone
    justhum.com
    @justhum

    View Slide