LIFULLの中島です。 近頃、LIFULL HOME'Sのフロントエンド(ここではJavaScriptのみを焦点とします)もようやく進む道を見出し、そろそろ設計方針を一新しようと試みています。 今回はそれについて話したいと思います。 現在の私たちの課題感 私たちの管理する多くのレガシーコードはDOM操作ライブラリとしてjQueryを、UI設計の格子としてBackbone.Viewのような設計方式を導入しています。 (もちろんそうでないマイクロサービスも多くありますが) 具体的なコード例を示すことこんな感じになります let Slider = Backbone.View({ events: { '.next click': 'next', '.prev click': 'prev' }, next() { this.$(...).css({left: '111px'}); }, ... }
この記事はドワンゴ Advent Calendar 2020 最終日の記事です。年の瀬ですね。 はじめに 本記事は、WHATWG Living Standardに準拠することを目的としたHTMLパーサである「gammo」の紹介を目的としている。gammoが実現していることを詳細に伝えるため、単なるgemの紹介に留まらず、HTMLの歴史や昨今のHTMLを取り巻く状況を簡単に解説し、WHATWG Living StandardにおけるHTML文書の解析アルゴリズムについて、実例と共に紹介する。 本記事で紹介するgammoの開発に取り掛かった理由は、主に以下の二点が挙げられる。 WHATWG Living Standardに準拠したHTMLパーサをRubyGemsの中から見つけられなかったため。 現在HTMLパーサの機能を持つライブラリの中で、最も利用されていると考えられるNokogiriと比較
KARTE Blocksを支える技術
2021年9月14日に正式リリースしたKARTE Blocksの裏側を紹介する連載の第一弾です。 KARTE Blocksを支える技術とその技術を選んだ理由について紹介します。
HTMLFormElement.submit は validation を無視するし submit イベントを発火しない - 平常運転
日記です。タイトルでほぼすべてがオチてしまった。 const form = document.querySelector('form#ultra-form'); form.submit(); みたいな感じで、 <form> を JavaScript から submit することができるんだけど、この HTMLFormElement.submit は HTML Living Standard ではこう定義されている: Submits the form, bypassing interactive constraint validation and without firing a submit event. https://html.spec.whatwg.org/multipage/forms.html#htmlformelement つまり、例えば下のような HTML form の場合、
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog この記事は UIT 新春 Tech blog 2023 4日目の記事です。 こんにちは。LINEフロントエンド開発センターの幾野(ikuno)です。普段は LINE NEWS のフロントエンド開発をしています。 LINE NEWS では昨年テストをたくさん書いた 昨年 LINE NEWS ではたくさんテストを書きました。当初 78 ファイルだったテストファイルは半年で 150 ファイルに倍増しました。 テストカバレッジも statements 33.6% から 64.4% まで改善しました。 昨年当初のテストカバレッジ 現在のテストカバレッジ 今回はどういったテストを書いたらうまくいったかについて書いていきます。 テストは意図
世はまさにハイパーメディア時代。何をするにも視覚的なキャッチがないとやっていけない時代です。ブラウザのスクリーンショットを撮ることも多いでしょう。しかしプライベートな内容もそこに映り込んでしまうこともありがち。かといって画像をいちいち加工するのも面倒……というわけで、DOM操作によってテキストを隠す拡張を作りました。 GitHub - motemen/webextension-obfuscate-texts 2022-07-20 追記: Chrome Web Store に出ました Obfuscate texts - Chrome ウェブストア Manifest V3 で作ったせいでほかのブラウザは未対応。 スクリーンキャスト Chrome extension: Obfuscate texts - YouTube ページ内の要素を選択し、「Obfuscate」することで▗▝▌▏▇
きっかけ（となったtweetの訂正） もう1ヶ月以上も経ってしまったが、こちらのtweetの公約どおり、WebAssembly (Wasm)におけるDOMの操作について知っている限りのことを書こう。 まずこの節の見出しのとおり、上記の発言は大きく間違えている。私はReference Typesがもたらすパフォーマンス的なメリットや、JavaScriptのオブジェクトを直接Wasmで渡すことが（一応）可能になったということを根拠に上記のtweetをした。しかし下記のtweetでも否定されているとおり、この観点は穴だらけなので、実際のところ多くの人が「直接操作できる」と実感できる状態ではないだろう。 詳細は後述するとして、我ながらひどい凡ミスを犯してしまった。JavaScriptのことを十分に知っているはずなのに、情けない。謹んでお詫びし、ここで訂正する。 大前提: ある意味で永遠にそんな日は
本エントリは2021年8月30日に開催されたNode学園 37時限目 オンラインにて、「Vue 2で大きなデータを扱うときの性能改善手法」というタイトルで発表させていただいた内容をテックブログ記事化したものです。発表当日の様子はYouTubeにアーカイブで公開されておりますので、そちらも合わせてご覧いただけましたら幸いです。 はじめにストックマークでは、法人ユーザー向けに「Astrategy」というウェブサービスを開発・提供しています。Astartegyの詳細や技術的な全体構成についてはAstrategyを支える技術: gRPC, Elasticsearch, Cloud TPU, Fargate… SaaS型AIサービスの内側の世界というエントリで紹介しておりますのでそちらを参照いただくとして、本エントリではAstrategyのフロントエンドを構築する上で重要である性能改善手法について紹
CSS in JSはJavaScriptのコード中にCSSを書くプログラミング手法で、styled-componentsなどがメジャーどころです。現代的な開発では、ReactやVueといったフロントエンド用のViewライブラリを使う際にCSS in JSのお世話になることがよくあります。 この記事では、次の時代のCSS in JSはWeb Componentsベースのものになるのではないかという話をします。 Web Componentsの復習 Web ComponentsはいくつかのWeb標準の総称であり、特に重要なのはCustom ElementsやShadow DOMです。いずれも、V1と呼ばれる仕様は全てのモダンブラウザでサポートされています（Safariが一歩遅れていて少し心配ですが）。 https://caniuse.com/custom-elementsv1 https://c
Common mistakes with React Testing LibraryMay 4th, 2020 — 15 min read Hi there 👋 I created React Testing Library because I wasn't satisfied with the testing landscape at the time. It expanded to DOM Testing Library and now we have Testing Library implementations (wrappers) for every popular JavaScript framework and testing tool that targets the DOM (and even some that don't). As time has gone on,
はじめに こんにちは、ziと申します。 今回は、発表からしばらく経ってしまいましたが、View Transitions APIを使ったNext.jsでのスムーズなページ・UI遷移を目指して、実装してみます。 ※もし間違いやより良い実装方法など見つけましたら、ご指摘ください！ 🙇♂️ 今回実装した最終成果はこちらです。 また、コードはこちらにあります。 View Transitions APIとは？ View Transitions APIとは、2023年4月11日現在Chrome 111とOpera 97(pre-release)以降で実装されている遷移のアニメーションを行うブラウザーAPIです。下記は、MDNからの引用です。 View transitions are a popular design choice for reducing users' cognitive load,
【JavaScript】JavaScript、その前に〜Webサイトが表示されるまで・レンダリング - Qiita
レスポンスを受け取った後、ブラウザで画面表示されるまでの流れです。 Download Perse Scripting Style Layout Paint Rasterize Composite Layers 図解 工程 ブラウザのレンダリングエンジンとJavaScriptエンジンが実行します。 Download サーバからリソースをダウンロードします。 Parse HTMLとCSSの構文解析を行い、それぞれのオブジェクトモデルを構築します。 オブジェクトモデルは以下の段階を経て作成されます。 バイト 文字 トークン ノード オブジェクトモデル レンダリングの結果、Webページを構成する要素がAPI(Application Programming Interface)として利用できるようになります。そしてAPIは、JavaScriptから利用することができます。 オブジェクトモデルはAPI
GitHub - alpinejs/alpine: A rugged, minimal framework for composing JavaScript behavior in your markup.
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
MarkdownをHTMLにコンパイルするmarkedは0.7.0でsanitizeオプションを非推奨にしています。 これはサニタイズの処理をmarkedから外す目的です。 Sanitize and sanitizer · Issue #1232 · markedjs/marked このsanitizeオプションの代わりにDOMPurifyを利用することを推奨していますが、 DOMPurifyはブラウザとNode.js両方で使うには癖があるためちょっとややこしいです。 なぜならDOMPurifyはDOM APIに依存しているため、 Node.jsで動かす場合はjsdom使うためです。 単純にjsdomを使ってしまうとブラウザでもjsdomが含まれてしまい、ファイルサイズが巨大になってしまいます。 そのため、ブラウザ向けの場合では直接DOMPurifyを使い、 Node.jsの場合はDOMP
仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう｜ハイクラス転職・求人情報サイト AMBI（アンビ）
仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう 最近のJavaScriptフレームワークで利用される「仮想DOM」について、リアルDOMの違い、メリット・デメリット、仮想DOMを使ったフレームワーク開発などを、ダーシノ（bc_rikko）さんが解説します。 はじめまして、ダーシノ（@bc_rikko）です。さくらインターネットでフロントエンドエンジニアをする傍ら、NES.cssというファミコン風CSSフレームワークを開発しています。 さっそくですが、皆さんは、ReactやVue.jsといったJavaScriptフレームワークを使ったことがありますか？ そういったフレームワークで使われている、仮想DOMについて知っていますか？ 「聞いたことない」「聞いたことはあるけど、どう実装されているかは知らない」「熟知している」。いろいろなレベルの方がい
Storybook6をVue.jsのプロジェクトに導入し、新機能であるStorybook Argsを活用してVue.jsのDXを最高にした話 - Qiita
Storybook6をVue.jsのプロジェクトに導入し、新機能であるStorybook Argsを活用してVue.jsのDXを最高にした話JavaScriptVue.jsフロントエンドJeststorybook はじめに 最近iCAREさんの所でVue.jsを一緒にやらせていただいているのですが、フロントの技術スタックがかなりモダンであり、開発体験が良く、ノウハウをどんどん公開して良いと言っていただけたので、その内容を共有するシリーズです. 今回は2日前にリリースされたStorybook6をVue.js + TypeScriptのプロジェクトに導入した話をします(執筆時点). 前置き Storybook自体はずっと使っていたのですが、6系に関してはbetaの頃からrfcとreleaseノートを全て追っかけて追っかけはじめ、使っていました. そしてついにrcが取れたので今回はその内容とiC
動機 業務でstyled-componentsを触る機会がありました。 styled-componentsは自分の周りではあまり良い噂を聞いていなかったため、少し調べたところこんな記事がHitしました。 記事の内容としては 様々な基礎概念を隠蔽しすぎている 使うことのメリットデメリットや、隠蔽されている部分の理解をしたチームでないと使わないほうが良い という内容です。 なので、しっかりと順を追って復習しました。 環境 viteで作成したReact18のTypeScriptプロジェクトで実施。 Reactの利用は関数型コンポーネントを前提としています。 Refを軽くおさらい 公式Docを見ていただくのが一番正確です。 公式では 一般的な React のデータフローでは、props が、親コンポーネントがその子要素とやりとりする唯一の方法です。子要素を変更するには、新しい props でそれを
ウェブアプリケーションの高度化に伴い、セキュリティに対する関心も年々高まりつつあります。特にXSS（クロスサイトスクリプティング）と呼ばれる脆弱性は簡単ながらも大きな被害をもたらします。アプリケーションの開発者は当然セキュリティを意識した開発を行うべきですが、人間の注意は万能ではなく、時に不注意から脆弱なアプリケーションを作成してしまいます。 こういった状況を改善するために、Trusted Typesという提案がなされています。Trusted Typesはよりセキュアなウェブアプリケーションを作る手段を提供し、安全性を高める補助をしてくれます。 Trusted Types HTMLやJavaScriptは非常に柔軟な仕組みを有しており、要素を動的に組み立てることが可能です。例えば以下の例を見てみましょう： const { username, email } = await api.getU
a11yとテストを同時に改善する話
これまで、a11y 改善・テスト拡充にあたり「どのように改善すべきか？どのように書くべきか？」という点がハードルだと感じていました。Chrome で a11y tree を確認するには、dev tools の隅の隅をつつく必要があり、あまり体験の良いものではなく、気に入ったエクステンションもありませんでした。 Testing Library は「誰もがアクセスできるクエリー」を優先的に使用することを推奨していますが、アプリケーションがはじめから a11y に考慮された作りになっているとは限りません。これらの背景から「data-testid」のような、テスト向け属性に頼るワークアラウンドで乗り切ることも少なくありませんでした。 Full page accessibility tree 今年 1 月にリリースされたChrome98 の新機能として「Full page accessibility
VanJSを試してみたら開発体験が良かったので紹介します。 🍦 VanJSとは？ VanJSは、数ヶ月前にメジャーバージョンがリリースされた比較的新しいReactive UIフレームワークです。軽量、非依存、トランスパイル不要、シンプルなAPIという特徴があります。 gzip圧縮後で0.9kbと非常に軽量で、バンドルサイズの肥大化を気にすることなく手軽に導入できます。 他のUIフレームワークと比較しても圧倒的に軽量 UIもJSXを使わず、関数ベースのAPIで宣言的に構築できます。 VanJSの開発秘話はとても考えさせられるものだったので、機会があればぜひ読んでみてください。 🛠️ リファクタリング対象 Sky Follower BridgeというX(Twitter)のFollower一覧からBlueskyのユーザーを検索するChrome拡張を個人開発しています。今回はその拡張機能のco
Attributes and properties are fundamentally different things. You can have an attribute and property of the same name set to different values. For example: <div foo="bar">…</div> <script> const div = document.querySelector('div[foo=bar]'); console.log(div.getAttribute('foo')); // 'bar' console.log(div.foo); // undefined div.foo = 'hello world'; console.log(div.getAttribute('foo')); // 'bar' consol
GitHub - aidenybai/million: Optimize React performance and make your React 70% faster in minutes, not months.
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
経緯 DOMについて調べてた時に気づいたので、備忘録として。 （この備忘録ではReactベースで書いてます） 結論 仮想DOMの真のメリットは「パフォーマンスが良いこと」ではなく、「宣言的UIの実現と現実的なパフォーマンスを両立できること」にある。 命令的UIと宣言的UIってなんだろう... 命令的UI 「イベント・変更が発生するたびに、どのように処理を実行し、状態を反映するのか」を記述する必要がある const checkbox = document.querySelector(".checkbox"); const button = document.querySelector(".button"); checkbox.addEventListener("click", () => { if (checkbox.checked === true) { button.disabled =
Trusted Typesの概念と背景
今回はTrusted Typesに対する個人の見解を書いてみます。 Trusted Typesはブラウザが文字列を文字列以外の型として扱うSinkに対して、開発者に型の変換を強制するセキュリティ機能です。Trusted TypesによりDOM-based XSSを原理的に減らし、DOM-based XSSに対するセキュリティレビューを簡潔にすることが出来ます。 安全でないデフォルト近頃のWeb開発ではTypeScriptがよく使われるようになりました。これは型を明示することにより、エラーを事前に防げるからです。 セキュリティでも同じことが言えます。そもそもelement.innerHTMLにStringを代入出来ること自体が間違っているのです。innerHTMLはHTMLを代入する為のものであり、Stringを代入してもHTMLとして型の変換がされてしまうからです（i.e. re-pars
by Kaboompics .com ウェブサイトやSNSのページ上に表示される広告は、サイト運営側にとっては主要な収益源である一方で、目障りだとして嫌うユーザーも多く、中には広告ブロッカーを使って広告を非表示にするユーザーもいます。そんな中、広告料が主要な収益源であるFacebookは広告ブロッカーを回避するテクニックを使用していると、ソフトウェアエンジニアのDylan Paulus氏が解説しています。 How Facebook Avoids Ad Blockers | Dylan Paulus https://www.dylanpaulus.com/2019-11-24-how-fb-avoids-adblockers/ 広告収益に頼っている多くのウェブサイトでは、「広告ブロッカーをオフにしてください」とポップアップを表示してコンテンツの閲覧を制限するなどの対策を取り、広告ブロックを回
JavaScript eventing deep dive Stay organized with collections Save and categorize content based on your preferences. preventDefault and stopPropagation: when to use which and what exactly each method does. Event.stopPropagation() and Event.preventDefault() JavaScript event handling is often straightforward. This is especially true when dealing with a simple (relatively flat) HTML structure. Things
Syntax Highlighting code snippets with Prism and the Custom Highlight API 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 ウェブ上の構文ハイライトの一般的な仕組みは、すべてのトークンを要素で囲み、適切なクラスを割り当て、CSSを使って色付けすることです。 CSS Custom Highlight APIのおかげで、DOMツリーにを散りばめてカラー情報を追加するステップを省略できます。 Custom Highlight APIの基礎 ブラウザサポート 静的コードスニペットの構文ハイライト 仕組み ステップ1:セットアップ ステップ2:コードのトークン化 ステップ3:トークンとハイライトの関連付け Custom Highlight APIの欠点 制限されたスタイリングオ
前回のおさらい 前回の記事では、同じアプリケーションを6つのUIライブラリで実装し、Reactに有利な状況設定で作られたベンチマークを走らせると当然Reactが勝つという結果をお伝えしました。 そのベンチマークでは、「レンダリングのために高い負荷がかかっている状況でもユーザーが快適に入力を行えるかどうか」を測りました。 Reactでは、レンダリングのジョブを中断してユーザーの入力を処理するスケジューリングの機構が備わっているため、高負荷の状況でもユーザーの入力に高速に応答することができました。 また、今回書くベンチマークアプリは「最大限自然かつ簡潔」という条件で実装したため、スケジューリングがライブラリ本体に組み込まれているReactのみが有利な結果となりました。実はReact以外のライブラリは1文字入力されるたびに律儀にDOMに反映していましたが、Reactは本体からスケジューリング機構
昨年のはてなリモートインターン2021で講義を担当したフロントエンドブートキャンプ の資料をご覧頂いたことをキッカケに連絡を頂いて、マネーフォワードさんの社内勉強会でフロントエンドワークショップの講師を担当しました。 その際に使用したワークショップ資料について、マネーフォワードさんにも確認して、Scrapboxの以下のページに公開しました。 構成としては DOMとレンダリングパフォーマンス React入門ハンズオン フロントエンドツールチェインについて という3本立てになっています。 フロントエンドのモダン化を進める中で、普段の業務とは別にまとまった時間でチームメンバーにReactやフロントエンドに関するインプットをしたり手を動かしたりしたいというお話だったので、ハンズオン形式でReactで簡単なアプリケーションを作るハンズオンを中心としたワークショップ形式にまとめました。 はてなインター
React's UI State Model vs Vanilla JavaScript DOM State — A Beginner's Introduction
This article is aimed at beginners who've never had the chance to see 'why React'. It takes a very contrived example to make a point about how React's declarative state model could help keep state sanity when code scales. If you're an experienced developer these series of posts by Steven might give deep insights about why declarative abstractions scale in a way you might not have thought before. T
Web development moves at lightning speed. I still remember when I first started using libraries like jQuery, Prototype, script.aculo.us, Zepto, and many more. Even with modern tools like Angular, VueJS, React, Solid and Svelte, we still have to deal with the Document Object Model (DOM). While these frameworks encapsulate and hide direct DOM management, they still give us access to work with the DO
本記事は、2018年に筆者が書いた「Web最新技術がてんこ盛りのreact-native-domから目が離せない」という記事の一部分を抜き出したものです。 2018年の記事はproof of conceptなツールについて紹介していたものでした。そのため、時間が経てば陳腐化して読まれなくなりますし、私もそれでいいと思っています。 ただ、一部分については2021年になっても参照してくれる方がいるような、それなりにまとまった特異なノウハウだったことがわかってきました。そこで、単独の記事として分離し、Zennに転載することにした次第です。 React Nativeは2019〜2020年にかけて内部構造のリファクタリングが行われたため、本記事の内容が不正確になっている部分があるかもしれません。調査工数をかける余裕がないので、ひとまず2018年版のまま公開しますが、そのうち202x年版を書けたらいい
はじめに この記事は， Introducing Concurrent Mode (Experimental) – React を，和訳しつつ自分の解釈や図を少しだけ足したものになります． 筆者は，そこまで英語が得意ではないので，一部適切でない表現があるかもしれませんがご了承ください． Introducing Concurrent Mode (Experimental) Blocking vs Interruptible Rendering Concurrent Mode は，バージョンコントロール を使って説明します． ここで言うバージョン管理というのは，gitのようなバージョン管理システムです． ブランチを切って作業を行い，他の人が pull できるように作業ブランチをマスターにマージします． バージョン管理の概念が存在する前と後では，開発ワークフローは大きく異なっていました． ブランチ
DOMの規格にはRangeというクラスがあります。ドキュメント上の選択範囲などを表すのに便利なクラスです。 ついさっき、このクラスにまつわるパフォーマンス問題を解決したので記事に残そうと思います。 removeChild()が重い？ とあるDOM操作を行う処理のパフォーマンスが悪い、というチケットが立てられたのが発端でした。 最初にその部分を実装したのが私で、そこまでチューニングをしっかりしていた訳ではなかったのでまあそんなこともあるかな、と思いながらとりあえずパフォーマンス計測を行ってみたところ、appendChild()が実行時間の9割以上を占めているという結果でした。 appendChild()がなんでそんなに遅いんだろう？ appendChild()は親ノードの子のリスト末尾に1個ノードを追加するだけの処理です。普通に考えてこれだけではそこまで遅くなるとは思えない。 appendC
![[DOM] Rangeを作りすぎて激重になった話｜TechRacho by BPS株式会社](https://cdn-ak-scissors.b.st-hatena.com/image/square/b30f4f53ece097d30927e62ceda65d52134bc034/height=288;version=1;width=512/https%3A%2F%2Ftechracho.bpsinc.jp%2Fwp-content%2Fuploads%2F2020%2F11%2Fdom_enomous_ranges_eyecatch-min.png)
Hydration is Pure Overhead
In web development, hydration or rehydration is a technique in which client-side JavaScript converts a static HTML web page, delivered either through static hosting or server-side rendering, into a dynamic web page by attaching event handlers to the HTML elements. The above definition talks about hydration in terms of attaching event handlers to the static HTML. However, attaching event handlers t
Rails: フルスタックRailsの未来（1）Turbo Morph Drive（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: The future of full-stack Rails: Turbo Morph Drive—Martian Chronicles, Evil Martians’ team blog 原文公開日: 2023/10/16 原著者: Vladimir Dementyev（首席バックエンドエンジニア）、Travis Turner（技術編集者） サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 日本語ブログ: 合同会社イービルマーシャンズ - Qiita 日本語タイトルは内容に即したものにしました。 はじめに Web開発コミュニティの「フルスタック回帰」トレンドはますます勢いを増しています
Safe DOM manipulation with the Sanitizer API Stay organized with collections Save and categorize content based on your preferences. The new Sanitizer API aims to build a robust processor for arbitrary strings to be safely inserted into a page. Applications deal with untrusted strings all the time, but safely rendering that content as part of an HTML document can be tricky. Without sufficient care,
May 19, 2024 - Póvoa de Varzim, Portugal 🇵🇹 A virtual DOM in 200 lines of JavaScript In this post I’ll walk through the full implementation of a Virtual DOM in a bit over 200 lines of JavaScript. The result is a full-featured and sufficiently performant virtual DOM library (demos). It’s available on NPM as the smvc package. The main goal is to illustrate the fundamental technique behind tools li
This site is a pretty standard demo website; a site with links to different pages. Nothing to write home about except that the whole website is contained within a single JavaScript file, and is rendered dynamically, just in time, at the edge, close to the user. The routing is fairly minimal: we use the router module which uses URLPattern under the hood for pattern matching. /** @jsx h */ /// <refe
Fluor.js
on("click", "button", addClass("wobble", "h1")) on("animationend", "h1", removeClass("wobble")) What is it?Fluor.js is a tiny JavaScript library that provides you with a high-level language to easily add interactions and effects to your websites. It is great for prototypes, UI and UX research and for all websites that do not require the cumbersome machinery of a full-fledged framework. It is inspi
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML Centricで行きたい私たち - LIFULL Creators Blog
WHATWG Living StandardとHTMLパーサ - Qiita
LINE NEWS フロントエンドの自動テストの改善
ページ内のテキストを読めなくするChrome拡張を作った - 詩と創作・思索のひろば
WebAssembly Reference Typesで、WasmでDOMを操作する壁がここまで下がった
Vue 2で大きなデータを扱うときの性能改善手法
次の時代のCSS in JSはWeb Componentsを従える
Common mistakes with React Testing Library
View Transitions APIによるスムーズなページ遷移をNext.jsで簡単に試す
markedで安全にMarkdownからHTMLを生成するsafe-marked
ReactのRefとRefForwardingを一気に学び直した
Trusted Typesを利用してJavaScriptからのDOM操作をセキュアに行う
VanJS で素のDOM操作をリファクタしてみた
HTML attributes vs DOM properties
僕が勘違いしてた仮想DOMのメリット - Qiita
Facebookはどのようにして広告ブロッカーを回避しているのか？
JavaScript eventing deep dive | Articles | web.dev
シンタックスハイライトをライブラリなしで簡単に！Custom Highlight APIの魅力 - コハム
Reactに有利なベンチマークを作ってみた 【ハードモード】 - Qiita
マネーフォワードさんの社内勉強会でフロントエンドワークショップの講師を担当しました＆資料を公開します - ぱすたけ日記
HTML DOM — Phuoc Nguyen
React DOMとReact Nativeの違い（2018）
React Concurrent Mode の概要をおさえる - うどん よこみち
[DOM] Rangeを作りすぎて激重になった話｜TechRacho by BPS株式会社
Safe DOM manipulation with the Sanitizer API | Articles | web.dev
A virtual DOM in 200 lines of JavaScript
A Whole Website in a Single JavaScript File