Seo Yoochan seoyoochan

apm install advanced-open-file atom-beautify atom-pair autoclose-html autocomplete-html-entities autocomplete-ruby autoprefixer dash emmet environment linter linter-eslint linter-jscs merge-conflicts react redux-snippets go-plus file-icons

Tether Drop + React Portal + Redux

This is an example of using Tether Drop with React Portal (and Redux for managing the state). I was asked if using React Portal is redundant, as both libraries pull the content into the <body>. Using only Drop would cause an invariant violation in React becuase of the DOM mutation, so I'm using React Portal to first bring it outside without React complaining (I don't know how React Portal does it, I haven't checked out the source, but it works). Once it's out of React's supervision, I can apply Drop to it.

Dropdown.jsx is the actual dropdown component
App.jsx is just an demo that uses it

This is my lazy way out of this limitation using an existing library that has much more features than you need, but chances are that you're going to need a library like React Portal anyway for stuff like modals.

Notes

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:

	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 \|\| {};
	}

	<div class="Modal-Background toggle-Modal">
	<div class="Center-Block Absolute-Center is-Fixed is-Variable Modal" id="Fixed-Modal">
	<div class="Center-Content">
	<h4 class="Title">Absolute Center.</h4>

	<p>This box is absolutely centered within the viewport, horizontally and vertically, using only CSS.</p>

	<p><a href="#" class="Shaw-Button trigger-Resize">Resize Me!</a></p>

	<p><a href="#" class="Shaw-Button toggle-Modal">Close Modal</a></p>

	define(["marionette", "backbone", "templates/templates"], function(Marionette, Backbone, templates){

	var value;
	var field;
	var alert_label;
	var url = "http://api.localhost.dev:3000/v1";
	//var url = "http://api.bitsnut.com/v1";

	var Model = Backbone.Model.extend({
	defaults: {

	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

	# Example nginx + git HTTP Smart mode (git-http-backend) + HTTP Authentication + HTTPS redirect
	# [email protected] - 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;
	}

	git branch -m old_branch new_branch # Rename branch locally
	git push origin :old_branch # Delete the old branch
	git push --set-upstream origin new_branch # Push the new branch, set local branch to track the new remote

	# app/policies/active_admin/
	module ActiveAdmin
	class CommentPolicy < ApplicationPolicy
	class Scope < Struct.new(:user, :scope)
	def resolve
	scope
	end
	end
	end
	end