open-index/open-npm huggingface dataset:
npm package: @maoosi/device.js
Description: Reactive library to observe essential browser and device properties.
Author: maoosi
Latest version: 2.0.0

# 🧬 Device.js

**Reactive library to observe essential browser and device properties.**

> ⚠️ Version 2 is not backward compatible with version 1. Check the [Changelog](CHANGELOG.md) for more details.

## ✔️ Features detected

- Browser name & version `chrome, safari, firefox, facebook, instagram, edge, ie, opera, phantomjs`
- Browser features `webp, webrtc, webgl, pwa`
- Device orientation `portrait, landscape`
- Device type `desktop, mobile, tablet, tv`
- Device OS `android, ios, windows, macos`
- Viewport dimensions `width, height`

## 📦 Installation

```sh
yarn add @maoosi/device.js
```

## 🚀 Usage

**Basic usage:**

This code will log `viewportWidth` after every viewport resize, throttled to 200 ms:

```javascript
import { device, watch } from '@maoosi/device.js'

watch(async() => {
    console.log(device.viewportWidth)
})
```

`device` is a reactive proxied object that can be observed and exposes the following properties:

```typescript
interface device {
    deviceOS: string | null
    deviceType: string | null
    deviceOrientation: string | null
    browser: string | null
    browserVersion: string | null
    viewportHeight: number | null
    viewportWidth: number | null
    isBrowserEvergreen: boolean | null
    isPWA: boolean | null
    isSupportedWebP: boolean | null
    isSupportedWebGL: boolean | null
    isSupportedWebRTC: boolean | null
}
```

**Using Vue.js:**

Since `device` is a reactive proxied object, Vue.js can observe changes without needing to use the `watch` method:

```html
<template>
    <pre>{{ deviceInfo }}</pre>
</template>

<script>
import { device } from '@maoosi/device.js'

export default {
    data() {
        return { deviceInfo: device }
    }
}
</script>
```

## 🧪 Run the playground

