前回の記事では、JavaScript の実行エンジン V8 の JIT 出力コードを読んでみました。記事は M1 Mac 上で動かした結果でしたので、ARM アーキテクチャのアセンブラを読むことになりました。 さてそんな ARM アーキテクチャですが、最近の ARM には FJCVTZS という JavaScript 専用の機械語命令があるのをご存知でしょうか？CPU に、特定の言語（それもコンパイラを持たない JavaScript）専用の命令があると知ったとき、私は大いに驚きました（過去にも Jazelle みたいなものはありましたが） 今回は、この FJCVTZS 命令について、実際にどれだけ効果があるのか、V8 をビルドしながら調べてみましょう。 FJCVTZS 命令とは？ FJCVTZS 命令は、Arm v8.3 から導入された JSCVT 命令の一つで、JavaScript の言
インストールが完了したらアドレスバーに chrome://flags と入力して設定画面を開きます。以下の 2 つのフラグを設定します。 Enables optimization guide on device: Enabled BypassPerfRequirement Prompt API for Gemini Nano: Enabled また、あらかじめ Gemini Nano のモデルをダウンロードしておく必要があります。アドレスバーに chrome://components/ と入力して Optimization Guide On Device Model の「アップデートを確認」をクリックします。 Gemini Nano を使ってみる それでは、Gemini Nano を使ってみましょう。以下のコードをコンソールに貼り付けて実行します。 const canCreate = aw
AddressableによりWebGLゲームのクラッシュ率が改善した話 - Mirrativ Tech Blog
こんにちは、ミラティブ菅谷です。MirrativのWebGL製ライブゲームにて、アセットのロード方法をインスペクタでの直接参照からAddressable Asset System（以下Addressable）に変更したことで、クラッシュ率が大幅に改善し、クラッシュせずにプレイが終了した「正常プレイ率」は98%まで改善しました。本記事では、その具体的な手順と効果について紹介します。 課題背景 MirrativのライブゲームはWebGLで動いていますが、特にモバイルのWebGLではパフォーマンスに気をつける必要があります。今回改善を行ったプロジェクトではもともとAddressableを使用していませんでした。プロジェクトの初期リリース時点では大きな問題もなく運用できていましたが、アセットやリソースを追加していくにつれてクラッシュが多く見られるようになりました。ただし、WebGLではクラッシュし
はじめに 今回書く開発者体験について 具体的な試み eslint pluginによるコーディング規約の明文化 Notionへのリソース集約 デザイントークンと型定義 おわりに はじめに こんにちは。enechainで働いている takurinton です。 enechainではさまざまな開発者体験向上の取り組みが試行されていますが、今回は自分が主に見ているデザインシステムにフォーカスして記事を書こうと思います。 弊社のデザインシステムに関しては、 @Shunya078 の なぜ我々はデザインシステムを創るのか？ を読んでいただくと背景がご理解いただけると思います。 今回書く開発者体験について 開発者体験の定義についてはさまざまな解釈があると思いますが、今回は以下の3つのトピックに絞って紹介します。 eslint pluginによるコーディング規約の明文化 Notionへのリソース集約 デザ
ConsoleAppFramework v5 - ゼロオーバーヘッド・Native AOT対応のC#用CLIフレームワーク 2024-06-13 ConsoleAppFrameworkの完全に新しいバージョンをリリースしました。完全に設計しなおして実装も完全に作り直された、何もかもが新しいフレームワークになっています。設計指針として「Zero Dependency, Zero Overhead, Zero Reflection, Zero Allocation, AOT Safe」を掲げ、もちろん、他を圧倒的に引き離すパフォーマンスを実現しています。 これはコールドスタートアップ・ウォームアップなしでのベンチマークとなっていて、CLIアプリケーションでの実際での利用に最も即したものだと考えています。System.CommandLineと比較すれば280倍！メモリアロケーション量もほかのフレ
The last year has been a great one for WebKit. After unveiling Safari 17 beta at WWDC23, we’ve shipped six releases of Safari 17.x with a total of 200 new web technologies. And we’ve been hard at work on multiple architectural improvement projects that strengthen WebKit for the long-term. Now, we are pleased to announce WebKit for Safari 18 beta. It adds another 48 web platform features, as well a
Async Ruby on Rails
Async programming can make your apps faster. I’ll share how you can use async in Ruby on Rails to speed up your app. While there are examples in Ruby, the principles apply to any language. I’ll group the examples into two basic principles. Here’s the first one: Don’t do now what you can do later Delay doing stuff as much as possible. Being lazy is not necessarily a bad thing. In practice, that mea
サイト開発の初期で課題になることの一つに開発途中でダミー画像をどうするかという問題があります。 多くのプロジェクトではAPI連携などが完了して正式な画像で開発できるようになるのは開発終盤になることもあり、それまでつなぎのダミー画像をどう見せるかは悩みどころです。 デザインカンプなどから書き出して静的に配置しても良いのですが、手間がかかる上にダミー画像が削除されず本番データとして残り続けることがよくあります。 https://placehold.jp/ といったプレースホルダー画像用のサービスもありますが、開発途中のサイトで外部サービスを利用することのセキュリティ的な懸念もあります。 Next.js(App Router)にはImageResponseという画像生成が手軽にできる機能がありますのでプレースホルダー画像を自作してしまえば、前述の問題や懸念を取り払うことができるようになります。
Storybook8.1からSubpath importsを使ったモジュールのモックができるように
- import { type GetExamplesResponse, getExamples } from "../../api/example"; + import { type GetExamplesResponse, getExamples } from "#src/api/example"; Node.js が提供する Subpath imports は Vite と Webpack、また TypeScript5.4 でサポートされている。実際に次の環境で試すと、型の補完も効くし、モジュールがモックされた。tsconfig も Vite の config もいじってないのに。 Storybook: 8.1.6 Vite: 5.2.8 TypeScript: 5.4.5 @storybook/testのfnと Story のbeforeEachを使うことで、Jest や Vite
Apollo Client 3.8 から useFragment という React hook が導入されました。 今回はこの useFragment を利用している Component を対象としたテストや Storybook の書き方についての覚書です。 先日に別のエンジニアから、Storybook の記述に際して相談を受けた際のやり取りを元ネタとしています。 なお、途中のコードが長くなりそうなため、先に記事で取り扱いたいトピックを挙げておきます。 useFragment を利用している Component の Storybook が記述できるようになることStorybook で扱う Fragment のスタブデータの構築に一定の柔軟性を持たせること各トピックに対応する解として、この記事では以下の方式について解説します。 Apollo Cache を用意し、Story 描画前に所望の状
How to Document Picture-in-Picture in React (with Typescript) | HackerNoon
How to Document Picture-in-Picture in React (with Typescript) by@dlitsman Too Long; Didn't ReadThe Chrome 116 update introduced the Document Picture-in-Picture API, expanding developers' control over custom controls and UI for Picture-in-Picture mode. This feature is currently supported in Chrome and Edge, with potential for wider browser support. The API allows opening, closing, and detecting Pic
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ARM に存在する JavaScript 専用命令「FJCVTZS」を追う（ついでに V8 をビルドする）
Chrome の 組み込み AI Gemini Nano を試してみる
デザインシステムの開発者体験向上の試み - enechain Tech Blog
neue cc - ConsoleAppFramework v5 - ゼロオーバーヘッド・Native AOT対応のC#用CLIフレームワーク
News from WWDC24: WebKit in Safari 18 beta
Next.js(App Router)でプレースホルダー画像を自作する
Storybook で Apollo Client の useFragment を扱う