Eddy Hernandez eddywashere

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:

My notes from updating to El Capitan, as a Ruby/Rails developer working in VirtualBox/Vagrant.

VirtualBox and Vagrant

Our dev environment currently requires us to use older versions of VirtualBox (4.3) and Vagrant (1.7.1).

It seems the new "SIP" protection messes with that version of VirtualBox.

I tried upgrading VirtualBox (to 5.0.6) and Vagrant (to 1.7.4). Those seemed to run fine on El Capitan, but we rely on Chef v. 10 and Vagrant doesn't seem to get along with it (error: "invalid option: --force-formatter").

GPG and git on macOS

Setup

No need for homebrew or anything like that. Works with https://www.git-tower.com and the command line.

Install https://gpgtools.org -- I'd suggest to do a customized install and deselect GPGMail.
Create or import a key -- see below for https://keybase.io
Run gpg --list-secret-keys and look for sec, use the key ID for the next step
Configure git to use GPG -- replace the key with the one from gpg --list-secret-keys

	# npm publish with goodies
	# prerequisites:
	# `npm install -g trash conventional-recommended-bump conventional-changelog conventional-github-releaser conventional-commits-detector json`
	# `np` with optional argument `patch`/`minor`/`major`/`<version>`
	# defaults to conventional-recommended-bump
	# and optional argument preset `angular`/ `jquery` ...
	# defaults to conventional-commits-detector
	np() {
	travis status --no-interactive &&
	trash node_modules &>/dev/null;

	var Promise = require("es6-promise").Promise;

	module.exports = function(delay){
	return function(value) {
	return new Promise(function(resolve, reject){
	setTimeout(function(){
	resolve(value);
	}, delay)
	});
	}


	/**
	* Generate a custom sort method for given starting `order`. After the given
	* order, it will ignore casing and put periods last. So for example a call of:
	*
	* sorter('Overview');
	*
	* That is passed:
	*
	* - Analytics.js

	function createDisabledUntilClientRendersComponent(component, displayName='ClientComponent') {
	return React.createClass({

	displayName,

	propTypes: {
	disabled: React.PropTypes.bool
	},

	getInitialState() {

	<html>
	<body>
	<div id="react-root"></div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-with-addons.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.7.7/babel.min.js"></script>
	<script id="react-app" type="text/template">
	const App = ({name}) => {

	/* Providers */

	provider "aws" {
	region = "us-west-2"
	}

	/* Variables */

	variable "name" {
	default = "XXXXX"

	# use 256 term for pretty colors
	set -g default-terminal "xterm-256color"
	set -g status-bg black
	set -g status-fg green
	set-window-option -g clock-mode-colour brightyellow

	# increase scroll-back history
	set -g history-limit 1000000

	# use vim key bindings