xoとavaでお手軽リント・テスト環境構築 - MOL
元旦にStyleStats v7.0をリリースした。めでたいことだ（知らんけど）。バージョンアップ作業は例のごとく依存するnpm modulesをアップデートして終わりというのがt32kの伝家の宝刀だが、せっかくなので今回はES6に書き換えようと思った。 しかし、それもfunctionをアロー関数に変更するぐらいだろうと、タカをくくっていたが、書き出してみると、1000ch君パイセンの煽り意識高いレビューコメントのおかげで、いろいろ勉強させてもらった、多謝( ˘ω˘)！ ESLint ESLint - Pluggable JavaScript linter アロー関数に変更するだけってのもあれだから、ちゃんとESlintもES6用の設定にカスタマイズしようと思い必死こいて.eslintrcとにらめっこしていた。といっても下記の記事を参考にしただけだが。 ESLint 最初の一歩 - Qii
Google Analytics トラッキング スニペット再考（2016） - MOL
最近、またGoogleアナリティクスの面倒を見ている。で、GAのドキュメントを見ていたら最近のイケてるトラッキングスニペットはこれだぜ！みたいなこと書いてあった。やれやれ、またかと思い、筆をとったのです。 トラッキングスニペットの移り変わり激しいもので、最近だとこうゆうのが一般的だろう。 <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,
マイクロインタラクション事始め以前 - MOL
（アニ GIF あるのでちょっと重いです…） マイクロインタラクション事始め以前 @Yahoo!Japan 2016.07.04 先日、とある社内勉強会にて発表する機会があったので書き残しておく。要は最近のフロントエンド開発の流れに疲れて、もうちょっと違う方向で頑張ろうと思った話。 葛藤 Kaizen Platform, Inc. フロントエンドデベロッパーの t32k です。皆さん、ご存知かもしれませんが、Kaizen Platform は A/B テストツールを提供しています。その A/B テストのデザイン案も国内外約 2 千名のグロースハッカーと呼ばれる方々から、クラウドソーシングで調達することができます。なので、自社内にデザイナー抱えてなくても A/B テストが実行可能です。 グロースハッカーの登録自体は無料ですので、デザイナーの方はぜひ登録してもらうと、コンバージョン率の高いデザ
Smashing Magazineのパフォーマンス改善ケースが凄まじい件 - MOL
Frontrend Advent Calendar 2014 - Qiitaの24日目。たぶん。知らんけど。 ちょっと前になるが12/13にバンクーバーで開催されたThe Style & Class Conference 2014に参加してきた。前日にSmashing Conferenceが、ウィスラーというバンクーバーから比較的近い所で開催されていて、本当はそっちに行きたかったんだけど高額なため、地元コミュニティのほうにだけ参加した。ウィスラーの方の記事は@ygoto3が書いてたっぽい。 Smashing Conferenceで登壇していたJohn Allsopp氏やVal Head氏もこのカンファレンスで登壇するということで、『なんだ、ウィスラーのついでかよー』と思い全然期待してなかったのだが、行ってみたらカンファレンス全体の構成などすごく考えられていて、とても素晴らしいカンファレンス
Webエンジニアからみたフィリピン語学留学 - MOL
こんちわ、無職の@t32k だよ。6月初めから10月末まで、まるまる5ヶ月間(22週間)フィリピンに語学留学してきたので、今回は思いの丈を綴ってみるよ。 書いてみて思ったけど、特にエンジニア関係なかったわー。 ※ 2014年6月から2014年10月までのマニラでの出来事である。1ペソ＝2.4円で計算してある。 ぼくがなぜフィリピンに行ったのかは、こちらの記事を参照してね。簡単に言えば、エンジニアとして英語にちゃんと向きあおうって思ったんだ。 なんでフィリピンなのかとか 大学を卒業してWebデザイナーになって以来、より多くの情報を早く得るには、Webフロントエンド技術に関して非常に多くの技術情報を日々捌いているLayzieさんも曰く、英語が不可欠だと感じていた。ただ普通にアメリカに語学留学したら学費だけで200万くらい飛びそうな感じだったので、ワーキングプアだった僕にとっては取れない選択肢だ
peerDependency - MOL
grunt@0.4くらいから、package.jsonにpeerDependencyというキーを見かけるようになった。Plugins - Gruntでも peerDependencyが指定されているプラグインに関しては、Grunt Version ~0.4.0のように出るので意味分かんないけど、とりあえず指定してた。 Peer Dependencies で、コレ読んだら理解した。 ├── request@2.12.0 └─┬ some-other-library@1.2.3 └── request@1.9.9 例えば、こうゆう依存関係の状態があったとき、some-other-libraryのパッケージはrequestパッケージの2.x系で動作しなくても、自身が内包しているrequest@1.9.9を参照するので特に問題ない。これは現状のdependencyで表現できる。 しかし、パッケージ
Navigation Timingを使ってパフォーマンス計測（Google アナリティクス） | MOL
本来のAdvent Calendarとは、12月1日からクリスマスの25日まで、カードに作られた窓を1日に1つずつ開けていくというものです。一方、技術系のAdvent Calendarは、12月1日から25日までの間、毎日違う人が特定のテーマに沿ってブログ記事を書くというものです。もちろん、ここでのテーマは「HTML5」になります。HTML5に関することならなんでもOKです！ HTML5 Advent Calendar 2011 : ATND ども、HTML5 Advent Calendar 2011, 19日目担当のt32kでございます。今回もがんばります！ 若干、9日目の@jovi0608さんとかぶってますが、気にせずNavigation Timingを実際にどのように利用できるかについて書きたいと思います。 Navigation TimingはW3C Web Performance
手軽にCIを体験してみたい - MOL
昨年のFrontrend/06では、全くもってながら個人的な趣向のもと継続インテグレーション（CI:Continuous Integration）をテーマに開催した。もはや、フロントエンドとは！という感じだが、非常に良いイベントだったと思う。 基本的に昨今のフロントエンドは膨大なタスクに追われている、そのようなタスクを手動でちまちまやっていては手戻りやミスなど必ず発生するので自動化すべきである。フロントエンドの自動化はGruntなどがあるが、結局フロントだけで問題を解決しようとすると問題（限界）があったりするので、CIサーバーとか使ったほうがいいよね。てかフロントエンドの人も慣れておいたほうがいいよねって話。 しかし、フロントエンドの人がいちからJenkinsを立ち上げたりするのもさほど面倒でもないが多少の心理的障壁があるので、もっとカジュアルに利用したい。 Frontend/06の佐竹さ
WebPagetest in 5 minutes - MOL
WebPagetest in 5 minutes // Vimeo WebPagetest in 5 minutes // Speaker Deck WebPagetest 2013年10月30日にサイバーエージェントで行われたFrontrend x Chrome Tech Talk Night ExtendedでWebPagetestでライトニングトークしてきたのでメモしておく。 公式サイトにはAddyやJake、Paulの動画も既に公開されている。しかも通訳付きなので参加できなかった方もぜひ見てほしい。 さて、今回紹介するWebPagetestだが、いまいち日本で人気のないようだから紹介してみる。 私の仕事はWebパフォーマンス改善のタスクを主な業務としている。弊社がリリースしているWebアプリで遅いことが確認されるとその原因を調査する。その時に使うツールがChromeの拡張機能のPa
CSS Sprite画像はDataURI画像にすべきか？ - MOL
最近、スプライト画像はDataURIにすべきですか？という質問が多くて、調べてみました。てか、前のもそんな話題があったような。DataURIってなんぞって方は下記を見てほしい。 データURIスキーム | MOL CSSファイルがパースされなければレンダリングが始まらないのでCSSファイルの肥大化は絶対に避けなければならない。画像の1KBとCSSファイルの1KBを同じように考えてはいけない。 ― ぼくのかんがえたさいきょうのしーえしゅえしゅ あ、ホントそうだっけーなーと思いつつ、どこぞの資料見たんだっけなーと探してたらあった。 Optimizing the Critical Rendering Path for Instant Mobile Websites - Velocity SC 2013 このセッションはすごく分かりやすいのでオススメです（該当の箇所は12分位から）。というかIlya
Sketch3ハジメマシタ - MOL
こんちわ、無職のt32kさんだよ。今日は職を失ってお金もないのでAdobe Creative Suiteに代わるソフトを探そうって話だ。そうゆうことで、いま世間を騒がしているSketch.appを触ってみたよ。 Sketchってどんなソフトかはこもりさんの紹介動画を見てみるとよい。ついでに、こもりさんが書いている『Sketch 3 Book for Beginner』電子書籍も買っておくとスタートダッシュが決めれると思う。 Sketch 3 Book for Beginner w/ Video 電子書籍ならではというか、Sketch.app自体の更新も速いので、電子書籍も随時アップデートされているし、説明動画もついているので分かりやすい。 そうゆうわけで、5/13にこけむさズで行われたSketch3勉強会にも行ってきた。勉強会は最初こもりさんからSketch.appの概要を説明してもらって
ハイパフォーマンス ブラウザネットワーキング - MOL
それから、フロントエンドのパフォーマンスつながりで、Steve Souders氏の『ハイパフォーマンスWebサイト』を手にとって夢中で読んだのが5年前。以後、僕の口癖は『HTTPリクエストを減らす』になった。 Perfmatters 最近ではフロントエンドのパフォーマンスも細分化されてきて、Network、Render、Computeの3つに大別されるようになってきたが、僕はやっぱり『HTTPリクエストを減らす』の精神でネットワークの分野に一番興味があるし、大抵の場合においてネットワークが問題の主要な要因になってるのは間違いないと思っている。 HTTPリクエストを減らすために【序章】HTTPリクエストは甘え — MOL HTTPリクエストを減らすために【終章】我々には1000msの猶予しか残されていない — MOL そんなとき、いつも参考にしてきたのがIlya Grigorik氏の記事であ
バッジ駆動開発（2014:Node.js） - MOL
こんちわ！@t32kだよ。みんなバッジ好き？( ﾟ∀ﾟ)o彡ﾟバッジ！バッジ！バッジ！ 小学生の頃、自由勉強ノートってのがあって、勉強したページ分、先生からシールをもらってはそのノートに貼り付けていたのは良い思い出です。あのノスタルジーを再び！ ということで、大人の自由勉強ノートといえばGitHubレポジトリじゃないですか。OSSがんばります！私、気になります！そしたらシール欲しいじゃないですか？ あるよ、シールあるよ、シールってかバッジだけど。 上記は最近作ってるStyleStatsのReadmeだけど、なんか緑のバッジいっぱいですよね。それを説明していく！ Travis-CI Status Images Travis CI: Status Images まずは、この中のバッジの中では一番メジャーじゃないだろうか、Travisの Status Images。昔、@kyo_agoさんが『テ
StyleStats - MOL
スタイルシートの統計情報を出力するNode Packageを作った。 t32k/stylestats Node.js 0.10以上が必要で、CLIだとこんな感じの情報を出力してくれる。 $ npm install -g stylestats $ stylestats path/to/stylesheet.css StyleStats! ┌────────────────────────┬──────────┐ │Size │ 498.0B │ ├────────────────────────┼──────────┤ │Rules │ 7 │ ├────────────────────────┼──────────┤ │Selectors │ 11 │ ├────────────────────────┼──────────┤ │Simplicity │ 63.64% │ ├───────
【翻訳】なぜシリコンバレーはコードの書けるデザイナーを求めているのか？ - MOL
Original：Why The Valley Wants Designers That Can Code（2011-05-31）by Jared Spool もし周りにデザイナーが大勢いるのなら、デザイナーがコードも書けることは価値のあることかどうか話題に挙げてみてください。すぐに、モーゼが紅海を2つに割ったよりも早くデザイナー達の意見は分かれるでしょう。片方はプログラミングは必要不可欠なスキルだと主張し、もう片方はプロミグラミングはデザイナーの価値を下げてしまうと猛烈に論じるでしょう。 興味深いことに、プログラミングもできるデザイナーが価値があるかどうかはデザイナーの決めることではありません。それは採用マネージャーの仕事です。今日の雇用市場に基づけば、彼らがどの立場なのかは非常に明白です。多くの採用マネージャーは スーパーデザイナー を求めています。スーパーデザイナーというのはもちろん
ぼくのかんがえたさいきょうのしーえしゅえしゅ - MOL
俺ももう30だし、夏なんで、CSSフレームワークはじめました。 とりあえず、UIエレメントとか作ってないし、CSSフレームワークとか言いながら、GithubのLanguage Staticsは98.3%、JavaScriptってな感じでGrunt Taskばかり充実してるような感じです、現状。 とりあえず、設計方針としてはマシなCSSを書くことを目標としている。この一年、スマホアプリのHTML/CSSコーディングをやってきたわけだが、度重なるUIの変更に耐えうるCSS、そして肥大化しないCSSとは何かずっと考えていて、特に答えという答えもで見つかっていわけだけど、とりあえずはこうしたほうがBetterなんじゃないかというの自分的に固まってきたので、公開してみた。 てか、最強のCSSなんて存在しないからなっ！！ t32k/maple - GitHub ありがちな落とし穴 これを作るにあたって
今どきのGruntを使ったフロントエンド開発（HTML/CSS編） - MOL
SassなどのCSSプリプロセッサを使うWebデザイナが増えてきました。Sassをコンパイルするだけなら黒い画面（ターミナル）を使わずともGUIアプリからの利用で問題ありません。が、ここは一歩踏み込んでGrunt（JavaScript製のタスクランナー）を使って、Sass以外のコンパイルやライブリロード、画像最適化、CSSのリントやスタイルガイド生成など、あらゆる作業をGruntに任せてより効率的な開発環境を手に入れてみませんか。 ども、Front-end Developerをしております@t32kです。今日はがんばります。 Frontrendというコミュニティ活動をしています。通常は東京で3~4ヶ月の周期でフロントエンドをテーマにした勉強会を開催しています。良かったらみなさんもご参加くださいませ。 Agenda 今日の話す内容は以下のとおりです。 なぜGruntを使うの？ Gruntの使
HTTPリクエストを減らすために【序章】HTTPリクエストは甘え - MOL
このシリーズはHTTPリクエストの理解を通じてWebパフォーマンスの重要性について考える5章構成になっている。 【序章】HTTPリクエストは甘え 【CSS Sprite編】スプライト地獄からの解放 【WebFont編】ドラッグ＆ドロップしてコマンド叩いてウェーイ 【DataURI編】遅延ロードでレンダリングブロックを回避 【終章】我々には1000msの猶予しか残されていない 1日目は、HTTPリクエストの概要について説明する。 例えに、私のポートフォリオページ（t32k.me）が表示されるまでの流れを見ていく。まず、検索からでも方法はなんでもよいが、ブラウザのURLバーにt32k.meと打ち込んでアクセスする。そのページを見にいくということは、つまりt32k.meに対してHTTPスキームでリクエストするということを意味している。 クライアントであるブラウザは入力されたURLを判断して、リソ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
