recent bookmarks

nuxt.js-website: Nuxt.js website example using Cosmic JS
Github repo
Name: nuxt.js-website
Tagline: Nuxt.js website example using Cosmic JS
Homepage: https://cosmicjs.com/apps/nuxtjs-website/demo
Languages:
Vue = 4555 bytes
CSS = 1553 bytes
JavaScript = 856 bytes

# Nuxt.js Website

![cosmic Vue Nuxt](https://cloud.githubusercontent.com/assets/904724/22075187/452f04e8-ddab-11e6-897c-3e065da06306.png)

### [View Demo](https://cosmicjs.com/apps/nuxtjs-website/demo)

### Getting Started

```
git clone https://github.com/cosmicjs/nuxt.js-website
cd nuxt.js-website
npm install # or yarn install
```

#### Run in development
```
npm run dev
```

#### Run in production
```
COSMIC_BUCKET=your-bucket-slug npm start
```
Open [http://localhost:3000](http://localhost:3000).

### Nuxt.js + Vue + Cosmic JS
You can easily manage the content in your Nuxt.js website on Cosmic JS. Follow these steps:

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

### Benefits
#### Nuxt.js
[Nuxt.js](https://github.com/nuxt/nuxt.js) is a gift to the Vue community. Building Vue universal applications is not an easy task and the Nuxt.js framework has greatly simplified the process. Some immediate benefits include:

1. Less boilerplate for managing code reuse between server and client.
2. Get up and going with your development environment instantly with hot-reloading.
3. Simplified paging.

[... see more on their GitHub page](https://github.com/nuxt/nuxt.js).

#### Cosmic JS
Cosmic JS is a perfect backend to manage your Universal application.

1. Query each page easily using the [Cosmic JS NPM Module](https://github.com/cosmicjs/cosmicjs-node).
2. No CMS boilerplate to configure, fast and easy setup.
3. No updates or security updates required.

[... see more on the Cosmic JS website](https://cosmicjs.com).
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
ngx-snake: Snake arcade game implemented in Angular 5
Github repo
Name: ngx-snake
Tagline: Snake arcade game implemented in Angular 5
Homepage: https://samirhodzic.github.io/ngx-snake/
Languages:
TypeScript = 8485 bytes
CSS = 2344 bytes
HTML = 1620 bytes

# ngx-Snake

[![build-url][build-url-svg]][build-url]
[![Dependencies][dependencies]][dependencies-url]
[![Dev Dependencies][dev-dependencies]][dev-dependencies-url]

> ngx-Snake is simple Snake arcade game implemented in Angular 5 (latest 5.0.0)

#### Demo (Updated: 13/11/2017)

https://samirhodzic.github.io/ngx-snake/

#### Controls

UP, DOWN, LEFT, RIGHT - to control snake

## Setup

**Note**: Require Node 4+ together with Npm 3+, also be sure to install [Angular-CLI](https://github.com/angular/angular-cli) (latest 1.5.0)

```bash
$ npm install -g @angular/cli@latest
```

Clone this repo in your favourite shell:

```bash
$ git clone https://github.com/SamirHodzic/ngx-snake.git
```

Install the npm packages described in the package.json:

```bash
$ npm install
```
Transpile typescript into javascript, host the app and monitor the changes:

```bash
$ ng serve
```

Visit http://localhost:4200 and play!

## TODO
* ~~Save Best Score~~
* Multiple modes (in progress)
* ~~Classic~~
* ~~No Walls~~
* ~~Obstacles~~
* Multiple Fruits
* Update UI
* ~~Make it responsive~~
* Introduce controls for mobile devices
* Write tests
* ...

[dependencies]: https://david-dm.org/samirhodzic/ngx-snake.svg
[dependencies-url]: https://david-dm.org/samirhodzic/ngx-snake
[dev-dependencies]: https://david-dm.org/samirhodzic/ngx-snake/dev-status.svg
[dev-dependencies-url]: https://david-dm.org/samirhodzic/ngx-snake?type=dev
[build-url]: https://travis-ci.org/SamirHodzic/ngx-snake
[build-url-svg]: https://travis-ci.org/SamirHodzic/ngx-snake.svg?branch=master
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
tilt.js: A tiny 60+fps parallax tilt hover effect for jQuery.
Github repo
Name: tilt.js
Tagline: A tiny 60+fps parallax tilt hover effect for jQuery.
Homepage: http://gijsroge.github.io/tilt.js/
Languages:
JavaScript = 16214 bytes
HTML = 999 bytes

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

# Tilt.js
A tiny requestAnimationFrame powered 60+fps lightweight parallax tilt effect for jQuery.

Weights just ⚖**1.71kb Gzipped**
![Tilt.js demo gif](http://gijsroge.github.io/tilt.js/tilt.js.gif)

#### Take a look at the **[landing page](http://gijsroge.github.io/tilt.js/)** for demos.

### Usage

```html
<!DOCTYPE html>
<body>
<div data-tilt></div> <!-- Tilt element -->
<script src="jquery.js" ></script> <!-- Load jQuery first -->
<script src="tilt.js"></script> <!-- Load Tilt.js library -->
</body>
```

### Options
```js
maxTilt: 20,
perspective: 1000, // Transform perspective, the lower the more extreme the tilt gets.
easing: "cubic-bezier(.03,.98,.52,.99)", // Easing on enter/exit.
scale: 1, // 2 = 200%, 1.5 = 150%, etc..
speed: 300, // Speed of the enter/exit transition.
transition: true, // Set a transition on enter/exit.
disableAxis: null, // What axis should be disabled. Can be X or Y.
reset: true, // If the tilt effect has to be reset on exit.
glare: false, // Enables glare effect
maxGlare: 1 // From 0 - 1.
```

### Events
```js
const tilt = $('.js-tilt').tilt();
tilt.on('change', callback); // parameters: event, transforms
tilt.on('tilt.mouseLeave', callback); // parameters: event
tilt.on('tilt.mouseEnter', callback); // parameters: event
```

### Methods
```js
const tilt = $('.js-tilt').tilt();

// Destroy instance
tilt.tilt.destroy.call(tilt);

// Get values of instance
tilt.tilt.getValues.call(tilt); // returns [{},{},etc..]

// Reset instance
tilt.tilt.reset.call(tilt);
```

### Install
- **yarn:** `yarn add tilt.js`
- **npm:** `npm install --save tilt.js`

### CDN
- https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js
- https://unpkg.com/tilt.js@1.2.1/dest/tilt.jquery.min.js

### Alternatives
- **Vanilla JS:** https://github.com/micku7zu/vanilla-tilt.js
- **React:** https://github.com/jonathandion/react-tilt
- **Polymer:** https://github.com/YingshanDeng/polymer-tilt
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
Twitter
Nice. ice. (Cc: --thought you might like this one.)
LakeBaikal  from twitter
10 days ago by Kolya
Don’t knock Donald Trump for playing so much golf. Here’s why | Oliver Burkeman | Life and style | The Guardian
It really is good that he is out in nature Spending time in nature, as you’re surely aware by now, is good for your mental health. Like, really, really good.…
article 
10 days ago by K3it4r0
qart.js: Generate artistic QR code. 🎨
Github repo
Name: qart.js
Tagline: Generate artistic QR code. 🎨
Homepage: https://kciter.github.io/qart.js/
Languages:
JavaScript = 98341 bytes
HTML = 6358 bytes

<h1 align="center">qart.js</h1>
<p align="center">
<a href="https://cdnjs.com/libraries/qartjs"><img src="https://img.shields.io/cdnjs/v/qartjs.svg" alt="CDNJS"></a>
<a href="https://www.npmjs.com/package/qartjs"><img src="https://img.shields.io/npm/dt/qartjs.svg" alt="Downloads"></a>
<a href="https://www.npmjs.com/package/qartjs"><img src="https://img.shields.io/npm/v/qartjs.svg" alt="Version"></a>
<a href="https://www.npmjs.com/package/qartjs"><img src="https://img.shields.io/npm/l/qartjs.svg" alt="License"></a>
<br>
Merges Pictures and QR Codes for Artistic QR Codes.
<br>
<img src="intro.png" width="427">
</p>

## Glance At
https://kciter.github.io/qart.js/

## Support
If you like this open source, you can sponsor it. :smile:
```
Litecoin: LZSFLGDLe1pBxQB7v54kEcobYnu1uAR9U6
Bitcoin: 1Hrauu2sPczma53gpYU4Y2kap5Hi6K3Ma3
```

## Installation
### NPM
```
$ npm install qartjs
```
or clone this repository and copy `qart.min.js` to your project.

### CDN
```html
<script src="//cdnjs.cloudflare.com/ajax/libs/qartjs/1.0.2/qart.min.js"></script>
```

## Usage
### In the browser
```html
<script src="../dist/qart.min.js"></script>
<script>
var qart = new QArt({
value: value,
imagePath: './example.png',
filter: filter,
size: 195
}).make();
document.getElementById('qart').appendChild(qart);
</script>
```

### With ES6
```js
import QArt from 'qartjs';
const qart = new QArt({
value: value,
imagePath: './example.png',
filter: filter,
size: 195
});
document.getElementById('qart').appendChild(qart.make());
```

### With React
This is a simple implementation of QArt as React Component. [react-qart](https://github.com/BatuhanK/react-qart)

### With Angular.JS
There is a directive available for using qart.js in Angular.js: [angular-qart](https://github.com/isonet/angular-qart)

### With Vue 2.x
There is a directive available for using qart.js in Vue.js 2.x : [vue-qart](https://github.com/superman66/vue-qart)

## Options
|Field|Type|Description|Default|
|-----|----|-----------|-------|
|value|String|The data of the QR code.|*Required*|
|imagePath|String|The path of the combined image.|*Required*|
|filter|String|Define an image filter. `threshold` or `color`|threshold|
|size|Integer|Define an image size in pixels.|195
|version|Integer|QRCode version (1 <= version <= 40)|10|
|background|CSSColor|Implement background if exist|undefinded
|fillType|scale_to_fit/fill| Place image type(fill or scale to fit)|scale_to_fit

## Dependency
* [qrcode](https://github.com/kazuhikoarase/qrcode-generator/tree/master/js)

## Inspire
*...
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
Don’t knock Donald Trump for playing so much golf. Here’s why | Oliver Burkeman
It really is good that he is out in nature Spending time in nature, as you’re surely aware by now, is good for your mental health. Like, really, really good. People criticise Donald Trump for whiling away so many hours on golf courses, but they’re wrong: imagine the damage he’d wreak if his rage and repressed self-loathing weren’t offset by the restorative benefits of all that greenery! So there’s nothing intrinsically surprising about a new study, led by Viren Swami of Anglia Ruskin University, in Cambridge, suggesting that natural environments improve people’s body image; after all, they improve everything. What remains debatable is why. One of the most beguiling answers – first given three decades ago by the US academics Rachel and Stephen Kaplan – is also maybe the most pleasingly named concept in psychology. In a world of relentless, aggressive demands on our attention, the Kaplans argued, nature does something different: it exerts “soft fascination”. Soft fascination has two crucial components. First, it’s effortless: you don’t need to “try to focus” on the wind in the trees, or a moor top blanketed in heather. Second, it’s partial: it absorbs some attention, but leaves some free for reflection, conversation or mind-wandering. The result is what the Kaplans called “cognitive quiet”, in which the muscle of effortful attention – the one you use to concentrate on work – gets to rest, but without the boredom you’d feel if you had nothing to focus on. This helps explain why nature’s benefits aren’t restricted to, say, trips to the Grand Canyon or Great Barrier Reef. Those places seize your whole attention, whereas your local park may seize just enough of it to let the rest of your mind relax. Related: Addicted to digital technology? Here's how to beat the habit | Oliver Burkeman Continue reading...
from instapaper
10 days ago by K3it4r0
Twitter
RT : Theory : A d o n i s is Reginald Perrin
from twitter
10 days ago by philbarker
Twitter
RT : British centrism explained.
from twitter
10 days ago by pelles
react-password-strength: A password strength indicator field for use in React projects
Github repo
Name: react-password-strength
Tagline: A password strength indicator field for use in React projects
Languages:
JavaScript = 11450 bytes
CSS = 1966 bytes

# React Password Strength ![build status](https://codeship.com/projects/0fd512b0-c9f6-0134-86e7-125925b29f4b/status?branch=master)

A password strength indicator field using [zxcvbn](https://github.com/dropbox/zxcvbn) to calculate a password strength score.

_Note: zxcvbn is a large library it's recommended you split the codebase to manage bundle size._

[Try it live!](https://reactpasswordstrength.netlify.com)

## Install in your project

`npm install --save react-password-strength`

_Note: react/react-dom is a peer dependency. You should be using this in a React project._

## Run the example locally

See the [example repo](https://github.com/mmw/react-password-strength-example)

## Using the tool

```
<ReactPasswordStrength
className="customClass"
style={{ display: 'none' }}
minLength={5}
minScore={2}
scoreWords={['weak', 'okay', 'good', 'strong', 'stronger']}
changeCallback={foo}
inputProps={{ name: "password_input", autoComplete: "off", className: "form-control" }}
/>
```

### Importing

If using ES6 imports:
`import ReactPasswordStrength from 'react-password-strength';`

Using CommonJS require:
`var ReactPasswordStrength = require('react-password-strength');`

Using in a Universal JS App (server-side rendering):
- Import component from `react-password-strength/dist/universal`
- Include default style from `react-password-strength/dist/style.css`.

### Props

#### ClassName

- ClassName to render with default container classes

#### Style

- Style object to customize container

#### minLength (Default: 5)

- Minimum password length acceptable for password to be considered valid

#### minScore (Default: 2)

- Minimum score acceptable for password to be considered valid
- Scale from 0 - 4 denoting too guessable to very unguessable
- See [zxcvbn](https://github.com/dropbox/zxcvbn) docs for more detail

#### scoreWords (Default: ['weak', 'weak', 'okay', 'good', 'strong'])

- An array denoting the words used to describe respective score values in the UI

#### tooShortWord (Default: 'too short')

- A string to describe when password is too short (based on minLength prop).

#### changeCallback

- Callback after input has changed (and score was recomputed)
- React Password Strength passes two objects to the callback function:
- current app state (`score`, `password`, `isValid`)
- full result produced by [zxcvbn](https://github.com/dropbox/zxcvbn) including `feedback` (see docs for more properties)

#### inputProps

- Props to pass down to the `input` element of the component. Things like `name`, `id`, etc
- Protected props: `className`, `onChange`, `ref`, `value`
- Passing in `className` will append to the existing classes
- The remaining props will be ignored

#### defaultValue

- A default value to set for the password field. If a non-empty string is provided the `changeCallback`...
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
Twitter
RT : Roses are red
Warrants are good
Privacy’s too often
Misunderstood

“If you’ve done nothing wrong
You have nothing t…
from twitter
10 days ago by not_napoleon
react-absolute-grid: An absolutely positioned, animated, filterable, sortable, drag and droppable, ES6 grid for React.
Github repo
Name: react-absolute-grid
Tagline: An absolutely positioned, animated, filterable, sortable, drag and droppable, ES6 grid for React.
Homepage: http://jrowny.github.io/react-absolute-grid/demo
Languages:
JavaScript = 20107 bytes
HTML = 1438 bytes
CSS = 765 bytes

React Absolute Grid
===================
An absolute layout grid with animations, filtering, zooming, and drag and drop support. Use your own component as the grid item. See the [Demo](http://jrowny.github.io/react-absolute-grid/demo/).

Usage:
------

Install with `npm install react-absolute-grid`

```javascript
import React from 'react';
import createAbosluteGrid from './lib/AbsoluteGrid.jsx';

// This is the component that will display your data
import YourDisplayComponent from 'your-display-component';

var sampleItems = [
{key: 1, name: 'Test', sort: 0, filtered: 0},
{key: 2, name: 'Test 1', sort: 1, filtered: 0},
];

// Pass your display component to create a new grid
const AbsoluteGrid = createAbsoluteGrid(YourDisplayComponent, {someProp: 'my component needs this'});
React.render(<AbsoluteGrid items={sampleItems} />, document.getElementById('Container'));
```

CreateAbsoluteGrid
------
```javascript
createAbsoluteGrid(DisplayComponent, displayProps = {}, forceImpure = false)
```

* `DisplayComponent`: is a react component to display in your grid
* `displayProps`: *optional* : are properties you want passed down to the DisplayComponent such as event handlers.
* `forceImpure`: *optional* : **not recommended** Will make this function as an impure component, meaning it always renders.

Options (Properties)
------
| Property | Default | Description |
|---|:---:|---|
| **items** | [] | The array of items in the grid |
| **keyProp** | 'key' | The property to be used as a key |
| **filterProp** | 'filtered' | The property to be used for filtering, if the filtered value is true, the item won't be displayed. It's important to not remove items from the array because that will cause React to remove the DOM, for performance we would rather hide it then remove it. |
| **sortProp** | 'sort' | The property to sort on |
| **itemWidth** | 128 | The width of an item |
| **itemHeight** | 128 | The height of an item |
| **verticalMargin** | -1 | How much space between rows, -1 means the same as columns margin which is dynamically calculated based on width |
| **responsive** | false | If the container has a dynamic width, set this to true to update when the browser resizes |
| **dragEnabled** | false | Enables drag and drop listeners, onMove will be called with the keys involved in a drag and drop |
| **animation** | 'transform 300ms ease' | The CSS animation to use on elements. Pass a blank string or `false` for no animation. |
| **zoom** | 1 | Zooms the contents of the grid, 1 = 100% |
| **onMove** | `fn(from, to)` | This function is called when an item is dragged over another item. It is your responsibility to update the sort of all items when this happens. |
| **onDragStart** |...
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
graaf: A collection of pure CSS grids for designing your new projects
Github repo
Name: graaf
Tagline: A collection of pure CSS grids for designing your new projects
Homepage: http://graaf.space
Languages:
CSS = 7041 bytes
HTML = 6665 bytes
JavaScript = 6004 bytes

# Graaf

A collection of pure CSS grid overlays for designing your new projects: [graaf.space](http://graaf.space)
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
Faking It by <user name="RoseFrederick" site="AO3">
Max and Alec go undercover as a fake couple! Max has to deal with her feelings about Alec! Oh Max. <3
darkangel  feb-18 
10 days ago by victoria.p
Twitter
RT : “Pretvluchten dragen niets bij aan het vestigingsklimaat en weinig aan het bruto binnenlands product, maar veroorza…
from twitter
10 days ago by Dymphie
electron-quick-start: Clone to try a simple Electron app
Github repo
Name: electron-quick-start
Tagline: Clone to try a simple Electron app
Homepage: https://electron.atom.io/docs/tutorial/quick-start/
Languages:
JavaScript = 2096 bytes
HTML = 584 bytes

# electron-quick-start

**Clone and run for a quick way to see Electron in action.**

This is a minimal Electron application based on the [Quick Start Guide](http://electron.atom.io/docs/tutorial/quick-start) within the Electron documentation.

**Use this app along with the [Electron API Demos](http://electron.atom.io/#get-started) app for API code examples to help you get started.**

A basic Electron application needs just these files:

- `package.json` - Points to the app's main file and lists its details and dependencies.
- `main.js` - Starts the app and creates a browser window to render HTML. This is the app's **main process**.
- `index.html` - A web page to render. This is the app's **renderer process**.

You can learn more about each of these components within the [Quick Start Guide](http://electron.atom.io/docs/tutorial/quick-start).

## To Use

To clone and run this repository you'll need [Git](https://git-scm.com) and [Node.js](https://nodejs.org/en/download/) (which comes with [npm](http://npmjs.com)) installed on your computer. From your command line:

```bash
# Clone this repository
git clone https://github.com/electron/electron-quick-start
# Go into the repository
cd electron-quick-start
# Install dependencies
npm install
# Run the app
npm start
```

Note: If you're using Linux Bash for Windows, [see this guide](https://www.howtogeek.com/261575/how-to-run-graphical-linux-desktop-applications-from-windows-10s-bash-shell/) or use `node` from the command prompt.

## Resources for Learning Electron

- [electron.atom.io/docs](http://electron.atom.io/docs) - all of Electron's documentation
- [electron.atom.io/community/#boilerplates](http://electron.atom.io/community/#boilerplates) - sample starter apps created by the community
- [electron/electron-quick-start](https://github.com/electron/electron-quick-start) - a very basic starter Electron app
- [electron/simple-samples](https://github.com/electron/simple-samples) - small applications with ideas for taking them further
- [electron/electron-api-demos](https://github.com/electron/electron-api-demos) - an Electron app that teaches you how to use Electron
- [hokein/electron-sample-apps](https://github.com/hokein/electron-sample-apps) - small demo apps for the various Electron APIs

## License

[CC0 1.0 (Public Domain)](LICENSE.md)
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
quark: Quark.js is a microscopic atomic CSS polyfill in JS just 140 bytes
Github repo
Name: quark
Tagline: Quark.js is a microscopic atomic CSS polyfill in JS just 140 bytes
Homepage: https://tomhodgins.github.io/quark
Languages:
HTML = 1232 bytes
JavaScript = 795 bytes

# quark

**Quark.js is a microscopic atomic CSS polyfill in 140 bytes**

This plugin is the smallest 'atomic' CSS framework, at only 140 bytes it's [small enough to fit in a tweet](https://twitter.com/innovati/status/821079700076371972).

## What is 'atomic' CSS?

There are a number of CSS frameworks like [Tailwind CSS](https://tailwindcss.com/), [ACSS](https://acss.io/), [BassCSS](http://basscss.com/), [Tachyons](http://tachyons.io/), [Universal.CSS](https://github.com/marmelab/universal.css), and [Bootstrap v4](https://v4-alpha.getbootstrap.com/utilities/spacing/) that include pre-made classes for certain properties. These can apply directly to an element in HTML as classes instead of as styles.

## How to write classes for Quark

The naming convention Quark uses for writing classes is based on the JavaScript [DOM style property names](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference) which are similar to their CSS property equivalents. After the property name there is a dash `-`, and finally we write the value we want. All lengths are in pixels.

For example the following styles:

```html
<div style="color: red; font-size: 20px;"></div>
```

Could be re-written with Quark classes as:

```html
<div class="color-red fontSize-20"></div>
```

View the source of [index.html](index.html) to see more!

## Adding Quark to your Website

To use Quark, either link to `quark.js` using a `<script>` tag like this:

```html
<script src=quark.js></script>
```

Or embed the entire script inline in the page:

```html
<script>for(t=document.querySelectorAll`*`,i=t.length;i--;)for(s=t[i].classList,c=s.length;c--;)z=s[c].split`-`,u=z[1],t[i].style[z[0]]=~~u?u+'px':u</script>
```

There's also an ES6 version of the code available in `quark-es6.js` that can be linked to or included using a `<script>` tag like this:

```html
<script>[...document.querySelectorAll`*`].map(e=>[...e.classList].map(c=>e.style[[a,b]=c.split`-`,a]=~~b?b+'px':b))</script>
```

### 3rd Party Support

Github user @tomhodgins provided a way that Quark classes could be read without the use of `quark.js` or `quark-es6.js` using EQCSS in this pen on Codepen: [Reading Quark Classes with EQCSS](http://codepen.io/tomhodgins/pen/ggGYZJ?editors=1100)

## Documentation

There is an annotated source code file similar (but not identical) to the 140 byte version that explains how the plugin works in an easier-to-read format.

**[Read Annotated Source](annotated.js)**
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
Rogue Amoeba | Farrago: Robust, rapid-fire soundboards
Rogue Amoeba is home to many fantastic MacOS audio products for consumers and professionals alike. Rogue Amoeba - Strange Name. Great Software.
podcast 
10 days ago by djsalinger
millwright: The easiest build tool you'll ever use.
Github repo
Name: millwright
Tagline: The easiest build tool you'll ever use.
Homepage: https://millwrightjs.com
Languages:
JavaScript = 37985 bytes
CSS = 4100 bytes
HTML = 1115 bytes

<!-- Vanity header for GitHub, forgive me. -->
<p align="center">
<a href="https://millwrightjs.com">
<img
width="300px"
src="https://raw.githubusercontent.com/millwrightjs/millwright/master/logo.png">
</a>
</p>
<p align="center">
<strong>The easiest build tool you'll ever use.</strong>
</p>
<hr>
<p align="center">
<a href="https://travis-ci.org/millwrightjs/millwright"><img
src="https://travis-ci.org/millwrightjs/millwright.svg?branch=master"
alt="Build Status"></a>
<a href="https://gitter.im/millwrightjs/millwright"><img
src="https://badges.gitter.im/join%20chat.svg" alt="Join Gitter Chat"></a>
</p>
<hr>

## Give us a star!
Millwright is brand spanking new - the alpha release was announced at the beginning of the year. If
you like where the project is headed, star us on GitHub and help spread the word!

## Get help on Gitter!
Join the chat on [Gitter](https://gitter.im/millwrightjs/millwright) to get (or give) realtime help
from the community.

<hr>

## Intro
Millwright provides the common build functionality that many web projects need without any tool
configuration.

Please visit [millwrightjs.com](https://millwrightjs.com) for more information, including usage and
installation.

## Project status
Millwright is currently in Alpha. That means that the basic feature set expected for the 1.0.0
milestone is in place, and that it's generally expected to work as described. Alpha status also
means that the library is highly untested, and that the project is ready for developer usage and
contributions via issues and PR's.

Current priorites include:

* Windows support (look for that Appveyor badge soon)
* Refactoring
* Error messaging
* Input validation
* Testing, testing, and more testing

## Issues
We'll take any and all issue reports, we just ask that any helpful info be provided, such as
environment details and any stack traces or error messages.

## Pull Requests
This project does not yet have a formal styleguide. For now, the following considerations should be
observed when submitting code:

* Communicate via issues and get confirmation before doing anything big
* Style matters - keep it clean
* Add or update relevant tests (currently happening in [e2e](https://github.com/millwrightjs/millwright/tree/master/e2e)).

## Building Locally
The following commands are available for building Millwright locally:

* `npm run build` - runs the build
* `npm run watch` - runs the build, then watches for changes
github  programming  github-starred-to-pinboard  crypto 
10 days ago by brianyang
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
« earlier      later »

Copy this bookmark:



description:


tags:



Copy this bookmark:



description:


tags: