Más contenido relacionado Similar a [日本語・Japanese] Creative Technical Content for Better Developer Experience (20) [日本語・Japanese] Creative Technical Content for Better Developer Experience2. @ girlie_mac
● Slack の DevRel チーム所属
● api.slack.com の中の人
● オープン web & テック アドボケイト
● JavaScript & Node.js コーダー
● くだらない Hack 大好き
● Code Chrysalis のアドバイザー
● サンフランシスコの住人
tomomi imura
3. @ 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
9. @ girlie_mac
Get Devs Hands Dirty! - 開発者に試してもらう
● ワークショップ
● ハッカソン
● ブログ & チュートリアル
○ Docs
○ ビデオ & スクリーンキャスト
○ Webinars
10. @ girlie_mac
Get Devs Hands Dirty!
● ワークショップ
● ハッカソン
● ブログ & チュートリアル
○ Docs
○ ビデオ & スクリーンキャスト
○ Webinars My focus!
12. @ girlie_mac
Practical & Fundamental
チュートリアルの例
● [Awesome API] はじめの一歩
● Beginner Guide of [Awesome API]
● [Node SDK] で [Awesome API] を使ってみよう
● [Awesome.JS Framework] で To-Do アプリを作る
● [Awesome API] Tips & Tricks
● [Awesome API] ベストプラクティス
19. @ girlie_mac
Project Types
● ただ楽しいプロジェクト
○ Pokémon
○ IoT - cat camera
● コミュニティ・エコシステムに標的を絞ったもの
○ JavaScript - e.g. React, Angular, D3
○ MCU - e.g. Arduino, Raspberry Pi
○ Web standards - HTML5
○ Amazon Alexa
27. @ 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
36. @ girlie_mac
Bad UX: User Reactions
1. わかりにくいインターフェースに混乱
2. とりあえず適当に試して失敗
3. イライラ
4. 2 - 3 繰り返し
5. 超ムカつく
37. @ girlie_mac
Bad DX: Developer Reactions
1. わかりにくい Docs や API に混乱
2. とりあえず適当にコードを試して失敗
3. イライラ
4. 2 - 3 繰り返し
5. 超ムカつく
38. @ girlie_mac
Poor Docs & Tuts DX Examples
● ドキュメンテーションがひどい。と言うかそれすらない。
● 初心者に優しくない
● リンクがなかったりでナビゲートしづらい
● スクリーンショットや図がない
● とにかく難しい
● スーツ姿の偉そうなオッサンの写真素材がなんかイヤ
● 全部 PDF (Docs != Whitepaper)
40. @ girlie_mac
Docs & Tuts Should be
● ナビゲートしやすい
● 実践的かつ興味ふかい
● 初心者に親切
○ “Hello, world” オンボーディング
○ 必須条件やセットアップの仕方が明確。
● コードサンプル
● 的確な情報でツールなどのDL先もわかりやすい