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>
  );
}

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

Simple.css {}

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

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

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

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

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

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

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

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

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

canvas-datagrid

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

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

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

Учебники

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

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

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

Тесты

Исходный код

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

Установка

С помощью npm

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);
})

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

Разумный инструмент для тестирования 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.

Пример

$

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"