Multiple DOM threads ? Yes! Make your apps faster, parallelize away heavy DOM operations. Get started
Multiple DOM threads ? Yes! Make your apps faster, parallelize away heavy DOM operations. Get started
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
2020.10.07 template 要素の shadowroot 属性による宣言的な Shadow DOM Shadow DOM は、代替要素を除いた任意の HTML 要素を DOM API で参照して attachShadow({ ... }) メソッドを呼び出すことで命令的に生成できる。これを新たに <template> 要素の shadowroot 属性によって、対象の HTML 要素の Shadow DOM を宣言的に生やせるようになる仕様が提案されている。既に Chrome 85 で試験的に実装されており、フラグ付きで利用できるようになっている。この記事は自分用にまとめたメモ。 Add declarative Shadow DOM features by mfreed7 · Pull Request #892 · whatwg/dom Add declarative Shad
pagefindは静的サイトでも手軽にサイト内検索を実現できる全文検索ライブラリーです。先日、pagefindの脆弱性が修正されましたが、DOMの古い仕組みを悪用したものでした。その内容を興味深く感じたため、この記事で紹介します。なお、紹介する攻撃手法はDOM Clobberingと呼ばれています（DOM上書きという意味です）。 この記事で紹介する脆弱性はpagefind 1.1.1で修正されています。pagefind 1.1.1未満をご利用のかたは1.1.1に更新することをおすすめします。 CVE-2024-45389: DOM clobbering could escalate to XSS 概要 修正前のpagefindを利用しているサイトでは、サイトにHTMLを書き込める場合、外部のJavaScriptを読み込まれてしまう脆弱性がありました。書き込まれたHTMLにJavaScrip
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Vapor Mode ってご存知でしょうか? 少しでも聞いたことがあるようであれば、おそらくあなたは日常的に情報を収集している熱心な方でしょう。 というのも、現在(2023/12)、Vapor Mode について日本語での言及はほぼありません。 かといって英語圏に情報が出回っているかというと、そうでもありません。(後述) 今回は現時点で筆者が知っている Vapor Mode の詳細について、前提知識も整理しつつ理解していければと思います。 初めに お品書き (何を理解するか) 改めて Vue.js とは これから Vue.js を学び始める方や、Vue.js をのぞいてみるのは随分と久しぶりだという方もいるかと思うので、ざっくりおさらいします 現在の Vue.js 現在の Vue.js がどういう実装で実現されているのか、 Vapor Mode に関わってくる部分を抽出し、ソースコードベー
In recent years, Node.js has seen increasing adoption of standard browser application programming interfaces (APIs), such as the WHATWG-compliant URL implementation, the TextEncoder/TextDecoder API or the Console API that now matches what browsers provide. One API proving to be particularly fundamental is EventTarget , the DOM interface for firing events, and it’s worth taking a closer look at how
React初心者です。 Reactのレンダリングについて学習したのでまとめてみました。 Reactが再レンダリングするタイミング 基本的にReactで再レンダリングが起きるタイミングは以下の3つ。 stateが更新された時 propsが更新された時 親コンポーネントが再レンダリングされた時 1. stateが更新された時 import { useState } from "react"; export default function App() { console.log("App"); const [text, setText] = useState(""); const changeText = (e) => { setText(e.target.value); }; return ( <> <p>App component</p> <input type="text" onChan
フロントエンドエンジニアや、主流のフロンエンドフレームワークの React と Vue.js を触った経験がある方なら、仮想 DOM という言葉を聞いたことがあると思います。仮想 DOM はフロンエンド開発において、パフォーマンスを向上させるスタンダードになるほど、普及してきました。しかし、その一方で仮想 DOM を使わないトレンドも最近流行っています。この記事では、仮想 DOM について、また仮想 DOM の時代はもう終わりなのかを討論したいと思います。 The DOM 最初に、DOM についてみてみましょう。MDN docsによると、 DOM (Document Object Model) はウェブ文書をノードとオブジェクトで表現します。そうやって、プログラミング言語をページに接続することができます。 すなわち、DOM のおかげで、HTML のノード上に直接作業し、Javascript
単純作業って嫌ですよね。 たまには良いんですよ、たまには。頭の中をからっぽにして音楽聴きながらExcelにデータを打ち込むとか、まぁまず二度は入力しないだろうって作業なら我慢して出来るんですけど、毎日どこそこのページをチェックして、データをコピーして貼り付け、とか考えただけで鬱になりそうです。 その昔、ネットゲームの攻略情報サイトを制作／運営していまして、公式サイトからのサーバーメンテナンスのお知らせとか、自分のサイトにもリンク貼って告知していたわけです。 当時、これを何とか自動化できないかなと思って、PHPのfile_get_contents関数を使ってHTMLを読み込んで、お知らせのあるULタグを見つけて、日付っぽい文字列とリンクっぽい文字列を見つけて、アレやコレやいじくってと、だいたい100行くらいのPHPスクリプトで実現できました。 一緒にそのWebサイトを作っていた人たちもいるの
DisclaimerAll projects mentioned in this blog post have been contacted, and I confirmed that the behavior described in this article is either working as intended, already fixed, or will not be fixed. TL;DRThe browser loads elements in the HTML from top to bottom, and some JavaScript libraries retrieve data or attributes from the DOM after the page has been completely loaded. Because of how the con
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
モダンフロント技術におけるGTMの問題 ここでいうモダンフロント技術は、VueやReactなど仮想DOMを用いられた技術を指します。 仮想DOMなので「DOMが存在しているとは限らない」 要素の表示や要素のクリックなどのトリガーに関して、class名やらid名などDOMの情報に対して条件を絞りイベントを制御すると思いますが、必ずしもGTMがその仮想DOMが正しく検知できるとは限らないです。 仮想は消失したり入れ替わったりするものなので。 そのため、GTMの既存の要素の表示や要素のクリックに依存しない設計を理想とします。 GTMのページビュートリガーが使えない モダンフロント系の技術では、React Routerやらvue-routerなどの仕組みによって、 サーバーサイドを介さずにクライアントサイドのみでページの変更を行なっているケースが多いです。 つまり、History APIで更新して
仮想DOMを学び直す 仮想DOMは速いという漠然とした認識が自分の中にあったんだけど、じゃあなんで速いんだろう？そもそも本当に速いのか？って疑問に思った時に色々調べ直した 仮想DOMにつ... Svelteは仮想DOMを使っていないことで有名だが、仮想DOMを使わないでどうやって部分的な変更を検知してリアルDOMに反映してるんだろうってのが気になったので色々調べてみたことのまとめと、実際に触ってみた所感を記しておく。 Svelteとは？ SvelteはJSのコンパイラである。 フレームワークでもなくライブラリでもなくコンパイラであるってのが最初驚きだった。 Svelteが注目されるようになったのは大きく作りなおされたv3以降らしいので、この記事でもv3以降を前提とする。 ドキュメントに記載されている主な特徴は次の3つ。 ・少ないコードで記述ができる ・仮想DOMがない ・リアクティブなコー
はじめに Viteのバージョン4.0の公開をアナウンスするブログでVitestについて言及されていました。 Vitest adoption is exploding, it will soon represent half of Vite's npm downloads. Nx is also investing in the ecosystem, and officially supports Vite. Vitestの採用は爆発的に増えており、まもなくViteのnpmダウンロードの半分を占めるようになるでしょう。Nxもエコシステムに投資しており、Viteを公式にサポートしています。(DeepLによる翻訳) これまではJavaScript、TypeScriptにおけるテストツールとしてはJestという成熟したツールがあるので、Vitestを利用するのは趣味だったり少し先の未来だろうと考え
いわゆるJAMstackを用いたWebメディアなどでは、コンテンツの構成が記事ごとに少しずつ違うけれどもマークダウンでは表現力が制限されるため、本文などコンテンツの一部をHTMLで記述して表示したいという状況はそれなりにあると思います。 そのような状況で、外部サービスから提供されるスクリプトタグを含んだコンテンツを表示したい、という要件に対応したものです。 dangerouslySetInnerHTMLの制限 ReactにはdangerouslySetInnerHTMLを用いることで、任意のDOM要素の子要素としてHTMLを挿入することができます。 ただし、この機能は内部的にinnerHTML用いています。innerHTMLはXSS攻撃に対する対策として<script>タグを実行しません。(ただし、インベントハンドラとしてスクリプトを実行することは可能です) そのため、スクリプトタグを含む
たとえば「要素Xをクリックしたら何かしらの問題が発生する」といったバグの解析時に「クリックされた時にどのjsファイルの何行目あたりが実行されるか」が知りたいのですが、いい方法は無いでしょうか? 現状では、やむなく要素Xのidやclass値でgrepをかけてしらみ潰しに調べています。 ポイントは、各種ライブラリ内部のjsというより、現在調査中のブロジェクトのjsファイル・行番号を突き止めたいという点です。 ブラウザはChrome, Safari, Firefoxです。
Interop 2024のFocus Areasの1つに、Web Componentsがあります。このWeb Componentsに関連する機能として、Declarative Shadow DOMやsetHTMLUnsafe、parseHTMLUnsafeが2024年に入って新たにBaselineに追加されました。 これらの機能・Web APIは、サーバーサイドでの宣言的なShadow DOMの構築によるJavaScriptが無効な環境でも動作するWeb Componentsの実現や、クライアントサイドでの動的なDeclarative Shadow DOMの追加によるWeb Componentsの利用範囲の拡大に寄与してくれています。 今回は、このような盛り上がりを見せるWeb Componentsが、Declarative Shadow DOMやsetHTMLUnsafe・parseHT
ReactにおけるDOM構築について ReactはDOMを仮に構築する仕組みを備えており、仮想DOMを設計してからリアルDOMを作成するため、従来のDOMやフレームワークで構築されたDOMに比べて処理のスピードが速く、Webページの表示を高速で切り替えることができます。 DOMについて DOM（Document Object Model）は、HTMLファイルのソースコードのことではなく、画面を表示するまでに解釈したHTML/CSS/JavaScriptによって構築されたDOM（ツリー）を指します。DOMはChromeやFireFox、Safari、IEなどのブラウザ上で、Webページを描画するために構築されます。 Chromeの開発者ツールのElementsタブでDOMツリーを見てみます（イメージ）。 ここで表示されているものはHTMLのソースコードそのものではなく、ブラウザ上にwebペー
Svelteの特徴 Svelteはコンパイラ ところで、なぜそのようなことが可能なのでしょうか。 そもそも、Reactがステート変数の定義・更新に特別な関数を必要とするのはなぜでしょうか。 Reactはフロントエンドのコードのすべてを管理しているわけではないので、単にJavaScriptの処理系がcount += 1のような代入処理を実行しただけでは、そのことを知ることができません。しかし、それを知ることができなければ、ユーザに表示されたcountの値は、古い表示のままとなります。先ほどの例でいえば、ユーザがボタンを押しても「クリックした回数」の右側にある数字が増えていかないことになります。Reactを使う開発者は、Reactが提供するこれらの関数を呼び出すことで、Reactに「状態変数が変わったから、必要に応じてレンダリング内容を更新してね」と伝えていることになります。 ところで、Sve
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Have you ever needed to build a UI where some component on the page needs to respond to elements as they’re scrolled to a certain threshold within the viewport — or perhaps in and out of the viewport itself? In JavaScript, attaching an event listener to constantly fire a callback on scroll can be performance-intensive, and if used unwisely, can make for a sluggish user experience. But there is a b
Testing >> Semantic Dom Diff ||40 semantic-dom-diff allows diffing chunks of dom or HTML for semantic equality: whitespace and newlines are normalized tags and attributes are printed on individual lines comments are removed style, script and SVG contents are removed tags, attributes or element's light dom can be ignored through configuration Manual Setup Chai Plugin While semantic-dom-diff can be
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Photo by Vishal Jadhav on UnsplashHooks are a pattern, not something usable with React library only, and this post would like to explain, and walk through, some interesting possibility. What are hooks?Hooks are nothing more, and nothing less, than a wrap around a generic callback. The callback itself is not a hook, unless it’s being handled by a hook-helper, in this case provided by µhooks library
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 初めに 本記事は All we know about Vue 3's Vapor Mode の日本語翻訳版です。 このブログは現時点で出回っている Vapor Mode についてのリソースでおそらく最も体系的にまとめられているもので、主に Evan You 氏の講演やインタビューをもとに書かれています。 このブログを書いてくださったのは :icarus.gk 氏で、彼はいつも Vue のアップデートのまとめや、機能の紹介に関して素晴らしい発信をしています。 日本語翻訳を公開する件について :icarus.gk 氏 は快く了承してください
1. Introduction What is Lit Lit is a simple library for building fast, lightweight web components that work in any framework, or with no framework at all. With Lit you can build shareable components, applications, design systems, and more. What you'll learn How to translate several React concepts to Lit such as: JSX & Templating Components & Props State & Lifecycle Hooks Children Refs Mediating St
「スクレイピング 入門」でググるとやたら Python が勧められますが、それは情報と優秀なライブラリが充実しているためであって Python じゃないとスクレイピングできないわけではありません。昨今の Web 事情から、スクレイピングはヘッドレスブラウザを併用するのが当たり前になっているので、ブラウザを操作するスクリプトが作れれば言語は何だって構いません。 PHP でのスクレイピングに関してはあまりやる人がいないのか、調べても情報が古くて (あるいは古臭くて) あまり参考にならなかったので片手間に実装した例を書いておきます。 目標 PHP でスクレイピングによって Web サイトから情報を取得するクローラーを開発する。 使用するライブラリ Guzzle : HTTP クライアント PHP DOM Wrapper : DOM 操作 Chrome PHP : ヘッドレス Chrome 操作
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
MutationObserver の使い方 まずは MutationObserver の使い方を簡単に紹介します。次のサンプルは span 要素のテキストの変更を検知して、変更前のテキストと変更後のテキストをコンソールに出力します。 // MutationObserver オブジェクトを生成 const observer = new MutationObserver((mutations) => { const rec = mutations[0]; // MutationRecord オブジェクト const before = rec.removedNodes[0].data; // 変更前のテキスト const after = rec.addedNodes[0].data; // 変更後のテキスト console.log('「' + before + '」が「' + after + '
ブラウザの仕組みと動作ブラウザのコンポーネントブラウザのコンポーネントを以下に示します。 引用元：ブラウザの仕組み: 最新ウェブブラウザの内部構造 この記事での説明のメインは [Rendering Engine], [Networking], [JavaScript Interpreter] の 3 つです。 Rendering Engine とはレンダリングエンジンは、ブラウザの中で画面表示に特化したモジュールです。 レンダリングエンジンは Networking により Web サーバから html ファイルを取得し、それをブラウザ上に表示させるまでを担いますが、それまでには大きく 4 つのプロセスを行います。 プロセスとは「①パース」、「②レンダーツリー構築」、「③レイアウト」、「④ペインティング」です。 ブラウザが Web サーバから情報を取得し、画面表示するまでの流れを以下に示しま
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
28 Nov Shadow DOM and accessibility: the trouble with ARIA Posted November 28, 2022 by Nolan Lawson in accessibility, web components. Tagged: shadow dom. 3 Comments Shadow DOM is a kind of retcon for the web. As I’ve written in the past, shadow DOM upends a lot of developer expectations and invalidates many tried-and-true techniques that worked fine in the pre-shadow DOM world. One potentially sur
DOMDOMタイムス、今日はDOMの内部実装の話。話を単純にするため、V8の実装を念頭において進めていくよ。 ふだんJavaScriptで操作しているDOMのオブジェクトは、ブラウザ内部で管理されているDOMのオブジェクトとは別のものだよという話。 これだけ聞くと当たり前かもしれないけど、周辺をふかぼりして考えてみるとけっこう面白かったわけです👶 DOMの実体、そしてDOM wrapper さっそくだけどDOMの実体はブラウザ内部、例えばchromiumならC++の世界に存在していることに思いを馳せてほしいのです。 考えてみればchromiumの場合、ページを構築するのはBlinkというレンダリングエンジンなわけで、C++で実装されたBlinkがHTMLやらCSSやら場合によってはscriptまで含めた材料からDOMを構成してくれています。 BlinkがC++の世界、というかブラウザ内部
Offers を運営している株式会社 overflow の あほむ でございます。 本記事は Chrome Platform Status からなんとなく Proposed/In Development etc なステータスのフィーチャーを取り上げて、そのプロポーザルを眺めてみるシリーズです。前回は form-sizing field-sizing CSS property でした。 SPA 的な画面遷移を性能計測したい 今回は Soft Navigations Performance Entry を眺めてみます。本当に眺めるだけで深入りしないので概要のみのライトな記事とご認識ください。 SPA 的な画面遷移とはつまり History.pushState や History.replaceState を用いた JavaScript 駆動なナビゲーションを指します。このような遷移を指してここ
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
多くのお客様から、Instacartを利用して貴重な時間を取り戻していると言われていますが、特に体が不自由なユーザーが私達の利用して、必要な食料品を入手するため大切な方法として私達に信頼を寄せています。 Instacartのカスタマーエンジニアリングチームは、すべてのお客様のためにシームレスなアプリ内購入体験を構築するために一生懸命努力しています。そして特に障害のあるお客様に対して、我々はアプリ内購入のアクセシビリティーを真剣に考えています。 私たちが直面している最大のアクセシビリティの課題の1つは、エレガントな（そして実用的）Webモーダルを構築することです。 スタンダードな状況では、私たちはReact-Modalを使います。 問題が解決しました。 残念ながら、それほど単純ではありません。 デザインや機能的な状況によっては、カスタムモーダルが必要です。 このカスタム作業では、アクセシビリ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く