サイトマップやDOM構造や家系図のように親ノードから複数の子ノードに接続線で繋げ、階層構造を明示するツリービューをHTMLとCSSで実装するテクニックを紹介します。 HTMLはul要素でシンプルに実装されており、接続線のカラーや幅や間隔などは自由にカスタマイズできます。 Tree view from unordered list まずは、実際のデモをご覧ください。 See the Pen Tree view from unordered list by Ross Angus (@ross-angus) on CodePen. 1つ目の「DOM構造」と2つ目の「サイトマップ」の実装は、基本的には同じです。順番に見てましょう。 DOM構造のツリービュー HTML 1つのul要素で3階層分まで、4階層目からは新たにul要素が必要となります。矩形は「DOM構造」では<code>、「サイトマップ」で
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
Netflix がReact をやめて、SSRにしたらランディングページを 50% 高速化できたということらしいのですが、一方slackはReactで高速にしたとのことですが、この違いは何でしょうか？
回答: リンク先の記事： * A Netflix Web Performance Case Study で重要なのは > Netflix uses React on the client and server, but they identified that the client-side portion wasn't needed for the first interaction, so they leaned on what the browser can already do, and deferred client-side React. です。詳しくいうと * ...
Smooth and simple transitions with the View Transitions API | Web Platform | Chrome for Developers
The View Transition API makes it easy to change the DOM in a single step, while creating an animated transition between the two states. It's available in Chrome 111+. Transitions created with the View Transition API. Try the demo site – Requires Chrome 111+. Why do we need this feature? Page transitions not only look great, they also communicate direction of flow, and make it clear which elements
ポーランドのセキュリティ企業Securitumは2019年11月18日、Googleの電子メールサービス「Gmail」に存在していた脆弱（ぜいじゃく）性について、詳しい内容を公表した。Googleは同社からの報告を受け、既にこの問題を修正している。 Securitumのブログによると、今回の脆弱性は、メールに動的なHTMLコンテンツを含めるために使われるGmailの新機能「AMP4Email」に存在していた。AMP4Emailは「ダイナミックemail」とも呼ばれる機能で、これを使うと、イベントの出欠確認やアンケートへの回答といった行動をメッセージから直接起こせる。
Page Object Patternを使うな、というCypress公式記事を読んで思ったこと - Qiita
※この記事はただの集団 Advent Calendar 2019の11日目の記事です。 はじめに 若干過激なタイトルにしたことを最初にお詫びします。 正確には以下の記事を読んで思ったことです。 Stop using Page Objects and Start using App Actions Page Objectsを使うのはやめて、App Actionsを使おう （著者訳） 引用元はCypressの公式ブログです。 全編英語なので、「読むの面倒くさいよぅ」という方には、本記事が内容理解に役立つかもしれません。 Summary 1.前提 2.Page Object Pattern推奨派の主張 3.Page Object Pattern否定派の主張 4.記事を読んで思ったこと 5.最後に 説明の都合上、まずPage Object Pattern推奨派の考え方を簡単に説明し、その後にPag
GitHub - capricorn86/happy-dom: A JavaScript implementation of a web browser without its graphical user interface
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
10 Mar, 2021 Don’t attach tooltips to document.body TL;DR Instead of attaching tooltips directly to document.body, attach them to a predefined div in document.body. BAD <body> <!-- temporary div, vanishes when tooltips vanishes --> <div>my tooltip</div> <body> GOOD <body> <!-- this div stays forever, just for attaching tooltips --> <div id="tooltips-container"> <!-- temporary div, vanishes when to
GitHub - facebook/react-strict-dom: React Strict DOM (RSD) is a subset of React DOM, imperative DOM, and CSS that supports web and native targets
Development monorepo for "React Strict DOM". React Strict DOM (RSD) is an experimental integration of React DOM and StyleX that aims to improve and standardize the development of styled React components for web and native. The goal of RSD is to improve the speed and efficiency of React development without compromising on performance, reliability, or quality. Building with RSD is helping teams at M
tl;dr ブラウザで文字列を表示する場合画面幅に応じて自動で改行されることがあります。英文などは分かち書きされているためブラウザは単語の区切りなどで改行することができますが、和文は文節が明確ではなく単語の途中で改行されてしまうことがあります。 この記事では、ECMA402 の Intl.Segmenter を用いて和文を分かち書きし、ブラウザに改行可能箇所を教えることでより読みやすいレイアウトを目指します。 (2023/04/14 追記) NPM package として公開しました 🚀 背景 ラテン文字を使用する多くの言語では語と語が空白で区切られていますが(以降分かち書き)、通常、日本語や中国語は分かち書きされていません。 一般的なブラウザでは表示領域(横幅)に対して表示させたい文字列が一行に収まらない場合自動で改行するような挙動になっています。英語のように既に分かち書きされた文の場
GitHub - felixfbecker/dom-to-svg: Library to convert a given HTML DOM node into an accessible SVG "screenshot".
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
GitHub - Polight/lego: 🚀 Low-Tech Web-Components Made Lightweight & Future-Proof.
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
ref is a reserved property on build-in primitives, where React will store the DOM node after it was rendered. It will be set back to null when the component is unmounted. Interacting with refsFor most interactions, you don't need to access the underlying DOM node, because React will handle updates for us automatically. A good example where you might need a ref is focus management. There's a good R
これからわかる通り、ステップの追加購入が必要です。 「CI/CD ツールと連携してたくさん回せますよ」というテストサービスも多いですが、計算したらステップ数足りないことに気づくことも同じくらい多いです。 どうせステップ数で制限がかけられているので、テストサービスは日次実行さえできれば良いのでは、とさえ思っています。 MagicPod 検討したプラン: ブラウザテストプラン・スタンダード Autify と BugBug は Chrome のシークレットモードで、 mabl はネイティブアプリでテストを作成するツールですが、 MagicPod は違います。 MagicPod でテスト作成をするときはリモートの VM を立ち上げ、その GUI をブラウザの iframe に映して操作します。 そのため、テストしたい自社のウェブアプリがブラウザの中に小さく表示されます。超独特です。 SALESCO
Detached window memory leaks Stay organized with collections Save and categorize content based on your preferences. What's a memory leak in JavaScript? A memory leak is an unintentional increase in the amount of memory used by an application over time. In JavaScript, memory leaks happen when objects are no longer needed, but are still referenced by functions or other objects. These references prev
webcomponents/proposals/DOM-Parts.md at gh-pages · WICG/webcomponents
The existing specifications that provide the ability to update DOM update after an initial render are limited. Frameworks can walk the DOM or query for nodes, and use JavaScript APIs to imperatively update attributes, text content, and other JavaScript properties of these nodes. However, the framework code that initially locates DOM that will need to be updated and repeatedly updates that DOM has
実装の引き出しを増やすためのDOM Eventテクニック 株式会社Helpfeel 1
Declarative Shadow DOM | CSS and UI | Chrome for Developers
Declarative Shadow DOM is a web platform feature, currently in the standardization process. It is enabled by default in Chrome version 111. Shadow DOM is one of the three Web Components standards, rounded out by HTML templates and Custom Elements. Shadow DOM provides a way to scope CSS styles to a specific DOM subtree and isolate that subtree from the rest of the document. The <slot> element gives
Nuxt.jsのSSR/CSR処理について
Unity WebGL なゲームをNode.JS + jsdom + headless-glで動かしたかった - Qiita
えっ このネタ続くの。。？ 前回( Unity WebGLで使われているシェーダを抜き出してARBアセンブリを眺める )はWebGLビルドのUnityゲームをトレースして、使われているシェーダ命令があんまり多くないことを確認した。 ブラウザ上の動作では同期APIの実装に制約がありちょっと手を入れづらいため、Node.jsで動かしたかった。別案としてNW.jsを使うというのもあったが、今回の手法でもWebブラウザ側のDOMを使わないといけないところは一応クリアしている。 結果と手法 結局成功したんだか失敗したんだかよくわからないところまでは来たと思う。 結果 Node.jsでもUnity WebGLは起動して描画コマンドも発行する でも描画がまっくらなので、まだ描画が正常かどうかは確認できていない JSdomでWebAssemblyを使ったサイトがそのまま動くのは地味にすごい気はする。 手法
はじめに 私はバックエンド(PHP)とクラウド(AWS)を主軸にエンジニア稼業をやっていこうと思っており、フロントエンド[1]についてはかなり苦手意識がありました。 できればフロントエンドとは距離をおいて生きていこうと思っていたのですが、現実はそう甘くありません。 仕事でフロントエンド開発を行う機会が少なからずあり、消極的な気持ちで取り組むよりは前向きに取り組めるようになれたらいいなあということで、そろそろ腹を括ってちゃんと勉強しようと思いました。この記事はその記録です。 早速、その「フロントエンドへの苦手意識」というのがどこから由来しているかを考えると、 「自分が何をしているのかわからないのに、ドキュメントの通りに記述するとなんか動く」という状態が気持ち悪いからだと思いました。 そのため、フレームワークを活用して何かアプリを作ってみるのではなく、そのフレームワークの基盤となる概念を学ぼう
DOMメモリリークのデバッグツール「Detached Element」、Microsoft EdgeのDevToolsに搭載
DOMメモリリークのデバッグツール「Detached Element」、Microsoft EdgeのDevToolsに搭載 マイクロソフトは、Microsoft Edgeに搭載している開発者向けツールDevToolsに、DOMのメモリリークを検出、解析するデバッグツール「Detached Element」を搭載したと発表しました。 The new Detached Elements Tool in Microsoft Edge DevTools helps you find and fix DOM memory leaks in your web app. Learn more on the blog: https://t.co/MErWs7iu0Z — Microsoft Edge Dev (@MSEdgeDev) December 9, 2021 JavaScriptを用いたDOMの
Announcing Playwright for Python: Reliable end-to-end testing for the web - Python
Announcing Playwright for Python: Reliable end-to-end testing for the web Automated end-to-end tests are a powerful tool for your team to ship faster and with more confidence. End-to-end tests automate UI interactions and can validate the functionality of your applications. To this end, we are announcing Playwright for Python in preview today. Playwright enables developers and testers to write rel
Deep-copying in JavaScript using structuredClone Stay organized with collections Save and categorize content based on your preferences. The Platform now ships with structuredClone(), a built-in function for deep-copying. For the longest time, you had to resort to workarounds and libraries to create a deep copy of a JavaScript value. The Platform now ships with structuredClone(), a built-in functio
HTMLのコメントにはaddEventListenerやremoveEventListenerなどのイベント関連の処理が実装されています。 DOMの構造に詳しい方であれば、このような仕様になっている理由が分かる方も多いかと思われます。 今回はHTMLのコメントの仕様を通じてDOMについての理解を深めるための記事を書きます。 前提条件 この記事は下記の内容を前提として記載しています。 JavaScriptの基礎的な構文を理解している 基本的なHTML要素を把握している オブジェクト指向プログラミングについての基礎的な理解がある 最後の「オブジェクト指向プログラミングについての基礎的な理解がある」については推奨ですが必須ではありません。 確認手順 まずは本当にコメントにイベントリスナーが実装されているかを確認します。 確認のためnew Comment()でHTMLのコメントを作成し、typeo
1,000,000件どんとこい！大量のデータ表示に適したチャートライブラリ3選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
1,000,000件の散布図を表示できたライブラリ データ数1,000,000件の散布図表示に耐え、最終候補として残ったライブラリは以下の3点でした。 Plotly D3FC Apache ECharts Apache ECharts 出典：https://echarts.apache.org/ Apache ECharts GitHub 散布図（1,000,000件） 実現できるチャートの種類が圧倒的に多く、GitHubのスター数も47.3kと群を抜いています。サンプルも豊富で、ドキュメントは詳細です。中国のBaidu社から提供されています。 Plotly 出典：https://plotly.com/javascript/ Plotly JavaScript Graphing Library GitHub 散布図（1,000,000件） Apache EChartsに次いで多機能なライブ
本連載では分散型マイクロブログ用ソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説を行っています。 今回は、MisskeyでUIフレームワークとして採用している、Vueの実験的な脱仮想DOM実装であるVaporモードの開発状況を紹介します。 仮想DOMとは 今日、一般的なWebのUIフレームワークでは仮想DOM（Virtual DOM, VDOM）と呼ばれる技術を採用していることが多いです。 Webでは、JavaScriptからHTMLを操作するためのインターフェイスとしてDOMが用意されていますが、仮想DOMを採用するフレームワークではこのDOMを直接操作するのではなく、一旦独自に仮となるDOM（V-tree）をメモリ上に構築し、操作する必要のあるHTML要素を特定して効率的にDOMを変更（patch）します。 しかし、UIが複雑になってくると仮想DOMも大き
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
Chrome will disable modifying document.domain to relax the same-origin policy | Blog | Chrome for Developers
Updates May 30, 2023: we've announced that the deprecation of document.domain setter will be effective in Chrome 115. April 7, 2023: We've identified an issue before shipping this change in Chrome 112. document.domain setter to be removed by default is currently suspended and the new shipping milestone is not determined yet. Please check back on this blog post or subscribe to blink-dev and this th
HTMLとDOMとの違いメモ - Lambdaカクテル
フロントエンドをたまに遊びでいじっているのだが、HTMLとDOMって何が違うのかよくわかっていなかったので調べたメモ。 HTMLはMarkup Languageとあるように、ドキュメントをマークアップする一種のシリアライズフォーマットである。 DOM(Document Object Model)はより高いレベルの概念であり、シリアライズ形式を関知しないが、ドキュメントをツリーモデルとして表現するセマンティクスを提供する。 わかりやすくメンタルモデルを表現すると、ブラウザ(やnodeなどそれに準じるもの)がHTMLをパースし、対応するDOMモデルがオブジェクトとしてメモリ上に展開される、といえる。 プログラミング言語からはDOMを通じてドキュメントを操作する。 このためHTMLはDOMと等価ではない。 このためHTMLの属性といった構成要素がDOMと一対一対応するとは限らない。 HTMLの属
フラグメント – React
この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。 以下の新しいドキュメントで最新の React の使い方が学べます。 <Fragment> React でよくあるパターンの 1 つに、コンポーネントが複数の要素を返すというものがあります。フラグメント (fragment) を使うことで、DOM に余分なノードを追加することなく子要素をまとめることができるようになります。
Complete, actionable insights and visibility into your entire digital user experience.
Thoughts on reading through the hacker news response. 96 line version with JSX compiler. React you pass in a function that takes state and returns a virtual DOM (just a tree of plain ol' js objects) it renders that virtual DOM as a real DOM in the browser if you change the state, it runs the function again, this returns a new virtual DOM it efficiently updates the real DOM so that it matches the n
Using AbortController as an Alternative for Removing Event Listeners | CSS-Tricks
Using AbortController as an Alternative for Removing Event Listeners The idea of an “abortable” fetch came to life in 2017 when AbortController was released. That gives us a way to bail on an API request initiated by fetch() — even multiple calls — whenever we want. Here’s a super simple example using AbortController to cancel a fetch() request: const controller = new AbortController(); const res
選択（Selection） と 範囲（Range）
この章ではドキュメントでの選択と、<input> などのフォームフィールドでの選択について説明します。 JavaScript を利用して選択状態を取得したり、全体あるいは一部分の選択/選択解除、ドキュメントから選択した部分を削除、タグへのラップなどを行うことができます。 末尾の “サマリ” セクションにレシピがあり、これで現時点で必要なことはカバーされているかもしれません。ただ、章全体を読むことでより多くのことを知ることができます。 基礎となる Range と Selection オブジェクトの把握は難しくはないので、必要なことをするためのレシピは必要ありません。 範囲(Range)選択の基本的な概念は 範囲(Range) で、基本的には “境界点”(範囲の開始と終了) のペアです。 Range オブジェクトはパラメータなしで作成できます: 次に、range.setStart(node,
The first demo of the language that was to become JavaScript took place almost exactly 25 years ago. The language was released, as LiveScirpt, in a beta of Netscape Navigator in the fall of 1995, and renamed to JavaScript later that year. Sometime late that year I began work on the first edition (O’Reilly published it as the “beta edition”) of JavaScript: The Definitive Guide, and it was published
Mutation observer
MutationObserver は DOM 要素を監視し、変更があった場合にコールバックを起動する組み込みのオブジェクトです。 最初に構文を確認してから、実際のユースケースを見ていきましょう。 構文MutationObserver は簡単に使用できます。 まず、コールバック関数を引数にもつオブザーバ(observer)を作成します。: config はブール値のオプションを持つオブジェクトで、“どの種類の変更に反応するか” を指定します。: childList – node の直接の子の変更, subtree – node のすべての子孫に対する変更, attributes – node の属性の変更, attributeFilter – 指定したものだけを監視するための、属性の配列 characterData – node.data (テキストコンテンツ) を監視するかどうか, ほかに
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サイトマップやDOM構造など、階層構造のツリービューをリスト要素で実装するスタイルシートのテクニック
GitHub - google/safevalues
モダンブラウザにおけるキー入力のキャンセル - Qiita
Googleが修正したGmailの脆弱性、「DOM Clobbering」の問題を悪用
Don't attach tooltips to document.body
Intl.Segmenter で和文の改行をいい感じにしてみる
Avoiding useEffect with callback refs
PlainDraggable - SVG/DOMのドラッグ&ドロップライブラリ MOONGIFT
モダンな自動E2Eテストサービスを調べてみた(2023年クリスマス版)
Detached window memory leaks | Articles | web.dev
実装の引き出しを増やすためのDOM Eventテクニック
フロントエンド苦手意識を克服すべく、お手軽仮想DOMを自作した
Deep-copying in JavaScript using structuredClone | Articles | web.dev
なぜHTMLコメントにはイベントリスナーが付与できるのか
Shadow DOM の特性を知って、使いこなすコツ - Qiita
Vue Vaporモード近況 | gihyo.jp
GitHub - WICG/observable: Observable API proposal
Benchmarking JavaScript Memory Usage
leontrolski - 33 line React
JavaScript Features To Forget · djf.log()