Instantly share code, notes, and snippets.

View cafedb.js
module.exports = {
category: [
{ id: 1, title: 'Breakfast', slug: 'breakfast', description: 'Changes Regularly - Febuary 1, 2016', },
{ id: 2, title: 'Lunch', slug: 'lunch', description: 'Changes Regularly - Febuary 1, 2016', },
{ id: 3, title: 'Evening', slug: 'evening', description: 'from 4pm - 8pm Tues. - Sat.', },
{ id: 4, title: 'Wine, Beer, Cocktails', },
{ id: 5, title: 'Sparkling', },
{ id: 6, title: 'Rose', },
{ id: 7, title: 'White', },
{ id: 8, title: 'Red', },
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>React + JSX + LESSCSS</title>
<!-- LESS style must come before the actual loading of less.js -->
<style type="text/less">
.container {
width: 90%;
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>React + JSX + LESSCSS</title>
<!-- LESS style must come before the actual loading of less.js -->
<style type="text/less">
.container {
width: 90%;
View merge.js
// This works... (returns a merged object)
const combinedFormSchema = this.state.session && _.merge(
this.state.session.building_list[0].schema,
this.state.session.building_list[1].schema
);
// This does not (returns an array of objects, not a merged object)
const combinedFormSchema = this.state.session && _.merge(
_.map(this.state.session.building_list, building => building.schema)
);
View string.json
// How do I go from this...
"{u'type': u'object', u'properties': {u'first_floor': u'open'}}"
// to a json object...
{"type": "object", "properties": { "first_floor": "open" }}
View story.js
import React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { withKnobs, select, boolean } from '@storybook/addon-knobs';
import RadialBarChart from '../components/RadialBarChart';
// I'd prefer to stick the prop payload elsewhere...
// import { mockVisualization } from './mockdata';
View conditionalComponent.js
{queries.map(query => ({
area: <Area key={query.id} name={query.name} {...query.definition} />,
bar: <Bar key={query.id} name={query.name} {...query.definition} />,
line: <Line key={query.id} name={query.name} {...query.definition} />
}[query.definition.cartesianType]))}
View atom stylesheet.less
// style the background and foreground colors on the atom-text-editor-element itself
atom-text-editor {
// color: white;
// background-color: hsl(180, 24%, 12%);
-webkit-font-smoothing: antialiased;
}
// To style other content in the text editor's shadow DOM, use the ::shadow expression
atom-text-editor.editor {
.syntax--storage.syntax--type.syntax--function.syntax--arrow, .syntax--operator {
View bpkAtom.less
/*
* Your Stylesheet
*
* This stylesheet is loaded when Atom starts up and is reloaded automatically
* when it is changed and saved.
*
* Add your own CSS or Less to fully customize Atom.
* If you are unfamiliar with Less, you can read more about it here:
* http://lesscss.org
*/
View nestedValue.jsx
// JSON Object
{
"crate": {
"toolbar": {
"title": "Farm Overview"
}
}
}
// Component