Жемчужины репозиториев этой недели: 5 репозиториев TypeScript, которые вам нужно проверить

Привет 👋

В ходе анализа на этой неделе мы обнаружили 5 репозиториев TypeScript, которые обожают 1% лучших разработчиков.

Готовы ознакомиться с ними?

Как определить «1% лучших» разработчиков? 🔎

Вы когда-нибудь слышали о DevRank?

Проще говоря, DevRank использует алгоритм Google PageRank для измерения насколько важен разработчик в области открытого исходного кода на основе его вклада. репозитории с открытым исходным кодом.

Найдя репозитории, в которых отметились 1% лучших разработчиков, мы вычисляем вероятность того, что эти лучшие разработчики будут активировать репо, по сравнению с вероятностью того, что нижние 50% этого не сделают. 📊👇

Примечание. Я понимаю, что этот метод ранжирования еще не идеален, поэтому мы продолжаем совершенствовать наш модель. Мы будем рады любым отзывам по этому поводу. 🙏

Приведенные ниже репозитории будут особенно полезны, если вы захотите создавать свои собственные проекты.

Если вы хотите создавать небольшие приложения, попробуйте Creator Quests — конкурс с открытым исходным кодом, в котором разработчики получают вознаграждение за создание классных приложений с помощью ChatGPT, Claude, Gemini и других. 🙃 💰

Последний квест для авторов предлагает вам создать инструменты разработчика с использованием GenAI.

Текущий призовой фонд составляет 2048 долларов США, и он будет увеличиваться по мере присоединения большего числа участников. Чтобы принять участие, вы можете просмотреть Квесты на Quine.sh.

Теперь, когда мы изучили методологию, давайте углубимся в пять фантастических репозиториев TypeScript, которые могут поднять вашу работу на новый уровень 🚀

🧩 amilajack/eslint-plugin-compat

Инструмент для проверки совместимости вашего кода с браузером

Почему вас это должно волновать? Eslint-plugin-compat гарантирует совместимость вашего кода с целевыми браузерами. Этот инструмент проверяет ваш код JavaScript, чтобы отметить функции, которые могут не работать в среде браузера. Это полезно для предотвращения проблем, связанных с браузером, и обеспечения единообразного взаимодействия с пользователем на разных веб-сайтах.

Настройка: npm install eslint-plugin-compat

Пример использования:

# 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

🔗 Джеффиджо/typesync

Устанавливает недостающие типы TypeScript в ваших зависимостях

Почему это вас должно волновать? TypeSync автоматически устанавливает определения типов TypeScript для всех зависимостей в проекте. Инструмент сканирует ваш файл package.json и автоматически добавляет соответствующий @types/package, избавляя вас от необходимости добавлять их вручную. Это действительно экономит время и гарантирует, что проверка типов вашего проекта правильна и совместима с вашими зависимостями.

Настройка: npm install -g typesync

Пример использования:

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-deduulate

Дедупликация файлов Yarn.lock

Почему это вас должно волновать? Это помогает устранить зависимости проекта. Это делает ваш проект легче и потенциально быстрее, удаляя дубликаты пакетов из вашего файла Yarn.lock. Этот инструмент удобен, если вы используете Yarn v1, поскольку он не поддерживает встроенную дедупликацию пакетов, как Yarn v2.

Настройка: npm install -g Yarn-Deduulate ИЛИ Yarn Global Add Yarn-Deduulate

Пример использования: просто запустить

yarn-deduplicate yarn.lock

https://github.com/scinos/yarn-deduulate

⭕️ дискорд/кольца фокусировки

Помогает отображать индикаторы фокуса в любом месте веб-страницы.

Почему это вас должно волновать? Индикаторы фокуса – это визуальные подсказки, указывающие, какой элемент на веб-странице выбран в данный момент. React-focus-rings — это инструмент для создания последовательного и красивого визуального фокуса в веб-приложениях. Это упрощает использование колец фокусировки и обеспечивает эффективность и доступность вашего веб-сайта для всех пользователей, включая пользователей навигации с помощью клавиатуры.

Настройка: npm i response-focus-rings

Пример использования:

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/селектор-типизированных запросов

Лучше типизировать querySelector и querySelectorAll

Почему это вас должно волновать? Typed-query-selector улучшает стандартные функции querySelector и querySelectorAll, обеспечивая более удобный ввод текста с использованием литеральных типов шаблонов TypeScript. Это означает, что вы получите гораздо большую точность для элементов DOM, что сделает ваш код TypeScript более безопасным и простым в использовании; особенно при работе со сложными селекторами или действиями непосредственно с элементами DOM в типобезопасном режиме.

Настройка: npm i -D typed-query-selector

Пример использования:

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

Я надеюсь, что эти открытия будут для вас полезны и помогут вам создать более надежный набор инструментов Typescript! ⚒️

Пришло время программировать, развлекаться и получать потрясающие награды. 🤘

PS: Пожалуйста, рассмотрите возможность поддержки этих проектов, сняв их в главных ролях. ⭐️ Я не связан с ними. Я просто считаю, что великие проекты заслуживают большого признания.

Увидимся на следующей неделе,

Ваш приятель по Хакернуну 💚

Бап

Также опубликовано здесь.