タグ

2020年12月27日のブックマーク (12件)

  • ChromeとFastlyのEarly Hintsの効果計測に貢献する — HACK The Nikkei

    この記事は Nikkei Advent Calendar 2020 20日目の記事です。 日経電子版Webチームの阿部です。今回はHTTP/2の目玉機能の1つであったServer Pushの事実上の終焉と、現在ChromeチームやFastly社が実験中の103 Early Hintsについて、日経電子版Webでの取り組みを紹介させていただきます。 HTTP/2 Server Push HTTP/2 Server PushはHTTP/2で策定された、一言で言ってしまうと「必要なリソースがリクエストされる前にサーバーからクライアントに送ってしまおう」という技術です。 これによりクライアントがリクエストするリソースを先回りしてサーバーが送ることで、必要なリソースが揃うまでにかかる時間を短縮できるため、パフォーマンスの向上が期待されていました。 Server Pushの問題点 一方、サーバーからク

    ChromeとFastlyのEarly Hintsの効果計測に貢献する — HACK The Nikkei
    efcl
    efcl 2020/12/27
    103 Early Hintsでpreloadレスポンスを返す話。 CDNレイヤーでレスポンスをどう決めるかについて。Fastlyの持つDictionariesでリソースに対するpreloadレスポンスを決める
  • 日経電子版ウェブで起きた謎のCDNエラーと Header Overflow — HACK The Nikkei

    日経電子版ウェブで起きた謎のCDNエラーと Header Overflow この記事は Nikkei Advent Calendar 2020 13日目の記事です。 日経電子版ウェブチームのエンジニアの宮です。普段はサーバ・エッジサイドを主に担当しており、今回はその内のエッジ、CDNについてお話します。 (ところで先月下旬にFastly社のYamagoya Traverse 2020において Fastlyを用いたFeature Togglesの実装についてお話させていただいたのでよければこちらもご覧ください。) 背景と問題 ある日を境目に起きた問題 半年〜1年ほど前、社内の方方から 「ステージング環境にアクセスできない」という問い合わせがありました。 調査に乗り出したものの、自分の環境では特に問題を見受けられず、再現に苦しんでいた記憶があります。 手元の環境で再現しなかったことから、社内

    日経電子版ウェブで起きた謎のCDNエラーと Header Overflow — HACK The Nikkei
    efcl
    efcl 2020/12/27
    Fastlyではリクエストヘッダの数が96コより多いとRequest header count: > 96の設定で弾かれる制約がデフォルトになっている
  • CSS Containment によるパフォーマンス改善 — HACK The Nikkei

    この記事はNikkei Advent Calendar 2020 19日目の記事です。 日経電子版ウェブチームの伊藤です。 この記事では CSS Containment の紹介と電子版での利用例について書きます。 CSS Containment とは 概要 CSS Containment はDOMのレンダリングを開発者側で調整できるようにするパフォーマンス系のプロパティです。 webサイトが効率的にレンダリングされるようユーザーエージェントに伝えることができます。 次のような値を取ります。 contain: none | strict | content | [ size || layout || paint ] プリミティブな値として size, layout, paint があり、strict と content はこれらを複合した値のエイリアスで、それぞれ size layout p

    CSS Containment によるパフォーマンス改善 — HACK The Nikkei
    efcl
    efcl 2020/12/27
    CSS Containmentの`contain: content`によるPaint Timeの改善について。
  • ブラウザ自作・改造のためのリンク集 ($2054162) · Snippets · Snippets · GitLab

    0% Try again or attach a new file . Attach a file Cancel

    ブラウザ自作・改造のためのリンク集 ($2054162) · Snippets · Snippets · GitLab
    efcl
    efcl 2020/12/27
    ChromiumとFirefoxのソースコードについて
  • GraphQL 採用における反省と Apollo Server の運用について

    こんにちは。武田(@tkdn)です。 GraphQLAPI として採用したサービスを今年序盤にリリースしています。具体的な内容は今年の夏サミ 2020 の公募枠でお話させていただいたのでよろしければ資料もご参考ください。 週一でリリースし続けるためのフロントエンドにおける不確実性との戦い方 / Developers Summit 2020 Summer C-4 - Speaker Deck今日は GraphQLApollo Server についての振り返りと反省を中心に供養しておきます。GraphQL 採用に迷いがある開発者、Apollo Server を採用しようとしている開発者へ向けた知見になれば幸いです。 まとめてみたら GraphQL みが思いの外少なくなりましたが、GraphQL Advent Calendar 2020 の 23 日目の記事です。 なぜ GraphQ

    efcl
    efcl 2020/12/27
    BFFとしてのApplo Serverの運用
  • Next.jsのISRを使ってスプレッドシートをデータソースにして業務フローを変えた話 - パンダのプログラミングブログ

    Next.jsのISRを使って業務フローを変えた話 この記事は Next.js アドベントカレンダー 2020 の最終日の記事です。 記事では、Next.js の ISR の機能を使って業務フローを変えた話を紹介します。Incremental Static Regeneration(以下、ISR) とは、Next.jsアプリケーションをビルドしてデプロイした後も、特定のページのみ定期的に再ビルドする機能です。 ISRでのリクエスト先は Google Apps Script(以下、GAS)にしました。GAS でスプレッドシートのデータを返却する API を作成したので、コードも併せて紹介します。 作ったものは書籍の一覧更新を自動化するもの 開発しているサービス「弁護士ドットコムライブラリー」を紹介します 私は仕事弁護士ドットコムライブラリーというサイトを開発しています。このサイトは弁護

    Next.jsのISRを使ってスプレッドシートをデータソースにして業務フローを変えた話 - パンダのプログラミングブログ
    efcl
    efcl 2020/12/27
    ISRでSpread Sheetベースのデータを元にしたビルドの更新
  • Node.js で最近変わりそうな Permission Policy について - from scratch

    さてさて、 25日目の Node.js アドベントカレンダーです。もう年の瀬ですね。振り返りシーズンなんで色々書きたかったんですが、ネタを見つけているうちにこの日になってしまいました。 Permission Policy とは Node.js に新しく Permission を提供しようという試みです。元々 Node.js では同じプロセス内で動いてしまえば どんなモジュールであろうと同じ権限で色々できますね。外部ネットワークにアクセスしたり、ファイルを読み書きしたり。 プロセスに元から許可されている権限は全てできてしまいます。これが今まででは普通でしたが、今後はもしかしたら変わるかも?という話です。 権限に関して制限をかけて、拒否させることが可能です。 以下のような要領で拒絶させることができるようになります。 $ node --policy-deny=net 上のオプションでプロセス内の

    Node.js で最近変わりそうな Permission Policy について - from scratch
    efcl
    efcl 2020/12/27
    Node.jsのPermission Policyについて Deny list方式
  • TypeScript Compiler APIを使って型を中心に実装を自動生成する - ドワンゴ教育サービス開発者ブログ

    この記事は、ドワンゴアドベントカレンダー2020の10日目の記事です。 qiita.com はじめに ベルリシア(@berlysia) という名前で活動しています。Webが好きです。ドワンゴでは、N予備校をはじめとする教育事業のWebフロントエンド開発をしています。 この記事では、Webフロントエンドチームの実際の開発で用いた、TypeScript Compiler APIを使っての型を中心とした実装の自動生成事例を紹介します。考察パートが中心で、コードはほぼ出てきません。 状況説明 管理画面の開発です。検索と結果一覧とCRUD操作が中心で、多くの画面が定型的な実装です。画面数が多いため、いかにこうした定型的な画面を効率よく開発して複雑なところに注力するかが、この開発を成功させるカギとなります。また、人員的にもある程度の並列性を確保している状態です。 APIOpenAPIで仕様が提供され

    TypeScript Compiler APIを使って型を中心に実装を自動生成する - ドワンゴ教育サービス開発者ブログ
    efcl
    efcl 2020/12/27
    TypeScriptの型からフォームのバリデーションコードを自動生成
  • 2で割ることと3で割ること - Qiita

    この記事でお題にするのはCPUレジスタ上の整数除算です。以下、単に除算とも書きます。 除算は非常に高コストな演算なため、コンパイラは最適化によって、できるだけ整数除算を別の計算に置き換えようとします。 最適化ができる場合の一つとして、割る数が定数である場合があります。頭のいいコンパイラは、除算を乗算とビットシフト等を駆使した演算に置き換えます。この記事では、そういった最適化の背景にある理屈を部分的に解説します。 計算機環境としてはモダンなx86 CPUを仮定します。したがってレジスタは32/64ビットであり、負数は2の補数表現になっています。ある程度は他の命令セットでも通用する話になっているかもしれません。 そもそも整数の除算とは プログラミングにおける整数の除算の定義について確認します。整数$n$を整数$d$で割るとき $$ n = q \times d + r $$ が成り立つように除

    2で割ることと3で割ること - Qiita
    efcl
    efcl 2020/12/27
    除算命令は遅いため、乗算で表現する話。 2の倍数と3の倍数。
  • WHATWG Living StandardとHTMLパーサ - Qiita

    この記事はドワンゴ Advent Calendar 2020 最終日の記事です。年の瀬ですね。 はじめに 記事は、WHATWG Living Standardに準拠することを目的としたHTMLパーサである「gammo」の紹介を目的としている。gammoが実現していることを詳細に伝えるため、単なるgemの紹介に留まらず、HTML歴史や昨今のHTMLを取り巻く状況を簡単に解説し、WHATWG Living StandardにおけるHTML文書の解析アルゴリズムについて、実例と共に紹介する。 記事で紹介するgammoの開発に取り掛かった理由は、主に以下の二点が挙げられる。 WHATWG Living Standardに準拠したHTMLパーサをRubyGemsの中から見つけられなかったため。 現在HTMLパーサの機能を持つライブラリの中で、最も利用されていると考えられるNokogiriと比較

    WHATWG Living StandardとHTMLパーサ - Qiita
    efcl
    efcl 2020/12/27
    Pure RubyでのWHATWG HTMLのパーサー実装
  • JavaScript Performance in the Wild 2020 | CatchJS

    Blog JavaScript Performance in the Wild 2020 We rendered a million web pages to find out what makes the web slow We rendered the top 1 million pages on the web, tracking every conceivable performance metric, logging every error, noting every requested URL. To our knowledge this produces the first dataset that connects performance, errors, and library use on the web. In this article we analyze what

    efcl
    efcl 2020/12/27
    https://tranco-list.eu/ のデータを元にサイトをPuppeteerでクロールして集めたパフォーマンスに関するデータセットについて。 Kaggleでデータセットを公開している。 HTTPのプロトコルバージョン、サードパーティリソース、ライブ
  • A research-oriented top sites ranking hardened against manipulation - Tranco

    Tranco A Research-Oriented Top Sites Ranking Hardened Against Manipulation By Victor Le Pochat, Tom Van Goethem, Samaneh Tajalizadehkhoob, Maciej Korczyński and Wouter Joosen Download the latest Tranco list The Chrome User Experience Report and Cloudflare Radar rankings have been integrated into the default Tranco list, starting from the daily updated list of August 1, 2023. The Alexa ranking has

    efcl
    efcl 2020/12/27
    Alexa rankingみたいなトップアクセス数のURLを集めたデータベース