タグ

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

  • 勉強会資料シェア 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
  • grunt-data-uri 作ってnpm登録してみた

    cssの中身を正規表現で漁って、データURIに変換するよ君。htmlを対象とした処理は、そのうち追加する。 ahomu/grunt-data-uri DataURIへの変換系タスクで、なかなかちょうどよい使い勝手のものがなかったので自作しました。npmにおいて、名前争奪合戦の様相を呈している、grunt-task系ですがなぜかgrunt-data-uriが空いていました。 もしかして、海外では、画像をDataURIに変換して埋め込む、という手法がdata-uriという呼称伴わずに使われてるのかしら npmデビューしたかったんや! @t32k 氏が CSSO of grunt plugin | en.t32k.me を作っていたのに触発されまして。npm adduserして、npm publishするだけ。 良いところ 0.3.xはもちろん、開発ブランチ(devel)の0.4.0aでも動く

    grunt-data-uri 作ってnpm登録してみた
  • Reveal.jsのスクリーンショットをPhantomJSでガンガン撮る

    Gistぺたり 短いながら、phantomjsの便利なAPIが詰まってたので貼ってみた。 % phantomjs shot.js Reveal.jsって? reveal.js - The HTML Presentation Framework いわゆるHTMLスライドのフレームワークです。最初からある程度かっこよく作られていて、そのままでも十分使えると思います。APIもちゃんと整備されているので、コントロールを追加することもできます。 複数のテーマが用意されている 複数のトランジションが用意されている Markdownで書ける(data-markdownを付与したsectionのみ) nodeでKeynoteみたいなスライドウインドウ+スピーカーノートウインドウの連携ができる などなど。今用意している最中のスライドでは、これを使ってみています。 なんでスクリーンショット? 普通にPDFで出

    Reveal.jsのスクリーンショットをPhantomJSでガンガン撮る
  • YeomanとBrunchをさわさわした

    Yeoman - Modern workflows for modern webapps Brunch | HTML5 application assembler 今回はニュートラルな気持ちで、並べて触ってみるのが目的なので、どっちが良い・悪い、という評価的な主張は重きを置いてない。(感想としては混じってるけど)淡々と記録しているだけなので、流し読んでいただければ幸い。 CompareTable Install Skeletons/BoilerPlate Scaffolding (generate/destroy) Build Server & Watch Test PackageManager Conclusion Compare Table とりあえず比較表。オリジナルから行列加えてる。 Original: Compare Table - Brunch | HTML5 applicat

    YeomanとBrunchをさわさわした
  • Gruntfileを整理してタスクの自動化を進めた

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

    Gruntfileを整理してタスクの自動化を進めた
  • 続Grunt + phantomjs + jasmineで自動テスト環境

    目標はgrunt + phantomjs + jasmineの自動テスト環境 先日の大なごやJS Vol.3で、@_tk84さんが発表なさっていた、PhantomJSで自動テストにインスパイアされて、Gruntでそのあたりをコントロールできるようにしました。 今回のポイントは下記。 .coffeeを保存したら、.jsに自動でコンパイル .jsの更新を検知して、SpecRunner.htmlを自動生成 このとき更新された.jsと、対になるテストコードを含んだSpecRunner.htmlが生成される phantomjsで、SpecRunner.htmlを実行した結果を標準出力 出力をgrowlnotifyに渡してデスクトップ通知 @_tk84さんの元ネタのほうでは、EmacsとRubyな環境でしたが、自分はエディタには依存せず、nodeの実行環境だけで何とかできるように構成しました。 aho

    続Grunt + phantomjs + jasmineで自動テスト環境
    vvakame
    vvakame 2012/10/02
    保存したら自動でテスト流してGrowlで通知とな