pirosikick's diary

君のハートにunshift

javascript

isomorphic tokyo meetupの感想とメモ・資料 #isomorphic_meetup

isomorphic tokyo meetup (2015/04/30 19:30〜)nodejs.connpass.com ニフティの場所難易度高い&都庁前駅でGoogleマップ使ったら現在地が御徒町になるなどのトラブルがあり、最初の発表の半分くらいを聞き逃したorz 感想 真のIsomorphic(Truly Isomorphic)…

Gunosy React Meetup行った #gunosyreact

Gunosy React Meetup (2015/03/30 19:30〜)gunosy-frontend.connpass.com 行った。オフィスすごく綺麗だった。 みなさんすごい勢いで発表していくし、ピザの香りでお腹すくし、終わった後の疲労感すごかったw ReactNativeの話も、v0.13〜の話も、実践?の話…

ng-japan 2015行った #ng_jp

ng-japan - AngularJS Japan User Group | Doorkeeper Angular1.3以降や2系についてはあんまり追っていなかったので、参加してみた。 最近はディスられていた印象が強かったけど、Communityがすごい規模になってもCommunityを重視して開発を進めようとしてい…

ES6のarrow functionとbabel

最近、JSを書く時はBabelを使ってES6で書いている。 mochaでテストを書く場合も下記で簡単に導入できる。 $ npm i -D mocha babel $ $(npm bin)/mocha --compilers js:babel/register そんな感じでTestiumとmochaで下記のようにテストケースを書いて、テスト…

gulpfile.es6でgulp.watchが動かない

gulpfileそのものをES6で書く 上記の記事を参考にgulpfileもES6で書けるようにした。が、watchが何故か動かなかった。 // gulpfile.js require('babel/register'); require('./gulpfile.es6'); // gulpfile.es6 import gulp from 'gulp'; gulp.task('scripts…

ES6+カジュアルトーク行った #es6_casual

ES6+カジュアルトーク (2014/10/29 19:30〜) ES6+カジュアルトーク - connpass 6つのLTどれも面白くて前日申し込みで滑り込めて本当に良かった。 カジュアルトークということで、全部で1時間半くらいとあんまり疲れなかったし、 でも内容は全然カジュアルじ…

第51回html5とか勉強会行った #html5j

第51回 HTML5とか勉強会 (2014/10/24 19:30〜) 第51回 HTML5とか勉強会 - connpass パフォーマンスに関するWeb標準についてとか、Web Animation APIとかは知らなかったのでちゃんと追わないと。。。 Chrome Dev Toolsの使い方とか、やらねばやらねばと思いつ…

Angularのservice, factory, providerの使い分け #scripty01

SCRIPTY#1 〜フロントエンド紳士・淑女のための勉強会〜 (2014/09/16 19:00〜) SCRIPTY#1 〜フロントエンド紳士・淑女のための勉強会〜 - connpass 「Angular.jsとThree.jsを一緒に使った時の話」というタイトルでLTしました。 資料とかは後日会社のブログに…

Duo.jsちょっと使ってみた #duojs

Duo - A next-generation package manager for the front-end. ちょっと良さ気だったので調べてみた。 準備 # install duo $ npm install -g duo Github APIを使うらしく、duo用にAPI Tokenをここから生成し、 ~/.netrcに下記フォーマットで保存する。 # な…

東京Node学園 14限目行ったメモ

東京Node学園 14時限目 - connpass 申し込みの時にIsomorphic JavaScriptっていう言葉を初めて知った。辞書で調べると「同形の」って意味らしくて、Isomorphic JavaScriptなるページには"Isomorphic JavaScript apps are JavaScript applications that can r…

Speeding up AngularJS apps with simple optimizations

