“Notice me Senpai!” - Get Discovered with Creative Technical Content

A presentation at DevXCon San Francisco 2017 in May 2017 in San Francisco, CA, USA by Tomomi ❤ Imura

Slide 1

Slide 1

Notice Me, Senpai! Get Discovered with Creative Technical Content Tomomi Imura (@girlie_mac)

Slide 2

Slide 2

Tomomi does: ● ● ● ● ● ● @girlie_mac advocate open web & technology code JavaScript & Node.js writer & speak about tech hack useless stuff mentor & advisor currently work at

Slide 3

Slide 3

Where I Have Been Doing DevRel at: Slack API Nexmo SMS, Voice, 2FA API HTML5 (W3C) & Windows Phone @girlie_mac PubNub Realtime API webOS Apps

Slide 4

Slide 4

I Write & Have Written Articles on: Technical editor for some books by: @girlie_mac

Slide 5

Slide 5

Get Discovered by Developers!

Slide 6

Slide 6

How Do Developers Find Your… Word of mouth, on Slack, etc. Tweets, newsletters, etc. API, Platform, Framework, Tools, etc. Search

Slide 7

Slide 7

Awareness When devs find your shiny new stuff passively on TechCrunch, ProductHunt, announcement / marketing blog, etc: Sounds awesome! @girlie_mac

Slide 8

Slide 8

Awareness & Acquisition When devs find your use cases, and with even better, easy-to-follow step-by-step tutorials on how to build: Sounds awesome! @girlie_mac I may wanna try!

Slide 9

Slide 9

Get Devs Hands Dirty! ● Workshops ● Hackathons ● Blog & Tutorials ○ ○ ○ ○ @girlie_mac Docs Diagrams and Illustrations Videos & Screencasts Webinars My focus!

Slide 10

Slide 10

Make It Practical!

Slide 11

Slide 11

Practical & Fundamental Tutorial examples: ● ● ● ● ● ● [Awesome API] 101 Beginner Guide of [Awesome API] Getting Started with [Awesome API] in [Node.js] How to Build To-Do App with [Awesome.JS Framework] [Awesome API] Tips & Tricks [Awesome API] Best Practice @girlie_mac

Slide 12

Slide 12

@girlie_mac

Slide 13

Slide 13

@girlie_mac

Slide 14

Slide 14

Make It Interesting!

Slide 15

Slide 15

Creative Projects (and How to Build Them!) ● ● ● ● ● ● ● GIPHY Chat App Slack Message Analysis w/ Watson Tweet Emotion: Sentiment Data Visualization w/ D3.js Raspberry Pi Spy Cam w/ Facial Detection Call Alexa from Phone Robot Dance Party Gotta Get’em All! Pokémon Go Relatime Mapping @girlie_mac

Slide 16

Slide 16

Brainstorm @girlie_mac

Slide 17

Slide 17

Project Types ● Purely fun ○ Pokémon ○ IoT - cat camera ● Targeting a community / Ecosystem ○ ○ ○ ○ @girlie_mac Programming Language, Platforms Frameworks - e.g. Standard Web APIs, React, Angular, D3 Hardware - e.g. Arduino, Raspberry Pi AI - e.g. Amazon Alexa, IBM Watson

Slide 18

Slide 18

@girlie_mac

Slide 19

Slide 19

@girlie_mac

Slide 20

Slide 20

@girlie_mac

Slide 21

Slide 21

@girlie_mac

Slide 22

Slide 22

Let Devs Adopt the Ideas “Pokemon is not how we win the big $$$ companies” “Don’t get me wrong. We are providing the ideas” @girlie_mac

Slide 23

Slide 23

Adopting the Ideas for Real Apps { id: ‘pikachu-012’, lat: 37.7234, lon: -122.472 } @girlie_mac { id: ‘taxi-012’, lat: 37.7234, lon: -122.472 }

Slide 24

Slide 24

Notice Me, Senpai!

Slide 25

Slide 25

But Senpai doesn’t even know me… @girlie_mac

Slide 26

Slide 26

Piggybacking on Bigger Players ● ● ● ● Partner with other companies Be friend with their DevRel peeps Apply to be an author Pay sponsorship @girlie_mac

Slide 27

Slide 27

@girlie_mac

Slide 28

Slide 28

@girlie_mac

Slide 29

Slide 29

…and get THEIR Social Bandwagon! @girlie_mac

Slide 30

Slide 30

@girlie_mac

Slide 31

Slide 31

Community is magic! @girlie_mac

Slide 32

Slide 32

@girlie_mac

Slide 33

Slide 33

Go Social

Slide 34

Slide 34

Get Carded 3 1 @girlie_mac 1 2

Slide 35

Slide 35

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”>

1 2

<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”> @girlie_mac 3

Slide 36

Slide 36

Developer-Focused Social Space Code Samples & Demo Newsletters @girlie_mac

Slide 37

Slide 37

TL;DR ● Create attractive content ○ Make them practical / interesting ○ Focus on communities ○ Be inclusive ● Syndicate the content ● Go social ○ Use social media meta tags ○ Use developer-focused social space @girlie_mac

Slide 38

Slide 38

@girlie_mac girliemac.com Thank you! github.com/girliemac slideshare.net/tomomi BY-SA @girlie_mac

Slide 39

Slide 39

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