React-Text-transition

Animate your text changes

Installation

npm install -S react-text-transition

Using the demo

npm run dev

How to use

Example

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 is a tiny BSD-licensed JavaScript library for calculating sun positionsunlight phases (times for sunrise, sunset, dusk, etc.)moon position and lunar phase for the given location and timecreated by Vladimir Agafonkin (@mourner)as a part of the SunCalc.net project.

Most calculations are based on the formulas given in the excellent Astronomy Answers articlesabout position of the sunand the planets.You can read about different twilight phases calculated by SunCalcin the Twilight article on Wikipedia.

Usage example

// get today's sunlight times for Londonvar times = SunCalc.getTimes(new Date(), 51.5, -0.1);// format sunrise time from the Date objectvar sunriseStr = times.sunrise.getHours() + ':' + times.sunrise.getMinutes();// get position of the sun (azimuth and

Simple.css {}

Simple.css is a classless CSS template that allows you to make a good looking website really quickly.

Find out more at https://simplecss.org.

Supported Browsers

Any evergreen browser > IE11 (why is IE still a thing?)

Danfojs: powerful javascript data analysis toolkit

What is it?

Danfo.js is a javascript package that provides fast, flexible, and expressive datastructures designed to make working with "relational" or "labeled" data botheasy and intuitive. It is heavily inspired by Pandas library, and provides a similar API. This means that users familiar with Pandas, can easily pick up danfo.js.

Main Features

• Danfo.js is fast and supports Tensorflow.js tensors out of the box. This means you can convert Danfo data structure to Tensors.
• Easy handling of missing-data (represented asNaN) in floating point as well as non-floating point data
• Size mutability: columns can be inserted/deleted from DataFrame
• Automatic and explicit alignment: objects canbe explicitly aligned to a set of labels, or the user can simplyignore the labels and let Series, DataFrame, etc. automaticallyalign the data for you in computations
• Powerful, flexible groupby functionality

canvas-datagrid

Demo - City of Chicago government employee list. Thanks to data.gov.

• Works with Firefox, Edge, Safari and Chrome.
• Native support for touch devices (phones and tablets).
• Rich documentation, tutorials, and slack support.
• Single canvas element, drawn in immediate mode, data size does not impact performance.
• Support for unlimited rows and columns without paging or loading.
• Rich API of events, methods and properties using the familiar W3C DOM interface.
• Extensible styling, filtering, formatting, resizing, selecting, and ordering.
• Support for hierarchal drill in style row level inner grids as well grids in cells.
• Customizable hierarchal context menu.
• Built in and custom styles.
• W3C Web Component. Works in all frameworks.
• Per-user styles, column sizes, row sizes, view preferences and settings using localStorage.
• Small file size

Documentation

Tutorials

Slack Support (message author for invite)

Style Builder

Download latest version (minified)

Tests

Source Code

Latest Test Coverage

Installation

With npm

Vest - Declarative validations framework

Vest Documentation

Vest is a form-validation framework inspired by unit testing libraries like Mocha or Jest; It is designed to be easy to use and easy to learn by introducing their declarative syntax.

The idea behind Vest is that your validations can be described as a suite - a contract that reflects your form or feature structure. Vest is framework agnostic, meaning it can be used with any UI framework, or without any framework at all.

Using Vest for form validation can reduce bloat, improve feature readability and maintainability.

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

View demo gallery & customize effects at www.vantajs.com

What is Vanta? / FAQs

• Add 3D animated digital art to any webpage with just a few lines of code.
• How it works: Vanta inserts an animated effect as a background into any HTML element.
• Works with vanilla JS, React, Angular, Vue, etc.
• Effects are rendered by three.js (using WebGL) or p5.js.
• Effects can interact with mouse/touch inputs.
• Effect parameters (e.g. color) can be easily modified to match your brand.
• Total additional file size is ~120kb minified and gzipped (mostly three.js), which is smaller than comparable background images/videos.
• Vanta includes many predefined effects to try out. More effects will be added soon!

View demo gallery & customize effects at www.vantajs.com

Basic usage with script tags:

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

A sensible GraphQL testing tool.

Usage

$ npm install -g gest

then send queries with gest (pronounced guest [/est/]).

$ gest [options] [query | pathToFileWithQuery]

Examples

$ gest '{ test }'

or

$ gest test.graphql# with `test.graphql` containing{  test}

or multiple

$ gest test.graphql '{ test }' introspection.graphql# will run all three queries!

REPL

If you run gest with no arguments, it will open a REPL for you to run queries in:

$ gestQuery: { test }{  data: {    test: "success!"  }}

HTTP

If you specify a baseURL in your config, gest will send an POST request with your query correctly encoded in the body. Your baseURL must be a valid URL.

You can specify HTTP headers by using -H key=value flags.

This is especially convenient if you are using a Now workflow.

Example

$

All the Fake Data for All Your Real Needs

Create massive amounts of fake data in the browser and NodeJS. Tree Shakeable & Fully Typed.

140+ Functions
Tree Shakable
Fully Typed
Entity Functions
Single and Array Result

Learn about it on the docs site
Run it on Stackblitz

Installation

npm i @ngneat/falsoyarn add @ngneat/falso

Usage

import { randEmail, randFullName } from '@ngneat/falso';const user = { email: randEmail(), name: randFullName() };const emails = randEmail({ length: 10 });

Setting a Randomness Seed

You can set your own seed if you want consistent results:

import { rand, seed } from '@ngneat/falso';seed('some-constant-seed');// Always returns 2rand([1, 2, 3, 4, 5]);

Lazy Load Remastered

Lazy Load delays loading of images in long web pages. Images outside of viewport will not be loaded before user scrolls to them. This is opposite of image preloading.

This is a modern vanilla JavaScript version of the original Lazy Load plugin. It uses Intersection Observer API to observe when the image enters the browsers viewport. Original code was inspired by YUI ImageLoader utility by Matt Mlinac. New version loans heavily from a blog post by Dean Hume.

Basic Usage

By default Lazy Load assumes the URL of the original high resolution image can be found in data-src attribute. You can also include an optional low resolution placeholder in the src attribute.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lazyload.js"></script><img class="lazyload" data-src="img/example.jpg" width="765" height="574" /&gt<img class="lazyload"