What's interesting to note on this not so trivial example (we have variants -> className; base style attrs that can be expended)
It's debatable that writing such component is simpler than the classic approach but the outcome is undoubtly better.
There are also nice ways to handle variants and such.
| atom-text-editor { | |
| text-rendering: optimizeLegibility; | |
| -webkit-font-smoothing: antialiased; | |
| font-family: "Operator Mono"; | |
| font-weight: 500; | |
| } | |
| atom-text-editor.editor { | |
| .syntax--storage.syntax--type.syntax--function.syntax--arrow, | |
| .syntax--keyword.syntax--operator:not(.accessor), |
| import { Component } from 'react' | |
| import { connect } from 'react-redux' | |
| class MapWrapper extends Component { | |
| render() { | |
| const mapProps = 123 // todo | |
| return <LeafletMap ref={(mapEl) => this.mapEl = mapEl} {...mapProps} /> | |
| } | |
| componentDidMount() { | |
| const { markerData } = this.props |
| componentDidMount() { | |
| this.el.addEventListener('copy', this.onCopy) | |
| } | |
| onCopy = (event) => { | |
| const { editorState } = this.props | |
| const contentState = editorState.getCurrentContent() | |
| const html = convertToHTML(contentState); | |
| console.log('converted!', html); | |
| // TODO put reulst in the clipboard |
| apiVersion: v1 | |
| kind: Service | |
| metadata: | |
| name: {{ template "mongo-arbiter-name" . }} | |
| labels: | |
| name: {{ template "mongo-arbiter-name" . }} | |
| spec: | |
| ports: | |
| - port: 27017 | |
| selector: |
Usage: envtojson [indent]
EDIT: I created the package ¯\_(ツ)_/¯
| // This one is more or less what you could do in angular 2 | |
| import { getUsers } from './userAPI'; | |
| import { Component } from 'angular2'; | |
| @Component({ | |
| template: '<pre>{{this.users}}</pre>' | |
| }); | |
| export class UserList { | |
| constructor() { | |
| // for sake of example only, don't call APIs in constructors |
Store and prepare periscope statistics from live periscope.tv info streams.
The first step is to get some data from a periscope PUBNUB stream. The easiest way probably is to use
peristream. The following examples uses peristream.
A wrapper around periscope.tv event streams, allowing you to easilly access them
npm i -S peristream