Thursday, April 28, 2011

What makes a good "developer experience"?

(Short version: To help me answer this question, fill out this survey. Thanks!)

We are all quite familiar with the term "user experience" (UX) because as developers, we are typically spending our time developing products that we want people to use, and we want the UX to be positive so that they continue using them. However, we are now in the age of web APIs and developer platforms, and increasingly more of us are spending our time developing products for developers themselves to use.

Just like with user products, we want the "developer experience" (DX) to be positive so they continue developing on top of our service, and so they feel good relying on us to be part of their app's technology stack. When we talk about user experience, we focus on the usability of the user interface and the various user actions (like sign-in, search, share). A developer experience is very different, though, and when we talk about it, we should be focusing on the usability of the API and the developing-and-debugging experience. How does a developer first learn about your service? Where do they go when they need help? How easy is it for them to develop arbitrary apps on top of it? Can they use it successfully in their preferred environment? Those are the sort of questions that we need to ask to figure out what the developer experience is like.

Developer experience is important and non-trivial, but unfortunately, it's been nowhere near as discussed as user experience - a quick Google search yielded mostly this one article from UXMag. When I worked in developer relations at Google, we were basically tasked with designing the DX for our APIs and tools, and when I wrote up the Developer Support Handbook, I was attempting to document some of what I learnt from my years on the Maps and Wave APIs. That handbook only talks about some aspects of the experience - it doesn't talk about API usability at all - and it's only based on my own limited experience. I know that there is much more to be documented and discussed, and that there are many different types of developers and developer services out there, and just as with UX, there may not be just one set of DX principles that fits everything.

Why do I bring this up? A few weeks ago, I met with a mobile analytics company called Flurry to discuss their developer experience and how they can improve it to better support their current developers and encourage future developers. I gave them my own opinions, but I really would love to hear the opinions of more developers to give me a broader perspective. To find out what you guys think about what makes a positive developer experience, I've put together a short survey. Please fill it out if you have the time, or feel free to leave comments on this post. Thank you for your thoughts and for caring about what it means to have a good developer experience.

Sunday, April 17, 2011

SF jQuery Conference 2011: My Learnings

For the last 5 years, I've really only attended conferences that I was speaking at or somehow representing Google at, and I was always paid by Google to attend. This past weekend, I convinced myself to pay out of my own pocket to attend a conference for the first time, and it was completely worth it.

jQCon was a 2-day event in the Microsoft Mountain View campus with a wide range of well-known speakers, like Nicholas Zakas, Steve Souders, Paul Irish, and of course, John Resig, plus equally skilled but lesser known contributors to the world of jQuery and JavaScript programming. It was a great way to learn new techniques and tools for client-side web app development from the people that are doing it 24/7 for some of the biggest sites on the web.

I personally gravitated to the more mobile-oriented talks, as I've recently become interested in mobile webapp development (I finally use my phone here!) and have been using jQuery mobile for the next version of SpeakerMeter. I learnt a lot about how people are currently writing mobile webapps, and more importantly, I realized that this is a rapidly changing area, particularly as the line between desktop and mobile becomes increasingly blurry. I was hoping to find the "one true way" of making a HTML5 mobile webapp, but I've realized instead that I need to try the current ways out there (like PhoneGap + jQuery Mobile) and be ready for that to change.

I took notes throughout the talks on tips and resources, and am sharing them here both for my own reference and to give you an idea of what was discussed. I look forward to learning more at the next jQCon, whenever that may be. :)

Day 1:

jQuery Mobile (Todd Parker & Scott Jehl)

  • Many developers are using jQuery Mobile in combination with PhoneGap to deploy mobile-optimized webapps.
  • jQuery Mobile now supports more mobile browsers, including Kindle Webkit.
  • The jQuery Mobile team put a lot of work into making all the controls accessible.
  • The team is working on an improvement that will include better URLs (hash-less) for browsers that support it (HTML5 pushState).
  • The team made sure that it was easy for developers to make custom themes/colors, and they want more developers to take advantage of that.
  • Browse the jQuery Mobile gallery to see what other developers have done.
  • The M Project is an open source project to make it easier to make mobile webapps with jQuery mobile.
  • The team recommends specifically optimizing the UI for iPad/tablets and not just using the standard narrow mobile layout. They hope in the future that the framework can do more of that for developers.
  • CSS3 media queries can be used to change the UI for different device sizes.
  • jQuery Mobile can be used with grids frameworks (can be useful for tablet layout).

Mobile Performance (Steve Souders)

  • Its better to have your site be fast when users first experience it - study showed slow sites lost users (and it took a while for them to come back).
  • Use Blaze.io for seeing the mobile performance of your site (like webpagetest.org).
  • Use PCAP Web Performance Analyzer to analyze performance of websites (can be used locally).
  • Use JDRop with mobile bookmarklets to store performance data in the cloud for later analysis.
  • Use data URIs and localStorage for better mobile performance.

