Categoryside-project

Earn 6,000 stars on Github in just 5 days

The Front-End Checklist unexpectedly became my breakout open-source project, gaining unprecedented attraction and visibility in the developer community. In this article, I take you through the exhilarating first five days after publishing the project on GitHub. From a modest start to trending globally, discover the rollercoaster journey of how a simple checklist resonated with thousands of developers worldwide and earned 6,000 stars in less than a week.

Published

A screenshot of the Front-End Checklist repository (numbers are already outdated since I finished writing that article)

Last month I launched two open source projects on GitHub. A few days later, my Front-End Checklist was showing more than 6,000 stars (17,000 as of writing). And I got 600 stars for my Resources-Front-End-Beginner project!

It was unexpected for me to receive such support coming from so many people around the globe: USA, Brazil, China, Japan, France, Canada, Spain, Mauritius, Japan, Portugal... Even now, I still can’t believe how many pull requests I received with changes and corrections these last days.

For so long I received gifts from the open source world. Now I felt it was finally time for me to give back everything I have learned, and to help others.

As a professional Front-End manager, I spend my time teaching and encouraging others to learn and practice. I regularly share interesting content and useful tools on the Front-End Dev Mauritius group on Facebook. But I never planned that the Front-End Checklist will become a worldwide project.

My motivations to write another Front-End checklist

I’ve seen some Front-End checklists over the past year on the web:

Some of them helped me years ago when I wanted to improve my Front-End knowledge, but most of them were just “not enough.”

Two years ago, I decided to start writing my own checklist based on my experiences. That checklist became way more important when I started to manage Front-End teams in France and Mauritius. Based on questions and usual mistakes from the teams, the content kept improving.

When I needed to teach someone how to become a better Front-End developer, I always had in mind that checklist that I started to work on. The document which started with a simple personal need became an ambitious tool for my team.

Then I started to feel the need to share it with more people.

A month ago I decided to put a first version on GitHub. And… at that moment, everything started to happen fast… really fast.

Things can happen fast on the internet. Really fast.

On 18 October, I published the first version of my Front-End Checklist. I went to see all members of my team and I asked them to put a star 😀 on the repository. They don’t really have the habit to star projects on Github, I had to encourage them to do so 😂.

A few hours later, watching an episode of Hawaii Five-O with my wife, I opened my GitHub repository on my iPad. I was shocked to find that in only few hours, I had already received 700 stars.

700 stars on Github in only few hours

I was not able to understand why and where these stars were coming from. (At that time, I didn’t know about the Insights > Traffic section on GitHub.)

I hadn’t even published any tweet about the Github repository. The next day, I published on my Twitter account: just few likes and retweets about the checklist. Nothing that may explain, where everyone was coming from.

View post on X

I then started to validate pull requests and answer some logged issues. I was feeling so grateful for that unimaginable support. Even working daily with international websites, I forgot sometimes the power of Internet. (Or it’s maybe I’m living in a small island far from everything 😂.)

Next day, I received on Twitter a message from Product Hunt:

View post on X

Without really taking time to think, I opened my Illustrator and designed a logo to put on the page. I kept it basic, inspired by the logo of Front-End Coders, a future NGO I’ll be launching soon officially.

Front-End checklist and Front-End beginners essential logos

Since then, I received in less than one week 40 pull requests, was published on Codrops for my 2 lists in their Collective #359, on the Panda Weekly Newsletter #130 and #131, Hacker news, Reddit (multiple times), NewsCenter.io, La Ferme du Web and more.

Translation in Japanese, Spanish, Chinese, Korean, Portuguese and Vietnamese were done in less than 2 weeks!

Insights for the Front-End Checklist on 23 October 2017

The list is positioned first on Google for the words “Front-End Checklist”. Some landing pages on Github have the checklist on first position (Front-End Development, Checklist, Guidelines).

I discovered more recently that the project was on top of the trending feed on GitHub with more than 6,000 stars in less than a week (on 27 October 2017).

The Front-End Checklist is trending on Github!

Checklists can be more than simple checklists

I’m a big fan of “Awesome”, the curated list of awesome lists created first by Sindre Sorhus . But some lists are colossal and I found myself sometimes struggling to find what I want. I’m not sure if it’s because the amount of links or the absence of information attached to each link.

This is why I decided to add emoticons in my two lists. I usually don’t use them too often, but in that case I found interesting to add more of these to have more information about the content of my links.

The Front-End Checklist use emoticons to add more informations for each rule As mentionned in the introduction of the Front-End Checklist, I used:

  • 📖 for documentation or article links
  • 🛠 for online and / or testing tools links
  • 📹 for any type media, but specially video content

I also used 3 images (High, medium, low) to integrate different levels of priorities. I didn’t find any emoticon that could replace these images easily.

The list of resources for Front-End Beginners also use emoticons to add some additional informations. On my list of resources for Front-End Beginners, for example, I decided to indicate free and paid tutorials. It’s easier to have these type of informations before you click on any link. People can directly focus on what they prefer.

I use daily applications like Cloud Outliner Pro and MindNode to create new lists for my personal and professional life (and Todoist). I can’t imagine doing a complex task without a set of items into a list.

If you have something to share, share it on GitHub now! When it comes to sharing documentation or code, today, there’s no other place I like more than Github. Last week I decided I needed to put my work in a place where people can easily access and participate.

This kind of project is meant to be used and perfected by experiences and different points of view. Because Front-End development is always moving, evolving, it’s not always simple to stay on track on everything. Collaborative projects, where people can participate are for me the best way to have constantly updated tools.

I regularly meet young developers and people who want to become Front-End developer. Even on my YouTube channel, I receive lot of questions and requests. The first advice I give to them is to start coding and put their work on Github. It’s a way for them to show their interests to their friends, a future recruiter and to the world.

The Front-End Code Camp is an event workshop to better understand the process of web development. Don’t hesitate, everything you do, related to coding and web, take time to present it correctly on an README file and click “push”!

What’s next?

By the time I wrote this article I was already working on a small open-source web app... Today, you can already access the Front-End Checklist App online!

Due to many requests, I’m already working on an NPM module which will probably be used by a future website. It was not in my initial plans but when I saw so many people asking for, I couldn’t refuse.

I have much more to share! I’m working on other lists that may be as good as the Front-End Checklist… Well, I hope! 😃

First published on Medium

You Might Also Like

Check out these other posts:

Complementary