技術要素編: web アプリが新陳代謝を続けるための依存関係の厳選（新規開発のメモ書きシリーズ1）
新規開発したプロダクトについて ｢世の中に URL は出ているが、まだ正式公開していない｣という微妙な位置付けなのでプロダクト名と詳細は避けつつ述べます。短めの開発期間で急いでつくって、慌てて年末にβ版をリリースしたところです。 次の動きに向けてまったりしたり、Inside Frontend の開催に向けて四苦八苦しているところでメモ書きです。 このシリーズの他の記事はこちら。 ビルド設定編: UA に応じた最適な JS バンドルの配信と webpack との距離感 コード設計編: context による縦軸分類とレイヤードアーキテクチャ アーキテクチャ編: SSR と CDN ( Fastly ) とユーザー依存情報の分離 依存するパッケージの厳選 新しい技術、ライブラリを試すこと、それらを使って生産性の向上にチャレンジすることは必要です。とはいえ、程度が過ぎると逆に生産性を下げかねない
Web クライアントサイドのパフォーマンスメトリクス — Speed Index、Paint Timing、TTI etc...
色々なパフォーマンス指標のこと 何かを評価するときには何らかの指標（メトリクス）を定めますが、何を指標として設定してどのように測るかというのは重要です。 いわゆる KPI もそうですが、扱っている商材やビジネスのステージ（フェーズ）によっても適切な指標は変わるかもしれません。色々な指標をよく理解して引き出しを広げておくことは、状況に合わせて適切な指標を選んで改善していく過程で役立ちます。 これまでのパフォーマンス指標 過去の Web パフォーマンス界隈はバックエンドから HTML ドキュメントを返却する際の所要時間や、Web ページロード時の各イベントの発火時間を計測する方法が多く見られました。 Backend Time Browser Event Based DOMContentLoaded Page load ( onload ) 近年は特に後者の、既定のイベント発火に依存していたクラ
Ajax的に画像などのファイルをアップロードする方法 ::ハブろぐ
a-blog cmsの開発中、Ajax的にファイルをアップロードする必要があったので、その際の調べ物についてかきます。普通にpostしようにも、JavaScriptでローカルのファイルは扱えないよ、って話で、先輩から「iframeがヒントだ！」的なざっくりとしたアドバイスを頂いたので、それを頼りに調べる。 画面遷移なしでファイルアップロードする方法 - 30からのBlog おお、なるほどなるほど。以下、HTML, JavaScript, PHPのサンプルをメモ。 こんなHTMLをJavaScriptで操作すればいい JavaScript自身が要素の生成を作成してもよいですが、最終的にはこういうHTMLが作成されることになります。 <a href="#" id="uploadTrigger">アップロードするぜー</a> <form id="uploadForm" action="画像POS
家族が緊急入院から手術キメてしまって大慌て
妻が入院しちまったときのメモ 端的に述べると 明け方4時ごろに初の119をピポパ 救急車内で受け入れ先の病院が決まり 色々診察して8時ごろに緊急入院を手続き 10時すぎに手術を始めて、13時前ごろに終了 それなりに衰弱した妻をアワワしながら眺める昼下がり というような展開が先週の頭にございまして、しっかりと大変でした。 色々ことは諸処ございましたが、ひとまず退院の目処がつきまして、いつものノリでブログに書き留める次第。8時間ほど働いたらそそくさと病院に向かう日々でございまして、チームの皆様には些か申し訳なく。 物資 ここを特に備忘と致したい所存。渋谷のユニクロで、女物のパンツ(ショーツ)を掴んでレジに並んだのは俺だ！！！ 前開きのゆるいシャツ的な衣類、開腹手術系だと非常に重要だと思うので、そのような事態に直面してしまった諸氏は、ぜひ確保していただきたい。看護師さんが患者の体勢を痛めつけずに
Gruntfileを整理してタスクの自動化を進めた
(急遽宣伝) FrontrendでGruntします Frontrend（フロントレンド） Vol.3 powered by CyberAgent : ATND Frontrend（フロントレンド）とは サイバーエージェントが主催するフロントエンド系技術セミナーです。 HTML5/CSS3やJavaScriptのトレンドやノウハウ等を惜しみなくお伝えします。 2012/10/21（日）の午後に、FrontrendでGruntのことを紹介させていただく運びになりました！以下の記事は色々と知ってる前提な内容になってしまっているので、ベーシックな所から知りたい方には特にオススメです。 今回のFrontrendはスピード特集ということで、ページパフォーマンスの最適化はもちろん、CSSプリプロセッサの導入や、ガイドラインの運用による業務効率のカイゼンにも踏み込んでスピードを上げていきます！ということで
勉強会資料シェア Getting Started with RequireJS
げりんぐすたーてっど うぃず りくわぃあーじぇーぇす ということで、社内勉強会でRequireJSの入門資料をこさえたのでシェア。 利用したデモファイルセット http://d.aho.mu/S4mh なんとなくRequireJSが動くセットです。スライド中のr.jsによるビルドコマンドや、gruntを利用したビルドも試せるようになっています。 おさえるべき要点 いくつかの要点だけ記事内に文字列でおこしておきまする。 モジュラーと依存関係 Webサイト → Webアプリ への流れが明確になってきてフロントエンドが複雑化してきている今、1つのJSファイルにつらつらとCSSのようなノリで書き連ねる時代は終わりつつあります。 ParisJS #10 : RequireJS このあたりについては、上記の素晴らしいスライドから、Figureを拝借しました。個々のJavaScriptの粒度が揃えてモジ
Sublime Text 2を使ってみたら思ったより良い
Sublime Text 2（Mac版） 使ってみたら思ったより良かったので、設定メモを残しながらブログにしてみる。 Sublime Text - Download 特徴 Vimキーバインドに対応 拡張がPythonで書かれてる PyよりRuby、VimよりEmacsな自分とは縁遠かったはずなのですが…。 入力補完が優秀（WebStormほどではないにせよ） デフォルトのショートカットがわりと自然（個人の感想です） 画面のスプリットができる 設定画面をもたないが、JSONをいじれば徹底してカスタマイズできる パッケージを入れて機能を増やせる 右サイドのミニマップおもしろい Goto Anythingべんり（個人の感想です） 海外では結構な人気らしく、たしかにパッケージも豊富でよいです。 同意 テキストエディタの挙動とvimの挙動がうまいこと両立しててなんちゃってvim使いの僕には嬉しいです
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