Progressive Enhancement 2.0 - Because the Web isn't Print (Nicholas Zakas)

  • Read: "Understanding Progressive Enhancement"
  • "The relationship between a web browser and a webpage is like a television and a TV show."
  • Examples of progressive enhancement in the real world: escalators and electric toothbrush.
  • Websites don't need to look exactly the same in every browser.
  • Don't try so hard to make old browsers do what new browsers can (consider effort versus value) - like rounded corners, drop shadows, and gradients.
  • Developers use multiple browsers, but most users only use one browser - they won't know if the experience is different.
  • Progressively enhance for browsers that support newer technology - Facebook chat is an example of a progressive enhancement.

Integrating Code Quality tools into your jQuery Development Workflow (Anton Kovalyov )

  • JSHint is the alternative to JSLint - does not enforce so many "crocklamations" by default.
  • Recommends using git precommit and postcommit hooks for running JSHint, to make sure all team members are using it. Break the build if it errors.
  • Many community-written addons for integrating JSHint with IDEs. He likes Sublime.
  • Read: Perfection Kills, A minute with Brendan

Prototyping and Unit Testing with Mockjax & mockJSON (Elijah Manor)

  • MockJAX is a jQuery plugin for simulating AJAX requests and responses.
  • MockJSON is a library for generating random JSON responses based on JSON templates. Works well with MockJAX.

Day 2:

Filling the HTML5 & CSS3 Gaps with Polyfills and Shims (Rey Bango)

  • Rey is both a Microsoft employee and a jQuery team member - MS is a big supporter of jQuery.
  • A "polyfill" mimics a standard/future API and makes it work in older browsers, whereas a "shim" provides an arbitrary API for achieving some functionality. "Polyfill" was named by Remy Sharp after the British term for spackling - it's like filling holes in old browser cracks.
  • When you are using a polyfill or shim, vet them carefully: see how many developers are working on them, how frequently they update them, etc.
  • Long list of polyfills and shims.

How jQuery is helping Pixar to make their movies (Philip Floetotto)

  • Pixar is a big Python user. For their project management system, they used Django for the backend and jQuery for the frontend.
  • They built their UI on top of the TableSorter plugin.

Presentational jQuery (Doug Neiner)

  • Be concious of when you use linked stylesheets vs. STYLE tags vs. inline style setting. Never use jQuery to set initial state. Reduce use of .css() as much as possible.
  • "Use selectors like you run errands" - try to do as much in one call as you can.
  • Experiment with easing (on different properties) for better animations.

Breakout Session: jQuery Mobile

Much discussion on using jQuery Mobile to build static sites that are deployed as WebViews inside of native apps.

  • Advantage of PhoneGap over Titanium is that it deploys to more mobile platforms.
  • Phone Gap Build lets you deploy mobile apps without needing to download anything.
  • Use something like JSON Template or Handlebars for client-side templating of the jQuery mobile headers and footers.
  • Use HT Track or Hyde to use Django templates locally and still output a static site.
  • Recommended reading: Responsive Web Design.

The Middle Way: Developing Hybrid Mobile Apps (Alex Kessinger)

  • Use localStorage to store data locally, and use LRU to stay under the 5MB size limit.
  • If using AppCache, inline everything (CSS, JS, HTML) so everything stays in sync in the cache.
  • For a better user experience, render *anything* to the user first (versus nothing), even fake DIVs.
  • For easier mobile debugging, try JSConsole.
  • OpenAppMkt is a marketplace specifically for mobile-optimized webapps.

Breakout Session: CouchDB + jQuery

Wrote a small JQuery & CouchDB app (with this view).

Creating mind-blowing UX - "Building great user experiences with the help of jQuery" (Darcy Clarke)

  • User experience is about emotions - you want your users to have positive emotions when using your site. Surprise is an emotion that can be either positive or negative.
  • Inspirational design agencies: F-I, Zurb, Blitz

Wednesday, April 13, 2011

Twenty Questions (With Myself)

It's always fun to answer questions about yourself - remember those "About Me" books you would fill out as a kid? Well, I do, and I loved them, so when people ask me if I'm up for an interview, I always say yes. I recently answered a series of long & short questions for a Mexican development agency's internal newsletter, and since that newsletter isn't online, I figured I'd share them here instead. Enjoy!

Short Questions

  • Linux, Mac or Windows? Mac. I was raised in a Windows-using family - back when Macs weren’t Unix-based, but I recently converted to Mac and love it.
  • Twitter or blog? Both. I like the challenge of expressing something in 140 characteres, but I also like to write up my experiences and projects in much longer blog form.
  • iPhone or Android? Android...only because I got free Android phones from Google. I’d happily accept a free iPhone if it were to come my way. :)
  • Bread or tortilla? Neither. I’ve recently stopped eating grains of any sort (as they’re not actually that good for you). I miss tortilla more than bread though - growing up in Los Angeles, I was raised on quesadillas!
  • Wine or tequila? Wine. I save tequila-drinking for when I’m in Mexico and can drink the good stuff. :)
  • Day or night? Day. I’m afraid of the dark.
  • Warm weather or cold weather? Warm.
  • Sunny or rainy? Sunny! The rain is only fun if there’s a hot bath waiting for you at home.

