Seo Yoochan seoyoochan

## install_packages.md

      
              2 files
            
          
              0 forks
            
          
              1 comment
            
          
              1 star
            
          
                seoyoochan
                / install_packages.md
            
            
              Last active
              May 2, 2016 05:21
            
              
                Install Essential Atom Packages and Themes
              
          
    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

  
## I18nRuntimePlugin.js
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 || {};
}

## 0.Readme.md

      
              3 files
            
          
              1 fork
            
          
              1 comment
            
          
              10 stars
            
          
                silvenon
                / 0.Readme.md
            
            
              Last active
              April 11, 2019 08:45
            
              
                An example dropdown using Tether Drop, React Portal and Redux.
              
          
    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


## README.md

      
              3 files
            
          
              2 forks
            
          
              9 comments
            
          
              21 stars
            
          
                mik01aj
                / README.md
            
            
              Last active
              April 21, 2017 13:02
            
              
                How to use Tether with React
              
          
    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:

  
## index.html
<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>

## signup.js
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: {

## rails http status codes
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

## gist:9628955
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

## server-git.conf
# 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;
}

## comment_policy.rb
# app/policies/active_admin/
module ActiveAdmin
  class CommentPolicy < ApplicationPolicy
    class Scope < Struct.new(:user, :scope)
      def resolve
        scope
      end
    end
  end
end
	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
	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
	# 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;
	}
	# app/policies/active_admin/
	module ActiveAdmin
	class CommentPolicy < ApplicationPolicy
	class Scope < Struct.new(:user, :scope)
	def resolve
	scope
	end
	end
	end
	end