Speeding up AngularJS apps with simple optimizations ng-newsletterで流れてきて結構いい記事だったのでメモ。 基本的には、$$watchersを減らして、$digestの負荷を下げましょうとのこと。 One Time Binding Syntax {{ ::value }} 1.3.0からの機能。 {{ :…

buttonでファイルを開く

小ネタ。 <input type="file"/>はスタイルが扱いづらい。<button>クリック時に動的に生成してしまえばいいんじゃないか(というかdepth.meがそういう実装だった) <body> <button>Open File</button> <script> var button = document.querySelector('button'); // ボタンクリック button.addEventListener('click', func</body></button>…

BrowserSync

BrowserSync livereloadよりbrowser-syncの方がいいよと聞いたので使ってみた。 使い方 npmでインストール $ npm install -g browser-sync 手元のディレクトリにhtmlとcssがあり、html, cssが更新した時にhtmlをリロードしたい場合、 $ browser-sync start -…

Away3D勉強会に行ってきた

https://atnd.org/events/52483 銀座で勉強会初めてだなーと思いつつ地図の指す場所に向かったら会場がすごい派手な場所でわらった。 Three.jsしか使ったこと無いけど、「あーこれTypeScriptで書きたいなー」って思うことが多々あって、いちおthree.jsもd.ts…

Tokyo WebGL meetup行った #webgl_tokyo

http://tokyowebglmeetup.github.io/ 行ってきた。 半年間仕事でThree.js使ってたし、WebGL自体もすごく注目してたので楽しみに品川へ。 個人の意見だけどWebGLってとっつきにくいし(Three.js使えば楽だけど)、他のHTML5技術に比べるとサービスに活かしに…

第47回HTML5とか勉強会 (データビジュアライゼーション) #html5j

金曜だけど、第47回HTML5とか勉強会 (データビジュアライゼーション)に行ってきた。ニフティーが駅から結構遠くてびびった。 以下、メモ(後半のメモがひどかった。。) データの可視化について @muddydixon 可視化の目的 情報を明確かつ効率的に伝え、そ…

テスタブルJavaScript読んだ

テスタブルJavaScript作者: Mark Ethan Trostler,牧野聡出版社/メーカー: オライリージャパン発売日: 2013/09/21メディア: 大型本この商品を含むブログ (2件) を見る 後半はペラペラと読んだ程度だが。前半はテストしやすいコードをどう書くか、なぜそう書か…

Angular2.0のDI

Angular2.0について、Angular.jsのブログに出ていた。 ここ半年間くらいAngular.jsを使って不便に思っていたところが結構改善されるようで非常に嬉しい。 びっくりしたのが、ドキュメントがしっかりしてて、Angular2.0がどういうデザインになるかちゃんとま…

Angular.jsとTypeScript

Angular.jsでaltJSを使う場合、CoffeeScriptが一般的(たぶん)だが、TypeScriptはあんまり聞かない。TypeScriptの方が好きな自分としてはどうにかならんかねとずっと考えていて、こうやったらいいんじゃないかというのを思いついたのでメモ。 controller定…

grunt-useminでライセンス表記を残す

クライアントサイドJavaScriptのライセンス管理 | GREE Engineers' Blog これを見てgrunt-useminで難読化されたコードを見たらやっぱりライセンス表記まで削除されていた。。orz で、grunt-license-saverを使おうかなと思ったんだけど、ソース内に@license h…

grunt-useminって便利だな−

https://github.com/yeoman/grunt-usemin grunt-useminはgruntのtaskで、 <script src="js/app.js"></script> <script src="js/controllers/thing-controller.js"></script> <script src="js/models/thing-model.js"></script> <script src="js/views/thing-view.js"></script> …

LT童貞を捨ててきた #html5exp

HTML5 Experts Night #2でLTしてきました。 資料 WebGLとvideoを組み合わせるおもしろい from Hiroyuki Anai プレゼンで見せたデモ http://s3.pirosikick.com/html5exp-night-2/ex1.html http://s3.pirosikick.com/html5exp-night-2/ex2.html 感想 正直緊張…

JavaScriptのtemplateの管理

JavaScriptのTemplateライブラリ使うときに、type="text/x-template"のscriptタグの中に定義することがよくある。 body閉じタグの前にまとめて定義するんじゃなくて、どうせ表示されないんだし、展開予定の場所に書いておけばそれがなんのテンプレートなのか…

yeomanでcompass_twitter_bootstrapでエラーが出る

% mkdir hoge % cd hoge # 全部Yにする % yo angular Would you like to include Twitter Bootstrap? (Y/n) Y If so, would you like to use Twitter Bootstrap for Compass (as opposed to vanilla CSS)? (Y/n) Y Would you like to include angular-resour…

mojito docsでエラーが出た(Mac OS X 10.8)

対処法 pythonのライブラリがなかったみたいなので、easy_installで追加したらOKだった。pythonよくわからんから各ライブラリの詳細はわからんです。 $ sudo easy_install simplejson cheetah pygments

パーフェクトJavaScript

パーフェクトJavaScript (PERFECT SERIES 4)作者: 井上誠一郎,土江拓郎,浜辺将太出版社/メーカー: 技術評論社発売日: 2011/09/23メディア: 大型本購入: 17人 クリック: 451回この商品を含むブログ (12件) を見る 感想 Javascriptは割りと好きで勉強してたし…

YUIではY.Baseが重要だと思ったのです。

なので調べるのです。今日もYUI(Yahoo User Library)ネタです。 Y.Baseとは Base - YUI Librarybaseモジュールで定義されているBaseクラスのことです。これ自体でインスタンスを生成することも可能ですが、他のY.AttributeやY.EventTargetベースとしたクラ…

YUIの継承系メソッド

初ブログ。大したこと無いことを書きます。 YUIいいね! アーティストのYUIではなく、Yahoo UI Libraryの方です。ドキュメントやらソースやら見ていてこれおもしろいなーと思ったので最近はまってます。 ソース読んでるとよく出てくるメソッド んで、ソース…

~~

かなりコネタ。今日、spin.jsのソースを読んでいたらなんじゃこりゃ!と思った1行があった。 var end = ~~((args[length]-1)/2); ~~ってなんだよ。 実行してみる コンソールで実行してみる。 > ~~(1) 1 > ~~(-1) -1 > ~~(1.555) 1 > ~~(-2.78) -2 > ~~2.4 2 …

removeClass

Full Frontal 2011- JavaScript Conference のjsのソースを見てたんだけど、その中に設定されているクラスを削除するremoveClassっていう関数のソースがあって、それがシンプルでよかったので備忘録がわりに記載。 // thank you jQuery... var triml = /^\s+…