renemonroy

Outdated note: the process is a lot easier now: after you brew install postgresql you can initialize or stop the daemon with these commands: brew services start postgresql or brew services stop postgresql.

new out put may look like

To have launchd start postgresql now and restart at login:
  brew services start postgresql
Or, if you don't want/need a background service you can just run:
  pg_ctl -D /usr/local/var/postgres start

renemonroy

Setup ES6+Babel+JSX Linting with Atom

This sets up Atom to properly lint ES6+Babel+JSX using Airbnb's .eslintrc as a starting point.

Steps

1. Download Atom and get these two packages: Linter and [Linter-ESLint)(https://atom.io/packages/linter-eslint)
2. Run npm install --save-dev eslint-config-airbnb babel-eslint eslint-plugin-react from your project root.
3. Add "extends": "eslint-config-airbnb" to your .eslintrc

renemonroy

function click(d) {
        if (!d.children && !d._children)
        {
            d3.json("http://xxxx:2222/getChildNodes", function(error,response) {
                response.children.forEach(function(child){
                      if (!tree.nodes(d)[0]._children){
                          tree.nodes(d)[0]._children = [];
                      }
                      child.x = d.x0;
                      child.y = d.y0;

renemonroy

This is an example of building a tree layout using the Reingold-Tilford "tidy" algorithm, as described in "Tidier Drawings of Trees". As each new element is added to the graph, it animates in, starting at the previous position of the parent node. Thus, the existing nodes and the new node transition smoothly to their new positions. The animation stops when 500 nodes have been added to the tree.

Built with D3.js.

renemonroy

import React, { PropTypes } from 'react';
import { TransitionMotion, spring } from 'react-motion';

/**
 * One example of using react-motion (0.3.0) within react-router (v1.0.0-rc3).
 *
 * Usage is simple, and really only requires two things–both of which are
 * injected into your app via react-router–pathname and children:
 *
 *   <RouteTransition pathname={this.props.pathname}>

renemonroy

@font-face {
  font-family: "Proxima Nova";
  src: url(data:font/opentype;base64,d09GRgABAAAAAEywABIAAAAAg3QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABEWU5BAAAGbAAAALgAAAGJNI0oHkZGVE0AAAGUAAAAHAAAABxdnq2WR0RFRgAAByQAAAA4AAAAQgSqBTxHUE9TAAAHXAAABCIAABH0zI0AF09TLzIAAAXUAAAAVwAAAGCAz3p9Y21hcAAASvgAAAG2AAAC5lCJVL9jdnQgAAABsAAAAB4AAAAeCkcLCmZwZ20AAAHQAAABsgAAAmUjtC+nZ2FzcAAAA4QAAAAIAAAACAAAABBnbHlmAAALgAAAO4sAAF8I3FzIU2hlYWQAAAOMAAAANQAAADb9TDtqaGhlYQAABiwAAAAgAAAAJA9PBsBobXR4AABHDAAAAh8AAANsqw8hfGxvY2EAAEksAAABuAAAAbhtqYQ8bWF4cAAABkwAAAAgAAAAIAIDAhpuYW1lAAADxAAAAawAAANRLIw+gnBvc3QAAErkAAAAEwAAACD/DQAocHJlcAAABXAAAABjAAAAdNUcAaMAAAABAAAAAMmJbzEAAAAAyRrF1wAAAADK+niN/pAAAAPGBTYBYADCANABNgE+AWgBmQDkAZIBkAFYAAB42l1Ru05bQRDdDQ+TBBJjg+RoU8xmQhrvhYYCJBBXF8XIdmM5QtqNXORiXMAHUCBRg/ZrBmgoKdKmQcgFUj6BT0BiZk2iKM3Ozuycc+bMknKk6l1a73nqnARSuNOg2abfDql2FuCedH21kZF28EDzzYxeuW7ff8VgM5pyRw2gvOct5SGjaSdQi/bU/za/guE+/2Qeg0FLM01PrZOQHkJgvhm3MPie0ay7/KQvWB0uBgNDimkq7vJzKuV/S3Outgibaxm9dnAmIj+ZBmhqpY1A0186pHo+jmIJctkw1gYTU9afZCL4ZjJd1VQtM751cJfszDt

renemonroy

# A module that allows us to send Backbone events up the tree of components
ReactTelegraph =
  componentWillMount: ->
    # Make BB events available to the component
    _.extend @, Backbone.Events
  
  componentWillUnmount: ->
    # Remove all Backbone event listeners
    @off null, null, null
  

renemonroy

Each of these commands will run an ad hoc http static server in your current (or specified) directory, available at http://localhost:8000. Use this power wisely.

Discussion on reddit.

Python 2.x

$ python -m SimpleHTTPServer 8000

renemonroy

Javascript log Function

Every time I start a new project, I want to pull in a log function that allows the same functionality as the console.log, including the full functionality of the Console API.

There are a lot of ways to do this, but many are lacking. A common problem with wrapper functions is that the line number that shows up next to the log is the line number of the log function itself, not where log was invoked. There are also times where the arguments get logged in a way that isn't quite the same as the native function.

This is an attempt to once and for all document the function that I pull in to new projects. There are two different options:

• The full version: Inspired by the plugin in HTML5 Boilerplate. Use this if you are writing an application and want to create a window.log function. Additionally,

renemonroy

/** @jsx React.DOM */
var Dashboard = React.createClass({

  render: function() {
    return (
      <div>
        <h1>Dashboard!</h1>
        <ul>
          <li><Link to="inbox">Inbox</Link></li>
        </ul>