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? 🔎 Have you ever heard of ? DevRank In simple terms, DevRank uses to measure Google’s PageRank algorithm 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: I recognize that this is not yet perfect, so we keep improving our model. We welcome any feedback on this. ranking method 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 with ChatGPT, Claude, Gemini and more. 🙃 💰 open-source challenge rewarding devs for creating cool apps The latest Creator Quest challenges you to build developer tools using GenAI. , and it will increase as more participants join. To participate, The current prize pool is $2048 you can check out on Quine.sh. Quests Now that we've explored the methodology let's dive into five 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 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. Why should you care? : 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 TypeSync automatically installs TypeScript type definitions for all dependencies in the project. The tool scans your package.json file and automatically adds the appropriate , 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. Why should you care? @types/package : 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 It helps clean up project dependencies. It makes your project lighter and potentially faster by removing duplicate packages from your . This tool is handy if you're using Yarn v1, as it doesn't support native package deduplication like Yarn v2 does. Why should you care? yarn.lock file : OR Set up npm install -g yarn-deduplicate yarn global add yarn-deduplicate : Simply run Example use case yarn-deduplicate yarn.lock https://github.com/scinos/yarn-deduplicate ⭕️ discord/focus-rings Helping you display focus indicators anywhere on a webpage. 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. Why should you care? : 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 and Better typed querySelector querySelectorAll 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. Why should you care? : 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! ⚒️ It's time to code, have fun, and bag some awesome rewards. 🤘 PS: I am not affiliated with them. I just think that great projects deserve great recognition. Please consider supporting these projects by starring them. ⭐️ See you next week, Your Hackernoon buddy 💚 Bap Also published . here

Augmentastic || Augmented Reality

This Week's Repo Gems: 5 TypeScript Repos You Need to Check Out

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

5 Open Source Alternatives to Auth0 to be Excited About in 2024

3 Easy Steps to Change Main Git Branch on Heroku

15 Essential GitHub Repos for Web Developers in 2021

6 Best Open-Source Projects for Real-Time Face Recognition

6 Simple Steps to Import a Project to Azure Repos from Git

5 Open Source Alternatives to Auth0 to be Excited About in 2024

3 Easy Steps to Change Main Git Branch on Heroku

15 Essential GitHub Repos for Web Developers in 2021

6 Best Open-Source Projects for Real-Time Face Recognition

6 Simple Steps to Import a Project to Azure Repos from Git

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps