SPA view transitions land in Chrome 111 | Blog | Chrome for Developers
The View Transition API lets you update the DOM in a single step, while generating an animated transition between the two states. Transitions created with the View Transition API. Try the demo site–Requires Chrome 111+. These kinds of transitions were a frequently-requested feature from developers, including me, and I think we've managed to land it in a way that balances good defaults with extensi
【Chrome】flags設定とおすすめ機能20選｜ブラウズの高速化と便利機能を試用する方法 | WindowsFAQ
Google Chromeで、flags（試験運用版の機能）を有効にする方法を教えてください。 概要 Chromeでアドレスバーに"chrome://flags/"と入力すると、実験的な機能一覧が表示されます。そこから任意の機能を選択して試用することが可能です。ただし、これらの機能は正式なものではなく、使用には注意が必要です。 対象OS Windows10、Windows11 flags（試験運用版の機能）とは？ Chromeには、多くの隠された機能（試験運用中の機能）が存在します。これらのflags（フラグ）を有効にすることで、標準設定では利用できない実験的な機能を試すことができます。flagsの中には、実用性が高く、便利なものも含まれています。これらの機能を有効にするには、flagsの設定ページを開く必要があります。表示されたリスト内のプルダウンメニューから、Enabled（有効）ある
Next.jsはどうやってスクロール位置を復元するのか
Next.jsにはexperimental(実験的機能)でscrollRestorationというフラグが存在します。 // next.config.js const nextConfig = { // ... experimental: { scrollRestoration: true, }, } module.exports = nextConfig デフォルトでもブラウザ側でスクロール位置を復元してくれることもありますが、Safariでは復元されなかったり、ChromeでもgetServerSideProps利用時にはこのフラグを有効にしないとスクロール位置が復元されないなど不安定な状態です。最近この辺りについて識者の方々から色々ご教示いただき、自分では気付けないような部分の知見も多く得られたので、備忘録兼ねてscrollRestorationが何を解決しようとして、どう実装されて
“unsafely-treat-insecure-origin-as-secure” の設定をGUIで行う方法について - Qiita
getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins for more details.
Chrome拡張機能をmanifest v3で開発した簡易記録とハマりポイントの解消方法 - 雑多に技術メモと他色々
Chromeの拡張機能（プラグイン）を自作で作ってみたので、色々書く。 やってみたこと やった結果 動かせたの？ 開発した時の環境 ハマりポイントと解消方法の一覧 そもそも拡張機能を作るために必要な構成や作るべきファイルがわからない 開発成果物のそれぞれの役割がよくわからない 自作したChrome拡張機能の取り込み方法がわからない ツールを修正した時の取り込み方法がよくわからない service_workerが動作しない原因がわからず、デバッグもできない content_scriptsに指定したcssの参照先画像(URL)にアクセスできない 拡張機能アイコンクリック時の動作が定義しても動かない service_workerで外部jsが使えない 自作した拡張機能用HTMLでonclick属性が動作しない Local Storageから読み込んだ情報が想定外にObjectになった Javasc
DevFest 2021 Web Session_UIT編
よしこ@yoshiko_pg Google Developer Experts for Web 2022.03.25 UIT Meetup vol.15 Relearn Modern Web Standard 今までああ書いてたアレ、これからはこう書けそう About Speaker よしこ - @yoshiko_pg 株式会社ナレッジワーク フロントエンドエンジニア 2021年10月からWebのGDEになりました。 SPAでGUIツールを作るのが好きです。 About Session このセッションについて Webフロントエンド開発で頻出するパターンの中で、専用の仕様がなかったために 既存の仕様を使って工夫して実現していたようなものがありました。 日々新しく提案・実装されていくWebの仕様の中で、モダンブラウザでの実装も進んでおり、 利用したくなる機会も多そうなものについてbefore/
Webブラウザ上で純粋なHTTPだけで単方向リアルタイム通信を可能にするHTTPのストリーミングアップロードが遂にやってくる - nwtgck / Ryo Ota
Web標準のHTTPクライアントfetch()でストリーミングしながらアップロードできるようになる。
様々なファビコンを一括生成
favicon.ico,apple-touch-iconなど様々なブラウザやデバイスに対応したファビコンをまとめて生成。 使い方はとってもシンプル。画像を1枚指定するだけ。面倒な設定不要。 favicon.ico、icon*.png、android-chrome*.png、apple-touch-icon*.png、site-tile*、manifest.jsonを一括生成します。 エラーログに余計な404 not foundを記録させない対策としても有効。PWAのアイコン作成にも。 <meta name="msapplication-square70x70logo" content="/site-tile-70x70.png"> <meta name="msapplication-square150x150logo" content="/site-tile-150x150.png"> <
Payment Request API の仕組み | Articles | web.dev
Payment Request API の仕組み コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 Payment Request API ユーザーが販売者のウェブサイトで購入しようとすると、支払い情報と、必要に応じて配送設定などの情報の提供をサイトからユーザーに求める必要があります。Payment Request API（PR API）を使用すると、この操作を簡単かつ迅速に行うことができます。 基本構造 PaymentRequest オブジェクトの作成には、お支払い方法とお支払いの詳細という 2 つのパラメータが必要です。また、3 つ目のお支払い方法のパラメータは省略可能です。次のような基本的なリクエストを作成できます。 const request = new PaymentRequest(paymentMethods, paymentDetails);
Browser-level image lazy loading for the web | Articles | web.dev
Browser-level image lazy loading for the web Stay organized with collections Save and categorize content based on your preferences. You can use the loading attribute to lazy-load images without the need to write custom lazy-loading code or use a separate JavaScript library. Here's a demo of the feature: Lazy-loaded images load as the user scrolls through the page. This page walks through the detai
History: scrollRestoration property - Web APIs | MDN
One of the following: auto The location on the page to which the user has scrolled will be restored. manual The location on the page is not restored. The user will have to scroll to the location manually.
chrome devtools の tips N連発 - mizdra
mizdra.icon が社内向けに発表した資料なのですが、折角なので一般向けに書き直して公開します。
Muzli - Design inspiration hub
Designers' Secret SourceThe best design inspiration - expertly curated for you.Muzli is a new-tab browser extension that instantly delivers relevant design stories and inspiration to keep you in the loop. More about Muzli Get Muzli for Chrome Dennis SnellenbergFreelance Designer & Developer, Awwwards judge“When I just started with design Muzli helped me to get more reach and followers. The Paralla
Getting to Know Puppeteer Using Practical Examples
Getting to Know Puppeteer Using Practical Examples July 13, 2019 17 min read An overview, concrete guide and kinda cheat sheet for the popular browser automation library, based on Node.js, which provides a high-level API over the Chrome DevTools Protocol. Puppeteer is a project from the Google Chrome team which enables us to control a Chrome (or any other Chrome DevTools Protocol based browser) an
Chrome 48で印刷用CSSのスタイルを確認する方法
以前書いた記事でChrome DevToolsでの印刷用CSSのスタイルの確認方法を紹介したのですが、Chrome 48で方法がだいぶ違っていたのでアップデート版を掲載しておきます。 以前の記事の時はChrome 43でOSはYosemiteでした。今回は、Chrome 48でEl Capitanになります。 Chrome DevToolsを開く（⌘ + ⌥ + I） DevToolsの右側のメニューをクリックします 「More tools」から「Rendering settings」を選択します 「Emulate print media」にチェックを入れます DevToolsを開いたらescキーでConsoleを開いて、左端のメニューから「Rendering settings」を選ぶという方法もあります。 Firefox 43 当時のバージョンは33でしたが、43になった今でもやり方は変
SameSite Cookie
SameSite cookieについて話をしました。 CookieにSameSiteを付けることでCSRFを防ぐことができます。Chrome 80からはSameSite=Laxがデフォルトになります。 以下の記事を参考にしました。 Cookie の性質を利用した攻撃と Same Site Cookie の効果 | blog.jxck.io ( https://blog.jxck.io/entries/2018-10-26/same-site-cookie.html ) Cookie の SameSite=Lax をデフォルトにする提案仕様 - ASnoKaze blog( https://asnokaze.hatenablog.com/entry/2019/05/09/005513 ) SameSite Updates - The Chromium Projects ( https://w
DevTools を開いたら人類滅亡 - Qiita
詳細は GitHub の README.md を見てね！ どんな力を使ったの？ devtools-detect というライブラリを利用して、 DevTools の表示/非表示の切り替え発生時に呼び出される EventListener で、 DOM のクリアと共に YouTube の人類滅亡動画をコンテンツエリアいっぱいに引き伸ばして自動再生させています。 devtools-detect とは一体…？ devtools-detect は実装自体シンプルなので、興味があれば直接見てもらっても良いですが、 一番重要なのは下記条件文で DevTools の表示/非表示の切り替えを検出している点ですね。 var isLongOuterWidth = (window.outerWidth - window.innerWidth > 160); var isLongOuterHeight = (wind
Chrome Developer Tools Not Working - Deep in the Code
Recently I had to replace my Windows PC at work, and as a result, had to reinstall all of my applications, including Google Chrome. When I tried to open Chrome Developer Tools using the F12 key, nothing happened. The Inspect option seen when right-clicking on a web page was grayed out. I opened the drop-down menu to try to open DevTools from there, and that option was also grayed out. Several sear
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Honey
GitHub - GoogleChromeLabs/comlink: Comlink makes WebWorkers enjoyable.
