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 work at
My open source projects
Nano ID
Browserslist
PostCSS
Autoprefixer
3 M
50 M
80 M
30 M
Downloads per month
The real list of my projects
52 non-popular and only 4 popular
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6110597/MV5BMTg5NzYzMTYxMF5BMl5BanBnXkFtZTgwODY4MjU5OTE_._V1_.jpg)
Ты почему опенсорс не пишешь?
Часики-то тикают
Опенсорс надо писать пока молодой
Потом поздно будет
Что значит не хочешь?
Опенсорс все хотят
Дал Бог проект,
даст и PR
Halt and Catch Fire
“You must have an OSS project to get a job”
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6070961/CvnhAwVWYAAKhtL.jpg_large.jpg)
HR
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6070993/10452843_1050006695019322_7766242695765799438_o.jpg)
The open source dream is a lie
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 an 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)
My main mistake: Russian-only announcement
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/5124147/o7wb457.png)
My main mistake: did not mention anyone
![](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)
Success formula
Project popularity =
Your popularity
Promotion
Benefits for users
Luck
+
+
+
Success formula has Popularity on both sides
Project popularity =
Your popularity
Promotion
Benefits for users
Luck
+
+
+
Advice 1: Create an 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)
Waterfall of popularity
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6074257/smashing-logo.png)
Previous success
Your English Twitter
Next projects
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)
Bad project description is a main mistake
Svelte is cybernetically enhanced web apps
Svelte is JS framework with unique compiler
which generates smaller JS files
Not clear
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
Advice 2: make the description clear
![](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)
It may take a few days
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
How to make a 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 down 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)
Advice 3: More illustrations or code examples
![](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 4: 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 5: Step-by-step starting guide
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6094752/20190505093509.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)
The main secret
How we think people choose frameworks
Rational choose across all options
How we think people choose frameworks
Rational choose across all options
False
How people really choose frameworks
Irrational choose across popular options
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6152463/20190519233339.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/6152548/rVCDhxkG_400x400.png)
Advice 6: Show who uses your project
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6116088/20190510130421.png)
The most effective part of PostCSS description
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.
Advice 7: Speak about the project regularly
![](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/6103296/ECqZTbGU_400x400.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6103173/dev_logo.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6074257/smashing-logo.png)
Advice 7: Speak about the project regularly
Hype as a solution for hype driven development?
Do we miss a big picture?
Andrey Sitnik, Evil Martians
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/2583932/Iv5oal8.png)
Front-end innovation
is over
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6152592/2019-04-15_23_29_19.png)
Front-end reminds me of the Spanish Empire
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6152661/Full_Ornamented_Royal_Coat_of_Arms_of_Spain__1761-1868_and_1874-1931_.svg.png)
Columbus discovered America by mistake
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6152663/1280px-Landing_of_Columbus__2_.jpg)
John Vanderlyn: Landing of Columbus
Spain got a lot of silver
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6152687/4870.jpg)
A Diego Rivera mural from the Palacio Nacional in Mexico City
But spent it for war and notables
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6152707/Francisco_de_Zurbarán_014.jpg)
The Defense of Cadiz against the English
And lost everything
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6152713/Loutherbourg-Spanish_Armada.jpg)
Defeat of the Spanish Armada
S-curve of technologies
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6152724/092018_0859_WhySCurvesA3.png)
We are here
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6152724/092018_0859_WhySCurvesA3.png)
We are rich now (and it is OK)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6152874/skip-scooter-ride.jpg)
Stagnation is a problem
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6152707/Francisco_de_Zurbarán_014.jpg)
The Defense of Cadiz against the English
We choose frameworks by stars & downloads
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6152896/20190520024955.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6152898/20190520025005.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6152908/20190520025129.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6152922/20190520025308.png)
And it is bad
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6152896/20190520024955.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6152898/20190520025005.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6152908/20190520025129.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6152922/20190520025308.png)
Moment
date-fns
The better way to choose dependencies
Moment
date-fns
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6152928/20190520025718.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6152930/20190520025705.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6152933/20190520025823.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6152935/20190520025817.png)
Stars ≠ good support
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6152942/20190520030055.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6072923/css-modules-logo.png)
How we defeated IE if we look on popularity?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/4868571/best-ie.png)
The biggest ecosystem
Will we have anything after React?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6153063/68747470733a2f2f6e696e2d6a696e2e6769746875622e696f2f736c696465732f6669626572732f72656163742d657665727977686572652e6a7067.jpg)
We are proud of using React for static sites
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6153069/js_vs_jpeg-85dbf5c.png)
We are proud of using styled-components
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6153073/20190520035538.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6153074/20190520035601.png)
We use what opinion leaders tell us
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6153085/1265px-Pied_Piper2.jpg)
Abnormal followers distribution
Abnormal followers distribution
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6072600/20190427181819.png)
Autoprefixer got Grid for IE feature
![](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)
Idea spread was slowed by a single key person
![](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/6074257/smashing-logo.png)
To be clear
Hate Autoprefixer
The single person desides for the whole industry
Social elevators are broken
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6153109/Elevator-broken.jpg)
Popularity brings you popularity
Break the wheel instead of supporting it
Front-end is dying
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6152713/Loutherbourg-Spanish_Armada.jpg)
Defeat of the Spanish Armada
We can create a new S-curve
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6169823/Без_имени.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6169825/Без_имени.png)
Solution
We need an environment for next technology
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6169823/Без_имени.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6169825/Без_имени.png)
Transition gap
1. Choose dependencies rationally
Because it has more stars
Because of hype
Because big company use it
Because opinion leader told you
Better ways to choose
- Search on npm
- Size bundlephobia.com
- Make your own benchmark
- Issues without answers
- Make a small demo
Big projects can ignore your problems
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6174301/20190524123533.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6174305/20190524123641.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6174309/20190524123733.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6174313/20190524123808.png)
Small projects can fix your problem in a day
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6174352/20190524124641.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6174356/20190524124709.png)
Maintainer’s motivation > stars
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6174749/ded0db2741e8c3cc4835abacc3f2d4f2.jpg)
Local cafe
Network
vs
Patricia Ernsberger
Framework is not really important
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6169890/9pg8rHn.jpg)
2. Specific tools > universal tools
Static page
Svelte
Parcel
BEM
Web app
React
Webpack
zero runtime CSS-in-JS
3. Promote non-popular developers
< 7000 followers
Retweet more often
≥ 7000 followers
Think twice before retweet
Think twice before retweeting me too
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6075252/20190428220050.png)
≥ 7000 followers
How to create a new S-curve
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6169823/Без_имени.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6169825/Без_имени.png)
4. Do not study only CS and math
Cryptography + Economy → Cryptocurrency
Cryptocurrency + Politics → EOS
5. Try to see the big picture
Our software violates privacy
Internet censorship
Open datasets
…
Metrics is not a silver bullet
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6169917/1_QI5VDJgqGOunmLJeRJo9Wg.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/467124/images/6169919/screen1.png)
Front-end is not the first
6. Front-end is dead. Dance on tables.
Thanks
DM me your open source