React Animated typing in ~400 bytes 🐡 of JavaScript.

DEMO

Based on awesome typical library by @camwiegert

npm install --save react-typical

import React, { Component } from 'react'
import Typical from 'react-typical'

class Example extends React.Component {
  render () {
    return (
      <Typical
        steps={['Hello', 1000, 'Hello world!', 500]}
        loop={Infinity}
        wrapper="p"
      />
    )
  }
}

This library is based on @camwiegert/typical work and it currently is just a wrapper for react.

MIT © catalinmiron

Working on an experimental new design? Starting a closed beta? Rolling out a new feature over the next few weeks? Fa-fa-fa-flip it. fflip gives you complete control over releasing new functionality to your users based on their user id, join date, membership status, and whatever else you can think of. fflip's goal is to be the most powerful and extensible feature flipping/toggling module out there.

• Create custom criteria to segment users & features based on your audience.
• View & edit feature access in one easy place, and not scattered around your code base.
• System-Agnostic: Support any database, user representation or web framework you can throw at it.
• Extensible: Supports 3rd-party plugins for your favorite libraries (like our Express integration!)

npm install fflip --save

As mentioned, fflip's goal is to be flexible enough to integrate with any web framework, database, or ORM. The following integrations are known to…

JavaScript is all like "You images done yet or what?"

imagesloaded.desandro.com

Detect when images have been loaded.

• imagesloaded.pkgd.min.js minified
• imagesloaded.pkgd.js un-minified

<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.js"></script>

Install via npm: npm install imagesloaded

Install via Yarn: yarn add imagesloaded

You can use imagesLoaded as a jQuery Plugin.

$('#container').imagesLoaded( function() {
  // images have loaded
});

// options
$('#container').imagesLoaded( {
  // options...
  },
  function() {
    // images have loaded
  }
);

.imagesLoaded() returns a jQuery Deferred object. This allows you to use .always(), .done(), .fail() and .progress().

$('#container').imagesLoaded()
  .always( function( instance ) {

tRPC

Move fast and break nothing.
End-to-end typesafe APIs made easy.

The client above is not importing any code from the server, only its type declarations.

tRPC allows you to easily build & consume fully typesafe APIs without schemas or code generation.

• ✅  Well-tested and production ready.
• 🧙‍♂️  Full static typesafety & autocompletion on the client, for inputs, outputs, and errors.
• 🐎  Snappy DX - No code generation, run-time bloat, or build pipeline.
• 🍃  Light - tRPC has zero deps and a tiny client-side footprint.
• …

Get Started | Documentation | Demos

Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.

Swiper is not compatible with all platforms, it is a modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity.

• Tree-shakeable: Only modules you use will be imported into your app's bundle.
• Mobile-friendly: It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.
• Library Agnostic: Swiper doesn't require any JavaScript libraries like jQuery, which makes Swiper much smaller and faster. It can be safely used with libraries such as jQuery, Zepto, jQuery Mobile, etc.
• 1:1 Touch movement: By default, Swiper provides 1:1 touch movement interaction, but this ratio can…

BrowserStore helps you persist data into various browser-based storage systems. It offers a unified interface on top of your favorite storage systems and makes it simple to persist data without worrying about implementation details.

It also lets you plug several storage systems at once, sync data between them, and retrieve data from them with the order strategy of your choice.

BrowserStore provides builds for different environments.

The recommended way of install is via npm or Yarn:

npm install browserstore.js

// or

yarn add browserstore.js

Include BrowserStore in a script tag and access its methods through the global browserstore variable.

<script src="path/to/umd/browserstore.js"></script>

const adapter = require('browserstore.js/cjs/adapters/path/to/adapter')
const { createStore } = require('browserstore.js')

requirejs(['path/to/amd/browserstore.js'], function(browserstore) {
  //...
}

This Visual Studio Code extension converts a string to a template string when "${" is typed.

Name	Description	Default Value
template-string-converter.enable	Switches the extension on/off	true
template-string-converter.validLanguages	Languages the extension should apply to	svelte, typescript, javascript, typescriptreact, javascriptreact
template-string-converter.quoteType	single (''), double (""), or both	both
template-string-converter.convertOutermostQuotes	In the case of nested quotes, converts the outermost ones to backticks	false
template-string-converter.autoRemoveTemplateString	When $ or { is deleted, replace backticks with quotes	false
template-string-converter.convertWithinTemplateString	Within a template string, converts strings to template strings when ${ is typed	true
template-string-converter.addBracketsToProps	Adds brackets to the template string for JSX properties	false

Simple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll.

>> DEMO <<

Lax.js 2.0 has been completely re-written with a focus on modularity and flexibility giving you more tools to create awesome animations.

• New javascript animation syntax, allowing for more advanced effect combos
• Use any value to drive animations, for example mouse position, time of day .. and of course scroll!
• Animations can be given inertia when scrolling
• Create custom CSS bindings
• Animation easings
• And much more..

• Scroll effect
• Horizontal snap scroll
• Inertia
• Video/Gif playback
• Cursor position
• Text input
• Update HTML content
• Preset Explorer

• Setup
• Using presets
• Usage with UI frameworks
• Adding drivers
• Adding elements

• Custom animations
• Optimising performance

• CSS properties
• Special values
• Supported easings

# https://www.npmjs.com/package/lax.js
npm install lax.js
yarn add

Using Sharer.js on your project? Let me know!

Sharer.js is a very tiny JS library to create custom social share components on DOM elements for your website. No dependencies.

Checkout the docs page for more info about installing and usage.

Lint commit messages

Demo generated with svg-term-cli

cat docs/assets/commitlint.json | svg-term --out docs/public/assets/commitlint.svg --frame --profile=Seti --height=20 --width=80

• 🚓 Be a good commitizen
• 📦 Share configuration via npm
• 🤖 Tap into conventional-changelog

• Get Started | Website
  • Contents
  • What is commitlint
    • Benefits of using commitlint
  • Getting started
  • CLI
  • Config
  • Shared configuration
  • Documentation
  • API
  • Tools
  • Roadmap
  • Version Support and Releases
    • Releases
  • Related projects
  • License
  • Development
    • Install and run

commitlint checks if your commit messages meet the conventional commit format.

In general the pattern mostly looks like this:

type(scope?): subject  #scope is optional; multiple scopes are supported (current delimiter options: "/", "\" and ",")

Real world examples can look like this:

chore: run tests on travis ci

fix(server): send cors headers

feat(blog): add comment section

Common types according to commitlint-config-conventional (based on the Angular convention) can be:

• build
• chore
• ci
• docs
• feat
• …