recent bookmarks

P-Brain.ai: Natural language virtual assistant using Node.js + Bootstrap
Github repo
Name: P-Brain.ai
Tagline: Natural language virtual assistant using Node.js + Bootstrap
Languages:
JavaScript = 116096 bytes
HTML = 24398 bytes
CSS = 11797 bytes
Shell = 186 bytes

# P-Brain.ai - Voice Controlled Personal Assistant

[![Join the chat at https://gitter.im/P-Brain/Lobby](https://badges.gitter.im/P-Brain/Lobby.svg)](https://gitter.im/P-Brain/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [![Donate](https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=pat64%2eai%40gmail%2ecom&lc=IE&item_name=P%2dBrain%2eai&currency_code=EUR&bn=PP%2dDonationsBF%3abtn_donate_LG%2egif%3aNonHosted)

Natural language virtual assistant using Node + Bootstrap

### Screenshot

![alt tag](app_screenshot.png)

### Video Introduction To The Project

https://www.youtube.com/watch?v=4EF_qEYNNwU

# Dependencies

- Node 6
- Python >= 2
- Yarn / npm

# Setup

## Install

Install Yarn https://yarnpkg.com/en/docs/install

Clone repo, cd into its directory and type `yarn` & `yarn start`

Add api info for http://openweathermap.org/api and https://newsapi.org/account to `config/index.js`

Open Chrome and enter http://localhost:4567/

Say `Hey Brain`, `Brain` or `Okay Brain` followed by your query (i.e `Hey Brain, What is the weather in Paris`).

## Install - Extra Windows Instructions

Install Python: https://www.python.org/downloads/windows/

Install Node.js v6: https://nodejs.org/en/download/

Install Windows Build Tools: `npm install --global --production windows-build-tools`

# Skills

## Adding Skills

Add a skill by creating a new folder with the name of your new skill and adding an `index.js`.

Add functions for `intent` and `{skill_name}_resp` to that index, the latter contining the logic that will respond to a query. The `{skill_name}_resp` function must have a response type of `String`

In `intent` add `return {keywords:['key 1','key 2'], module:'{skill_name}'}` where `keywords` are the phrases you wish the skill to respond to and `{skill_name}` is the name of your new skill.

Add `module.exports = {intent, get: {skill_name}_resp};` to the end of your `index.js`

Add that new folder to the `skills` directory in the project.

And bang, Brain will automatically import and enable your new skill!

### API

For more detail on adding skills see the Wiki page [Adding Skills](https://github.com/patrickjquinn/P-Brain.ai/wiki/Adding-Skills).

# Clients

### Web Client
`http://localhost:4567/api/ask?q={query}`
`http://localhost:4567/`
`http://localhost:4567/settings.html`
`http://localhost:4567/users.html`

### Raspberry Pi Client

The Raspberry Pi Client for this project is available here: https://github.com/patrickjquinn/P-Brain.ai-RasPi

### MagicMirror+P-Brain

Coming Soon!

### Android Client

https://github.com/timstableford/P-BrainAndroid

### iOS...
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
moize: A simple, fast, versatile memoization library for JS
Github repo
Name: moize
Tagline: A simple, fast, versatile memoization library for JS
Homepage: https://planttheidea.github.io/moize/
Languages:
JavaScript = 143192 bytes

# moize

<img src="https://img.shields.io/badge/build-passing-brightgreen.svg"/>
<img src="https://img.shields.io/badge/coverage-100%25-brightgreen.svg"/>
<img src="https://img.shields.io/badge/license-MIT-blue.svg"/>

`moize` is a [blazing fast](#benchmarks) memoization library for JavaScript. It handles multiple parameters (including default values) without any additional configuration, and offers options to help satisfy a number of implementation-specific needs. It has no dependencies, and is ~3.2kb when minified and gzipped.

## Table of contents
* [Upgrade notification](#upgrade-notification)
* [Installation](#installation)
* [Usage](#usage)
* [Advanced usage](#advanced-usage)
* [equals](#equals)
* [isPromise](#ispromise)
* [isReact](#isreact)
* [maxAge](#maxage)
* [maxArgs](#maxargs)
* [maxSize](#maxsize)
* [onExpire](#onexpire)
* [promiseLibrary](#promiselibrary)
* [serialize](#serialize)
* [serializeFunctions](#serializefunctions)
* [serializer](#serializer)
* [transformArgs](#transformargs)
* [updateExpire](#updateexpire)
* [Usage with shortcut methods](#usage-with-shortcut-methods)
* [moize.maxAge](#moizemaxage)
* [moize.maxArgs](#moizemaxargs)
* [moize.maxSize](#moizemaxsize)
* [moize.promise](#moizepromise)
* [moize.react](#moizereact)
* [moize.reactSimple](#moizereactsimple)
* [moize.serialize](#moizeserialize)
* [moize.simple](#moizesimple)
* [Composition](#composition)
* [Introspection](#introspection)
* [isMoized](#ismoized)
* [Benchmarks](#benchmarks)
* [Single parameter](#single-parameter)
* [Multiple parameters (primitives only)](#multiple-parameters-primitives-only)
* [Multiple parameters (complex objects)](#multiple-parameters-complex-objects)
* [Direct cache manipulation](#direct-cache-manipulation)
* [add](#addkey-value)
* [clear](#clear)
* [has](#hasargs)
* [keys](#keys)
* [remove](#removekey)
* [values](#values)
* [Browser support](#browser-support)
* [Development](#development)

## Upgrade notification

Users of `moize` 2.x.x may experience breaking changes, especially if using a custom cache or using `moize.react` in a mutative way. Please see the [changelog](CHANGELOG.md) for more details about how to manage the upgrade.

## Installation

```
$ npm i moize --save
```

## Usage

```javascript
import moize from 'moize';

const method = (a, b) => {
return a + b;
};

const memoized = moize(method);

memoized(2, 4); // 6
memoized(2, 4); // 6, pulled from cache
```

All parameter types are supported, including circular objects, functions, etc. There are also a number of shortcut methods to easily create memoization for targeted use-cases. You can even memoize functional...
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
Twitter
RT : Carrot 'bout to drop the healthiest verse of all time
from twitter
10 days ago by CriticalMiss
Injuries Reported After Shooting At Florida High School | HuffPost
Injuries Reported After Shooting At Florida High School Another day under trumps governing
from twitter
10 days ago by Vietvet52
react-cssom: Css selector for React Components
Github repo
Name: react-cssom
Tagline: Css selector for React Components
Languages:
JavaScript = 11989 bytes

# react-cssom

[![Build Status](https://travis-ci.org/mbasso/react-cssom.svg?branch=master)](https://travis-ci.org/mbasso/react-cssom)
[![npm version](https://img.shields.io/npm/v/react-cssom.svg)](https://www.npmjs.com/package/react-cssom)
[![npm downloads](https://img.shields.io/npm/dm/react-cssom.svg?maxAge=2592000)](https://www.npmjs.com/package/react-cssom)
[![Coverage Status](https://coveralls.io/repos/github/mbasso/react-cssom/badge.svg?branch=master)](https://coveralls.io/github/mbasso/react-cssom?branch=master)
[![Join the chat at https://gitter.im/mbasso/react-cssom](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/mbasso/react-cssom?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

> Css selector for React Components

![Preview](preview.gif)

## Motivation

Styling components is a critical point when we decide to develop in React.
There are a lot of ways in which we can do this but all of these have pros and cons.
In some situations this means having a strong connection with the source code, that is not so good.
With ReactCSSOM we have tried to develop a system that allows us to separate `js` and `css`.

Using ReactCSSOM means:

- Scoped styles based on component's structure
- Each Component has its own `style.css`
- No extra inline styles, use them only when and where you really need, this means better performance
- No limitations to CSS power
- Easy to use with CSS Preprocessors (no more stuff needed)
- Highly expressive
- Lightweight, only 88 lines of js

## Installation

You can install react-cssom using [npm](https://www.npmjs.com/package/react-cssom):

```bash
npm install --save react-cssom
```

If you aren't using npm in your project, you can include ReactCSSOM using UMD build in the dist folder with `<script>` tag.

## Usage

### Basic

Once you have installed react-cssom, supposing a CommonJS environment, you can import it in your index file, before `ReactDOM.render` and `App` import.

```js
import React from 'react';
import ReactDOM from 'react-dom';
import ReactCSSOM from 'react-cssom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));
```

Now you can use react-cssom as you can see in the gif above, just like normal css, but with a special selector for React Components.
You can load styles in the way that you prefer but is important to keep in mind that selectors must be in this form:

```css
.⚛ComponentName
```

For example, this is a valid one `.⚛App`.
So, **pay attention that components' names and css selectors always match.
This is particular important if you have css-modules that modifies the original names, or code obfuscation.**

The first ones for example need a syntax like this:

```css
:global .⚛ComponentName {
/* styles here */
}
```

And the second one, considering for example a minification process with webpack's UglifyJsPlugin (see [here](https://github.com/facebook/react/issues/4915) for more information),
need a component with a...
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
Twitter
Woman Busts Burglar Watching Porn On Home Computer…
from twitter
10 days ago by Buffalo_Goku
snapstub: Copy API endpoints to your fs and run a local server using them
Github repo
Name: snapstub
Tagline: Copy API endpoints to your fs and run a local server using them
Languages:
JavaScript = 19263 bytes

# snapstub

[![NPM version](https://badge.fury.io/js/snapstub.svg)](https://npmjs.org/package/snapstub) [![Build Status](https://travis-ci.org/ruyadorno/snapstub.svg?branch=master)](https://travis-ci.org/ruyadorno/snapstub)

> Snapshot-based stub/mocking of APIs

Small command line tool that allows you to take "snapshots" of any given API endpoint and store the response. Using the `start` command will spawn a server that will serve all previously stored endpoints.

Heavily inspired by [Jest Snapshot testing](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html)

## Table of Contents

- [Install](#install)
- [Usage](#usage)
- [Advanced Usage](#advanced-usage)
- [Saving standard input data into a new endpoint](#saving-standard-input-data-into-a-new-endpoint)
- [Using different http methods](#using-different-http-methods)
- [Using custom headers to add a new route](#using-custom-headers-to-add-a-new-route)
- [Sending data when adding a new route](#sending-data-when-adding-a-new-route)
- [Sending data read from a file](#sending-data-read-from-a-file)
- [Change defaults](#change-defaults)
- [More info](#more-info)
- [Programmatic API](#programmatic-api)
- [add(opts)](#addopts)
- [save(opts)](#saveopts)
- [start(opts)](#startopts)
- [stop()](#stop)
- [Credit](#credit)
- [Maintainers](#maintainers)
- [Contribute](#contribute)
- [License](#license)

## Install

```sh
npm install -g snapstub
```

<br/>

## Usage

Make sure you're in the desired folder to host your api mock files.

:arrow_down: Creates a new api stub:

```sh
snapstub add http://example.com/api/foo/bar
```

...create as many snapshots as you want.

:rocket: Starts your mock server:

```sh
snapstub start
```

:sparkles: Your endpoint will be locally available at: `http://localhost:8059/api/foo/bar`

<br/>

## Advanced Usage

### Saving standard input data into a new endpoint

This is a very useful workflow that allows you to combine Chrome's **Copy as cURL** web dev tools option with the ability to store a snapstub route.

```sh
curl http://example.com/api/foo | snapstub save /api/foo
```

or you can just save any arbitrary data:

```sh
cat foo.json | snapstub save /api/foo # similar to $ cp foo.json __mocks__/api/foo
```

or even:

```sh
echo '{"data":true}' | snapstub save /api/foo
```

### Using different http methods

If you want to save one or many different http methods, use the `--method` option:

```sh
snapstub add http://example.com/api/foo/bar --method=get,post,put
```

### Using custom headers to add a new route

If you need to pass a custom header along with your request, let's say one is needed for a auth token or any other reason, use the `--header` option:

```sh
snapstub add http://example.com/api/user/42 --header "X-Token: 1234"
```

You...
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
Black Panther’s Danai Gurira Is Just as Excited About the Movie as You Are | FLARE | February 14, 2018
If you don’t know, now you know—Danai Gurira '01 is a straight-up treasure. Until now, the American-born, Zimbabwean-raised actor and playwright was probs best known for her portrayal of the ass-kicking, katana-wielding Michonne on "The Walking Dead," but her turn as Wakandan military general Okoye in Marvel’s highly (HIGHLY) anticipated superhero film, "Black Panther," is being lauded as a career milestone… and deservedly so.
macalumni  BlackPanther  TheWalkingDead  actress 
10 days ago by macalestercollege
jimp: An image processing library written entirely in JavaScript for Node, with zero external or native dependencies.
Github repo
Name: jimp
Tagline: An image processing library written entirely in JavaScript for Node, with zero external or native dependencies.
Languages:
JavaScript = 290919 bytes
HTML = 6363 bytes

# Jimp #

The "JavaScript Image Manipulation Program" :-)

An image processing library for Node written entirely in JavaScript, with zero native dependencies.

Installation: `npm install --save jimp`

Example usage:

```js
var Jimp = require("jimp");

// open a file called "lenna.png"
Jimp.read("lenna.png", function (err, lenna) {
if (err) throw err;
lenna.resize(256, 256) // resize
.quality(60) // set JPEG quality
.greyscale() // set greyscale
.write("lena-small-bw.jpg"); // save
});
```

Using promises:

```js
Jimp.read("lenna.png").then(function (lenna) {
return lenna.resize(256, 256) // resize
.quality(60) // set JPEG quality
.greyscale() // set greyscale
.write("lena-small-bw.jpg"); // save
}).catch(function (err) {
console.error(err);
});
```

## Basic usage ##

The static `Jimp.read` method takes the path to a PNG, JPEG or BMP file and returns a Promise:

```js
Jimp.read("./path/to/image.jpg").then(function (image) {
// do stuff with the image
}).catch(function (err) {
// handle an exception
});
```

The method can also read a PNG, JPEG or BMP buffer or from a URL:

```js
Jimp.read(lenna.buffer).then(function (image) {
// do stuff with the image
}).catch(function (err) {
// handle an exception
});

Jimp.read("http://www.example.com/path/to/lenna.jpg").then(function (image) {
// do stuff with the image
}).catch(function (err) {
// handle an exception
});
```

### Basic methods ###

Once the promise is fulfilled, the following methods can be called on the image:

```js
/* Resize */
image.contain( w, h[, alignBits || mode, mode] ); // scale the image to the given width and height, some parts of the image may be letter boxed
image.cover( w, h[, alignBits || mode, mode] ); // scale the image to the given width and height, some parts of the image may be clipped
image.resize( w, h[, mode] ); // resize the image. Jimp.AUTO can be passed as one of the values.
image.scale( f[, mode] ); // scale the image by the factor f
image.scaleToFit( w, h[, mode] ); // scale the image to the largest size that fits inside the given width and height

// An optional resize mode can be passed with all resize methods.

/* Crop */
image.autocrop([tolerance, frames]); // automatically crop same-color borders from image (if any), frames must be a Boolean
image.crop( x, y, w, h ); // crop to the given region

/* Composing */
image.blit( src, x, y[, srcx, srcy, srcw, srch] );
// blit the image with another Jimp image at x, y, optionally cropped.
image.composite( src, x,...
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
Twitter
are you guys ready for her to release a book and then star in her own porno reanacment with deepfake shopping Trump…
from twitter_favs
10 days ago by ejl
natural-regex: Create regex from natural language
Github repo
Name: natural-regex
Tagline: Create regex from natural language
Languages:
JavaScript = 35429 bytes

# natural-regex

[![Build Status](https://travis-ci.org/mbasso/natural-regex.svg?branch=master)](https://travis-ci.org/mbasso/natural-regex)
[![npm version](https://img.shields.io/npm/v/natural-regex.svg)](https://www.npmjs.com/package/natural-regex)
[![npm downloads](https://img.shields.io/npm/dm/natural-regex.svg?maxAge=2592000)](https://www.npmjs.com/package/natural-regex)
[![Join the chat at https://gitter.im/mbasso/natural-regex](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/mbasso/natural-regex?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

> Create regex from natural language

---

**Attention - This project isn't completed yet. There might be breaking changes until version 1.0.0. Feel free to contribute, see [TODO](https://github.com/mbasso/natural-regex/blob/master/TODO.md) to get started.**
---

---

[natural-regex](https://github.com/mbasso/natural-regex) is a parser that allows you to write regular expressions in natural language.
This means that you can write self documentating regex using a simpler syntax that can be undestood by anyone.
No more pain with validations and other stuff.

## Installation

You can install natural-regex using [npm](https://www.npmjs.com/package/natural-regex):

```bash
npm install --save natural-regex
```

If you aren't using npm in your project, you can include `NaturalRegex` using UMD build in the dist folder with `<script>` tag.

## Usage

Once you have installed natural-regex, supposing a CommonJS environment, you can import and immediately use it:

```js
import NaturalRegex from 'natural-regex';
// validate string
const dateAndEmail = NaturalRegex.from('starts with dd/MM/yyyy, space, minus, space and then email, end.');
dateAndEmail.test('06/07/2016 - foo@bar.com'); // this evaluates true
dateAndEmail.test('Foo Bar foo@bar'); // this evaluates false

// replace in string
NaturalRegex.replace({
string: '06/07/2014 - foo@bar.com',
match: 'yyyy',
replace: '2016',
});
// this returns '06/07/2016 - foo@bar.com'
```

NaturalRegex also includes a [command line tool](https://github.com/mbasso/natural-regex-cli), check [this](https://github.com/mbasso/natural-regex/wiki/Cli) for more information.

## Documentation

Visit the [Wiki](https://github.com/mbasso/natural-regex/wiki) for the full documentation.

## Examples

Examples can be found [here](https://github.com/mbasso/natural-regex/wiki/Examples)

## Change Log

This project adheres to [Semantic Versioning](http://semver.org/).
Every release, along with the migration instructions, is documented on the Github [Releases](https://github.com/mbasso/natural-regex/releases) page.

## Authors
**Matteo Basso**
- [github/mbasso](https://github.com/mbasso)
- [@teo_basso](https://twitter.com/teo_basso)

## Copyright and License
Copyright (c) 2016, Matteo Basso.

natural-regex source code is licensed under the...
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
Twitter
Jeg hadde skraping så jeg var allerede operert men de tok visst ikke ut alt og…
from twitter_favs
10 days ago by asbjornu
mithril.js: A Javascript Framework for Building Brilliant Applications
Github repo
Name: mithril.js
Tagline: A Javascript Framework for Building Brilliant Applications
Homepage: http://mithril.js.org
Languages:
JavaScript = 604077 bytes
HTML = 9556 bytes
Batchfile = 23 bytes

mithril.js [![NPM Version](https://img.shields.io/npm/v/mithril.svg)](https://www.npmjs.com/package/mithril) [![NPM License](https://img.shields.io/npm/l/mithril.svg)](https://www.npmjs.com/package/mithril) [![NPM Downloads](https://img.shields.io/npm/dm/mithril.svg)](https://www.npmjs.com/package/mithril)
==========

<p align="center">
<a href="https://travis-ci.org/MithrilJS/mithril.js">
<img src="https://img.shields.io/travis/MithrilJS/mithril.js/next.svg" alt="Build Status">
</a>
<a href="https://gitter.im/mithriljs/mithril.js">
<img src="https://img.shields.io/gitter/room/mithriljs/mithril.js.svg" alt="Gitter" />
</a>
</p>

- [What is Mithril?](#what-is-mithril)
- [Installation](#installation)
- [Documentation](#documentation)
- [Getting Help](#getting-help)
- [Contributing](#contributing)

## What is Mithril?

A modern client-side Javascript framework for building Single Page Applications. It's small (<!-- size -->8.62 KB<!-- /size --> gzipped), fast and provides routing and XHR utilities out of the box.

Mithril is used by companies like Vimeo and Nike, and open source platforms like Lichess 👍.

Browsers all the way back to IE9 are supported, no polyfills required 👌.

## Installation

### CDN

```html
<script src="https://unpkg.com/mithril"></script>
```

### npm

```bash
$ npm install mithril
```

The ["Getting started" guide](https://mithril.js.org/#getting-started) is a good place to start learning how to use mithril.

## Documentation

Documentation lives on [mithril.js.org](https://mithril.js.org).

You may be interested in the [API Docs](https://mithril.js.org/api.html), a [Simple Application](https://mithril.js.org/simple-application.html), or perhaps some [Examples](https://mithril.js.org/examples.html).

## Getting Help

Mithril has an active & welcoming community on [Gitter](https://gitter.im/mithriljs/mithril.js), or feel free to ask questions on [Stack Overflow](https://stackoverflow.com/questions/tagged/mithril.js) using the `mithril.js` tag.

## Contributing

There's a [Contributing FAQ](https://mithril.js.org/contributing.html) on the mithril site that hopefully helps, but if not definitely hop into the [Gitter Room](https://gitter.im/mithriljs/mithril.js) and ask away!

---

Thanks for reading!

🎁
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
Twitter
RT : This is pungent & untruthful even for the embittered . Some unfortunate backgrou…
from twitter
10 days ago by Somite
react-pomodoro: :alarm_clock: Pomodoro timer built with ReactJS.
Github repo
Name: react-pomodoro
Tagline: :alarm_clock: Pomodoro timer built with ReactJS.
Homepage: http://afonsopacifer.github.io/react-pomodoro/
Languages:
JavaScript = 15066 bytes
CSS = 6153 bytes
HTML = 1630 bytes

# [React Pomodoro](http://afonsopacifer.github.io/react-pomodoro/)

[![Build Status](https://travis-ci.org/afonsopacifer/react-pomodoro.svg?branch=master)](https://travis-ci.org/afonsopacifer/react-pomodoro)
[![release](https://img.shields.io/badge/release-v0.4.1-brightgreen.svg)](https://github.com/afonsopacifer/react-pomodoro/archive/0.4.1.zip)
[![Dependency Status](https://david-dm.org/afonsopacifer/react-pomodoro.svg)](https://david-dm.org/afonsopacifer/react-pomodoro)
[![devDependency Status](https://david-dm.org/afonsopacifer/react-pomodoro/dev-status.svg)](https://david-dm.org/afonsopacifer/react-pomodoro#info=devDependencies)

> Pomodoro timer for developers.

![homescreen](homescreen.png)

## Features

- **Add to homescreen**
- **Offline support**
- **Times available:**
- Timer for code - 25min
- Timer for social - 5min
- Timer for Coffee - 15min
- **Time display:**
- Page display
- Title display <br><br>
![title](title.jpg)
- **Alarms available:**
- Web Notifications <br>
![notifications](notifications.png)
- Vibration
- Songs
- **Basic controls:**
- Play button
- Pause button
- **Keyboard Shortcuts**
- Space: Play
- Ctrl/Command + Left: Toggle mode
- Ctrl/Command + Right: Toggle mode

## Versioning

To keep better organization of releases we follow the [Semantic Versioning 2.0.0](http://semver.org/) guidelines.

## Run the project locally

**1 -** Prepare the environment:

```sh
$ npm install -g webpack
```

**2 -** Clone the project and install the dependencies:

```sh
$ git clone https://github.com/afonsopacifer/react-pomodoro.git
$ cd react-pomodoro
$ npm install
```
**3 -** Run webpack and webpack-dev-server:

```sh
$ npm start
```

Go to: [localhost:8080](http://localhost:8080/)

## Tasks available

- `$ npm start` - Run webpack and webpack-dev-server
- `$ npm run lint` - ESlint :D
- `$ npm run test` - Run mocha tests
- `$ npm run build` - Generates the bundle.js
- `$ npm run deploy` - Push for gh-pages

## Contributing
Find on our [issues](https://github.com/afonsopacifer/react-pomodoro/issues/) the next steps of the project ;)
<br>
Want to contribute? [Follow these recommendations](https://github.com/afonsopacifer/react-pomodoro/blob/master/CONTRIBUTING.md).

## History
See [Releases](https://github.com/afonsopacifer/react-pomodoro/releases) for detailed changelog.

## License
[MIT License](https://github.com/afonsopacifer/react-pomodoro/blob/master/LICENSE.md) © [Afonso Pacifer](http://afonsopacifer.com/)
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
Twitter
the cord was such a pain I feel some relief. Plus I'm better positioned than most to survive without…
from twitter_favs
10 days ago by kukkurovaca
nachos-ui: Nachos UI is a React Native component library.
Github repo
Name: nachos-ui
Tagline: Nachos UI is a React Native component library.
Homepage: https://avocode.com/nachos-ui/
Languages:
JavaScript = 70505 bytes
Objective-C = 4422 bytes
Python = 1641 bytes
Java = 1482 bytes
HTML = 102 bytes

![Nachos UI](https://cldup.com/xHYkAezOnI.jpg)

![Travis](https://api.travis-ci.org/avocode/nachos-ui.svg?branch=master)

## Intro

Nachos UI is a React Native component library. [Read more](https://medium.com/avocode-stories/my-experience-of-building-nachos-ui-kit-for-react-native-c8307500b8a4#.sh5cvk242) about how we built it on Medium.

### Features:

- Over 30 UI components
- Customizable UI components
- Works on **Web** thanks to [React Native for Web](https://github.com/necolas/react-native-web)
- Jest [Snapshot Testing](http://facebook.github.io/jest/docs/snapshot-testing.html)
- Uses [Prettier](https://github.com/jlongster/prettier) an opinionated JavaScript formatter.
- Uses [Yarn](https://yarnpkg.com/)

## Getting started

> **Requires React Native 0.40 and higher.**

```
$ npm install --save nachos-ui
```

OR

```
$ yarn add nachos-ui
```

```
import React from 'react'
import { View } from 'react-native'
import { Button } from 'nachos-ui'

const App = () => {
return (
<View>
<Button>Button</Button>
</View>
)
}
```

## Documentation

Visit the documentation at https://avocode.com/nachos-ui/docs/ with technical information about each component.

## Contributing

**Contributions are always welcome!** Before contributing, please read our [Code Of Conduct](https://github.com/avocode/nachos-ui/blob/master/CODE_OF_CONDUCT.md).

Read [Contributing](https://github.com/avocode/nachos-ui/blob/master/CONTRIBUTING.md).

## Developers

To play with Nachos UI locally first clone the repository:

```
$ git clone git@github.com:avocode/nachos-ui.git
```

Ideally use Yarn to install your dependencies. It's fast and consistent:

```
$ yarn install
```

To run the iOS simulator run:

```
$ yarn run start
```

To run the Web version:

```
$ yarn run start:web
```

## License

Nachos UI is open source and released under the [MIT License](https://github.com/avocode/nachos-ui/blob/master/LICENSE).

## Thanks!

- [Vacuumlabs](https://vacuumlabs.com/)
- [Polgár András](https://github.com/azazdeaz)
- [Oliver Drahota](https://github.com/csidro)
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
craft-redux: CRA teamplate for CRAFT https://github.com/stoyan/craft
Github repo
Name: craft-redux
Tagline: CRA teamplate for CRAFT https://github.com/stoyan/craft
Languages:
JavaScript = 4517 bytes
HTML = 1137 bytes
CSS = 440 bytes

This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app) and [CRAFT](https://github.com/stoyan/craft).

---

If you are interested in this template - let me know - tweet me [@tuchk4](https://twitter.com/tuchk4) or [file an issue](https://github.com/tuchk4/craft-redux/issues/new) here.

I will add more features and tests.

---

```
npm i -g craftool
craft MyAppRedux https://github.com/tuchk4/craft-redux/archive/master.zip
```

## General Resources

Please read official Create React App guide and don't try to customize configs because I am sure that all your requirements are reachable in 100% without config customizing or ejecting.

<img src="http://i.imgur.com/ULoeOL4.png" height="16"/> [Why I love Create React App and don't want to eject](https://medium.com/@valeriy.sorokobatko/why-i-love-create-react-app-e63b1be689a3)

* [Create React App GitHub](https://github.com/facebookincubator/create-react-app)
* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md)
* [Awesome Create React App](https://github.com/tuchk4/awesome-create-react-app)
* [Redux](http://redux.js.org/)
* [React Router](https://reacttraining.com/react-router/)
* [Reselect](https://github.com/reactjs/reselect)

### Redux

* [Redux Logger](https://github.com/evgenyrodionov/redux-logger)
* [Redux Thunk](https://github.com/gaearon/redux-thunk)
* compose with [Redux Chrome extension](https://github.com/zalmoxisus/redux-devtools-extension) for development env.

> [Displaying Map in state #124](https://github.com/zalmoxisus/redux-devtools-extension/issues/124)

> Import [`set.prototype.tojson`](https://www.npmjs.com/package/set.prototype.tojson) and [`map.prototype.tojson`](https://www.npmjs.com/package/map.prototype.tojson) for correct view of [`Map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) and [`Set`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) structures at Redux Chrome extension.

---

App | Redux Chrome dev tools
----|---
![CRAFT Redux Screenshot](https://monosnap.com/file/X5rD3u7mubxRHpufXzIACNhzk5zVEs.png) | ![Alt text](https://monosnap.com/file/UWm0dSNy1zhO1dfey7kHtiezhPaZKk.png)

### `npm start`

Runs the app in development mode.<br>
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.<br>
You will see the build errors and lint warnings in the console.

<img src='https://camo.githubusercontent.com/41678b3254cf583d3186c365528553c7ada53c6e/687474703a2f2f692e696d6775722e636f6d2f466e4c566677362e706e67' width='600' alt='Build errors'>

### `npm test`

Runs the test watcher in an interactive mode.<br>
By default, runs tests related to files changes since the last...
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
Twitter
It's true what they say. You learn a lot about journalism when your institution is the subject of a story. Who jump…
from twitter
10 days ago by Palafo
The Terry Elliott Daily
The latest The Terry Elliott Daily! Thanks to
edtech  k12  from twitter
10 days ago by tellio
VimBox: Simple, Modern MacVim Configuration
Github repo
Name: VimBox
Tagline: Simple, Modern MacVim Configuration
Languages:
Vim script = 113239 bytes
Shell = 4790 bytes
JavaScript = 1050 bytes

<table width="100%">
<tr>
</tr>

<tr>
<td>
<h2>VimBox</h2>
Modern MacVim Configuration
<img src="dotVim/images/VimBox.png" height="256px" width="256px" />
</td>
<td>

<ul>
<li><h5>Mac Keyboard mappings</h5></li>
<li><h5>Familiar autocomplete behavior</h5></li>
<li><h5>JavaScript indentation and lint support</h5></li>
<li><h5>Snippets (with JavaScript examples)</h5></li>
<li><h5>Spacegray theme with matching app icon.</h5></li>
</ul>
</td>
</tr>
</table>

<br>

> VimBox with Atom inspired one-dark theme.

<img width="744px" height="642px" src="dotVim/images/VimBoxScreen_1488x1284.png" />

> VimBox's matching application icon

<img src="dotVim/images/iconScreenshot.png" />

Installation:
-------------
> Quickly try VimBox in place of your existing setup. Back up your existing vim files, and move them out of the way as instructed:

1. If you already have a vim setup, move it safely out of the way or back it up.

mv ~/.vim ~/.vim_backup #No trailing slashes to preserve symlinks!
mv ~/.vimrc ~/.vimrc_backup
mv ~/.gvimrc ~/.gvimrc_backup

2. You *Must* Install a [Recent Version of MacVim](http://macvim-dev.github.io/macvim/): (with python support)

# Alternatively, if you'd rather install via `brew`
brew install macvim --with-cscope --python --HEAD
brew linkapps # Put the app in your /Applications directory

3. Clone `VimBox` wherever you like to keep your github clones

# cd ~/github/ # Or wherever you like to keep github clones
git clone https://github.com/jordwalke/VimBox/
ln -s `pwd`/VimBox/dotVim ~/.vim # Link to the cloned vim config
ln -s `pwd`/VimBox/dotVimRc ~/.vimrc
ln -s `pwd`/VimBox/dotGVimRc ~/.gvimrc

4. Start `MacVim` that you just installed. It will prompt you to download the
plugins in the background. If you opt to do so, it may take a while to
startup but be patient.

5. `[Recommended]` Install the included vim-airline font so `VimBox` looks like
the screenshot with the `vim-airline` bar. From the command line:

open ./VimBox/dotVim/Fonts/InconsolataDz/Inconsolata-dz\ for\ Powerline.otf # Then click "Install Font"

6. Install up-to-date node.js if you want JS linting (http://nodejs.org/)

7. Make your MacVim use the VimBox icon (optional):

```lang=bash
open /Applications/
# Find the MacVim app icon and press `⌘+i` to open the information window
open ./dotVim/images
# drag the ApplicationIcon.icns onto the little icon in the information window
# and restart MacVim.
```


Features:
----------

#### Familiar Mac Key Commands

| Key | Action |
| ------------------------- |----------------------------------------------------------|
| `⌘+p` | Open Anything (`ctrl-p`) ...
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
Twitter
RT : The Gripsholm Lion, Gripsholm Castle, Södermanland
from twitter
10 days ago by bolstad
Twitter
RT @discoversweden: The Gripsholm Lion, Gripsholm Castle, Södermanland https://t.co/1f8EWmeSHg
via:packrati.us 
10 days ago by bolstad
Twitter
i'd forgotten that i used imgur occasionally a few years ago & logged into it & literally pushed back from my compu…
from twitter_favs
10 days ago by sextopus
react-redux-grid: A React Grid/Tree Component written in the Redux Pattern
Github repo
Name: react-redux-grid
Tagline: A React Grid/Tree Component written in the Redux Pattern
Homepage: http://react-redux-grid.herokuapp.com/
Languages:
JavaScript = 570915 bytes
CSS = 16151 bytes

# React-Redux Grid

[![npm version](https://badge.fury.io/js/react-redux-grid.svg)](https://badge.fury.io/js/react-redux-grid)
[![Build Status](https://travis-ci.org/bencripps/react-redux-grid.svg?branch=master)](https://travis-ci.org/bencripps/react-redux-grid)
[![Dependency Status](https://www.versioneye.com/user/projects/571b8782fcd19a0045441c8d/badge.svg?style=flat)](https://www.versioneye.com/user/projects/571b8782fcd19a0045441c8d)
[![npm](https://img.shields.io/npm/dm/react-redux-grid.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/react-redux-grid)
[![codecov](https://codecov.io/gh/bencripps/react-redux-grid/branch/master/graph/badge.svg)](https://codecov.io/gh/bencripps/react-redux-grid)
[![Gitter](https://img.shields.io/gitter/room/bencripps/react-redux-grid.svg?maxAge=2592000)](https://gitter.im/bencripps/react-redux-grid)
[![bitHound Dependencies](https://www.bithound.io/github/bencripps/react-redux-grid/badges/dependencies.svg)](https://www.bithound.io/github/bencripps/react-redux-grid/master/dependencies/npm)
[![bitHound Overall Score](https://www.bithound.io/github/bencripps/react-redux-grid/badges/score.svg)](https://www.bithound.io/github/bencripps/react-redux-grid)
[![Scrutinizer Code Quality](https://scrutinizer-ci.com/g/bencripps/react-redux-grid/badges/quality-score.png?b=master)](https://scrutinizer-ci.com/g/bencripps/react-redux-grid/?branch=master)
[![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/bencripps/react-redux-grid.svg)](http://isitmaintained.com/project/bencripps/react-redux-grid "Average time to resolve an issue")
[![Percentage of issues still open](http://isitmaintained.com/badge/open/bencripps/react-redux-grid.svg)](http://isitmaintained.com/project/bencripps/react-redux-grid "Percentage of issues still open")
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/bencripps/react-redux-grid/blob/master/docs/CONTRIBUTING.MD)

A Grid and Tree Component written in [React](https://facebook.github.io/react) using the [Redux](https://github.com/rackt/redux) Pattern with plenty of open source [examples](http://react-redux-grid.herokuapp.com/), and an [interesting backstory](https://medium.com/@itsBenCripps/open-sourcing-a-redux-component-bb82f260ff62#.evnov65ui).

![React Redux Grid](https://raw.githubusercontent.com/bencripps/react-redux-grid/master/demo/demo.gif)

## Features

* Flat List or Tree Structure :heavy_minus_sign: :evergreen_tree:
* Local and/or Remote Data Source
* Local and/or Remote Pagination
* Extensive Column Definitions :muscle:
* Draggable Column Width/Resizing
* Draggable Column Ordering
* Sortable Columns
* Grid Action Menus
* Bulk Action Toolbar
* Selection...
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
Niet-monogame gemeenschap eist 'op zijn minst' een week om deftig Valentijn te vieren - Het beleg van antwerpen
PARKING – Voor de romantische zielen onder ons is het weer zo ver. Overal ter lande maken verliefde koppeltjes zich op voor een intieme Valentijnsdag . Toch…
from instapaper
10 days ago by bkeetman
vanilla-tilt.js: A smooth 3D tilt javascript library.
Github repo
Name: vanilla-tilt.js
Tagline: A smooth 3D tilt javascript library.
Homepage: https://micku7zu.github.io/vanilla-tilt.js/index.html
Languages:
JavaScript = 29295 bytes

# vanilla-tilt.js

[![npm version](https://badge.fury.io/js/vanilla-tilt.svg)](https://badge.fury.io/js/vanilla-tilt)
[![ghit.me](https://ghit.me/badge.svg?repo=micku7zu/vanilla-tilt.js)](https://ghit.me/repo/micku7zu/vanilla-tilt.js)

A smooth 3D tilt javascript library forked from [Tilt.js (jQuery version)](https://github.com/gijsroge/tilt.js).

[View landing page (demos)](https://micku7zu.github.io/vanilla-tilt.js/)

### Usage

```html
<body>
<div class="your-element" data-tilt></div>

<!-- at the end of the body -->
<script type="text/javascript" src="vanilla-tilt.js"></script>
</body>
```

### Options
```js
{
reverse: false, // reverse the tilt direction
max: 35, // max tilt rotation (degrees)
perspective: 1000, // Transform perspective, the lower the more extreme the tilt gets.
scale: 1, // 2 = 200%, 1.5 = 150%, etc..
speed: 300, // Speed of the enter/exit transition
transition: true, // Set a transition on enter/exit.
axis: null, // What axis should be disabled. Can be X or Y.
reset: true // If the tilt effect has to be reset on exit.
easing: "cubic-bezier(.03,.98,.52,.99)", // Easing on enter/exit.
glare: false // if it should have a "glare" effect
"max-glare": 1, // the maximum "glare" opacity (1 = 100%, 0.5 = 50%)
"glare-prerender": false // false = VanillaTilt creates the glare elements for you, otherwise
// you need to add .js-tilt-glare>.js-tilt-glare-inner by yourself
}
```

### Events
```js
const element = document.querySelector(".js-tilt");
VanillaTilt.init(element);
element.addEventListener("tiltChange", callback);
```

### Methods
```js
const element = document.querySelector(".js-tilt");
VanillaTilt.init(element);

// Destroy instance
element.vanillaTilt.destroy();

// Get values of instance
element.vanillaTilt.getValues();

// Reset instance
element.vanillaTilt.reset();
```

### Install
You can copy and include any of the following file:

* [dist/vanilla-tilt.js](https://raw.githubusercontent.com/micku7zu/vanilla-tilt.js/master/dist/vanilla-tilt.js) ~ 6kb
* [dist/vanilla-tilt.min.js](https://raw.githubusercontent.com/micku7zu/vanilla-tilt.js/master/dist/vanilla-tilt.min.js) ~ 3.5kb
* [dist/vanilla-tilt.babel.js](https://raw.githubusercontent.com/micku7zu/vanilla-tilt.js/master/dist/vanilla-tilt.babel.js) ~ 8.5kb
* [dist/vanilla-tilt.babel.min.js](https://raw.githubusercontent.com/micku7zu/vanilla-tilt.js/master/dist/vanilla-tilt.babel.min.js) ~ 4.3kb

#### NPM

Also available on npm https://www.npmjs.com/package/vanilla-tilt

```
npm install vanilla-tilt
```

####...
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
Twitter
RT : This guy did a comparable analysis of Wonderbly vs. UK big children's publishers and you wouldn't believe what he f…
from twitter_favs
10 days ago by Fallingbadgers
avoriaz: 🔬 a Vue.js testing utility library
Github repo
Name: avoriaz
Tagline: 🔬 a Vue.js testing utility library
Homepage: https://eddyerburgh.gitbooks.io/avoriaz/content/
Languages:
JavaScript = 85559 bytes
Vue = 9151 bytes
TypeScript = 2326 bytes
Shell = 556 bytes

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

> a Vue.js testing utility library

## Deprecation

This library will be deprecated once [vue-test-utils](https://github.com/vuejs/vue-test-utils) is released.

## Installation

```
npm install --save-dev avoriaz
```

## Documentation

[Visit the docs](https://eddyerburgh.gitbooks.io/avoriaz/content/)

## Examples

- [Example using karma and mocha](https://github.com/eddyerburgh/avoriaz-karma-mocha-example)
- [Example using karma and jasmine](https://github.com/eddyerburgh/avoriaz-karma-jasmine-example)
- [Example using Jest](https://github.com/eddyerburgh/avoriaz-jest-example)
- [Example using mocha-webpack](https://github.com/eddyerburgh/avoriaz-mocha-example)
- [Example using tape](https://github.com/eddyerburgh/avoriaz-tape-example)
- [Example using ava](https://github.com/eddyerburgh/avoriaz-ava-example)

##### Assert wrapper contains a child
```js
import { mount } from 'avoriaz'
import Foo from './Foo.vue'

const wrapper = mount(Foo)
expect(wrapper.contains('.bar')).to.equal(true)
```

##### Shallow render components
```js
import { shallow } from 'avoriaz'
import Foo from './Foo.vue'
import Bar from './Bar.vue'

const wrapper = shallow(Foo)
expect(wrapper.contains(Bar)).to.equal(true)
```

##### Assert style is rendered
```js
const button = wrapper.find('div > button .button-child')[0]
expect(button.hasStyle('color', 'red')).to.equal(true)
```

##### Assert method is called when DOM event is triggered
```js
const clickHandler = sinon.stub()
const wrapper = mount(Foo, {
propsData: { clickHandler }
})
wrapper.find('div .bar')[0].trigger('click')
expect(clickHandler.called).to.equal(true)
```

##### Assert wrapper contains text
```js
const title = wrapper.find('h1.title')[0]
expect(title.text()).to.equal('some text')
```

##### Inject globals
```js
const $route = { path: 'http://www.example-path.com' }
const wrapper = mount(Foo, {
globals: {
$route
}
})
expect(wrapper.vm.$route.path).to.equal($route.path)
```

##### Inject slots
```js
const wrapper = mount(Foo, {
slots: {
default: Foo
}
})
```

##### Set data
```js
wrapper.setData({
someData: 'some data'
})

expect(wrapper.vm.someData).to.equal('some data')
```

##### Update props
```js
wrapper.setProps({
someProp: 'some prop',
anotherProp: 'another prop'
})
```

For more examples, [see the docs](https://eddyerburgh.gitbooks.io/avoriaz/content/)
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
hyperapp: 1 KB JavaScript library for building web applications.
Github repo
Name: hyperapp
Tagline: 1 KB JavaScript library for building web applications.
Homepage: https://hyperapp.js.org
Languages:
JavaScript = 36093 bytes
TypeScript = 765 bytes

# <img height=24 src=https://cdn.rawgit.com/JorgeBucaran/f53d2c00bafcf36e84ffd862f0dc2950/raw/882f20c970ff7d61aa04d44b92fc3530fa758bc0/Hyperapp.svg> Hyperapp

[![Travis CI](https://img.shields.io/travis/hyperapp/hyperapp/master.svg)](https://travis-ci.org/hyperapp/hyperapp) [![npm](https://img.shields.io/npm/v/hyperapp.svg)](https://www.npmjs.org/package/hyperapp) [![Slack](https://hyperappjs.herokuapp.com/badge.svg)](https://hyperappjs.herokuapp.com "Join us")

Hyperapp is a JavaScript library for building web applications.

* **Minimal** — Hyperapp was born out of the attempt to do more with less. We have aggressively minimized the concepts you need to understand while remaining on par with what other frameworks can do.
* **Functional** — Hyperapp's design is inspired by [The Elm Architecture](https://guide.elm-lang.org/architecture). Create scalable browser-based applications using a functional paradigm. The twist is you don't have to learn a new language.
* **Batteries-included** — Out of the box, Hyperapp combines state management with a Virtual DOM engine that supports keyed updates & lifecycle events — all with no dependencies.

## Getting Started

Our first example is a counter that can be incremented or decremented. Go ahead and try it online [here](https://codepen.io/hyperapp/pen/zNxZLP).

```js
import { h, app } from "hyperapp"

const state = {
count: 0
}

const actions = {
down: value => state => ({ count: state.count - value }),
up: value => state => ({ count: state.count + value })
}

const view = (state, actions) => (
<div>
<h1>{state.count}</h1>
<button onclick={() => actions.down(1)}>-</button>
<button onclick={() => actions.up(1)}>+</button>
</div>
)

app(state, actions, view, document.body)
```

This example assumes you are using a JavaScript compiler like [Babel](https://babeljs.io) or [TypeScript](https://www.typescriptlang.org) and a module bundler like [Parcel](https://parceljs.org), [Rollup](https://rollupjs.org), [Webpack](https://webpack.js.org), etc. Usually, all you need to do is install the JSX [transform plugin](https://babeljs.io/docs/plugins/transform-react-jsx) and add the pragma option to your <samp>.babelrc</samp> file.

```json
{
"plugins": [["transform-react-jsx", { "pragma": "h" }]]
}
```

JSX is a language syntax extension that lets you write HTML tags interspersed with JavaScript. Because browsers don't understand JSX, we use a compiler to transform it into <samp>hyperapp.h</samp> function calls (hyperscript).

```jsx
const view = (state, actions) =>
h("div", {}, [
h("h1", {}, state.count),
h("button", { onclick: () => actions.down(1) }, "-"),
h("button", { onclick: () => actions.up(1) }, "+")
...
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
injection-js: Dependency injection library for JavaScript and TypeScript in 5.1K. It is an extraction of the Angular's ReflectiveInjector which means that it's well designed, feature complete, fast, reliable and well tested.
Github repo
Name: injection-js
Tagline: Dependency injection library for JavaScript and TypeScript in 5.1K. It is an extraction of the Angular's ReflectiveInjector which means that it's well designed, feature complete, fast, reliable and well tested.
Languages:
TypeScript = 102709 bytes
JavaScript = 68 bytes

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

# Dependency Injection

Dependency injection library for JavaScript and TypeScript in **5.2K**. It is an extraction of the Angular's dependency injection which means that it's feature complete, fast, reliable and well tested.

**Up-to-date with Angular 4.1**.

# Why not Angular version 5 and above?

Angular version 5 deprecated the `ReflectiveInjector` API and introduced `StaticInjector`. In short, the dependency injection in the newest versions of Angular will happen entirely compile-time so reflection will not be necessary.

However, if you want to use dependency injection in your Node.js, Vue, React, Vanilla JS, TypeScript, etc. application you won't be able to take advantage of `StaticInjector` the way that Angular will because your application won't be compatible with Angular compiler.

This means that **if you need dependency injection outside of Angular `@angular/core` is not an option. In such case, use `injection-js` for fast, small, reliable, high-quality, well designed and well tested solution.**

# How to use?

```
$ npm i injection-js --save
```

Note that for ES5 `Class` syntax and TypeScript you need a polyfill for the [Reflect API](http://www.ecma-international.org/ecma-262/6.0/#sec-reflection). You can use, for instance, [reflect-metadata](https://www.npmjs.com/package/reflect-metadata), or [`core-js` (`core-js/es7/reflect`)](https://www.npmjs.com/package/core-js).

## TypeScript

```ts
import 'reflect-metadata';
import { ReflectiveInjector, Injectable, Injector } from 'injection-js';

class Http {}

@Injectable()
class Service {
constructor(private http: Http) {}
}

@Injectable()
class Service2 {
constructor(private injector: Injector) {}

getService(): void {
console.log(this.injector.get(Service) instanceof Service);
}

createChildInjector(): void {
const childInjector = ReflectiveInjector.resolveAndCreate([
Service
], this.injector);
}
}

const injector = ReflectiveInjector.resolveAndCreate([
Service,
Http
]);

console.log(injector.get(Service) instanceof Service);
```

**Note**: you will need to enable the TypeScript flags `experimentalDecorators` and `emitDecoratorMetadata` to make this work.

## ES6

```js
const { Inject, ReflectiveInjector } = require('injection-js');

class Http {}

class Service {
static get parameters() {
return [new Inject(Http)];
}

constructor(http) {
this.http = http;
}
}

const injector = ReflectiveInjector.resolveAndCreate([Http,...
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
Twitter
Not saying it’s good. But curious how you claim linear, direct cause-and-effect between the use of d…
from twitter
10 days ago by redasadki
gotem: Copy to clipboard for modern browsers in less than 1kb.
Github repo
Name: gotem
Tagline: Copy to clipboard for modern browsers in less than 1kb.
Languages:
JavaScript = 1565 bytes
HTML = 762 bytes

# gotem

[![gotem on NPM](https://img.shields.io/npm/v/gotem.svg?style=flat-square)](https://www.npmjs.com/package/gotem) [![Standard JavaScript Style](https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

Copy to clipboard for modern browsers in less than 1kb.

## Install

```sh
$ npm i gotem --save
```

## Use

`gotem` is a function that accepts 3 parameters:

1. A **required** trigger node.
2. A **required** target node.
3. An **optional** object of callback functions.

Examples follow:

```javascript
import gotem from 'gotem'

// a trigger and target node are required
const nodes = {
trigger: document.getElementById('trigger'),
target: document.getElementById('target')
}

// when the trigger is clicked,
// the text of the target will be copied to the clipboard
gotem(nodes.trigger, nodes.target)

// if an object with callback functions (success, error) is passed,
// the appropriate function, based on the result of executing the copy command, will be fired if it exists
gotem(nodes.trigger, nodes.target, {
success: () => console.log('Copy command succeeded'),
error: () => console.log('Copy command failed, BUT the text to copy has still been selected.')
})
```

## Browser Support

gotem requires [`execCommand`](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand) cut/copy support.

As such, it works in the following:

* Chrome 43+
* Firefox 41+
* Safari 10+
* Edge 12+
* IE 9+

## License

[MIT](https://opensource.org/licenses/MIT). © 2017 Michael Cavalea
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
voxel: Voxel design tool built on top of css transformations
Github repo
Name: voxel
Tagline: Voxel design tool built on top of css transformations
Homepage: https://fatiherikli.github.io/voxel/
Languages:
JavaScript = 12329 bytes
CSS = 1542 bytes
HTML = 825 bytes

### Voxel Designing Tool built on top of CSS transformations

Just for fun purpose. To play on it:
http://fatiherikli.github.io/voxel

![demo](https://fatiherikli.github.io/voxel/static/animation.gif?heycache)
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
granim.js: Create fluid and interactive gradients animations with this small (< 17 kB) js library.
Github repo
Name: granim.js
Tagline: Create fluid and interactive gradients animations with this small (< 17 kB) js library.
Homepage: https://sarcadass.github.io/granim.js/
Languages:
JavaScript = 40133 bytes
HTML = 1044 bytes

# Granim.js [![Build Status](https://travis-ci.org/sarcadass/granim.js.svg?branch=master)](https://travis-ci.org/sarcadass/granim.js) [![codecov](https://codecov.io/gh/sarcadass/granim.js/branch/master/graph/badge.svg)](https://codecov.io/gh/sarcadass/granim.js) [![gitter](https://badges.gitter.im/sarcadass/granim.png)](https://gitter.im/Granim-js/Lobby?utm_source=share-link&utm_medium=link&utm_campaign=share-link)

Create fluid and interactive gradients animations with this small (< 17 kB) js library.

**See the [demo site](http://sarcadass.github.io/granim.js)**.

## Install

### From NPM

* Run `npm install granim --save`

### From Bower

* Run `bower install granim`

### Static

* Download the latest version [in the release section](https://github.com/sarcadass/granim.js/releases)

## How to use
```html
<!-- Create a <canvas> element -->
<canvas id="granim-canvas"></canvas>

<!-- Call the script -->
<script src="granim.min.js"></script>

<!-- Create a Granim instance -->
<script>
var granimInstance = new Granim({
element: '#granim-canvas',
name: 'granim',
opacity: [1, 1],
states : {
"default-state": {
gradients: [
['#834D9B', '#D04ED6'],
['#1CD8D2', '#93EDC7']
]
}
}
});
</script>
```
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
composition-logger: Some logging functions that come in handy when debugging your compositions.
Github repo
Name: composition-logger
Tagline: Some logging functions that come in handy when debugging your compositions.
Languages:
JavaScript = 2943 bytes

# Composition Logger

To install (recommended to save as a dev dependency)
```
npm install composition-logger --save -dev
```

When first working with functional compositions it can be daunting or difficult to visualise the data flow between each step of the composition.

Sometimes for developers who are experienced with using functional compositions it can sometimes be a tedious experience debugging or outputting the result after each step within the composition.

Usually a developer may have some helper function on stand by to help with logging the output of a composition, such as:

```javascript
export const trace = tag => output => {
console.log(`--------${tag}---------`, output);
return output;
};
```
By using `console.group` we can view the data that passes through our compositions in a more clearer and understandable format.

Consider the following example

```javascript
import composeWithLogs from 'composition-logger';

const divideByTwo = data => data / 2;
const sum = data => data.reduce((a, b) => a + b);
const addOne = data => data + 1;
const map = f => arr => arr.map(f);
composeWithLogs(
divideByTwo,
sum,
map(addOne)
)([1, 4, 5, 6, 7]);
```

By replacing which ever compose function you are using with the compose function provided by this module it would yield the result below. Which is basically a `console.group` with nested groups for each function within the composition.

![alt-text](https://s3-eu-west-1.amazonaws.com/composition-logger/complogger.png)

## Things To Note
- This module is focused towards a browser environment as it supports `console.group`
- Node does not support `console.group`, so a basic `console.log` is used instead, you should only see this when running the composition logger within a node env, e.g Intial render for sever side rendering.
- This module composes from right to left and will not work with functions such as `flow`.
- This module focuses on outputting the steps at the root level of a composition.
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
Twitter
A couple of weeks ago my team + I sat down to think about how to attract the very best PMs, Designers, Researchers…
from twitter_favs
10 days ago by jackfranklin
react-modal-video: Accessible React Modal Video Component
Github repo
Name: react-modal-video
Tagline: Accessible React Modal Video Component
Homepage: https://appleple.github.io/react-modal-video/
Languages:
JavaScript = 14223 bytes
CSS = 2699 bytes
HTML = 382 bytes

# react-modal-video
React Modal Video Component

## Features

- Not affected by dom structure.
- Beautiful transition
- Accessible for keyboard navigation and screen readers.
- Rich options for youtube API and Vimeo API

## Demo
[http://rawgit.com/appleple/react-modal-video/master/test/](http://rawgit.com/appleple/react-modal-video/master/test/)

## Install

### npm

```sh
npm install react-modal-video
```

## Usage

import sass file to your project

```scss
@import 'node_modules/react-modal-video/scss/modal-video.scss';
```

change "isOpen" property to open and close the modal-video

```jsx
import React from 'react'
import ReactDOM from 'react-dom'
import ModalVideo from 'react-modal-video'

class App extends React.Component {

constructor () {
super()
this.state = {
isOpen: false
}
this.openModal = this.openModal.bind(this)
}

openModal () {
this.setState({isOpen: true})
}

render () {
return (
<div>
<ModalVideo channel='youtube' isOpen={this.state.isOpen} videoId='L61p2uyiMSo' onClose={() => this.setState({isOpen: false})} />
<button onClick={this.openModal}>Open</button>
</div>
)
}
}

ReactDOM.render(
<App />,
document.getElementById('root')
)
```

## Options

- About YouTube options, please refer to https://developers.google.com/youtube/player_parameters?hl=en
- About Vimeo options, please refer to https://developer.vimeo.com/apis/oembed

<table style="min-width:100%;">
<tbody><tr>
<th colspan="2">properties</th>
<th>default</th>
</tr>
<tr>
<td colspan="2">channel</td>
<td>'youtube'</td>
</tr>
<tr>
<td...
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
Twitter
fucking christ, thank you, god damn
from twitter_favs
10 days ago by riking
« earlier      later »

Copy this bookmark:



description:


tags:



Copy this bookmark:



description:


tags: