テキストをコピペするときにスタイルごとコピーされちゃうのってどんな仕組み？ - Qiita
概要 文章をコピペしてエクセルに張り付けたときに、画面のスタイルもコピーされてしまって困ったことはありますか？ありますよね！ （↓こんな感じ） 私もよくやってしまうのですが、実際にどのような処理が行われているのかよく分かっていませんでした。理解を深めるためにも、自分で実装して謎を解いていきたいと思います。 3つパターンの処理を実装 比較のため、プレーンテキスト・HTMLテキスト・リッチテキストのコピー機能をサンプルプログラムを実装してみました。 （リッチテキストのコピーが、範囲選択してコピペしたときと同じ機能を想定しています。） HTMLファイル 画面表示されるHTMLは下記のような感じです。各コピー処理でid="message"の部分を固定でコピーするようにします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"
ENCA 3日目: プリミティブイテラブルを退ける規約制定
イテラブル（反復可能）とは ES2015 から仕様の中にイテラブルインターフェースとイテレーターインターフェースが定義されています。イテラブルインターフェースを実装したオブジェクトやプリミティブのことを単にイテラブル（反復可能）と呼びます。 ざっくり TypeScript の型で表現すると以下のようになります（実際の TypeScript での型はジェネリクスになっています）。 interface Iterable { [Symbol.iterator](): Iterator; } interface Iterator { next(value?: any): IteratorResult; return?(value?: any): IteratorResult; throw?(error?: any): IteratorResult; } interface IteratorResu
【JavaScript】関数名をclose()にするのは気をつけろ
単なる自分のやらかしの共有です。この記事は事実をもとにしたフィクションです。 消し忘れたclose()関数 あるときモーダルコンポーネントを閉じる、close()関数というのを作りました。後日、リファクタリングをするときこの呼び出されているclose()関数がとあるコンポーネントから取り除かれることになりました。しかし誤って1つ削除し忘れてしまい、close()関数が取り残されてしまいます。 このとき、import文なども取り除かれたのですが、何故か未定義エラーなどは出ずに見過ごされてしまいました。（察しの良い人はピンとくるかも） 何故か消えるウィンドウ そんな中、消し忘れたコンポーネントを含む画面で特定の手順を踏むと開いたブラウザウィンドウが閉じてしまう現象が確認されるようになりました。 どうやら発生源は先程のリファクタリング作業らしい… window.closeというJavaScrip
Introducing the vlt Package Manager & Serverless Registry
AuthorsNameDarcy ClarkeX (Formerly Twitter)@darcyNameRuy AdornoBluesky@ruyadorno.comNameIsaac SchlueterX (Formerly Twitter)@izsNameLuke KarrysBluesky@lukekarrys.com After spending the past six months heads-down, we’re excited to share our foundational Package Manager Client & Serverless Registry.A New JavaScript Package Manager:First up, we're introducing vlt, a brand new, free, and open-source Ja
Generative AI Scripting
Programmatically assemble prompts for LLMs using JavaScript. Orchestrate LLMs, tools, and data in a single script. JavaScript toolbox to work with prompts Abstraction to make it easy and productive Seamless Visual Studio Code integration or flexible command line Built-in support for GitHub Copilot and GitHub Models, OpenAI, Azure OpenAI, Anthropic, and more
Dialog と Popover #9 | blog.jxck.io
Intro ここまで解説した仕様を踏まえ、いくつかの代表的なユースケースの実装について考えていく。 あくまで仕様の組み合わせ方についての解説であり、実装そのものの推奨ではない。 また、ここで紹介する仕様はまだ変更の可能性があり、かつ実装も揃っていないものがある点に注意 Toast 次は、Popover の源流にもなった、画面端にメッセージを表示するいわゆる Toast UI について考えてみる。想定するのは以下のようなものだ。 メッセージの性質によって、色やアイコンのスタイルを変えられ、同時に複数積み上げて表示できるといった仕様が一般的だ。 HTML 基本は <div popover> となる。また、複数のメッセージがあった場合に、他のが表示されても消えないよう、manual を指定する。 <div popover="manual"> </div> もし内容のレイアウトで Flex や G
5つのECMAScript ProposalがStage4になど: Cybozu Frontend Weekly (2024-10-15号)
5つのECMAScript ProposalがStage4になど: Cybozu Frontend Weekly (2024-10-15号) こんにちは! サイボウズ株式会社フロントエンドエンジニアの Saji (@sajikix) です。 はじめに サイボウズでは毎週火曜日に Frontend Weekly という「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2024/10/15 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 PR TIMES フロントエンドの CI パイプラインを改善して、CI 処理時間と Billable Time を 50%を削減した話 | PR TIMES 開発者ブログ changed-files という github action 使って、変更があった特定のディレクトリのみ
WasmerでJavaScriptやブラウザからCプログラムをコンパイル可能に ローカルで試せるデモも公開
Wasmerは、clangを実行することで可能になるユースケースの例として、以下を挙げている。 Wasmer CLI（コマンドラインインタフェース）を使用するだけで、CコードをWebAssemblyに簡単にコンパイルできる。ツールチェーンや複雑なインストールは不要で、Wasmerをインストールするだけで準備が完了する 「WASIX」がセルフホストされるようになり、WASIX自身と任意のCプログラムをコンパイルできる。WASIXは、WebAssemblyでネットワークやファイル、メモリなどのシステムリソースを抽象化するAPI仕様である「WASI」を拡張し、POSIX（Portable Operating System Interface）に対応させたものだ JavaScriptから直接Cプロジェクトをコンパイルできる（Wasmer JS SDKでclangを使用する方法については後述） ビル
Dialog と Popover #8 | blog.jxck.io
Intro ここまで解説した仕様を踏まえ、いくつかの代表的なユースケースの実装について考えていく。 あくまで仕様の組み合わせ方についての解説であり、実装そのものの推奨ではない。 また、ここで紹介する仕様はまだ変更の可能性があり、かつ実装も揃っていないものがある点に注意 Cookie バナー 次は、「Cookie 利用への同意」、いわゆる Cookie バナーの UI について考えてみる。想定するのは以下のようなものだ。 前回の規約への同意と異なり、このバナーは画面表示時から右下に表示され、同意か拒否を選択するまで表示し続ける。つまり、表示中は他の操作をブロックしたりはしない。 つまり Dialog ではあるが Modal ではないため、show() する前提で実装を考えていく。 HTML HTML の注意点は、前回の規約と大きくは変わらない。 まず、最初から表示しておくために open 属
Dialog と Popover #7 | blog.jxck.io
Intro ここまで解説した仕様を踏まえ、いくつかの代表的なユースケースの実装について考えていく。 あくまで仕様の組み合わせ方についての解説であり、実装そのものの推奨ではない。 また、ここで紹介する仕様はまだ変更の可能性があり、かつ実装も揃っていないものがある点に注意 規約への同意 まずは、「規約への同意」の UI について考えてみる。想定するのは以下のようなものだ。 見ての通り、この規約に同意しないと先に進むことができない、ブロックを伴う UI であるため、Modal Dialog として実装するのが妥当だろう。 どのようなきっかけで表示されるかはわからないため、JS から showModal() する前提で実装を考えていく。 HTML まず、基本的な HTML 要素を並べてみよう。(<dialog> と関係ない部分は簡略化) 要件はいろいろあるだろうが、最低限以下の 2 つを必須とする
CSS新機能のWorking Draft公開など: Cybozu Frontend Weekly (2024-10-08号)
CSS新機能のWorking Draft公開など: Cybozu Frontend Weekly (2024-10-08号) こんにちは！サイボウズ株式会社フロントエンドエンジニアのsaku (@sakupi01)です。 はじめに サイボウズ社内では毎週火曜日にFrontend Weeklyと題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024/10/8のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 CSS Values and Units Module Level 5 CSS Values and Units Module Level 5のWorking Draftリリースの紹介記事です。 Level 5には多くの機能が追加・拡張されており、Level4との差分仕様としてまとめられています。 attr
イテレータを分岐させるとどうなる？ Iterator Helpersに見るJavaScriptのイテレータの挙動
2024年10月のTC39ミーティングでは、Iterator HelpersがStage 4となり、ECMAScriptの仕様に追加されることが決定しました。Iterator HelpersはすでにGoogle Chromeなどで試すことができます。 Iterator Helpersは概してわかりやすい機能群ではありますが、やはり元々がJavaScriptということで、直観的には理解しがたい挙動もあります。そのような挙動は、とくにイテレータを分岐させたときに見られます。 ということで、この記事ではイテレータを分岐させた場合の挙動を見ていきましょう。Iterator Helpersそのものに関する基礎的な説明は省略していますので、他の記事をご覧ください。 イテレータを分岐させる Iterator Helpersは、イテレータに生えたメソッドであり、返り値は新しく作られたイテレータです。そのた
バーチャルスクロールの限界を突破する
はじめに 私は今、CSVエディタ SmoothCSV 3 を開発しています。フレームワークとして Tauri を採用しており、レンダラーにはWebの技術（React + TypeScript）を使っています。 CSVエディタは大量の行・セルを表示する必要がありますが、Webの技術ではこのようなシーンではバーチャルスクロールを使うのが定石です。 SmoothCSVでもバーチャルスクロールを使っていましたが、どうやらこのバーチャルスクロールにも限界があるらしく、数百万行のような極端に大量のデータを表示する場合に最後まで表示しきれない問題に遭いました。 ここではバーチャルスクロールの基本と、その限界をどう乗り越えたかを紹介します。 About Me 株式会社ヘンリーでソフトウェアエンジニア & アーキテクト的なことをしつつ、個人開発してます。 Social accounts: kohii on
JavaScriptランタイムのBunが、C言語のコンパイルとJavaScriptプログラムからの実行をサポート
JavaScriptランタイムのBunが、C言語のコンパイルとJavaScriptプログラムからの実行をサポート JavaScriptランタイムのBunは、C言語のコンパイルとJavaScriptプログラムからの実行をサポートすると発表しました。 In Bun v1.1.28, we added support for compiling and running C from JavaScripthttps://t.co/eoClllphwj pic.twitter.com/YwCW7Uc7CT — Bun (@bunjavascript) September 18, 2024 JavaScriptを用いてアプリケーション開発を行う際に、システムの持つ機能を呼び出したい場合にはNode.jsやBunに実装されたN-API、もしくはJavaScriptエンジンV8のAPIをC言語経由で呼び出
Swapy, a simple JavaScript tool for converting any layout you have to drag-to-swap layout
Specify Slots and Items To specify a slot, give its element data-swapy-slot="anyUniqueNameYouWant". Each slot can only contain a single item. Items are what you drag and drop. To mark an element as an item, add this data attribute: data-swapy-item="anyUniqueNameYouWant". <div class="container"> <div class="section-1" data-swapy-slot="foo"> <div class="content-a" data-swapy-item="a"> <!-- Your cont
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - extism/js-sdk: Run Extism WebAssembly plug-ins / functions from JavaScript (supports major browsers, Node.js, Deno, Bun, and Cloudflare Workers)
GitHub - ten1seven/what-input: A global utility for tracking the current input method (mouse/pointer, keyboard or touch).
GitHub - drogus/jawsm: JavaScript to WASM compiler
GitHub - kaplayjs/kaplay: 🦖 A JavaScript/TypeScript Game Library that feels like a game.
What in Zod's name?
