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 ourranking methodis 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 small apps, check out Creator Quests, an open-source challenge rewarding devs for creating cool apps with ChatGPT, Claude, Gemini and more. :upside_down_face: 💰
The latest Creator Quest challenges you to build developer tools using GenAI. To participate, simply sign up to Quira and head to Quests.
The current prize pool is $2048, and it will increase as more participants join! Click on the image below and give it a try! ⬇️
Now that we've explored our methodology, let's dive into 5 fantastic TypeScript repositories that can take your work to the next level :rocket:
🧩 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
🔗 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
🔦 g-plane/typed-query-selector
Better typedquerySelector 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
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 Hasnode 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. 🫶
]