7 projects starred by top JavaScript developers that you should check out
February 28, 2020
A list of GitHub projects that were starred by multiple top JavaScript developers in the past 6 months. Read more about the methodolgy at the end of the post.
react-adaptive-hooks
Description: Deliver experiences best suited to a user’s device and network constraints
Repo URL: https://github.com/GoogleChromeLabs/react-adaptive-hooks
Repo Owner: GoogleChromeLabs
GitHub Stars: 3,920
rome
Description: An experimental JavaScript toolchain
Repo URL: https://github.com/facebookexperimental/rome
Repo Owner: facebookexperimental
GitHub Stars: 3,246
1on1-questions
Description: Mega list of 1 on 1 meeting questions compiled from a variety to sources
Repo URL: https://github.com/VGraupera/1on1-questions
Repo Owner: VGraupera
GitHub Stars: 6,518
vanillawebprojects
Description: Mini projects built with HTML5, CSS & JavaScript. No frameworks or libraries
Repo URL: https://github.com/bradtraversy/vanillawebprojects
Repo Owner: bradtraversy
GitHub Stars: 3,820
playwright
Description: Node library to automate Chromium, Firefox and WebKit with a single API
Repo URL: https://github.com/microsoft/playwright
Repo Owner: microsoft
GitHub Stars: 9,935
react-helmet
Description: A document head manager for React
Repo URL: https://github.com/nfl/react-helmet
Repo Owner: nfl
GitHub Stars: 12,604
linaria
Description: Zero-runtime CSS in JS library
Repo URL: https://github.com/callstack/linaria
Repo Owner: callstack
GitHub Stars: 4,940
Want more project recs?
I’m always late to find out about cool/amazing/game-changing/time-saving JavaScript-related projects, so I’m experimenting with ways to uncover potentially helpful tools and resources every week.
So to get more of these project recommendation lists, join my mailing list or follow me on Twitter @ryanjyost
How the list was built
The projects below were starred by multiple experienced, influential developers, which I compiled from Googling “JavaScript developers to follow” and looking at who I currently follow on Twitter. Their GitHub usernames are addyosmani, paulirish, thefoxis, umaar, elijahmanor, jeresig, dshaw, kentcdodds, johnpapa , darkwing, sachag, wesbos, getify, markdalgleish, chriscoyier, mdo, ry, yyx990803, Rich-Harris, sdras, emmabostian , markerikson, btholt, benlesh.
For each developer, I used GitHub’s starring api to fetch their recently starred repos, limited the scope to the past 6 months, filtered out non JavaScript/TypeScript repos, then counted total stars form the user list for each repo and found the projects with multiple stars.
Here’s a gist with some messy code that does it.
| const axios = require("axios"); | |
| const moment = require("moment"); | |
| module.exports = async function() { | |
| const devs = [ | |
| "gaearon", | |
| "addyosmani", | |
| "paulirish", | |
| "thefoxis", | |
| "umaar", | |
| "elijahmanor", | |
| "jeresig", | |
| "dshaw", | |
| "kentcdodds", | |
| "johnpapa", | |
| "darkwing", | |
| "sachag", | |
| "wesbos", | |
| "getify", | |
| "markdalgleish", | |
| "chriscoyier", | |
| "mdo", | |
| "ry", | |
| "yyx990803", | |
| "Rich-Harris", | |
| "sdras", | |
| "emmabostian", | |
| "markerikson", | |
| "btholt", | |
| "benlesh" | |
| ]; | |
| const MAP = {}; | |
| for (let dev of devs) { | |
| const githubUrl = `https://api.github.com/users/${dev}/starred?per_page=50`; | |
| const { data } = await axios.get(githubUrl, { | |
| headers: { | |
| Accept: "application/vnd.github.v3.star+json" | |
| }, | |
| auth: { | |
| username: process.env.GITHUB_CLIENT_ID, | |
| password: process.env.GITHUB_CLIENT_SECRET | |
| } | |
| }); | |
| const final = data | |
| .filter(item => { | |
| const { repo } = item; | |
| return ( | |
| !repo.fork && | |
| ["JavaScript", "TypeScript"].includes(repo.language) && | |
| moment(item.starred_at).isAfter(moment().subtract(6, "months")) | |
| ); | |
| }) | |
| .sort((a, b) => { | |
| a = moment(a); | |
| b = moment(b); | |
| if (a.isAfter(b)) return 1; | |
| if (b.isAfter(a)) return -1; | |
| return 0; | |
| }) | |
| .map(item => { | |
| if (!MAP[item.repo.name]) { | |
| MAP[item.repo.name] = item; | |
| MAP[item.repo.name].count = 1; | |
| } else { | |
| MAP[item.repo.name].count++; | |
| } | |
| return item.repo; | |
| }); | |
| } | |
| const moreThan1 = Object.keys(MAP).filter(key => MAP[key].count > 1); | |
| return moreThan1; | |
| }; |
- ← React Router Architecture that's Simple, Scalable and Protected
- Progress Report 1: Documenting the journey →
Hi, I'm Ryan. I live in Denver and work remotely as a JavaScript/React/Node Developer. I'm always having fun building side projects and sometimes write JavaScript-related tutorials that help folks build things, too.