presented at Web Unleashed 2017 More info at www.fitc.ca/webu Pearl Chen Make This Studio Overview The worst advice Pearl got as a junior developer was to keep her head down and her hard work would speak for itself. Wrong! If you want that promotion, to get asked for exciting new opportunities, and perhaps even gain a little bit of fame, you need to toot your own horn. Selling yourself does not have to feel icky or manipulative. In fact, selling yourself as a developer is simply about sharing what’s already in your head, what you have already done, what you’re currently learning, and what you’re passionate about. It can be as easy as tweeting or starting a blog. Objective Help developers get into the habit of regularly documenting and sharing their work for the good of humanity — and for some personal branding too. Target Audience Developers of all levels. Five Things Audience Members Will Learn That humans are inherently salespeople — embrace it and get good at it Tips for writing and creating great technical content for the web — whether it’s a 140 character tweet or a 14-minute Medium read A crash course on applying to and speaking at conferences Stories of how Pearl got to #1 on HackerNews that one time, and why she has 17K followers on Google+ and 3K on Twitter. Luck?? How to make animated gifs (you think she’s joking but this is one of her most commonly asked questions when she posts a tutorial)

1. Or: Why Keeping Your Head Down is not a Good Career Strategy
Can You Just Code Your Way to
Fame and Fortune?
Pearl Chen, Make This Studio
@PearlChen (Twitter, Medium) FITC Web Unleashed - Sept 26, 2017

2. Or: Why Keeping Your Head Down is not a Good Career Strategy
Can You Just Code Your Way to
Fame and Fortune?
Pearl Chen, Make This Studio
@PearlChen (Twitter, Medium) FITC Web Unleashed - Sept 26, 2017

3. My 1st full-time dev job
Storytime!

4. X
LESSONS
• Don’t just focus on your current job
Look ahead. Think about your future.

5. X
LESSONS
• Don’t just focus on your current job
Look ahead. Think about your future.
• Join the tech & design community
This is your future support network.

6. Why should I listen to you?

7. X
ARE FOLLOWER COUNTS CREDENTIALS?

8. Momentum

9. Google+ and #DailyRobot
Storytime!

10. X
GOOGLE+ WHAT’S HOT NETWORK EFFECT

11. X
YOU SHOULD MAKE THINGS

12. X
ALWAYS BE PRACTICING

13. X
ALWAYS BE PRACTICING

14. X
SOCIAL MEDIA FOR PERSONAL BRANDING
• Curated content = clear personal branding
People instantly know what you’re about so it’s easier to decide on whether or not to follow.
• Network and influencer effects
You can’t control them but you can increase your chances. And they make a huge difference.

15. X
THE MAIN REASON FOR SOCIAL MEDIA
• Attract kindred souls
Put out content to find people with similar interests.

16. How to be clear, concise, and move people through your technical writing.
Writing Technical Articles
Pearl Chen
July 20, 2017

17. What is a
technical article?
What is technical writing?

18. Anything that
simplifies the complex
is technical communication.
The activity requires gaining expertise or skill to
perform.

19. Writing is an important component.
But great technical communication also involves:
• UX design and information architecture
• Illustration, photography, and/or videography
• Samples (e.g. code, in-progress or finished artifacts)
• Storytelling
• Marketing

20. FACTS!

21. X
People do not read*
• Live with it.
• Design for this.
• Create content
with this in mind.
FACT #1

22. X
We are in the
“attention economy”
When information is
free & readily available,
the scarce commodity
is human attention.
FACT #2

23. AN OBSTACLE COURSE
YOUR IDEAS

24. X
OBSTACLE COURSE

25. 1. Create awareness
How will you present your idea?
2. Motivation
What do *I* get out of this?
3. Clear the path
How do I begin and stay the course?
4. Define success
When do I know I’ve achieved the goal?
OBSTACLE COURSE DESIGN
TECHNICAL ARTICLE

26. 1. Good design & typography
2. Digestible content
sections, bullets, numbered lists
3. Supporting visuals
diagrams, images, videos, code
GUIDING PRINCIPLES

27. X
Good design improves
information absorption
and retention.
And it’s been scientifically proven.
Example: Optimal line length for on-screen reading
is 50-60 characters including spaces.
GOOD DESIGN & TYPOGRAPHY

