Nikkei achieves a new level of quality and performance with their multi-page PWA | web.dev
Nikkei achieves a new level of quality and performance with their multi-page PWA Stay organized with collections Save and categorize content based on your preferences. With a publishing history of more than 140 years, Nikkei is one of the most authoritative media businesses in Japan. Along with their print newspaper, they have over 450 million monthly visits to their digital properties. To provide
AMPキャッシュのURL問題を解決するSigned HTTP Exchangeの試験運用をGoogleが開始
[レベル: 上級] Google は、Signed HTTP Exchanges のオリジン トライアル（試験運用）を開始しました。 AMP が抱える問題を解決する Signed HTTP Exchanges 高速化のためにキャッシュを配信する AMP には、たとえば次のような問題が依然として残っています。 AMP キャッシュを表示した場合はオリジンのドメイン名ではなく AMP CDN キャッシュサーバーのドメイン名を使った URL が表示される キャッシュ CDN サーバーからコンテンツが配信されるため Cookie の受け渡しに支障があり、正確なアクセス解析を難しくする Signed HTTP Exchanges を実装すると、たとえキャッシュであったとしてもオリジンのドメイン名から配信したコンテンツであるかのように扱うことができます。 上で挙げたような問題を根本から解決できます。 U
スマートフォン用サイトを制作するデザイナーさんに伝えたいWebブラウザのViewport(表示領域)の話。エンジニアにも役立つかも。 Part2｜Takumi Hasegawa (unshift)｜note
スマートフォン用サイトを制作するデザイナーさんに伝えたいWebブラウザのViewport(表示領域)の話。エンジニアにも役立つかも。 Part2 今回は ・少し厄介なランドスケープ時のViewportの高さの話 ・かゆいところに手が届きそうで届かないCSSのvw/vhの話 ・これまた厄介なアプリ内ブラウザ (WebView)でのvhの話 の三本立てでお送りしたいと思います。 ・・・ 少し厄介なランドスケープ時のViewportの高さの話Webコンテンツ閲覧中に、スマートフォンを横向きで使うシチュエーションって個人的にはそんなにないですが、全画面 (html, bodyのwidth, heightが100%)のコンテンツだったり、キービジュアルをViewportに合わせた大きさにする、といったようなコンテンツではランドスケープ時の挙動に注意が必要です。 Android Chromeの場合 A
静的サイトを公開するならどこがいいの？ #技術書典 - Crieit
静的サイト（PHPやRubyなどのサーバープログラムを走らせない環境でのWebサイト）でSPAを公開するにあたって、運用・配信（ホスティング）するならどこがいいかと最近聞かれまして、その際の回答を技術書典の宣伝も兼ねてブログにしたためます。 今回は次の４つで比較しています。 GitHub Pages Firebase Hosting GitLab Pages Netlify 上記４つはどれも独自ドメインの設定とSSL対応が無料で行うことが出来ます。 ※比較的初心者に向けて書いている前提です。 AWS S3やGCP等の利用は初心者がいきなり設定を行うには項目が多いため除外しています。 レンタルサーバーも基本料金が発生し、スケール・管理し辛いため今回は除外しています。 また、少し機能について説明が必要な部分があるので、先に説明を書きます。 Rewrite設定について 静的サイト化したSPAを公
React製のSPAのパフォーマンスチューニング実例
カギは社内事例にあり！？システム効率化を超えて運用ミスを激減させた件 2024.09.02 コーポレート 業務改善 業務設計 社内ICT
Webページの高速化/最適化まとめ - Qiita
おはこんばんちは、渋谷でお掃除してる人です。 はじめに 自社サービス、ランディングページ、企業ホームページのようなWebサイト（Webページ）において何が一番大切かと聞かれれば、その答えは表示速度です。 ええ、仰りたいことは大いにわかります。もちろんコンテンツも大事です。 ですが、どれだけコンテンツが良くて魅力的な商品だったとしても、表示されなければ意味がありません。 人間という生き物は、Webページが表示されるまでたったの2秒しか待てません。 ウルトラマンでさえ3分間も待てるこのご時世に、たったの2秒です。 その2秒によって、汗水流して作りあげたみなさんのコンテンツが人目につくこともなく、消えていくのです。 というわけで Webページを高速化する上で大切なことをちょっとだけ紹介します。 この記事を読み終わる頃には、ちょっとだけ高速化に詳しくなって、ちょっとだけPageSpeed Insi
ビルド設定編: UA に応じた最適な JS バンドルの配信と webpack との距離感（新規開発のメモ書きシリーズ2）
たくさんある道具をどのように組み合わせるか 今回はコード設計編のつもりでしたが、ビルド周りを先にまとめることにしました。主にパフォーマンス上の都合ですが、心がけたポイントは次の点です。 画一的なバンドルではなく、適切なバンドルを選択的に配信できるようにする 適当な粒度で Code Splitting できるようにする ひとつのツールに何でもかんでもやらせない（ webpack、お前のことだよ！） ビルドのパイプラインを短く、シンプルに済ませる（できることを全てやろうとしない） タスクランナーは前回述べた通り make を利用しています。同僚が使っているのを見てパクりましたが Self-Documented Makefile の手法が、タスク名忘れに優しくてよかったです。 npm run したら npm scripts が一覧で出てくるのと似たようなやつです。 このシリーズの他の記事はこちら
Introduction · Webフロントエンド パフォーマンス改善ハンドブック
Webフロントエンド パフォーマンス改善ハンドブック このパフォーマンス改善ハンドブックでは、ウェブアプリケーションにおけるフロントエンドのパフォーマンス改善について扱っています。 ダウンロード版 埋め込み動画を再生できないなど一部制限がありますが、ダウンロード版を配布しています。 PDF版 EPUB版 MOBI版 目的 このハンドブックでは過去に行った改善の事例を中心に紹介しています。 そのため、現在の最適な解決方法を提案するものではありません。 また、アプリケーションによっても最適な解決方法は異なります。 今回の事例ではViewライブラリにReactを使い映像再生プレイヤーなどある程度複雑な機能を持ったウェブアプリケーションのフロントを扱います。 具体的にはニコニコ生放送（以下「生放送」）で行った事例を中心に書かれています。 開発と平行して行われていたため、React 15から16の間
Vue.jsとHTMLとCSSで3Dアクアリウムを作ってみた - Crieit
ブラウザで見ることができる3Dアクアリウムを作ってみました。 この3Dの実装は基本的にはHTMLとCSSだけで出来ています。canvasも使っていません。Vue.jsも使っていますが、魚を泳がせたり視点を変更するための用途のため、3D描画自体にはあまり関係ありません。 記事の最後に操作できるCodePenを配置してあるので読むのが面倒な方はそちらを見てしまってください（大泣きしながら）。 作り方 HTML HTMLは単にそれぞれの素材を配置しているだけです。 <div id="app" @mousemove="onMouseMoved" @touchmove="onMouseMoved"> <div class="container" :style="rotation"> <img class="bg" src="bg.jpg"> <img class="water front" src=
Chrome に PWA for Desktop が来ていたので next-editor で試した - mizchi's blog
追記: Canary じゃなくてもいいらしいのでタイトル修正した。が…実装具合はよくわからない 今年中に来るとは聞いていたやつ。要はウェブアプリを デスクトップアプリ化する。Electron と違って Chrome の Sandbox と同じ権限で動いている Twitter Lite をデスクトップ PWA にして使ってるんだけど、最 & 高です。 Mac だと Chrome Canary で enable-desktop-pwas のフラグを立てると使えます。 pic.twitter.com/0TPhe8gyQL— Eiji Kitamura / えーじ (@agektmr) 2018年7月12日 ちなみに Chrome Canary + フラグは上級者向けなので、自身のない方はいましばらくお待ち下さい。そのうち安定版で普通に使えるようになります。— Eiji Kitamura / えー
🌏 Hello World! Progressive Web-Blog!! ― ウェブボウズ
🔥 2022年にサイトの作りを変えまして、もう現状はこの記事の限りではありません。もしこちらの記事の実装を参照されるのであれば こちらのブランチ を参照ください。 これで何度目の挑戦でしょうか。記憶する限り、２年ぶり１０度目くらいのブログでございます。会社のパイセンの@ymotongpooさんは１２年もご自身のブログを継続されており、日々コンテンツとその作業に耐えうるだけの筋肉を増やし続けられているのを横目に、私はといえば過去に１年以上続いた書きものは日記も含めて一切なく、ブログはというと思い返してみれば2004年ごろのライブドアブログから始まり、辞めては乗り換え辞めては乗り換えを繰り返してきた挙句、最終的にはJekyllいじったあたりでさっぱり音信不通になったのが２年前。並びに、筋肉事情に関して申し上げると、最後にジムに行ったのも気づけば１年半が経っており、会員権が腐り始めている小太り
Polymerライブラリ - Polymer Project
PolymerライブラリはCustom Elementsを作成するための機能一式を提供します。これらの機能は、標準のDOMエレメントのように動作するCustom Elementsを迅速かつ容易に作成できるように設計されています。標準的なDOMエレメントと同様、Polymer Elementでは以下のようなことが可能です。： コンストラクタまたはdocument.createElementを使用して命令的にインスタンス化する。 属性またはプロパティを利用してエレメントの設定を行う。 各インスタンス内部にDOMを追加する。 プロパティや属性の変化に応じて処理を行う（オブザーバー）。 内部のデフォルトや外部からスタイルを設定する。 内部の状態を操作するメソッドに応答して処理する。 Polymer Elementの基本的な定義は以下のようになります。： <dom-module id="x-cust
表示速度が“爆速”なサイト、相次いで登場 その背景は
ページの読み込み速度が“爆速”のサイトが相次いで登場している。2017年後半、日経電子版がリニューアルし「表示速度を従来比2倍に」と発表した他、米国のプログラマー向けコミュニティーサイト「dev.to」の表示速度が「速すぎて不安になるレベル」と話題を呼んだ。米Googleによれば「モバイルサイトでは読み込みに3秒以上かかると訪問者の53％が離脱する」といい、表示速度の改善が「長く滞在してもらう」一助になるようだ。 こうしたサイトが利用しているのがCDN（Content Delivery Network）という技術だ。なぜ速くなるのか、CDNを提供しているファストリー（米Fastly日本法人）のチュクロ・ダグ代表取締役、松田未央シニアセールスエグゼクティブに聞いた。 CDNの基本的な仕組みは？ ユーザーがインターネットを経由してWebサイトなどコンテンツを見に行くとき、ユーザーとコンテンツの
The DEV Community
The Next DEV Challenge is Here 🚀 Join us for the Wix Studio Challenge with Special Guest Judge Ania Kubów: $3,000 in Prizes!Running through July 07, the Wix Studio Challenge provides an opportunity to develop with one of the most popular and in-demand website building solutions the internet has to offer. There is one prompt for this challenge, and one way to win the entire $3,000 prize pool. 🙀 C
実装を引き受ける前に詰めておくべきWebフロントエンドの想定漏れチェックシート - Qiita
リキッドレイアウトのように幅が常に変動するレイアウトのデザインは、動かないカンプからは実際の挙動が読み取れず、デザイナーの意図が汲み取りきれないことが多い。また、複雑化するアニメーションの実装においても、カンプだけではコミュニケーションに不備が生まれてしまう。ほかにも、CMSを使った案件ではデザインカンプと実際のデータの間に齟齬がある可能性もある。 実装効率を高めてスケジュール通りに仕事を終わらせるには、とにかく事前に仕様を固めることが大事だ。ワイヤーフレームやデザインの途中の段階からなるべくデザイナーとコミュニケーションを重ね、想定外の要件が発生しないように気をつけるべきだろう。 この記事では、デザイナーやフロントエンドエンジニアが見落としがちなWebフロントエンドの課題について列挙していく。 ホバー表現を後から指示される ツッコミ 後から仕様追加されると困るから先に決めて! メモ 最近
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Home | web.dev
Chrome Platform Status
Frontend Weekly Vol.194 – Frontend Weekly
Vue.jsの関連ツール・ライブラリ(Vuex, Vue-Router, Nuxt)
2018年のフロントエンドエンジニアを取り巻く課題とチャレンジ
