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

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 full-size slide

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

    View full-size slide

  3. Introductions

    View full-size slide

  4. GitHub
    Adobe
    Sevnthsin
    Aaron Shekey
    Product Designer

    View full-size slide

  5. Vokal
    The Nerdery
    Ellen Shapiro
    iOS Developer

    View full-size slide

  6. Songwriting for iPhone

    View full-size slide

  7. Why learn to code?

    View full-size slide

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

    View full-size slide

  9. QUIT DRAWING PICTURES OF APPS
    1

    View full-size slide

  10. QUIT DRAWING PICTURES OF APPS
    1

    View full-size slide

  11. QUIT DRAWING PICTURES OF APPS
    1

    View full-size slide

  12. 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 full-size slide

  13. IMPROVE COLLABORATION
    3

    View full-size slide

  14. IMPROVE COLLABORATION
    3

    View full-size slide

  15. How to learn to code?

    View full-size slide

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

    View full-size slide

  17. Just start building

    View full-size slide

  18. Sorting reveal

    View full-size slide

  19. Settings reveal

    View full-size slide

  20. You can do this!

    View full-size slide

  21. Until you can’t

    View full-size slide

  22. Bringing in a developer

    View full-size slide

  23. 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 full-size slide

  24. FOCUS ON THE HARD PARTS
    3

    View full-size slide

  25. 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 full-size slide

  26. 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 full-size slide

  27. 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 full-size slide

  28. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  31. HUGE, UNRULY METHODS
    2

    View full-size slide

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

    View full-size slide

  33. But it works

    View full-size slide

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

    View full-size slide

  35. “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 full-size slide

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

    View full-size slide

  37. 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 full-size slide

  38. - (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 full-size slide

  39. - (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 full-size slide

  40. justhum/HUMSlider

    View full-size slide

  41. Tips for working with
    designers who develop

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  45. “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 full-size slide

  46. Songwriting for iPhone
    justhum.com
    @justhum

    View full-size slide