Brian Yang - CodeSandbox
CodeSandbox is an online editor tailored
for web applications.
react-patterns  playground 
27 days ago
React Patterns
React patterns from beginners to advanced developers. Simple examples, short descriptions, and quality advice.
react-patterns  react  patterns  design-patterns 
27 days ago
React.js Examples
A nice collection of often useful examples done in React.js
react  examples 
4 weeks ago
alveron: Elm-inspired state management for React in 1kb
Github repo
Name: alveron
Tagline: Elm-inspired state management for React in 1kb
Homepage: https://alveron.js.org
JavaScript = 7389 bytes

# Alveron

> **Disclaimer**: Alveron was formerly published as **react-woodworm**. It was renamed in order to replace the previous [alveron](https://github.com/rofrischmann/alveron-old) package. The old react-woodworm version 4.0 is now published as alveron version 2.0. Sorry for the inconvenience.

Alveron is an [Elm](http://elm-lang.org)-inspired state management library for React support asynchronous effects by default.<br>It uses React's new context API and is super lightweight at **only 1kb gzipped**.

It can handle both **local** [component state](https://reactjs.org/docs/faq-state.html) as well as **global** state.

<img alt="TravisCI" src="https://travis-ci.org/rofrischmann/alveron.svg?branch=master"> <a href="https://codeclimate.com/github/rofrischmann/alveron/coverage"><img alt="Test Coverage" src="https://codeclimate.com/github/rofrischmann/alveron/badges/coverage.svg"></a> <img alt="npm downloads" src="https://img.shields.io/npm/dm/alveron.svg"> <img alt="gzipped size" src="https://img.shields.io/bundlephobia/minzip/alveron.svg?colorB=4c1&label=gzipped%20size"> <img alt="npm version" src="https://badge.fury.io/js/alveron.svg">

## Support Me
If you're using [Robin Frischmann](https://rofrischmann.de)'s packages, please consider supporting his [Open Source Work](https://github.com/rofrischmann) on [**Patreon**](https://www.patreon.com/rofrischmann).

## Installation
# yarn
yarn add alveron

# npm
npm i --save alveron
> **Caution**: It requires `^react@16.3.0` to be present.

## Documentation

> We recommend starting with [Why](https://alveron.js.org/docs/introduction/Motivation.html) and [How](https://alveron.js.org/docs/introduction/How.html) to understand why Alveron exists and how it works.

* [Introduction](https://alveron.js.org/docs/Introduction.html)
* [Concepts](https://alveron.js.org/docs/Concepts.html)
* [Advanced](https://alveron.js.org/docs/Advanced.html)
* [API Reference](https://alveron.js.org/docs/API.html)

## [Examples](https://alveron.js.org/docs/introduction/Examples.html)
* [Counter](./examples/Counter)
* [TodoList](./examples/TodoList)
* [Async API](./examples/AsyncAPI)

## The Gist
import React from 'react'
import { createStore } from 'alveron'

const model = 0
const actions = {
increment: prevState => prevState + 1,
decrement: prevState => prevState - 1,
reset: () => model

// It also supports async side effects
// this is useful if you e.g. do API calls
const effects = {
resetAsync: actions => setTimeout(

const { Wrapper } = createStore({

const Counter = () => (
{({ state, actions, effects }) => (
Count: {state}
github  programming  github-starred-to-pinboard 
7 weeks ago
CS-Interview-Knowledge-Map: Build the best interview map. The current content includes JS, network, browser related, performance optimization, security, framework, Git, data structure, algorithm, etc.
Github repo
Name: CS-Interview-Knowledge-Map
Tagline: Build the best interview map. The current content includes JS, network, browser related, performance optimization, security, framework, Git, data structure, algorithm, etc.
Homepage: https://yuchengkai.cn/docs/

<img align="center" src='./InterviewMap.png' />

<h1 align="center">
Interview Map

<h4 align="center">这是一份能让你更好准备下一次面试的图谱</h4>

<p align="center">
<a href="https://gitter.im/interview-map/Lobby?utm_source=share-link&utm_medium=link&utm_campaign=share-link"><img src="https://img.shields.io/gitter/room/nwjs/nw.js.svg" alt="Gitter"></a>
<a href="https://t.me/joinchat/GULTjw9enq3J4NQ6Yh5Ntw"><img src="https://img.shields.io/badge/chat-Telegram-brightgreen.svg" alt="Telegram"></a>

[English Version](./README-EN.md)

## 前言

> 当你老了,回顾一生,就会发觉:什么时候出国读书,什么时候决定做第一份职业,何时选定对象而恋爱,什么时候结婚,其实都是命运的巨变。只是当时站在三岔路口,眼见风云千樯,你做出选择的那一日,在日记上,相当沉闷和平凡,当时还以为是生命中普通的一天。
> 一个改变面试的项目 --...
github  programming  github-starred-to-pinboard 
7 weeks ago
Photon: Incredibly fast crawler designed for recon.
Github repo
Name: Photon
Tagline: Incredibly fast crawler designed for recon.
Python = 26280 bytes
Dockerfile = 428 bytes

<h1 align="center">
<a href="https://github.com/s0md3v/Photon"><img src="https://image.ibb.co/h5OZAK/photonsmall.png" alt="Photon"></a>

<h4 align="center">Incredibly fast crawler designed for OSINT.</h4>

<p align="center">
<a href="https://github.com/s0md3v/Photon/releases">
<img src="https://img.shields.io/github/release/s0md3v/Photon.svg">
<a href="https://pypi.org/project/photon/">
<img src="https://img.shields.io/badge/pypi-@photon-red.svg?style=style=flat-square"
<a href="https://github.com/s0md3v/Photon/issues?q=is%3Aissue+is%3Aclosed">
<img src="https://img.shields.io/github/issues-closed-raw/s0md3v/Photon.svg">
<a href="https://travis-ci.com/s0md3v/Photon">
<img src="https://img.shields.io/travis/com/s0md3v/Photon.svg">


<p align="center">
<a href="https://github.com/s0md3v/Photon/wiki">Photon Wiki</a> •
<a href="https://github.com/s0md3v/Photon/wiki/Usage">How To Use</a> •
<a href="https://github.com/s0md3v/Photon/wiki/Compatibility-&-Dependencies">Compatibility</a> •
<a href="https://github.com/s0md3v/Photon/wiki/Photon-Library">Photon Library</a> •
<a href="#contribution--license">Contribution</a> •
<a href="https://github.com/s0md3v/Photon/projects/1">Roadmap</a>

### Key Features

#### Data Extraction
Photon can extract the following data while crawling:

- URLs (in-scope & out-of-scope)
- URLs with parameters (`example.com/gallery.php?id=2`)
- Intel (emails, social media accounts, amazon buckets etc.)
- Files (pdf, png, xml etc.)
- Secret keys (auth/API keys & hashes)
- JavaScript files & Endpoints present in them
- Strings matching custom regex pattern
- Subdomains & DNS related data

The extracted information is saved in an organized manner or can be [exported as json](https://github.com/s0md3v/Photon/wiki/Usage#export-formatted-result).\
![save demo](https://image.ibb.co/dS1BqK/carbon_2.png)

#### Flexible
Control timeout, delay, add seeds, exclude URLs matching a regex pattern and other cool stuff.
The extensive range of [options](https://github.com/s0md3v/Photon/wiki/Usage) provided by Photon lets you crawl the web exactly the way you want.

#### Genius
Photon's smart thread management & refined logic gives you top notch performance.\
Still, crawling can be resource intensive but Photon has some tricks up it's sleeves. You can fetch URLs archived by [archive.org](https://archive.org/) to be used as seeds by using `--wayback` option.\
In Ninja Mode which can be accessed by `--ninja`, 4 online services are used to make requests to the target on your behalf.\
So basically, now you have 4 clients making requests to the...
github  programming  github-starred-to-pinboard 
7 weeks ago
ninos: Simple stubbing/spying for AVA
Github repo
Name: ninos
Tagline: Simple stubbing/spying for AVA
JavaScript = 3308 bytes

# Niños

> Simple stubbing/spying for [AVA](https://ava.li)

## Example


const test = require('ninos')(require('ava'));


const EventEmitter = require('events');

test('EventEmitter', t => {
let e = new EventEmitter();
let s = t.context.stub();
e.on('event', s);

t.is(s.calls.length, 1);

e.emit('event', 'arg');
t.is(s.calls[1].arguments[0], 'arg');


const api = require('./api');

test('api.getCurrentUser()', t => {
let s = t.context.spy(api, 'request', () => {
return Promise.resolve({ id: 42 });

await api.getCurrentUser();

t.deepEqual(s.calls[0].arguments[0], {
method: 'GET',
url: '/api/v1/user',

## Install

yarn add --dev ninos

## Usage

#### `ninos()`

This method setups the `t.context.stub()` and `t.context.spy()` functions. It
hooks into AVA to automatically restore spies after each test.

const test = require('ninos')(require('ava'));

#### `t.context.stub()`

Call this method to create a function that you can use in place of any other
function (as a callback/etc).

test('example', t => {
let s = t.context.stub(); // [Function]

On that function is a `calls` property which is an array of all the calls you

let s = t.context.stub();

s.call('this', 'arg1', 'arg2');

t.deepEqual(s.calls, [
{ this: 'this', arguments: ['arg1', 'arg2'], return: undefined },

You can optional pass an inner function to be called inside the stub to
customize its behavior.

let s = t.context.stub((...args) => {
return 'hello!';


t.deepEqual(s.calls, [
{ ..., return: 'hello!' },

If you want to customize the behavior based on the current call you can use

let s = t.context.stub((...args) => {
if (s.calls.length === 0) return 'one';
if (s.calls.length === 1) return 'two';
if (s.calls.length === 2) return 'three';
throw new Error('too many calls!');

t.is(s(), 'one');
t.is(s(), 'two');
t.is(s(), 'three');
t.throws(() => s()); // Error: too many calls!

#### `t.context.spy()`

If you need to write tests against a method on an object, you should use a spy
instead of a stub.

let method = () => 'hello from method';
let object = { method };

let s = t.context.spy(object, 'method');

Just like stubs, spies have a `calls` property.

let s = t.context.spy(object,...
github  programming  github-starred-to-pinboard 
7 weeks ago
r2: HTTP client. Spiritual successor to request.
Github repo
Name: r2
Tagline: HTTP client. Spiritual successor to request.
JavaScript = 8320 bytes

# r2

[![Build Status](https://travis-ci.org/mikeal/r2.svg?branch=master)](https://travis-ci.org/mikeal/r2) [![Coverage Status](https://coveralls.io/repos/github/mikeal/r2/badge.svg?branch=master)](https://coveralls.io/github/mikeal/r2?branch=master) [![Greenkeeper badge](https://badges.greenkeeper.io/mikeal/r2.svg)](https://greenkeeper.io/)

Early in Node.js I wrote an HTTP client library called `request`. It evolved
along with Node.js and eventually became very widely depended upon.

A lot has changed since 2010 and I've decided to re-think what a simple
HTTP client library should look like.

This new library, `r2`, is a completely new approach from `request`.

* Rather than being built on top of the Node.js Core HTTP library and
shimmed for the browser, `r2` is built on top of the browser's
Fetch API and shimmed for Node.js.
* APIs are meant to be used with async/await, which means they are
based on promises.

const r2 = require('r2')

let html = await r2('https://www.google.com').text

Simple JSON support.

let obj = {ok: true}

let resp = await r2.put('http://localhost/test.json', {json: obj}).json

Simple headers support.

let headers = {'x-test': 'ok'}

let res = await r2('http://localhost/test', {headers}).response

Being written to the Fetch API is a huge benefit for browser users.

When running through browserify `request` is ~2M uncompressed and ~500K compressed. `r2` is only 66K uncompressed and 16K compressed.
github  programming  github-starred-to-pinboard 
7 weeks ago
cors-proxy: Proxy clone and push requests for the browser
Github repo
Name: cors-proxy
Tagline: Proxy clone and push requests for the browser
JavaScript = 7029 bytes
Dockerfile = 151 bytes

# @isomorphic-git/cors-proxy

This is the software running on https://cors.isomorphic-git.org/ -
a free service (generously sponsored by [Clever Cloud](https://www.clever-cloud.com/?utm_source=ref&utm_medium=link&utm_campaign=isomorphic-git))
for users of [isomorphic-git](https://isomorphic-git.org) that enables cloning and pushing repos in the browser.

It is derived from https://github.com/wmhilton/cors-buster with added restrictions to reduce the opportunity to abuse the proxy.
Namely, it blocks requests that don't look like valid git requests.

## Installation

npm install @isomorphic-git/cors-proxy

## CLI usage

Start proxy on default port 9999:

cors-proxy start

Start proxy on a custom port:

cors-proxy start -p 9889

Start proxy in daemon mode. It will write the PID of the daemon process to `$PWD/cors-proxy.pid`:

cors-proxy start -d

Kill the process with the PID specified in `$PWD/cors-proxy.pid`:

cors-proxy stop

## Configuration

Environment variables:
- `PORT` the port to listen to (if run with `npm start`)
- `ALLOW_ORIGIN` the value for the 'Access-Control-Allow-Origin' CORS header

## License

This work is released under [The MIT License](https://opensource.org/licenses/MIT)
github  programming  github-starred-to-pinboard 
7 weeks ago
create-mui-theme: online tool for creating material-ui themes
Github repo
Name: create-mui-theme
Tagline: online tool for creating material-ui themes
Homepage: https://react-theming.github.io/create-mui-theme/
JavaScript = 86364 bytes
CSS = 2181 bytes
HTML = 1689 bytes

[![Live demo](https://img.shields.io/badge/Live%20Demo-gh--pages-brightgreen.svg)](https://react-theming.github.io/create-mui-theme/)

# Create Material-UI Theme: <img src="https://material-ui.com/static/images/material-ui-logo.svg" width="32"> + <img src="https://raw.githubusercontent.com/react-theming/readme/master/docs/OrgLogo.png" width="26">

Online tool for creating Material-UI themes via Material Design Color Tool (https://material.io/tools/color)

1. Open `Color Tool` https://material.io/tools/color and `Create MUI Theme` https://react-theming.github.io/create-mui-theme/
2. Select colors of your choice in `Color Tool`
3. Copy-paste URL from `Color Tool` browser tab to the input field in `Create MUI Theme` and click ADD (or simply drag & drop by mouse)
4. Take auto-generated code below and use it in your project


## Example

Drag & Drop this URL onto page

## Usage

You can use this auto-generated code with any your project which uses Material-UI of version 1.0.0 and above. For example you can start with [Create Material-UI App](https://github.com/react-theming/create-material-ui-app). Generated themes are compatible with with [Storybook Addon Material-UI](https://github.com/react-theming/storybook-addon-material-ui)

## Related links

- https://material.io/tools/color
- https://material-ui.com/style/color/#material-color-tool
- https://material-ui.com/customization/themes/
- https://react-theming.github.io/create-mui-theme/

## Support

You can support this project with your stars and RT



Any contributions are very welcome!

#### Credits

[telegram:@usulpro](https://t.me/usulpro) <small>(The quickest way to contact me :zap:)</small>



[![GitHub release](https://img.shields.io/github/release/react-theming/create-mui-theme.svg)](https://github.com/react-theming/create-mui-theme)
github  programming  github-starred-to-pinboard 
7 weeks ago
reddit-banbot: Reddit-Banbot is a reddit bot that can ban users from your community based on karma gained in unwanted communities.
Github repo
Name: reddit-banbot
Tagline: Reddit-Banbot is a reddit bot that can ban users from your community based on karma gained in unwanted communities.
TypeScript = 9938 bytes
Shell = 587 bytes

# Reddit-Banbot

Reddit-Banbot is a reddit bot that can ban users from your community based on karma gained in unwanted communities.

You provide it with:
- A list of the communities you dislike.
- A bad karma threshold gained in those communities.
- A subreddit you moderate.
- A sort order for threads to scan from that subreddit.
- A sort order for users comments (it only fetches 100, so either new or top comments)

## Running

`./run.sh` , or run the following command:

yarn && tsc -p . && node dist/out-tsc/banbot.js \
--clientId X \
--clientSecret X \
--username X \
--password X \
--badSubs={X1,X2} \ # {cringeanarchy, milliondollarextreme}
--subreddit X \ # the subreddit this user is a moderator of
--threadSort X \ # hour, day, week, month, year, all
--userCommentSort X \ # new, top
--badKarma X \ # A minimum accumulated bad karma threshold
--banDuration X \ # Number of days
--removeComments \ # optional, Removes their comments from the subreddit too
--save \ # Saves users, submissions, and ban report out to the saved folder
--dryRun # optional, doesnt ban

## Requirements
- node, typescript, yarn

### Setup a reddit script client

*This is required to make API calls to reddit at the rate of at least 1 per second.*

- Go [here](https://www.reddit.com/prefs/apps)
- Click create another app
- Click personal use script
- Copy down the `client_id`, and `client_secret` for later use.

## Bugs and feature requests
Have a bug or a feature request? If your issue isn't [already listed](https://github.com/tchoulihan/reddit-banbot/issues/), then open a [new issue here](https://github.com/tchoulihan/reddit-banbot/issues/new).
github  programming  github-starred-to-pinboard 
7 weeks ago
react-treeview-mui: A Treeview UI written as a React Component (with material design)
Github repo
Name: react-treeview-mui
Tagline: A Treeview UI written as a React Component (with material design)
JavaScript = 47496 bytes

# React Treeview with Material UI

A Treeview React Component that can use [material-ui](https://github.com/callemall/material-ui)'s styling.

* [LIVE DEMO](https://fiffty.github.io/react-treeview-mui/)
* [Example code](https://github.com/fiffty/react-treeview-mui/blob/master/demo/example.js)

![react-treeview-mui Demo Gif](http://minigrande.com/treelist-demo.gif)

## Installation

$ npm install --save react-treeview-mui

import import React, {Component, PropTypes} from 'react'
// With material-ui
// be sure to have <MuiTreeList /> inside <MuiThemeProvider />
import {MuiTreeList} from 'react-treeview-mui'
// Without material-ui styling
import {TreeList} from 'react-treeview-mui'

// UI state (e.g., expanded list items) is tracked locally
const listItems = [...,{title: 'List Item'},...]
class MyComponent extends Component {
render() {
contentKey={'title'} />

// UI state is tracked outside of <MuiTreeList />
// Maybe through Redux
class MySecondComponent extends Component {
render() {
searchTerm={this.props.searchTerm} />

## Usage

### Data for nodes

One of the required props for the Component is the data for the list items. Instead of an object data structure with child list items nested inside parent list items, the Component takes in an array of list item objects. To accomodate this structure, the objects have a few required keys as following:

const listItems = [
// Each list item is tracked by its index in the master array
depth: 0, // Used to style the list item. Items with 0 depth will not be rendered and act as the root parent
children: [1, 3, 10] // Indexes for child list items. If undefined, list item will be treated as leaf
depth: 1,
children: [12,16],
parentIndex: 0, // Index of parent list item
disabled: false // false by default, disables click event listeners for disabled list items
depth: 2,
children: [13,14,15],
parentIndex: 11,
disabled: false
**Why use an Array?**

First off, it's [faster](https://medium.com/@fiffty/things-i-learned-while-trying-to-make-a-fast-treeview-in-react-e3b23cd4ab74#.7pw9t9943). But unless you're rendering hundreds and hundreds of list items, speed wouldn't be your concern.

Apart from that, it comes from personal preference. I found it to be easier to...
github  programming  github-starred-to-pinboard 
7 weeks ago
websocat: Command-line client for WebSockets, like netcat (or curl) for ws:// with advanced socat-like functions
Github repo
Name: websocat
Tagline: Command-line client for WebSockets, like netcat (or curl) for ws:// with advanced socat-like functions
Rust = 231445 bytes
Shell = 3810 bytes

# websocat
Netcat, curl and socat for [WebSockets](https://en.wikipedia.org/wiki/WebSocket).

[![Build Status](https://travis-ci.org/vi/websocat.svg?branch=master)](https://travis-ci.org/vi/websocat)

## Examples

### Connect to public echo server

$ websocat ws://echo.websocket.org

### Serve and connect

A$ websocat -s 1234
Listening on ws://

B$ websocat ws://

### Open a tab in Chromium using remote debugging.

$ chromium --remote-debugging-port=9222&
$ curl -sg | grep webSocketDebuggerUrl | cut -d'"' -f4 | head -1
$ echo 'Page.navigate {"url":"https://example.com"}' | websocat -n1 --jsonrpc ws://


### Proxy TCP connections to WebSocket connections and back.

$ websocat --oneshot -b ws-l: tcp:
$ websocat --oneshot -b tcp-l: ws://
$ nc 1236
SSH-2.0-OpenSSH_7.4p1 Debian-10+deb9u3
Protocol mismatch.

### Broadcast all messages between connected WebSocket clients

A$ websocat -t ws-l: broadcast:mirror:
B$ websocat ws://
C$ websocat ws://

See [moreexamples.md](./moreexamples.md) for further examples.

## Features

* Connecting to and serving WebSockets from command line.
* Executing external program and making it communitate to WebSocket using stdin/stdout.
* Text and binary modes, converting between lines (or null-terminated records) and messages.
* Inetd mode, UNIX sockets (including abstract namesaced on Linux).
* Integration with Nginx using TCP or UNIX sockets.
* Directly using unathenticated SOCKS5 servers for connecting to WebSockets and listening WebSocket connection.
* Auto-reconnect and connection-reuse modes.
* Linux, Windows and Mac support, with [pre-built executables][releases].
* Low-level WebSocket clients and servers with overridable underlying transport connection, e.g. calling external program to serve as a transport for websocat (for SSL, proxying, etc.).
* Buildable by rust starting from v1.23.0.


# Installation

There are multiple options for installing WebSocat. From easy to hard:

* If you're on Linux Debian or Ubuntu (or other dpkg-based), try downloading a pre-build deb package from [GitHub releases][releases] and install from GUI or with command...
github  programming  github-starred-to-pinboard 
7 weeks ago
react-native-navigation-v2: Up and running with React Native Navigation - V2 - by Wix
Github repo
Name: react-native-navigation-v2
Tagline: Up and running with React Native Navigation - V2 - by Wix
JavaScript = 9506 bytes
Objective-C = 4382 bytes
Python = 1732 bytes
Java = 1495 bytes

# React Native Navigation (V2) by Wix - Getting Started (Part 1)

This repo goes along with the Medium post [React Native Navigation (V2) by Wix - Getting Started](https://medium.com/@dabit3/react-native-navigation-v2-by-wix-getting-started-7d647e944132)


For part 2, click [here](https://github.com/dabit3/react-native-navigation-v2/tree/Part2).

## Getting started

1. Clone this repo

git clone https://github.com/dabit3/react-native-navigation-v2.git

2. Change into the directory

cd react-native-navigation-v2

3 Install the dependencies

# or
npm install

4. Run the project

react-native run-ios
# or
react-native run-android
github  programming  github-starred-to-pinboard 
7 weeks ago
percy: A modular toolkit for building isomorphic web apps with Rust + WebAssembly
Github repo
Name: percy
Tagline: A modular toolkit for building isomorphic web apps with Rust + WebAssembly
Homepage: https://chinedufn.github.io/percy/
Rust = 60374 bytes
Dockerfile = 2054 bytes
Shell = 181 bytes

Percy [![Build Status](https://travis-ci.org/chinedufn/percy.svg?branch=master)](https://travis-ci.org/chinedufn/percy)

> A modular toolkit for building [isomorphic web apps][isomorphic-web-apps] with Rust + WebAssembly

## The Percy Book

[The Percy book](https://chinedufn.github.io/percy/)

## Live Demo

[View the isomorphic web app example live](https://percy-isomorphic.now.sh/?init=42) with a query string! :wink:


## What is an isomorphic web app?
[isomorphic-web-apps]: #isomorphic-web-apps

An isomorphic web application allows the same application code (in our case Rust code) to be run on both the server-side and the client-side (usually a web browser).

In a browser our application renders to an `HtmlElement`, and on the server our application renders to a `String`.

## API Documentation

- [virtual-dom-rs API docs](https://chinedufn.github.io/percy/api/virtual_dom_rs/macro.html.html)

- [css-rs-macro API docs](https://chinedufn.github.io/percy/api/css_rs_macro)

## Getting Started

For an example of an isomorphic web app in Rust check out the [isomorphic example](examples/isomorphic) or
view [the isomorphic web app example live.](https://percy-isomorphic.now.sh/)

For more on the `html!` macro see [html macro](virtual-dom-rs/src/html_macro.rs)


extern crate virtual_dom_rs;

extern crate css_rs_macro;
use css_rs_macro::css;

static SOME_COMPONENT_CSS: &'static str = css! {"
:host {
font-size: 30px;
font-weight: bold;

:host > span {
color: blue;

fn main () {
let count = Rc::new(Cell::new(0));

let count_clone = Rc::clone(count);

let html = html! {
<div id="hello-world", class=*SOME_COMPONENT_CSS,>
<span>{ "Hey :)" }</span>
!onclick=|| { count_clone.set(count_clone.get() + 1); },
// CSS in Rust isn't required. You can use regular old
/* classes just fine! */
class="btn-bs4 btn-bs4-success",
{ "Click Me!" }

println!("{}", html.to_string());

## Examples

- [Isomorphic web app](examples/isomorphic)

- [CSS in Rust](examples/css-in-rust)

- [Unit Testing View Components](examples/unit-testing-components)

- [Open an Issue or PR if you have an idea for a useful example!](https://github.com/chinedufn/percy/issues)

## Contributing

Please open issues / PRs explaining your intended use case and let's see if we should or shouldn't make `percy` support it!

Also feel free to open issues and PRs with any questions / thoughts that you have!

## To Test

To run all of the Rust unit tests, Rust integration tests, and Node.js + WebAssembly tests...
github  programming  github-starred-to-pinboard 
7 weeks ago
recast: JavaScript syntax tree transformer, nondestructive pretty-printer, and automatic source map generator
Github repo
Name: recast
Tagline: JavaScript syntax tree transformer, nondestructive pretty-printer, and automatic source map generator
JavaScript = 394388 bytes
Shell = 669 bytes

# recast, _v_. [![Build Status](https://travis-ci.org/benjamn/recast.svg?branch=master)](https://travis-ci.org/benjamn/recast) [![Join the chat at https://gitter.im/benjamn/recast](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/benjamn/recast?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [![Greenkeeper badge](https://badges.greenkeeper.io/benjamn/recast.svg)](https://greenkeeper.io/)

1. to give (a metal object) a different form by melting it down and reshaping it.
1. to form, fashion, or arrange again.
1. to remodel or reconstruct (a literary work, document, sentence, etc.).
1. to supply (a theater or opera work) with a new cast.


From NPM:

npm install recast

From GitHub:

cd path/to/node_modules
git clone git://github.com/benjamn/recast.git
cd recast
npm install .


In less poetic terms, Recast exposes two essential interfaces, one for parsing JavaScript code (`require("recast").parse`) and the other for reprinting modified syntax trees (`require("recast").print`).

Here's a simple but non-trivial example of how you might use `.parse` and `.print`:
var recast = require("recast");

// Let's turn this function declaration into a variable declaration.
var code = [
"function add(a, b) {",
" return a +",
" // Weird formatting, huh?",
" b;",

// Parse the code using an interface similar to require("esprima").parse.
var ast = recast.parse(code);
Now do *whatever* you want to `ast`. Really, anything at all!

See [ast-types](https://github.com/benjamn/ast-types) (especially the [def/core.js](https://github.com/benjamn/ast-types/blob/master/def/core.js)) module for a thorough overview of the `ast` api.
// Grab a reference to the function declaration we just parsed.
var add = ast.program.body[0];

// Make sure it's a FunctionDeclaration (optional).
var n = recast.types.namedTypes;

// If you choose to use recast.builders to construct new AST nodes, all builder
// arguments will be dynamically type-checked against the Mozilla Parser API.
var b = recast.types.builders;

// This kind of manipulation should seem familiar if you've used Esprima or the
// Mozilla Parser API before.
ast.program.body[0] = b.variableDeclaration("var", [
b.variableDeclarator(add.id, b.functionExpression(
null, // Anonymize the function expression.

// Just for fun, because addition is commutative:
When you finish manipulating the AST, let `recast.print` work its magic:
var output = recast.print(ast).code;
The `output` string now looks exactly like this, weird formatting and all:
var add...
github  programming  github-starred-to-pinboard 
7 weeks ago
isolated-scroll: Prevent scoll events from bubbling up to parent elements
Github repo
Name: isolated-scroll
Tagline: Prevent scoll events from bubbling up to parent elements
HTML = 5857 bytes
JavaScript = 1858 bytes

# isolated-scroll

Prevent scroll events from bubbling up to parent elements — [View demo](https://markdalgleish.github.io/isolated-scroll).

$ npm install --save isolated-scroll

## Usage

const isolatedScroll = require('isolated-scroll');

// Isolate scrolling of selected element:
const unbindHandlers = isolatedScroll(element);

// Remove isolated scroll behaviour:

## Todo

- Add tests.

## License

github  programming  github-starred-to-pinboard 
7 weeks ago
Front-End-Performance-Checklist: 🎮 The only Front-End Performance Checklist that runs faster than the others
Github repo
Name: Front-End-Performance-Checklist
Tagline: 🎮 The only Front-End Performance Checklist that runs faster than the others
Homepage: https://frontendchecklist.io(soon on)

<h1 align="center">
<a href="https://github.com/thedaviddias/Front-End-Performance-Checklist"><img src="https://raw.githubusercontent.com/thedaviddias/Front-End-Performance-Checklist/master/images/logo-front-end-performance-checklist.jpg" alt="Front-End Performance Checklist" width="170"></a>
  Front-End Performance Checklist

<h4 align="center">🎮 The only Front-End Performance Checklist that runs faster than the others.</h4>
<p align="center">One simple rule: "Design and code with performance in mind"</p>

<p align="center">
  <a href="http://makeapullrequest.com">
    <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square" alt="PRs Welcome">
  <a href="https://discord.gg/btHQRkm">
    <img src="https://img.shields.io/badge/chat-on_discord-4837E2.svg?style=flat-square" alt="Discord">
    <a href="https://opensource.org/licenses/MIT">
    <img src="https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square" alt="Licence MIT">

<p align="center">
  <a href="#how-to-use">How To Use</a> • <a href="#contributing">Contributing</a> • <a href="http://feedback.frontendchecklist.io/">Roadmap</a> • <a href="https://www.producthunt.com/posts/front-end-performance-checklist">Product Hunt</a>

<p align="center">
<a href="https://github.com/JohnsenZhou/Front-End-Performance-Checklist">🇨🇳</a>
<a href="https://github.com/WilliamDASILVA/Front-End-Performance-Checklist">🇫🇷</a>
<a href="https://github.com/ParkSB/Front-End-Performance-Checklist">🇰🇷</a>
<a href="https://github.com/fernandofawkes/Front-End-Performance-Checklist">🇵🇹</a>
<a href="https://github.com/lex111/Front-End-Performance-Checklist">🇷🇺</a>

<p align="center">
<span>Other Checklists:</span>
🗂 <a href="https://github.com/thedaviddias/Front-End-Checklist#---------front-end-checklist-">Front-End Checklist</a> • 💎 <a href="https://github.com/thedaviddias/Front-End-Design-Checklist#front-end-design-checklist">Front-End Design Checklist</a>

## Table of Contents

1. **[HTML](#html)**
2. **[CSS](#css)**
3. **[Fonts](#fonts)**
4. **[Images](#images)**
5. **[JavaScript](#javascript)**
6. **[Server](#server) (in progress)**
7. **[JS Frameworks](#performances-and-js-frameworks) (in progress)**

github  programming  github-starred-to-pinboard 
7 weeks ago
netflux: JavaScript client and server side transport API based on WebRTC & WebSocket
Github repo
Name: netflux
Tagline: JavaScript client and server side transport API based on WebRTC & WebSocket
Homepage: https://coast-team.github.io/netflux
TypeScript = 237467 bytes
JavaScript = 98776 bytes
CSS = 39 bytes

# Netflux

![Netflux logo][logo]

Isomorphic Javascript **peer to peer** transport API for client and server.

Secure and fault tolerant full mesh peer to peer network based on **RTCDataChannel** and **WebSocket**.

Send/receive **String** and **Uint8Array** data types.

Documentation: <https://coast-team.github.io/netflux>


[![Test Coverage](https://api.codeclimate.com/v1/badges/65c5d6308e7e58edd7b0/test_coverage)](https://codeclimate.com/github/coast-team/netflux/test_coverage)

[![Conventional Changelog](https://img.shields.io/badge/changelog-conventional-brightgreen.svg?)](http://conventional-changelog.github.io)

![Netflux example][netflux_example]

## Features

- Peer to peer full mesh network tolerant to connection failures.
- Same API for clients (Chrome, Firefox) and servers (NodeJS).
- Send private or broadcast messages with [String][string], [Uint8Array][uint8array] data types.
- Send large amounts of data (over the limit of ~16kb used in RTCDataChannel).
- Automatic rejoin the group when connection lost.
- Hide the connection nature ( [WebSocket][websocket] or [RTCDataChannel][rtcdatachannel]) from API consumer.
- All connections are encrypted.
- Full control over WebRTC servers: Signaling, STUN and TURN.
- Deploy your own Signaling server ([Sigver][sigver]) or use the one provided by default.
- Configure STUN and TURN servers.
- Small Signaling server payload.
- Signaling server is only used to establish connection between two peers, no user data is passing through it.
- TypeScript declaration files are included.
- Simple and familiar API usage.
- Multiple bundles to suit your workflow:
- For NodeJS
- `dist/netflux.node.es5.cjs.js` commonjs format, es5 code (see _package.json#main_).
- `dist/netflux.node.es5.esm.js` ES module format, es5 code (see _package.json#module_).
- For browsers
- `dist/netflux.browser.es5.umd.js` UMD format, es5 code
- `dist/netflux.browser.es5.esm.js` ES module format, es5 code (see...
github  programming  github-starred-to-pinboard 
7 weeks ago
Publii: Publii is a desktop-based CMS for Windows and Mac that makes creating static websites fast and hassle-free, even for beginners.
Github repo
Name: Publii
Tagline: Publii is a desktop-based CMS for Windows and Mac that makes creating static websites fast and hassle-free, even for beginners.
Homepage: https://getpublii.com
HTML = 1967791 bytes
JavaScript = 956625 bytes
Vue = 665993 bytes
CSS = 547489 bytes
Inno Setup = 1370 bytes
PLpgSQL = 1010 bytes
Shell = 135 bytes

# Publii - Static-Site CMS

[![GPLv3 license](https://img.shields.io/badge/License-GPLv3-blue.svg)](https://github.com/GetPublii/Publii/blob/master/LICENSE)
[![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://github.com/GetPublii/Publii/graphs/commit-activity) [![OpenCollective](https://opencollective.com/publii/backers/badge.svg)](https://opencollective.com/publii/) ![Open Source Love svg1](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)

[Publii](https://getpublii.com/) is a desktop-based CMS for Windows and Mac that makes creating static websites fast
and hassle-free, even for beginners.

**Current version: 0.29.1 (build 10999)**

## Why Publii?
Unlike static-site generators that are often unwieldy and difficult to use, Publii provides an
easy-to-understand UI much like server-based CMSs such as WordPress or Joomla!, where users
can create posts and other site content, and style their site using a variety of built-in themes and
options. Users can enjoy the benefits of a super-fast and secure static website, with all the
convenience that a CMS provides.

What makes Publii even more unique is that the app runs locally on your desktop rather
than on the site&#39;s server. Available for both Windows and Mac, once the app has been installed
you can create a site in minutes, even without internet access; since Publii is a desktop app you
can create, update and modify your site offline, then upload the site changes to your server at
the click of a button. Publii supports multiple upload options, including standard HTTP/HTTPS
servers, Netlify, Amazon S3, GitHub Pages and Google Cloud or SFTP.

**Download installer:** [Publii (.exe .dmg)](https://getpublii.com/download/)

![Publii Open Source Static CMS](https://getpublii.com//publii-static-cms.svg)

## Installation
### Required Software

For app build you will need the following software installed:

* **node.js** (8.*)
* **npm (>= 5.*)**
* **python** (>= 2.5.0 && < 3.0.0)
* **electron** (in version used by Publii), **electron-packager**, **node-gyp** and **gulp** node.js modules installed globally

Only for Windows:

* `npm install --global --production windows-build-tools`

Only for macOS:

* Install XCode

### Build Process

In the root project directory run:

npm install
cd app
npm install
cd ..
npm run dev

When the files are compiled run:

gulp prepare-editor-css
Then create the **app/dist/vendor** catalog and copy the following catalogs to this newly created **vendor** catalog:

- app/src/helpers/vendor/jquery
- app/src/helpers/vendor/tinymce

Now you can run the Publii app:

npm run build
Please remember...
github  programming  github-starred-to-pinboard 
7 weeks ago
nodedock: 📦🚢 Docker Node.js development environment
Github repo
Name: nodedock
Tagline: 📦🚢 Docker Node.js development environment
Homepage: https://nodedock.io/
Dockerfile = 19635 bytes
Shell = 11515 bytes

# Nodedock <a href="https://travis-ci.org/nodedock/nodedock"><img src="https://travis-ci.org/nodedock/nodedock.svg?branch=master" alt="Build status"></a>

Nodedock is a community-driven project to create the best Docker Node development environment.

<p align="center">
<img alt="Node + Docker" src="https://raw.githubusercontent.com/nodedock/nodedock/master/docs/node-docker.png" />

## Goal

I'm an ex-PHP developer, and I've used to use Laradock and similar solutions a lot. However, there's no close thing in NodeJS ecosystem (or at least I didn't find it). So, I decided to build a solution based on Laradock, but for NodeJS. This is how Nodedock was born.

## Check it out on example project

Just hit in a terminal:

cp env-example .env
APP_CODE_PATH_HOST=./examples/simple/ docker-compose up -d node nginx

Open to get a greeting from an example project :)

You can check the logs using `./logs.sh` command to see what's going on during the project startup.

See other examples [here](./examples)

## Quick Start

You need to have a node project with `package.json` with `start` script definition as `node` container will run `npm start` command after start up.

git submodule add https://github.com/nodedock/nodedock.git
cp nodedock/env-example nodedock/.env
cd nodedock/
docker-compose up -d nginx node workspace
docker-compose logs -f

The last one is optional.

## Alternative Commands

You can also declare the list of services you'd like to run using `NODEDOCK_SERVICES` variable in `.env` (you can create your own `.env` by copying `env-example` file).

After that, you'll be able to use `start.sh`, `stop.sh`, `restart.sh` and `logs.sh` scripts which are located in the root directory of nodedock.

## Documentation

Available on project's website [nodedock.io](https://nodedock.io)

## Working with Documentation

You'll need [Docsify](https://docsify.js.org/):

yarn global add docsify-cli

After that, you can view docs by running `docsify serve ./docs` and visiting `http://localhost:3000`

## Based on Laradock

This project is based on awesome [Laradock](https://github.com/laradock/laradock) ([contributors](https://github.com/laradock/laradock/graphs/contributors))


github  programming  github-starred-to-pinboard 
7 weeks ago
robot-shop: Sample microservices application for playing with
Github repo
Name: robot-shop
Tagline: Sample microservices application for playing with
Homepage: http://instana.com/
JavaScript = 52379 bytes
HTML = 11842 bytes
Java = 10457 bytes
Shell = 8136 bytes
PHP = 7944 bytes
Python = 6860 bytes
Go = 4878 bytes
CSS = 3156 bytes
Dockerfile = 2855 bytes

# Sample Microservice Application

Stan's Robot Shop is a sample microservice application you can use as a sandbox to test and learn containerised application orchestration and monitoring techniques. It is not intended to be a comprehensive reference example of how to write a microservices application, although you will better understand some of those concepts by playing with Stan's Robot Shop. To be clear, the error handling is patchy and there is not any security built into the application.

You can get more detailed information from my [blog post](https://www.instana.com/blog/stans-robot-shop-sample-microservice-application/) about this sample microservice application.

This sample microservice application has been built using these technologies:
- NodeJS ([Express](http://expressjs.com/))
- Java ([Spark Java](http://sparkjava.com/))
- Python ([Flask](http://flask.pocoo.org))
- Golang
- PHP (Apache)
- MongoDB
- Redis
- MySQL ([Maxmind](http://www.maxmind.com) data)
- RabbitMQ
- Nginx
- AngularJS (1.x)

The various services in the sample application already include all required Instana components installed and configured. The Instana components provide automatic instrumentation for complete end to end [tracing](https://docs.instana.io/core_concepts/tracing/), as well as complete visibility into time series metrics for all the technologies.

To see the application performance results in the Instana dashboard, you will first need an Instana account. Don't worry a [trial account](https://instana.com/trial?utm_source=github&utm_medium=robot_shop) is free.

## Build from Source
To optionally build from source (you will need a newish version of Docker to do this) use Docker Compose. Optionally edit the *.env* file to specify an alternative image registry and version tag; see the official [documentation](https://docs.docker.com/compose/env-file/) for more information.

$ docker-compose build

If you modified the *.env* file and changed the image registry, you may need to push the images to that registry

$ docker-compose push

## Run Locally
You can run it locally for testing.

If you did not build from source, don't worry all the images are on Docker Hub. Just pull down those images first using:

$ docker-compose pull

Fire up Stan's Robot Shop with:

$ docker-compose up

If you are running it locally on a Linux host you can also run the Instana [agent](https://docs.instana.io/quick_start/agent_setup/container/docker/) locally, unfortunately the agent is currently not supported on Mac.

## Marathon / DCOS

The manifests for robotshop are in the *DCOS/* directory. These manifests were built using a fresh install of DCOS 1.11.0. They should work on a vanilla HA or single instance install.

You may install Instana via the DCOS package manager, instructions are here: https://github.com/dcos/examples/tree/master/instana-agent/1.9

## Kubernetes
The Docker container images are all available on [Docker Hub](https://hub.docker.com/u/robotshop/). The deployment and...
github  programming  github-starred-to-pinboard 
7 weeks ago
gatsby-plugin-ipfs: Adds support for deploying Gatsby to IPFS by ensuring that assets are relative
Github repo
Name: gatsby-plugin-ipfs
Tagline: Adds support for deploying Gatsby to IPFS by ensuring that assets are relative
JavaScript = 2794 bytes

# gatsby-plugin-ipfs

[![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url] [![Dependency status][david-dm-image]][david-dm-url] [![Dev Dependency status][david-dm-dev-image]][david-dm-dev-url] [![Greenkeeper badge][greenkeeper-image]][greenkeeper-url]


Adds support for deploying [Gatsby](https://www.gatsbyjs.org/) websites to [IPFS](https://ipfs.io/) by ensuring that assets are relative.

## Installation

$ npm install --save gatsby-plugin-ipfs

## Usage

Set `prefixPath` to `.` and include the plugin in your `gatsby-config.js` file:

module.exports = {
pathPrefix: '.',
plugins: [

And now, simply build the project with `npm run build -- --prefix-paths`.

## But how?

It turns out the Gatsby doesn't support relative paths. But I didn't gave up and came up with smart and ugly hacks to do so:

- Adds a postbuild step that iterates over html & assets files and transforms absolute to relative paths
- Sets up the [`<base>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) tag to be `/ipfs/xxxx` or `/ipns/xxxx` according to the `window.location` so that relative paths work correctly
- Adds runtime code that sets `basename` of the [`history`](https://github.com/ReactTraining/history) to `/ipfs/xxxx/` or `/ipns/xxxx/` according to the `window.location`
- Adds runtime code that wraps the Gatsby's loader `getResourcesForPathname` to exclude `/ipfs/xxxx` or `/ipns/xxxx` from `paths`

## License

[MIT License](http://opensource.org/licenses/MIT)
github  programming  github-starred-to-pinboard 
7 weeks ago
react-simple-img: 🌅 React lazy load images with IntersectionObserver API
Github repo
Name: react-simple-img
Tagline: 🌅 React lazy load images with IntersectionObserver API
Homepage: https://react-simple-img.herokuapp.com/
JavaScript = 32198 bytes
HTML = 1946 bytes
CSS = 481 bytes

<p align="center">
<img width="675" src="https://raw.githubusercontent.com/bluebill1049/react-simple-img/master/example/src/logo.png" alt="React Simple Img Logo - Animated lazy loading - on demand" />

[![npm downloads](https://img.shields.io/npm/dm/react-simple-img.svg?style=flat-square)](https://www.npmjs.com/package/react-simple-img)

> **Smart react image with IntersectionObserver API and animations** :clap:

🤔 Why this package?

* Speed up initial page loads by loading only images above the fold
* Responsive with placeholders and animations
* Smart download logic using [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
* Simple usage and tiny size

## Install

yarn add react-simple-img || npm install react-simple-img

## Example

<p align="center">
<a href="https://react-simple-img.herokuapp.com/" target="_blank">
<img width="600" src="https://raw.githubusercontent.com/bluebill1049/react-simple-img/master/example/src/example.gif" alt="Logo" />

Navigate into `example` folder and install

yarn && yarn start || npm install && npm run start

😍 <a href="https://react-simple-img.herokuapp.com/" target="_blank">Check it out.</a>

**Tip for the above effect**

To generate svg placeholder, please install [SQIP](https://github.com/technopagan/sqip/) to generate placeholders.

## Quick start

import { SimpleImg, initSimpleImg } from 'react-simple-img';

initSimpleImg(); // run once at your root component or at file which calls `ReactDOM.render`

export default () => <SimpleImg height={500} src="your image path" />;

## API

#### 🔗 `initSimpleImg([config])` optional

This function will set up **global** intersection observer and watch all `<SimpleImg />` appear in the viewport through your
entire app


* **config**: (Object) this argument is optional

- [root]: The element that is used as the viewport for checking
visiblity of the target. Must be the ancestor of the target. Defaults
to the browser viewport if not specified or if null.

- [rootMargin]: Margin around the root. Can have values similar to the
CSS margin property, e.g. "10px 20px 30px 40px" (top, right, bottom,
left). If the root element is specified, the values can be
percentages. This set of values serves to grow or shrink each side of
the root element's bounding box before computing intersections.
Defaults to all zeros.

github  programming  github-starred-to-pinboard 
7 weeks ago
react-native-particles: Declarative Particle System for React Native
Github repo
Name: react-native-particles
Tagline: Declarative Particle System for React Native
JavaScript = 34916 bytes
Objective-C = 3900 bytes
Python = 1724 bytes
Java = 1402 bytes

## react-native-particles
[![npm version](https://badge.fury.io/js/react-native-particles.svg)](https://badge.fury.io/js/react-native-particles)

*Anything can be a particle!*

Declarative particle system for react native. Works on iOS and Android. It uses `Animated` api and `useNativeDriver:true` to get 60 FPS particles animation

## Add it to your project

1. Run `npm install react-native-particles --save`
2. `import { Emitter } from 'react-native-particles'`

## Demo


## Basic usage

import { Emitter } from 'react-native-particles';

const App = React.createClass({
render() {
return (
fromPosition={{ x: 200, y: 200 }}

## Examples

## Props

### Emitter

Basically, the `children` of emmiter is clonned and transformed into a particle.

- **`numberOfParticles`** _(number)_ - The total of particles to be emitted
- **`interval`** _(number)_ - Interval between emitting a new bunch of particles
- **`fromPosition`** _(VectorType | (() => VectorType))_ - The position from where the particles should be generated
- **`emissionRate`** _(number)_ - Number of particles to be be emitted on each cycle
- **`particleLife`** _(number)_ - The particle life time (ms)
- **`direction`** _(number)_ - The direction angle of the particle (in degrees)
- **`spread`** _(number)_ - The spread angle where particles are allowed to be rendered (in degrees)
- **`speed`** _(number)_ - The speed of each particle
- **`gravity`** _(number)_ - Gravity force to be applied to the particle movement
- **`segments`** _(number)_ - number of steps the animation will be divided ( more segments == more precise animation == slow performance)
- **`width`** _(number)_ - Width of the emitter area
- **`height`** _(number)_ - Height of the emitter area
- **`autoStart`** _(boolean)_ - Start emitting particles right after initialization
- **`style`** _(Object)_ - Style of the container view
- **`children`** _(ReactElement)_ - Particle content

## Contribution
**Issues** are welcome. Please add a screenshot of bug and code snippet. Quickest way to solve issue is to reproduce it on one of the examples.

**Pull requests** are welcome. If you want to change API or making something big better to create issue and discuss it first. Before submiting PR please run ```prettier```.


**MIT Licensed**
github  programming  github-starred-to-pinboard 
7 weeks ago
react-site-nav: A kick ass site menu powered by styled components inspired by Stripe.
Github repo
Name: react-site-nav
Tagline: A kick ass site menu powered by styled components inspired by Stripe.
JavaScript = 36107 bytes

<p align="center">
<img src="logo.jpg" width="390" />

[![npm version](https://img.shields.io/npm/v/react-site-nav.svg?style=flat-square)](https://www.npmjs.com/package/react-site-nav) [![npm downloads](https://img.shields.io/npm/dm/react-site-nav.svg?style=flat-square)](https://www.npmjs.com/package/react-site-nav) [![npm](https://img.shields.io/npm/dt/react-site-nav.svg?style=flat-square)](https://www.npmjs.com/package/react-site-nav) [![npm](https://img.shields.io/npm/l/react-site-nav.svg?style=flat-square)](https://www.npmjs.com/package/react-site-nav)

> **A beautiful site navigation bar to be proud of. Powered by styled components inspired by stripe.com** :tada:

<b>Check out the live preview <a href="https://react-site-nav.now.sh" target="_blank">here</a> (powered by <a href="https://zeit.co/now">now</a>).</b>


Your search for the perfect site navigation bar ends here. Finally a world class navigation bar
you can use straight out of the box. Why use this package?
* Beautiful animations
* Automatic viewport detection and correction so flyouts never get rendered off screen
* Completely customisable
* Powered by css grid, css animations and styled components

No more compromises. Welcome to react-site-nav.

## Installation

yarn add react-site-nav

## Quickstart

import React from 'react';
import {Switch, Link, Route} from 'react-router-dom';
import SiteNav, {ContentGroup} from 'react-site-nav'; // 1. Do this
import Home from './home';
import MyStory from './myStory';

export default () =>
{/* 2. Add SiteNav with ContentGroup as children */}
<ContentGroup title="About" height="200">
{/* 3. You can add anything in a ContentGroup */}
{/* react router link! */}
<li><Link to="/my-story">My Story</Link></li>
<li>Another list item</li>
<ContentGroup title="Contact" height="200">
Free text followed by some links.<br/>
<a href="mailto:yusinto@gmail.com">Email</a><br/>
<a href="https://github.com/yusinto">Github</a>
<Route exact path="/" component={Home}/>
<Route path="/my-story" component={MyStory}/>


Check the two [examples](https://github.com/yusinto/react-site-nav/tree/master/examples) for a fully working spa with
react router, server side rendering and hot reload.

## Api
### SiteNav
The main react component that represents the site nav. The root container is a css grid so
most of the props below maps directly to this grid and should be self-explanatory. Place
ContentGroup components as children...
github  programming  github-starred-to-pinboard 
7 weeks ago
tuplerone: Tuples for JavaScript 🤷
Github repo
Name: tuplerone
Tagline: Tuples for JavaScript 🤷
TypeScript = 17227 bytes

# tuplerone

[![Dev Dependencies](https://david-dm.org/slikts/tuplerone/dev-status.svg)](https://david-dm.org/slikts/tuplerone?type=dev)


A tuple data structure implementation in JavaScript based on [ES2015 `WeakMap`][WeakMap].


[Tuples] are finite ordered sequences of values, and languages commonly implement tuples to allow grouping heterogenous data types and to provide immutability. JavaScript arrays can already include any types, but the purpose of having tuples in JavaScript is to simplify equality testing for groups of values and to use groups of values as keys in maps ([`Map`][Map], [`WeakMap`][WeakMap]).

This library is:
* tiny (a couple of kilobytes minified), with no dependencies,
* well-typed using TypeScript,
* fully covered by tests.

The tuple objects are:
* [frozen] – tuple object properties cannot be added, removed or changed,
* [array-like] – tuple members can be accessed by indexing, and there's a `length` property, but no `Array` prototype methods,
* [iterable] – tuple members can be iterated over using [`for-of`][for-of] loops or spread syntax.

There exists a [stage-1 proposal][composite] for adding a similar feature to tuples to the base language.

## Installation

npm install --save tuplerone

## Usage

import { tuple } from "tuplerone";

// Dummy objects
const a = Object("a");
const b = Object("b");
const c = Object("c");

// Simple equality testing using the identity operator
tuple(a, b, c) === tuple(a, b, c); // → true
tuple(a, b) === tuple(b, a); // → false

// Mapping a pair of values to a different value
const map = new Map();
map.set(tuple(a, b), 123).get(tuple(a, b)); // → 123

// Nesting tuples
tuple(a, tuple(b, c)) === tuple(a, tuple(b, c)); // → true

// Using primitive values
tuple(1, "a", a); // → Tuple(3) [1, "a", Object("a")]

// Indexing
tuple(a, b)[1]; // → Object("b")

// Checking arity
tuple(a, b).length; // → 2

// Failing to mutate
tuple(a, b)[0] = c; // throws an error

## Advantages

Tuples simplify deep equality testing and can replace functions like [`isEqual()`][isEqual] in lodash or having to stringify data to JSON to make it comparable, which can be difficult due to recursive references. Tuples can be compared efficiently, in constant time with the `===` identity operator.

This library uses a tree of [`WeakMap`][WeakMap] (for objects) or [`Map`][Map] (for primitives) maps. The average time complexity of the access operations of JavaScript maps is O(1), so the access speed isn't reduced with the number of tuples created.

github  programming  github-starred-to-pinboard 
7 weeks ago
react-video-renderer: Build custom video players effortless
Github repo
Name: react-video-renderer
Tagline: Build custom video players effortless
Homepage: https://zzarcon.github.io/react-video-renderer
TypeScript = 24372 bytes
HTML = 305 bytes

# react-video-renderer [![Build Status](https://travis-ci.org/zzarcon/react-video-renderer.svg?branch=master)](https://travis-ci.org/zzarcon/react-video-renderer)
> Build custom video players effortless

* Render props, get all video state passed down as props.
* Bidirectional flow to render and update the video state in a declarative way.
* No side effects out of the box, you just need to build the UI.
* Actions handling: play, pause, mute, unmute, navigate, etc
* Dependency free, [<2KB size](https://bundlephobia.com/result?p=react-video-renderer)
* Cross-browser support, no more browser hacks.

# Demo 🎩


# Installation 🚀

$ yarn add react-video-renderer

# Usage ⛏

> Render video state and communicate user interactions up when volume or time changes.

import Video from 'react-video-renderer';

<Video src="https://mysite.com/video.mp4">
{(video, state, actions) => (
<div>{state.currentTime} / {state.duration} / {state.buffered}</div>
<progress value={state.currentTime} max={state.duration} onChange={actions.navigate} />
<progress value={state.volume} max={1} onChange={actions.setVolume} />
<button onClick={actions.play}>Play</button>
<button onClick={actions.pause}>Pause</button>
<button onClick={actions.requestFullScreen}>Fullscreen</button>

<div align="center">
<img src="example/video-renderer-flow.png" alt="Logo" >

# Api 💅


interface Props {
src: string;
children: RenderCallback;
controls?: boolean;
autoPlay?: boolean;
preload?: string;

**render method**

type RenderCallback = (videoElement: ReactNode, state: VideoState, actions: VideoActions) => ReactNode;


interface VideoState {
status: 'playing' | 'paused' | 'errored';
currentTime: number;
volume: number;
duration: number;
buffered: number;
isMuted: boolean;
isLoading: boolean;
error?: MediaError | null;


interface VideoActions {
play: () => void;
pause: () => void;
navigate: (time: number) => void;
setVolume: (volume: number) => void;
requestFullscreen: () => void;
mute: () => void;
unmute: () => void;
toggleMute: () => void;

# Error handling 💥

> this is all you need to detect video errors

<Video src="some-error-video.mov">
{(video, state) => {
if (state.status === 'errored') {
github  programming  github-starred-to-pinboard 
7 weeks ago
taskbook: 📓 Tasks, boards & notes for the command-line habitat
Github repo
Name: taskbook
Tagline: 📓 Tasks, boards & notes for the command-line habitat
JavaScript = 29331 bytes

<h1 align="center">

<h4 align="center">
📓 Tasks, boards & notes for the command-line habitat

<div align="center">
<img alt="Boards" width="60%" src="media/header-boards.png"/>

<p align="center">
<a href="https://travis-ci.com/klauscfhq/taskbook">
<img alt="Build Status" src="https://travis-ci.com/klauscfhq/taskbook.svg?branch=master">

## Description

By utilizing a simple and minimal usage syntax, that requires a flat learning curve, taskbook enables you to effectively manage your tasks and notes across multiple boards from within your terminal. All data are written atomically to the storage in order to prevent corruptions, and are never shared with anyone or anything. Deleted items are automatically archived and can be inspected or restored at any moment.

Read this document in: [简体中文](https://github.com/klauscfhq/taskbook/blob/master/docs/readme.ZH.md), [Русский](https://github.com/klauscfhq/taskbook/blob/master/docs/readme.RU.md).

Visit the [contributing guidelines](https://github.com/klauscfhq/taskbook/blob/master/contributing.md#translating-documentation) to learn more on how to translate this document into more languages.

Come over to [Gitter](https://gitter.im/klauscfhq/taskbook) or [Twitter](https://twitter.com/klauscfhq) to share your thoughts on the project.

## Highlights

- Organize tasks & notes to boards
- Board & timeline views
- Priority & favorite mechanisms
- Search & filter items
- Archive & restore deleted items
- Lightweight & fast
- Data written atomically to storage
- Custom storage location
- Progress overview
- Simple & minimal usage syntax
- Update notifications
- Configurable through `~/.taskbook.json`
- Data stored in JSON file at `~/.taskbook/storage`

View highlights in a [taskbook board](https://raw.githubusercontent.com/klauscfhq/taskbook/master/media/highlights.png).

## Contents

- [Description](#description)
- [Highlights](#highlights)
- [Install](#install)
- [Usage](#usage)
- [Views](#views)
- [Configuration](#configuration)
- [Flight Manual](#flight-manual)
- [Development](#development)
- [Related](#related)
- [Team](#team)
- [License](#license)

## Install

### NPM

npm install --global taskbook

### Snapcraft

snap install taskbook
snap alias taskbook tb # set alias

**Note:** Due to the snap's strictly confined nature, both the storage & configuration files will be saved under the [`$SNAP_USER_DATA`](https://docs.snapcraft.io/reference/env) environment variable instead of the generic `$HOME` one.

## Usage

$ tb --help

$ tb [<options> ...]

none Display board view
--task, -t Create task
--note, -n Create note
--timeline, -i Display timeline view
github  programming  github-starred-to-pinboard 
7 weeks ago
react-stripe-store: roll your own ecommerce store! example:
Github repo
Name: react-stripe-store
Tagline: roll your own ecommerce store! example:
Homepage: https://shop.rachelbinx.com
JavaScript = 64705 bytes
HTML = 14952 bytes
CSS = 768 bytes

## React + Stripe Ecommerce Store Template

Artisanal hand-rolled e-commerce site.

Written in React, served up with Express, and integrated with [Stripe Dashboard](https://stripe.com/us/payments).

Uses [Material-UI](http://material-ui.com/) and [styled-components](https://www.styled-components.com/) for the design.

Site also includes a password-protected admin view, Nodemailer integration for sending order updates, and email templates built with Handlebars.

### Demo
[Check out this live demo!](https://shop.rachelbinx.com) - and yes, you can order any of those :)

### Quickstart
yarn install
yarn start
This will open a browser tab with the store running. The config file in `/src/assets/` will be running the store, and at first you should see one product. The `$Infinity - $-Infinity` price tag is notifying us that there is an error connecting to the Stripe account, which we hope would be true since we haven't set a stripe key or a stripe product ID yet!

### Store Config Philosophy

Individual stores are created via a config file. There are three example configs in `/src/assets/`. The config generally looks like:
"store_name": "The best little ecommerce site in Texas",
"store_slug": "react-stripe-store",
"api_key": {STRIPE_PUBLIC_KEY},
"colors": {
"primary": {
"main": "#FE8A00",
"dark": "#FD7300",
"contrastText": "#FFF"
"secondary": {
"main": "#00FFB4"
"products": [
"name": "Super Cool Product",
"url": "url-for-product",
"stripe_id": {STRIPE_PRODUCT_ID},
"description": "What a great product!",
"photos": ["photo1.jpg","photo2.jpg"],
"details": [
"These are details that get rendered as bullet points",
"Useful for short + sweet info"

Each product can also have an optional `variants` key for additional metadata to be saved for each product, rendered as a dropdown. This is for saving options without having to create individual SKUs in Stripe.
"variants": [
"name": "metadata",
{"label": "option 1"},
{"label": "option 2"}

Items in that config in all caps are sourced from Stripe. This project makes use of Stripe Dashboard to keep track of Product inventories, and SKUs (this allows Stripe to handle all payment info, reducing the risk of man-in-the-middle issues). On loading a product page, this site will ask Stripe for the SKUs associated with the given product ID.

Items added to the cart are saved via `localStorage`, which namespaces them according to the `store_slug`, such that you can run several stores at once and keep each purchase separate.

Images are expected to live in `/public/photos/{product.url}/{product.photos.name}`. The site will also add a CSS class on the body that is the store slug, for store-specific...
github  programming  github-starred-to-pinboard 
7 weeks ago
react-live: A production-focused playground for live editing React components
Github repo
Name: react-live
Tagline: A production-focused playground for live editing React components
Homepage: https://react-live.kitten.sh/
JavaScript = 24271 bytes
CSS = 1290 bytes
TypeScript = 743 bytes

<p align="center"><img src="https://raw.githubusercontent.com/philpl/react-live/master/docs/logo.gif" width=250></p>
<h2 align="center">React Live</h2>
<p align="center">
<strong>A production-focused playground for live editing React code</strong>
<a href="https://npmjs.com/package/react-live"><img src="https://img.shields.io/npm/dm/react-live.svg"></a>
<a href="https://npmjs.com/package/react-live"><img src="https://img.shields.io/npm/v/react-live.svg"></a>
<img src="http://img.badgesize.io/https://unpkg.com/react-live/dist/react-live.min.js?compression=gzip&label=gzip%20size">
<img src="http://img.badgesize.io/https://unpkg.com/react-live/dist/react-live.min.js?label=size">
<img src="https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20esm-green.svg">

**React Live** brings you the ability to render React components and present the user with editable
source code and live preview.
It supports server-side rendering and comes in a tiny bundle, thanks to Bublé and a Prism.js-based editor.

The library is structured modularly and lets you style its components as you wish and put them where you want.

## Usage

Install it with `npm install react-live` and try out this piece of JSX:

import {
} from 'react-live'

<LiveProvider code="<strong>Hello World!</strong>">
<LiveEditor />
<LiveError />
<LivePreview />

## Demo


## FAQ

### How does it work?

It takes your code and transpiles it through Bublé, while the code is displayed using Prism.js.
The transpiled code is then rendered in the preview component, which does a fake mount, if the code
is a component.

Easy peasy!

### What code can I use?

The code can be one of the following things:

- React elements, e.g. `<strong>Hello World!</strong>`
- React pure functional components, e.g. `() => <strong>Hello World!</strong>`
- React component classes

If you enable the `noInline` prop on your `LiveProvider`, you’ll be able to write imperative code,
and render one of the above things by calling `render`.

### How does the scope work?

The `scope` prop on the `LiveProvider` accepts additional globals. By default it injects `React` only, which
means that the user can use it in their code like this:

// ↓↓↓↓↓
class Example extends React.Component {
render() {
return <strong>Hello World!</strong>

But you can of course pass more things to this scope, that will be available as variables in the code. Here's an example using [styled components](https://github.com/styled-components/styled-components):

github  programming  github-starred-to-pinboard 
7 weeks ago
FiraCode: Monospaced font with programming ligatures
Github repo
Name: FiraCode
Tagline: Monospaced font with programming ligatures
Clojure = 6127 bytes
HTML = 1891 bytes
CSS = 1508 bytes
Shell = 562 bytes

## Fira Code: monospaced font with programming ligatures

<img src="http://s.tonsky.me/imgs/fira_code_logo.svg">

### Problem

Programmers use a lot of symbols, often encoded with several characters. For the human brain, sequences like `->`, `<=` or `:=` are single logical tokens, even if they take two or three characters on the screen. Your eye spends a non-zero amount of energy to scan, parse and join multiple characters into a single logical one. Ideally, all programming languages should be designed with full-fledged Unicode symbols for operators, but that’s not the case yet.

### Solution

#### [Download v1.205](https://github.com/tonsky/FiraCode/releases/download/1.205/FiraCode_1.205.zip) · [How to install](https://github.com/tonsky/FiraCode/wiki) · [Troubleshooting](https://github.com/tonsky/FiraCode/wiki#troubleshooting) · [News & updates](https://twitter.com/FiraCode)

<a href="https://patreon.com/tonsky" target="_blank"><img src="./fira_code_patreon.png"></a>

Fira Code is an extension of the Fira Mono font containing a set of ligatures for common programming multi-character combinations. This is just a font rendering feature: underlying code remains ASCII-compatible. This helps to read and understand code faster. For some frequent sequences like `..` or `//`, ligatures allow us to correct spacing.

<img src="./showcases/all_ligatures.png">

### Code examples


<img src="./showcases/ruby.png">


<img src="./showcases/javascript.png">


<img src="./showcases/php.png">


<img src="./showcases/erlang.png">


<img src="/showcases/elixir.png">


<img src="./showcases/go.png">


<img src="./showcases/livescript.png">


<img src="./showcases/clojure.png">


<img src="./showcases/swift.png">

### Terminal support

| Works | Doesn’t work |
| ------------------ | ------------------ |
| **Butterfly** | **Alacritty** |
| **Hyper.app** | **cmd.exe** |
| **iTerm 2** ([3.1+](https://gitlab.com/gnachman/iterm2/issues/3568#note_13118332)) | **Cmder** |
| **Kitty** | **ConEmu** |
| **Konsole** | **GNOME Terminal** |
| **mintty** ([2.8.3+](https://github.com/mintty/mintty/issues/601))| **mate-terminal** |
| **QTerminal** | **PuTTY** |
| **Terminal.app** | **rxvt** |
| **Termux** | **ZOC** (Windows) |
| **Token2Shell/MD** | **gtkterm, guake, LXTerminal, sakura, Terminator, xfce4-terminal,** and other libvte-based terminals ([bug report](https://bugzilla.gnome.org/show_bug.cgi?id=584160)) |
| **upterm** |
| **ZOC** (macOS) |

### Editor support

| Works |...
github  programming  github-starred-to-pinboard 
7 weeks ago
react-native-quickpicker: A simple Picker for react-native that works out of the box on both iOS and Android
Github repo
Name: react-native-quickpicker
Tagline: A simple Picker for react-native that works out of the box on both iOS and Android
JavaScript = 24557 bytes

# react-native-quickpicker

[![npm (scoped)](https://img.shields.io/npm/v/quick-picker.svg)](https://www.npmjs.com/package/quick-picker)

A picker built in JS for react-native/expo that works right out of the box.

## iOS Appearance

### `pickerType="normal"`
![Alt Text](https://github.com/Valiums/react-native-quickpicker/blob/master/assets/exemple.gif)
### `pickerType="date" && mode="datetime"`
![Alt Text](https://cdn.discordapp.com/attachments/172179439663316992/474246317749567498/android5.gif)

## Android Appearance

### `pickerType="normal"`
![Alt Text](https://cdn.discordapp.com/attachments/172179439663316992/474246292210712576/android4.gif)
### `pickerType="date" && mode="datetime"`
![Alt Text](https://cdn.discordapp.com/attachments/172179439663316992/474246232500469761/android3.gif)
## Why use this library?

The picker is one of the most common input component in mobile applications, but unfortunately most of the solutions require linking, meaning it won't be possible to use with Expo without ejecting. This one works perfectly in both Vanilla React Native and Expo.

## Installation

`npm i quick-picker --save`


`yarn add quick-picker`

## Usage Example

`At the root of your app (preferably but not imperatively), you want to have <QuickPicker />`

import React, { Component } from 'react';
import { View } from 'react-native';
import QuickPicker from 'quick-picker';

class App extends Component {
render() {
const content = null;
return (
<View style={styles.fill}>
<StatusBar />
<OtherFancyStuff />
<QuickPicker />

`Now if you want to open the Picker (that could be anywhere in your app's navigation), you must call QuickPicker.open({...})`


import Touchable from '@appandflow/touchable';
import QuickPicker from 'quick-picker';

export default class AnotherRandomComponent extends React.Component {
state = {
selectedLetter: null

_onPressText = () => {
const { selectedLetter } = this.state;
items: ['a', 'b', 'c'],
selectedValue: 'b', // this could be this.state.selectedLetter as well.
onValueChange: (selectedValueFromPicker) => this.setState({ selectedLetter: selectedValueFromPicker }),

render() {
return (
<View style={styles.container}>
<Touchable feedback="opacity" native={false} onPress={this._onPressText}>
<Text>Open up picker, selected letter: {this.state.selectedLetter}</Text>

`Now when the user will touch the button (<Touchable>) the Picker will open with the defined params in...
github  programming  github-starred-to-pinboard 
7 weeks ago
instant.io: 🚀 Streaming file transfer over WebTorrent (torrents on the web)
Github repo
Name: instant.io
Tagline: 🚀 Streaming file transfer over WebTorrent (torrents on the web)
Homepage: https://instant.io
JavaScript = 14635 bytes
HTML = 3781 bytes
CSS = 1467 bytes
Shell = 1254 bytes

<h1 align="center">

<a href="https://webtorrent.io"><img src="https://instant.io/logo.svg" alt="Instant.io" width="400"></a>

<h4 align="center">Streaming file transfer over WebTorrent (torrents on the web)</h4>

<p align="center">
<a href="https://travis-ci.org/webtorrent/instant.io"><img src="https://img.shields.io/travis/webtorrent/instant.io/master.svg" alt="travis"></a>
<a href="https://standardjs.com"><img src="https://img.shields.io/badge/code_style-standard-brightgreen.svg" alt="javascript style guide"></a>

Download/upload files using the [WebTorrent](http://webtorrent.io) protocol (BitTorrent
over WebRTC). This is a beta.

Powered by [WebTorrent](http://webtorrent.io), the first torrent client that works in the
browser without plugins. WebTorrent is powered by JavaScript and WebRTC. Supports Chrome,
Firefox, Opera (desktop and Android). Run <code>localStorage.debug = '*'</code> in the
console and refresh to get detailed log output.

## Install

If you just want to do file transfer on your site, or fetch/seed files over WebTorrent, then there's no need to run a copy of instant.io on your own server. Just use the WebTorrent script directly. You can learn more at https://webtorrent.io.

The client-side code that instant.io uses is [here](https://github.com/webtorrent/instant.io/blob/master/client/index.js).

### Run a copy of this site on your own server

To get a clone of https://instant.io running on your own server, follow these instructions.

Get the code:

git clone https://github.com/webtorrent/instant.io
cd instant.io
npm install

Modify the configuration options in [`config.js`](https://github.com/webtorrent/instant.io/blob/master/config.js) to set the IP/port you want the server to listen on.

Copy [`secret/index-sample.js`](https://github.com/webtorrent/instant.io/blob/master/secret/index-sample.js) to `secret/index.js` and set the Twilio API key if you want a [NAT traversal service](https://www.twilio.com/stun-turn) (to help peers connect when behind a firewall).

To start the server, run `npm start`. That should be it!

## Mirrors

- http://instant.rom1504.fr/
- https://torrent.partidopirata.org/
- https://instant-io.glitch.me/

## Tips

1. Create a shareable link by adding a torrent infohash or magnet link to the end
of the URL. For example: `https://instant.io#INFO_HASH` or `https://instant.io/#MAGNET_LINK`.

2. You can add multiple torrents in the same browser window.

## License

MIT. Copyright (c) [WebTorrent, LLC](https://webtorrent.io).
github  programming  github-starred-to-pinboard 
7 weeks ago
zii: Chain function calls using a prototype function z
Github repo
Name: zii
Tagline: Chain function calls using a prototype function z
JavaScript = 2326 bytes

# zii

**Chain function calls using a prototype function `.z()`**

Adds a function `z` to the Object prototype so that you can right-compose functions together. This is like the [proposed pipeline operator `|>`](https://github.com/tc39/proposal-pipeline-operator), but implemented in ES5.

**`value.z(first).z(second)` is the same as `second(first(value))`**

- 150 bytes small
- Works with RxJS 6+
- Works with Callbags
- Works with plain functions and numbers and strings
- Supports TypeScript

## Installation

npm install zii

## Usage

// Nothing else needed! This require will mutate the Object prototype

If you use TypeScript, then add this to your `tsconfig.json` file:

"types": [

## Examples

### RxJS

const {from} = require('rxjs')
const {map, filter} = require('rxjs/operators')

from([1, 2, 3, 4, 5])
.z(filter(x => x % 2 === 1))
.z(map(x => x * 10))
next: x => console.log(x)

### Callbags

const {fromIter, map, filter, forEach} = require('callbag-basics')

fromIter([1, 2, 3, 4, 5])
.z(filter(x => x % 2 === 1))
.z(map(x => x * 10))

### Simple JS

function doubleSay(str) {
return str + ', ' + str;
function capitalize(str) {
return str[0].toUpperCase() + str.substring(1);
function exclaim(str) {
return str + '!';

.z(console.log) // Hello, hello!

## License

github  programming  github-starred-to-pinboard 
7 weeks ago
ioredis: A robust, performance-focused and full-featured Redis client for Node.js.
Github repo
Name: ioredis
Tagline: A robust, performance-focused and full-featured Redis client for Node.js.
JavaScript = 245313 bytes
TypeScript = 21249 bytes
Shell = 674 bytes


[![Build Status](https://travis-ci.org/luin/ioredis.svg?branch=master)](https://travis-ci.org/luin/ioredis)
[![Test Coverage](https://codeclimate.com/github/luin/ioredis/badges/coverage.svg)](https://codeclimate.com/github/luin/ioredis)
[![Code Climate](https://codeclimate.com/github/luin/ioredis/badges/gpa.svg)](https://codeclimate.com/github/luin/ioredis)
[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
[![Join the chat at https://gitter.im/luin/ioredis](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/luin/ioredis?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

A robust, performance-focused and full-featured [Redis](http://redis.io) client for [Node.js](https://nodejs.org).

Supports Redis >= 2.6.12 and (Node.js >= 6).

# Features
ioredis is a robust, full-featured Redis client that is
used in the world's biggest online commerce company [Alibaba](http://www.alibaba.com/) and many other awesome companies.

0. Full-featured. It supports [Cluster](http://redis.io/topics/cluster-tutorial), [Sentinel](http://redis.io/topics/sentinel), [Pipelining](http://redis.io/topics/pipelining) and of course [Lua scripting](http://redis.io/commands/eval) & [Pub/Sub](http://redis.io/topics/pubsub) (with the support of binary messages).
0. High performance.
0. Delightful API. It works with Node callbacks and Native promises.
0. Transformation of command arguments and replies.
0. Transparent key prefixing.
0. Abstraction for Lua scripting, allowing you to define custom commands.
0. Support for binary data.
0. Support for TLS.
0. Support for offline queue and ready checking.
0. Support for ES6 types, such as `Map` and `Set`.
0. Support for GEO commands (Redis 3.2 Unstable).
0. Sophisticated error handling strategy.

# Links
* [API Documentation](API.md)
* [Changelog](Changelog.md)
* [Migrating from node_redis](https://github.com/luin/ioredis/wiki/Migrating-from-node_redis)
* [Error Handling](#error-handling)

## Become a Sponsor to Support ioredis's Development
Open source is hard and time-consuming. If you want to invest in ioredis's future you can become a sponsor and make us spend more time on this library's improvements and new features.

<a href="https://opencollective.com/ioredis"><img src="https://opencollective.com/ioredis/tiers/sponsor.svg?avatarHeight=36"></a>

Thank you for using ioredis :-)

<a href="https://itunes.apple.com/app/medis-gui-for-redis/id1063631769"><img align="right" src="medis.png" alt="Download on the App Store"></a>

### Advertisement

Looking for a Redis GUI manager for OS X, Windows and Linux? Here's...
github  programming  github-starred-to-pinboard 
7 weeks ago
aws-cdk: The AWS Cloud Development Kit is a framework for defining cloud infrastructure in code
Github repo
Name: aws-cdk
Tagline: The AWS Cloud Development Kit is a framework for defining cloud infrastructure in code
Homepage: https://awslabs.github.io/aws-cdk
TypeScript = 1994579 bytes
JavaScript = 55060 bytes
Shell = 23590 bytes
Python = 5724 bytes
Java = 4734 bytes
C# = 3138 bytes
Batchfile = 299 bytes

# AWS Cloud Development Kit (AWS CDK)

![Build Status](https://codebuild.us-east-1.amazonaws.com/badges?uuid=eyJlbmNyeXB0ZWREYXRhIjoiRUlEQk1UWVhQRDduSy9iWWtpa012bmJSU0t2aXpCeEtTT2VpWDhlVmxldVU0ZXBoSzRpdTk1cGNNTThUaUtYVU5BMVZnd1ZhT2FTMWZjNkZ0RE5hSlpNPSIsIml2UGFyYW1ldGVyU3BlYyI6IllIUjJNUEZKY3NqYnR6S3EiLCJtYXRlcmlhbFNldFNlcmlhbCI6MX0%3D&branch=master)
[![Build Status](https://travis-ci.org/awslabs/aws-cdk.svg?branch=master)](https://travis-ci.org/awslabs/aws-cdk)
[![Gitter chat](https://badges.gitter.im/gitterHQ/gitter.svg)](https://gitter.im/awslabs/aws-cdk)

The **AWS Cloud Development Kit (AWS CDK)** is an open-source software development
framework to define cloud infrastructure in code and provision it through AWS CloudFormation.
The CDK integrates fully with AWS services and offers a higher level object-oriented
abstraction to define AWS resources imperatively. Using the CDK’s library of
infrastructure [constructs], you can easily encapsulate AWS best practices in your
infrastructure definition and share it without worrying about boilerplate logic. The
CDK improves the end-to-end development experience because you get to use the power
of modern programming languages to define your AWS infrastructure in a predictable
and efficient manner. The CDK is currently available for Java, JavaScript, and

The CDK is currently in developer preview and we look forward to community feedback and collaboration!

[User Guide] |
[Getting Started] |
[API Reference](https://awslabs.github.io/aws-cdk/reference.html) |
[Getting Help](#getting-help)

![Example usage of CDK](screencast.gif)

Developers can use one of the supported programming languages to define reusable
cloud components called [constructs], which are composed together into
[stacks] and [apps].

The [AWS CDK Toolkit] is a command-line tool for interacting with
CDK apps. It allows developers to synthesize artifacts such as AWS
CloudFormation Templates, deploy stacks to development AWS accounts and "diff"
against a deployed stack to understand the impact of a code change.

The [AWS Construct Library] includes a module for each
AWS service with constructs that offer rich APIs that encapsulate the details of
how to use AWS. The AWS Construct Library aims to reduce the complexity and
glue-logic required when integrating various AWS services to achieve your goals
on AWS.

[constructs]: https://awslabs.github.io/aws-cdk/constructs.html
[stacks]: https://awslabs.github.io/aws-cdk/stacks.html
[apps]: https://awslabs.github.io/aws-cdk/apps.html
[User Guide]: https://awslabs.github.io/aws-cdk
[Getting Started]: https://awslabs.github.io/aws-cdk/getting-started.html
[AWS CDK Toolkit]: https://awslabs.github.io/aws-cdk/tools.html#command-line-toolkit-cdk
[AWS Construct Library]:...
github  programming  github-starred-to-pinboard 
7 weeks ago
custom-elements: A polyfill for HTML Custom Elements v1
Github repo
Name: custom-elements
Tagline: A polyfill for HTML Custom Elements v1
Homepage: https://www.webcomponents.org/polyfills
JavaScript = 492116 bytes
HTML = 273238 bytes
CSS = 1575 bytes

# Custom Elements (v1) Polyfill [![Build Status](https://travis-ci.org/webcomponents/custom-elements.svg?branch=master)](https://travis-ci.org/webcomponents/custom-elements)

A polyfill for the [custom elements](https://html.spec.whatwg.org/multipage/scripting.html#custom-elements)
v1 spec.

## Using

Include `custom-elements.min.js` at the beginning of your page, *before* any code that
manipulates the DOM:
<script src="custom-elements.min.js"></script>

## Developing

1. Install and build

npm install
npm run build
(Or, `npm i && gulp`, if [gulp](https://github.com/gulpjs/gulp) is installed globally.)

1. Test

npm run test
(Or, [`wct`](https://github.com/Polymer/web-component-tester), if installed

## Custom element reactions in the DOM and HTML specs

API which might trigger custom element reactions in the [DOM](https://dom.spec.whatwg.org/)
and [HTML](https://html.spec.whatwg.org/) specifications are marked with the
[`CEReactions` extended attribute](https://html.spec.whatwg.org/multipage/scripting.html#cereactions).

## Known Bugs and Limitations

- `adoptedCallback` is not supported.
- Changing an attribute of a customizable (but uncustomized) element will not
cause that element to upgrade.
- Only DOM API is patched. Notably, this excludes API from the HTML spec marked
with the `CEReactions` extended attribute.
- Unpatched API from the DOM spec:
- Setters on `Element` for `id`, `className`, and `slot`.
- `DOMTokenList` (`element.classList`)
- `NamedNodeMap` (`element.attributes`)
- `Attr` (`element.attributes.getNamedItem('attr-name')`)
- The [custom element reactions stack](https://html.spec.whatwg.org/multipage/scripting.html#custom-element-reactions-stack)
is not implemented.
- Typically, DOM operations patched in this polyfill gather the list of
elements to which a given callback would apply and then iterate that list,
calling the callback on each element. This mechanism breaks down if an
element's callback performs another DOM operation that manipulates an area
of the tree that was captured in the outer operation's list of elements.
When this happens, the callbacks from the inner DOM operation will be called
*before* those of the outer DOM operation (typically, depending on the patch
implementation), as opposed to a spec-compliant implementation where the
callbacks are always run in the order they were inserted into each
particular element's reaction queue.
- Custom elements created by the UA's parser are customized as if they were
upgraded, rather than constructed.
- These elements are only learned about *after* they have been constructed,
and typically after their descendants have been constructed. When these
elements are constructed, their children are visible and editable *even
though they would not yet exist and manipulating them would throw in a
spec-compliant implementation of custom elements!*
- The...
github  programming  github-starred-to-pinboard 
7 weeks ago
ttab: macOS CLI for opening a new terminal tab/window, optionally with a command to execute and/or display settings
Github repo
Name: ttab
Tagline: macOS CLI for opening a new terminal tab/window, optionally with a command to execute and/or display settings
Shell = 33475 bytes
Makefile = 26521 bytes
AppleScript = 20257 bytes

[![npm version](https://img.shields.io/npm/v/ttab.svg)](https://npmjs.com/package/ttab) [![license](https://img.shields.io/npm/l/ttab.svg)](https://github.com/mklement0/ttab/blob/master/LICENSE.md)

<!-- START doctoc generated TOC please keep comment here to allow auto update -->


- [ttab &mdash; open a new Terminal.app / iTerm2.app tab or window](#ttab-&mdash-open-a-new-terminalapp--iterm2app-tab-or-window)
- [Installation](#installation)
- [Installation from the npm registry](#installation-from-the-npm-registry)
- [Manual installation](#manual-installation)
- [Examples](#examples)
- [Usage](#usage)
- [License](#license)
- [Acknowledgements](#acknowledgements)
- [npm dependencies](#npm-dependencies)
- [Changelog](#changelog)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

# ttab &mdash; open a new Terminal.app / iTerm2.app tab or window

A [macOS (OS X)](https://www.apple.com/osx/) CLI for programmatically opening a new terminal tab/window in the standard terminal application, `Terminal`,
or in popular alternative [`iTerm2`](http://www.iterm2.com/), optionally with a command to execute and/or a specific title and specific display settings.

Note: `iTerm2` support is experimental in that it is currently not covered by the automated tests run before every release.

# Installation

**Important**: Irrespective of installation method, `Terminal` / `iTerm2` (`iTerm.app`) needs to be granted _access for assistive devices_ in order for `ttab` to function properly, which is a _one-time operation that requires administrative privileges_.
If you're not prompted on first run and get an error message instead, go to `System Preferences > Security & Privacy`, tab `Privacy`, select `Accessibility`, unlock, and make sure `Terminal.app` / `iTerm.app` is in the list on the right and has a checkmark.
For more information, see [Apple's support article on the subject](https://support.apple.com/en-us/HT202802)

## Installation from the npm registry

With [Node.js](http://nodejs.org/) or [io.js](https://iojs.org/) installed, install from the [npm registry](https://www.npmjs.com/package/ttab):

[sudo] npm install ttab -g


* Whether you need `sudo` depends on how you installed Node.js / io.js and whether you've [changed permissions later](https://docs.npmjs.com/getting-started/fixing-npm-permissions); if you get an `EACCES` error, try again with `sudo`.
* The `-g` ensures [_global_ installation](https://docs.npmjs.com/getting-started/installing-npm-packages-globally) and is needed to put `ttab` in your system's `$PATH`.

## Manual installation

* Download [this `bash` script](https://raw.githubusercontent.com/mklement0/ttab/stable/bin/ttab) as `ttab`.
github  programming  github-starred-to-pinboard 
7 weeks ago
slashdeploy: GitHub Deployments for Slack
Github repo
Name: slashdeploy
Tagline: GitHub Deployments for Slack
Homepage: https://slashdeploy.io
JavaScript = 457397 bytes
Ruby = 269441 bytes
CSS = 155154 bytes
HTML = 16414 bytes
Shell = 853 bytes
Dockerfile = 331 bytes
Makefile = 83 bytes

# SlashDeploy [![Build Status](https://travis-ci.org/remind101/slashdeploy.svg?branch=master)](https://travis-ci.org/remind101/slashdeploy) [![Code Climate](https://codeclimate.com/github/remind101/slashdeploy/badges/gpa.svg)](https://codeclimate.com/github/remind101/slashdeploy)

[SlashDeploy](https://slashdeploy.io) is a web app for triggering [GitHub Deployments](https://developer.github.com/v3/repos/deployments/) via a `/deploy` command in Slack.

## Installation

SlashDeploy is already hosted at https://slashdeploy.io. All you have to do is add it to your Slack team:

<a href="https://slashdeploy.io/slack/install"><img alt="Add to Slack" height="40" width="139" src="https://platform.slack-edge.com/img/add_to_slack@2x.png"></a>

## Usage

Deploy a repository to the default environment (production):

/deploy ejholmes/acme-inc

Deploy a repository to a specific environment:

/deploy ejholmes/acme-inc to staging

Deploy a branch:

/deploy ejholmes/acme-inc@topic-branch to staging

And more at <https://slashdeploy.io/docs>.

## Features

* Create GitHub Deployments directly from Slack.
* Receive Slack DM's whenever GitHub Deployments change status.
* Trigger GitHub Deployments when a set of commit statuses pass (Continuous Delivery).
* Environment locking.

## Contributing

Contributions are highly welcome! If you'd like to contribute, please read [CONTRIBUTING.md](./CONTRIBUTING.md)
github  programming  github-starred-to-pinboard 
7 weeks ago
ingredient-phrase-tagger: Extract structured data from ingredient phrases using conditional random fields
Github repo
Name: ingredient-phrase-tagger
Tagline: Extract structured data from ingredient phrases using conditional random fields
Homepage: http://open.blogs.nytimes.com/2016/04/27/structured-ingredients-data-tagging/
Python = 16806 bytes
Ruby = 2263 bytes
Shell = 838 bytes

# CRF Ingredient Phrase Tagger

This repo contains scripts to extract the Quantity, Unit, Name, and Comments
from unstructured ingredient phrases. We use it on [Cooking][nytc] to format
incoming recipes. Given the following input:

1 pound carrots, young ones if possible
Kosher salt, to taste
2 tablespoons sherry vinegar
2 tablespoons honey
2 tablespoons extra-virgin olive oil
1 medium-size shallot, peeled and finely diced
1/2 teaspoon fresh thyme leaves, finely chopped
Black pepper, to taste

Our tool produces something like:

"qty": "1",
"unit": "pound"
"name": "carrots",
"other": ",",
"comment": "young ones if possible",
"input": "1 pound carrots, young ones if possible",
"display": "<span class='qty'>1</span><span class='unit'>pound</span><span class='name'>carrots</span><span class='other'>,</span><span class='comment'>young ones if possible</span>",

We use a conditional random field model (CRF) to extract tags from labelled
training data, which was tagged by human news assistants. We wrote about our
approach [on the New York Times Open blog][openblog]. More information about
CRFs can be found [here][crf_tut].

On a 2012 Macbook Pro, training the model takes roughly 30 minutes for 130k
examples using the [CRF++][crfpp] library.

## Development


brew install crf++
python setup.py install

## Quick Start

The most common usage is to train the model with a subset of our data, test the
model against a different subset, then visualize the results. We provide a shell
script to do this, at:


You can edit this script to specify the size of your training and testing set.
The default is 20k training examples and 2k test examples.

## Usage

### Training

To train the model, we must first convert our input data into a format which
`crf_learn` can accept:

bin/generate_data --data-path=input.csv --count=1000 --offset=0 > tmp/train_file

The `count` argument specifies the number of training examples (i.e. ingredient
lines) to read, and `offset` specifies which line to start with. There are
roughly 180k examples in our snapshot of the New York Times cooking database
(which we include in this repo), so it is useful to run against a subset.

The output of this step looks something like:



tablespoons I2 L8 NoCAP NoPAREN B-UNIT
dry I3 L8 NoCAP NoPAREN ...
github  programming  github-starred-to-pinboard 
7 weeks ago
fraql: GraphQL fragments made simple ⚡️
Github repo
Name: fraql
Tagline: GraphQL fragments made simple ⚡️
JavaScript = 16143 bytes

<h1 align="center">
<img src="https://raw.githubusercontent.com/smooth-code/fraql/master/resources/fraql-logo.png" alt="FraQL" title="FraQL" width="300">
<p align="center" style="font-size: 1.2rem;">GraphQL fragments made simple ⚡️</p>

[![Build Status][build-badge]][build]
[![Code Coverage][coverage-badge]][coverage]
[![version][version-badge]][package] [![MIT License][license-badge]][license]

[![PRs Welcome][prs-badge]][prs]

[![Watch on GitHub][github-watch-badge]][github-watch]
[![Star on GitHub][github-star-badge]][github-star]

npm install fraql graphql graphql-tools graphql-tag

FraQL solves several things:

* ☀️ Isolation: fragments don't rely on name anymore
* ✨ Mocking: generate data & props from fragments
* 🤯 Collocation: put GraphQL in your components

## Example

import gql from 'fraql'

// Create fragment without naming it.
const fragment = gql`
fragment _ on Article {

// Just use it in your queries!
const query = gql`
query Articles {
articles {

**⚡️ [See live example on CodeSandbox](https://codesandbox.io/s/l42jqm319l)**

## Motivation

Putting data next to your component is a good practice. It is built-in [Relay](https://facebook.github.io/relay/) and Lee Byron explains the advantages into [his talk about the IDEA architecture](https://www.youtube.com/watch?v=oTcDmnAXZ4E).

I tried to do it by myself, but relying on fragment names is not an easy task. FraQL solves this issue by bringing isolation, fragments do not rely on their names.

The second problem solved by FraQL is the mocking. Generating a set of data for complex components is a pain. FraQL solves it by generating data right from your fragments!

## Usage with React

### Reference fragments into components

FraQL exports a default tag function that is a drop-in replacement for `graphql-tag`. By using it you can create reusable fragments easily.

FraQL is not a framework, but it comes with good practices. It is recommended to create a static property `fragments` on your components that contains a map of component properties. For each one, you specify the associated fragment.

You may have noticed that the name of the fragment is "\_". FraQL transforms your fragment into an inline fragment. You can pick any name you want, because it will be dropped the transformation anyway.

import React from 'react'
import gql from 'fraql'

const ArticleCard = ({ article }) => (

// Create a map of fragments and reference them on a static property "fragments".
ArticleCard.fragments = {
article: gql`
fragment _ on Article {

export default ArticleCard

### Use fragments into your queries

With FraQL,...
github  programming  github-starred-to-pinboard 
7 weeks ago
phodit: Phodal's markdown/ebook editor with MicroFrontend & Web Components
Github repo
Name: phodit
Tagline: Phodal's markdown/ebook editor with MicroFrontend & Web Components
Homepage: https://www.phodit.com/
TypeScript = 43277 bytes
CSS = 18376 bytes
HTML = 7709 bytes
JavaScript = 4861 bytes

# Phodit

> a personal markdown editor with electron for Phodal

<p align="center">
<img width="128" height="128" src="./assets/imgs/icons/png/128x128.png">




- support for git markdown project
- Terminal integration
- tree navigator
- fullscreen support
- preview markdown
- code highlight support
- search by: Google, Baidu, WIKI, Zhihu, Github
- **Phodal's blog relative search**

Tech Stack

- Stencil.js + Web Components -> Terminal Header
- SimpleMDE + CodeMirror -> Editor
- React.js -> TreeView
- xterm -> Terminal
- marked -> Markdown Parser
- highlight.js -> Code Highlight
- lunr -> search engine
- Angular -> Rename box
- Reveal.js -> Slide


- 一键发布到各个平台的自动化脚本
- 支持微信公众号编辑器

### 技术细节

- 国际化支持
- WebComponents 内建
- 微前端架构
- Web Worker

### Setup

requirements: ``pandoc``, ``node.js``


git submodule init
git submodule update

yarn install
yarn build:app

[setup nodejieba in Windows](https://github.com/yanyiwu/nodejieba)

#### Components

Name | Path | Stacks
editor | ./editor | SimpleMDE
header | ./component/header | Stencil.js
interact | ./component/interact | Angular
tree-view | ./component/tree-view | React

Setup && build

yarn install
yarn build


[![Phodal's Idea](https://brand.phodal.com/shields/idea-small.svg)](https://ideas.phodal.com/)

© 2018 A [Phodal Huang](https://www.phodal.com)'s [Idea](https://github.com/phodal/ideas). This code is distributed under the MIT license. See `LICENSE` in this directory.
github  programming  github-starred-to-pinboard 
7 weeks ago
metabase: The simplest, fastest way to get business intelligence and analytics to everyone in your company :yum:
Github repo
Name: metabase
Tagline: The simplest, fastest way to get business intelligence and analytics to everyone in your company :yum:
Homepage: https://metabase.com
JavaScript = 4176911 bytes
Clojure = 3988386 bytes
HTML = 529062 bytes
CSS = 165205 bytes
Shell = 39155 bytes
Objective-C = 36331 bytes
Perl = 15493 bytes
Dockerfile = 2536 bytes
Emacs Lisp = 1127 bytes
Ruby = 220 bytes

# Metabase
Metabase is the easy, open source way for everyone in your company to ask questions and learn from data.

![Metabase Product Screenshot](docs/metabase-product-screenshot.png)

[![Latest Release](https://img.shields.io/github/release/metabase/metabase.svg?label=latest%20release)](https://github.com/metabase/metabase/releases)
[![GitHub license](https://img.shields.io/badge/license-AGPL-05B8CC.svg)](https://raw.githubusercontent.com/metabase/metabase/master/LICENSE.txt)
[![Circle CI](https://circleci.com/gh/metabase/metabase.svg?style=svg&circle-token=3ccf0aa841028af027f2ac9e8df17ce603e90ef9)](https://circleci.com/gh/metabase/metabase)
[![Gitter chat](https://badges.gitter.im/metabase/metabase.png)](https://gitter.im/metabase/metabase)

# Features
- 5 minute [setup](http://metabase.com/docs/latest/setting-up-metabase.html) (We're not kidding)
- Let anyone on your team [ask questions](http://metabase.com/docs/latest/users-guide/04-asking-questions.html) without knowing SQL
- Rich beautiful [dashboards](http://metabase.com/docs/latest/users-guide/06-sharing-answers.html) with auto refresh and fullscreen
- SQL Mode for analysts and data pros
- Create canonical [segments and metrics](http://metabase.com/docs/latest/administration-guide/07-segments-and-metrics.html) for your team to use
- Send data to Slack or email on a schedule with [Pulses](http://metabase.com/docs/latest/users-guide/10-pulses.html)
- View data in Slack anytime with [MetaBot](http://metabase.com/docs/latest/users-guide/11-metabot.html)
- [Humanize data](http://metabase.com/docs/latest/administration-guide/03-metadata-editing.html) for your team by renaming, annotating and hiding fields

For more information check out [metabase.com](http://www.metabase.com)

## Supported databases

- Postgres
- Druid
- SQL Server
- Redshift
- MongoDB
- Google BigQuery
- SQLite
- H2
- CrateDB
- Oracle
- Vertica
- Presto

Don't see your favorite database? File an issue to let us know.

## Installation

Metabase can be run just about anywhere so checkout our [Installation Guides](http://www.metabase.com/docs/latest/operations-guide/start.html#installing-and-running-metabase) for detailed instructions for various deployments. Here's the TLDR:

### Docker

To run Metabase via Docker, just type

docker run -d -p 3000:3000 --name metabase metabase/metabase

### JVM Jar

To run the jar you will need to have a Java Runtime installed. As a quick check to see if you system already has one, try

java -version

If you see something like

java version "1.8.0_51"
Java(TM) SE Runtime Environment (build 1.8.0_51-b16)
Java HotSpot(TM) 64-Bit Server VM...
github  programming  github-starred-to-pinboard 
7 weeks ago
mdx-deck: :spades: MDX-based presentation decks
Github repo
Name: mdx-deck
Tagline: :spades: MDX-based presentation decks
Homepage: https://jxnblk.com/mdx-deck
JavaScript = 68355 bytes

# mdx-deck


[MDX][]-based presentation decks

[![Build Status][badge]][travis]

[badge]: https://img.shields.io/travis/jxnblk/mdx-deck.svg?style=flat-square
[travis]: https://travis-ci.org/jxnblk/mdx-deck
[version-badge]: https://img.shields.io/npm/v/mdx-deck.svg?style=flat-square
[downloads-badge]: https://img.shields.io/npm/dw/mdx-deck.svg?style=flat-square
[npm]: https://npmjs.com/package/mdx-deck

npm i -D mdx-deck

- :memo: Write presentations in markdown
- :atom_symbol: Import and use [React components](#imports)
- :nail_care: Customizable [themes](#theming) and components
- :zero: Zero-config CLI
- :tipping_hand_woman: [Presenter mode](#presenter-mode)
- :notebook: [Speaker notes](#speaker-notes)

[View demo](https://jxnblk.com/mdx-deck)

## Getting Started

Create an [MDX][] file and separate each slide with `---`.

# This is the title of my deck
# About Me
<CodeSnippet />
import Demo from './components/Demo'

<Demo />
# The end

Add a run script to your `package.json` with the mdx-deck CLI
pointing to the `.mdx` file to start the dev server:

"scripts": {
"start": "mdx-deck deck.mdx"

Start the dev server:

npm start

## Videos & Articles

- [Egghead Tutorial][egghead] by [Andrew Del Prete](https://github.com/andrewdelprete).
- [mdx-deck: slide decks powered by markdown and react][kcd-medium] by [Kent C. Dodds][]
- [Make Fast & Beautiful Presentations with MDX-Deck][hw-video] by [Harry Wolff][] ([Demo][hw-demo])
- [What is MDX][kcd-video] by [Kent C. Dodds][]

[egghead]: https://egghead.io/lessons/react-build-a-slide-deck-with-mdx-deck-using-markdown-react
[Kent C. Dodds]: https://mobile.twitter.com/kentcdodds
[kcd-video]: http://youtu.be/d2sQiI5NFAM?a
[kcd-medium]: https://blog.kentcdodds.com/mdx-deck-slide-decks-powered-by-markdown-and-react-bfc6d6af20da
[hw-video]: https://www.youtube.com/watch?v=LvP2EqCiQMg&feature=youtu.be
[hw-demo]: https://github.com/hswolff/mdx-deck-demo
[Harry Wolff]: https://mobile.twitter.com/hswolff

## Quick Start

To create a new presentation with zero-configuration, run the following command to generate a presentation deck in a new folder:

npm init deck my-presentation-name

## Using MDX

MDX can use Markdown syntax and render React components with JSX.

### Imports

To import components, use ES import syntax separated with empty lines from any markdown or JSX syntax.

import { Box } from 'grid-styled'

<Box color='tomato'>

Read more about MDX syntax in the [MDX Docs][MDX].

## Theming

mdx-deck uses...
github  programming  github-starred-to-pinboard 
7 weeks ago
react-native-slider: A pure JavaScript <Slider> component for react-native
Github repo
Name: react-native-slider
Tagline: A pure JavaScript <Slider> component for react-native
JavaScript = 22900 bytes
Objective-C = 5131 bytes
Python = 1539 bytes
Java = 1383 bytes

## react-native-slider

[![npm version](http://img.shields.io/npm/v/react-native-slider.svg?style=flat-square)](https://npmjs.org/package/react-native-slider "View this project on npm")
[![npm downloads](http://img.shields.io/npm/dm/react-native-slider.svg?style=flat-square)](https://npmjs.org/package/react-native-slider "View this project on npm")
[![npm licence](http://img.shields.io/npm/l/react-native-slider.svg?style=flat-square)](https://npmjs.org/package/react-native-slider "View this project on npm")
[![Platform](https://img.shields.io/badge/platform-ios%20%7C%20android-989898.svg?style=flat-square)](https://npmjs.org/package/react-native-slider "View this project on npm")

A pure JavaScript `<Slider>` component for react-native. This is still very much a work
in progress, ideas and contributions are very welcome.

<img src="https://raw.githubusercontent.com/jeanregisser/react-native-slider/master/Screenshots/basic@2x.png" width="375">
<img src="https://raw.githubusercontent.com/jeanregisser/react-native-slider/master/Screenshots/basic_android_xxhdpi.png" width="360">

It is a drop-in replacement for [Slider](http://facebook.github.io/react-native/docs/slider.html).

## Install

npm i --save react-native-slider

**Note:** I try to maintain backward compatibility of this component with previous versions of React Native, but due to the nature of the platform, and the existence of breaking changes between releases, it is possible that you need to use a specific version of this component to support the exact version of React Native you are using. See the following table:

| React Native version(s) | Supporting react-native-slider version(s) |
| <0.25.0 | <0.7.0 |
| v0.25.x | v0.7.x |
| v0.26.0+ | v0.8.x |
| v0.43.0+ | v0.10.x |
| v0.44.0+ | v0.11.x |

## Usage

import React from "react";
import Slider from "react-native-slider";
import { AppRegistry, StyleSheet, View, Text } from "react-native";

class SliderExample extends React.Component {
state = {
value: 0.2

render() {
return (
<View style={styles.container}>
onValueChange={value => this.setState({ value })}
Value: {this.state.value}

const styles = StyleSheet.create({
container: {
flex: 1,
marginLeft: 10,
marginRight: 10,
alignItems: "stretch",
justifyContent: "center"
github  programming  github-starred-to-pinboard 
7 weeks ago
Geolib: Growing library to provide some basic geo functions
Github repo
Name: Geolib
Tagline: Growing library to provide some basic geo functions
JavaScript = 99696 bytes
HTML = 28569 bytes

# Geolib
[![Build Status](https://secure.travis-ci.org/manuelbieh/Geolib.png?branch=master)](http://travis-ci.org/manuelbieh/Geolib)

Library to provide basic geospatial operations like distance calculation, conversion of decimal coordinates to sexagesimal and vice versa, etc.

[View demo](http://www.manuel-bieh.de/publikationen/scripts/geolib/demo.html)

## Install

npm install geolib


<h3>geolib.getDistance(object start, object end[, int accuracy, int precision])</h3>

Calculates the distance between two geo coordinates

Takes 2 or 4 arguments. First 2 arguments must be objects that each have latitude and longitude properties (e.g. `{latitude: 52.518611, longitude: 13.408056}`). Coordinates can be in sexagesimal or decimal format. 3rd argument is accuracy (in meters). So a calculated distance of 1248 meters with an accuracy of 100 is returned as `1200` (accuracy 10 = `1250` etc.). 4th argument is precision in sub-meters (1 is meter presicion, 2 is decimeters, 3 is centimeters, etc).

Return value is always float and represents the distance in meters.


{latitude: 51.5103, longitude: 7.49347},
{latitude: "51° 31' N", longitude: "7° 28' E"}
{latitude: 51.5103, longitude: 7.49347},
{latitude: "51° 31' N", longitude: "7° 28' E"}

// Working with W3C Geolocation API
function(position) {
alert('You are ' + geolib.getDistance(position.coords, {
latitude: 51.525,
longitude: 7.4575
}) + ' meters away from 51.525, 7.4575');
function() {
alert('Position could not be determined.')
enableHighAccuracy: true

<h3>geolib.getDistanceSimple(object start, object end[, int accuracy])</h3>

Calculates the distance between two geo coordinates but this method is far more inaccurate as compared to getDistance.

It can take up 2 to 3 arguments. start, end and accuracy can be defined in the same as in getDistance.

Return value is always float that represents the distance in meters.


{latitude: 51.5103, longitude: 7.49347},
{latitude: "51° 31' N", longitude: "7° 28' E"}

<h3>geolib.getCenter(array coords)</h3>

Calculates the geographical center of all points in a collection of geo coordinates

Takes an object or array of coordinates and calculates the center of it.

Returns an object: `{"latitude": centerLat, "longitude": centerLng}`


<pre>var spots = {
"Brandenburg Gate, Berlin": {latitude: 52.516272, longitude: 13.377722},
"Dortmund U-Tower": {latitude: 51.515, longitude: 7.453619},
"London Eye": {latitude: 51.503333, longitude: -0.119722},
"Kremlin, Moscow": {latitude: 55.751667, longitude: 37.617778},
"Eiffel Tower, Paris":...
github  programming  github-starred-to-pinboard 
7 weeks ago
sharyn: 🌹 Sharyn – A library to build modern JavaScript apps
Github repo
Name: sharyn
Tagline: 🌹 Sharyn – A library to build modern JavaScript apps
JavaScript = 134719 bytes
HTML = 520 bytes

<!-- markdownlint-disable no-inline-html -->
<!-- markdownlint-disable first-line-h1 -->

<div align="center">
<img src="https://user-images.githubusercontent.com/40995577/42487947-ea40d256-840b-11e8-8acc-50e62a3226b7.png" alt="Sharyn logo">

# 🌹 Sharyn

> ⚠️ Hi :) Don't use the library yet. The documentation is not up-to-date at all.

Sharyn is a library of packages that make your life easier and reduce your boilerplate code. Its **Development** packages are useful for any project, and the **Web** ones provide a wide range of tools and helpers for your web app projects.

The default kick-ass tech stack that Sharyn supports is: **Babel 7**, **ESLint 5**, **Flow**, **Prettier**, **Jest**, **React with server-side rendering**, **Redux**, **Webpack with HMR**, **Material UI**, **Koa**, **GraphQL with Apollo**, **Knex**, **PostgreSQL**, **Redis**, **E2E tests with Puppeteer**, **Docker**, and **Heroku**. These bricks are all optional and replaceable.

Sharyn will work wonders for projects that follow the upcoming [major update](https://github.com/verekia/js-stack-from-scratch/issues/255) of my [**JS Stack from Scratch**](https://github.com/verekia/js-stack-from-scratch) tutorial.

## 🌹 Packages

### Development

- [**@sharyn/babel-preset**](https://github.com/sharynjs/sharyn/blob/master/packages/babel-preset/README.md) – Configures all the detected and supported Babel modules
- [**@sharyn/eslint-config**](https://github.com/sharynjs/sharyn/blob/master/packages/eslint-config/README.md) – Configures all the detected and supported ESLint modules
- [**@sharyn/prettier-config**](https://github.com/sharynjs/sharyn/blob/master/packages/prettier-config/README.md) – Prettier configuration
- [**@sharyn/jest-config**](https://github.com/sharynjs/sharyn/blob/master/packages/jest-config/README.md) – Jest configuration
- [**@sharyn/util**](https://github.com/sharynjs/sharyn/blob/master/packages/util/README.md) – Lodash-like utils

### Web

- [**@sharyn/env**](https://github.com/sharynjs/sharyn/blob/master/packages/env/README.md) – Environment utils
- [**@sharyn/cli**](https://github.com/sharynjs/sharyn/blob/master/packages/cli/README.md) – Convenient NPM scripts
- [**@sharyn/webpack-config**](https://github.com/sharynjs/sharyn/blob/master/packages/webpack-config/README.md) – Webpack configuration
- [**@sharyn/client**](https://github.com/sharynjs/sharyn/blob/master/packages/client/README.md) – Client-side helpers
- [**@sharyn/shared**](https://github.com/sharynjs/sharyn/blob/master/packages/shared/README.md) – Helpers that can be used by both the client and the server
github  programming  github-starred-to-pinboard 
7 weeks ago
fusion-apollo-universal-client: A simple universal client for GraphQL apps using fusion-apollo
Github repo
Name: fusion-apollo-universal-client
Tagline: A simple universal client for GraphQL apps using fusion-apollo
JavaScript = 6590 bytes
Dockerfile = 164 bytes

# fusion-apollo-universal-client

[![Build status](https://badge.buildkite.com/107d4baa53a894926a5da4e9552291e6e1b8133d6f665729cc.svg?branch=master)](https://buildkite.com/uberopensource/fusion-apollo-universal-client)

A simple universal client for GraphQL apps using fusion-apollo.

The Apollo Client is the entrypoint for most Apollo applications. This plugin provides a client with the minimum amount of configuration necessary to create a universally rendered Apollo application.


# Table of contents

- [Installation](#installation)
- [Usage](#usage)
- [Usage with fusion-apollo](#usage-with-fusion-apollo)
- [Authorization](#authorization)
- [API](#api)
- [Registration API](#registration-api)
- [`ApolloClientEndpointToken`](#apolloclientendpointtoken)
- [Dependencies](#dependencies)
- [`FetchToken`](#fetchtoken)
- [`ApolloClientAuthKeyToken`](#apolloclientauthkeytoken)
- [`ApolloClientCacheToken`](#apolloclientcachetoken)
- [`ApolloClientCredentialsToken`](#apolloclientcredentialstoken)
- [`GetApolloClientLinksToken`](#getapolloclientlinkstoken)
- [Examples](#examples)


### Installation

yarn add fusion-apollo-universal-client


## Usage

### Usage with fusion-apollo

import App, {ApolloClientToken} from 'fusion-apollo';
import GetApolloClient, {
} from 'fusion-apollo-universal-client';
import unfetch from 'unfetch';

export default () => {
const app = new App(root);
app.register(ApolloClientToken, GetApolloClient);
app.register(ApolloClientEndpointToken, '...');
__NODE__ && app.register(FetchToken, unfetch);
return app;

### Usage with local server

If your app hosts the Apollo server a schema must be provided.
The schema can be provided using the `GraphQLSchemaToken` from `fusion-apollo`.

import App, {ApolloClientToken, GraphQLSchemaToken} from 'fusion-apollo';
import {makeExecutableSchema} from 'graphql-tools';
import GetApolloClient, {ApolloClientEndpointToken} from 'fusion-apollo-universal-client';
import unfetch from 'unfetch';

export default () => {
const app = new App(root);
app.register(ApolloClientToken, GetApolloClient);
app.register(ApolloClientEndpointToken, '...');
app.register(GraphQLSchemaToken, makeExecutableSchema(...));
__NODE__ && app.register(FetchToken, unfetch);
return app;

See the [Apollo Documentation](https://www.apollographql.com/docs/graphql-tools/generate-schema.html) for how to generate a schema.

### Authorization

Authorization will work with hosted GraphQL services such as scaphold and graph.cool. This works by passing a stored authentication token inside of the authorization header. This token is currently assumed to stored in a cookie and cookies by the value provided in `ApolloClientAuthKeyToken` (defaults to "token").


github  programming  github-starred-to-pinboard 
7 weeks ago
nuxt-ssr-firebase: Nuxt.js Universal App with SSR via Firebase Functions and Firebase Hosting
Github repo
Name: nuxt-ssr-firebase
Tagline: Nuxt.js Universal App with SSR via Firebase Functions and Firebase Hosting
Homepage: https://nuxtssrfire.firebaseapp.com/
Vue = 5425 bytes
JavaScript = 2503 bytes
CSS = 1538 bytes
HTML = 597 bytes

# Nuxt.js Universal App with SSR via Firebase Functions and Firebase Hosting
Host a Nuxt Universal app or site by combining Nuxt.js with Firebase Cloud Functions and Hosting.

[Live Preview](https://nuxtssrfire.firebaseapp.com)


## Pre-Setup: Before Installing Any Dependencies
1. Obtain a Firebase Project ID to use for this project. [See Overiew Here](#firebase-project-setup)

2. Inside this directory, locate the file `.setup-firebaserc` and replace the text `your-project-id` with your Firebase Project ID.

## Setup

We will now get everything setup and deployed in 3 commands:

**Note:** _All of these commands are ran from the root directory_

1. Install Dependencies in all necessary directories and creates `.firebaserc` from from `.setup-firebaserc` by using a `postinstall hook`

2. Build The Project
yarn build

3. Deploy To Firebase
yarn deploy

***Your site should now be live!***


### Firebase Project Setup

1. Create a Firebase Project using the [Firebase Console](https://console.firebase.google.com).

2. Obtain the Firebase Project ID

### Features
- Server-side rendering with Firebase Hosting combined with Firebase Functions
- Firebase Hosting as our CDN for our publicPath (See nuxt.config.js)

### Things to know...
- You must have the Firebase CLI installed. If you don't have it install it with `npm install -g firebase-tools` and then configure it with `firebase login`.

- If you have errors, make sure `firebase-tools` is up to date. I've experienced many problems that were resolved once I updated.

- The root directory has a package.json file with several scripts that will be used to optimize and ease getting started and the workflow

- ALL commands are ran from the root directory
github  programming  github-starred-to-pinboard 
7 weeks ago
graphql-search: Implementing Search in GraphQL using AWS AppSync & React Apollo
Github repo
Name: graphql-search
Tagline: Implementing Search in GraphQL using AWS AppSync & React Apollo
JavaScript = 8512 bytes
HTML = 1590 bytes
CSS = 443 bytes

# GraphQL Search

Implementing Search in GraphQL Using AWS AppSync & React Apollo

This repo goes along with the Medium post [Implementing Search in GraphQL](https://medium.com/@dabit3/implementing-search-in-graphql-11d5f71f179)
github  programming  github-starred-to-pinboard 
7 weeks ago
now-mobile: Mobile client for Zeit's Now platform
Github repo
Name: now-mobile
Tagline: Mobile client for Zeit's Now platform
Homepage: https://mobile.now.sh
JavaScript = 156021 bytes
Swift = 39288 bytes
Objective-C = 6274 bytes
Java = 3012 bytes
Python = 1738 bytes
Ruby = 450 bytes


## About

This is the repo of a mobile app for ZEIT's [Now](https://now.sh) platform built with React Native.

## Contributing

If you want to contribute, here's how to work with the project:

- Make sure you have React Native installed (`npm install -g react-native-cli`)
- Clone the repo
- Run `npm install` or `yarn`
- Run `react-native start` to start the packager
- Run `react-native run-ios` to start the app in the simulator

### Swifty parts

Today extensions and Apple Watch companion app are built with Swift. Why? Well, for the Watch it's not possible to use React Native. As for Today widgets, while [it is possible](https://github.com/matejkriz/react-native-today-widget) to build Today widgets with React Native, iOS puts an insane memory limit of 16MB on Today extensions, most of which will be eaten up by RN and I didn't want to worry about it.
Also it was all part of my ongoing effort to learn Swift 🙈

#### Swift <-> JS

All the necessary data is still passed to extensions from JS, but the extensions themselves are native. Today widgets use [Shared App Groups](https://developer.apple.com/library/archive/documentation/General/Conceptual/WatchKitProgrammingGuide/SharingData.html) and Watch uses [Watch Connectivity](https://developer.apple.com/documentation/watchconnectivity) to pass authentication data to the Watch.

### CocoaPods and .xcworkspace

Watch app uses CocoaPods, so if you want to launch the app from Xcode, you should use the `.xcworkspace` instead of `.xcproject` to open the project.

## Bugs

There's most likely a bunch of them, especially in Swift sections since I don't know Swift that well.
If you find any, please [report them](https://github.com/rdev/now-mobile/issues/new) and they shall be fixed. Also contributions are very welcome :)


- [x] Deployment details screen on tap
- [ ] Cache latest state and show it on startup before loading from network. This is already beind done on the Watch so it's only fair main app has it
- [ ] Simplify `Provider` component (?)
- [ ] Flow types improvements
- [x] Android version. It's basically good to go but there's gonna be mandatory Android bugs to sort out
- [ ] Today extension auth handling
- [ ] Tests
- [ ] Fastlane (?)

## Landing page

Code for [mobile.now.sh](https://mobile.now.sh) is available [here](https://github.com/rdev/now-mobile-landing).

## Disclamer

This is **not** an official ZEIT software.

It just uses ZEIT's APIs, some of which is copied from [Now Desktop](https://github.com/zeit/now-desktop) and isn't documented on the official website.

If you have any questions or issues with this app, please don't bug people of ZEIT about it and just [file an issue](https://github.com/rdev/now-mobile/issues/new) on this repo.
github  programming  github-starred-to-pinboard 
7 weeks ago
react-particle-effect-button: Bursting particle effect buttons for React 🎉
Github repo
Name: react-particle-effect-button
Tagline: Bursting particle effect buttons for React 🎉
Homepage: https://transitive-bullshit.github.io/react-particle-effect-button/
JavaScript = 18837 bytes
HTML = 467 bytes
CSS = 388 bytes

# react-particle-effect-button ([demo](https://transitive-bullshit.github.io/react-particle-effect-button/))

> Bursting particle effect buttons for React.

[![NPM](https://img.shields.io/npm/v/react-particle-effect-button.svg)](https://www.npmjs.com/package/react-particle-effect-button) [![Build Status](https://travis-ci.com/transitive-bullshit/react-particle-effect-button.svg?branch=master)](https://travis-ci.com/transitive-bullshit/react-particle-effect-button) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)


This library is a React port of an awesome [Codrops Article](https://tympanus.net/codrops/2018/04/25/particle-effects-for-buttons/) by [Luis Manuel](https://tympanus.net/codrops/author/luis/) (original [source](https://github.com/codrops/ParticleEffectsButtons/)).

## Install

npm install --save react-particle-effect-button

## Usage

Check out the [Demo](https://transitive-bullshit.github.io/react-particle-effect-button/) to see it in action.

import React, { Component } from 'react'

import ParticleEffectButton from 'react-particle-effect-button'

class App extends Component {
state = {
hidden: false

render () {
return (

Note that `children` can be anything from a simple `<button>` to a complex React subtree. The `children` should represent the button's contents.

You change the `hidden` boolean prop to kick-off an animation, typically as a result of a click on the button's contents. If `hidden` changes to `true`, the button will perform a disintegrating animation. If `hidden` changes to `false`, it will reverse and reintegrate the original content.

## Props

| Property | Type | Default | Description |
| `hidden` | boolean | false | Whether button should be hidden or visible. Changing this prop starts an animation. |
| `color` | string | '#000' | Particle color. Should match the button content's background color |
| `children` | React Node |...
github  programming  github-starred-to-pinboard 
7 weeks ago
yoga-log: A crappy demo of using a logger for `express`/`apollo-server`/`mongodb`.
Github repo
Name: yoga-log
Tagline: A crappy demo of using a logger for `express`/`apollo-server`/`mongodb`.
JavaScript = 2499 bytes

yarn start-dev
github  programming  github-starred-to-pinboard 
7 weeks ago
react-modal: Accessible modal dialog component for React
Github repo
Name: react-modal
Tagline: Accessible modal dialog component for React
Homepage: https://reactjs.github.io/react-modal
JavaScript = 68247 bytes
Makefile = 3987 bytes
Python = 3904 bytes
Shell = 1356 bytes

# react-modal

Accessible modal dialog component for React.JS

[![Build Status](https://travis-ci.org/reactjs/react-modal.svg?branch=v1)](https://travis-ci.org/reactjs/react-modal)
[![Coverage Status](https://coveralls.io/repos/github/reactjs/react-modal/badge.svg?branch=master)](https://coveralls.io/github/reactjs/react-modal?branch=master)
![gzip size](http://img.badgesize.io/https://unpkg.com/react-modal/dist/react-modal.min.js?compression=gzip)
[![Join the chat at https://gitter.im/react-modal/Lobby](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/react-modal/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

## Table of Contents

* [Installation](#installation)
* [API documentation](#api-documentation)
* [Examples](#examples)
* [Demos](#demos)

## Installation

To install, you can use [npm](https://npmjs.org/) or [yarn](https://yarnpkg.com):

$ npm install react-modal
$ yarn add react-modal

## API documentation

The primary documentation for react-modal is the
[reference book](https://reactjs.github.io/react-modal), which describes the API
and gives examples of its usage.

## Examples

Here is a simple example of react-modal being used in an app with some custom
styles and focusable input elements within the modal content:

import React from 'react';
import ReactDOM from 'react-dom';
import Modal from 'react-modal';

const customStyles = {
content : {
top : '50%',
left : '50%',
right : 'auto',
bottom : 'auto',
marginRight : '-50%',
transform : 'translate(-50%, -50%)'

// Make sure to bind modal to your appElement (http://reactcommunity.org/react-modal/accessibility/)

class App extends React.Component {
constructor() {

this.state = {
modalIsOpen: false

this.openModal = this.openModal.bind(this);
this.afterOpenModal = this.afterOpenModal.bind(this);
this.closeModal = this.closeModal.bind(this);

openModal() {
this.setState({modalIsOpen: true});

afterOpenModal() {
// references are now sync'd and can be accessed.
this.subtitle.style.color = '#f00';

closeModal() {
this.setState({modalIsOpen: false});

render() {
return (
<button onClick={this.openModal}>Open Modal</button>
contentLabel="Example Modal"

<h2 ref={subtitle => this.subtitle =...
github  programming  github-starred-to-pinboard 
7 weeks ago
hugegraph: HugeGraph Database core component, including graph engine, API, and built-in backends
Github repo
Name: hugegraph
Tagline: HugeGraph Database core component, including graph engine, API, and built-in backends
Java = 2239119 bytes
Shell = 32024 bytes
Groovy = 4409 bytes

# HugeGraph

[![Build Status](https://travis-ci.org/hugegraph/hugegraph.svg?branch=master)](https://travis-ci.org/hugegraph/hugegraph)

HugeGraph is a fast-speed and highly-scalable [graph database](https://en.wikipedia.org/wiki/Graph_database). Billions of vertices and edges can be easily stored into and queried from HugeGraph due to its excellent OLTP ability. As compliance to [Apache TinkerPop 3](https://tinkerpop.apache.org/) framework, various complicated graph queries can be accomplished through [Gremlin](https://tinkerpop.apache.org/gremlin.html)(a powerful graph traversal language).

## Features

- Compliance to [Apache TinkerPop 3](https://tinkerpop.apache.org/), supporting [Gremlin](https://tinkerpop.apache.org/gremlin.html)
- Schema Metadata Management, including VertexLabel, EdgeLabel, PropertyKey and IndexLabel
- Multi-type Indexes, supporting exact query, range query and complex conditons combination query
- Plug-in Backend Store Driver Framework, supporting RocksDB, Cassandra, ScyllaDB and MySQL now and easy to add other backend store driver if needed
- Integration with Hadoop/Spark

## Learn More

The [project homepage](https://hugegraph.github.io/hugegraph-doc/) contains more information on HugeGraph and provides links to documentation, getting-started guides and release downloads.

## Contributing

Welcome to contribute to HugeGraph, please see [`How to Contribute`](CONTRIBUTING.md) for more information.

## License

HugeGraph is licensed under Apache 2.0 License.

## Thanks

HugeGraph relies on the [TinkerPop](http://tinkerpop.apache.org) framework, we refer to the storage structure of [JanusGraph](http://janusgraph.org) and the schema definition of [DataStax](https://www.datastax.com).
Thanks to Tinkerpop, thanks to JanusGraph and Titan, thanks to DataStax. Thanks to all other organizations or authors who contributed to the project.

You are welcome to contribute to HugeGraph, and we hope to work with you to create a better open source environment.
github  programming  github-starred-to-pinboard 
7 weeks ago
react-textarea-autocomplete: 📝 React component implements configurable GitHub's like textarea autocomplete.
Github repo
Name: react-textarea-autocomplete
Tagline: 📝 React component implements configurable GitHub's like textarea autocomplete.
JavaScript = 65122 bytes
CSS = 1369 bytes
HTML = 173 bytes

<div align="center">
<h1>react-textarea-autocomplete 📝</h1>
Enhanced textarea to achieve autocomplete functionality.

[![MIT License][license-badge]][License]
[![PRs Welcome][prs-badge]][prs]
[![All Contributors](https://img.shields.io/badge/all_contributors-12-orange.svg?style=flat-square)](#contributors)

<div align="center">
<img src="https://i.imgur.com/sE0n6es.gif" align="center" width="500">

This package provides React Component to achieve GitHub's like functionality in comments regarding the textarea autocomplete. It can be used for example for emoji autocomplete or for @mentions. The render function (for displaying text enhanced by this textarea) is beyond the scope of this package and it should be solved separately.

## Installation

This module is distributed via [npm][npm] and should be installed as one of your project's `dependencies`:

yarn add @webscopeio/react-textarea-autocomplete

or there is UMD build available. [Check out this pen as example](https://codepen.io/jukben/pen/bYZqvR).

> This package also depends on `react` and `prop-types`. Please make sure you have
> those installed as well.

## Props

> *☝️ Note: Every other props than the mentioned below will be propagated to the textarea itself*

| Props | Type | Description
| :------------- | :------------- | ---------
| **trigger*** | Object: Trigger type | Define triggers and their corresponding behavior
| **loadingComponent*** | React Component | Gets `data` props which is already fetched (and displayed) suggestion
| innerRef | Function: (HTMLTextAreaElement) => void) | Allows you to get React ref of the underlying textarea
| scrollToItem | boolean \| (container: HTMLDivElement, item: HTMLDivElement) => void) | Defaults to true. With default implementation it will scroll the dropdown every time when the item gets out of the view.
| minChar | Number | Number of characters that user should type for trigger a suggestion. Defaults to 1.
| onCaretPositionChange | Function: (number) => void | Listener called every time the textarea's caret position is changed. The listener is called with one attribute - caret position denoted by an integer number.
| closeOnClickOutside | boolean | When it's true autocomplete will close when use click outside. Defaults to false.
| movePopupAsYouType | boolean | When it's true the textarea will move along with a caret as a user continues to type. Defaults to false.
| style | Style Object | Style's of textarea
| listStyle | Style Object | Styles of list's wrapper
| itemStyle | Style Object | Styles of item's wrapper
| loaderStyle | Style Object | Styles of loader's wrapper
| containerStyle | Style Object | Styles of textarea's container
| dropdownStyle| Style Object | Styles of dropdown's wrapper
| className | string | ClassNames of the textarea
| containerClassName | string...
github  programming  github-starred-to-pinboard 
7 weeks ago
jet: ✈️ Accelerate your React Native module development by testing inside NodeJS; mock-free and native test code free. Perfect for module developers wanting full E2E testing & CI.
Github repo
Name: jet
Tagline: ✈️ Accelerate your React Native module development by testing inside NodeJS; mock-free and native test code free. Perfect for module developers wanting full E2E testing & CI.
Homepage: https://invertase.io
JavaScript = 27721 bytes
Java = 7259 bytes
Objective-C = 5152 bytes
Ruby = 1927 bytes
Python = 1638 bytes

<p align="center">
<a href="https://invertase.io">
<img height="256" src="https://static.invertase.io/assets/jet.png"><br/>
<h2 align="center">Jet</h2>

<p align="center">
<a href="https://www.npmjs.com/package/jet"><img src="https://img.shields.io/npm/dm/jet.svg?style=flat-square" alt="NPM downloads"></a>
<a href="https://www.npmjs.com/package/jet"><img src="https://img.shields.io/npm/v/jet.svg?style=flat-square" alt="NPM version"></a>
<a href="/LICENSE"><img src="https://img.shields.io/npm/l/jet.svg?style=flat-square" alt="License"></a>
<a href="https://discord.gg/C9aK28N"><img src="https://img.shields.io/discord/295953187817521152.svg?logo=discord&style=flat-square&colorA=7289da&label=discord" alt="Chat"></a>
<a href="https://twitter.com/invertaseio"><img src="https://img.shields.io/twitter/follow/invertaseio.svg?style=social&label=Follow" alt="Follow on Twitter"></a>

> **WARNING:** Jet (formerly [Bridge](https://github.com/Salakar/bridge)) is currently a Proof of Concept, APIs and usage is likely to change by the first release version.

> This repo is in development and does not have a full release version yet. v0.1.0 is the latest stable version in it's current form - this works on Android & iOS on React Native ^0.56-57 and Detox ^9.0.1.

Jet lets you bring your React Native JS code into NodeJS and test it mock free and native testing code free. Perfect for React Native module developers who want to fully test their packages end-to-end and setup continuous integration services.

Jet extends upon [`wix/detox`](https://github.com/wix/detox) and by default the [Mocha testing framework](https://mochajs.org/).

Detox provides all the functionality you'll need to control your testing app, device and it's UI (if you have one) whilst Jet allows JS code execution in the context of your RN app via Node.js - giving you full access to all the Native api's exactly like you'd have inside your app.


> Latest supported React Native version: **^0.56.0**

> Latest supported Detox version: **^8.1.0**


## Features

### ⏩ Test with JavaScript

Your test suites and your React Native code run inside NodeJS - making testing your modules with NodeJS testing frameworks (mocha only currently) easy.

![test suite](https://static.invertase.io/assets/jet/tests-1.gif)

### 🐞 Debugging

Supports debugging your test suites and your React Native JS bundle using the standard NodeJS debugger protocol.


github  programming  github-starred-to-pinboard 
7 weeks ago
apple-music-js: A music streaming service created from the ground up using ReactJS & Redux
Github repo
Name: apple-music-js
Tagline: A music streaming service created from the ground up using ReactJS & Redux
JavaScript = 106129 bytes
HTML = 2189 bytes

Built by **Tanner Villarete**

Connect with me on [LinkedIn](https://linkedin.com/in/tvillarete)! I'll be graduating soon ;)

# How far can JavaScript take us?

Turns out, pretty dang far. This web app was my attempt at mimicking Apple's iOS music app, and I think I've come pretty close!

Check out a live demo [here](http://tannerv.com/music)

![screen shot 2018-08-12 at 9 49 19 am](https://user-images.githubusercontent.com/21055469/44004287-0a541a80-9e15-11e8-93e8-ff3606dd4db1.png)
![screen shot 2018-08-12 at 9 49 27 am](https://user-images.githubusercontent.com/21055469/44004289-0df0907e-9e15-11e8-9bcf-ec5e62bcd70a.png)
I'm in my fourth year of college, and it's been super cool to see how much I've improved and continue to improve all aspects of programming.

## Backend API
The API is hosted on a Raspberry Pi, and it's kept private (but still accessible if you try) so that it doesn't get overloaded. If you're interested in building your own backend to plug into this tool, here's what my database and endpoints look like:

### Database
There are six required columns:
- `name`: The name of the song
- `artist`: The artist name
- `album`: The album name
- `track`: The index of the song relative to the album (To order songs in an album)
- `url`: A URL to the audio file
- `artwork`: A URL to the album artwork image
mysql> use music;

Database changed
mysql> desc tracks;
| Field | Type | Null | Key | Default | Extra |
| id | int(10) unsigned | NO | PRI | NULL | auto_increment |
| created_at | timestamp | YES | | NULL | |
| updated_at | timestamp | YES | | NULL | |
| name | varchar(255) | NO | | NULL | |
| artist | varchar(255) | NO | | NULL | |
| album | varchar(255) | NO | | NULL | |
| track | int(11) | NO | | NULL | |
| url | varchar(255) | NO | | NULL | |
| artwork | varchar(255) | NO | | NULL | |
9 rows in set (0.05 sec)

### API Endpoints
The backend is built with PHP using the Laravel ORM. I only needed a few API endpoints to get this working:
- `/albums` - Returns a list of all album names with their corresponding artist
- `/album/{album}` - Returns a list of songs from a specified album
- `/artists` - Returns a list of all artists
- `/artist/{artist}` - Returns a list of all albums from a specific artist

Feel free to reach out if you have questions!
github  programming  github-starred-to-pinboard 
7 weeks ago
memoize-one: A memoization library which only remembers the latest invocation
Github repo
Name: memoize-one
Tagline: A memoization library which only remembers the latest invocation
JavaScript = 20075 bytes

# memoize-one

A memoization library that only caches the result of the most recent arguments.

[![Build Status](https://travis-ci.org/alexreardon/memoize-one.svg?branch=master)](https://travis-ci.org/alexreardon/memoize-one)
[![Downloads per month](https://img.shields.io/npm/dm/memoize-one.svg)](https://www.npmjs.com/package/memoize-one)

## Rationale

Cache invalidation is hard:

> There are only two hard things in Computer Science: cache invalidation and naming things.
> *Phil Karlton*

So keep things simple and just use a cache size of one!

Unlike other memoization libraries, `memoize-one` only remembers the latest arguments and result. No need to worry about cache busting mechanisms such as `maxAge`, `maxSize`, `exclusions` and so on which can be prone to memory leaks. `memoize-one` simply remembers the last arguments, and if the function is next called with the same arguments then it returns the previous result.

## Usage

### Standard usage

import memoizeOne from 'memoize-one';

const add = (a, b) => a + b;
const memoizedAdd = memoizeOne(add);

memoizedAdd(1, 2); // 3

memoizedAdd(1, 2); // 3
// Add function is not executed: previous result is returned

memoizedAdd(2, 3); // 5
// Add function is called to get new value

memoizedAdd(2, 3); // 5
// Add function is not executed: previous result is returned

memoizedAdd(1, 2); // 3
// Add function is called to get new value.
// While this was previously cached,
// it is not the latest so the cached result is lost

### Custom equality function

You can also pass in a custom function for checking the equality of two items.

import memoizeOne from 'memoize-one';
import deepEqual from 'lodash.isEqual';

const identity = x => x;

const defaultMemoization = memoizeOne(identity);
const customMemoization = memoizeOne(identity, deepEqual);

const result1 = defaultMemoization({foo: 'bar'});
const result2 = defaultMemoization({foo: 'bar'});

result1 === result2 // false - difference reference

const result3 = customMemoization({foo: 'bar'});
const result4 = customMemoization({foo: 'bar'});

result3 === result4 // true - arguments are deep equal

#### Equality function type signature

Here is the expected [flow](http://flowtype.org) type signature for a custom equality function:

type EqualityFn = (a: mixed, b: mixed) => boolean;

#### Custom equality function with multiple...
github  programming  github-starred-to-pinboard 
7 weeks ago
node-spotify-web: Node.js implementation of the Spotify Web protocol
Github repo
Name: node-spotify-web
Tagline: Node.js implementation of the Spotify Web protocol
JavaScript = 62509 bytes
Protocol Buffer = 19922 bytes

### Node.js implementation of the Spotify Web protocol

This module implements the "Spotify Web" WebSocket protocol that is used on
Spotify's [Web UI](http://play.spotify.com).

This module is heavily inspired by the original open-source Python implementation:


``` bash
$ npm install spotify-web


Here's an example of logging in to the Spotify server and creating a session. Then
requesting the metadata for a given track URI, and playing the track audio file
through the speakers:

``` javascript
var lame = require('lame');
var Speaker = require('speaker');
var Spotify = require('spotify-web');
var uri = process.argv[2] || 'spotify:track:6tdp8sdXrXlPV6AZZN2PE8';

// Spotify credentials...
var username = process.env.USERNAME;
var password = process.env.PASSWORD;

Spotify.login(username, password, function (err, spotify) {
if (err) throw err;

// first get a "Track" instance from the track URI
spotify.get(uri, function (err, track) {
if (err) throw err;
console.log('Playing: %s - %s', track.artist[0].name, track.name);

// play() returns a readable stream of MP3 audio data
.pipe(new lame.Decoder())
.pipe(new Speaker())
.on('finish', function () {


See the `example` directory for some more example code.


TODO: document!


(The MIT License)

Copyright (c) 2013-2014 Nathan Rajlich &lt;nathan@tootallnate.net&gt;

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
'Software'), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

github  programming  github-starred-to-pinboard 
7 weeks ago
tidal-api: An unofficial API wrapper for Tidal Music.
Github repo
Name: tidal-api
Tagline: An unofficial API wrapper for Tidal Music.
JavaScript = 28786 bytes

[![Build Status](https://travis-ci.org/spencercharest/tidal-api.svg?branch=master)](https://travis-ci.org/spencercharest/tidal-api)
[![Coverage Status](https://coveralls.io/repos/github/spencercharest/tidal-api/badge.svg?branch=master)](https://coveralls.io/github/spencercharest/tidal-api?branch=master)

# tidal-api-wrapper

An unofficial API wrapper for Tidal Music. Tidal does not provide a documented public API so all endpoints have been found using Chrome Dev Network Tools. All methods return promises and are "thenable" (with the exception of artistPicToUrl and albumArtToUrl).

# Note

Since this is an unofficial wrapper and the Tidal API is not public this wrapper could break at any time. Automated tests are performed daily on Travis and if any endpoints have changed or are not working the build will be marked as failing.

## Usage

Import tidal-api-wrapper and instantiate it.

var Tidal = require('tidal-api-wrapper');

var tidal = new Tidal();

<a name="Tidal"></a>

## Documentation

[API Reference](https://github.com/spencercharest/tidal-api/tree/master/docs/api.md)

## Examples

#### Using ES2015

import Tidal from 'tidal-api-wrapper';
// options object as an argument is optional
// if omitted Tidal will default to these values
const tidal = new Tidal({
countryCode: 'US',
limit: 1000

// search for an artist and then get their albums
tidal.search('Four Year Strong', 'artists', 1)
.then(artists => tidal.getArtistAlbums(artists[0].id))
.then((albums) => {
return albums;
.catch((err) => {

// get all artist albums and then tracks for each album
.then((albums) => {
const promises = albums.map(album =>

return Promise.all(promises)
.then((tracks) => {
return tracks;

// login and get favorite artists
tidal.login('email@example.com', 'password')
.then(auth => tidal.getFavoriteArtists())
.then((myFavoriteArtists) => {
return myFavoriteArtists;
.catch((err) => {


#### Using ES7 async/await

import Tidal from 'tidal-api-wrapper';
// options object as an argument is optional
// if omitted Tidal will default to these values
const tidal = new Tidal({
countryCode: 'US',
limit: 1000

// search for an artist and then get their albums
(async function searchArtistAndGetAlbums() {
try {
const artists = await tidal.search('Four Year Strong', 'artists', 1);
const artist = artists[0];
const albums = await tidal.getArtistAlbums(artist.id);
return albums;
} catch (e) {

// get...
github  programming  github-starred-to-pinboard 
7 weeks ago
github-app: node module to handle authentication for the GitHub Apps API
Github repo
Name: github-app
Tagline: node module to handle authentication for the GitHub Apps API
JavaScript = 1347 bytes

# GitHub Apps

NodeJS module for building [GitHub Apps](https://developer.github.com/apps/).

## Installation

npm install --save github-app

## Usage

const createApp = require('github-app');

const app = createApp({
// Your app id
id: 987,
// The private key for your app, which can be downloaded from the
// app's settings: https://github.com/settings/apps
cert: require('fs').readFileSync('private-key.pem')

### `asInstallation`

Authenticate [as an installation](https://developer.github.com/apps/building-integrations/setting-up-and-registering-github-apps/about-authentication-options-for-github-apps/#authenticating-as-an-installation), returning a [github API client](https://github.com/mikedeboer/node-github), which can be used to call any of the [APIs supported by GitHub Apps](https://developer.github.com/apps/building-integrations/setting-up-and-registering-github-apps/about-authentication-options-for-github-apps/#authenticating-as-an-installation):

//Modify value according to getInstallations return(example in asApp section)
var installationId = 99999;

app.asInstallation(installationId).then(github => {
owner: 'foo',
repo: 'bar',
number: 999,
body: 'hello world!'

### `asApp`

Authenticate [as an app](https://developer.github.com/apps/building-integrations/setting-up-and-registering-github-apps/about-authentication-options-for-github-apps/#authenticating-as-a-github-app), also returning an instance of the GitHub API client.

app.asApp().then(github => {
github  programming  github-starred-to-pinboard 
7 weeks ago
RapidX: A powerful web performance testing system
Github repo
Name: RapidX
Tagline: A powerful web performance testing system
JavaScript = 4212 bytes

# RapidX
> A powerful web performance testing system

[RapidX script reference](https://github.com/ethanent/RapidX/blob/master/COMMANDS.md) | [GitHub](https://github.com/ethanent/RapidX) | [NPM](https://www.npmjs.com/package/rapidx)

## Consistent tests

RapidX ensures that your web performance tests run the same across devices, using powerful RapidX web testing script files for benchmarking.

## Install

npm i rapidx -g

## Usage

rapidx <file (ex. example.rx )>

## Make a RapidX script

RapidX scripts are simple. They consists of lines of commands. A command line can look like this:

fetch --label=my-fetch --repeat=5 https://ethanent.me

For the command reference, see [the RapidX command reference](https://github.com/ethanent/RapidX/blob/master/COMMANDS.md).
github  programming  github-starred-to-pinboard 
7 weeks ago
TypeScript-Node-Starter: A starter template for TypeScript and Node with a detailed README describing how to use the two together.
Github repo
Name: TypeScript-Node-Starter
Tagline: A starter template for TypeScript and Node with a detailed README describing how to use the two together.
CSS = 100267 bytes
TypeScript = 29174 bytes
HTML = 13654 bytes
JavaScript = 286 bytes

# TypeScript Node Starter

[![Dependency Status](https://david-dm.org/Microsoft/TypeScript-Node-Starter.svg)](https://david-dm.org/Microsoft/TypeScript-Node-Starter) [![Build Status](https://travis-ci.org/Microsoft/TypeScript-Node-Starter.svg?branch=master)](https://travis-ci.org/Microsoft/TypeScript-Node-Starter)

**Live Demo**: [https://typescript-node-starter.azurewebsites.net/](https://typescript-node-starter.azurewebsites.net/)


The main purpose of this repository is to show a good end-to-end project setup and workflow for writing Node code in TypeScript.
I will try to keep this as up-to-date as possible, but community contributions and recommendations for improvements are encouraged and will be most welcome.

# Pre-reqs
To build and run this app locally you will need a few things:
- Install [Node.js](https://nodejs.org/en/)
- Install [MongoDB](https://docs.mongodb.com/manual/installation/)
- Install [VS Code](https://code.visualstudio.com/)

# Getting started
- Clone the repository
git clone --depth=1 https://github.com/Microsoft/TypeScript-Node-Starter.git <project_name>
- Install dependencies
cd <project_name>
npm install
- Configure your mongoDB server
# create the db directory
sudo mkdir -p /data/db
# give the db correct read/write permissions
sudo chmod 777 /data/db
- Start your mongoDB server (you'll probably want another command prompt)
- Build and run the project
npm run build
npm start
Or, if you're using VS Code, you can use `cmd + shift + b` to run the default build task (which is mapped to `npm run build`), and then you can use the command palette (`cmd + shift + p`) and select `Tasks: Run Task` > `npm: start` to run `npm start` for you.

> **Note on editors!** - TypeScript has great support in [every editor](http://www.typescriptlang.org/index.html#download-links), but this project has been pre-configured for use with [VS Code](https://code.visualstudio.com/).
Throughout the README I'll try to call out specific places where VS Code really shines or where this project has been setup to take advantage of specific features.

Finally, navigate to `http://localhost:3000` and you should see the template being served and rendered locally!

# Deploying the app
There are many ways to deploy an Node app, and in general, nothing about the deployment process changes because you're using TypeScript.
In this section, I'll walk you through how to deploy this app to Azure App Service using the extensions available in VS Code because I think it is the easiest and fastest way to get started, as well as the most friendly workflow from a developer's perspective.

## Pre-reqs
- [**Azure account**](https://azure.microsoft.com/en-us/free/) - If you don't...
github  programming  github-starred-to-pinboard 
7 weeks ago
notification-service-js: 🚦Notification Service based on Custom Elements
Github repo
Name: notification-service-js
Tagline: 🚦Notification Service based on Custom Elements
JavaScript = 8671 bytes

# Notification Service [![Twitter URL](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?hashtags=javascript%20%23webcomponents&original_referer=https%3A%2F%2Fpublish.twitter.com%2F%3FbuttonHashtag%3Djavascript%2520%2523webcomponents%26buttonText%3DNotification%2520Service%2520based%2520on%2520Custom%2520Elements.%2520Integrate%2520everywhere.%26buttonType%3DTweetButton%26buttonUrl%3Dhttps%253A%252F%252Fgithub.com%252Fshystruk%252Fnotification-service-js%26buttonVia%3Dshystrukk%26widget%3DButton&ref_src=twsrc%5Etfw&text=Notification%20Service%20based%20on%20Custom%20Elements.%20Integrate%20everywhere.&tw_p=tweetbutton&url=https%3A%2F%2Fgithub.com%2Fshystruk%2Fnotification-service-js&via=shystrukk) #
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/notification-service-js) [![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg?v=103)](https://opensource.org/licenses/mit-license.php) [![npm version](https://badge.fury.io/js/notification-service-js.svg)](https://badge.fury.io/js/notification-service-js)

Notification Service provides a simple show/hide message. It is based on [CustomElements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) and may be integrated with any framework. Push notification works through [CustomEvent](https://www.npmjs.com/package/custom-event-js) dispatcher.
**Notification Service supports all popular browsers, including Internet Explorer 11, although some polyfills are required for IE 11. Please see [here](https://www.webcomponents.org/polyfills).**


## Installation ##
#### npm
`npm install notification-service-js`

#### yarn
`yarn add notification-service-js`

## Usage ##
// As a module
import 'notification-service-js'

// As a <script> tag
<script src="node_modules/notification-service-js/build/notification-service.js"></script>

// Insert web component into the DOM

### Push notification
type: 'success', // success, error, warning
message: 'Your message has been sent',
timer: 3000 // default 5000, not required

## Props
### cross-img-src ###
The path to an image (png/svg/jpg) file, which will be used for a cross icon.
<notification-service cross-img-src="../images/cross.svg"></notification-service>

### style-src ###
The path to .css file, which will be pasted after common styles.

<notification-service style-src="build/style.css"></notification-service>

## Contributing

Any contributions you make **are greatly appreciated**.

Please read the [Contributions...
github  programming  github-starred-to-pinboard 
7 weeks ago
cryptoticker: :traffic_light: jQuery widget for retrieving live crypto values
Github repo
Name: cryptoticker
Tagline: :traffic_light: jQuery widget for retrieving live crypto values
Homepage: https://pkellz.github.io/pk/cryptoticker/
JavaScript = 4879 bytes
CSS = 847 bytes
HTML = 567 bytes

# jQuery Cryptocurrency Ticker Widget - [Demo](https://pkellz.github.io/pk/cryptoticker/)
Customizable jQuery widget that lets you retrieve live prices, market caps, and % changes of cryptocurrencies from the CoinMarketCap API


# Installation
Clone this repository or [download](https://pkellz.github.io/pk/cryptoticker/jquery-cryptocurrency-ticker-widget.zip) the plugin files here.

Include the **latest version of jQuery** in your project:
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>

Include the **jquery.cryptoticker.js** file. Make sure you include it **after** jQuery:

<script src="jquery.cryptoticker.js"></script>

Include the **cryptoticker.css** file in your `<head>` tag:

<link rel="stylesheet" href="cryptoticker.css">

## Initialize widget
To initialize the widget just insert `$({selector}).cryptoticker();` in your `$(document).ready();` section:

**You may pass a configuration object here:** `$('#tickerDiv').cryptoticker({options});`

## Options

| Option | Default | Details |
| **id** | null | Search for a crypto by id - (**id:"bitcoin"** for example) - can only return one coin at a time |
| **getTopCoins** | 10 | return **n** number of coins - overrides **'top5'** and **'top10'** but not **id** |
| **startIndex** | 0 | Index to start at. Index 0 is most likely 'Bitcoin' |
| **top5** | false | Return top 5 results |
| **top10** | false | Return top 10 results |
| **speed** | 30000 | Time in milliseconds until slide animation ends - default 30 seconds |
| **fadeInOutSpeed** | 2500 | Time in milliseconds it takes to fade out after slide animation ends - default 2.5 seconds, |
| **resetSpeed** | 1000 | Time in milliseconds it takes for the ticker to reset position after fading out - default 1 second |
| **separatorColor** | '#999999' | Default separator color |
| **separatorWidth** | 5 | Default separator width in px (**Takes in a number, NOT px**) |
| **nameColor** | '#2EABC9' | Default coin name color |
| **priceColor** | '#ffffff' | Default price color |
| **capColor** | '#ffffff' | Default market cap color |

### Examples
**Be sure to add the ticker class to the div that you want to target or else it won't have any styles!**
<div class="ticker" id="ticker_1"></div>

**Your Javascript File**
//Default ticker with no...
github  programming  github-starred-to-pinboard 
7 weeks ago
beedle: A tiny library inspired by Redux & Vuex to help you manage state in your JavaScript apps
Github repo
Name: beedle
Tagline: A tiny library inspired by Redux & Vuex to help you manage state in your JavaScript apps
Homepage: https://beedle.hankchizljaw.io
JavaScript = 6364226 bytes
Vue = 12620 bytes
HTML = 570 bytes

# Beedle

![The current build status based on wether tests are passing](https://api.travis-ci.org/hankchizljaw/beedle.svg?branch=master)
![The Uncompressed size of Beedle](http://img.badgesize.io/https://unpkg.com/beedle?label=Uncompressed%20Size)
![The GZIP size of Beedle](http://img.badgesize.io/https://unpkg.com/beedle?compression=gzip&label=GZIP%20Size)
![The Brotli size of Beedle](http://img.badgesize.io/https://unpkg.com/beedle?compression=brotli&label=Brotli%20Size)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

Beedle is a tiny library to help you manage state across your application. Inspired by great libraries like Vuex and Redux, Beedle creates a central store that enables you predictably control and cascade state across your application.

This library was initially created as a prototype for [this article on CSS-Tricks](https://css-tricks.com/build-a-state-management-system-with-vanilla-javascript/), where you learn how to build a state management system from scratch with Vanilla JavaScript.

[**See the documentation**](https://beedle.hankchizljaw.io) — [**See the project structure**](https://beedle-structure.hankchizljaw.io)

## Demos
- [**Basic demo**](https://beedle-basic-demo.hankchizljaw.io/)
- [**Advanced demo**](https://beedle-advanced-demo.hankchizljaw.io/)
- [**Vue JS demo**](https://beedle-vue-demo.hankchizljaw.io/)
- [**React JS demo**](https://beedle-react-demo.hankchizljaw.io/)

# How it works

Beedle creates a pattern where a single source of truth, the '*Application State*' cascades state across your app in a predictable fashion. To modify state, a set flow of `actions` and `mutations` help create a traceable data-flow that makes things a little easier to debug.

Using a [Pub/Sub pattern](https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern) which notifies anything that is subscribed to changes, a fully reactive front-end can be acheived with a few kilobytes of vanilla JavaScript.

![A flow diagram that shows an action that calls a mutation, which mutates the state and triggers an update to anything that is listening](https://s3-us-west-2.amazonaws.com/s.cdpn.io/174183/beedle-flow-diagram.png)

As the diagram above shows, a simple, predictable flow is created by pushing data into an `action` which subsequently calls one or more `mutations`. Only the `mutation` can modify state, which helps with keeping track of changes.

[**Continue reading the documentation**](https://beedle.hankchizljaw.io/guide/state.html)

## A mini library for small projects

Beedle is inspired by libraries like Redux, but certainly isn't designed to replace it. Beedle is aimed more at tiny little applications or where a development team might be looking to create the smallest possible footprint with their JavaScript.

## Performance budget

Beedle is intended to be _tiny_, so the largest that the uncompressed size will...
github  programming  github-starred-to-pinboard 
7 weeks ago
http-cache-semantics: RFC 7234 in JavaScript. Parses HTTP headers to correctly compute cacheability of responses, even in complex cases
Github repo
Name: http-cache-semantics
Tagline: RFC 7234 in JavaScript. Parses HTTP headers to correctly compute cacheability of responses, even in complex cases
Homepage: http://httpwg.org/specs/rfc7234.html
JavaScript = 69538 bytes

# Can I cache this? [![Build Status](https://travis-ci.org/kornelski/http-cache-semantics.svg?branch=master)](https://travis-ci.org/kornelski/http-cache-semantics)

`CachePolicy` tells when responses can be reused from a cache, taking into account [HTTP RFC 7234](http://httpwg.org/specs/rfc7234.html) rules for user agents and shared caches. It's aware of many tricky details such as the `Vary` header, proxy revalidation, and authenticated responses.

## Usage

Cacheability of an HTTP response depends on how it was requested, so both `request` and `response` are required to create the policy.

const policy = new CachePolicy(request, response, options);

if (!policy.storable()) {
// throw the response away, it's not usable at all

// Cache the data AND the policy object in your cache
// (this is pseudocode, roll your own cache (lru-cache package works))
letsPretendThisIsSomeCache.set(request.url, {policy, response}, policy.timeToLive());

// And later, when you receive a new request:
const {policy, response} = letsPretendThisIsSomeCache.get(newRequest.url);

// It's not enough that it exists in the cache, it has to match the new request, too:
if (policy && policy.satisfiesWithoutRevalidation(newRequest)) {
// OK, the previous response can be used to respond to the `newRequest`.
// Response headers have to be updated, e.g. to add Age and remove uncacheable headers.
response.headers = policy.responseHeaders();
return response;

It may be surprising, but it's not enough for an HTTP response to be [fresh](#yo-fresh) to satisfy a request. It may need to match request headers specified in `Vary`. Even a matching fresh response may still not be usable if the new request restricted cacheability, etc.

The key method is `satisfiesWithoutRevalidation(newRequest)`, which checks whether the `newRequest` is compatible with the original request and whether all caching conditions are met.

### Constructor options

Request and response must have a `headers` property with all header names in lower case. `url`, `status` and `method` are optional (defaults are any URL, status `200`, and `GET` method).

const request = {
url: '/',
method: 'GET',
headers: {
accept: '*/*',

const response = {
status: 200,
headers: {
'cache-control': 'public, max-age=7234',

const options = {
shared: true,
cacheHeuristic: 0.1,
immutableMinTimeToLive: 24*3600*1000, // 24h
ignoreCargoCult: false,
trustServerDate: true,

If `options.shared` is `true` (default), then the response is evaluated from a perspective of a shared cache (i.e. `private` is not cacheable and `s-maxage` is respected). If `options.shared` is `false`, then the response is evaluated...
github  programming  github-starred-to-pinboard 
7 weeks ago
appsync-auth0: Authenticating an AWS AppSync GraphQL API with Auth0
Github repo
Name: appsync-auth0
Tagline: Authenticating an AWS AppSync GraphQL API with Auth0
JavaScript = 7865 bytes
HTML = 1590 bytes
CSS = 440 bytes

# Authenticating AWS AppSync with Auth0

This repo goes along with the Medium blog post [Authenticating an AWS AppSync GraphQL API with Auth0](https://medium.com/@dabit3/authenticating-an-aws-appsync-graphql-api-with-auth0-48835691810a).

### To use this repo, you must have the following credentials:

1. An Auth0 API configured with RS256 signing algorithm for both general & OAuth signing.
2. AWS AppSync API configured with your Auth0 app domain.

## Getting started

1. Clone the repo

git clone https://github.com/dabit3/appsync-auth0.git

2. Change into the new directory

cd appsync-auth0

3. Install dependencies

npm i
# or

4. Update the AppSync graphqlEndpoint in AppSync.js with your AppSync endpoint.

5. In App.js, configure the call to Auth0 with your credentials:

this.auth0 = new auth0.WebAuth({
domain: '<YOURAPPDOMAIN>.auth0.com',
redirectUri: 'http://localhost:3000/callback',
audience: 'https://<YOURAPPDOMAIN>.auth0.com/userinfo',
responseType: 'token id_token',
scope: 'openid'

6. Run the app

npm start
github  programming  github-starred-to-pinboard 
7 weeks ago
serlina: A progressive React serverside-rendering framework.
Github repo
Name: serlina
Tagline: A progressive React serverside-rendering framework.
Homepage: https://serlina.js.org
TypeScript = 19533 bytes
JavaScript = 8342 bytes
CSS = 27 bytes


A progressive React serverside-rendering framework.

## Motivation

I love using [Next.js](https://github.com/zeit/next.js/), but most of my projects need to use our own web server framework while Next.js run it own server. So I begin making a SSR framework (core) that like Next.js but open for server implementation. It does all the building, compiling, rendering-to-string things and give the rest render-to-html things to your own web server.

> Of course I know Next.js can [custom server and routing](https://github.com/zeit/next.js#custom-server-and-routing), but while Next.js handle the whole http `context`, [I cannot use it in a high layer web framework](https://github.com/eggjs/egg/issues/328).

[Read the announcing post](https://medium.com/@djyde/serlina-a-progressive-react-serverside-rendering-framework-a4de2d71d984)

## Integrations

- [egg-serlina](https://github.com/serlina-community/egg-serlina)
- [serlina-koa](/packages/serlina-koa/README.md)
- [serlina-serve](/packages/serlina-serve/README.md)

## Quick Start

npm i serlina react react-dom --save

Create a folder structure like:

├── index.js
├── pages
│   └── page1.js

// pages/page1.js

export default () => {
return <div>Hello Serlina!</div>

And implement a most simple http server:

// index.js

const { Serlina } = require('serlina')
const path = require('path')

const http = require('http')

const serlina = new Serlina({
baseDir: path.resolve(__dirname, './')

.then(() => {
http.createServer(async (req, res) => {
res.writeHead(200, { 'Content-Type': 'text/html' })
if (req.url === '/page1') {
const rendered = await serlina.render('page1')
} else {

Open `http://localhost:8090/page1`, you will see the page you wrote in React!

## Documentation

Visit [Full Doc](https://serlina.js.org)

## Development

npm run bootstrap

npm test # run test

# License

MIT License
github  programming  github-starred-to-pinboard 
7 weeks ago
inline-mdx.macro: A babel-macro for transforming mdx inline
Github repo
Name: inline-mdx.macro
Tagline: A babel-macro for transforming mdx inline
JavaScript = 3781 bytes

# `inline-mdx.macro`

[![Babel Macro](https://img.shields.io/badge/babel--macro-%F0%9F%8E%A3-f5da55.svg?style=flat-square)](https://github.com/kentcdodds/babel-plugin-macros)

[![npm version](https://img.shields.io/badge/npm-0.2.5-brightgreen.svg)](https://github.com/hamlim/inline-mdx.macro)

A babel-macro for converting mdx into an inline component.

import { inline } from 'inline-mdx.macro'
import { MDXTag } from '@mdx-js/tag'

const SomeMDXComponent = inline`

## This is some MDX source

<SomeComponent />



const SomeMDXComponent = ({ components, ...props }) => (
<MDXTag name="wrapper" components={components}>
<MDXTag name="h2" components={components}>{`This is some MDX source`}</MDXTag>{' '}
<SomeComponent />{' '}
<MDXTag name="p" components={components}>

### You can also use `import` inline as well

import React from 'react'
import { inline, imports } from 'inline-mdx.macro'

const SomeMDXComponent = inline`

## This is some MDX source

<SomeComponent />

import Foo from './foo';
import Another from './another';


generates ...

import Foo from './foo'
import Another from './another'

const SomeMDXComponent = ({ components, ...props }) => (
<MDXTag name="wrapper" components={components}>
>{`This is some MDX source`}</MDXTag>
<SomeComponent />
<MDXTag name="p" components={components}>

### Getting started

#### Set up an application

Recommended setup - set up an application from scratch

[yarn](https://yarnpkg.com/en/docs/cli/) or [npm](https://docs.npmjs.com/cli/install) can be used

create a package.json file
npm init

yarn init

install webpack and webpack-cli as dev dependencies
npm i webpack webpack-cli webpack-dev-server html-webpack-plugin -D

yarn add webpack webpack-cli webpack-dev-server html-webpack-plugin -D

add to package.json
"scripts": {
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"

install and save react and react-dom
npm i react react-dom

yarn add react react-dom

install and save the following dev dependencies
npm i @babel/core babel-core@^7.0.0-0 babel-loader @babel/preset-env...
github  programming  github-starred-to-pinboard 
7 weeks ago
« earlier      
360 360-photo 360-tour 360-video 3d 3d-home 3d-printing 3d-rendering 3d-scanning 3d-tour 3d/vr-platforms \ accelerator accept-crypto acquisition add-tours adobe adoption advertisement advertising advice agency agents aggregators aging ai airbnb airdrops airlines algorithms amazon android animated-gif ant-design apartments api apollo app-dev app-development applications apps ar ar-kit architecture artificialintelligence author authoring automation autostich awareness background-check bad balance bigdata bike binance bitbucket bitcoin bitpay blockchain blogging blue-light book book-review bookmarking bot bots box branding brave brokerage brokers btc btel business business-model button byzantine cache calculator camera canada capitalism career cars case-study casino casper chair change chat chatbot cheatsheet children china chrome citizenship civil cli cms code code-playground code-review code-snippets coin coinbase coins college college-tour comedy commercial comparisons compass competitor compile config consensus consensys construction consultants content copyright course create-blockchain create-ethereum creation credit crowdfunding crypto cryptocurrencies cryptocurrency cryptos cryptotrading css-in-js cupix dag dapp dapp-tutorial dat data data-visualizations datasets dating day-rate daydream debate decentralized decred deep-learning demo design design-patterns dev developers developing-blockchain diakrit diet digital-assets discord discussion disney disruptors distance dividends dj dns documentation dog drones drupal earn earth ecommerce economics editor education elearning electron embed emotions engineer engineering entrepreneur entrepreneurship eos eq estimates eth ethereum ethereum-book ethereum-projects event events evolution example example-apps example-tour examples exchange extension eyespy face-recognition facebook faq fear feature feature-flag field-trip filecoin films finance financial-model fitness floor-plans floored fonts forbes forecasts forks foxton freelance friends fsbo funding fundraising furniture futures gallery gambling games gaze-coin generators geocv get3dtours git-alternative github github-starred-to-pinboard gitlab glasses glitch glorified-gallery golf-simulators google google-street-view graphql growing growth gryd guide guided-tour guidelines hackernews hardware headset headsets health healthcare hiring holobuilder home home-assistant home-automation home-office homes hotel hourly housing hutch ico ide ideas idx ifttt iguide iguide-service-provider images immoviewer income india industries innovative insidemaps inspiration instavr integration interest interior-design interview introduction investing investment-fund investors ipdb ipfs issues istaging japan javascript jest-puppeteer jimmysong job job-search jobs joeluber journalism jpmc js kendo keybase keynote kickstarter knowing-yourself koaware korea kpi krpano kubernetes kyber kyle lasik launch lcp360. leadership learning lectures lens-distortion library license lightning list listing-fee listings load lol luxury machine-learning mainstream malaysia management mansion-global map maps markdown market-adoption marketing marketing-360 markets matterport meal-kit meditation metamask micro-management microblog migraines millennials miner minimalism mining mls mobile-app mockup money motivation move movie movies museums music mythic-vr nbc need-tours negatives nem nest-seekers nestseekers new-york nginx nj no-ico node nodejs nutrition nyc oculus olympics online online-brokerage online-courses open-house opensource overstock pano panono panorama panoskin parenting parity partnership passport patterns payment performance personality petro philly photogrammetry pixers planitar platform play playground plex pogo-pono polly pomodoro portfolio pos pre-money prediction presentation press press-release price-list privacy pro product-hunt production productivity programming projects property proposal proptech prospective-agents pshychology psychology pull-requests pwa rate rates react react-apps react-native react-patterns react-virtualized react-vr read reading-mode real-estate real-vision realestate realtime realtor.com realtors reasons recording redfin redux redux-saga remote rent renting report research responsive rest retail retirement ricoh ripple robot rooomy roundme sandbox scaling scams screenshot search second-life security senses service service-provider share sheet-music ship-luggage shooting show-my-property sickness siliconvalley single-page-listing site slack sleep slides smart-contract smart-home sms snark social software solidity sotheby sports ssl staging start-business starter startup startups static static-site stats stellar stitch stock storage storybook storytelling streaming street-view streeteasy streetview studio style-guide styled-components success sumerian support tango teaching teams tech tendermint testing theme theory theta thinglink threesixtytours ticketing tickets timer tnw token tool tools tour tour-builder tour-creator tourism tours trading training transaction-speed transported travel trends trial trulia twitter typescript ui unity us use-cases ux valuation vault vc vc-list venture venture_capital via:adie_codes via:awhite via:dmje via:jamiew via:jaredb via:kensnyder via:linkt via:pimvd via:popular via:shrinkingbundle via:tclancy via:thec13 via:toddc via:tofo via:zchi via:zero1infinity via:zhumink video video-marketing video-tour view-virtual-tour viewer vim virtual virtual-real-estate virtual-staging virtual-tour virtual-tour-company virtual-tour-gallery virtualapt virtualreality visualization vitaly voice vpix vr vr-global vr-handle vr-pages vr-shopping vr-squad vr-world vrglobal vue walkthrough wallet web web3 webvr whitepaper wordpress work workout worthless wp3d write writing xrp yc ydreams youvisit youvr zero zillow zipcode

Copy this bookmark: