Web 技術解体新書「第二章 Cache 解体新書」リリース
Web 技術解体新書「第二章 Cache 解体新書」リリース Intro 「Web 技術解体新書(Web Anatomia)」の第二章として「Cache 解体新書(Cache Anatomia)」をリリースしました。 これで予定している八章のうち二章が終わりました。 第一章: Origin 解体新書 第二章: Cache 解体新書 Cache 解体新書 以下の Response Header Field がどういう意味を持つか正確に説明できますか? おそらく多くの Web 開発者が一度は見たことがあり、これを「1 時間キャッシュする」という意味で指定している人もおおいでしょう。 では、どこから 1 時間で、 1 時間経ったらなにが起こるのか、これが Response でなく Request に付与されたらどう変わるのか、きちんと把握できていますか? そもそも、一般的にキャッシュ機構における
フロントエンドエンジニアが知るべきキャッシュを理解する
キャッシュは、CPUのバスやネットワークなど様々な情報伝達経路において、ある領域から他の領域へ情報を転送する際、その転送遅延を極力隠蔽し転送効率を向上するために考案された記憶階層の実現手段である。(引用: フリー百科事典『ウィキペディア（Wikipedia）』) こんにちは、@kaa_a_zu です。私たちエンジニアは、「キャッシュ」というワードをよく口にしています。それはインフラの設計をしている時かもしれないし、表示されるコンテンツが変わらない時かもしれないし、パフォーマンスの改善をしている時かもしれません。普段何気なく使っている「キャッシュ」とは一体何なのでしょうか。この記事は、そんな「(Webフロントエンドを触るエンジニアが知るべき)キャッシュ」について、どんなものがあるのかがちょっと分かったという状態になることを目的に書いています。
Barcode Detection API - Web APIs | MDN
Support for barcode recognition within web apps unlocks a variety of use cases through supported barcode formats. QR codes can be used for online payments, web navigation or establishing social media connections, Aztec codes can be used to scan boarding passes and shopping apps can use EAN or UPC barcodes to compare prices of physical items. Detection is achieved through the detect() method, which
サードパーティ Cookie 廃止に関するタイムラインの変更について
6 月 25 日にChrome におけるサードパーティ Cookie のサポートを段階的に廃止する計画のスケジュールを含む、「プライバシーサンドボックス」の最新情報を公開しました。取り組みを進めていく中で、この計画を正しく実施するためには、デジタル広告のエコシステム全体でさらに時間が必要なことがわかってきました。 「プライバシーサンドボックス」は、利用者のプライバシーに配慮しつつ、誰もがアクセスできる自由で開かれたウェブ環境を維持できるよう、デジタルビジネスを構築するツールを提供する技術の開発を目指すものです。これを実現するには、エコシステムに携わるコミュニティが一丸となり、ウェブのプライバシーを根本的に強化する開かれた基準をもち、データがどのように利用されるかについての透明性を高め、管理権限をユーザーが持つ必要があると考えています。 そのためには、適切な解決策に関する開かれた議論、規制当
Web のセマンティクスにおける Push と Pull | blog.jxck.io
Intro 筆者は、 Web のセマンティクスに対する実装の方針として、大きく Push 型の実装 と Pull 型の実装 があると考えている。 もっと言えば、それは実装方法という具体的な話よりも、開発者のセマンティクスに対する態度を表現することができる。 この話は「Push よりも Pull が良い」などと簡単に切り分けられる話ではない。 「自分は今 Push で実装しているのか、 Pull で実装しているのか」この観点を意識するかしないかによって、セマンティクスに対する視野が広くなり、その応用として、たとえば今自分が行っている実装が、将来の Web においてどのような互換性の問題を生じるかなどを想像できるようになるだろう。最近問題になる Ossification を、こうした視点の欠如の結果とみることもできる。 (本エントリでの Ossification は、一般に言われている Pro
フロントエンドウェブ開発者 - ウェブ開発を学ぶ | MDN
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
MutationObserver - Web APIs | MDN
// Select the node that will be observed for mutations const targetNode = document.getElementById("some-id"); // Options for the observer (which mutations to observe) const config = { attributes: true, childList: true, subtree: true }; // Callback function to execute when mutations are observed const callback = (mutationList, observer) => { for (const mutation of mutationList) { if (mutation.type
最近のモダンなWebサービス開発の構成について調べるメモ
ここのところ雑にWebサービスをリリースする機会が減って最近はFlutterでネイティブアプリばかり書いてるのでWebの最新に追いつけてない。 最近の流行りのWebサービス開発について自分の必要そうな範囲でちょっと調べてみる。 自分の場合、フロントエンドはTypeScript+(Vue or Nuxt)でやって、サーバーサイドはRailsで書いちゃうことがまだ多い。 これでもなんとかなるけど、もうどうせならJSで一気通貫でフロントエンドとサーバーサイドを書ければ楽なのにと思いつつある。 パッと思いつくのはTypeScriptでフロントエンドをNext,Nuxtあたりでやって、バックエンドAPIをexpressとかサーバーレスAPIを適当に書くとかだけど、今だともっと良い方法ありそう。 本当はDartでサーバーサイド、FlutterでwebまでいければDart統一時代になって願ったり叶ったり
Origin 解体新書
Web 技術解体新書 第一章 Origin 解体新書 Same Origin Policy とは Web において非常に重要なセキュリティモデルの 1 つだ fetch や XHR でリクエストを送信したときに、 CORS 違反で失敗したり、 Preflight という謎のリクエストが送信されたりして悩んだ経験があるかもしれない。これらは全て、ユーザを保護するために設けられた Same Origin Policy という制限を、ブラウザが遵守した結果なのだ。 本書はこの重要な Origin という概念について、そもそもなぜそんなものが必要なのかという背景や、それがユーザを保護するメカニズム、 JSONP はなぜ危険なのか、 Preflight が飛ぶ理由、 Service Worker など新しい API との連携、 Spectre によって発覚した脆弱性と CORP,COOP,COEP,
「Web 技術解体新書」執筆について
「Web 技術解体新書」執筆について Intro 「Web 技術解体新書(Web Anatomia)」という書籍の執筆と、 zenn 上での販売についてアナウンスします。 各章を分割して執筆し公開していく予定です。 第一章: Origin 解体新書 Web 技術解体新書とは Web というものを正しく理解するために必要な知識や技術は日増しに増え、それに従い学ぶためのコストもかなり上がってきています。 一方で、多くの書籍や雑誌、 Web 上の記事、動画や音声コンテンツは充実しており、学ぶための手段もかなり広がっています。 しかし、 Web に関わる技術書籍の多くは、何らかのフレームワークの解説や、 JS/CSS などの特定技術、特定の非機能要件に特化したものが多く、(その括りの曖昧さ故) Web という括りで書かれたものはあまりありません。 あったとしても、多くは初心者向けなものが多く、ある
個人サイトについて
なぜ個人でウェブサイトを運用しているのかについて、整理しておきたい。 要約すると、以下の理由でやっている。 ウェブの技術を学べて費用対効果が高いから 表示されるコンテンツを制御したいから フィードバックの場と適切な距離を置きたいから かっこいいから コスパが高い 個人でウェブサイトを持って運用していくことは、学習意欲の高い多くの人にとって費用対効果の高い活動だと思う。 ほとんどの技術が無料で利用できる時代になってきているので、ここで言う費用というのは時間や労力のことで、効果というのは得られる知識のこと。その仕組みを用意するにあたって、ウェブサイトというものがどういう仕組みで動くかということが、一通り理解できる。この辺の分野を本職とするような人であれば、こういうことは最低限理解しておいてほしいし、何なら採用面接でもこういったことを質問する・される機会がある。 学習コストについて述べたけれど、
閉じ始めたウェブ、把握できないものが増え、しかしそれこそが重要になってきた - 株式会社真摯
ウェブは少しずつ閉じ始めてきました。オープンウェブからクローズドアプリへというテーマは、iPhoneやFacebookが普及し始めた2010年頃から言われ始めましたが、2020年には「閉じた要素」が多く揃いました。 ウェブは閉じた方向に向かっています（もちろん現実世界との接続など拡大もしていますが）。私たちは、ビジネスを動かしたり分析や改善を行ったりするとき、閉じ始めたウェブにも向き合わなければなりません。 以下の6つの項目に沿って話を進めます。 囲いの中での行動を優遇し始めたプラットフォーム 非公開アカウントとクローズドコミュニケーションの増加 エンゲージメントの一定量を非公開アカウントが占める ウォールドガーデンやペイウォールは一般的に Cookieベースの計測の制約や限界、個人情報を尊重した計測 国境が見え始めたインターネット 閉じ始めたウェブの世界 囲いの中での行動を優遇し始めたプ
Webブラウザ上で純粋なHTTPだけで単方向リアルタイム通信を可能にするHTTPのストリーミングアップロードが遂にやってくる - nwtgck / Ryo Ota
Web標準のHTTPクライアントfetch()でストリーミングしながらアップロードできるようになる。
Real World HTTP 第2版
TOPICS Web 発行年月日 2020年04月 PRINT LENGTH 496 ISBN 978-4-87311-903-8 FORMAT PDF EPUB 本書はHTTPに関する技術的な内容を一冊にまとめることを目的とした書籍です。HTTPが進化する道筋をたどりながら、ブラウザが内部で行っていること、サーバーとのやりとりの内容などについて、プロトコルの実例や実際の使用例などを交えながら紹介しています。GoやJavaScriptによるコード例によって、単純なHTTPアクセス、フォームの送信、キャッシュやクッキーのコントロール、Keep-Alive、SSL/TLS、プロトコルアップグレード、サーバープッシュ、Server-Sent Events、WebSocketなどの動作を理解します。 第2版ではHTTP/3の規格化など、初版の発行後に起きたウェブ技術への変化にともなう内容のアップデ
情報採餌：ユーザーがWebをどのように移動するかの理論
情報採餌とは 情報採餌は、ユーザーが情報ニーズを満たすためにWebでどのように移動するかの基盤をなす理論だ。基本的には、ユーザーが特定の情報を目標としている場合に、情報源の候補から抽出できる情報をその抽出にかかるコストに照らし合わせて評価して、以下の利益率が最大になる1つまたは複数の情報源の候補を選択することをいう： 利益率＝情報価値／その情報の取得に関連するコスト つまり、ユーザーはわからないことがある場合にどのWebページにアクセスするべきかを、（1）そのページが自分の疑問に回答を与えてくれる可能性がどのくらいあるか、さらに、（2）そのページにアクセスした場合に回答を得るのにどれくらいの時間がかかるか、に基づいて決定する。 （動物行動科学では、同様の最適化が動物の採餌に当てはまることが示されている。よって、この最適採餌理論がPirolli とCardのインスピレーションの源となったとい
Webの仕組みとWebサーバの構造
本格的なWebサイトを立ち上げるなら、インターネットの基幹技術およびWebサーバの動作や仕組みを理解しておく必要がある。そこで、名前解決やURLの処理方法からWebサーバの仮想ディレクトリ、MIMEまで、ここで基礎的な知識を再確認しておこう。 第1回でApacheの特徴について紹介したところ、思いのほか多くの方に見ていただいたと聞き、Apacheへの注目度の高さを再認識している。本来ならば、ここでインストール方法や設定方法、開発手法などを紹介するところなのだが、それは少しの間お待ちいただきたく思う。そうした話よりも先に、それらの知識の基礎となる部分を再確認しておきたいからだ。 上級者にとっては、既知の内容となるかもしれないが、今回はご容赦いただきたい。 Webサーバの基本的な動作 前回の内容の繰り返しとなるが、Webサーバの基本的な動作は、大きく分けて2種類しか存在しない。Webブラウザか
集中力を欠くWeb閲覧者に向けたライティングテクニック
PaulはUXのデザイナーでありデジタルトランスフォーメーションの専門家です。彼はユーザーを促進するためのウェブやソーシャルメディア、モバイルの活用を、非営利やビジネスの分野で手助けしています。 ユーザーがWebページをすべて読むことは滅多にありません。したがって、Webに文章を書く際には、少し違った書き方をする必要があります。つまり、集中力を欠いたユーザーに対応した書き方です。 もしかしたら、あなたもこの記事の大部分を読まないかもしれません。実際、ユーザーは平均的にWebページの約28％しか読まないのです。人々の記憶に残るような説得的な記事を作る余地はあまり多くありません。 人々の注意が向かないので、Webで文章を書くことは大変な作業です。『優れたWebのコピーライターが気をつけている７つのこと』という記事でも述べたように、どんなに優れたライターであっても、Web上で何かを伝えるのには苦
本当は速くならない「Webサイトの表示高速化アンチパターン」10選｜榊原昌彦
ベストプラクティスや「高速化につながる！」と紹介されている記事では、逆効果、もしくは効果があるシチュエーションがあまりに限定的な手法が紹介されていることが多いので、アンチパターンとして紹介します。 本記事は「Webパフォーマンス Advent Calendar 2019」2日目の記事です。 https://qiita.com/advent-calendar/2019/web_performance 本記事はWebパフォーマンス高速化の専門家である株式会社Spelldataの竹洞 陽一郎氏にアドバイスをもらいました。HTTP/2の伝送の画像など一部資料のご提供もいただいております。誠にありがとうございます。 https://spelldata.co.jp/ ほとんどの場合で間違い 1. すべての画像をCSSスプライトその昔、画像をすべて1枚にまとめて、DOMのbackground-image
クソ酷いウェブサイト
他に何がほしいってんだ、クソ野郎 お前はウェブサイトを作ってその糞サイトを最高だと思ってるんだろ？ お前は13MBに及ぶパララックスエフェクト付きのクソ重いページがアホらしいグッドデザイン賞をとるとでも思ってるんだろ？ お前は20kgあるjQueryファイルと83個のpolyfilがIE7をまともに動作させると思ってるんだろ？ どアホ、お前は間違っている。俺様が俺の考える最強のウェブページを教えてやる。 クソ軽量でクソ速いページ 全てのデバイス幅に対応できる どんなうんこブラウザでも見た目が一緒 お前のサイトに訪れるどんな糞野郎でもアクセス可能 読みやすく伝えたいことが明確（もっともお前が5MBサイズのシャレオツなコーヒー写真ではなくて伝えたいことがあればの話だがな） よく聞け、糞野郎ども お前らはハッキリ言ってオーバー・デザインだ。この史上最強のウェブサイトを見てみやがれ。俺がごみコンテ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
same-site/cross-site, same-origin/cross-originをちゃんと理解する
