pirosikickのブックマーク - はてなブックマーク

ES7 Decoratorでresizeイベントをいい感じに処理してくれるパッケージ作ったよ - Qiita

今、React・Fluxで作っているツールで、window.onresize時にwindow.innerHeightをdivのheightとして設定するようなComponentを作った。こういう感じ： class Example extends React.Component { constructor (props) { super(props); this._onWindowResize = this.onWindowResize.bind(this) this.setState({ height: 0, width: 0 }) } render () { let {width, height} = this.state; return <div {...this.props} style={{ width, height }} />; } onWindowResize () { t

pirosikick 2015/07/15

書いたー。on-resizeっていうパッケージ作りました。

リンク

Electronでskyway.ioを使う - Qiita

skaywayを使えば、WebRTCのP2Pビデオチャットが簡単に実装できる。今、skywayを利用していたWebアプリをElectronに移行しようとしているのだが、Electronでskywayがうまく動かなかった。上手くいくように頑張ったメモです。原因 XHRやWebSocketで通信する際のOriginがfile://になっており、skyway側で弾かれるのが原因っぽい。 skywayは利用登録をする時にリクエスト元ドメインを指定するようになっていて、そこに登録されていないOriginからのリクエストは弾くようになっているのだろうと推測した。解決策 skywayのpeerjsをforkして、XHRをisomorphic-fetchに、WebSocketをwsに書き換え、Peerをインスタンス化するときのオプションにoriginを追加した。（ブラウザのXHR、WebSocke

pirosikick 2015/06/12

書いた。酔っているので、明日朝もう一度確認するｗ

リンク

ElectronでjQueryがundefinedになる - Qiita

<body> <script src="lib/jquery.min.js"></script> <script> jQuery('#hoge'); // jQuery is not defined </script> </body> 原因 electronのissueがあった。 jQuery isn't set globally because "module" is defined · Issue #254 · atom/electron Electronではブラウザ側のJS実行時にmodule.exportsが存在するので、jQueryがcommonJSでロードされたと勘違いして、windowに$とjQueryを定義しないというのが原因。（この辺りにif文が）解決策 requireでロードする

pirosikick 2015/06/06

書いた。小ネタだけど。

リンク

webpackでライブラリを作る - Qiita

webpack使ってCommonJSで書いているJSの関数をライブラリとして外部に公開したい場合には、ouput.libraryオプションとoutput.libraryTargetオプションを設定し、ビルドする。 module.exports = { entry: { index: './index' }, output: { path: __dirname, filename: "[name].bundle.js", library: "Hoge", libraryTarget: "umd" } };

pirosikick 2015/05/26

書いたー

リンク

aws_security_groupのCycleエラー - Qiita

TerraformでAWSのsecurity groupを設定した時にハマったのでメモ。 Security Groupの設定はaws_security_groupで行うが、２つのaws_security_groupのingress, egressのsecurity_groupsのidがお互い参照しあっていると、Cycleエラーが発生する。 provider "aws" { ... } resource "aws_security_group" "sg1" { name = "sg1" ingress { from_port = 80 to_port = 80 protocol = "tcp" security_groups = ["${aws_security_group.sg2.id}"] # お互いに参照しあっている } } resource "aws_security_group"

pirosikick 2015/05/20

Terraformを会社で使い始めた！早速ハマったので投稿や！

リンク

reactjs - Higher-Order Componetを使ってES6 Class記法でmixinっぽいことをする - Qiita

v0.13からのES6 Class記法でmixinが使えない問題を解決する方法としてHigher-Order Componentsという方法がある。 Mixins Are Dead. Long Live Composition — Medium Gunosy React Meetupのkoba04さんのLTで紹介されていたのを今更調べたのでまとめる。 mixinのおさらい FluxフレームワークでよくあるStoreとComponentをひもづけるためのMixinの例。 // FluxフレームワークでよくあるStoreとComponentをひもづけるためのMixin function StoreMixin(...stores) { var Mixin = { getInitialState() { // getStateFromStoresはComponent側に定義する return th

pirosikick 2015/05/13

書いたー。

リンク

関数の呼び出し元を取得する関数を定義する - Qiita

課題 expressでWebアプリを作っている時に、loggerとしてbunyanを利用していた。その時に、logger.error({ req:req, res:res, error:error }, message)と毎回書くのがだるいので、req.log Error(error, message)で済むように下記のようなmiddlewareを書いて対応した。 var bunyan = require('bunyan'); var log = bunyan.createLogger({name: 'myApp'}); module.exports = function (req, res, next) { req.log Error = function (error, message) { log.error({ req:req, res:res, error:error }, mes

pirosikick 2015/05/08

書いたー。あんまりストックされなそうw

リンク

yahoo/fetchrを使う - Qiita

先日参加した、isomorphic tokyo meetupで紹介されていたfetchrが良さそうだったので、使ってみた。 fetchrが解決する課題 React＋Fluxでサーバサイドレンダリング時に、superagentやaxios、isomorphic-fetchなどのIsomorphicなHTTPクライアントを使ってデータをフェッチするが、そのまま使うと下記のような課題にぶつかる。ブラウザから直接BEのAPIにアクセスできない（またはさせたくない、外部のAPIでキー・シークレットをブラウザ側で持ちたくない）場合、そのAPIとProxyするエントリポイントを作る必要がある。フェッチ部分のロジックが共有されるので、ブラウザではWeb API経由でフェッチして、サーバサイドレンダリング時は直接DBにクエリを叩きたい、みたいなのを自分で実装すると面倒。 fetchrはBEや外部のAPI