ka nowri

This is translated from the original blog post written by @mizchi in Japanese:

データバインディングについてVue.jsと Backbone.stickitを比較する

This is part of the material to convince my company to use Vue.js instead of Backbone.stickit, so I will be picking on Backbone.stickit a bit :D

Vue.js

JavaScript テンプレートエンジン vs DOM 直接操作

Backbone.js とかで JavaScript で MVC してるサンプルとかを読んでいると、 HTML の可変部分はテンプレートエンジンの使用が推奨されているようだが (例: http://backbonejs.org/docs/todos.html )、サーバー側と違ってクライアント側では DOM 操作ができるので、わざわざテンプレートエンジン使ってテキストベースでやるよりも、 DOM を jQuery で直接操作した方が分かりやすいんじゃないかと思った。

デザイナーが HTML、プログラマーが JavaScript と担当者を分ける場合には便利なのかな。

OAuth 対応 Twitter クライアント作成メモ

前提: OAuth version 1.0a, Twitter API 1.1

OAuth 認証を通じてツイートするのに必要なたった 1 つのこと

リクエストヘッダに Authorization フィールドをセットする

OAuth 認証を通じてツイートするためには、API に対して POST する際、リクエストヘッダに Authorization フィールドを含める必要がある。

一瞬popup + 以降iframeでproxyするようなもの。XHR level2いらないのでやや動作環境が広がる。

クライアント側ボタンクリックで window.open + ランダムなid(これをclient_id相当にする)の名前をつけてiframe埋め込み
popup windowにiframeの名前をpostMessageで送る
サーバー側: popup windowはiframeに対してpostMessageで返信(event.source.frames.xxxx)、api-domainのoriginであることを確認、cookieで認証してランダムなidとセットで使えるトークン発行
トークン保存はmemcachedなど揮発性のストレージで良い。使っている限り期限が延長される。最長期限があってもよい(あったほうがよい)
ログアウトとセットで破棄されるようになっていると良い
iframeはポップアップwindowからメッセージを受け取る。ランダムなid + トークンを使ってAPIにアクセスする。
iframeは親windowからメッセージを受け取る。あとはpostMessageでproxyしてXHRのリクエスト、レスポンスをやり取りする。
iframeは親windowからのメッセージであることをevent.originを使って検証する

便利̢な Rn̈qʎ̞ 製̂コマ͝ンド作り̻ま̮した̖

以下を参考にしました

Flip Title ( ǝlʇıʇ dılɟ) : write upside down - flip your words,flip your text,reverse your text,upside down text,flip title, write upside down, mirror text

リアルタイムにグリッチされるしtweetもできるかっこいい記事 - life.should be_happy # => 1 examples, ? failures

Shell script for Automator Part.1

Automator のシェルスクリプトアクションで使えるサンプル集です。「アプリケーション」や「サービス」を作成するときにどうぞ。

製作者: mattintosh
ブログ: http://mattintosh.blog.so-net.ne.jp

	fs = require 'fs'
	path = require 'path'
	async = require 'async'
	commander = require 'commander'
	gas_manager = require 'gas-manager'
	request = require 'request'
	util = require 'gas-manager/out/lib/commands/util'

	main = ->
	commander

	<?php
	namespace Nifty\Cloud\mBaaS;

	class API
	{
	public $settings = [
	'application_key' => null,
	'client_key' => null,
	'api_url' => 'https://mb.api.cloud.nifty.com/2013-09-01/',
	'SignatureMethod' => 'HmacSHA256',

	var SCOPE_PLUS_ME = "https://www.googleapis.com/auth/plus.me";
	var SCOPE_PLUS_PROFILES_READ = "https://www.googleapis.com/auth/plus.profiles.read";
	var SCOPE_PLUS_CIRCLES_READ = "https://www.googleapis.com/auth/plus.circles.read";
	var SCOPE_PLUS_CIRCLES_WRITE = "https://www.googleapis.com/auth/plus.circles.write";
	var SCOPE_PLUS_STREAM_READ = "https://www.googleapis.com/auth/plus.stream.read";
	var SCOPE_PLUS_STREAM_WRITE = "https://www.googleapis.com/auth/plus.stream.write";
	var SCOPE_PLUS_MEDIA_UPLOAD = "https://www.googleapis.com/auth/plus.media.upload";

	var SCOPES = [SCOPE_PLUS_ME,SCOPE_PLUS_STREAM_WRITE].join("+");
	var USER_ID = "me";

	/**
	* spiffieldCustomEvent
	*
	* @license MIT License http://www.opensource.org/licenses/mit-license.php
	* @author sacrifs http://labs.spiffield.net/
	* @update 2013/01/11
	*
	* var obj = document.createElement("object");
	* spfdCustomEvent.addListener(obj, "loadComp", function(e){alert("loadComplete!")});
	* spfdCustomEvent.dispatch(obj, "loadComp");