わずか10KBのRAMで動く組み込みシステム向けにJavaScriptプログラムをコンパイルして実行できる「MicroQuickJS」
家電製品や産業機器などを制御するための組み込みシステムでは、コスト削減のためメモリの容量が限られています。近年ハードウェアの性能が向上したことにより一部でJavaScriptやPythonなどスクリプト言語がCやC++の代わり、もしくは補助として利用できるようになりました。そこで、メモリが少ない環境でもJavaScriptが実行できるJavaScriptエンジン「MicroQuickJS」をFFmpegの作者でもあるファブリス・ベラール氏が公開しました。 bellard/mquickjs: Public repository of the Micro QuickJS Javascript Engine https://github.com/bellard/mquickjs/ MicroQuickJSは10KBのRAMとCライブラリとして100KB程度のROMがあれば実行および構築が可能です
Converting values to strings in JavaScript has pitfalls
Let’s explore why some of these values produce exceptions or results that aren’t very useful. Tricky value: Symbol() # Symbols must be converted to strings explicitly (via String() or .toString()). Conversion via concatenation throws an exception: > '' + Symbol() TypeError: Cannot convert a Symbol value to a string Why is that? The intent is to prevent accidentally converting a symbol property ke
Announcing VoidZero - Next Generation Toolchain for JavaScript | VoidZero
TL;DR: I have founded VoidZero Inc., a company dedicated to building an open-source, high-performance, and unified development toolchain for the JavaScript ecosystem. We have raised $4.6 million in seed funding, led by Accel. Fifteen years ago, when I started building apps with JavaScript, it was mostly a browser-based scripting language. Today, it has evolved into the most widely used language in
JavaScript である値がオブジェクト型であることを判定する変なテク
TC39の活動で有名なJordan Harbandが作成した下記issueで知ったのでメモ。 前提として、次のコードによって x がオブジェクト型であることを判断できる。JavaScriptにおける null は typeof の結果が "object" になるという有名な変な挙動がカバーされている。 function isObjectA(x) { return (typeof x === "object" && x !== null) || typeof x === "function"; }
Maximum size of a <canvas> element
I'm working with a canvas element with a height of 600 to 1000 pixels and a width of several tens or hundreds of thousands of pixels. However, after a certain number of pixels (obviously unknown), the canvas no longer display shapes I draw with JS. Does anyone know if there's a limit? Tested both in Chrome 12 and Firefox 4.
Why I Love Remix
kentcdodds.com is completely custom built by me (and team) using Remix. After writing tens of thousands of lines of code using this framework, I have developed a great appreciation for what this framework can do for me and the users of my site. I want to tell you about some of it. In a sentence Here's the core reason I love using Remix to build websites: Remix enables me to build amazing user expe
ServiceWorkerの落とし穴8選 - Repro Tech Blog
はじめに Reproで開発を担当しているEdward Fox (edwardkenfox) です。2021年頃から Repro Booster というプロダクトの立ち上げに携わっており、開発を通して得た知見を共有できればと思い立ち筆を取るに至りました。4年ぶりのテックブログ執筆で少しばかり緊張していますが（？）、張り切ってやっていこうと思います。 Repro Boosterとは 2022年11月に正式リリースした、ウェブサイトの表示速度向上を実現するサービスです。「タグを入れたその日から、Webサイトが速くなる」というタグラインのもと、タグ（JavaScript）の設置だけでウェブサイトの表示速度が簡単に実現できるということで、リリース以来多くのお客様・サイトでご利用いただいています。 Repro BoosterではServiceWorkerと呼ばれる技術を最大限活用して多くの機能が実現さ
Optimize long tasks | Articles | web.dev
Published: September 30, 2022, Last updated: December 19, 2024 Common advice for keeping JavaScript apps fast tends to boil down to the following advice: "Don't block the main thread." "Break up your long tasks." This is great advice, but what work does it involve? Shipping less JavaScript is good, but does that automatically equate to more responsive user interfaces? Maybe, but maybe not. To unde
iOSのMobile Safari上でのfocus()が妙な件を調べてみた - mixi engineer blog
こんにちは。ミクシィUX統括部にて、mixi Touchの開発を担当しております戸高です。 JavaScriptでの開発を行う事が多いのですが、iOSのブラウザ（Mobile Safari）のfocusの挙動について少しクセがあり、 調べてみましたので、お知らせいたします。 通常、<textarea>や<input type=”text”>等のフォーム要素に対して、フォーカスを与えたい場合、focus()メソッドを使用します。 iOSのブラウザ（以下、Mobile Safari）にて、以下のコードを実行してみます。 （分かりやすい様にjQueryを使用させて頂きました） なお、検証端末にはiPhone4S iOS5.0(9A334)を使用しています。 HTML <!DOCTYPE html> <html> <head> <meta http-equiv=”Content-Type” con
Custom ESM loaders: Who, what, when, where, why, how
DEV Community Follow A space to discuss and keep up software development and manage your software career Open Forem Follow A general discussion space for the Forem community. If it doesn't have a home elsewhere, it belongs here Future Follow News and discussion of science and technology such as AI, VR, cryptocurrency, quantum computing, and more.
拡張子に Web アプリを関連付ける File Handling API の使い方 - 株式会社カブク
はじめに File Handling API がデフォルトで有効化された Chrome 102 と Edge 102 がリリースされました。この機能により、 MIME タイプや拡張子に Web アプリを関連付けて開けるようになります。派手な機能のわりには全然話題になっていないように感じるのですが、気のせいでしょうか？ 私は DXF（CAD 用のファイル形式の 1 つ）の中身を覗くツールを Web アプリとして作っています。試しに拡張子 .dxf を当該アプリに関連付けられるようにしてみました。 実装 ざっくり言うとこれだけです。 マニフェストに file_handlers フィールドを持たせる スクリプトから window.launchQueue.setConsumer() を呼び出して、関連付けて開かれたファイルを取得する ファイルを取得しさえすれば、あとは <input type="f
今Partytownがヤバい。JavaScript Sandboxの未来はどっちだ？
概要 Partytownというプロジェクトが先月発表された。このプロジェクト自体はWebのパフォーマンス向上(3rd Party Scriptによるブロッキングの低減)を主目的としているが、実質ブラウザにおけるJavaScript Sandboxの方向性に一石を投じるものであるとして自分は理解した。本稿ではこちらについて背景とともに解説を試みる。 WebブラウザにおけるJavaScript Sandbox JavaScriptで記述されたWebアプリケーションにおいて、たとえばプラグイン機構を実現したいなど、他Partyが提供あるいはユーザ自身が記述したスクリプトを、ホストとなるアプリケーションに影響を与えることなく実行することを許可したい、というケースはままある。2000年代に跋扈したブログパーツの類はWebコンテンツに対するプラグインの代表例とも言えるが、埋め込み先ページに対しての全権
[ECMAScript] Pipe operator 論争まとめ – F# か Hack か両方か - 株式会社カブク
※ 2021/09/15 時点の話です。議論が活発なので、これからどう流れるか分かりません。この記事ではたくさんのリンクを貼っていますが、議論の焦点を理解するにあたって最も重要なリンクはこれです。 TC39 Pipeline Operator – Hack vs F# https://benlesh.com/posts/tc39-pipeline-proposal-hack-vs-f-sharp/ 2 つの仕様案 TC39 の Pipe operator （以前は Pipeline operator と呼ばれていました、 Wikipedia によれば Pipe operator を日本語で「パイプライン演算子」と呼ぶようです）のプロポーザルには少なくとも 2 つの異なる仕様案「F# pipe」と「Hack pipe」があります。以前はこれらを組み合わせた「Smart mix」案もありました
![[ECMAScript] Pipe operator 論争まとめ – F# か Hack か両方か - 株式会社カブク](https://cdn-ak-scissors.b.st-hatena.com/image/square/cfc7395675434dd8f96ea257a944337412975227/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fwww.kabuku.co.jp%2Fwp%2Fwp-content%2Fuploads%2F2021%2F09%2Ffsharp-pipe-rxjs-1024x321.png)
DOMMatrix: 2D / 3D 変形（アフィン変換）の行列を扱う DOM API - 株式会社カブク
DOMMatrixReadOnly と DOMMatrix でできる操作を見ていきましょう。 DOMMatrixReadOnly／DOMMatrix 初期化 コード例は DOMMatrix で記述しますが、 DOMMatrixReadOnly でも同じように使えます。 // 単位行列 new DOMMatrix() // 2D 変形用の 2×3 行列: 6 要素の配列 [a, b, c, d, e, f] new DOMMatrix([1, 2, 3, 4, 5, 6]) // 3D 変形用の 4×4 行列: 16 要素の配列 [m11, m12, ..., m44] new DOMMatrix([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]) // CSS transform で有効な文字列 new DOMMatrix('m
徹底解説！ return promiseとreturn await promiseの違い
先日、こちらのツイートを見かけました。 それに対して筆者は以下のツイートをしたところ、いくつかの反応が寄せられました。 コード部分を再掲します。 async function foo1() { return await Promise.resolve(); } async function foo2() { return Promise.resolve(); } async function wait() { await null; } // pika // chu // と表示される foo1().then(() => console.log("pika")); wait().then(() => console.log("chu")); // chu // pika // と表示される foo2().then(() => console.log("pika")); wait().the
memo？ useCallback？ パフォーマンスが気になる JSXer には SolidJS がオススメ - Qiita
パフォーマンスなんか気にしたくない Give a man a bug and he'll work for a day. Give a man a benchmark and he'll work for a lifetime.1 https://twitter.com/awesomekling/status/1318615899910307850 パフォーマンスなんかに気をとられながら実装したくないんですよ。 React の memo() や useCallback() のような最適化のためだけの API を呼ぶ呼ばないで 1 ミリ秒も悩みたくないんです。そんな API は存在しないでほしい。 でも気になっちゃうんです。というか、まったく最適化せずに React でアプリを構築していくと、カクつきを体感するぐらいには遅くなりますよね。気にせざるを得ません。 つい最近も React のパフ
HSL / HSV より人間に寄り添った色表現 CIE L*C*h を使いたい - Qiita
CIE LCh カラーモデルベースの色相環カラーピッカーを作りました。 https://luncheon.github.io/lch-color-wheel/ この記事はその経緯です。 HSL 色表現と色相変数 CSS で使える色表現の 1 つに HSL カラーモデル があります。 HSL では色相（Hue）、彩度（Saturation）、輝度（Lightness）の 3 軸で色を表現します。 色相を CSS カスタムプロパティ（変数）にすれば、彩度と輝度を固定して色相だけ変えることが簡単にできます。 .btn { background-color: hsl(var(--hue), 100%, 60%); border: 2px solid hsl(var(--hue), 100%, 40%); } .btn:hover { box-shadow: 0 0 8px hsl(var(--hu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Java 15 のテキストブロックを横目に C# 11 の生文字列リテラルを眺めて ECMAScript String dedent プロポーザルを想う - 株式会社カブク
フロントエンドのデザインパターン
GitHub - vitejs/vite: Next generation frontend tooling. It's fast!
