Andrey Sitnik, Evil Martians
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/2583932/Iv5oal8.png)
How to Make a Popular Open Source Project
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6028608/2019-04-15_23_29_19.png)
I am working at
15 Years Experience in Open Source
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6056421/1.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6056403/dscf1595.jpg)
since 2004
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6066818/sourceforge-logo_1.png)
5 Years Experience in Open Source Promoting
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/5124147/o7wb457.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6056370/img_9595.jpg)
since 2013
Sharing Real Experience
Nano ID
Browserslist
PostCSS
Autoprefixer
3 M
50 M
80 M
30 M
Downloads per month
Chapter 1
Why you should create open source project?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6139527/8JKH7AiKUVQ.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6110597/MV5BMTg5NzYzMTYxMF5BMl5BanBnXkFtZTgwODY4MjU5OTE_._V1_.jpg)
Ты почему опенсорс не пишешь?
Часики-то тикают
Опенсорс надо писать пока молодой
Потом поздно будет
Что значит не хочешь?
Опенсорс все хотят
Дал Бог проект,
даст и PR
Halt and Catch Fire
“You must have OS project to find a job”
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6070961/CvnhAwVWYAAKhtL.jpg_large.jpg)
HR
“Success Formula”
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6066928/cartman-south-park-twitter-ubjjpg-large_1024xx946-532-0-16.png)
Idea
GitHub
Popularity
Success
South Park, Go Fund Yourself episode
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6070993/10452843_1050006695019322_7766242695765799438_o.jpg)
Open Source dream is a lie
Popular project ≠ many followers
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6072600/20190427181819.png)
Better ways to be popular
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6072760/1_9PQogjP3vmuJ2DQlUFl7yQ.jpeg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6072761/20190427195750.png)
Articles
Talks
GitHub project ≠ good resume
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6072774/20190427202312.png)
1 month of work → few stars
vs
2 weeks → commit to Babel
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6072777/20190427202635.png)
Better ways to be popular
Create app
Fix docs in popular projects
Use beta version → fix bugs
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6072781/Tic-Tac-Toe-game-on-React-js.gif)
App from slides.com/keziyahlewis/deck
The best reason: change the world
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6072816/7LDLA.jpg)
My reason for Autoprefixer: kill Compass
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4967883/5JqAjmf.png)
My reason for PostCSS: CSS tools diversity
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6072922/logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6072923/css-modules-logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6072928/40150215.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6072929/bC2ortBQ_400x400.png)
Stylelint
Lost Grid
cssnano
RTLCSS
My reason for Size Limit: reduce JS lib size
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6072933/20190427232548.png)
Chapter 2
Success formula
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6139518/wMxhDuwi3Xo.jpg)
False formula
Good idea → Popular project
False
My open source projects
Nano ID
Browserslist
PostCSS
Autoprefixer
The real list of my projects
52 non-popular and only 4 popular
Fail case 1: Size Limit
Size Limit 0.1
Article about it
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6074169/20190428135247.png)
a week to write the article
bundlesize was released before my article
Size Limit 0.1
Article about it
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6074169/20190428135247.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6074198/20190428140137.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6075118/39191.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6075119/10652.jpg)
Size Limit lost
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6074201/20190428140338.png)
Fail case 2: Autoprefixer
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6074246/11796206.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6074249/10610368.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6074250/7077307.jpg)
grid-template-rows: auto auto
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/2480030/20131217-ie8.png)
Fail case 2: Autoprefixer
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6074246/11796206.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6074249/10610368.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6074250/7077307.jpg)
grid-template-rows: auto auto
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/2480030/20131217-ie8.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6074254/2764898.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6074257/smashing-logo.png)
The real success formula
Project popularity =
Your popularity
Promotion
Benefits for users
Luck
+
+
+
Idea is not important
Project popularity =
Your popularity
Promotion
Benefits for users
Luck
+
+
+
Idea
Useless project can’t be promoted
Project popularity =
Your popularity
Promotion
Benefits for users
Luck
+
+
+
Chapter 3
Base axioms
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6139533/9RrZIyKtiPU.jpg)
Axiom 1: success formula
Project popularity =
Your popularity
Promotion
Benefits for users
Luck
+
+
+
How we think people choose frameworks
Rational choose across all options
How we think people choose frameworks
Rational choose across all options
False
Axiom 2: How people choose frameworks
Irrational choose across popular options
How we think people read docs/tweets
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6075108/dec_2017_cozy_reads_hpl_resized.jpg)
How we think people read docs/tweets
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6075108/dec_2017_cozy_reads_hpl_resized.jpg)
False
Axiom 3: How people read docs/tweets
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6075114/20190428204753.png)
Chapter 4
Preparations
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6139539/hFAtNTOxPE8.jpg)
Success formula has Popularity on both sides
Project popularity =
Your popularity
Promotion
Benefits for users
Luck
+
+
+
My main mistake: only Russian announce
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/5124147/o7wb457.png)
My main mistake: nobody to mention
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6075242/20190428215708.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6075244/20190428215746.png)
Advice 1: Create English Twitter account
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6075249/20190428220128.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6075252/20190428220050.png)
Success formula is based on luck
Project popularity =
Your popularity
Promotion
Benefits for users
Luck
+
+
+
Advice 2: Be ready to try many times
Project popularity =
Your popularity
Promotion
Benefits for users
Luck
+
+
+
Project popularity =
Your popularity
Promotion
Benefits for users
Luck
+
+
+
Project popularity =
Your popularity
Promotion
Benefits for users
Luck
+
+
+
Project popularity =
Your popularity
Promotion
Benefits for users
Luck
+
+
+
Project popularity =
Your popularity
Promotion
Benefits for users
Luck
+
+
+
Project popularity =
Your popularity
Promotion
Benefits for users
Luck
+
+
+
Project popularity =
Your popularity
Promotion
Benefits for users
Luck
+
+
+
Project popularity =
Your popularity
Promotion
Benefits for users
Luck
Chapter 5
README.md
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6139536/6Az9cRoTN8Y.jpg)
README.md is your main entry point
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6085915/20190502105310.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6074257/smashing-logo.png)
How people read docs
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6075108/dec_2017_cozy_reads_hpl_resized.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6075114/20190428204753.png)
What users need?
Project popularity =
Your popularity
Promotion
Benefits for users
Luck
+
+
+
Advice 3: Start from the reason to read it
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6082586/art-krasivye-kartinki-fantasy-art-morkardfc-3350174.jpeg)
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
It’s OK to spend a week on the first block
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6085891/20190502104138.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6085892/20190502104201.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6085895/20190502104217.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6085899/20190502104228.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6085900/20190502104240.png)
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
First block of Nano ID
A tiny, secure, URL-friendly, unique string ID generator for JS.
- Small. 141 bytes (minified and gzipped). 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
What should be in first block
- Clear description
- How the product is useful for users
- The difference from other products
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
How to make good description
You in the bar with friends.
”So, I created …”
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6094677/O1EUy097psO4tuw9q5QAXGDV27j4gN.jpg)
And then cut it 2-4 times
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6095050/eddard-stark-02-1024x682.jpg)
What do you think people read
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6094690/20190505090609.png)
What people actually read
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6094690/20190505090609.png)
Progressive JPEG
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6094705/1_e3DY3AsNIfbMzGb0wkeBJw.jpeg)
Advice 4: More illustration or code example
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6094712/20190505091728.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6094722/20190505092018.png)
Advice 5: More lists and bolds
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6094717/20190505091842.png)
Important parts are highlighted
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6094717/20190505091842.png)
Advice 6: Use real proofs
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6094739/Webcomic_xkcd_-_Wikipedian_protester.png)
Size Limit to prove “small”
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6094725/20190505092123.png)
Show benchmarks to prove “fast”
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6094742/20190505093044.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6094725/20190505092123.png)
Show code to prove “better API”
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6094743/20190505093219.png)
Advice 7: Step-by-step starting guide
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6094752/20190505093509.png)
Your users
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6075114/20190428204753.png)
Be very specific
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6094754/20190505093623.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6094755/20190505093709.png)
Help with choice
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6094754/20190505093623.png)
Separated sections for specific use cases ❤️
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6102206/20190507104557.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6102207/20190507104610.png)
Test your starting guide on new project
npm init
…
everything works
Chapter 6
Slow growing
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6139553/c438mMGBqKg.jpg)
Wrong way to promote the project
Post 1 tweet
Got 4 retweets
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/3582556/14317911768789.jpg)
Grows by small iterations
Federico Panzano
Each iteration contains
- Action (feature, tweet, article, etc)
- Feedback
- Fixing the project according to feedback
Next iteration bigger than previous one
- Bigger action
- More feedback
- More things to fix
1st iteration: explain the idea to friends
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6094677/O1EUy097psO4tuw9q5QAXGDV27j4gN.jpg)
And find the way to describe the project
2nd iteration: convince colleagues to try it
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6095843/d0e1c330f7c345cb60aacd1a553b2f6e.jpg)
Fix issues, DX,
and install docs
3rd iteration: post announce to the Twitter
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6095868/109099-rosagolijanD22130AC-585F-5A6C-8367-998F36BCFFC8.today-inline-large.jpg)
And find the best way to describe projects
And tweet again each big feature
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6095880/twitter.jpg)
Good tweet
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6095872/20190505191355.png)
Code example or screenshot
Project description
New feature which was added
4th iteration: reddit and hacker
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6095898/iUrYEOpJ_400x400.png)
And fix compatibility issues
5th iteration: write article on your language
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6103160/df0491ba483b4446bc9261be83f69ebd.png)
habr.com
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6103296/ECqZTbGU_400x400.jpg)
6th iteration: write English article
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6103173/dev_logo.jpg)
dev.to
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6074257/smashing-logo.png)
smashingmagazine.com
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6103198/akqRGyta_400x400.jpg)
css-tricks.com
7th iteration: send PRs
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6116077/20190510130105.png)
Use previous success in next iterations
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6116088/20190510130421.png)
Don’t step making interations
Don’t spam: be regular
every 2 weeks or every month
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6103346/golden_honey_spam_large.jpg)
Why you need to several tweets?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6075114/20190428204753.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6103517/1_ftG_XQPkXrPKCO0Wf-d6qg.gif)
Why you need many iterations?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6103487/e6fe683da9cf5a1ef6dfdf7d5bc623acc6ce2a7500c54fd66204d7d0644180ef.jpg)
Feedback will help to fix it
How people choose
Irrational choose across popular options
How long they will support the project?
How many resources project has behind?
Regular tweets answer to these questions
Irrational choose across popular options
How long they will support the project?
How many resources project has behind?
Chapter 7
Working with community
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6139545/v66OWL64R70.jpg)
You did everything right
Explain benefits in docs
Good step-by-step intructions
Regular tweets, articles, talks
And got issues from users
The circle of guilt
Many issues without answer
Blaming yourself for being bad maintaner
Depression and lack of productivity
Even more issues without answer
You don’t need to write code
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6107804/20190508181144.png)
15 min in the morning to answer on new issues
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6107902/ST_STIR_A.gif)
It’s OK to ask wait
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6107975/20190508184350.png)
Just an answer could make them your fans
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6107980/20190508184455.png)
Do something to avoid issues in future
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6107378/q6745.jpg)
Add warning
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6108013/20190508185116.png)
Stopped issues about using PostCSS for Sass sources
Add note to docs
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6108264/20190508192829.png)
Ask issue authors to change docs
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6108275/20190508192930.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6108279/20190508193026.png)
How to deal with negative feedback?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6108342/20190508193900.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6109255/20190508225737.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6109256/20190508225856.png)
There is no ideal answer
My best way is to start asking questions
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6109302/20190508231400.png)
Sometimes, people just need to talk
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6109342/08e47afad67d0cd276f9789fee9139a1.png)
They can become your fan
after a talk
Chapter 8
Resume
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6139560/EgcmD2usGBA.jpg)
Success formula
Project popularity =
Your popularity
Promotion
Benefits for users
Luck
+
+
+
How people choose
Irrational choose across popular options
How people read
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6075114/20190428204753.png)
README.md is critical
- Clear description
- How the product is useful for users
- The difference from other products
- Easy step-by-step instruction
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6094752/20190505093509.png)
Regular tweets, articles, talks
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6103296/ECqZTbGU_400x400.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6095898/iUrYEOpJ_400x400.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6103173/dev_logo.jpg)
Thanks
DM me your open source
How to Make Popular Open Source Project
By Andrey Sitnik
How to Make Popular Open Source Project
- 4,905