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 Won't Use Next.js
You’ve got a new project to work on. Or you’ve got an existing project you’re motivated to upgrade to a more modern approach. Or perhaps you’re dissatisfied with your current modern framework or second-guessing yourself and you’re investigating alternatives. In any case, you’ve got a decision to make. There are lots of “modern” frameworks to choose from. Even if you’re not facing this choice right
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
Optimize long tasks Stay organized with collections Save and categorize content based on your preferences. Commonly available advice for making your JavaScript apps faster often includes "Don't block the main thread" and "Break up your long tasks." This page breaks down what that advice means, and why optimizing tasks in JavaScript is important. What is a task? A task is any discrete piece of work
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
Custom ESM loaders: Who, what, when, where, why, how Most people probably won't write their own custom ESM loaders, but using them could drastically simply your workflow. Custom loaders are a powerful mechanism for controlling an application, providing extensive control over loading modules—be that data, files, what-have-you. This article lays out real-world use-cases. End users will likely consum
拡張子に 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/3c5228e05eb2c2945c402094eb984595033f4d3f/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
memo？ useCallback？ パフォーマンスが気になる JSXer には SolidJS がオススメJavaScriptTypeScriptフロントエンドReactSolidJS パフォーマンスなんか気にしたくない 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 は存在しないでほしい。 でも気に
HSL / HSV より人間に寄り添った色表現 CIE L*C*h を使いたい - Qiita
CIE L*C*h カラーモデルベースの色相環カラーピッカーを作りました。 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(--
GitHub - vitejs/vite: Next generation frontend tooling. It's fast!
Next Generation Frontend Tooling 💡 Instant Server Start ⚡️ Lightning Fast HMR 🛠️ Rich Features 📦 Optimized Build 🔩 Universal Plugin Interface 🔑 Fully Typed APIs Vite (French word for "quick", pronounced /vit/, like "veet") is a new breed of frontend build tooling that significantly improves the frontend development experience. It consists of two major parts: A dev server that serves your sour
[Web フロントエンド] Elm に心折れ Mint に癒しを求める | Kabuku Developers Blog
こんにちは、 Elm Elm – A delightful language for reliable webapps https://elm-lang.org/ はじめに · An Introduction to Elm （Elm 公式ガイド日本語訳） https://guide.elm-lang.jp/ Elm は関数型の小さな言語仕様を持つ altJS です。 Redux が影響を強く受けた ことでも有名ですね。 “No Runtime Exceptions” は魅力的ですし、何より興味深いのは The Elm Architecture です。 Redux にはあまりセンスを感じられなかったのですが、 The Elm Architecture はとても良さげに見えました。 Elm が持つ 代数的データ型 と パターンマッチ、状態の不変性、 レコードの部分更新式 などとうまく馴染み、簡
![[Web フロントエンド] Elm に心折れ Mint に癒しを求める | Kabuku Developers Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/d253af95307425bc2d32a67dc0ddfd70fbf3ad98/height=288;version=1;width=512/https%3A%2F%2Fwww.kabuku.co.jp%2Fwp%2Fwp-content%2Fuploads%2F2020%2F03%2Fcut1_horagai-1200x801.jpg)
Virtual DOM is pure overhead
Virtual DOM is pure overhead Let's retire the 'virtual DOM is fast' myth once and for all Rich Harris Dec 27 2018 If you've used JavaScript frameworks in the last few years, you've probably heard the phrase 'the virtual DOM is fast', often said to mean that it's faster than the real DOM. It's a surprisingly resilient meme — for example people have asked how Svelte can be fast when it doesn't use a
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Java 15 のテキストブロックを横目に C# 11 の生文字列リテラルを眺めて ECMAScript String dedent プロポーザルを想う - 株式会社カブク
フロントエンドのデザインパターン
Learn Deno: Chat app