rails

var DateHelper = {
  // Takes the format of "Jan 15, 2007 15:45:00 GMT" and converts it to a relative time
  // Ruby strftime: %b %d, %Y %H:%M:%S GMT
  time_ago_in_words_with_parsing: function(from) {
    var date = new Date; 
    date.setTime(Date.parse(from));
    return this.time_ago_in_words(date);
  },
  
  time_ago_in_words: function(from) {

insin

/** @jsx React.DOM */

var STATES = [
  'AL', 'AK', 'AS', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'DC', 'FL', 'GA', 'HI',
  'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME', 'MD', 'MA', 'MI', 'MN', 'MS',
  'MO', 'MT', 'NE', 'NV', 'NH', 'NJ', 'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR',
  'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY'
]

var Example = React.createClass({

grabbou

language: node_js
node_js: ["0.11", "0.10"]

env:
  CODECLIMATE_REPO_TOKEN: <your_token>

before_script:
- npm install -g istanbul
- npm install -g mocha
- npm install -g codeclimate-test-reporter

wuhaixing

#How to Construct Yourself UI in KeystoneJS

KeystoneJS provide Admin UI with one set of route controllers and view templates(list&item) for all of the models.But usually,you will need some custome views other than Admin UI to display models. Although the KeystoneJS documention don't tell us much about how to contruct custome view,we can learn this from the source code in skeleton project generated by yo keystone,or you can just check out the keystone demo project's source code.We will walk through the blog feature's implementation in this demo application to demonstrate how to construct custome UI in KeystoneJS application.

As KeystoneJS documention described in Routes & Views section,there is a routes/index.js file, where we bind application's URL patterns to the controllers that load and process data, and render the appropriate template.You can find following code in it:

app.get('/blog/:catego

isaacs

# Hello, and welcome to makefile basics.
#
# You will learn why `make` is so great, and why, despite its "weird" syntax,
# it is actually a highly expressive, efficient, and powerful way to build
# programs.
#
# Once you're done here, go to
# http://www.gnu.org/software/make/manual/make.html
# to learn SOOOO much more.

karlbright

var React = require.requireActual('react')
var assign = require.requireActual('object-assign')

function stubContext(Component, context) {
  var _component = Component
  var _context = context
  var _contextTypes = {}

  Object.keys(_context).forEach((key) => {
    _contextTypes[key] = React.PropTypes.any

mik01aj

Tether is a great library for positioning stuff (tooltips, modals, hints, etc) in your web app.

But, as I use React, it was pretty problematic for me, as Tether mutates the DOM and React breaks miserably when it sees mutated DOM. The solution is to have the tethered element outside the part of the DOM tree which is controlled by React (in this case, I use document.body).

That's why I created 2 helpers to use Tether with React.

The first one, TetheredElement is a plain JS helper to create a new element, attach it to some other one via Tether, and populate it with some React component.

The second one, TetherTarget is a React component and it uses TetheredElement to integrate it further with React, so that you can attach components to each other with Tether, without leaving the cozy React/JSX world and worrying about manual DOM operations. Just write:

vjeux

// Solution #1: Generic Override (like CSS)

var ButtonGroup = React.createClass({
  render() {
    return <div>{this.props.buttons.map((btn, i) => 
      <Button style={{
        ...(i !== 0 && {marginLeft: 0})
        ...(i !== this.props.buttons.length - 1 && {marginRight: 0})
      }} />
    )}</div>;

taion

// This is _not_ supposed to be a real API. It's only intended to describe what
// I'm looking for. It's almost intentionally awful.

export const buttonHook = new OverrideHook({
  properties: ['margin'],
});

export default function Button(props) {
  return (
    <button

jeroenvisser101

input[autocomplete="off"]::-webkit-contacts-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  height: 0;
  width: 0;
  margin: 0;
}