Skip to content

Instantly share code, notes, and snippets.

YarnBall yarnball

Block or report user

Report or block yarnball

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@yarnball
yarnball / ShareDbVue
Created Aug 7, 2019
ShareDB using Vue
View ShareDbVue
<template>
<div id="app">
{{socketState}}<br/>
<input v-on:keyup.enter='addPlayer($event)' placeholder="Add player" v-model='newPlayer' />
<div v-for='p in Object.values(playerList).sort( (a,b) => b.created - a.created)' :key='p.id'>
{{p.name}}
<input v-model='playerList[p.id].name' @input='updatePlayer($event, p.id)' /><button :disabled='delInPrg.includes(p.id)' @click='rmvPlayer(p.id)'>[x]</button>
</div>
</div>
@yarnball
yarnball / .css
Last active Mar 21, 2018
Text ellipse overlap using CSS only
View .css
.description {
/* hide text if it more than N lines */
@include font-size(2);
margin-top: units(0.5);
padding: 0 units(0.5);
overflow: hidden;
/* for set '...' in absolute position */
position: relative;
max-height: units(5);
/* fix problem when last visible word doesn't adjoin right side */
View gist:0600caaac71c3e0bc03cac60b1da9cf1
import React from "react"
import { render } from "react-dom"
class App extends React.Component {
state = { highlight: "", pos: "" }
getText = e => {
this.setState({
highlight: window.getSelection().toString(),
pos: window.getSelection()
})
View gist:270b06bfa2724b5d2afb44562a9174ee
import React from 'react';
import { render } from 'react-dom';
import * as _ from "lodash";
import './style.css'
class App extends React.Component {
state = {
geni: [
{ id: 10, a: 'Beta', b: 811 },
View gist:b1ceb864b397a7834940e2ddb318b317
import React from 'react';
import Paper from 'material-ui/Paper';
class SearchBar extends React.Component {
state = {
test:false,
};
componentWillMount(){
this.setState({ test: !this.state.test }, () => { this.focus(); });
}
View gist:5d8ce93e02d0c6df4c56f7bbc5382f82
<div>
{data.filter(e => e.level === 1).map((x, index) => {
return (
<div key={x.id}>
{x.name}
<div/>
);
})}
</div>
View file1.js
export default Connect(mapStateToProps, mapDispatchToProps)(React.createClass({
componentWillMount () {
return fetch(DATA_API)
.then((response) => response.json())
.then((json) => {
// console.log(json);
this.setState({testapi: json});
});
this.props.fetchUser();
},
View file.js
import React, {Component} from 'react';
import firebase from '../../utils/firebase';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {fetchUser, updateUser} from '../../actions/firebase_actions';
import Loading from '../helpers/loading';
import ChangePassword from './change_password';
import { DATA_API, POST_API } from './Api';
import {Link} from 'react-router';
import { SplitButton, DropdownButton, MenuItem, Badge, Button, ButtonToolbar, FieldGroup, ButtonGroup, Tab, Tabs, Panel, ListGroup, ListGroupItem } from 'react-bootstrap';
View file.js
import React, {Component} from 'react';
import firebase from '../../utils/firebase';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {fetchUser, updateUser} from '../../actions/firebase_actions';
import Loading from '../helpers/loading';
import ChangePassword from './change_password';
import { DATA_API, POST_API } from './Api';
import {Link} from 'react-router';
import { SplitButton, DropdownButton, MenuItem, Badge, Button, ButtonToolbar, FieldGroup, ButtonGroup, Tab, Tabs, Panel, ListGroup, ListGroupItem } from 'react-bootstrap';
View gist:76193d06109b4aa99ab8
{ "results": [
{
"category": "TEST",
"createdAt": "2015-04-01T12:32:47.037Z",
"currency": "AUD",
"designer": "Ray-Ban",
"gender": "women",
"index": 2,
"itemDescription": "Wayfarer glasses by Ray-Ban Angular frames with pin detailing to corners Moulded nose pads for added comfort Clear non-prescription lenses Branded arms with curved temple tips for a secure fit The lenses can be replaced with a prescription lens ABOUT RAY-BAN First produced for the U.S. Air Force, Ray-Ban has been making iconic sunglasses since 1937. With a rich pop culture history, Ray-Ban has gained global recognition, a cult fan-base and A-list credentials. Opt for classic frames in Aviator, W",
"link": "http://click.linksynergy.com/link?id=dnw*50nuNL8\u0026offerid=287549.2564686\u0026type=15\u0026murl=http%3A%2F%2Fwww.asos.com%2Fau%2FRay-Ban%2FRay-Ban-New-Wayfarer-Glasses%2FProd%2Fpgeproduct.aspx%3Fiid%3D3938725%26istCompanyId%3Df448b47d-6b90-4b9b-a52d-eb6058c99b1c%26istItem
You can’t perform that action at this time.