Componentによるフロントエンドのパッケージ管理
直近で、新規案件に関わることになりそうなので、ライブラリ選定やタスクランナー、そして今回の依存管理のようにベーシックな話が続いてます。次第に、具体的な実装やコード設計のポストが多くなる･･･はず。 今回はVue.jsでも触れましたが、改めてcomponent - modular javascript frameworkについて。 概要 Componentはパッケージマネージャー兼、依存解決込みのビルドツールです。クライアントサイドについて、JSのパッケージマネージャーやビルダーは既にありますが、Componentは HTML/CSS/JSをセットにして扱うことができます。 npmでいうpackage.jsonと同様に、component.jsonという定義ファイルによって、パッケージの依存関係やリポジトリなどの各種情報を示します。 component/component コア部分のリポジト
フロントエンドチューニングの箇条殴り書き
普段気をつけてるよリスト "モバイルで、WebViewとブラウザのコンパチで、特にセオリー化されていないデザインモジュールのなか、装飾画像もふんだんに使うぞ系サービス開発" の文脈における、パフォーマンス確保のため気をつけてるよリスト。 よく、パフォーマンス「向上」とか「確保」とか申しますが、メンテナンスコストなどと天秤にかけて、「必要十分」のラインを狙うのが重要だと思う次第。 画像リソース 画像リソースを揃えるときのセオリ。圧縮率とか最適化とか細かいチューニングはあれど、大雑把に下記を守る。そしてImage Optim（or 相当の処理）。 JPEGはプログレッシブで画質60くらい（オレ目安） PNGは差し支えない範囲で色数をきちんと削る 50px未満のサムネイルは@2.0xなリソースにしない 案外、Androidあわせの@1.5xや@1.0xでも大丈夫なことすらある GIFアニメを入れ
nginxにLion付属のab（ApacheBench）を実行したら失敗するときの解決ログ
nginxにab（ApacheBench）を実行すると失敗してた うちのサーバは、さくらのVPSにてnginxがフロントにいて、そこから内側のapacheとかRackとかNodeに回しています。 そんなこのサーバにLion付属のabを実行すると失敗していましたが、自力でhttpdから httpd-2.4.1.tar.bz2を取得してmake。abだけ新しいのに差し替えましたら解決しました。 問題の確認から解決まで まずは問題の発生している状態から。 apr_socket_recv: Connection reset by peer (54) うーん？ ただのgif画像とかでも同じように切られるのでapacheとかは無罪と判定。（静的ファイルの配信はnginxがしてるから） % ab -n 100 -c 2 http://havelog.ayumusato.com/ This is Apac
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
Backbone.jsを使うときに参考になるリソース 2012年末版 (Backbone Advent Calendar 2012 25th day)
Backboneを使うときの参考情報たち Advent Calendarがネタ切れの折、最終日が冴えない小ネタで終わるよりはマシかということでリストアップしてみた。 日本語リソース では早速、日本語のリソースから。古い情報はリストから外しているので、いくらか偏りがあるかも。悪しからず。 ビギナー向けにまとまったの CodeGrid - フロントエンドに関わる人々のガイド Backbone.js Advent Calendar 2011 - Qiita CodeGridで連載中のBackbone入門が、ちょうどリアルタイムに更新されているビギナー向け情報でおすすめ。ただし有料。去年のAdvent Calendarも丁寧でおすすめ。 enja-oss/Backbone · GitHub JavaScript MVCフレームワーク Backbone.jsのコメント付きソースコード日本語訳が公開
Backboneの小ネタなパターン3つ (Backbone Advent Calendar 2012 21th day)
Backbone.js Advent Calendar 2012の21日目でございます。おもむろに小ネタなパターンを、3つほど簡単に紹介してみる次第。 renderとpresenterの分離パターン これは Backbone.js Tips and Tricks を参考にしています。実践してみたところ、なにかと具合が良くてお気に入りのパターンです。 Backbone.View.extend({ tmpl: 'path/to/tmpl', initialize: function() { this.model = new SomeModel(); this.model.fetch({ success: this.render }); }, presenter: function() { var data = this.model.toJSON(); // data manipulation
Underscore.jsのtemplate触ったメモ
以下、Underscore.jsが1.3.3当時の情報です。 template _.template(templateString, [data], [settings]) Underscore.js Utility template Backbone.jsを試すついでに、Underscore.jsについてるtemplateを試してみました。他のテンプレートライブラリ持ち込んでくるのも億劫だったので。 <script id="tmplString" type="text/template"> <h3>店舗情報</h3> <div id="store"> <p><a href="<%- data.store.url %>"><%- data.store.name %></a></p> <img src="<%- data.store.image %>" alt="店舗写真" /> <dl>
Backbone.js FAQ 日本語訳 - "is a library, not a framework"
Backbone.js FAQ を日本語訳しました Backbone/docs/FAQ.md at master · enja-oss/Backbone · GitHub 上記のGitHubから参照できます。 まずFAQから訳しましたが、最終的にはみんなの力で全訳ドキュメントにするのが目標。ほんとは本家をforkすべきだったかもですが、Pull Requestに向けての整備は後で考えます。:) いまは、有志でMarkdownでさくさくと日本語ドキュメントを書きためていければいいんじゃないかと思っています。 enja-oss/Backbone ってことでIssueとかPull Request大歓迎です！ 詳しくはリポジトリをご覧ください。 Backbone.js の本性はMVCでもフレームワークでもない 「クライアントサイドMVCフレームワーク = Backbone.js」というような表現が
Backbone.jsで今つくっている構成について (Backbone Advent Calendar 2012 1st day)
Advent Calendar 1日目だよ ってことで、Backbone.js Advent Calendar 1日目を書かせていただきます。本当は先日公開したFAQの日本語訳を一発目にしたかったのですが、公開したい欲に負けた次第。 何とかして現状を振り返るアウトプットの機会にしたかったので、今やっているプロジェクトで書いたコードの大まかな構成と局所的なパターンの紹介をします。 いま手元で作成しているものは、スマートフォン向けのシングルページなWebアプリケーションです。専任で大量のJavaScriptをスクラッチするの初めて。Backbone自体も割と初挑戦。 ここでいうシングルページは、HTML1枚のみで、ページ遷移はbodyの中をJavaScriptで書き換えていく構成のアプリケーションを指しています。 今のプロジェクトから抽出されたクラス構成 下記のような構成に落ち着き、抜本的なリ
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
ぼくが実際に運用していたGitブランチモデルについて
オペレーションとかインフラ系のエンジニアリングからは少々離れそうなので、個人的な備忘録がてら、Gitのブランチモデルについて。淡々と書くよ。 見えないチカラ: A successful Git branching model を翻訳しました 基本的に、このA successful Git branching model（上記は翻訳記事）を参考にしています。ですが、完全ではありません。運用しながら都合よく省略していますし、悪く言えば曲解もしています。あくまで、わたしが都合良く解釈して取り回した結果と考えてください。 さて、このようなドッシリとしたブランチモデルが、あらゆる規模のプロジェクトに対して有効であるかといえば、もちろんそうではありません。コツコツ個人で開発しているライブラリなどは、ブランチを使わなくても良いケースがあるでしょうし、作ってもバージョン番号ブランチぐらいのケースだってザラ
Sassよりラクチン，LESS.appで簡単CSSコンパイル生活！（Mac限定）
LESSとSassを比較していました LESS « The Dynamic Stylesheet language Sass - Syntactically Awesome Stylesheets ここ半年ぐらいの間に，名前を聞くようになったSassと，それに影響されて作られた後発のLESSを比較検討したところ，以下のような理由からLESSを使うことにしました． 今回は，自分の作業の効率化はもちろん，将来的にチームでシェアできる技術になり得るか，という観点から選択しています． LESSを選ぶ理由 LESS.appというGUIツールが存在する node.jsで動くWebフレームワークExpressがLESSに標準対応している(らしい) 文法がSassより素直＆シンプルで慣れてもらいやすそう この中でも，LESS.appの存在が一番の決め手となって，マイナーなはずのLESSに軍配が上がってしま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
