タグ

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

  • ビルド設定編: UA に応じた最適な JS バンドルの配信と webpack との距離感(新規開発のメモ書きシリーズ2)

    たくさんある道具をどのように組み合わせるか 今回はコード設計編のつもりでしたが、ビルド周りを先にまとめることにしました。主にパフォーマンス上の都合ですが、心がけたポイントは次の点です。 画一的なバンドルではなく、適切なバンドルを選択的に配信できるようにする 適当な粒度で Code Splitting できるようにする ひとつのツールに何でもかんでもやらせない( webpack、お前のことだよ!) ビルドのパイプラインを短く、シンプルに済ませる(できることを全てやろうとしない) タスクランナーは前回述べた通り make を利用しています。同僚が使っているのを見てパクりましたが Self-Documented Makefile の手法が、タスク名忘れに優しくてよかったです。 npm run したら npm scripts が一覧で出てくるのと似たようなやつです。 このシリーズの他の記事はこちら

    ビルド設定編: UA に応じた最適な JS バンドルの配信と webpack との距離感(新規開発のメモ書きシリーズ2)
  • 技術要素編: web アプリが新陳代謝を続けるための依存関係の厳選(新規開発のメモ書きシリーズ1)

    新規開発したプロダクトについて 「世の中に URL は出ているが、まだ正式公開していない」という微妙な位置付けなのでプロダクト名と詳細は避けつつ述べます。短めの開発期間で急いでつくって、慌てて年末にβ版をリリースしたところです。 次の動きに向けてまったりしたり、Inside Frontend の開催に向けて四苦八苦しているところでメモ書きです。 このシリーズの他の記事はこちら。 ビルド設定編: UA に応じた最適な JS バンドルの配信と webpack との距離感 コード設計編: context による縦軸分類とレイヤードアーキテクチャ アーキテクチャ編: SSR と CDN ( Fastly ) とユーザー依存情報の分離 依存するパッケージの厳選 新しい技術、ライブラリを試すこと、それらを使って生産性の向上にチャレンジすることは必要です。とはいえ、程度が過ぎると逆に生産性を下げかねない

    技術要素編: web アプリが新陳代謝を続けるための依存関係の厳選(新規開発のメモ書きシリーズ1)
  • Webデザイン学科の特別講義として、フロントエンドについて演説しました

    Web フロントエンド仕事をしてご飯をおいしくべる話 画像の引用がめんどうになったので、自分の写真ライブラリから適当なご飯画像を入れることにしました。 学校法人河合塾学園トライデントコンピュータ専門学校の Web デザイン学科に在籍する1, 2年生を対象に、業界研究という授業で演説を繰り広げさせていただきました。ほんと、そこまで喋るつもりなかったのですが、なんだかすごく熱心に聞いてくれているので、ついつい喋りたいこと喋りすぎました(; 'A`) 各位には当日申し上げましたが、分かることは「分かる〜」って感じで、分からないことは「分からん!」って感じのリアクションを正しくとることは、喋ってる人のテンションを左右するので非常に重要です。聞き手のスキルです。調子にのりましたすみません。 なんとなくのアウトライン Web フロントエンドという職能に関する夢のはなしと、社会は厳しいという話を少し

    Webデザイン学科の特別講義として、フロントエンドについて演説しました
    operando
    operando 2016/07/23
  • リモートワークの勘所と限界について1年くらいの感想、組織にとっての選択肢作りの話

    1年くらいリモートワークを続けてみた感想 まず当然ながら「リモートワークは生産性が高い!これこそ未来のワークスタイル!」のような感想はありません。 生産性やコミュニケーションに関連するメリット、デメリットをうまく相殺しきれれば、生活の自由度だけ向上してハッピー、と考えています。 今は自宅かレンタルオフィスのいずれかを作業場として開発などを行いつつ、社がある渋谷には1泊2日の出張を月2回するようなペースで仕事をしています。基Slack でテキストチャットによるコミュニケーションをメインとしつつ、必要があれば MTG に Hangout でビデオチャットで参加します。 生産性は大して上がらない 期待していた生産性は、それほど向上することはありませんでした。 東京にさえいなければ気軽に MTG に呼び出されることもありませんし、開発に充てることが可能な時間は若干増えています。通勤時間が長

    リモートワークの勘所と限界について1年くらいの感想、組織にとっての選択肢作りの話
    operando
    operando 2016/07/23
  • フロントエンドエンジニアのための現在とこれからの必須知識 の読書感想文

    入門書ではなくアップデートのための一冊 (率直に言って)大きく出たなー!!というタイトルの書。献いただいたので所感を示す次第。今回は @cssradar パイセンが編集をつとめ、@hiloki や @pocotan001 も原稿を書いている期待の一冊。 入門書ではなく、網羅的な知識をアップデートするための一冊です。 フロントエンド技術に関する網羅書 フロントエンドエンジニア向けの網羅書としては自分も参加したフロントエンドエンジニア養成読が脳裏をよぎるわけですが、書はその2016年版という趣も漂う構成でした。養成読よりもサラっと読める感じもします。 特色としては、Git やビルドツールといった足回りの網羅や、デザイン・UI・アクセシビリティなどのフロントエンドエンジニアらしい分野への言及が丁寧だった印象です。 ECMAScript や HTTP/2 といった過渡期にあるトピックも過

    フロントエンドエンジニアのための現在とこれからの必須知識 の読書感想文
    operando
    operando 2016/02/28
  • Google I/O で v1.0 が発表された Polymer の Elements Catalog が面白い

    Polymer Elements のカタログページ Site: Polymer Element Catalog Repo: Polymer/polymer-element-catalog Polymer は、これからの Web 標準の一角を占めるであろう Web Components のラッパーライブラリです。その Polymer で作られたコンポーネントのカタログサイトが公開されていました。 これまでも Core Elements や Paper Elements が Polymer のコンポーネントとして提供されていましたが、分類も新たにレパートリーが拡充されています。 Cart に入れて Download カタログには各コンポーネントのドキュメントやデモが載っていて、使いたいものをチェックして Cart に入れていきます。必要なコンポーネントを Cart に入れてダウンロードさせると

    Google I/O で v1.0 が発表された Polymer の Elements Catalog が面白い
  • Polymer 0.5 → 1.0 変更点ナナメ読みメモ

    変更点のナナメ読み Polymer 1.0 が Google I/O 2015 のキーノート(?)で公開されたようなので、ドキュメントから変更点について気になるところだけ拾い読みしました。 ハイライト Introducing Polymer 1.0 - Polymer の Highlight より。 0.5 と比べて Web Components をネイティブサポートする Chrome で起動速度と実行時性能が劇的に高速化(したしい) 0.5 と比べて ペイロードサイズ(ファイルサイズ)を減らした 実装の全体的なリファクタリング(たぶんゼロベース) 新しく シンプル化&高速化されたデータバインディングを実装 新しく shady DOM という Shadow DOM の Polyfill を実装 ネイティブの Shadow DOM なしで要素のスタイルを保護する境界を作った 前々からアピール

    Polymer 0.5 → 1.0 変更点ナナメ読みメモ
  • 1