mouseover 中に表示される DOM のデバッグ | blog.jxck.io
Update 2024-03-30: Chrome 123 から "Emulate a focused page" が追加された。 これを用いれば良いため、以降の全ての方式は古くなった。 Apply other effects: enable automatic dark theme, emulate focus, and more https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_a_focused_page マウスが乗ってないと出ない UI も、そこに Tab などでフォーカスを移し、その状態で Dev Tools の "Emulate a focused page" を有効にすれば良い。 Intro 先日、後輩が「mouseover 中にしか表示されない DOM のデバッグ」に手こずっ
async-singleton - 橋本商会
promiseのthrottleとかdebounceするやつなんだけど、そのへんの名前がnpmに空いていなかった
Stimulus、悪くない
Stimulus: A modest JavaScript framework for the HTML you already have. 2020年末にリリースされた Stimulus 2.0 を試して気づいたことをメモしておく。Stimulus は Rails で有名な Basecamp のメンバーによって開発された生 DOM をベースに、できるだけ template に JS を書かずに動的な DOM の生成、変更を実現するためのライブラリである。 昨今流行りの React, Vue, Angular などの VirtualDOM 系のツールとは根本的に考え方が異なり、今からこれを採用するのはやや申し訳ないというか、正直に言うとよいイメージはなかったし、例えばフロントエンドエンジニアとしてスキルアップしたいぜーという人には合わないと思うが、ただ、どうせサーバサイドの開発が必要で、分
Catalyst
<hello-world> <input data-target="hello-world.name" type="text"> <button data-action="click:hello-world#greet"> Greet </button> <span data-target="hello-world.output"> </span> </hello-world> import { controller, target } from "@github/catalyst" @controller class HelloWorldElement extends HTMLElement { @target name: HTMLElement @target output: HTMLElement greet() { this.output.textContent = `Hello,
ブラウザとNode.jsで動く1kBのキーバリューストレージライブラリを書いた
azu/kvsというブラウザとNode.jsで動くファイルサイズが小さいキーバリューストレージを作りました。 モチベーション ファイルサイズが小さくIndexedDBを使っていて、Node.jsでも透過的に同じAPIで利用できるライブラリが必要となったため作りました。 textlint-editorというアプリを書いていて、キャッシュストレージとしてlocalstorage-ponyfillを使っていました。 しかし、localstorage-ponyfillはブラウザとNode.jsで透過的に動くストレージライブラリですが、LocalStorageベースとなっています。 textlint-editorでは、スクリプトをWeb Workerで動かすため同期的なAPIであるLocalStorageは利用できません。 そのため、IndexedDBベースでシンプルなキーバリューストレージを扱える
tinykeys
npm install tinykeys Examples Try some of the following: Shift+D y e e t Control+D (Windows/Linux) or Command+D (Mac) import tinykeys from "tinykeys" tinykeys(window, { "Shift+D": () => { alert("The 'Shift' and 'd' keys were pressed at the same time") }, "y e e t": () => { alert("The keys 'y', 'e', 'e', and 't' were pressed in order") }, "$mod+([1-9])": event => { event.preventDefault() alert(`Eit
Svelteで始める頑張らないフロントエンド生活 前編
フロントエンドの世界も随分と様変わりしました。便利なツールが多数導入され、高度なフレームワークが整備され、言語には静的型検査が付き、より本格的なアプリケーションの制作に集中できるようになりました。 しかしそれらの環境は業務には適していても、必ずしも個人開発に適しているとは言えません。過剰な抽象化がほどこされ、混乱を招くこともあります。 そんな中で、最近話題のフレームワークとしてSvelteというものがあります。Svelteはシンプルかつ十分な機能を提供します。 対象とする読者 この記事は以下の読者を対象としています： HTML/CSSはある程度わかるJavaScriptはちょっと書いたことがあるReact/Vue/Angularは自分には難しすぎたでもフロントエンドで遊んでみたい フロントエンドの参入障壁 フロントエンドと言えば、かつてはちょっと頑張れば誰にでもできるような平和な分野でした
JavaScriptの日時処理はこう変わる！ Temporal入門 - Qiita
日時の処理は様々なアプリケーションにおいて避けては通れないタスクです。JavaScriptにおいてもそれは例外ではありません。 JavaScriptでは最初期からDateオブジェクトが日時を表すオブジェクトとして存在していましたが、これは非常に使いにくいAPIで知られています。その結果、momentに代表されるような日時処理ライブラリを使うのが事実上スタンダードとなっています。 この記事では、将来的に日時処理の有力な選択肢になると期待されるモジュールであるTemporalについて解説します。Temporalでは、既存のDateによる日時処理のつらい部分が解消されることが期待されています。 なお、例によってTemporalはまだ策定中の仕様です。現在Stage 2というフェーズにあり、APIを鋭意策定中という状況です。よって、この記事にかかれている内容は確定までにまだ変化するかもしれません。
immerのコードを読んだ - console.lealog();
GitHub - mweststrate/immer: Create the next immutable state by mutating the current one （MobXの作者による）イミュータブルに状態を操作するユーティリティライブラリ。 ちなみに、この世で最初にスターしたのは俺ですｗ immerとは 読んだのは`v0.8.2`。 ImmutableJSみたく独特なAPIを覚えなくてもいい、今まで通り配列やオブジェクトを変更すればいい。 それなのにイミュータブルにデータを扱える！素敵！というやつ。 // いわゆるreducerが const byId = (state, action) => { switch (action.type) { case RECEIVE_PRODUCTS: return { ...state, ...action.products.reduc
IntersectionObserverで要素が画面内に入ってきたかを判定する
ウェブにおいて、ある要素が他の要素と重なっているかどうか判定したいことは、よくあります。代表的な例としては画像の遅延読み込みがあります。画像が画面内に入ってきてから読み込むことで、負荷を抑えるテクニックです。しかし従来の方法は、パフォーマンスへの悪影響や、コードの複雑化など、様々な問題を含んでいました。 そこで、近年になって新しく導入されたIntersectionObserverを使えば、パフォーマンスへの影響を気にすることなく、要素の交差判定を簡単に実装することができます。 要素と要素の交差判定 画像の遅延読み込みやスクロールアニメーションを実装する際、「要素が画面内に入ってきたか」という情報が重要になります。これは「要素と他の要素（画面の場合はviewport）の交差判定」と言い換えることもできます。 要素の交差判定は、scrollイベントを監視し、scrollTopなどのプロパティを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Neo
(t,i,x,y) => "creative code golfing"
GitHub - tc39/proposal-record-tuple: ECMAScript proposal for the Record and Tuple value types. | Stage 2: it will change!
package.jsonの各種要素を読み込みたい！
GitHub - fenomas/wasgen: Web Audio sound generator
GitHub - cxxxr/valtan: Common Lisp to JavaScript compiler
ドッグ on Twitter: "eslint の require-atomic-updates ルール良い．例えば if (foo) { await foo.cleanup(); foo = null; } みたいなコードがあると，await してる… https://t.co/qDYoOzLMjV"
Just Tried Stimulus
GitHub - terser-js/terser: JavaScript parser, mangler, optimizer and beautifier toolkit for ES6+
次に何をするか: 参考リンク集 · Issue #510 · asciidwango/js-primer
