タグ

ブックマーク / havelog.aho.mu (5)

  • WCAN 2013 Summer で「ハイパフォーマンスWebフロントエンド」を話してきました

    スライド 振り返り 50分という限られた時間の中で、Network・Render・Computeという3柱についてご紹介するという構成に挑ませていただきました。 恐らくフロントエンドが専門でない方も多くいらした中で、どこまでニュアンスだけでも届けられるように、という面の調整が多かったです。 結果的には目に見えるRenderについて多めに盛り込んで着地しています。 WebKit依存の内容が多めの所から、Canaryに載っている開発者ツールの使い方を通して、パフォーマンス問題の検証と対策について肉付けしている構成です。 参考にした資料のURLリスト 導入のあたり 開発者のための WebKit (“WebKit for Developers” 日語訳) Performance Checklist for the Mobile Web - YouTube Strangeloop - Impac

    WCAN 2013 Summer で「ハイパフォーマンスWebフロントエンド」を話してきました
  • Gruntfileを整理してタスクの自動化を進めた

    (急遽宣伝) FrontrendでGruntします Frontrend(フロントレンド) Vol.3 powered by CyberAgent : ATND Frontrend(フロントレンド)とは サイバーエージェントが主催するフロントエンド技術セミナーです。 HTML5/CSS3やJavaScriptのトレンドやノウハウ等を惜しみなくお伝えします。 2012/10/21(日)の午後に、FrontrendでGruntのことを紹介させていただく運びになりました!以下の記事は色々と知ってる前提な内容になってしまっているので、ベーシックな所から知りたい方には特にオススメです。 今回のFrontrendはスピード特集ということで、ページパフォーマンスの最適化はもちろん、CSSプリプロセッサの導入や、ガイドラインの運用による業務効率のカイゼンにも踏み込んでスピードを上げていきます!ということで

    Gruntfileを整理してタスクの自動化を進めた
  • 人気そうなGruntで、StylusとかCoffeeScriptをビルドする

    ナウいらしいからgruntいれてみるよ cowboy/grunt GruntはJSで作られている、Rakeみたいなビルドタスクの管理ツールといえばよいのでしょうか。LESSやCoffee Scriptのようなコンパイルを必要するファイルの処理や、minify・concatなどもタスクとして実行できます。 デフォルトで、ファイル更新を監視するwatchタスクもあるため、コンパイル操作の自動化などにも使っていけます。npmでもgrunt関係のタスクが多数公開されているので、簡単にタスクを追加できます。 まずはnpmでgrunt体をインストール。 # ng npm instlal grunt npm WARN prefer global grunt@0.3.11 should be installed with -g # ok npm install -g grunt あ、グローバルじゃないと

    人気そうなGruntで、StylusとかCoffeeScriptをビルドする
  • 勉強会資料シェア Getting Started with RequireJS

    げりんぐすたーてっど うぃず りくわぃあーじぇーぇす ということで、社内勉強会でRequireJSの入門資料をこさえたのでシェア。 利用したデモファイルセット http://d.aho.mu/S4mh なんとなくRequireJSが動くセットです。スライド中のr.jsによるビルドコマンドや、gruntを利用したビルドも試せるようになっています。 おさえるべき要点 いくつかの要点だけ記事内に文字列でおこしておきまする。 モジュラーと依存関係 Webサイト → Webアプリ への流れが明確になってきてフロントエンドが複雑化してきている今、1つのJSファイルにつらつらとCSSのようなノリで書き連ねる時代は終わりつつあります。 ParisJS #10 : RequireJS このあたりについては、上記の素晴らしいスライドから、Figureを拝借しました。個々のJavaScriptの粒度が揃えてモジ

    勉強会資料シェア Getting Started with RequireJS
  • Sublime Text 2を使ってみたら思ったより良い

    Sublime Text 2(Mac版) 使ってみたら思ったより良かったので、設定メモを残しながらブログにしてみる。 Sublime Text - Download 特徴 Vimキーバインドに対応 拡張がPythonで書かれてる PyよりRubyVimよりEmacsな自分とは縁遠かったはずなのですが…。 入力補完が優秀(WebStormほどではないにせよ) デフォルトのショートカットがわりと自然(個人の感想です) 画面のスプリットができる 設定画面をもたないが、JSONをいじれば徹底してカスタマイズできる パッケージを入れて機能を増やせる 右サイドのミニマップおもしろい Goto Anythingべんり(個人の感想です) 海外では結構な人気らしく、たしかにパッケージも豊富でよいです。 同意 テキストエディタの挙動とvimの挙動がうまいこと両立しててなんちゃってvim使いの僕には嬉しいです

    Sublime Text 2を使ってみたら思ったより良い
  • 1