28. X
GOOD DESIGN & TYPOGRAPHY
• font face
• font size
• letter spacing
• line spacing
• page padding
• paragraph spacing

29. X
DIGESTIBLE CONTENT
Maximum skim-ability:
• Smaller sections
• Bullets over paragraphs
• Numbered bullets for actions
omgtoast.com

30. X
DIGESTIBLE CONTENT
• Clear headlines
• 1 goal/point per section
Small sections

31. X
DIGESTIBLE CONTENT
• Forces brevity & focus.
• Easier to skim.
• Use whitespace.
Use emojis or icons
for bullet-like effect.
Bullets

32. X
DIGESTIBLE CONTENT
1. Break down your task.
2. Use action-orientated
language.
3. …
4. Profit!
Numbered action lists

33. X
A picture is worth a
thousand words.
And a GIF will leave you speechless.
SUPPORTING VISUALS

34. X
SUPPORTING VISUALS
• Cmd+Shift+4
Use Spacebar to toggle between full
app capture, or click and drag mode.
• Add callouts
Add boxes, circles, arrows, darken
distracting elements, or blur sensitive
information using Evernote Skitch
(free), SnagIt, Photoshop, Sketch, etc.
Screencaps

35. X
SUPPORTING VISUALS
• A pic is better than none
Use your phone, webcam, anything!
• Frame your shot
Get rid of excess clutter and distracting elements.
• Add callouts
• Good lightning
= better photo
Photographs

36. X
SUPPORTING VISUALS
Before & After

37. X
SUPPORTING VISUALS
Before & After

38. X
SUPPORTING VISUALS
• Google Draw (free),
Monodraw,
Omnigraffle
• Noun Project to
find icons.
Diagrams

39. X
SUPPORTING VISUALS
• Compresses time
• Quicktime (free), Screenflow, SnagIt
Video / Animated GIF
Separate microlearn for Screenflow coming soon!

40. Write for clarity
Put yourself in your reader’s head.

41. X
“Toggle it to on.”
Spell it out. Say what “it” is.
“Toggle the wifi radio
button on.”
WRITE FOR CLARITY

42. Edit, test, edit, test

43. X
EDIT, TEST, EDIT, TEST
• Value your reader's time.
• Delete frivolous words.
• Editing tips:
• Read it out loud.
• Temporarily increase
the font size.
Edit

44. X
EDIT, TEST, EDIT, TEST
• Have someone else
review your content.
• Better: Have someone
actually perform the
steps in your guide.
Test

45. How much time should you spend?

46. X
HOW MUCH TIME SHOULD YOU SPEND?
“I hate your easy to follow
setup guides!”
- said no one ever

47. X
HOW MUCH TIME SHOULD YOU SPEND?
What are the stakes?
• Size of your audience
• Longevity of the content
• Business impact

48. X
HOW MUCH TIME SHOULD YOU SPEND?
• Get in the habit.
• Write blog posts, keep a developer journal, etc.
• You never know who might see your article.
With practice,
you get faster and better.

49. Storytime!

50. X
STORYTIME!
html5rocks.com/en/tutorials/developertools/async-call-stack/

51. X
STORYTIME!
1249
words
1
checkbox
19
images
5
animated gifs

52. X
STORYTIME!

53. X
STORYTIME!

54. X
STORYTIME!

55. Video and Animated GIFs
Communicating with moving images

56. X
MAKING GIFS
• QuickTime + Gifify
github.com/vvo/gifify

57. X
MAKING GIFS
• QuickTime + Gifify
github.com/vvo/gifify
• SnagIt
techsmith.com/tutorial-snagit-13-create-an-animated-gif.html

58. X
MAKING GIFS
• QuickTime + Gifify
github.com/vvo/gifify
• SnagIt
techsmith.com/tutorial-snagit-13-create-an-animated-gif.html
• Screenflow
youtube.com/watch?v=uDUupJ2SxeU

59. Why?
Speaking at Meetups & Conferences

60. X
RESOURCES FOR SPEAKING AT CONFERENCES
• Demystifying Public Speaking by Lara Hogan
abookapart.com/products/demystifying-public-speaking
• Technically Speaking
twitter.com/techspeakdigest

61. X
RECOMMENDED READING

62. Thank you!
(Stay tuned for the Medium articles!)
🙏
Pearl Chen, Make This Studio @PearlChen