🚀10 трендовых проектов на GitHub для веб-разработчиков — 21 января 2022 года

Trending Projects доступен в виде еженедельной рассылки, подпишитесь на Stargazing.dev, чтобы не пропустить ни одного выпуска.

1. React-Text-transition

Анимируйте изменения текста.

WinterCore / react-text-transition

Анимируйте изменения текста

React-Text-transition

Анимируйте изменения текста

Установка

npm install -S react-text-transition

Использование демонстрации

npm run dev

Как использовать

Пример

import React                       from "react";
import TextTransition, { presets } from "react-text-transition";
const TEXTS = [
  "Forest",
  "Building",
  "Tree",
  "Color"
];

const App = () => {
  const [index, setIndex] = React.useState(0);

  React.useEffect(() => {
    const intervalId = setInterval(() =>
      setIndex(index => index + 1),
      3000 // every 3 seconds
    );
    return () => clearTimeout(intervalId);
  }, []);

  return (
    <h1>
      <TextTransition
        text={ TEXTS[index % TEXTS.length] }
        springConfig={ presets.wobbly }
      />
    </h1>
  );
}

Вход в полноэкранный режим Выход из полноэкранного режима
Просмотр на GitHub

2. SunCalc

Маленькая библиотека JavaScript для вычисления положения и фаз солнца/луны.

mourner / suncalc

Маленькая библиотека JavaScript для вычисления положения и фаз солнца/луны.

SunCalc

SunCalc — это крошечная библиотека JavaScript с BSD-лицензией для расчета положения солнца и фаз света (времени восхода, заката, сумерек и т.д.), положения луны и лунной фазы для заданного места и времени, созданная Владимиром Агафонкиным (@mourner) в рамках проекта SunCalc.net.

Большинство расчетов основано на формулах, приведенных в отличных статьях Astronomy Answers о положении Солнца и планет. Вы можете прочитать о различных фазах сумерек, рассчитанных SunCalc в статье Сумерки в Википедии.

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

// get today's sunlight times for London
var times = SunCalc.getTimes(new Date(), 51.5, -0.1);
// format sunrise time from the Date object
var sunriseStr = times.sunrise.getHours() + ':' + times.sunrise.getMinutes();

// get position of the sun (azimuth and

Войти в полноэкранный режим Выход из полноэкранного режима
Просмотр на GitHub

3. Simple.css

Simple.css — это бесклассовый CSS-шаблон, который позволяет быстро создать хорошо выглядящий сайт.

kevquirk / simple.css

Simple.css — это бесклассовый CSS-шаблон, который позволяет быстро создать красивый веб-сайт.

Simple.css {}

Simple.css — это бесклассовый CSS-шаблон, который позволяет быстро сделать красивый сайт.

Узнайте больше на сайте https://simplecss.org.

Поддерживаемые браузеры

Любой вечнозеленый браузер > IE11 (почему IE все еще существует?).

Посмотреть на GitHub


4. Danfo.js

Danfo.js — это библиотека JavaScript с открытым исходным кодом, предоставляющая высокопроизводительные, интуитивно понятные и простые в использовании структуры данных для манипулирования и обработки структурированных данных.

javascriptdata / danfojs

Danfo.js — это библиотека JavaScript с открытым исходным кодом, предоставляющая высокопроизводительные, интуитивно понятные и простые в использовании структуры данных для манипулирования и обработки структурированных данных.


Danfojs: мощный набор инструментов для анализа данных на языке javascript

Что это такое?

Danfo.js — это пакет javascript, который предоставляет быстрые, гибкие и выразительные структуры данных, предназначенные для простой и интуитивно понятной работы с «реляционными» или «маркированными» данными. Он в значительной степени вдохновлен библиотекой Pandas и предоставляет аналогичный API. Это означает, что пользователи, знакомые с Pandas, могут легко освоить danfo.js.

Основные характеристики

  • Danfo.js работает быстро и поддерживает тензоры Tensorflow.js из коробки. Это означает, что вы можете преобразовывать структуру данных Danfo в тензоры.
  • Простая обработка отсутствующих данных (представленных какNaN) в данных с плавающей точкой, а также в данных без плавающей точки.
  • Возможность изменения размера: столбцы могут быть вставлены/удалены из DataFrame
  • Автоматическое и явное выравнивание: объекты могут быть явно выровнены по набору меток, или пользователь может просто игнорировать метки и позволить Series, DataFrame и т.д. автоматически выравнивать данные при вычислениях.
  • Мощная, гибкая функциональность группировки…
Посмотреть на GitHub

5. canvas-datagrid

Веб-компонент сетки данных на основе холста. Способен отображать миллионы последовательных иерархических строк и столбцов без подкачки или загрузки на одном элементе холста.

TonyGermaneri / canvas-datagrid

Веб-компонент сетки данных на основе холста. Возможность отображения миллионов непрерывных иерархических строк и столбцов без подкачки или загрузки на одном элементе холста.

