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

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