Creative ContentFor BETTER DEVELOPER EXPERIENCE

Tomomi Imura (@girlie_mac)

日本語のスライドはこちら

https://goo.gl/RqsWuvhttps://slideshare.net/tomomi/Japanese-creative-technical-content-for-better-developer-experience

@ girlie_mac

● dev relations at Slack● api.slack.com● advocate open web & technology● code JavaScript & Node.js● hack useless stuff● advisor at Code Chrysalis● Live in foggy San Francisco

tomomi imura

@ girlie_mac

Where I Have Been Doing DevRel at:

Slack API Nexmo SMS, Voice, 2FA

API

HTML5 (W3C) & Windows Phone webOS Apps

PubNub Realtime API

@ girlie_mac

I Write Articles on:

Technical editor for some books by:

Awareness & Acquisition

SearchTweets, newsletters, etc.

Word of mouth, on Slack, etc.

API, Platform, Framework, Tools, etc.

How Do Developers Find Your...

@ girlie_mac

Awareness

If devs find your shiny new stuff passively on TechCrunch, ProductHunt, announcement / marketing blog, etc:

Sounds awesome!

@ girlie_mac

Awareness & Acquisition

If devs find your use cases, and with even better, easy-to-follow tutorials for how to build them:

Sounds awesome! I may wanna try!

@ girlie_mac

Get Devs Hands Dirty!

● Workshops ● Hackathons● Blog & Tutorials

○ Docs○ Videos & Screencasts○ Webinars

@ girlie_mac

Get Devs Hands Dirty!

● Workshops ● Hackathons● Blog & Tutorials

○ Docs○ Videos & Screencasts○ Webinars

My focus!

Make It Practical!

@ girlie_mac

Practical & Fundamental

Tutorial examples:

● [Awesome API] 101● Beginner Guide of [Awesome API] ● Getting Started with [Awesome API] using [Node SDK]● How to Build To-Do App with [Awesome.JS Framework]● [Awesome API] Tips & Tricks● [Awesome API] Best Practice

@ girlie_mac

@ girlie_mac

@ girlie_mac

Make It Interesting!

@ girlie_mac

Interesting Projects

Creative tutorials:

● Physical Slackbot● Twitter Visualization with D3.js● Building a Raspberry Pi Spy Cam● “Alexa, Call My Mom”● Gotta Catch’em All! PokémonGo Relatime Mapping

@ girlie_macBrainstorming ideas

@ girlie_mac

Project Types

● Purely fun○ Pokémon○ IoT - cat camera

● Targeting a community / Ecosystem○ JavaScript - e.g. React, Angular, D3○ MCU - e.g. Arduino, Raspberry Pi○ Web standards - HTML5○ Amazon Alexa

@ girlie_mac

@ girlie_mac

@ girlie_mac https://medium.com/slack-developer-blog/building-a-sentiment-analysis-bot-with-ibm-watson-and-raspberry-pi-eeb399bb8803

@ girlie_mac

Let Devs Adopt the Ideas

“Pokemon is not how we win the big $$$ companies”

“Don’t get me wrong. We are providing ideas”

@ girlie_mac

Adopting the Ideas for Real Apps

{

id: 'pikachu-012',

lat: 37.7234,

lon: -122.472

}

{

id: 'taxi-012',

lat: 37.7234,

lon: -122.472

}

Go Social

@ girlie_mac

Get Carded on Social Media

3

1

1

2

@ girlie_mac

It’s So META!

<!-- Twitter Card data (with a large image) -->

<meta name="twitter:card" content="summary_large_image">

<meta name="twitter:title" content="Title Here">

<meta name="twitter:description" content="Page description">

<meta name="twitter:image" content="http://example.com/image.jpg">

<!-- FB Open Graph data -->

<meta property="og:title" content="Title Here">

<meta property="og:type" content="article">

<meta property="og:url" content="http://www.example.com/">

<meta property="og:image" content="http://example.com/image.jpg">

<meta property="og:description" content="Page description">

3

1

2

@ girlie_mac

Developer-Focused Social Space

Newsletters

Code Samples & Demo

Adoption & RetentionImproving Developer Experiences

@ girlie_mac

User-Experience

User-Experience (UX) focuses on having a deep understanding of users, what they need, what they value, their abilities, and also their limitations.”

Source: usability.gov

“

@ girlie_mac

User-Experience

User-Experience (UX) focuses on having a deep understanding of users, what they need, what they value, their abilities, and also their limitations.”

Source: usability.gov

“

@ girlie_mac

Developer-Experience

Developer-Experience (DX) focuses on having a deep understanding of developers, what they need, what they value, their abilities, and also their limitations.”

Source: usability.gov

“

@ girlie_machttps://twitter.com/wheelyweb/status/849969689388134400

@ girlie_macBy Jared Spool https://flic.kr/p/5ckBZq CC-BY-SA

@ girlie_machttps://twitter.com/ryo_sasaki/status/560229808362102784

Coffee machine fiasco at 7-Eleven in Japan

@ girlie_mac

Bad UX: User Reactions

1. Get confused2. Guess and fail3. Frustrated4. Repeat 2 - 35. Totally pissed off

@ girlie_mac

Bad DX: Developer Reactions

1. Get confused of enigmatic API & Docs2. console.log(“wtf”) & get errors3. Frustrated4. Repeat 2 - 35. Totally pissed off

@ girlie_mac

Poor Docs & Tuts DX Examples

● No documentation● Poor onboarding experience● Bad browsing experience, no ref links● No diagram, screenshot, picture etc.● Too complex● Too marketing-y (Stock photo of a businessman in suit?)● PDF everything (Docs != Whitepaper)

@ girlie_mac

Open Source Survey by GitHub

http://opensourcesurvey.org/2017/

#1 problem!

@ girlie_mac

Docs & Tuts Should be

● Navigable ● Practical and/or interesting● newbie-friendly

○ Prerequisite, How to set up○ onboarding with “Hello, world”○ Hands-on

● Including code samples (Gee, who doesn’t?)● Informative - doet your devs uninformed about dev tools & libs

@ girlie_mac

User-Friendliness

https://twitter.com/kaz/status/757733261938298881

@ girlie_mac

Developer-Friendliness

@ girlie_mac

Slack API Doc (Even More) Kawaii-fy Project (j/k!)

@ girlie_mac

TL;DR

● Write to attract developers○ Make them practical / interesting so they want to try

● Syndicate your content● Go social

○ Use the social media meta tags○ Dev-focused media

● Improve dev experience to keep devs engaged

@ girlie_mac

Developer Experience Matters!really

@ girlie_mac

Thank you!

@girlie_mac

girliemac.com

github.com/girliemac

slideshare.net/tomomi

BY-SA

@ girlie_mac

Attribution:Open Emoji by Emoji-One (CC-BY 4.0)