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
2. The power of “working code” and designers who develop 360|iDev 2015 Denver, CO
3. Introductions
4. GitHub Adobe Sevnthsin Aaron Shekey Product Designer
6. Vokal The Nerdery Ellen Shapiro iOS Developer
8. Songwriting for iPhone
9. Demo
10. Why learn to code?
11. Quit drawing pictures of apps Understand your craft Improve collaboration WHY LEARN TO CODE? 1 2 3
12. QUIT DRAWING PICTURES OF APPS 1
13. QUIT DRAWING PICTURES OF APPS 1
14. QUIT DRAWING PICTURES OF APPS 1
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
16. IMPROVE COLLABORATION 3
17. IMPROVE COLLABORATION 3
18. How to learn to code?
19. Be passionate Build tiny prototypes Embrace trial and error Be fearless in your incompetence HOW TO LEARN TO CODE 1 2 3 4
20. Just start building
21. Sorting reveal
22. Settings reveal
23. You can do this!
24. Until you can’t
25. Bringing in a developer
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
27. FOCUS ON THE HARD PARTS 3
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
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
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
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
32. SO MANY LINES OF “WORKING CODE” 1 UIImageView *soundSoft = [[UIImageView alloc] initWithFrame:CGRectMake(-27, 8, 17, 18)]; soundSoft.image = [UIImage imageNamed:@"soundSoft.png"];
33. SO MANY LINES OF “WORKING CODE” 1 UIImageView *soundSoft = [[UIImageView alloc] initWithFrame:CGRectMake(-27, 8, 17, 18)]; soundSoft.image = [UIImage imageNamed:@"soundSoft.png"];
34. HUGE, UNRULY METHODS 2
35. NOT QUITE THE MVC I’D BEEN TAUGHT 3 } } @end
36. But it works
37. “Some of the worst code I’ve ever written has been in my most successful projects.” –Jared Sinclair Judicious Use of Shitty Code
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
41. continueTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event Aaron’s
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) { } ]; }
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
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
45. justhum/HUMSlider
46. Tips for working with designers who develop
47. Talk about how to break things up Build AutoLayout Helper Methods Have empathy and patience FOR DEVELOPERS 1 2 3
48. Talk about how to break things up Build AutoLayout Helper Methods Have empathy and patience FOR DEVELOPERS 1 2 3
49. Be maddeningly obvious Leave copious TODOs and FIXMEs Expect UI ‘regressions’ FOR DESIGNERS 1 2 3
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
51. Songwriting for iPhone justhum.com @justhum