Chrome 111 の View Transitions API でリッチなページ間トランジションを実現する
Chrome 111 は CSS の色関数 や 三角関数の追加 など、目を引く更新が多いですが、中でも View Transitions API は、Web アプリの UX 向上という観点で、高いポテンシャルを秘めた API です。 この記事では、この View Transitions API について、実装例・実用例を交えて概説します。 View Transitions API とは View Transitions API は、『画面の更新前後の異なる DOM 要素間のトランジションを、簡素な記述で実現』 する API です。 PC および Android の Chrome 111 以上、または Edge 111 以上 で使用できます。 つまりどういうこと？ モバイルのネイティブ App には、以下のように、 『ページ遷移が発生したとき、同じ要素がページをまたいで移動する』 ような、リ
Scroll To Text Fragment と :~:text | blog.jxck.io
Intro ページ内の特定の位置へのスクロールは、 URL フラグメントと HTML の ID 属性を用いて行われていた。 しかし、 ID を持たない要素へのスクロールというユースケースをカバーするために、フラグメントの拡張仕様が提案されている。 Chrome がフラグ付きで実装しているため、この仕様の特徴について解説する。 id 属性とフラグメント 従来の仕様では、 HTML 内にある ID 属性を URL フラグメントに付与することで、その要素まで自動でスクロールするという仕様になっていた。 https://html.spec.whatwg.org/multipage/browsing-the-web.html#try-to-scroll-to-the-fragment https://html.spec.whatwg.org/multipage/browsing-the-web.ht
ChromeのCookieをプログラムから使う - それマグで！
ブラウザと同じCookieを使えたほうが便利なことも多い。 ログインを解析してCookieを発行できないサイトも今後増えるだろうし。PhantomJSでChromeをオートパイロットして、その結果を使うこともあるだろう。 ChromeのCookieの場所 Mac OSX の場合、ここにCookieがおいてあります。 ~/Library/Application\ Support/Google/Chrome/Default/Cookies sqlite3なChrome のCookie。 chromeはSqlite3の塊です。Cookieにも使われています。 cookieのデータベースを開く sqlite3 ~/Library/Application\ Support/Google/Chrome/Default/Cookies ChromeのCookieのテーブル構造 ChromeのCookie
DevTools Author | A selection of author settings for Chrome Developer Tools
Getting Setup Install DevTools Author from Chrome Web Store Enable DevTools experiments in (copy below in to omnibox) chrome://flags/#enable-devtools-experiments Open DevTools (cmd + opt + I); Settings > Experiments > check Allow custom UI Themes. /* A restart of Chrome is necessary for flags to take effect. */ /* After restarting DevTools, you should see the default theme 3024 take affect within
Chromeユーザー向け：タブを沢山開くタイプの人に便利な拡張機能 8 - NxWorld
自分はメインブラウザでChromeを使用しているのですが、調べものをしている際やブログでまとめ記事を作成する際はタブを沢山開くことが多々あります。 そこで今回は同じようにChromeユーザーで、普段からタブを沢山開いていることが多いという人には特に便利だと思う拡張機能を紹介します。 拡張機能は便利ではありますが入れすぎてしまうとそれが原因で動作が重くなったりと逆にストレスになることもあるので、現在も紹介している全ての拡張機能を使用しているというわけではないですが、紹介するのはいずれも普段から自分が使用しているものや過去にしばらく使用したことがあるものになるので、まだ使ったことがない拡張機能があれば是非使ってみてください :) OneTab 自分が今回紹介している中でもかなり使用頻度の高い拡張機能のひとつがこの「OneTab」で、有効化後に追加されるアイコンをクリックするだけで現在開いている
任意のイベントオブジェクトを Web ブラウザのコンソールに出力する monitorEvents が便利 - Qiita
はじめに 前回 に引き続き、postMessage を使ってブラウザ内通信を監視するための調査中に monitorEvents [1] というものを見つけた。 クライアント(Web ブラウザ) とサーバ間の通信は DeveloperTool などのネットワークから調べることができるが、postMessage などを使ったブラウザ内の通信も監視したい。 monitorEvents を使うと、ブラウザ内の通信や任意の DOM のイベントを、コンソールから監視することができる。 目的 Web ブラウザ内の任意のイベントをコンソールから監視したい。 方法 公式リファレンスによると[1]、monitorEvents は任意の DOM に対して任意のイベントを監視し、イベント発火時にコンソールにイベントオブジェクトを出力してくれる。 Chrome 対応。 monitorEvents はグローバル関数。
Markticle | Read, mark, and share articles
We're sorry, Markticle is no longer supported. Author's official page - www.DanielSternlicht.com
ZenHub.io - Agile Project Management inside GitHub
AI is radically changing the way that we build software. Yet the way we manage software projects still looks a lot like it did twenty years ago. Engineering teams are still spending hours manually updating project management tools, leading to messy, inaccurate project data. This leaves engineering leaders without a clear view of progress, making it difficult to know whether projects will be deli
Project Naptha
Project Naptha highlight, copy, and translate text from any image. Project Naptha automatically applies state-of-the-art computer vision algorithms on every image you see while browsing the web. The result is a seamless and intuitive experience, where you can highlight as well as copy and paste and even edit and translate the text formerly trapped within an image. Unfortunately, your browser is no
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - GoogleChromeLabs/ndb: ndb is an improved debugging experience for Node.js, enabled by Chrome DevTools
Chrome Canary のデベロッパー向け機能 - Google Chrome
GitHub - warpling/Macmoji: Slack/GitHub/Trello emoji for your mac! 😁 💥 💻
Extensionizr
Themes for Web Developer's Toys - devthemez
Windows 8 Chrome theme by sunkotora on DeviantArt
GitHub - prasmussen/chrome-cli: Control Google Chrome from the command line
Browser, chrome, google icon - Free download on Iconfinder
Chrome, google icon - Free download on Iconfinder
Google Chrome Nightly Icons (Icns, PNG) by niKo36 on DeviantArt
Holmes
