タグ

ブックマーク / postd.cc (7)

  • フロントエンドパフォーマンスのチェックリスト2021年版(PDF、Apple Pages、MS Word)-後編 | POSTD

    目次# 前編 準備段階:計画と指標 パフォーマンスを重視する文化、Core Web Vitals、パフォーマンスのプロファイル、CrUX、Lighthouse、FID、TTI、CLS、端末。 現実的な目標の設定 パフォーマンスバジェット、パフォーマンス目標、RAILフレームワーク、170KB/30KBバジェット。 環境の定義 フレームワークの選択、パフォーマンスコストの基準設定、Webpack、依存関係、CDN、フロントエンドアーキテクチャ、CSR、SSR、CSR + SSR、静的レンダリング、プリレンダリング、PRPLパターン。 中編 アセットの最適化 Brotli、AVIF、WebP、レスポンシブ画像、AV1、アダプティブメディア読み込み、動画圧縮、WebフォントGoogleフォント。 ビルドの最適化 JavaScriptモジュール、モジュール/ノーモジュールのパターン、ツリーシェイ

    フロントエンドパフォーマンスのチェックリスト2021年版(PDF、Apple Pages、MS Word)-後編 | POSTD
    shion214
    shion214 2023/07/25
  • フロントエンドパフォーマンスのチェックリスト2021年版(PDF、Apple Pages、MS Word)-中編 | POSTD

    目次# 前編 準備段階:計画と指標 パフォーマンスを重視する文化、Core Web Vitals、パフォーマンスのプロファイル、CrUX、Lighthouse、FID、TTI、CLS、端末。 現実的な目標の設定 パフォーマンスバジェット、パフォーマンス目標、RAILフレームワーク、170KB/30KBバジェット。 環境の定義 フレームワークの選択、パフォーマンスコストの基準設定、Webpack、依存関係、CDN、フロントエンドアーキテクチャ、CSR、SSR、CSR + SSR、静的レンダリング、プリレンダリング、PRPLパターン。 中編 アセットの最適化 Brotli、AVIF、WebP、レスポンシブ画像、AV1、アダプティブメディア読み込み、動画圧縮、WebフォントGoogleフォント。 ビルドの最適化 JavaScriptモジュール、モジュール/ノーモジュールのパターン、ツリーシェイ

    フロントエンドパフォーマンスのチェックリスト2021年版(PDF、Apple Pages、MS Word)-中編 | POSTD
    shion214
    shion214 2023/07/03
  • JavaScriptのバンドルとトランスパイルが不要なモダンWebアプリ | POSTD

    筆者はES6以前のVanilla JSがあまり好きではありませんでした。 そこで、バニラJavaScriptをなるべく書かなくていいように、2000年代を通じてさまざまなアプローチを追求してきました。最初はRJS(Ruby-to-JavaScript)、次はCoffeeScriptでした。どちらのアプローチも、バニラJavaScriptより楽しく書けるソースコードを、ブラウザが実行できるバージョンのJavaScriptトランスパイルするものです。ある程度は、うまくいっていました。 とはいえ、これは明らかにその場しのぎの手段に過ぎず、ブラウザがより洗練されたJavaScriptを理解できる日を待ちわびていたのです。ただ、そんな日が来ることはなく、永久にその場しのぎでやり過ごすのかと思われる時期がしばらく続きました。 しかし、幸いなことにJavaScriptは改善を続け、2015年にはES6

    JavaScriptのバンドルとトランスパイルが不要なモダンWebアプリ | POSTD
    shion214
    shion214 2021/11/16
  • リレーショナルデータベースの仕組み (1/3) | POSTD

    リレーショナルデータベースが話題に挙がるとき、私は何かが足りないと思わずにはいられません。データベースはあらゆるところで使われており、その種類も、小規模で便利なSQLiteからパワフルなTeradataまで様々です。しかし、それがどういう仕組みで機能しているかを説明したものとなると、その数はごくわずかではないでしょうか。例えば「リレーショナルデータベース 仕組み」などで検索してみてください。ヒット数の少なさを実感できると思います。さらにそれらの記事は短いものがほとんどです。逆に、近年流行している技術(ビッグデータ、NoSQLJavaScriptなど)を検索した場合、それらの機能を詳しく説明した記事はたくさん見つかると思います。 リレーショナルデータベースは、もはや大学の授業や研究論文、専門書などでしか扱われないような古くて退屈な技術なのでしょうか? 私は開発者として、理解していないものを

    リレーショナルデータベースの仕組み (1/3) | POSTD
  • 珍しいワークフロー:Atomic Designの原則とSketchでデザインからプログラミングまで | POSTD

    概要: Sketchを使ったAtomic Designの方法がプロダクトデザインの未来形です。 初めに この記事は、上のビデオの素晴らしい人物、Brad Frostの開発したシステムについて書いています。Atomic Designは今のレスポンシブなデジタルの世界に対応するために開発されたものです。 ここ何年も、私たちのデザインを少しでも理解してもらえるよう、スタイルガイド、基的ガイドラインやムードボードなどのツールを作成してきました。同じように、開発者もBootstrapやFoundation、Bourbonなどのツールでプログラミング作業を楽にしようとしてきました。互いに妥協点を見いだし協力することで互いの作業を楽にできます。Atomic Designはまさにそれを実現しようとしています。 Atomic designはあるインスタンスやページをデザインすることではありません。大局的に

    珍しいワークフロー:Atomic Designの原則とSketchでデザインからプログラミングまで | POSTD
  • Gitを学んでいて「なるほど!」となる瞬間 | POSTD

    Gitは速く柔軟性がありますが、理解に時間のかかる分散型バージョン管理システムです。Gitを始める前に次を理解しておきましょう。 通常のバージョン管理 分散型バージョン管理 や 学習書 、 指南書 はGitを理解するのに役に立ちました。しかし、その他にもGitの理解に至ったきっかけがありますのでご紹介します。 ステージング・エリアがある Gitにはステージング・エリアがあります。繰り返しますが、 ステージング・エリアがあるのです 。 これには混乱しました。リポジトリ(「オブジェクトデータベース」)とステージング・エリア(「インデックス」と呼ばれる)の両方がGitにはあります。チェックインには2段階あります。 git add foo.txt インデックスにfoo.txtを追加します。これだけでは、チェックインは完了していません。 git commit -m "message" リポジトリ

    Gitを学んでいて「なるほど!」となる瞬間 | POSTD
  • 開発経験ゼロのイラストレーターがゲーム制作 – Alto’s Adventure制作記 | POSTD

    数週間前やっと、大興奮の長い旅にピリオドを打つことができました。 2年間かけて私の全精神と愛情を注いで制作したAlto’s Adventureがついにリリースされました。 簡単な道のりではありませんでしたので、その制作過程で私が感じたことをうまく言葉にできるか分かりませんが、 まずはこのゲームをダウンロードして遊んでくれている全ての方に感謝の意を表したいと思います。 このゲームで遊んでくれている方がいるというだけでもう私の努力は報われています。 今回のゲームの制作に関して経験してきたことや、直面した問題などをシリーズで投稿していきたいとずっと考えていました。 何が皆さんの興味を引き、どこまで詳細にお話するかなどは難しい課題ですが、まず簡単なゲームの紹介から始めたいと思います。 Alto’s Adventureは、移りゆくアルペンの美しい景色を背景に、スノーボードの果てしない冒険ができるゲー

    開発経験ゼロのイラストレーターがゲーム制作 – Alto’s Adventure制作記 | POSTD
  • 1