canvas-datagrid

Демонстрация — список государственных служащих города Чикаго. Благодаря data.gov.

  • Работает в Firefox, Edge, Safari и Chrome.
  • Встроенная поддержка сенсорных устройств (телефонов и планшетов).
  • Богатая документация, учебники и поддержка в slack.
  • Один элемент холста, рисуется в мгновенном режиме, размер данных не влияет на производительность.
  • Поддержка неограниченного количества строк и столбцов без подкачки и загрузки.
  • Богатый API событий, методов и свойств с использованием знакомого интерфейса W3C DOM.
  • Расширяемая стилизация, фильтрация, форматирование, изменение размера, выбор и упорядочивание.
  • Поддержка иерархических внутренних сеток на уровне рядов, а также сеток в ячейках.
  • Настраиваемое иерархическое контекстное меню.
  • Встроенные и пользовательские стили.
  • Веб-компонент W3C. Работает во всех фреймворках.
  • Стили для каждого пользователя, размеры столбцов, строк, предпочтения и настройки представления с использованием localStorage.
  • Малый размер файла

Документация

Учебники

Поддержка Slack (автор сообщения для приглашения)

Конструктор стилей

Скачать последнюю версию (минифицированную)

Тесты

Исходный код

Последнее покрытие тестов

Установка

С помощью npm

Вход в полноэкранный режим Выход из полноэкранного режима
Просмотр на GitHub

6. Vest

Vest — это фреймворк для валидации форм, вдохновленный библиотеками модульного тестирования, такими как Mocha или Jest; он разработан, чтобы быть простым в использовании и легким в изучении, представляя их декларативный синтаксис.

ealush / vest

Vest ✅ Декларативный фреймворк валидации

Vest — фреймворк декларативных валидаций

Документация по Vest

Vest — это фреймворк валидации форм, вдохновленный библиотеками модульного тестирования, такими как Mocha или Jest; он разработан, чтобы быть простым в использовании и легким в изучении, представляя их декларативный синтаксис.

Идея Vest заключается в том, что ваши валидации можно описать как набор — контракт, отражающий структуру вашей формы или функции. Vest не зависит от фреймворка, что означает, что его можно использовать с любым фреймворком пользовательского интерфейса или вообще без него.

Использование Vest для валидации форм позволяет уменьшить раздутость, улучшить читаемость и сопровождаемость функций.

test('username', 'Username is required', () => {
  enforce(data.username).isNotBlank();
});
test('username', 'Username must be at least 3 chars', () => {
  enforce(data.username).longerThanOrEquals(3);
})

Вход в полноэкранный режим Выход из полноэкранного режима
Посмотреть на GitHub

7. Vanta JS

Анимированные 3D фоны для вашего сайта

tengbao / vanta

Анимированные 3D фоны для вашего сайта

Vanta JS

Посмотрите демо-галерею и настройте эффекты на сайте www.vantajs.com →.

Что такое Vanta? / Вопросы и ответы

  • Добавьте 3D анимированное цифровое искусство на любую веб-страницу с помощью всего нескольких строк кода.
  • Как это работает: Vanta вставляет анимированный эффект в качестве фона в любой элемент HTML.
  • Работает с vanilla JS, React, Angular, Vue и т.д.
  • Эффекты отображаются с помощью three.js (с использованием WebGL) или p5.js.
  • Эффекты могут взаимодействовать с мышью/сенсорным вводом.
  • Параметры эффектов (например, цвет) могут быть легко изменены в соответствии с вашим брендом.
  • Общий размер дополнительного файла составляет ~120 кб в минимизированном и gzipped формате (в основном three.js), что меньше, чем у аналогичных фоновых изображений/видео.
  • Vanta включает множество предопределенных эффектов, которые можно опробовать. В ближайшее время будет добавлено еще больше эффектов!

Просмотреть демо-галерею и настроить эффекты можно на сайте www.vantajs.com →.

Базовое использование с тегами скрипта:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@0.5.21/dist/vanta.waves.min.js"></script>
<script

Вход в полноэкранный режим Выход из полноэкранного режима
Посмотреть на GitHub

8. Gest

Разумный инструмент тестирования GraphQL — тестируйте свою схему GraphQL локально и в облаке

mfix22 / gest

👨💻 Разумный инструмент тестирования GraphQL — тестируйте вашу схему GraphQL локально и в облаке

Разумный инструмент для тестирования GraphQL.

Использование

$ npm install -g gest
Вход в полноэкранный режим Выйдите из полноэкранного режима

затем отправляйте запросы с gest (произносится как гость [/ɡest/]).

$ gest [options] [query | pathToFileWithQuery]
Войти в полноэкранный режим Выйти из полноэкранного режима
Примеры
$ gest '{ test }'
Войти в полноэкранный режим Выйти из полноэкранного режима

или

$ gest test.graphql
# with `test.graphql` containing
{
  test
}
Ввести полноэкранный режим Выйти из полноэкранного режима

или несколько

$ gest test.graphql '{ test }' introspection.graphql
# will run all three queries!
Войти в полноэкранный режим Выйти из полноэкранного режима

REPL

Если вы запустите gest без аргументов, откроется REPL для выполнения запросов:

$ gest

Query: { test }

{
  data: {
    test: "success!"
  }
}
Войти в полноэкранный режим Выйти из полноэкранного режима

HTTP

Если вы укажете baseURL в вашей config, gest отправит POST запрос с вашим запросом, правильно закодированным в теле. Ваш baseURL должен быть правильным URL.

Вы можете указать HTTP-заголовки, используя флаги -H key=value.

Это особенно удобно, если вы используете рабочий процесс Now.

Пример
$

Войти в полноэкранный режим Выход из полноэкранного режима
Просмотр на GitHub

9. Falso

Создавайте огромные объемы фальшивых данных в браузере и NodeJS. Встряхиваемое дерево и полная типизация.

ngneat / falso

Все фальшивые данные для всех ваших реальных нужд 🙂 .

Создание огромного количества фальшивых данных в браузере и NodeJS. Встряхиваемые деревья и полностью типизированные.


✅ Трясущееся дерево
✅ Полностью типизированный
✅ Функции сущностей
✅ Одиночный и массивный результат🤓 Узнайте об этом на сайте docs
🔥 Запустите его на Stackblitz

Установка

npm i @ngneat/falso
yarn add @ngneat/falso

Использование

import { randEmail, randFullName } from '@ngneat/falso';

const user = { email: randEmail(), name: randFullName() };

const emails = randEmail({ length: 10 });
Вход в полноэкранный режим Выход из полноэкранного режима

Установка семян случайности

Если вы хотите получить стабильные результаты, вы можете установить свой собственный источник случайности:

import { rand, seed } from '@ngneat/falso';
seed('some-constant-seed');

// Always returns 2
rand([1, 2, 3, 4, 5]);

Войти в полноэкранный режим Выход из полноэкранного режима
Просмотр на GitHub

10. Ленивая загрузка

Ванильный JavaScript-плагин для ленивой загрузки изображений. Задерживает загрузку изображений на длинных веб-страницах. Изображения за пределами области просмотра не будут загружены до того, как пользователь прокрутит страницу до них. Это противоположно предварительной загрузке изображений.

tuupola / lazyload

Ванильный JavaScript-плагин для ленивой загрузки изображений

Lazy Load Remastered

Lazy Load задерживает загрузку изображений на длинных веб-страницах. Изображения за пределами области просмотра не будут загружены до того, как пользователь прокрутит страницу до них. Это противоположно предварительной загрузке изображений.

Это современная ванильная JavaScript-версия оригинального плагина Lazy Load. Он использует API Intersection Observer для наблюдения за тем, когда изображение попадает в область просмотра браузера. Оригинальный код был вдохновлен утилитой YUI ImageLoader от Matt Mlinac. Новая версия в значительной степени заимствована из статьи в блоге Дина Хьюма.

Базовое использование

По умолчанию Lazy Load предполагает, что URL исходного изображения высокого разрешения можно найти в атрибуте data-src. Вы также можете включить в атрибут src необязательный заполнитель низкого разрешения.

<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>
<img class="lazyload" data-src="img/example.jpg" width="765" height="574" /&gt
<img class="lazyload" 

Вход в полноэкранный режим Выход из полноэкранного режима
Посмотреть на GitHub

Наблюдение за звездами 📈

Самые высокие показатели за последние 7 дней🔗

  1. Публичные API +1,525 звезд
  2. Tauri +949 звезд
  3. Free for Dev +686 звезд
  4. CyberChef +649 звезд
  5. Awesome +636 звезд

Лучший рост (%) за последние 7 дней🔗

  1. p +18%
  2. Node Intergration Tests +14%
  3. React Preview +13%
  4. riju +10%
  5. Vitest +9%

Самые высокие показатели за последние 30 дней🔗

  1. Awesome +4,507 звезд
  2. Awesome Self Hosted +3,757 звезд
  3. Публичные API +3,521 звезды
  4. Tabby +3,183 звезды
  5. 30 дней JavaScript +3,163 звезды

Наибольший рост (%) за последние 30 дней🔗

  1. Иконуар +117%
  2. Vitest +111%
  3. Базовые компьютерные игры +96%
  4. Fuite +95%
  5. TinySpy +52%

Для получения всех последних рейтингов посетите сайт Stargazing.dev.


Trending Projects доступен в виде еженедельной рассылки, подпишитесь на Stargazing.dev, чтобы не пропустить ни одного выпуска.

Если вам понравилась эта статья, вы можете следить за мной в Twitter, где я регулярно пишу о HTML, CSS и JavaScript.

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *