Hi there 👋
For this week's analysis, we found 5 TypeScript repos adored by the top 1% of developers.
Ready to check them out?
How do we identify the "top 1%" of devs? 🔎
At Quira, we rank developers based on their DevRank.
In simple terms, DevRank uses Google’s PageRank algorithm to measure how important a developer is in open source based on their contributions to open source repos.
After finding the repos that the top 1% have starred, we calculate the likelihood that these top devs will star a repo compared to the likelihood that the bottom 50% won’t. 📊👇
Note: We recognise that our ranking method is not yet perfect, so we keep improving our model. We welcome any feedback on this. 🙏
The below repos will be particularly useful when you want to build your own projects.
If you want to build stuff, have fun and make money from it, the latest Creator Quest challenges you to build developer tools using GenAI (the current prize pool is $2048🤫). To participate, sign up to Quira.
Now that we've explored our methodology let's dive into 5 fantastic TypeScript repositories that can take your work to the next level 🚀
🧩 amilajack/eslint-plugin-compat
A tool to check your code's browser compatibility
Why should you care? Eslint-plugin-compat ensures that your code is compatible with your target browsers. This tool examines your JavaScript code to flag features that may not work in the browser environment. It is useful for avoiding browser-specific issues and providing a consistent user experience across different websites.
Set up: npm install eslint-plugin-compat
Example Use Case:
# 1. Update ESLint Config in .eslintrc.json:
{
"plugins": ["compat"],
"extends": ["plugin:compat/recommended"],
"env": {
"browser": true
}
// ...
}
# 2. Configure Target Browsers in your package.json:
{
// ...
"browserslist": ["defaults"]
}
https://github.com/amilajack/eslint-plugin-compat
🔦 g-plane/typed-query-selector
Better typed querySelector and querySelectorAll
Why should you care? Typed-query-selector improves the standard querySelector and querySelectorAll functions by providing better typing using TypeScript's template literal types. This means you'll get much more precision for DOM elements, making your TypeScript code safer and easier to use; especially when dealing with complex selectors or actions directly with DOM elements in type-safe mode.
Set up: npm i -D typed-query-selector
Example use case:
import 'typed-query-selector'
document.querySelector('div#app') // ==> HTMLDivElement
document.querySelector('div#app > form#login') // ==> HTMLFormElement
document.querySelectorAll('span.badge') // ==> NodeListOf<HTMLSpanElement>
anElement.querySelector('button#submit') // ==> HTMLButtonElement
https://github.com/g-plane/typed-query-selector
🔗 jeffijoe/typesync
Installs your dependencies' missing TypeScript typings
Why should you care? TypeSync automatically installs TypeScript type definitions for all dependencies in the project. The tool scans your package.json file and automatically adds the appropriate @types/package, saving you the trouble of adding them manually. It really saves time and ensures that your project's type-checking is correct and compatible with your dependencies.
Set up: npm install -g typesync
Example use case:
typesync [path/to/package.json] [--dry]
# Path is relative to the current working directory. If omitted, defaults to package.json.
# If --dry is specified, will not actually write to the file, it only prints added/removed typings.
https://github.com/jeffijoe/typesync
👯♀️ scinos/yarn-deduplicate
Deduplicate your yarn.lock files
Why should you care? It helps clean up project dependencies. It makes your project lighter and potentially faster by removing duplicate packages from your yarn.lock file. This tool is handy if you're using Yarn v1, as it doesn't support native package deduplication like Yarn v2 does.
Set up: npm install -g yarn-deduplicate OR yarn global add yarn-deduplicate
Example use case:
Simply run
yarn-deduplicate yarn.lock
https://github.com/scinos/yarn-deduplicate
⭕️ discord/focus-rings
Helping you display focus indicators anywhere on a webpage.
Why should you care? Focus indicators are visual cues that highlight which element on a webpage is currently selected. React-focus-rings is a tool for creating a consistent and good-looking visual focus in web applications. This makes it easy to use focus rings to ensure your website is efficient and accessible to all users, including keyboard navigation users.
Set up: npm i react-focus-rings
Example use case:
import * as React from "react";
import ReactDOM from "react-dom";
import { FocusRing, FocusRingScope } from "react-focus-rings";
import "react-focus-rings/src/styles.css";
function App() {
const containerRef = React.useRef<HTMLDivElement>(null);
return (
<div className="app-container" ref={containerRef}>
<FocusRingScope containerRef={containerRef}>
<div className="content">
<p>Here's a paragraph with some text.</p>
<FocusRing offset={-2}>
<button onClick={console.log}>Click Me</button>
</FocusRing>
<p>Here's another paragraph with more text.</p>
</div>
</FocusRingScope>
</div>
);
}
ReactDOM.render(<App />, document.body);
https://github.com/discord/focus-rings
I hope these discoveries are of value to you and will help you build a more robust Typescript toolkit! ⚒️
If you want to leverage these tools to build cool projects and earn rewards, log into Quira and discover Quests! 💰
It's time to code, have fun and bag some awesome rewards. 🤘
PS: Please consider supporting these projects by starring them. ⭐️ We are not affiliated with them. We just think that great projects deserve great recognition.
See you next week,
Your Dev.to buddy 💚
Bap
If you want to join the self-proclaimed "coolest" server in open source 😝, you should join our discord server. We are here to help you on your journey in open source. 🫶
Top comments (7)
Quine is a sure shot way to get some quick $$.
And, I loved the list. @fernandezbaptiste 💖
Always appreciate the positive comments Saurabh! Thanks a ton!
There are so many useful libraries these days - I wonder how you find and track them?
I agree. Open source is a vast ocean of cool repos! 🌊
We get to look up many of the repos on GitHub and analyse their growth. A lot of it is also looking developers and which ones brought contributions that triggered stars growth.
This creates a list of high-potential repos, and we just go and pick the ones we think would benefit the community the most. I have really butchered our process lol but at a high level this is kind of how we do it :)
Would have never found these. Focus-rings is cool!
Thanks a lot, Marc - yes Focus-rings is definitely a little more niche and likely for some developers that focus more on front-end accessibility. Happy you enjoyed this piece!
Let me know your thoughts on the above repos and please do share any TS projects you love using. Always curious to see what the community is using! 👀🙏