What is your favorite…

  • Book: I can’t come up with just one. My favorite book genre is short stories, and Roald Dahl has some of the best stories out there.
  • Gadget: Kindle. It stays charged forever, and since I hate charging things, that makes it my favorite thing.
  • Videogame: Puzzle Pirates. I don’t play it anymore, but it’s the only game that I’ve come close to an addiction with.
  • Programming Language: JavaScript. It’s weird, but it works.
  • Browser: Chrome.

Tell us how did you get your first computer, and what age were you?

I don’t actually remember a time when we didn’t own a computer - since my parents were effectively computer scientists since the day I was born, we always had computers in the house. I first remember using DOS to play a “Garfield” and a “Dinosaurs” game, and then we upgraded to Windows 3.1.

Why did you choose to be a programmer?

I was always very in to computers as a kid- I loved using them to make posters and to browse the web. When I discovered programming - specifically web programming - I loved them even more. I made fun little games, I made a “cyberclub,” and I made websites for everything I did.

When it came time to deciding what to major in at college, I found it easy to pick Computer Science. I knew that no matter where my interests went, I could use my computer science skills to complement those interests, and I knew that I could always get a job with those skills.

As a programmer/developer, what is the thing that motivates you the most?

I like the ability to make something, and to easily share that something. If I wasn’t a programmer, I think I would be an artist of some sort, so that I could fulfill my need to create that way.

In which programming language do you feel the most comfortable on?

I am generally the most comfortable in “scripting languages,” and these days, I am the most familiar with JavaScript. I have always been attracted to scripting languages over compiled languages because I love the speed at which you can develop with them, and I find them generally more approachable.

On the server, I tend to use Python, but would love to try out using JavaScript there as well. I like the idea of getting to use the same language for both the frontend and the backend. The lines are blurring between them, so it makes sense for the language to be the same.

Do you have a hobby that is not related to technology?

Lately, I’ve gotten really into cooking. I’ve discovered that I get a similar creative rush from cooking as I do from coding. When I cook a meal, I get to enjoy the end result, I get to share it with whoever is around me, and I get to share with the world how I did it. When I code an app, I get to use the app, share it with other users, and open-source the code.

The main difference between cooking and coding: far fewer bug reports, and no long-term maintenance required!

How do you feel as a woman that works in a predominantly male environment?

I usually don’t think about it that much. I grew up around a lot of males - I had a brother with a lot of male friends, and I tended to make a lot of male friends myself. So, I didn’t find it that weird in college or work to be surrounded by males, and in fact, I somewhat preferred it.

(I wrote a much longer blog post about this here.)

Do you feel that you had to break the gender barrier or any stereotype because you are a woman in order to be considered a good programmer?

I have to admit, I don’t actually think I’m a great programmer. I think I’m a pretty good programmer, but not great. I am able to achieve beyond my core programming skills because of my ability to combine multiple skills, my desire to create, and my desire to share my knowledge with others.

I do often wish that I was a crazy-good programmer like my colleagues and peers, and I think to myself that I should take some classes or read some books to increase my skills...but then I think that I’m pretty happy with my diverse skillset.

I do sometimes feel as if I have to break stereotypes when I am giving talks to new audiences, as some people see a girl on stage and immediately assume she’s not going to talk technical. By the end of the talk, they know better. :)

What's your achievement that you feel the most proud of?

Looking over the past five years, I am most proud of my “teaching moments” - the times when I taught someone something new, and could see their knowledge grow as a result. I’m sure I had many virtual teaching moments with developers in forums, but I am most proud of the in-person moments with students in classes. There’s something very real and very gratifying about watching students grow from the first day of a class to the very end.

How do you do to keep your life under balance, I mean, keep learning, spend time with your family and friends, work hard, etc?

I don’t. My father is a workaholic, and he instilled a similar work ethic in me. When I am working, I’m putting all of myself into that, and I find it hard to justify making time for family and friends. I instead wait for them to force me to make time for them, and if they force me, well, I can’t say no.

I recently left my job, and I’m looking forward to finally putting friends and family first, at least for a few months. In the end, it’s the people that you remember more than the work anyway.

What projects do you have in mind for the near future?

Generally, I want to make apps that I would use, and if I’m lucky, a few other people would use as well. As I am currently obsessed with food and nutrition, I am experimenting in that area to see what apps might make it easier for me to eat healthily, to cook delicious meals, and to share nutrition information with others.

My basic strategy is this: Every day, when I encounter a situation that would be made better with an app, I write down the app idea. If I end up writing down an app idea multiple times, well, there’s a good chance I will make it.