Skip to content

Instantly share code, notes, and snippets.

Avatar

YarnBall yarnball

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.