• Stars
    star
    268
  • Rank 153,144 (Top 4 %)
  • Language
  • License
    Creative Commons ...
  • Created about 8 years ago
  • Updated about 8 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

How to write high-quality friendly documentation that people want to read.

How to write high quality friendly documentation that people want to read

Translations

Request another translation


For the last few years I have written a lot of documentation for projects like Babel or Flow, blog posts, and guides such as these:

I've tried to focus on the way that I write in order to make it more approachable and more useful to everyone. There are a number of things that I have learned over the years that I believe makes for high-quality and friendly documentation.

Note: Some of this only really applies when you are talking about things that require tons of documentation. Try to adapt this advice to fit what you are working on best.

Here they are as one massive list:

In general...

  • Keep a lighthearted friendly tone. Don't spend time trying to prove how smart you are. Treat the reader as a close friend who doesn't have a lot of knowledge about the topic but is very interested.
  • Don't assume prior knowledge about the topic. If you want to appeal to a large audience (i.e. not a research paper) then you are going to have people with very diverse backgrounds.
  • Don't use words like "obviously" or "basically", I promise you will never need to. Just say what needs to be said in simple straight forward language. Never ever talk down to people (both of those words do, as well as others).
  • Don't use idioms. Speak using more formal terms that are well defined. This makes it easier for non-native-english speakers and for translations to be written. If you do, you won't just knock it out of the park, you'll do a really good job.
  • Use words that are easier to understand and translate (i.e. "list" instead of "enumerate"). Don't worry that you're being slightly more precise using a bigger word, think about how it will sound to someone unfamiliar with the topic.
  • Keep things brief. Avoid giant paragraphs, breaking them apart into multiple paragraphs each with a clear point. If you are writing really long paragraphs, it's most likely that you aren't doing a good job explaining what you mean.
  • Link to other places in the documentation often but only for additional information. Readers should not have to navigate through several pages to find the information that they need about one specific thing. Just inline the immediately relevant information and link off if they want to know more.
  • Reuse the same small set of examples as much as possible, keep presenting the same problem and building on top of it. Don't make the user keep thinking about new problems, people can only focus on so many things. If you need to keep coming up with new examples, you haven't started in a good place, start over and come up with a better one.

When writing guides...

  • Use as many code/cli/etc examples as possible, show the reader what you mean. This makes things far easier to translate and is generally much easier to follow than walls of text. Even if you aren't going to discuss the code directly it's good for giving context.
  • Use headings frequently. This breaks things up when reading and often it is good for linking to specific information.
  • If writing with multiple pages, think about how a single page leads into the next, point the user to the next page and make sure it follows naturally.
  • Gently introduce a guide before diving into technical details. This gives context and readers are more likely to stay engaged longer.
  • Tell one story at a time. You can re-explain the same concepts from different perspectives or for different use-cases.
  • Don't clutter explanations with overly detailed examples. You don't need to implement a game of sudoku to explain how you might use your library with it. Typically if you have to explain the backstory of an example then it is too complicated and serves as a distraction from what you're teaching.
  • Don't be afraid of foo's and and bar's. Using them removes mental overhead, it's explicitly saying to the reader "don't worry about what this is, is could be anything"

When writing api documentation...

  • Think about API docs like they are guides on how to use them. Type signatures for input and output and a vague description isn't enough to be useful.
  • Add information explaining the purpose of a group of APIs before diving into them. Also add any other relevant information or caveats. People are far more likely to read it this way.
  • Use shared terminology with API names, examples, and explanations. Call something a single name no matter where you are referring to it, and name things
  • Don't try to solve real world scenarios in code examples if they become any more complicated than the API already is. Do not implement algorithms, do not add a bunch of noisy implementation details that doesn't aid the user.
  • Keep code examples extremely short. Your target should be ~3-5 lines of code, every line past that is a count against you. Think hard about the examples you are using.

Absolutely...

  • Never use terms that are offensive to any group. There will never be a good reason to.
  • Do not use gendered terms. Pronouns like he/she/her/him and gendered terms like actress/actor/waiter/waitress should all be thrown out and you should avoid using any terms or phrases that don't necessary refer directly to gender but have gendered connotations. For example, words "pretty", "curvy", "moody", or "bossy" all refer to women far more often than they do men.
  • Avoid examples using people. You end up sounding like you're talking to children and it's easy to create examples that place one group of people over another (i.e. "Susan went to her project manager Tim..."). So as a more generalized rule, use examples that don't involve people.
  • Follow other guidelines outlined in documents like the Contributors Covenant.

This is a living guide for myself and others as I learn more about writing documentation. I hope it is helpful to others in its current state. If you have any suggestions, feel free to open an issue or pull request on GitHub and let me know.

Have fun writing!


cc-by-4.0

More Repositories

1

the-super-tiny-compiler

⛄ Possibly the smallest compiler ever
JavaScript
25,786
star
2

react-loadable

⏳ A higher order component for loading components with promises.
JavaScript
16,596
star
3

babel-handbook

📘 A guided handbook on how to use Babel and how to create plugins for Babel.
11,988
star
4

itsy-bitsy-data-structures

🏰 All the things you didn't know you wanted to know about data structures
JavaScript
8,600
star
5

unstated

State so simple, it goes without saying
JavaScript
7,821
star
6

spectacle-code-slide

🤘 Present code with style
JavaScript
4,164
star
7

unstated-next

200 bytes to never think about React state management libraries ever again
TypeScript
4,092
star
8

tinykeys

A tiny (~400 B) & modern library for keybindings.
HTML
3,362
star
9

babel-react-optimize

🚀 A Babel preset and plugins for optimizing React code.
JavaScript
1,677
star
10

tailwindcss-animate

A Tailwind CSS plugin for creating beautiful animations
JavaScript
1,084
star
11

glow

Make your Flow errors GLOW
JavaScript
699
star
12

create-react-context

Polyfill for the proposed React context API
JavaScript
695
star
13

json-parser-in-typescript-very-bad-idea-please-dont-use

JSON Parser written entirely in TypeScript's type system
TypeScript
424
star
14

react-gridlist

A virtual-scrolling GridList component based on CSS Grids
TypeScript
421
star
15

favorite-software

🌟 Best software for developers and power users.
355
star
16

marionette-wires

:shipit: An opinionated example application built with Marionette.js.
JavaScript
325
star
17

pretty-format

✨ Stringify any JavaScript value
304
star
18

ghost-lang

👻 A friendly little language for you and me.
300
star
19

roast-my-deps

Your dependencies are bad and you should feel bad
JavaScript
265
star
20

bey

Simple immutable state for React using Immer
JavaScript
260
star
21

tickedoff

Tiny library (<200B gzip) for deferring something by a "tick"
JavaScript
217
star
22

react-jeff

A Good Form Library
TypeScript
213
star
23

react-performance-observer

Get performance measurements from React Fiber
JavaScript
210
star
24

gender-regex

Regex to test for valid genders
JavaScript
193
star
25

anti-fascist-mit-license

MIT license with additional text to prohibit use by fascists
187
star
26

purposefile

Make sure every file in your repo is exactly where it should be
TypeScript
168
star
27

react-loadable-example

Example project for React Loadable
JavaScript
149
star
28

bootcamp

👢 Jasmine-style BDD testing written in Sass for Sass.
CSS
141
star
29

write-files-atomic

Write many files atomically
JavaScript
124
star
30

sarcastic

Cast unknown values to typed values
JavaScript
98
star
31

ninos

Simple stubbing/spying for AVA
JavaScript
96
star
32

repo-growth

Measure how fast your repo is growing using cloc
JavaScript
89
star
33

workspaces-run

Run tasks/scripts across Yarn/Lerna/Bolt/etc workspaces.
TypeScript
88
star
34

license

The MIT license (with personal exceptions)
86
star
35

scritch

A small CLI to help you write sharable scripts for your team
JavaScript
84
star
36

react-markers

Add markers to your React components for easy testing with actual DOM elements
JavaScript
80
star
37

assert-equal-jsx

assertEqualJSX
JavaScript
78
star
38

proposal-promise-prototype-inspect

Proposal for Promise.prototype.inspect
JavaScript
78
star
39

globby-cli

User-friendly glob matching CLI
JavaScript
76
star
40

spawndamnit

Take care of your spawn()
JavaScript
76
star
41

grob

grep, but in JavaScript... I've truly outdone myself.
JavaScript
72
star
42

react-required-if

React PropType to conditionally add `.isRequired` based on other props
JavaScript
71
star
43

havetheybeenpwned

Test if your user's password has been pwned using the haveibeenpwned.com API
JavaScript
69
star
44

react-prop-matrix

Render something using every possible combination of props
JavaScript
68
star
45

renderator

JavaScript
65
star
46

dark-mode-github-readme-logos

How to make logos in your README that support GitHub's new dark mode
64
star
47

reduxxx

Redux, explicit.
TypeScript
64
star
48

babel-plugin-react-pure-components

Optimize React code by making pure classes into functions
JavaScript
61
star
49

react-test-renderer

[DEPRECATED] A lightweight solution to testing fully-rendered React Components
JavaScript
58
star
50

fixturez

Easily create and maintain test fixtures in the file system
JavaScript
58
star
51

ballistic

🔨 Utility-Belt Library for Sass
CSS
56
star
52

enable-npm-2fa

A script for enabling 2FA on all of your npm packages
JavaScript
55
star
53

cirbuf

A tiny and fast circular buffer
TypeScript
53
star
54

VisibilityObserver

Experimental API for observing the visible box of an element
TypeScript
51
star
55

dependency-free

An experiment to unify/speed up CI/local development via small Docker containers
TypeScript
49
star
56

react-stylish

🎀 Make your React component style-able by all
JavaScript
47
star
57

naw

Your very own containerized build system!
TypeScript
47
star
58

tested-components

Browser integration testing utils for styled-components
JavaScript
41
star
59

jamie.build

the website
HTML
41
star
60

codeowners-enforcer

Enforce CODEOWNERS files on your repo
Rust
41
star
61

std-pkg

The Official package.json Standard™ for Npm® endorsed fields
JavaScript
41
star
62

babel-plugin-private-underscores

Make _classMembers 'private' using symbols
JavaScript
39
star
63

userscript-github-disable-turbolinks

A userscript to disable GitHub turbolinks to force full page navigations
JavaScript
39
star
64

git-workflow

Git workflow for teams
38
star
65

pride

👬 PrideJS logo
38
star
66

babel-plugin-import-inspector

Babel plugin to report dynamic imports with import-inspector with metadata about the import
JavaScript
38
star
67

revalid

Composable validators
JavaScript
37
star
68

ci-parallel-vars

Get CI environment variables for parallelizing builds
JavaScript
37
star
69

crowdin-sync

🌏 How to setup Crowdin to sync with GitHub
Ruby
37
star
70

incremental-dom-react-helper

Helper to make Google's incremental-dom library work with React's compile target today.
JavaScript
36
star
71

guarded-string

Prevent accidentally introducing XSS holes with the strings in your app
JavaScript
36
star
72

babel-plugin-hash-strings

Replace all instances of "@@strings like this" with hashes.
JavaScript
35
star
73

react-module-experiment

JavaScript
34
star
74

task-graph-runner

Run async tasks with dependencies
JavaScript
34
star
75

json-peek

Stringify JSON *just enough* to see what it is
JavaScript
33
star
76

babel-plugin-ken-wheeler

Code like you dope
JavaScript
33
star
77

how-to-build-a-compiler

How to build a compiler – THE TALK
HTML
33
star
78

js-memory-heap-profiling

JavaScript
32
star
79

backbone.service

A simple service class for Backbone.
JavaScript
31
star
80

dep-size-inspect

JavaScript
29
star
81

pffffff

pfffffffffffffffffffff whatever
JavaScript
28
star
82

shimiteer

Puppeteer API shim for other browsers using WebdriverIO
JavaScript
27
star
83

better-directory-sort

Improved sorting order for directory entities
JavaScript
27
star
84

isolated-core-demo

JavaScript
27
star
85

graph-sequencer

Sort items in a graph using a topological sort while resolving cycles with priority groups
JavaScript
27
star
86

import-inspector

Wrap dynamic imports with metadata about the import
JavaScript
26
star
87

backbone-routing

Simple router and route classes for Backbone.
JavaScript
26
star
88

flow-shut-up

Add inline Flow comments to make Flow shut up about errors
JavaScript
25
star
89

tumblr-downloader

Download all your female-presenting nipples from Tumblr
JavaScript
22
star
90

proposal-promise-settle

This repository is a work in progress and not seeking feedback yet.
JavaScript
22
star
91

backbone.storage

A simple storage class for Backbone Models and Collections.
JavaScript
22
star
92

parcel-rust-example

Example of using Rust code in Parcel
HTML
22
star
93

temperment

Get a random temporary file or directory path that will delete itself
JavaScript
22
star
94

is-mergeable

Check if a GitHub Pull Request is in a (most likely) mergeable state
JavaScript
22
star
95

gud

Create a 'gud nuff' (not cryptographically secure) globally unique id
JavaScript
21
star
96

min-indent

Get the shortest leading whitespace from lines in a string
JavaScript
20
star
97

babel-setup-react-transform

Example Babel project using babel-plugin-react-transform
JavaScript
20
star
98

codeowners-utils

Utilities for working with CODEOWNERS files
TypeScript
19
star
99

my-react

Ideas for React APIs
JavaScript
18
star
100

LibManUal

Shell
18
star