seoyoochan

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:

seoyoochan

var ConstDependency = require('webpack/lib/dependencies/ConstDependency');
var NullFactory = require('webpack/lib/NullFactory');
var _ = require('lodash');

function I18nRuntimePlugin(options) {
  options = options || {};
  this.functionNames = options.functionNames || ['I18n.t', 'I18n.translate'];
  this.translationsPlaceholder = options.translationsPlaceholder || 'I18N_RUNTIME_TRANSLATIONS';
  this.fullTranslations = options.fullTranslations || {};
}

seoyoochan

When using react-rails for an internationalized app it makes a lot of sense to use i18n-js for translations, so that you can reuse the the strings from your rails app's .yml files (and all the tooling & services that exist around that).

When you use the prerender feature of react-rails you face 2 problems:

• The first is that translation.js & i18n.js from i18n-js need to be loaded inside the server-side JS prerendering processes, which is achieved by loading them inside the components.js.
• The second problem is the server processes need to be aware of the current locale of each HTTP request. This is done by adding a custom renderer and using the before_render hook to configure i18n-js accordingly for each render call.

seoyoochan

HTTP status code symbols for Rails

Thanks to Cody Fauser for this list of HTTP responce codes and their Ruby on Rails symbol mappings.

Status Code Symbol
1xx Informational
100 :continue
101 :switching_protocols
102 :processing

seoyoochan

# This is a skeleton for testing models including examples of validations, callbacks,
# scopes, instance & class methods, associations, and more.
# Pick and choose what you want, as all models don't NEED to be tested at this depth.
#
# I'm always eager to hear new tips & suggestions as I'm still new to testing,
# so if you have any, please share!
#
# @kyletcarlson
#
# This skeleton also assumes you're using the following gems: 

seoyoochan

import React, { PropTypes } from 'react';
import { connect } from 'react-redux';

const Authenticated = React.createClass({
  propTypes: {
    children: PropTypes.element.isRequired,
    isAuthenticated: PropTypes.bool.isRequired,
    history: PropTypes.object.isRequired,
  },
  componentDidMount() {

seoyoochan

# Example nginx + git HTTP Smart mode (git-http-backend) + HTTP Authentication + HTTPS redirect
# jeroen@massar.ch - http://jeroen.massar.ch
 
server {
  listen  192.0.1.1:80;
  listen  [2001:db8::1]:80;
 
  # Redirect all non-HTTPS traffic to the HTTPS variant
  return 301 https://$host$request_uri;
}

seoyoochan

Getting Started with NPM (as a developer)

If you haven't already set your NPM author info, now you should:

npm set init.author.name "Your Name"
npm set init.author.email "you@example.com"
npm set init.author.url "http://yourblog.com"

npm adduser

seoyoochan

Rails Models

Generating models

$ rails g model User

Associations

belongs_to

has_one

seoyoochan

# ...

gem 'carrierwave'
gem 'fog', '~> 1.0.0' # Need to specify version, as carrierwave references older (0.9.0) which doesn't allow configuration of Rackspace UK Auth URL