recent bookmarks

angular-pipes: Useful pipes for Angular
Github repo
Name: angular-pipes
Tagline: Useful pipes for Angular
Homepage: https://fknop.gitbooks.io/angular-pipes
Languages:
TypeScript = 144026 bytes
JavaScript = 2121 bytes

[![NPM Version](https://img.shields.io/npm/v/angular-pipes.svg)](https://npmjs.org/package/angular-pipes)
[![Build Status](https://travis-ci.org/fknop/angular-pipes.svg?branch=master)](https://travis-ci.org/fknop/angular-pipes)
[![Coverage Status](https://coveralls.io/repos/github/fknop/angular-pipes/badge.svg?branch=master)](https://coveralls.io/github/fknop/angular-pipes?branch=master)
[![Downloads](https://img.shields.io/npm/dt/angular-pipes.svg)](https://npmjs.org/package/angular-pipes)
[![Downloads](https://img.shields.io/npm/dm/angular-pipes.svg)](https://npmjs.org/package/angular-pipes)

# angular-pipes

**angular-pipes** is a pipes library for `Angular`.

## Announcement

**UMD Bundles** and **ESM** code are now distributed on `npm` with the standard JS files ! Check the [changelog](./CHANGELOG.md) for more information.

## Contribute

Read the [contributing guidelines](./CONTRIBUTING.md)

## Pipes

You can find the documentations in the [`docs`](./docs) folder or on [`GitBook`](https://fknop.gitbooks.io/angular-pipes/).

### Collections (array)

* [`empty`](./docs/array.md#empty)
* [`head`](./docs/array.md#head)
* [`initial`](./docs/array.md#initial)
* [`join`](./docs/array.md#join)
* [`last`](./docs/array.md#last)
* [`tail`](./docs/array.md#tail)
* [`uniq`](./docs/array.md#uniq)
* [`without`](./docs/array.md#without)
* [`intersection`](./docs/array.md#intersection)
* [`union`](./docs/array.md#union)
* [`range`](./docs/array.md#range)
* [`map`](./docs/array.md#map)
* [`pluck`](./docs/array.md#pluck)
* [`where`](./docs/array.md#where)
* [`firstOrDefault`](./docs/array.md#firstordefault)
* [`orderBy`](./docs/array.md#orderby)
* [`reverse`](./docs/array.md#reverse)
* [`count`](./docs/array.md#count)
* [`some`](./docs/array.md#some)
* [`every`](./docs/array.md#every)
* [`shuffle`](./docs/array.md#shuffle)
* [`take`](./docs/array.md#take)
* [`takeUntil`](./docs/array.md#takeuntil)
* [`takeWhile`](./docs/array.md#takewhile)
* [`drop`](./docs/array.md#drop)
* [`deep`](./docs/array.md#deep)
* [`chunk`](./docs/array.md#chunk)
* [`flatten`](./docs/array.md#flatten)

### Boolean

* [`greater`](./docs/boolean.md#greater)
* [`greaterOrEqual`](./docs/boolean.md#greaterorequal)
* [`less`](./docs/boolean.md#less)
* [`lessOrEqual`](./docs/boolean.md#lessorequal)
* [`equal`](./docs/boolean.md#equal)
* [`notEqual`](./docs/boolean.md#notequal)
* [`identical`](./docs/boolean.md#identical)
*...
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
Twitter
So she just helped me hang the washing up and while we were doing it she said she felt better about it all and I sa…
from twitter_favs
10 days ago by shedside
react-link-state: [DEPRECATED] :fire_engine: linkState comes to the rescue of your input event handlers!
Github repo
Name: react-link-state
Tagline: [DEPRECATED] :fire_engine: linkState comes to the rescue of your input event handlers!
Homepage: https://link-state-hoc-example-unhofespqs.now.sh/
Languages:
JavaScript = 21860 bytes
HTML = 549 bytes

# React LinkState
> :fire_engine: linkState comes to the rescue of your event handlers!

[![License: MIT](https://img.shields.io/badge/License-MIT-brightgreen.svg)](https://opensource.org/licenses/MIT) [![npm version](https://badge.fury.io/js/link-state-hoc.svg)](https://badge.fury.io/js/link-state-hoc) [![npm downloads](https://img.shields.io/npm/dm/link-state-hoc.svg)](https://www.npmjs.com/package/link-state-hoc) [![Build Status](https://travis-ci.org/BlackBoxVision/link-state-hoc.svg?branch=master)](https://travis-ci.org/BlackBoxVision/link-state-hoc) [![codecov](https://codecov.io/gh/BlackBoxVision/link-state-hoc/branch/master/graph/badge.svg)](https://codecov.io/gh/BlackBoxVision/link-state-hoc) [![Coverage Status](https://coveralls.io/repos/github/BlackBoxVision/link-state-hoc/badge.svg)](https://coveralls.io/github/BlackBoxVision/link-state-hoc?branch=master)

[![NPM](https://nodei.co/npm/link-state-hoc.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/link-state-hoc/) [![NPM](https://nodei.co/npm-dl/link-state-hoc.png?months=9&height=3)](https://nodei.co/npm/link-state-hoc/)

The idea of this module started from this post **[Using linkState in your React Components to simplify event handlers](https://medium.com/@jonatan_salas/using-linkstate-in-your-react-components-to-simplify-event-handlers-9d157cb75082#.ck4t4rij1)**

Also, this could be an upgrade from the [**linkState** mixin](https://facebook.github.io/react/docs/two-way-binding-helpers.html).

## Installation

**YARN**

```javascript
yarn add link-state-hoc
```

**NPM**

```javascript
npm install --save link-state-hoc
```

## API Docs

[Read them here](docs/API.md)

## Issues

If you found a bug, or you have an answer, or whatever. Please, open an [issue](https://github.com/BlackBoxVision/link-state-hoc/issues). I will do the best to fix it, or help you.

## Contributing

Of course, if you see something that you want to upgrade from this library, or a bug that needs to be solved, **PRs are welcome!**

## License

Distributed under the **MIT license**. See [LICENSE](https://github.com/BlackBoxVision/link-state-hoc/blob/master/LICENSE) for more information.
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
Twitter
Our ancestors replaced dogma, tradition & authority with reason, debate & institutions of truth-seeking. They repla…
from twitter
10 days ago by jamescampbell
redux-autoform: Create Redux-Forms dynamically out of metadata
Github repo
Name: redux-autoform
Tagline: Create Redux-Forms dynamically out of metadata
Languages:
JavaScript = 101955 bytes

![Logo](https://github.com/redux-autoform/redux-autoform/blob/master/art/autoform-logo.png?raw=true)

[![Build Status](https://travis-ci.org/redux-autoform/redux-autoform.svg?branch=master)](https://travis-ci.org/redux-autoform/redux-autoform) [![npm version](https://badge.fury.io/js/redux-autoform.svg)](https://badge.fury.io/js/redux-autoform) [![codecov](https://codecov.io/gh/redux-autoform/redux-autoform/branch/master/graph/badge.svg)](https://codecov.io/gh/redux-autoform/redux-autoform) [![Coverage Status](https://coveralls.io/repos/github/redux-autoform/redux-autoform/badge.svg?branch=master)](https://coveralls.io/github/redux-autoform/redux-autoform?branch=master)

[![NPM](https://nodei.co/npm/redux-autoform.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/redux-autoform/) [![NPM](https://nodei.co/npm-dl/redux-autoform.png?months=9&height=3)](https://nodei.co/npm/redux-autoform/)

**Beta version disclaimer**

`redux-autoform` is under active development. APIs will change and things may still not work as expected. If you find
any issue, please [report it](https://github.com/gearz-lab/redux-autoform/issues). We'll do my best to fix it.

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Introduction](#introduction)
- [Supported UI frameworks](#supported-ui-frameworks)
- [Demos](#demos)
- [Docs](#docs)
- [Installing](#installing)
- [Using](#using)
- [Localization](#localization)
- [Styles](#styles)
- [Building and running the demo locally](#building-and-running-the-demo-locally)
- [Running the tests](#running-the-tests)
- [Contributing](#contributing)
- [License](#license)

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

Introduction
------------

Redux-Autoform is an UI agnostic library for dynamically generating [redux-form](https://github.com/erikras/redux-form) out of metadata.

Supported UI frameworks
------------------------

- [Bootstrap](https://github.com/redux-autoform/redux-autoform-bootstrap-ui) (beta state)
- [Material-UI](https://github.com/redux-autoform/redux-autoform-material-ui) (beta state)

Demos
-----

- [Bootstrap demo](https://redux-autoform.github.io/redux-autoform-bootstrap-ui/demo.html).
- [Material-UI demo](https://redux-autoform.github.io/redux-autoform-material-ui).

Docs
---

[Docs are available here](https://github.com/gearz-lab/redux-autoform/blob/master/docs-md/documentation.md).

Installing
---

npm install redux-autoform

Using
---

#### AutoForm ([source](https://github.com/gearz-lab/redux-autoform/blob/master/src/AutoForm.js))

The main React component.

```js
import { AutoForm } from 'redux-autoform';
```

The `AutoForm` props are listed...
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
Twitter
Doctor Who is educational. The description of this scene in the Discontinuity Guide is where I learned the term "po…
from twitter
10 days ago by dscassel
webpack-hot-server-middleware: :fire: Hot reload webpack bundles on the server
Github repo
Name: webpack-hot-server-middleware
Tagline: :fire: Hot reload webpack bundles on the server
Languages:
JavaScript = 16601 bytes

# Webpack Hot Server Middleware
[![Build Status](https://travis-ci.org/60frames/webpack-hot-server-middleware.svg?branch=master)](https://travis-ci.org/60frames/webpack-hot-server-middleware) [![npm version](https://badge.fury.io/js/webpack-hot-server-middleware.svg)](https://www.npmjs.com/package/webpack-hot-server-middleware) [![Coverage Status](https://coveralls.io/repos/github/60frames/webpack-hot-server-middleware/badge.svg?branch=master)](https://coveralls.io/github/60frames/webpack-hot-server-middleware?branch=master) [![npm downloads](https://img.shields.io/npm/dm/webpack-hot-server-middleware.svg)](https://www.npmjs.com/package/webpack-hot-server-middleware)

Webpack Hot Server Middleware is designed to be used in conjunction with [`webpack-dev-middleware`](https://github.com/webpack/webpack-dev-middleware/) (and optionally [`webpack-hot-middleware`](https://github.com/glenjamin/webpack-hot-middleware/)) to hot update Webpack bundles on the server.

## Why?

When creating universal Web apps it's common to build two bundles with Webpack, one client bundle [targeting](https://webpack.github.io/docs/configuration.html#target) 'web' and another server bundle targeting 'node'.

The entry point to the client bundle renders to the DOM, e.g.

```js
// client.js

import ReactDOM from 'react-dom';
import App from './components/App';

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

And the entry point to the server bundle renders to string, e.g.

```js
// server.js

import { renderToString } from 'react-dom/server';
import App from './components/App';

export default function serverRenderer() {
return (req, res, next) => {
res.status(200).send(`
<!doctype html>
<html>
<head>
<title>App</title>
</head>
<body>
<div id="root">
${renderToString(<App />)}
</div>
<script src="/client.js"></script>
</body>
</html>
`);
};
}
```

> NOTE: The server bundle is itself middleware allowing you to mount it anywhere in an existing node server, e.g.

```js
const express = require('express');
const serverRenderer = require('./dist/server');
const app = express();

app.use(serverRenderer());
app.listen(6060);
```

Given this setup it's fairly easy to hook up hot module replacement for your client bundle using `webpack-dev-server` or `webpack-hot-middleware` however these middlewares don't handle server bundles meaning you need to frequently restart your server to see the latest changes.

Webpack Hot Server Middleware solves this problem, ensuring the server bundle used is always the latest compilation without requiring a restart. Additionally it allows your client and server bundle to share the same Webpack cache for faster builds and uses an in-memory bundle...
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
McCann Dogs Vlogs - YouTube
Great Video
Hippy Shake is one wild and crazy toy poodle. But she needs to be groomed a lot more often than the...
from twitter
10 days ago by stevechic
json2react: Use JSON to create React Components.
Github repo
Name: json2react
Tagline: Use JSON to create React Components.
Languages:
JavaScript = 8960 bytes

[![GitHub license](https://img.shields.io/github/license/txgruppi/json2react.svg?style=flat-square)](https://github.com/txgruppi/json2react)
[![David](https://img.shields.io/david/txgruppi/json2react.svg?style=flat-square)](https://github.com/txgruppi/json2react)
[![npm](https://img.shields.io/npm/v/json2react.svg?style=flat-square)](https://www.npmjs.com/package/json2react)
[![Travis](https://img.shields.io/travis/txgruppi/json2react.svg?style=flat-square)](https://travis-ci.org/txgruppi/json2react)
[![Codecov](https://img.shields.io/codecov/c/github/txgruppi/json2react.svg?style=flat-square)](https://codecov.io/github/txgruppi/json2react)

# json2react

Use JSON to create React Stateless Components.

`json2react` allows you to create React Stateless Components from JSON using a simple schema.

## Why?

I needed a way to store static views on the database as data, not as HTML code.

Using this library you can fetch some remote data which represents an UI and render it with React.

## Install

Like any other NPM package

```sh
npm install --save json2react
```

## Usage

You can use it with:

- `React.render`
- As the return value, or part of it, of a stateless component
- As the return value, or part of it, of a component's `render` method

```javascript
import { createElement } from "react";
import j2r from "json2react";

const jsonUI = {
type: "div",
props: {
style: { textAlign: "center" },
},
children: [
{ type: "h1", children: "It works!" },
{
type: "p",
children: {
type: "small",
children: "This component was created from JSON",
},
},
],
};

ReactDOM.render(j2r(createElement, jsonUI), document.body);
```

You can pass a mapper function as second argument to map types to components.

```javascript
import { createElement } from "react";
import j2r from "json2react";
import MyDivComponent from "./MyDivComponent";

const jsonUI = {
type: "MyDivComponent",
props: {
style: { textAlign: "center" },
},
children: [
{ type: "h1", children: "It works!" },
{
type: "p",
children: {
type: "small",
children: "This component was created from JSON",
},
},
],
};

const mapTypeToComponent = (type, props) => {
switch (type) {
case "MyDivComponent": return MyDivComponent;
}
return type;
};

ReactDOM.render(j2r(createElement, mapTypeToComponent, jsonUI), document.body);
```

## Schema

Please check the file http://github.com/txgruppi/json2react/blob/v0.0.0/schema.json for the detailed schema description.

## Tests

Only tests

```sh
npm test
```

Tests and coverage

```sh
npm run coverage
```
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
Twitter
I’m going to gouge my eyes out with blunt pencils if I hear another person say that teachers should have guns to pr…
from twitter_favs
10 days ago by patrickneville
cxs: fast af css-in-js in 0.7kb
Github repo
Name: cxs
Tagline: fast af css-in-js in 0.7kb
Homepage: http://jxnblk.com/cxs
Languages:
JavaScript = 17259 bytes

# cxs

fast af css-in-js in 0.7kb

http://jxnblk.com/cxs

[![Build Status][b]](https://travis-ci.org/jxnblk/cxs)
[![Coverage][cov]](https://codecov.io/github/jxnblk/cxs)
[![js-standard-style][std]](http://standardjs.com/)
[![0.7kb gzip][kb]](https://github.com/siddharthkp/bundlesize)

[b]: https://img.shields.io/travis/jxnblk/cxs/master.svg?style=flat-square
[std]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square
[kb]: https://img.shields.io/badge/gzip-0.7%20kb-brightgreen.svg?style=flat-square
[cov]: https://img.shields.io/codecov/c/github/jxnblk/cxs.svg?style=flat-square

```js
const className = cxs({ color: 'tomato' })
```

cxs is a minimal css-in-js solution that uses an atomic css approach to maximize performance and deduplication

## Features

- 0.7 KB
- Zero dependencies
- High performance
- Style encapsulation
- Deduplicates repeated styles
- Dead-code elimination
- Framework independent
- Media queries
- Pseudoclasses
- Nesting
- No CSS files
- No tagged template literals
- Optional [React component](#react-components) API

## Install

```sh
npm install cxs
```

## Usage

cxs works with any framework, but this example uses React for demonstration purposes.

```js
import React from 'react'
import cxs from 'cxs'

const Box = (props) => {
return (
<div {...props} className={className} />
)
}

const className = cxs({
padding: '32px',
backgroundColor: 'tomato'
})

export default Box
```

### Pseudoclasses

```js
const className = cxs({
color: 'tomato',
':hover': {
color: 'black'
}
})
```

### Media Queries

```js
const className = cxs({
fontSize: '32px',
'@media screen and (min-width: 40em)': {
fontSize: '48px'
}
})
```

### Child Selectors

```js
const className = cxs({
color: 'black',
' > a': {
color: 'tomato'
}
})
```

### Static/Server-Side Rendering

For Node.js environments, use the `css()` method to return the static CSS string *after* rendering a view.

```js
import React from 'react'
import ReactDOMServer from 'react-dom/server'
import cxs from 'cxs'
import App from './App'

const html = ReactDOMServer.renderToString(<App />)
const css = cxs.css()

const doc = `<!DOCTYPE html>
<style>${css}</style>
${html}
`

// Reset the cache for the next render
cxs.reset()
```

Note: cxs does not currently have a mechanism for rehydrating styles on the client, so use with caution in universal JavaScript applications.

## React Components

cxs also has an alternative higher order component API for creating styled React components, similar to the [styled-components][sc] API.

```js
import cxs from 'cxs/component'

const Heading = cxs('h1')({
margin: 0,
fontSize: '32px',
lineHeight:...
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
AerialStill - EEFAS
Aerial photos of the elite's houses.
pigmen  rich  elite  houses  property 
10 days ago by chrismasters
Twitter
I'm pretty sure my body would let me know if I needed more sleep, instead of being full of energy and…
from twitter
10 days ago by fgyost
fmt-obj: :lipstick: Prettifies any javascript object in your console. Make it look awesome!
Github repo
Name: fmt-obj
Tagline: :lipstick: Prettifies any javascript object in your console. Make it look awesome!
Languages:
JavaScript = 6124 bytes

# `fmt-obj` [![Build status][travis-image]][travis-url] [![NPM version][version-image]][version-url] [![Dependency Status][david-image]][david-url] [![License][license-image]][license-url] [![Js Standard Style][standard-image]][standard-url]

:lipstick: Prettifies any javascript object in your console. Make it look awesome!

**Screenshot**

<p align="center">
<img src="./intro.png" />
</p>

<sub><a href='./example.js'>View Example</a></sub>

> Also check out the [`CLI version`](https://github.com/Kikobeats/fmt-obj-cli) made by [@Kikobeats](https://github.com/Kikobeats)

## Features

- Circular reference support :sparkles:
- Allows for custom formatting
- Supports any arbitrary javascript token (functions, strings, numbers, arrays, you name it!)

## Installation

```sh
npm install --save fmt-obj
```

Or even better

```sh
yarn add fmt-obj
```

## Import and Usage Example

```js
const format = require('fmt-obj')

console.log(format({
message: 'hello world',
dev: true,
awesomeness: 9.99,
body: {
these: null,
are: 'string',
some: 12,
props: false
}
}))
```

## API

### `format(obj, depth = Infinity)`

Prettifies `obj` with optional `depth`.

#### `obj`

Any arbitrary javascript object.

#### `depth` (optional)

Colapses all properties deeper than specified by `depth`.

### `createFormatter({ offset = 2, formatter = identityFormatter })`

Create a custom format function if you need more control of *how* you want to format the tokens.

#### `opts.formatter` (optional)

`fmt-obj` uses [`chalk`](https://github.com/chalk/chalk) for it's default format function. A formatter is mostly used for colors but can be used to manipulate anything.

**Example with rounding numbers**
```js
const format = createFormatter({ number: Math.round })
format({ num: 12.49 }) // -> num: 12
```

The following tokens are available:

* **punctuation** - The characters sorrounding your data: `:` and `"`
* **literal** - Either `true`, `false`, `null` or `undefined`
* **annotation** - Type annotation for errors, functions and circular references like `[Function {name}]`
* **property**
* **string**
* **number**

**Example with a custom color map**
```js
const { createFormatter } = require('fmt-obj')

const format = createFormatter({
offset: 4,

formatter: {
punctuation: chalk.cyan,
annotation: chalk.red,
property: chalk.yellow,
literal: chalk.blue,
number: chalk.green,
string: chalk.bold
}
})
```

#### `opts.offset` (optional)

The amount of left whitespace between the property key and all of it's sub-properties.

## Similar packages

_(Because package discovery is...
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
Kialo - Empowering Reason
Kialo is designed to facilitate constructive debate about the most important issues in the world, without turning into the usual Internet Shouting Factory. We aspire to become not just where you come to argue, but also where you can explore the reasons why people disagree and see diverse points of view on the issues that matter.
economics  politics  debate 
10 days ago by whip_lash
calendarx: :date: Calendar plugin for React pages
Github repo
Name: calendarx
Tagline: :date: Calendar plugin for React pages
Languages:
JavaScript = 14489 bytes

## &lt;Calenda**Rx** /&gt;

As easy as putting `<Calendarx />` in your React app.
First of many _prescribed_ React solutions.

![Calendarx Screen Capture](./public/screencap.gif)

## Usage
```javascript
import Calendarx from 'calendarx'

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

The `Calendarx` view will adapt depending on the number of days that are specified
in `numDays`. If 4 is passed in, the first column will start with your
`referenceDate`, where if 7 is passed in the calendar will align itself to a
week view, and if say 35 is passed in, the calendar will pivot to show the entire
month.

## Options

| Option | Default | Type | Description |
| :------------- | :------------- | :------------- | :------------- |
| events | `[]` | `Array` | Events passed into the calendar |
| referenceDate | `Date.now()` | UTC Timestamp `String`, `Date`, `Moment` | Where the calendar is centered around |
| numDays | `35` | `Number` | Number of days the calendar should display. |
| width | `'100%'` | `String` - CSS string, `Number` - number of pixels | Width of the calendar |
| height | `width` or `'600px'` | `String` - CSS string, `Number` - number of pixels | Height of the calendar |
| todayClass | `'today'` | `String` | Class to be applied to the `DateColumn` with today's date |
| currMonthClass | `'currMonth'` | `String` | Class to be applied to dates of current month |
| prevMonthClass | `'prevMonth'` | `String` | Class to be applied to dates of previous month |
| nextMonthClass | `'nextMonth'` | `String` | Class to be applied to dates of next month |
| prevMonthStyle | `{ opacity: 0.4 }` | `Object` - follow React style syntax | Style to be applied to dates of previous month |
| nextMonthStyle | `{ opacity: 0.4 }` | `Object` - follow React style syntax | Style to be applied to dates of next month |
| themeColor | `'#4dc2fa'` | `String` - CSS | Accents things like today's date and events |
| EventComponent | see [Overriding Event Component](#overriding-event-component) | `React Class` | Component to display events |

## Calendar Events
Passing an `events` array to `<Calendarx />` will create an `EventComponent`
instance for each event, spreading each event as props to the component.
A valid [`Moment`](http://momentjs.com/docs) time is the only required prop to create an event.

### Example
```javascript
const events = [
{
id: 1,
title: 'Birthday',
time: moment().add(0, 'd').format(),
location: 'Home',
color: '#f284a8'
}
]
const App = () => (
<Calendarx...
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
Twitter
RT : 150,000 is our conservative estimate.
from twitter
10 days ago by ryanpitts
au7: Aurelia Framework7: A Lightweight Mobile App Platform
Github repo
Name: au7
Tagline: Aurelia Framework7: A Lightweight Mobile App Platform
Languages:
HTML = 6328 bytes
JavaScript = 3059 bytes

# Aurelia Framework7: A Lightweight Mobile App Platform

![Aurelia Framework7 Hero](http://static.flennik.com/au7-hero.jpg)

## Walkthrough
Quickly build cross-platform hybrid apps for Web, iOS, Android, Windows and PWAs using the slick animations and UI components of Framework7, along with the modular, testable and extensible Aurelia Framework.

Read more about the project on the [announcement blog post](https://blog.flennik.com/a-challenger-for-ionic-aurelia-framework7-63a53e736b8a#.9qtse37zw), and [check out the demo here](http://au7.flennik.com).

### How to Kick Butt
This project uses a few open source technologies. What you can do with this project depends on your mastery of their concepts and APIs. Here is your docs reading list to get the most out of this project:

- Aurelia
- Framework7
- Cordova
- Webpack (v2)

### Routing
We are using Framework7's included router, which supports animations.

Edit the views object in app.js to add and configure new pages. It preloads your pages into the DOM using Framework7's inline pages routing mode.

## Setup

### Requirements
- NodeJS (a newer version with ES2015 support)
- Cordova ``npm install -g cordova``

### Running the App and Dev server
- Run `npm install` to download dependencies
- Run `npm run dev` to run Webpack Dev Server with live reload.
- Get coding!

### Building and Deploying
Run `npm run build` to populate the www folder with your latest minified production build.

Then use Cordova's CLI to build and deploy your app for different platforms:

- ``cordova platform add browser``
- ``cordova run browser``

And:

- ``cordova platform add android``
- ``cordova emulate android``

Consult Cordova's docs for instructions on how to download platform dependencies like Java and Android Studio and deploying to the App and Play stores.

## Guides

### Customizing for Production

#### ***For more information on clean Webpack setups, [check out the blog post!](https://blog.flennik.com/the-fine-art-of-the-webpack-2-config-dc4d19d7f172)***

You can easily customize your Webpack setup. In webpack.config.js, you'll notice:

```javascript
const isProduction = env.production === true
const platform = env.platform
```

These variables allow you to dynamically alter your Webpack configuration, and they are fairly self-explanatory. Check out this example using isProduction:

```javascript
devtool: (() => {
if (isProduction) return 'hidden-source-map'
else return 'cheap-module-eval-source-map'
})()
```

These variables allow you to easily control your config. Although `platform` is simply `default` by default, as you add new platforms to your projects it's not hard to imagine how easily you can change Webpack's behavior.

But what about the app itself? Can you change Aurelia's configuration based on these constants? Why, yes. It comes down to the `PRODUCTION` and `PLATFORM` constants that are set by `webpack.DefinePlugin`.

Here is an example of changing Aurelia's configuration while in production:

```javascript
//main.js
if (PRODUCTION) {
// Turn off logging in production mode.
aurelia.use
...
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
Vine
When kids shows say patently ridiculous things
from twitter
10 days ago by mellowfish
scrolldir: 0 dependency JS plugin to leverage scroll direction with CSS ⬆⬇ 🔌💉
Github repo
Name: scrolldir
Tagline: 0 dependency JS plugin to leverage scroll direction with CSS ⬆⬇ 🔌💉
Homepage: https://dollarshaveclub.github.io/scrolldir/
Languages:
JavaScript = 5653 bytes
HTML = 2317 bytes

<figure align="center">
<img alt="scrolldir banner" src="https://cloud.githubusercontent.com/assets/1074042/22093384/09f3c2a6-ddba-11e6-8706-7e63be185448.jpg" />
</figure>
<p align="center">Leverage Vertical Scroll Direction with CSS 😎</p>

<hr>

<p align="center">
<a href="https://travis-ci.org/dollarshaveclub/scrolldir/">
<img alt="Build Status" src="https://travis-ci.org/dollarshaveclub/scrolldir.svg?branch=master" />
</a>
<a href="https://cdnjs.com/libraries/scrolldir">
<img alt="CDNJS" src="https://img.shields.io/cdnjs/v/scrolldir.svg" />
</a>
<a href="https://greenkeeper.io/">
<img alt="Greenkeeper" src="https://badges.greenkeeper.io/dollarshaveclub/scrolldir.svg" />
</a>
<a href="https://www.npmjs.com/package/scrolldir">
<img alt="npm version" src="https://badge.fury.io/js/scrolldir.svg" />
</a>
<a href="https://github.com/dollarshaveclub/scrolldir">
<img alt="Bower version" src="https://badge.fury.io/bo/scrolldir.svg" />
</a>
<a href="https://twitter.com/home?status=ScrollDir%2C%20a%20micro%20JS%20lib%20that%20describes%20vertical%20scroll%20direction.%20https%3A%2F%2Fgithub.com%2Fdollarshaveclub%2Fscrolldir%20by%20%40pfisher42%20co%20%40yowainwright%20%40DSCEngineering">
<img alt="Share on Twitter" src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social&maxAge=2592000" />
</a>
</p>

<hr>

<h1 align="center">ScrollDir ⬆⬇</h1>

ScrollDir, short for Scroll Direction, is a 0 dependency, ~1kb micro Javascript plugin to easily leverage vertical scroll direction in CSS via a data attribute. 💪

### ScrollDir is perfect for:

- showing or hiding sticky elements based on scroll direction 🐥
- only changing its direction attribute when scrolled a significant amount 🔥
- **ignoring small scroll movements** that cause unwanted jitters 😎

<hr>

## Usage

ScrollDir will set the `data-scrolldir` attribute on the `<html>` element to `up` or `down`:

```html
<html data-scrolldir="up">
```
or
```html
<html data-scrolldir="down">
```

Now it’s easy to change styles based on the direction the user is scrolling!

```css
[data-scrolldir="down"] .my-fixed-header { display: none; }
```

## In Action 🎥

<p align="center">
<a href="https://dollarshaveclub.github.io/scrolldir/">
<img src="https://cloud.githubusercontent.com/assets/1074042/22451992/ebe879b0-e727-11e6-8799-511209695e26.gif" alt="Scrolldir gif" width="100%" />
</a>
</p>

<hr>

## Install 📦

npm
```sh
npm install...
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
svgo: :tiger: Nodejs-based tool for optimizing SVG vector graphics files
Github repo
Name: svgo
Tagline: :tiger: Nodejs-based tool for optimizing SVG vector graphics files
Languages:
JavaScript = 337289 bytes
Makefile = 524 bytes

**english** | [русский](https://github.com/svg/svgo/blob/master/README.ru.md)
- - -

<img src="https://svg.github.io/svgo-logo.svg" width="200" height="200" alt="logo"/>

## SVGO [![NPM version](https://badge.fury.io/js/svgo.svg)](https://npmjs.org/package/svgo) [![Dependency Status](https://gemnasium.com/svg/svgo.svg)](https://gemnasium.com/svg/svgo) [![Build Status](https://secure.travis-ci.org/svg/svgo.svg)](https://travis-ci.org/svg/svgo) [![Coverage Status](https://img.shields.io/coveralls/svg/svgo.svg)](https://coveralls.io/r/svg/svgo?branch=master)

**SVG O**ptimizer is a Nodejs-based tool for optimizing SVG vector graphics files.
![](https://mc.yandex.ru/watch/18431326)

## Why?

SVG files, especially exported from various editors, usually contain a lot of redundant and useless information such as editor metadata, comments, hidden elements, default or non-optimal values and other stuff that can be safely removed or converted without affecting SVG rendering result.

## What it can do

SVGO has a plugin-based architecture, so almost every optimization is a separate plugin.

Today we have:

| Plugin | Description |
| ------ | ----------- |
| [cleanupAttrs](https://github.com/svg/svgo/blob/master/plugins/cleanupAttrs.js) | cleanup attributes from newlines, trailing, and repeating spaces |
| [removeDoctype](https://github.com/svg/svgo/blob/master/plugins/removeDoctype.js) | remove doctype declaration |
| [removeXMLProcInst](https://github.com/svg/svgo/blob/master/plugins/removeXMLProcInst.js) | remove XML processing instructions |
| [removeComments](https://github.com/svg/svgo/blob/master/plugins/removeComments.js) | remove comments |
| [removeMetadata](https://github.com/svg/svgo/blob/master/plugins/removeMetadata.js) | remove `<metadata>` |
| [removeTitle](https://github.com/svg/svgo/blob/master/plugins/removeTitle.js) | remove `<title>` |
| [removeDesc](https://github.com/svg/svgo/blob/master/plugins/removeDesc.js) | remove `<desc>` |
| [removeUselessDefs](https://github.com/svg/svgo/blob/master/plugins/removeUselessDefs.js) | remove elements of `<defs>` without `id` |
| [removeXMLNS](https://github.com/svg/svgo/blob/master/plugins/removeXMLNS.js) | removes `xmlns` attribute (for inline svg, disabled by default) |
| [removeEditorsNSData](https://github.com/svg/svgo/blob/master/plugins/removeEditorsNSData.js) | remove editors namespaces, elements, and attributes |
| [removeEmptyAttrs](https://github.com/svg/svgo/blob/master/plugins/removeEmptyAttrs.js) | remove empty attributes |
| [removeHiddenElems](https://github.com/svg/svgo/blob/master/plugins/removeHiddenElems.js) | remove hidden elements |
| [removeEmptyText](https://github.com/svg/svgo/blob/master/plugins/removeEmptyText.js) | remove...
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
webpack-chain: Use a chaining API to generate and simplify the modification of Webpack 2 configurations.
Github repo
Name: webpack-chain
Tagline: Use a chaining API to generate and simplify the modification of Webpack 2 configurations.
Languages:
JavaScript = 42350 bytes

# webpack-chain

Use a chaining API to generate and simplify the modification of
Webpack 2 and 3 configurations.

This documentation corresponds to v4 of webpack-chain.

* [v3 docs](https://github.com/mozilla-neutrino/webpack-chain/tree/v3)
* [v2 docs](https://github.com/mozilla-neutrino/webpack-chain/tree/v2)
* [v1 docs](https://github.com/mozilla-neutrino/webpack-chain/tree/v1.4.3)

_Note: while webpack-chain is utilized extensively in Neutrino, this package is completely
standalone and can be used by any project._

## Introduction

Webpack's core configuration is based on creating and modifying a
potentially unwieldy JavaScript object. While this is OK for configurations
on individual projects, trying to share these objects across projects and
make subsequent modifications gets messy, as you need to have a deep
understanding of the underlying object structure to make those changes.

`webpack-chain` attempts to improve this process by providing a chainable or
fluent API for creating and modifying webpack configurations. Key portions
of the API can be referenced by user-specified names, which helps to
standardize how to modify a configuration across projects.

This is easier explained through the examples following.

## Installation

`webpack-chain` requires Node.js v6.9 and higher. `webpack-chain` also
only creates configuration objects designed for use in Webpack 2 and 3.

You may install this package using either Yarn or npm (choose one):

**Yarn**

```bash
yarn add --dev webpack-chain
```

**npm**

```bash
npm install --save-dev webpack-chain
```

## Getting Started

Once you have `webpack-chain` installed, you can start creating a
Webpack configuration. For this guide, our example base configuration will
be `webpack.config.js` in the root of our project directory.

```js
// Require the webpack-chain module. This module exports a single
// constructor function for creating a configuration API.
const Config = require('webpack-chain');

// Instantiate the configuration with a new API
const config = new Config();

// Make configuration changes using the chain API.
// Every API call tracks a change to the stored configuration.

config
// Interact with entry points
.entry('index')
.add('src/index.js')
.end()
// Modify output settings
.output
.path('dist')
.filename('[name].bundle.js');

// Create named rules which can be modified later
config.module
.rule('lint')
.test(/\.js$/)
.pre()
.include
.add('src')
.end()
// Even create named uses (loaders)
.use('eslint')
.loader('eslint-loader')
.options({
rules: {
semi: 'off'
}
});

config.module
.rule('compile')
.test(/\.js$/)
.include
.add('src')
.add('test')
.end()
.use('babel')
.loader('babel-loader')
.options({
presets: [
['babel-preset-es2015', { modules: false...
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
egg: Born to build better enterprise frameworks and apps with Node.js & Koa
Github repo
Name: egg
Tagline: Born to build better enterprise frameworks and apps with Node.js & Koa
Homepage: https://eggjs.org
Languages:
JavaScript = 238286 bytes
Shell = 1375 bytes

![](https://raw.githubusercontent.com/eggjs/egg/master/docs/assets/egg-logo.png)

Born to build better enterprise frameworks and apps

[![NPM version][npm-image]][npm-url]
[![NPM quality][quality-image]][quality-url]
[![build status][travis-image]][travis-url]
[![Test coverage][codecov-image]][codecov-url]
[![David deps][david-image]][david-url]
[![Known Vulnerabilities][snyk-image]][snyk-url]
[![NPM download][download-image]][download-url]
[![Gitter][gitter-image]][gitter-url]

[npm-image]: https://img.shields.io/npm/v/egg.svg?style=flat-square
[npm-url]: https://npmjs.org/package/egg
[quality-image]: http://npm.packagequality.com/shield/egg.svg?style=flat-square
[quality-url]: http://packagequality.com/#?package=egg
[travis-image]: https://img.shields.io/travis/eggjs/egg.svg?style=flat-square
[travis-url]: https://travis-ci.org/eggjs/egg
[codecov-image]: https://img.shields.io/codecov/c/github/eggjs/egg.svg?style=flat-square
[codecov-url]: https://codecov.io/gh/eggjs/egg
[david-image]: https://img.shields.io/david/eggjs/egg.svg?style=flat-square
[david-url]: https://david-dm.org/eggjs/egg
[snyk-image]: https://snyk.io/test/npm/egg/badge.svg?style=flat-square
[snyk-url]: https://snyk.io/test/npm/egg
[download-image]: https://img.shields.io/npm/dm/egg.svg?style=flat-square
[download-url]: https://npmjs.org/package/egg
[gitter-image]: https://img.shields.io/gitter/room/eggjs/egg.svg?style=flat-square
[gitter-url]: https://gitter.im/eggjs/egg

## Installation

```bash
$ npm install egg --save
```

Node.js >= 8.0.0 required.

## Features

- ✔︎ Built-in process management
- ✔︎ Plugin system
- ✔︎ Framework customization
- ✔︎ Lots of [plugins](https://github.com/search?q=topic%3Aegg-plugin&type=Repositories)

## Docs & Community

- [Website && Documentations](https://eggjs.org)
- [Plugins](https://github.com/search?q=topic%3Aegg-plugin&type=Repositories)
- [Frameworks](https://github.com/search?q=topic%3Aegg-framework&type=Repositories)
- [Plugin Dependency](http://uml.mvnsearch.org/github/eggjs/egg/blob/master/docs/plugins.puml)

> All the documentations (comments, README, etc.) are in English, except the tutorials and api documentations are still [being translated](https://github.com/eggjs/egg/issues/363).
> Feel free to join us and translate egg documentations. It's appreciated.

## Getting Started

Follow the commands listed below.

```bash
$ npm install egg-init -g
$ egg-init --type simple showcase && cd showcase
$ npm install
$ npm run dev
$ open http://localhost:7001
```

## Examples

See [egg-examples](https://github.com/eggjs/examples).

## How to Contribute

Please let...
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
Twitter
. got me a bouquet of kittens for valentine's day 😹😹😹
from twitter_favs
10 days ago by jhelwig
Twitter
. got me a bouquet of kittens for valentine's day 😹😹😹
from twitter_favs
10 days ago by ichthyos
portfolio-website: GraphQL-powered Portfolio Website
Github repo
Name: portfolio-website
Tagline: GraphQL-powered Portfolio Website
Homepage: https://cosmicjs.com/apps/portfolio-website/demo
Languages:
CSS = 95934 bytes
JavaScript = 21796 bytes
HTML = 4920 bytes

# Portfolio Website
![Portfolio Website](https://cosmicjs.imgix.net/b2f19ca0-f26b-11e6-8893-11cd3268b677-portfolio-website.png?w=1200)
### [View Demo](https://cosmicjs.com/apps/portfolio-website/demo)
Portfolio website powered by Cosmic JS using the [GraphQL API](https://cosmicjs.com/docs/graphql). Includes portfolio management and contact form (powered by MailGun).

1. [Log in to Cosmic JS](https://cosmicjs.com).
2. Create a Bucket.
3. Go to Your Bucket > Apps.
4. Install the [Portfolio Website App](https://cosmicjs.com/apps/portfolio-website).
5. Deploy your Email Capture App to the Cosmic App Server at Your Bucket > Web Hosting.

### Getting Started
```
git clone https://github.com/cosmicjs/portfolio-website
cd portfolio-website
yarn
```
#### Config
Copy the `config/production.js`, add your config values and save as a development config file `config/development.js` (Never push config to your GitHub repo). This follows the [12 Factor App](https://12factor.net) guidelines.
#### Run in development
```
yarn development
```
#### Run in production
```
yarn start
```
#### Start app connected to your Cosmic JS Bucket
```
COSMIC_BUCKET=your-bucket-slug yarn start
```
Open [http://localhost:3000](http://localhost:3000).
### Setting up MailGun
1. Go to MailGun and login to your account or setup a new account.
2. Get your api key and domain.
3. Add your api key and domain to your environment valiables, or hard code them into `config/production.js` (not advised).
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
slim.js: Fast & Robust Front-End Micro-framework based on modern standards
Github repo
Name: slim.js
Tagline: Fast & Robust Front-End Micro-framework based on modern standards
Homepage: http://slimjs.com
Languages:
JavaScript = 80528 bytes
HTML = 13541 bytes

![hello, slim.js](./docs/slim2.png)

[![Build Status](https://semaphoreci.com/api/v1/eavichay/slim-js/branches/master/badge.svg)](https://semaphoreci.com/eavichay/slim-js)

[Chat on gitter](https://gitter.im/slim-js/Lobby?utm_source=share-link&utm_medium=link&utm_campaign=share-link)

# Hello, slim.js

## Version 3 is out
Read the documentation [here](http://slimjs.com)

## Slim is a fast, native and elegant library for web components
Slim.js is a lightning fast library for development of native web-components and custom-elements based modern applications. No black magic involved.
It uses es6+DOM native API and boosts up HTML elements with superpowers.

### Is this another framework
No! It's a slim code layer that adds superpowers to HTML elements, using the browser native capabilities.
But... wait! there's more:
- It has data binding
- It can be extended
- It feels like a framework (but in a good way)
- It's 5475 Bytes! (gzipped) Yep!
- Single file, good to go.
- No tools required, everything is based on native browser API. Choose your own tools.

## Standards compilant
- es6
- web-components V1
- no transpiling or compilation required

## Tools free
- add Slim.js to your project and your'e good to go

# Documentation
- [Developer's Guide](http://slimjs.com)

The documentation site is built with Slim.js. Check out the source code, it's easy.

### Contibutors are welcome.

*USE THE PLATFORM*

[![Support slim.js](https://liberapay.com/assets/widgets/donate.svg)](https://liberapay.com/eavichay/donate)
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
(429) https://twitter.com/i/web/status/963860307671121923
RT : Roses are red
Violets are blue.
WTF?
Check the supplement.
Yeah, they wrote "Violets are blue".
And they claimed th…
from twitter
10 days ago by ceptional
framework: Node.js framework
Github repo
Name: framework
Tagline: Node.js framework
Homepage: http://www.totaljs.com
Languages:
JavaScript = 1063024 bytes
HTML = 6248 bytes
Shell = 565 bytes
CSS = 33 bytes

![Total.js logo](https://www.totaljs.com/img/logo-totaljs.png)

[![Professional Support](https://www.totaljs.com/img/badge-support.svg)](https://www.totaljs.com/support/) [![Chat with contributors](https://www.totaljs.com/img/badge-chat.svg)](https://messenger.totaljs.com) [![NPM version][npm-version-image]][npm-url] [![NPM quality][npm-quality]](http://packagequality.com/#?package=total.js) [![NPM downloads][npm-downloads-image]][npm-url] [![MIT License][license-image]][license-url] [![Build Status][travis-image]][travis-url] [![Gitter chat](https://badges.gitter.im/totaljs/framework.png)](https://messenger.totaljs.com) [![Known Vulnerabilities](https://snyk.io/test/npm/total.js/badge.svg)](https://snyk.io/test/npm/total.js)

Node.js framework
=====================

__Total.js framework__ is a framework for Node.js platfrom written in `pure` JavaScript similar to PHP's Laravel or Python's Django or ASP.NET MVC. It can be used as web, desktop, service or IoT application.

```bash
$ npm install -g total.js
```

[![Support](https://www.totaljs.com/img/button-support.png?v=3)](https://www.totaljs.com/support/)

- [__NEW__ Total.js CMS](http://www.totaljs.com/cms/)
- [__NEW__ Total.js Eshop](http://www.totaljs.com/eshop/)
- [Total.js Wiki](https://www.totaljs.com/wiki/)
- [Total.js Flow](https://www.totaljs.com/flow/)
- [Total.js Flowboard](https://www.totaljs.com/flowboard/)
- [Total.js Messenger](https://www.totaljs.com/messenger/)
- [Total.js Dashboard](https://www.totaljs.com/dashboard/)
- [Total.js BlogEngine](https://www.totaljs.com/blogengine/)
- [Total.js SuperAdmin](https://www.totaljs.com/superadmin/)
- [Total.js HelpDesk](https://www.totaljs.com/helpdesk/)
- [Total.js OpenPlatform](https://www.totaljs.com/openplatform/)
- [Total.js AppMonitor](https://www.totaljs.com/monitor/)
- [Total.js AppDesigner](https://www.totaljs.com/designer/)
- [Total.js modules and packages](https://modules.totaljs.com)
- [Total.js +100 examples](https://github.com/totaljs/examples)
- [NoSQL embedded database explorer](https://www.totaljs.com/nosql/)
- [Download +100 client-side components (jComponent) for free](https://componentator.com)

---

- [Homepage](http://www.totaljs.com)
- [__Get Started__](http://www.totaljs.com/get-started/)
- [__Documentation__](http://docs.totaljs.com)
- [__Wiki for Total.js products__](http://wiki.totaljs.com)
- [__Live chat with professional support__](https://messenger.totaljs.com)
- [__HelpDesk with professional support__](https://helpdesk.totaljs.com)
- [__Blogs__](https://blog.totaljs.com)
- [__Membership__](https://my.totaljs.com)
- [Gitter - Chat for GitHub](https://gitter.im/totaljs/framework)
-...
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
Twitter
RT : I love seeing some benchmarking data in slides like this. "This is ou…
from twitter_favs
10 days ago by anjackson
Twitter
Well, this is the stupidest spin imaginable
from twitter_favs
10 days ago by Arnte
multi.js: A user-friendly replacement for select boxes with multiple attribute enabled
Github repo
Name: multi.js
Tagline: A user-friendly replacement for select boxes with multiple attribute enabled
Homepage: fabianlindfors.se/multijs
Languages:
JavaScript = 7940 bytes
CSS = 1429 bytes

multi.js
=======

multi.js is a user-friendly replacement for select boxes with the multiple attribute. It has no dependencies, is mobile-friendly, and provides search functionality. multi.js is also easy to style with CSS and optionally supports jQuery.

Check out the [demo](http://fabianlindfors.se/multijs/).

![Preview of multi.js](http://fabianlindfors.se/multijs/images/preview.png)

Installation
-----
Install with npm:

```bash
npm install --save multi.js
```

Install with yarn:

```bash
yarn add multi.js
```

Install manually by cloning or downloading the repository to your project and including both files in the dist directory.

```html
<link rel="stylesheet" type="text/css" href="multijs/dist/multi.min.css">
<script src="multijs/dist/multi.min.js"></script>
```

Usage
-----
multi.js can be applied to any select element with the multiple attribute enabled.

```javascript
var select_element = document.getElementById( 'your_select_element' );
multi( select_element );
```

To customize multi a few options can be passed with the function call. Below are all the default values.

```javascript
multi( select_element, {
'enable_search': true,
'search_placeholder': 'Search...',
'non_selected_header': null,
'selected_header': null
});
```

### Column headers

To add headers to both columns set values for these options:

```javascript
multi( select_element, {
'non_selected_header': 'All options',
'selected_header': 'Selected options'
});
```

### jQuery

multi.js is fully native Javascript but also has jQuery support. If you have jQuery included multi can be applied to a select element as follows:

```javascript
$( '#your_select_element' ).multi();
```

TODO
-----
* ~~Native Javascript, no jQuery~~
* ~~Support for disabled options~~
* Browser testing
* Support for optgroups
* Support for retrieving options by AJAX
* Tests

Contributing
-----
All contributions, big and small, are very welcome.

Try to mimic the general programming style (mostly based on personal preferences) and keep any CSS as simple as possible. Build the project with Grunt and bump the version number before creating a pull request.

License
-----
multi.js is licensed under [MIT](https://github.com/Fabianlindfors/multi.js/blob/master/LICENSE).
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
Leaked Chat Transcripts: New York Times Employees Are Pissed About Bari Weiss
In 2016, James Bennet left his esteemed job at The Atlantic to run the editorial pages for The New York Times. His op-ed page became a sped-up version of his…
from instapaper
10 days ago by kohlmannj
Twitter
In the Victorian Era, people sent anonymous 'Vinegar Valentines' postcards to their enemies. They generally portray…
from twitter_favs
10 days ago by SWCarson
alexa-message-builder: Simple message builder for Alexa replies.
Github repo
Name: alexa-message-builder
Tagline: Simple message builder for Alexa replies.
Homepage: https://www.npmjs.com/package/alexa-message-builder
Languages:
JavaScript = 16783 bytes

# Alexa Message Builder

[![](https://travis-ci.org/stojanovic/alexa-message-builder.svg?branch=master)](https://travis-ci.org/stojanovic/alexa-message-builder)
[![npm](https://img.shields.io/npm/v/alexa-message-builder.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/alexa-message-builder)
[![npm](https://img.shields.io/npm/l/alexa-message-builder.svg?maxAge=2592000?style=plastic)](https://github.com/claudiajs/alexa-message-builder/blob/master/LICENSE)

Simple message builder for Alexa response.

## Installation

Alexa Message Builder is available as a node module on NPM.

Install it by running:

```shell
npm install alexa-message-builder --save
```

## Usage

After installing the package, require it in your code:

```javascript
const AlexaMessageBuilder = require('alexa-message-builder')
```

or with `import`* syntax:

```javascript
import AlexaMessageBuilder from 'alexa-message-builder'
```

\* `import` syntax is not supported in Node.js, you need to use additional library like Babel to make it work.

After requiring it, you simply need to initialize the class, use any of available methods from the [documentation](#documentation) below and call `.get()` in the end. For Example:

```javascript
const AlexaMessageBuilder = require('alexa-message-builder')

const message = new AlexaMessageBuilder()
.addText('Hello from Alexa')
.get()
```

will return:

```json
{
"version": "1.0",
"response": {
"shouldEndSession": false,
"outputSpeech": {
"type": "PlainText",
"ssml": "Hello from Alexa"
}
}
}
```

## Motivation

Building JSON responses manually is not fun and hard to read for a big JSON files. The main motivation for this message builder is to replace them with a simple and readable syntax. For example, instead of this JSON:
```json
{
"version": "1.0",
"response": {
"shouldEndSession": false,
"outputSpeech" : {
"type": "PlainText",
"text": "Alexa message builder is a simple message builder for Alexa responses"
},
"card": {
"type": "Standard",
"title": "Alexa Message Builder",
"text": "Alexa message builder description",
"image": {
"smallImageUrl": "http://example.com/small-image-url.png",
"largeImageUrl": "http://example.com/large-image-url.png"
}
}
}
}
```

You can write following JavaScript code:
```javascript
new AlexaMessageBuilder()
.addText('Alexa message builder is a simple message builder for Alexa responses')
.addStandardCard('Alexa Message Builder', 'Alexa message builder description', {
smallImageUrl: 'http://example.com/small-image-url.png',
largeImageUrl: 'http://example.com/large-image-url.png'
})
.keepSession()
...
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
css-loader: Simple loaders for your web applications using only one div and pure CSS :heart:
Github repo
Name: css-loader
Tagline: Simple loaders for your web applications using only one div and pure CSS :heart:
Homepage: http://raphaelfabeni.github.io/css-loader
Languages:
CSS = 19903 bytes
JavaScript = 1965 bytes

# CSS loader

[![CDNJS](https://img.shields.io/cdnjs/v/css-loader.svg)](https://cdnjs.com/libraries/css-loader)

> A few simple examples of loaders using only one `div` and *CSS*.

![loader-g](https://cloud.githubusercontent.com/assets/1345662/19414412/5e472d6c-9322-11e6-9407-5e3662072aee.gif)

[Try it online! :metal:](http://www.raphaelfabeni.com.br/css-loader/)

## Why

It's usually common to show a loader to users when they must wait for something in a web application (an _ajax_ request or a form submit, etc). _Gif_ image loaders were great but by using CSS we can avoid the image request, also it's easier to customise and maintain and it's cooler.

## toc

* [Install](#install)
* [Setup](#setup)
* [Examples](#examples)
* [default](#default)
* [double](#double)
* [bar](#bar)
* [bar ping pong](#bar-ping-pong)
* [border](#border)
* [ball](#ball)
* [smartphone](#smartphone)
* [clock](#clock)
* [curtain](#curtain)
* [music](#music)
* [pokeball](#pokeball)
* [Contributing](#contributing)
* [Browser Support](#browser-support)

## Install

```bash
npm install pure-css-loader
```

Also you can clone the repository or [download the zip file](https://github.com/raphaelfabeni/css-loader/archive/master.zip) and get the main *CSS* file that is located in: `dist/css-loader.css`.

## Setup

Add the CSS file to your project and add the link to the file:

```html
<link rel="stylesheet" href="path/to/css-loader.css">
```

Select the loader and add the corresponding HTML. In order to show the loader, you need to add the helper CSS class `is-active`. And to hide the loader, just do the opposite, removing the CSS helper from the loader. You can do it with JavaScript.

```html
<!-- Loader -->
<div class="loader loader-default"></div>

<!-- Loader active -->
<div class="loader loader-default is-active"></div>
```

## Examples

### Default

```html
<div class="loader loader-default is-active"></div>
```

![loader](https://cloud.githubusercontent.com/assets/1345662/19313531/2c715f18-906d-11e6-856a-17ca264112de.gif)

[See it](http://raphaelfabeni.com.br/css-loader/#/loader-default) :metal: | [CSS](https://raw.githubusercontent.com/raphaelfabeni/css-loader/master/dist/loader-ball.css) :sparkles:

#### Variations

**data-text**: add a _Loading_ text to the loader. Just add the `data-text` attribute.

```html
<div class="loader loader-default is-active" data-text></div>
```

![loader-data-text](https://cloud.githubusercontent.com/assets/1345662/19313794/1fdf0ce0-906e-11e6-8a9f-39d2421a41d6.gif)

[See it](http://raphaelfabeni.com.br/css-loader/#/loader-default-text) :metal:

It's also possible to change...
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
neutrino-dev: Create and build modern JavaScript projects with zero initial configuration.
Github repo
Name: neutrino-dev
Tagline: Create and build modern JavaScript projects with zero initial configuration.
Homepage: https://neutrino.js.org
Languages:
JavaScript = 140859 bytes
Vue = 255 bytes
CSS = 52 bytes

<h1><p align="center"><a href="https://neutrino.js.org"><img src="https://raw.githubusercontent.com/mozilla-neutrino/neutrino-dev/master/docs/assets/logo.png" height="150"></a></p></h1>

### Create and build modern JavaScript applications with zero initial configuration
#### Neutrino combines the power of webpack with the simplicity of presets.

[![NPM version][npm-image]][npm-url]
[![NPM downloads][npm-downloads]][npm-url]
[![Build Status][travis-image]][travis-url]
[![Codacy][codacy-image]][codacy-url]
[![codecov][codecov-image]][codecov-url]
[![Join the Neutrino community on Spectrum][spectrum-image]][spectrum-url]

[https://github.com/mozilla-neutrino/neutrino-dev](https://github.com/mozilla-neutrino/neutrino-dev)

---

Neutrino is a companion tool which lets you build web and Node.js applications with shared presets or configurations.
It intends to make the process of initializing and building projects much simpler by providing minimal development
dependencies.

Neutrino uses webpack to build both web and Node.js projects by providing complete build presets which can be shared
across targets and projects. You can use Neutrino base presets to get started building a variety of projects, create
your own presets by extending the Neutrino core ones to be shared across your own projects or even by the community.
Presets can even be manipulated on a project-by-project basis to handle almost any build situation your preset doesn't
cover.

## Documentation

See the [Neutrino docs](https://neutrino.js.org/)
for details on installation, getting started, usage, and customizing.

### Contributing

Thank you for wanting to help out with Neutrino! We are very happy that you want to contribute, and have put together
this guide to help you get started. We want to do our best to help you make successful contributions and be part of our
community.

- [Contributing to Neutrino](https://neutrino.js.org/contributing/)
- [Participation Guidelines](https://neutrino.js.org/contributing/code-of-conduct.html)

[npm-image]: https://img.shields.io/npm/v/neutrino.svg
[npm-downloads]: https://img.shields.io/npm/dt/neutrino.svg
[npm-url]: https://npmjs.org/package/neutrino
[travis-image]: https://travis-ci.org/mozilla-neutrino/neutrino-dev.svg?branch=master
[travis-url]: https://travis-ci.org/mozilla-neutrino/neutrino-dev
[spectrum-image]: https://withspectrum.github.io/badge/badge.svg
[spectrum-url]: https://spectrum.chat/neutrino
[codacy-image]: https://api.codacy.com/project/badge/Grade/8717707007704c929de39ec20b7b0542
[codacy-url]: https://www.codacy.com/app/Neutrino/neutrino-dev?utm_source=github.com&utm_medium=referral&utm_content=mozilla-neutrino/neutrino-dev&utm_campaign=badger
[codecov-image]: https://codecov.io/gh/mozilla-neutrino/neutrino-dev/branch/master/graph/badge.svg
[codecov-url]: https://codecov.io/gh/mozilla-neutrino/neutrino-dev
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
Twitter
Great podcast on kids’ devices! Have you looked at Amazon’s FreeTime subscription service for Fire? It…
from twitter_favs
10 days ago by aslakr
reactivemaps: A data aware UI components library for building realtime maps
Github repo
Name: reactivemaps
Tagline: A data aware UI components library for building realtime maps
Homepage: https://opensource.appbase.io/reactivemaps
Languages:
JavaScript = 631827 bytes
CSS = 297942 bytes
HTML = 104871 bytes

[![Join the chat at https://gitter.im/appbaseio/reactivemaps](https://badges.gitter.im/appbaseio/reactivemaps.svg)](https://gitter.im/appbaseio/reactivemaps?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) ![Build Status Image](https://img.shields.io/badge/build-passing-brightgreen.svg)

A React components library for building maps that update in realtime.

![](https://i.imgur.com/PqRqJDz.png)

## TOC

1. **[Reactive Maps: Intro](#1-reactive-maps-intro)**
2. **[Features](#2-features)**
3. **[Component Playground](#3-component-playground)**
4. **[Live Examples](#4-live-examples)**
5. **[Installation](#5-installation)**
6. **[Getting Started](#6-getting-started)**
7. **[Docs Manual](#7-docs-manual)**
8. **[Developing Locally](#8-developing-locally)**
9. **[Acknowledgements](#9-acknowledgements)**

<br>

## 1. Reactive Maps: Intro

Reactivemaps is a React based components library for building realtime maps. It is built on top of the appbase.io realtime DB service and ships with 20+ components for Lists, Dropdowns, Numeric Range, Sliders, Data Search, Places Search, Distance Slider and Dropdowns, Calendars, Feeds and Maps.

The library is conceptually divided into two parts:

1. Sensor components and
2. Actuator components.

Each sensor component is purpose built for applying a specific filter on the data. For example:

* A `SingleList` sensor component applies an exact match filter based on the selected item.
* A `RangeSlider` component applies a numeric range query based on the values selected from the UI.

One or more sensor components can be configured to create a combined query context to render the results via an actuator.

**ReactiveMaps** comes with two actuators: `ReactiveMap` and `ReactiveList`. The former displays the filtered data from individual sensor components on a map interface while latter displays the filtered data on a simple list interface.

## 2. Features

### Design

* The sensor / actuator design pattern allows creating complex UIs where any number of sensors can be chained together to reactively update an actuator (or even multiple actuators).
* The library handles the transformation of the UI interactions into database queries. You only need to include the components and associate each with a DB field.
* Built in live updates - Actuators can be set to update results even when the underlying data changes in the DB.
* Comes with a cleanly namespaced styles API that allows extending the existing component styles without hassle.
* Built in `light` and `dark` UI themes.

### Ease of Use

* [Can be installed with NPM](https://opensource.appbase.io/reactive-manual/getting-started/maps-installation.html),
* Can be run in browser without including any NPM or bundlers (gulp, webpack, etc.), see a demo [here](https://github.com/appbaseio-apps/reactivemaps-starter-app#try-in-browser-without-npm),
* Works out of the box with Materialize CSS and comes with a polyfill CSS for...
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
The Bari Weiss problem
People who tweet a lot and/or went to college are always talking about “the discourse.” “The discourse is so bad now.” “The discourse was mean to me.” “The…
from instapaper
10 days ago by AramZS
boundless: ✨ accessible, battle-tested React components with infinite composability
Github repo
Name: boundless
Tagline: ✨ accessible, battle-tested React components with infinite composability
Homepage: https://boundless.js.org/
Languages:
JavaScript = 451348 bytes
CSS = 229129 bytes
HTML = 1919 bytes
Shell = 249 bytes

# Boundless

[![NPM version](https://img.shields.io/npm/v/boundless.svg)](https://www.npmjs.com/package/boundless) [![Build Status](https://travis-ci.org/enigma-io/boundless.svg?branch=master)](https://travis-ci.org/enigma-io/boundless) [![codecov](https://codecov.io/gh/enigma-io/boundless/branch/master/graph/badge.svg?token=p755jHqDqi)](https://codecov.io/gh/enigma-io/boundless)

## Installation

```bash
# the whole library
npm i boundless --save

# or just a part of it
npm i boundless-button --save
```

Boundless currently supports IE10+ (needs a [Promise polyfill](https://cdnjs.com/libraries/es6-promise)) and all other modern browsers.

## Philosophy

Boundless is a UI toolkit that was conceived to abstract away difficult interface patterns. It follows three main guidelines:

1. Performance is mandatory, not a nice-to-have.
2. Components should be as customizable as possible.
3. Components should be as accessible as possible (falling back to WAI-ARIA attributes when necessary.)

The general idea of this library is to provide ready-to-go solutions for things you really wouldn't want to build yourself, not because they're hard... but because they're hard to design _right_. We are always open to suggestions and strive to keep Boundless as concise and useful as possible.

## Reference styles

A precompiled base "skin" is available to use as a base when customizing Boundless for your own project. Some of the components do rely on the reference layout in their styles to function properly. It is designed to be very unopinionated.

You can find the compiled CSS at `/public/skin.css`. There is a minified version available as well: `/public/skin.min.css`.

The Boundless website is based on this skin with branding colors, etc.

## Branding Boundless

Thanks to the modular nature of [Stylus](http://stylus-lang.com/), injecting your own customization to things like accent color(s) is extremely simple.

In your own project's `.styl` file, define any variable overrides (see [variables.styl](https://github.com/enigma-io/boundless/blob/master/variables.styl) for what variables can be overridden), then import Boundless's master styl file:

```stylus
// first, pull in the variables
@require "node_modules/boundless/variables";

// do overrides as desired...
color-accent = red;

// then pull in the rest of the styles
@require "node_modules/boundless/style";
```

Next time your project's CSS is built, Boundless's CSS will automatically be compiled with the appropriate changes and included in your stylesheet.

## Developing Boundless

```bash
git clone git@github.com:enigma-io/boundless.git boundless
cd boundless

npm i
npm start # runs the development server so you can make changes live ✨
```

[MIT License](https://github.com/enigma-io/boundless/blob/master/LICENSE)
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
redux-store-validator: Add validation to your Redux reducers
Github repo
Name: redux-store-validator
Tagline: Add validation to your Redux reducers
Languages:
JavaScript = 2758 bytes

Redux Store Validator
=========
![travis-badge](https://travis-ci.org/alixander/redux-store-validator.svg?branch=master)

Wrapper to add validation to your Redux reducers

```
npm install --save redux-store-validator
```

### Purpose

In a large React/Redux app, the store can become intractable. A common cause of bugs is when the data in the store has changed in a way that the developer didn't expect. `redux-store-validator` is intended to facilitate adding detection of when such a scenario occurs. You can add as many or as little validators to specific parts of your store, and act on it accordingly. For example, you can add a validator to check that a value which you expected to be always positive ever becomes negative. If so, you can log or recover right after the offending action modifies the store.

### Usage

Wrap your reducers

#### reducers/index.js

```js
import { withValidation } from 'redux-store-validator';

import aReducer, { validator as aValidator } from './a';
import { bReducer } from './b';

const reducers = {
a: aReducer,
b: bReducer
}

const validators = {
// Only add validators for substates you want validation on
a: aValidator
}

// Instead of
// const rootReducer = combineReducers(reducers);
// You wrap your reducers in 'withValidation' and pass in the validators to execute
const rootReducer = combineReducers(withValidation(reducers, validators));
```

Add validators to reducers as needed

#### reducers/a.js
```js
export function validator(state) {
return state.word === 'asdf';
}

export default function(state, action) {
switch(action.type) {
case 'asdf':
state.word = 'asdf';
return state;
default:
return state;
}
}
```

That's it. After you've wrapped your reducers and added validators, you can detect if the store has become invalid by querying the state.

`redux-store-validator` adds the following to your redux state:

`state[INVALID_KEYS]`: Array of keys which correspond to the substates that are invalid.

You can act upon it however you like. Below are just a few examples

## Examples of acting upon invalid store

In your component you can choose not to render with the new data if it's invalid.

### components/myComponent.jsx

```js
import { INVALID_KEYS } from 'redux-store-validator';
...

const myComponent = React.createClass({
props: {
text: PropTypes.string,
isValid: PropTypes.bool
},

shouldComponentUpdate(nextProps) {
return nextProps.isValid;
},

...

render() {
return <div>{this.props.text}</div>;
}
});

function mapStateToProps(state) {
return {
text: state.a.word,
isValid: state[INVALID_KEYS].includes('a')
}
}
...
```

---------------------------

You can replace the state with a default valid one as soon as an action caused it to become invalid.

#### Back in reducers/index.js

```js
import aReducer, {
validator as aValidator,
defaultState as aDefaultState
} from './a';
import {...
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
unfetch: 🐶 Bare minimum fetch polyfill in 500 bytes.
Github repo
Name: unfetch
Tagline: 🐶 Bare minimum fetch polyfill in 500 bytes.
Homepage: https://npm.im/unfetch
Languages:
JavaScript = 7857 bytes

<p align="center">
<img src="https://i.imgur.com/JaXEFNp.png" width="300" height="300" alt="unfetch">
<br>
<a href="https://www.npmjs.org/package/unfetch"><img src="https://img.shields.io/npm/v/unfetch.svg?style=flat" alt="npm"></a> <a href="https://travis-ci.org/developit/unfetch"><img src="https://travis-ci.org/developit/unfetch.svg?branch=master" alt="travis"></a>
</p>

# unfetch

> Tiny 500b fetch "barely-polyfill"

- **Tiny:** under **500 bytes** of [ES3](https://unpkg.com/unfetch) gzipped
- **Minimal:** just `fetch()` with headers and text/json responses
- **Familiar:** a subset of the full API
- **Supported:** supports IE8+ _(assuming `Promise` is polyfilled of course!)_
- **Standalone:** one function, no dependencies
- **Modern:** written in ES2015, transpiled to 500b of old-school JS

> 🤔 **What's Missing?**
>
> - Uses simple Arrays instead of Iterables, since Arrays _are_ iterables
> - No streaming, just Promisifies existing XMLHttpRequest response bodies
> - Use in Node.JS is handled by [isomorphic-unfetch](https://github.com/developit/unfetch/tree/master/packages/isomorphic-unfetch)

* * *

## Table of Contents

- [Install](#install)
- [Usage](#usage)
- [Examples & Demos](#examples--demos)
- [API](#api)
- [Caveats](#caveats)
- [Contribute](#contribute)
- [License](#license)

* * *

## Install

This project uses [node](http://nodejs.org) and [npm](https://npmjs.com). Go check them out if you don't have them locally installed.

```sh
$ npm install --save unfetch
```

Then with a module bundler like [rollup](http://rollupjs.org/) or [webpack](https://webpack.js.org/), use as you would anything else:

```javascript
// using ES6 modules
import fetch from 'unfetch'

// using CommonJS modules
var fetch = require('unfetch')
```

The [UMD](https://github.com/umdjs/umd) build is also available on [unpkg](https://unpkg.com):

```html
<script src="//unpkg.com/unfetch/dist/unfetch.umd.js"></script>
```

This exposes the `unfetch()` function as a global.

* * *

## Usage

As a [**ponyfill**](https://ponyfill.com):

```js
import fetch from 'unfetch';

fetch('/foo.json')
.then( r => r.json() )
.then( data => {
console.log(data);
});
```

Globally, as a [**polyfill**](https://ponyfill.com/#polyfill):

```js
import 'unfetch/polyfill';

// "fetch" is now installed globally if it wasn't already available

fetch('/foo.json')
.then( r => r.json() )
.then( data => {
console.log(data);
});
```

## Examples & Demos

[**Real Example on...
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
AR.js: Efficient Augmented Reality for the Web - 60fps on mobile!
Github repo
Name: AR.js
Tagline: Efficient Augmented Reality for the Web - 60fps on mobile!
Languages:
JavaScript = 2597815 bytes
HTML = 511847 bytes
Makefile = 15652 bytes
C = 12484 bytes
GAP = 12484 bytes
Brainfuck = 12484 bytes
Forth = 12484 bytes
CSS = 292 bytes

# AR.js - Efficient Augmented Reality for the Web

I am focusing hard on making AR for the web a reality.
This repository is where I publish the code.
Contact me anytime [@jerome_etienne](https://twitter.com/jerome_etienne).
Stuff are still moving fast, We reached a good status tho.
An article has been published on [uploadvr](https://uploadvr.com/ar-js-efficient-augmented-reality-for-the-web/).
So I wanted to publish thus people can try it and have fun with it :)

- **Very Fast** : it runs efficiently even on phones. [60 fps on my 2 year-old phone](https://twitter.com/jerome_etienne/status/831333879810236421)!
- **Web-based** : It is a pure web solution, so no installation required. Full javascript based on three.js + jsartoolkit5
- **Open Source** : It is completely open source and free of charge!
- **Standards** : It works on any phone with [webgl](http://caniuse.com/#feat=webgl) and [webrtc](http://caniuse.com/#feat=stream)

[![AR.js 1.0 Video](https://cloud.githubusercontent.com/assets/252962/23441016/ab6900ce-fe17-11e6-971b-24614fb8ac0e.png)](https://youtu.be/0MtvjFg7tik)

If you wanna chat, check [![Gitter chat](https://badges.gitter.im/AR-js/Lobby.png)](https://gitter.im/AR-js/Lobby)

# Try it on Mobile

It works on all platforms. Android, IOS and window phone. It run **any browser with WebGL and WebRTC**.
(for IOS, you need to update to ios11)

To try on your phone is only 2 easy steps, check it out!

1. Open this [hiro marker image](https://jeromeetienne.github.io/AR.js/data/images/HIRO.jpg) in your desktop browser.
1. Open this [augmented reality webapps](https://jeromeetienne.github.io/AR.js/three.js/examples/mobile-performance.html) in your phone browser, and point it
to your screen.

**You are done!** It will open a webpage which read the phone webcam, localize a hiro marker and add 3d on top of it, as you can see below.

![screenshot](https://cloud.githubusercontent.com/assets/252962/23072106/73a0656c-f528-11e6-9fcd-3c900d1d47d3.jpg)

# Standing on the Shoulders of Giants

So we shown it is now possible to do 60fps web-based augmented reality on a phone.
This is great for sure but how did we get here ? **By standing on the shoulders of giants!**
It is thanks to the hard work from others, that we can today reach this mythic 60fps AR.
So i would like to thanks :

- **three.js** for being a great library to do 3d on the web.
- **artoolkit**! years of development and experiences on doing augmented reality
- **emscripten and asm.js**! thus we could compile artoolkit c into javascript
- **chromium**! thanks for being so fast!

Only thanks to all of them, i could do my part : Optimizing performance from 5fps on high-end
phone, to 60fps on 2years old phone.

After all this work done by a lot of people, we have a *web-based augmented reality solution fast enough for mobile*!

Now, many people got a phone powerful enough to do web AR in their pocket.
I think this performance improvement makes web AR a...
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
Twitter
I gotta say, I'm pretty proud of my GIF selection here.
from twitter
10 days ago by brundlefly
snap-shot: Jest-like snapshot feature for the rest of us, works magically by finding the right caller function
Github repo
Name: snap-shot
Tagline: Jest-like snapshot feature for the rest of us, works magically by finding the right caller function
Languages:
JavaScript = 27659 bytes
Shell = 1819 bytes
HTML = 120 bytes

# snap-shot

> Jest-like snapshot feature for the rest of us + data-driven testing!

**deprecated** please use [snap-shot-it][snap-shot-it] - it grabs test instance
at runtime, avoiding looking at the source code and getting lost in the transpiled code.

[snap-shot-it]: https://github.com/bahmutov/snap-shot-it

[![NPM][npm-icon] ][npm-url]

[![Build status][ci-image] ][ci-url]
[![semantic-release][semantic-image] ][semantic-url]
[![js-standard-style][standard-image]][standard-url]

[![status][link1]][url1] [snap-shot-jest-test](https://github.com/bahmutov/snap-shot-jest-test) - for testing `snap-shot` against Jest runner (React + JSX)

[![status][link2]][url2] [snap-shot-modules-test](https://github.com/bahmutov/snap-shot-modules-test) - for testing against transpiled ES6 modules

[![status][link3]][url3] [snap-shot-vue-test](https://github.com/bahmutov/snap-shot-vue-test) - for testing `snap-shot` inside Jest + Vue.js project

[![status][link4]][url4] [snap-shot-jsdom-test](https://github.com/bahmutov/snap-shot-jsdom-test) - for testing `snap-shot` using mock DOM adapter and element serialization

[![status][link5]][url5] [snap-shot-ava-test](https://github.com/bahmutov/snap-shot-ava-test) - for testing how `snap-shot` works with [Ava][ava] test framework

[link1]: https://travis-ci.org/bahmutov/snap-shot-jest-test.svg?branch=master
[url1]: https://travis-ci.org/bahmutov/snap-shot-jest-test
[link2]: https://travis-ci.org/bahmutov/snap-shot-modules-test.svg?branch=master
[url2]: https://travis-ci.org/bahmutov/snap-shot-modules-test
[link3]: https://travis-ci.org/bahmutov/snap-shot-vue-test.svg?branch=master
[url3]: https://travis-ci.org/bahmutov/snap-shot-vue-test
[link4]: https://travis-ci.org/bahmutov/snap-shot-jsdom-test.svg?branch=master
[url4]: https://travis-ci.org/bahmutov/snap-shot-jsdom-test
[link5]: https://travis-ci.org/bahmutov/snap-shot-ava-test.svg?branch=master
[url5]: https://travis-ci.org/bahmutov/snap-shot-ava-test
[ava]: https://github.com/avajs/ava

## Why

Read [Snapshot testing the hard way](https://glebbahmutov.com/blog/snapshot-testing/)

I like [Jest snapshot](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html)
idea and want it without the rest of Jest testing framework. This module is
JUST a single assertion method to be used in BDD frameworks (Mocha, Jasmine)

Also, I really really really wanted to keep API as simple and as "smart"
as possible. Thus `snap-shot` tries to find the surrounding unit test name
by inspecting its call site
(using [stack-sites](https://github.com/bahmutov/stack-sites) or
[callsites](https://github.com/sindresorhus/callsites#readme))
and parsing AST of the spec file
(using [falafel](https://github.com/substack/node-falafel#readme)).

Snapshot...
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
David Pogue Conducts Blind Test of HomePod Against Competitors
David Pogue: Of course, I knew what the results would be. I’d heard them myself in the Apple demo; I’d read the other reviews; and I’d done the dress rehearsal the night before.
10 days ago by ryanalvarado
Twitter
Dreamers are still held hostage by Republicans, the president says “no really, I care about domestic violence,” a s…
from twitter_favs
10 days ago by ryanpitts
react-starter: Simple Redux+React starter kit
Github repo
Name: react-starter
Tagline: Simple Redux+React starter kit
Languages:
Vim script = 36236 bytes
JavaScript = 6597 bytes
CSS = 610 bytes
HTML = 263 bytes

**A simple starter kit for your Redux+React apps**

This repo can be used both as a starter kit for developing Redux+React apps as
well as a helpful guide to those wishing to see some simple code (I hope) in
action.

Here's a screenshot of the app

![app](https://dl.dropboxusercontent.com/u/30714030/redux-app.png)

We use a very simple store containing two counters. The first counter
increments/decrements by 1. The second counter increments/decrements by 2. We
also have a Messenger component which sends messages to the first counter.

In all there are three components all as children of the main App component.

App is a container which is aware of Redux. The three child components below it
are not. They act as *dumb* components which simply update their views based on
change in state.

I also hope you understand and appreciate the organization of the source tree.

![tree](https://dl.dropboxusercontent.com/u/30714030/tree.png)

actions, components, containers, reducers go into their own directores. All
styles use SASS.

Global style is defined in styles/app.scss

Component specific style is in the related component's directory.

I'm using webpack to bundle all this stuff.

If you want to run this app:
* Download this repo (or clone it)
* cd into it
* npm install (assuming you already have node installed)
* npm run test (a very simple test)
* npm run start
* In your browser - http://localhost:8080
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
Twitter
RT : Swamp McSwampy, head of EPA, has to fly first class at taxpayer expense, because he might have to talk to citizens…
from twitter
10 days ago by burritojustice
Redux-Queue: Higher order reducer to handle execution order of actions
Github repo
Name: Redux-Queue
Tagline: Higher order reducer to handle execution order of actions
Languages:
JavaScript = 8695 bytes
TypeScript = 4226 bytes

Redux-Queue
====

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

Higher order reducer so you don't have to worry about order of arrival of the results of your actions.

Installation
----

Using Yarn:

`yarn add redux-queue`

In your `reducers.js` (or where you combine your reducers), wrap it:

```javascript
import Queue from 'redux-queue';
import MyReducer from './my_reducer';

MyReducer = Queue(MyReducer);

//...pass to Redux
````

tl;dr
----

Make sure the async result of your action is always executed directly after the enthusiastic one. Add `queued: true`
to your actions and add `parent: action` to the async result to have them execute after the first one:

```javascript
function doSomething() {
return dispatch => {
const action = {
type: MY_ACTION,
queued: true
};
dispatch(action);

setTimeout(() => {
dispatch({
type: MY_ACTION_SUCCESS,
queued: true,
parent: action
});
}, 1000);
};
}
```

Example
----

Managing state while responses will arrive asynchronously back to you is hard. Imagine the following scenario:

Dispatch action `1`, user continues and action `2` is dispatched, meanwhile you're syncing state with the server
so you get the response from action `1` back, lets call this `a`. So now the order of dispatched actions on your reducer
is as follows:

`1 -> 2 -> a`

Ok, so if I apply my server state `a` on top of `2` this might result in weird unexpected glitches in the resulting
state, god forbid the initial request fails and we're left with an out-of-sync state. What we want is:

`1 -> a -> 2`

But without having to block user interaction while we're syncing state with, for example, a server. This is where the
Redux-Queue comes into play.

It will save all applied actions and prior states so it will always be able to "inject" the server response in between
two other actions as well as reverting local changes when a prior request fails.

Usage
----

Set-up by wrapping your regular reducers with the Queue:

```javascript
import {combineReducers} from 'redux'
import Queue from 'redux-queue';

let reducers = combineReducers({
entries: Queue(entries)
});
```

Dispatch actions which announce they are queued (including [Redux Thunk](https://github.com/gaearon/redux-thunk)):

```javascript
function doSomething() {
return dispatch => {
const action = {
type: MY_ACTION,
queued: true
};
dispatch(action);

setTimeout(() => {
dispatch({
type: MY_ACTION_SUCCESS,
queued: true,
parent: action
});
}, 1000);
};
}
```

No matter what happens in between `MY_ACTION` and `MY_ACTION_SUCCESS` these will always be executed in...
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
Twitter
I am referring to the 7 dimensions of learning culture described by Watkins and Marsick. It is speci…
from twitter
10 days ago by redasadki
« earlier      later »

Copy this bookmark:



description:


tags:



Copy this bookmark:



description:


tags: