Andrey Sitnik, Evil Martians
How to Make a Popular
Open Source Project
I am working at
@sitnikcode
20 Years in Open Source
since 2004
Sharing Real Experience
Nano ID
Browserslist
PostCSS
Autoprefixer
130 M
180 M
300 M
75 M
Downloads per month
@sitnikcode
Chapter 1
Why should you create open source project?
“You must have OS to find a job”
HR
“Success Formula”
Idea
GitHub
Popularity
Success
South Park, Go Fund Yourself episode
Open Source dream is a lie
Popular project ≠ many followers
@sitnikcode
Better ways to be popular
Articles
Talks
GitHub project ≠ good resume
1 month of work → few stars
vs
2 weeks → commit to Babel
@sitnikcode
Better ways to be popular
Create app
Fix docs in popular projects
Use beta version → fix bugs
App from slides.com/keziyahlewis/deck
The best reason: change the world
My reason for Autoprefixer:
kill Compass
My reason for PostCSS:
CSS tools diversity
Stylelint
cssnano
RTLCSS
@sitnikcode
My reason for Size Limit:
reduce JS lib size
Chapter 2
Success formula
False formula
Good idea → Popular project
False
@sitnikcode
My open source projects
Nano ID
Browserslist
PostCSS
Autoprefixer
@sitnikcode
The real list of my projects
52 non-popular
and only 4 popular
The real success formula
Project popularity =
Your popularity
Promotion
Benefits for users
Luck
+
+
+
@sitnikcode
Idea is not important
Idea
Project popularity =
Your popularity
Promotion
Benefits for users
Luck
+
+
+
@sitnikcode
Useless projects can’t be promoted
Project popularity =
Your popularity
Promotion
Benefits for users
Luck
+
+
+
@sitnikcode
Chapter 3
Base axioms
Axiom 1: Success formula
Project popularity =
Your popularity
Promotion
Benefits for users
Luck
+
+
+
@sitnikcode
How we think people choose tools
Rational choice across all options
@sitnikcode
False
Rational choice across all options
How we think people choose tools
@sitnikcode
Axiom 2: How people choose tools
Irrational choice across popular options
@sitnikcode
How we think people read docs
How we think people read
False
Axiom 3: How people read docs
Chapter 4
Preparations
Success formula has Popularity
on both sides
Project popularity =
Your popularity
Promotion
Benefits for users
Luck
+
+
+
@sitnikcode
My mistake: only announce in Russian
@sitnikcode
My mistake: nobody to mention
Advice 1: Create English account
@sitnikcode
Success formula is based on luck
Project popularity =
Your popularity
Promotion
Benefits for users
Luck
+
+
+
@sitnikcode
Advice 2: Be ready to try many times
Project popularity =
Your popularity
Promotion
Benefits for users
No Luck
+
+
+
Project popularity =
Your popularity
Promotion
Benefits for users
No Luck
+
+
+
Project popularity =
Your popularity
Promotion
Benefits for users
No Luck
+
+
+
Project popularity =
Your popularity
Promotion
Benefits for users
No Luck
+
+
+
Project popularity =
Your popularity
Promotion
Benefits for users
No Luck
+
+
+
Project popularity =
Your popularity
Promotion
Benefits for users
Luck
+
+
+
Chapter 5
README.md
README.md is your main entry point
How people read docs
What users need?
Project popularity =
Your popularity
Promotion
Benefits for users
Luck
+
+
+
@sitnikcode
Advice 3: Start from the reason
to read docs
What should be in first block
- Clear description
- How the product is useful for users
- The difference from other products
@sitnikcode
First block of PostCSS
PostCSS is a tool for transforming styles with JS plugins.
These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.
PostCSS is used by industry leaders including Wikipedia, Twitter, Alibaba, and JetBrains. The Autoprefixer PostCSS plugin is one of the most popular CSS processors.
Clear description
How it could be useful
Why it is important
@sitnikcode
It’s OK to spend a week
on the first block
First block of Autoprefixer
PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use.
It is recommended by Google and used in Twitter and Alibaba.
Clear description
Why it is important
@sitnikcode
First block of Nano ID
A tiny, secure, URL-friendly, unique string ID generator for JS.
- Small. 116 bytes (minified and brotlied). No dependencies.
- Safe. It uses cryptographically strong random APIs and tests distribution of symbols.
- Fast. It’s 16% faster than UUID.
- Compact. It uses a larger alphabet than UUID (A-Za-z0-9_-).
Clear description
Difference from analogs
@sitnikcode
Bad example of first sentence
Svelte is cybernetically enhanced web apps
Svelte is JS framework with unique compiler
which generate smaller JS files
Not clear
@sitnikcode
How to make good description
You in the bar with friends.
”So, I created …”
And then cut it 2-4 times
What do you think people read
@sitnikcode
What people actually read
@sitnikcode
Progressive JPEG
Advice 4: illustration or code example
Advice 5: More lists and bold
@sitnikcode
Important parts are highlighted
@sitnikcode
Advice 6: Use real proofs
@sitnikcode
Size Limit to prove “small”
@sitnikcode
Benchmarks to prove “fast”
Code example to prove “good API”
@sitnikcode
Advice 7: Step-by-step starting guide
@sitnikcode
Your users
@sitnikcode
Be very specific
@sitnikcode
Help with choice
@sitnikcode
Sections for specific use cases
@sitnikcode
Test your guide on new project
npm init
…
everything works
@sitnikcode
Chapter 6
Slow growing
Wrong way to promote the project
Post 1 tweet
Got 4 retweets
@sitnikcode
Grow by small iterations
@sitnikcode
Each iteration contains
- Action (feature, tweet, article, etc)
- Feedback
- Fixing the project according to feedback
@sitnikcode
Next iteration is a little bigger
- Bigger action
- More feedback
- More things to fix
@sitnikcode
1st step: explain the idea to friends
And find the way to describe the project
2nd step: convince colleagues to try
Fix issues, DX,
and install docs
3rd step: social networks
And find the best way to describe projects
@sitnikcode
And tweet again each big feature
@sitnikcode
Good tweet
Code example or screenshot
Project description
New feature which was added
@sitnikcode
4th step: reddit and hacker news
And fix compatibility issues
@sitnikcode
5th step: write English article
dev.to
smashingmagazine.com
css-tricks.com
@sitnikcode
6th step: send PRs
Use success in next iterations
@sitnikcode
Don’t stop making iterations
Don’t spam: be regular
every 2 weeks or every month
@sitnikcode
Why do you need multiple posts?
Why do you need many iterations?
Feedback will help to fix it
@sitnikcode
How people choose
Irrational choice across popular options
@sitnikcode
How long will they support the project?
How many resources are behind the project?
Regular posts answer
to these questions
Irrational choice across popular options
How long will they support the project?
How many resources are behind the project?
@sitnikcode
Chapter 7
Working with community
You did everything right
Explain benefits in docs
Good step-by-step intructions
Regular posts, articles, talks
@sitnikcode
And got issues from users
@sitnikcode
The circle of guilt
Many issues without answer
Blaming yourself for being bad maintainer
Depression and lack of productivity
Even more issues without answer
@sitnikcode
You don’t need to write code
@sitnikcode
15 min in the morning
to answer new issues
It’s OK to ask people to wait
Just 1 response could make an ally
Avoid this issues in future
@sitnikcode
Add warning
Stopped issues about using PostCSS for Sass sources
Add note to docs
Ask issue authors to change docs
How to deal with negative feedback?
@sitnikcode
There is no ideal answer
Start asking questions
Sometimes, people just need to talk
They can become your fan
after a talk
Competitor means freedom
Chapter 8
Resume
Success formula
Project popularity =
Your popularity
Promotion
Benefits for users
Luck
+
+
+
@sitnikcode
How people choose
Irrational choice across popular options
@sitnikcode
How people read
@sitnikcode
README.md is critical
- Clear description
- How the product is useful for users
- The difference from other products
- Easy step-by-step instruction
@sitnikcode
Regular posts, articles, talks
@sitnikcode
Thanks