First, make sure you have Vue.js Instant Prototyping service installed: [https://cli.vuejs.org/guide/prototyping.html](https://cli.vuejs.org/guide/prototyping.html)

Then from your terminal:

```sh
yarn playground
```

## 🤝 Contributing

Contributions, issues and feature requests are welcome.

## 📝 License

Copyright © 2021 [maoosi](https://gitlab.com/maoosi).

This project is [MIT](./LICENSE) licensed.
npm package: @maoosi/shapeshifter
Description: JS library to easily shift between different masking shapes.
Author: maoosi
Latest version: 1.0.2

# Shapeshifter.js

⚡ 🎭 🍆 JS library to easily shift between different masking shapes.

> Work in progress


## Installation

### Using NPM

```bash
npm i @maoosi/shapeshifter --save
```

### Using Yarn

```bash
yarn add @maoosi/shapeshifter
```

## Basic usage

```html
<div id="el"></div>
```

```javascript
import Shapeshifter from '@maoosi/shapeshifter'

// create new shapeshifter
const shapeshifter = new Shapeshifter('#el', { /* options */ })

// on ready
shapeshifter.on('ready', () => {

    // shift into the a squared shape
    shapeshifter.shift([
        [0, 0],
        [1, 0],
        [1, 1],
        [0, 1]
    ])

})

// initiate
shapeshifter.init()
```


## Advanced usage

### Masking an image

```javascript
new Shapeshifter('#el', {
    image: 'my-image.jpg'
})
```

### Masking a colored shape

```javascript
new Shapeshifter('#el', {
    color: 'rgba(102, 117, 255, 0.5)'
})
```

### Using shadows

> The blur option for shadows is only working on browsers that support CSS filters.
>
> http://caniuse.com/#feat=css-filters

```javascript
new Shapeshifter('#el', {
    shadow: {
        color: 'rgba(0, 0, 0, 0.25)',
        translateX: '10px',
        translateY: '10px',
        blur: 8
    }
})
```

### Force display mode AND / OR shadow

```javascript
let mode = 'auto' // `auto`, `color`, `image`
let shadow = true // `true`, `false`

shapeshifter.shift([
    [0, 0],
    [1, 0],
    [1, 1],
    [0, 1]
], mode, shadow)
```

### Destroy / Reset

```javascript
shapeshifter.destroy()
```

### Chainable API with Wait.js

https://github.com/maoosi/wait.js

```javascript
shapeshifter
    .shift(shape1)
    .wait(1000)
    .shift(shape2)
    .wait(500)
    .destroy()
```


## Browser Support

Fully supported by Evergreen Browsers (Edge, Opera, Safari, Firefox & Chrome) and IE 10+ browsers.

> The blur option for shadows is only working on browsers that support CSS filters.
>
> http://caniuse.com/#feat=css-filters


## License

[MIT](https://github.com/maoosi/shapeshifter.js/blob/master/LICENSE.md) © 2017 Sylvain Simao
npm package: @maordavidov/generator-dotnet
Description: .NET Core project template generator
Author: Maor Davidov
Latest version: 1.5.2

# @maordavidov/generator-dotnet [![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][daviddm-image]][daviddm-url]
> .NET Core project template generator

## Prerequisites

Myget repository contains my infrastructure: https://www.myget.org/F/maordavidov/api/v3/index.json

## Installation

First, install [Yeoman](http://yeoman.io) and @maordavidov/generator-dotnet using [npm](https://www.npmjs.com/) (we assume you have pre-installed [node.js](https://nodejs.org/)).

```bash
npm install -g yo
npm install -g @maordavidov/generator-dotnet
```

Then generate your new project:

```bash
yo @maordavidov/dotnet
```

## Getting To Know Yeoman

 * Yeoman has a heart of gold.
 * Yeoman is a person with feelings and opinions, but is very easy to work with.
 * Yeoman can be too opinionated at times but is easily convinced not to be.
 * Feel free to [learn more about Yeoman](http://yeoman.io/).

## License

MIT © [Maor Davidov]()


[npm-image]: https://badge.fury.io/js/generator-dotnet-core.svg
[npm-url]: https://npmjs.org/package/@maordavidov/generator-dotnet
[travis-image]: https://travis-ci.org/maordavidov/generator-dotnet-core.svg?branch=master
[travis-url]: https://travis-ci.org/maordavidov/generator-dotnet-core
[daviddm-image]: https://david-dm.org/maordavidov/generator-dotnet-core.svg?theme=shields.io
[daviddm-url]: https://david-dm.org/maordavidov/generator-dotnet-core
npm package: @maorongwan/koishi-plugin-message-bridge
Description: 将聊天消息通过zeromq转发到指定网络位置
Latest version: 1.0.2

# koishi-plugin-message-bridge

[![npm](https://img.shields.io/npm/v/koishi-plugin-message-bridge?style=flat-square)](https://www.npmjs.com/package/koishi-plugin-message-bridge)
npm package: @maoryadin/react-joyride
Description: Create guided tours for your apps
Author: Maor Yadin
Latest version: 2.9.7

# React Joyride

This repo is a fork of the original repo (react-joyride)

[![](https://badge.fury.io/js/react-joyride.svg)](https://www.npmjs.com/package/react-joyride) [![CI](https://github.com/gilbarbara/react-joyride/actions/workflows/main.yml/badge.svg)](https://github.com/gilbarbara/react-joyride/actions/workflows/main.yml) [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=gilbarbara_react-joyride&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=gilbarbara_react-joyride) [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=gilbarbara_react-joyride&metric=coverage)](https://sonarcloud.io/summary/new_code?id=gilbarbara_react-joyride)

[![Joyride example image](http://gilbarbara.com/files/react-joyride.png)](https://react-joyride.com/)

#### Create awesome tours for your app!

Showcase your app to new users or explain functionality of new features.

It uses [react-floater](https://github.com/gilbarbara/react-floater) for positioning and styling.  
And you can use your own components too!

**View the demo [here](https://react-joyride.com/)** (or the codesandbox [examples](https://codesandbox.io/s/github/gilbarbara/react-joyride-demo))

**Read the [docs](https://docs.react-joyride.com/)**

Talk about it on the [Discussions board](https://github.com/gilbarbara/react-joyride/discussions).

## Setup

```bash
npm i react-joyride
```

## Getting Started

```jsx
import Joyride from 'react-joyride';

export class App extends React.Component {
  state = {
    steps: [
      {
        target: '.my-first-step',
        content: 'This is my awesome feature!',
      },
      {
        target: '.my-other-step',
        content: 'This another awesome feature!',
      },
      ...
    ]
  };

  render () {
    const { steps } = this.state;

    return (
      <div className="app">
        <Joyride
          steps={steps}
          ...
        />
        ...
      </div>
    );
  }
}
```

> If you need to support legacy browsers you need to include the [scrollingelement](https://github.com/mathiasbynens/document.scrollingElement) polyfill.

---

Sponsored by

[![Frigade](https://files.gilbarbara.dev/media/frigade-sponsor-v2.png)](https://frigade.com/?source=joyride)

React Joyride is proud to be sponsored by [Frigade](https://frigade.com/?source=joyride), a developer tool for building better product onboarding: guided tours, getting started checklists, announcements, etc.

---

## Development

Setting up a local development environment is easy!

Clone (or fork) this repo on your machine, navigate to its location in the terminal and run:

```bash
npm install
npm link # link your local repo to your global packages
npm run watch # build the files and watch for changes
```

Now clone https://github.com/gilbarbara/react-joyride-demo and run:

```bash
npm install
npm link react-joyride # just link your local copy into this project's node_modules
npm start
```

**Start coding!** 🎉
npm package: @maoryadin1/react-joyride
Description: Create guided tours for your apps
Author: Maor Yadin
Latest version: 2.9.7

# React Joyride

[![](https://badge.fury.io/js/react-joyride.svg)](https://www.npmjs.com/package/react-joyride) [![CI](https://github.com/gilbarbara/react-joyride/actions/workflows/main.yml/badge.svg)](https://github.com/gilbarbara/react-joyride/actions/workflows/main.yml) [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=gilbarbara_react-joyride&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=gilbarbara_react-joyride) [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=gilbarbara_react-joyride&metric=coverage)](https://sonarcloud.io/summary/new_code?id=gilbarbara_react-joyride)

[![Joyride example image](http://gilbarbara.com/files/react-joyride.png)](https://react-joyride.com/)

#### Create awesome tours for your app!

Showcase your app to new users or explain functionality of new features.

It uses [react-floater](https://github.com/gilbarbara/react-floater) for positioning and styling.  
And you can use your own components too!

**View the demo [here](https://react-joyride.com/)** (or the codesandbox [examples](https://codesandbox.io/s/github/gilbarbara/react-joyride-demo))

**Read the [docs](https://docs.react-joyride.com/)**

Talk about it on the [Discussions board](https://github.com/gilbarbara/react-joyride/discussions).

## Setup

```bash
npm i react-joyride
```

## Getting Started

```jsx
import Joyride from 'react-joyride';

export class App extends React.Component {
  state = {
    steps: [
      {
        target: '.my-first-step',
        content: 'This is my awesome feature!',
      },
      {
        target: '.my-other-step',
        content: 'This another awesome feature!',
      },
      ...
    ]
  };

  render () {
    const { steps } = this.state;

    return (
      <div className="app">
        <Joyride
          steps={steps}
          ...
        />
        ...
      </div>
    );
  }
}
```

> If you need to support legacy browsers you need to include the [scrollingelement](https://github.com/mathiasbynens/document.scrollingElement) polyfill.

---

Sponsored by

[![Frigade](https://files.gilbarbara.dev/media/frigade-sponsor-v2.png)](https://frigade.com/?source=joyride)

React Joyride is proud to be sponsored by [Frigade](https://frigade.com/?source=joyride), a developer tool for building better product onboarding: guided tours, getting started checklists, announcements, etc.

---

## Development

Setting up a local development environment is easy!

Clone (or fork) this repo on your machine, navigate to its location in the terminal and run:

```bash
npm install
npm link # link your local repo to your global packages
npm run watch # build the files and watch for changes
```

Now clone https://github.com/gilbarbara/react-joyride-demo and run:

```bash
npm install
npm link react-joyride # just link your local copy into this project's node_modules
npm start
```

**Start coding!** 🎉
npm package: @maotongjian/function-utils
Description: A tiny utility library for debounce and throttle functions.
Author: maotongjian
Latest version: 1.0.1

# @maotongjian/function-utils

A tiny utility library for `debounce` and `throttle` in JavaScript.

## 🚀 Installation

```bash
npm install @maotongjian/function-utils
```

## 📦 Usage

```js
import {
  debounce,
  debounceImmediate,
  throttleFlag,
  throttleTime,
} from '@maotongjian/function-utils';

// debounce example
const logDebounce = debounce(() => console.log('debounce'), 500);

// debounceImmediate example
const logDebounceImmediate = debounceImmediate(
  () => console.log('debounceImmediate'),
  500,
  true
);

// throttleFlag example
const logThrottleFlag = throttleFlag(() => console.log('throttleFlag'), 500);

// throttleTime example
const lotThrottleTime = throttleTime(() => console.log('throttleTime'), 500);
```

## 🧰 Functions Reference

- `debounce(fn, delay)`
  Delays invoking fn until after delay milliseconds have passed since the last call.

- `debounceImmediate(fn, delay, immediate)`
  If immediate is true, fn is invoked immediately on the first call, then debounced.

- `throttleFlag(fn, delay)`
  Throttles fn using a simple flag lock. Useful for basic frequency control.

- `throttleTime(fn, delay)`
  Throttles fn based on timestamp difference. More accurate than flag throttling.

## 📄 License

MIT