Naru @naruaway Twitter profile | Pikagi

Pikagi

Naru

@naruaway

533

Followers

832

Following

49

Media

657

Statuses

Indeed Japan SWE (TypeScript / Node.js / frontend tools) ← Kobe Univ. (ML / topic models)

Tokyo, Meguro

https://t.co/ZYSk0WplVI

Joined April 2014

Don't wanna be here? Send us removal request.

Pinned Tweet

@naruaway

Naru

1 year

Introducing Quickboot.js: Reduce JS beyond tree-shaking with runtime trace, eval, & sync XHR. The React + framer-motion demo requires smaller JS than React itself 🤯. 40% size reduction! Feedback welcome! IMHO this is very interesting although it is not (or never) prod ready

7

20

103

Last Seen Profiles

@nikon08588645

@MeeL974C

@jilovelyx

@PelicansNBA

@mmr__0725

@banziito

@tneel

@aram248627091

@ScottHarris59

@aram248627091

@bokeplokalmalam

@SadoMei37535

@bokeplokalmalam

@mgmg_ramen__

@Curt_Burner

@EDI_ResearchOBU

@jandakembangstw

@nina_swing

@Agreed22

@dochaseireann

@college_outdoor

@AsSa66986762

@nthnvscn

@jandakembangstw

@AGORA_Data

@BLACK3STLOTUS

@raulmora__

@bokeplokalmalam

@nogginsport1

@JSanaiee

@AntoneMessma

@TORISEN_JP

@Debra19431

@dragonpker

@JanetJhiggins14

@kamelinha

@naruaway

Naru

1 year

Next.jsへの初プルリクマージされた！うれしい小さい変更だけどこれでHMR (React Fast Refresh)でのメモリリークは起きなくなる🎉 メンテナの方々ありがとうございますー

1

0

175

@naruaway

Naru

11 months

UI開発、コンポーネントという概念で切るのが真のseparations of concernsだからHTML/CSS/JSの分割はseparation of technologiesであって筋が良くなかったという流れがあって、発展すると「サーバーかクライアントどっちで実行するか」も後者寄りじゃねってなるのは自然かな

1

32

175

@naruaway

Naru

1 year

メインスレッドがフリーズしたときに勝手にローディングスクリーンを自動で出す機構を発明した! メインスレッド以外からpaintできないのでCSS animationを使ってGPUに処理させつつwatch dog的機構で無理やり実現

@naruaway

Naru

1 year

JS hack: Automatically trigger loading animation when the main thread freezes (e.g. sync XHR) This is utilizing pre-started CSS animation, which is not affected by the main thread for certain configuration. With "watchdog timer", the trick works

Tweet media one

0

5

15

1

20

65

@naruaway

Naru

1 year

"もしReactがサーバーサイドから始まっていたら"という観点からわかりやすくReact Server ComponentをDan Abramovさんが紹介してくれてるデモにIEが使われててお茶目 LiveViewとかHotwireユーザーにも見てほしい

Tweet card media

"React from Another Dimension" by Dan Abramov at #RemixConf 2023 💿

Backstreet's back.Speaker Bio: Dan is a software engineer on the React team at Meta. https://remix.run/conf/2023/speakers/dan-abramov

www.youtube.com

0

7

63

@naruaway

Naru

1 year

Open-sourcing "npm-in-browser" as an npm package 🎉 Probably the simplest way to run "npm install react" in browser. It's not using WebContainers / NodeBox / SharedArrayBuffer / "blackbox 3rd party things". Give me feedbacks!

Tweet media one

4

5

61

@naruaway

Naru

1 year

起動時に型安全にパースしてエクスポートする機構はもはや必須といいたい自分が面倒見るやつだと必ずやる起動時に変な値が入ってきてたら即failすべし zodとかvalibotで簡単に書けるのでおすすめさらにenv.ts外でのprocess.envへのアクセスをESLintで禁止

@dumblepytech1

medy.nim lang:🐍👑 ∞♦️

1 year

TSのバックエンドのプロジェクトのあちらこちらでprocess.env.XX_ENVとかを呼んでいるとデプロイする時に何の環境変数をセットしなきゃいけないのかわからなくなるので、環境変数はプロジェクト直下のenv.tsみたいなファイルを作って集中管理するべき何の言語でもそうすべきやな

0

6

41

0

4

60

@naruaway

Naru

1 year

理論上アーキテクチャ的にTurbopackのほうがViteより速くなりうる Viteの"バンドルしないから速い"はある意味嘘で高性能なES module実装がブラウザにあることに依存してるブラウザのモジュールシステムはいじれないからすでに色々無理してる(HMR) Turbopackは全体最適化が可能

2

9

58

@naruaway

Naru

1 year

Finally, Neovim Lua plugin works in browser! This demo is loading my favorite one, leap.nvim.

Tweet card media

Neovim Web Playground / Neovim running in a web browser using WASM

0

13

51

@naruaway

Naru

1 year

確かに競プロできる人、実装速くてすごいあとフロントであった自明な計算量削減として、ReactChildren.count()はO(N)という罠があるのを思い出した .mapの中で.count参照してたせいでO(N^2)になり要素数が多い時にSSRタイムアウトしてたみなさん気をつけて！(個人的にはReactChildren自体避ける)

@estie_corp

株式会社estie(エスティ)

1 year

【ブログ公開 🍰】 SWEの @kenkoooo が競技プロラミングとソフトウェア開発というテーマでブログを書きました。数千問の問題を解き、精進を続ける競技プログラマーはなぜソフトウェア開発と親和性が高いのか… ぜひブログをご覧ください！

0

22

122

0

4

42

@naruaway

Naru

1 year

あまりTS詳しくない人がいるチーム開発でtypescript-eslintは必須な気がする no-floating-promiseとコード上では隠れてるanyを怒ってくれる系のルールがないとレビュー時に気にすることが増える最初のlintは遅いけどキャッシュ使えばそこまで悪くないどっちにしてもtscがボトルネック

0

6

41

@naruaway

Naru

1 year

Introducing JS Bundle Lab: You can inspect real JS bundle size for any npm packages from real code snippet. It runs npm and Webpack in your browser 🤯 Note that this is still technical preview but you can already share URLs for specific code:

Tweet card media

JS Bundle Lab - Share real JS bundle size using Webpack in browser from code snippet

js-bundle-lab.nry.app

2

10

41

@naruaway

Naru

1 year

両方のコード読んだりいじったりした結果、宣伝されてる通りvalibotの方が設計も綺麗でzodコンパイラみたいなのは割に合わないという結論に至った　書いてみると書き味も悪くないのでこれからは個人のコードはvalibot使う！

@naruaway

Naru

1 year

zodが便利だけどバンドルサイズデカくなるからValibotみたいにtree-shakableにするの、メソッドチェーンを諦めずにビルドタイム最適化でなんとかしたい気持ちがある zod専用コンパイラみたいなアプローチどうだろう

2

0

21

1

5

40

@naruaway

Naru

1 year

Playwright、waitForSelectorとかはなんらかのイベントをsubscribeして最速で反応してるのと思い込んでたけど単にハードコードされた一定間隔 [0, 20, 50, 100, 100, 500]ms でpollしているだけみたい一定以上長いと500ms間隔でpollされる実際に試してもdelayが観測されるの

@uhyo_

🈚️うひょ🤪✒📘 TypeScript本発売🫐

1 year

何からの操作に対する反応ってブラウザイベントの発火ではなくDOMの変化として現れるはずで、それをポーリングしていたらこの速度は出せない気がするな。MutationObserverを敷いておくとかでそんなに速くなるんだろうか（？）

1

3

10

1

0

33

@naruaway

Naru

1 year

おおー！良さそうただすでに広く使われてて機能も多いとの差分が気になる研究みたいに必ずしも全てのライブラリが"先行研究"について説明するとは限らないからライブラリ選定大変だ

Tweet card media

GitHub - webpro-nl/knip: ✂️ Find unused files, dependencies and exports in your JavaScript and...

✂️ Find unused files, dependencies and exports in your JavaScript and TypeScript projects. Knip it before you ship it! - webpro-nl/knip

@LINE_DEV

LINE Developers

1 year

LINE のフロントエンド組織UITでは、多くのSPA開発においてTypeScriptを活用しています。その業務の中で生まれたTypeScriptプロジェクトの依存関係を解析し、利用されていないコードを削除するCLIをオープンソースで公開しました。詳細はGitHubをご覧ください。 #LINE_OSS

0

102

497

1

2

29

@naruaway

Naru

1 year

Rollup (つまりViteも)、side-effectful importsの順番壊れる3年弱治ってない既知のバ��あるのか、repro作ってからすでに報告されてることに気づいたこれ結構困るな...

GitHub - naruaway-sandbox/rollup-side-effectful-imports-order-broken-demo: Reproducing that Rollup...

Reproducing that Rollup might not respect imports execution order when using multiple entries - naruaway-sandbox/rollup-side-effectful-imports-order-broken-demo

1

3

31

@naruaway

Naru

11 months

つまり、コンポーネントという単位に構造も見た目も挙動も"全て"閉じ込めたいなぜならコンポーネントこそが主役("concern")だから "挙動"の中身はサーバーで実行したいかもしれないしクライアントで実行したいかもしれないがこれは技術詳細なので、簡単に切り替えできるべき("use server")

1

5

30

@naruaway

Naru

1 year

#wasmnight 超楽しかった！運営の皆さんありがとうございました！終わったあと面白いことしてる人たちから話聞けてめちゃくちゃ楽しかった　あとJSの楽しさを布教した :) (発表資料これです: 個人的にはWASM exception handlingを無理やりLuaで活用できたのが面白かった)

Tweet card media

Neovimをブラウザで動かしてみた - WebAssembly night #11

WebAssembly night #11 2023-09-15 Neovimをブラウザで動かしてみた Naru (naruaway.com)

docs.google.com

0

4

27

@naruaway

Naru

1 year

React Forgetいつの間にかほぼ"本物のコンパイラ"になってるのか... エイリアス解析とかもしてるらしいそのうち汎用JavaScriptコンパイラ基盤としても使えるようになりそうな予感

1

2

28

@naruaway

Naru

1 year

Tamaguiのコンパイラに執念を感じる media query hookの帰り値をspread conditionalで使ったような��合もランタイムが完全に消滅する笑自分が知る中ではzero-runtime CSS-in-JSのなかで一番すごいコンパイラメディアクエリ付きCSSが静的生成される

Tweet media one

1

4

28

@naruaway

Naru

1 year

今日から仕事復帰！会社休んでみることで自分を客観視できたり、会社の外に目を向けられたりしてよかったたくさんの人と出会って話せてよかったです、ありがとうございました & 今後とも仲良くしていただけると嬉しいです時間的には余裕ある(意識的に作る)ので今後も会社外の活動続けていく！

2

0

27

@naruaway

Naru

11 months

Hot-reloading SwiftUI with Neovim using InjectionIII and Inject worked! This is amazing. It's like Vite I am not running Xcode

2

2

27

@naruaway

Naru

1 year

Reactと一緒に使われうるあらゆるライブラリはReact hooksではないuseSomethingという名前の関数を定義すべきではない Valibotでの実例:

Tweet card media

useDefault is treated as a React hook unintentionally · Issue #80 · fabian-hiller/valibot

When using Valibot in a React project, as demonstrated by this StackBlitz example, Just using useDefault at top-level like const schema = useDefault(string(), 'test') causes the following E...

1

1

27

@naruaway

Naru

1 year

面白いバグ: Netflixを確認するとこのUIはpreviewModal要素としてメインのリストから切り離されている Portalが使われている可能性もあるがmaster-detail patternぽい実装ならkeyが忘れられてそう master-detailのdetailにkeyをつけるのを忘れがち割とkeyはlist専用と誤解されている

@mizchi

mizchi

1 year

Netflix この手のバグよく起こす印象があり、なんらかの条件でReact のリスト要素展開時のkey属性の指定ミスってんじゃないかと疑ってる

0

31

157

2

3

23

@naruaway

Naru

1 year

ESLint Flat Config、個人的にはまだ導入したくない typescript-eslintが公式にサポートしていないと言っているそしてネットで見つかる内部構造に依存したサンプルはすでに動かない source:

Tweet card media

ESLint Flat Config Support · Issue #7694 · typescript-eslint/typescript-eslint

Edit: typescript-eslint@v7 supports ESLint flat config! See: https://typescript-eslint.io/blog/announcing-typescript-eslint-v7 Overview ESLint is adding an exciting new config system called "f...

1

4

23

@naruaway

Naru

1 year

"npm install react" in browser *without* StackBlitz or Sandpack 🎉 There is no blackbox 3rd party script and it connects to the official npm registry

Tweet media one

1

2

22

@naruaway

Naru

1 year

zodが便利だけどバンドルサイズデカくなるからValibotみたいにtree-shakableにするの、メソッドチェーンを諦めずにビルドタイム最適化でなんとかしたい気持ちがある zod専用コンパイラみたいなアプローチどうだろう

2

0

21

@naruaway

Naru

1 year

DOM変更を同期的にする必要があるView Transitions APIみたいなのをReactで使うには現状flushSyncが必要なんだけどReactの思想と完全対立してて微妙な気持ちになる Reactはスケジューラで、我々はヒントを与える(e.g. e.g. startTransition)がflushSyncはヒントではなく直接命令

@honey321998

honey32

1 year

外国の凄腕エンジニア？的な人に雑に「それ flushSync でよくないですか？」って聞いたら、「そう。フォーカスとかスクロールとか操作しまくるので flushSync まみれです」って返ってきた謎機能だと思ってたけど、UX をカリカリに追求したら必要になってくるんやな…

0

0

32

0

0

21

@naruaway

Naru

1 year

Cycle.js懐かしすぎる FRP系こそがフロントエンドの真の理想だと思ってた時期があった hooks登場以前のReactよりCycle.jsを好んでたけどhooksが神すぎてReactに改宗したな Reactは理想/academic/first principle thinkingとpracticalityのバランス感覚が良すぎる

@aumy_f

おーみー

1 year

新興フレームワークの厄介ファンが雑にReactをdisり、彼らに輪をかけて理解の薄い人たちが「Reactもう終わったのか……フロントエンドは流れが早くてついていけない」みたいなコメントをつける流れを破壊したい。お前ら全員Cycle.jsやれ

0

0

31

1

1

19

@naruaway

Naru

11 months

(念の為、"HTML/CSS/JSの分割はseparation of technologies"という主張はいわゆるアプリ開発に関してです。文書記述言語としてのHTMLの場合この分割は割と綺麗にseparations of concernsになってると思います)

0

2

20

@naruaway

Naru

7 years

研修にて4人で作ったプロダクト、会社からの6ヶ月追加出資が決まったので帰国してからも頑張る💪うれしい😂

5

0

18

@naruaway

Naru

1 year

#gorillavim 初参加でLT！ ”NeovimをWASMを使ってブラウザで動かしてみた" LT自体初でテーマも不安でしたが興味を持ってくれた人はいたみたいでよかったです！ @gorilla0513 さんはじめ運営の方々ありがとうございましたオフラインで話すの楽しかったですスライドこれです

Tweet card media

NeovimをWASMを使ってブラウザで動かしてみた

ゴリラ.vim #28 ~ 初心者歓迎オフラインLT ~ NeovimをWASMを使ってブラウザで動かしてみた Naru (https://naruaway.com) 2023-08-25

docs.google.com

0

6

18

@naruaway

Naru

1 year

ちょうど最近Reactに特化したopnionatedなTailwindの使い方を実験してたからタイムリーや tw classは常に明示的に指定させて、コンパイル時にクラス名を圧縮しつつtailwind-merge相当のロジックをほぼzero runtimeでできるようにするやつ、そのうちリリースするつもり

@aiji42_dev

Aiji Uejima

1 year

今更感あるがtailwindがビルド時にどこまで結果に含めるのかを実験してみた。 classNameに到達するしない関係なく、コード中の文字列をターゲットにして緩めに探索しているぽい。サイズにこだわるならprefixつけて意図しない検出を避けたりしたほうが良さそう🤔

Tweet media one

1

7

28

0

4

14

@naruaway

Naru

1 year

Publishing in-browser "npm install" benchmark comparing WebContainer, Nodebox, and npm-in-browser 🎉 Interestingly, npm-in-browser was faster than WebContainer for lightweight packages. Also the benchmark shows that Nodebox is extremely optimized

Tweet card media

In-browser "npm install" benchmark

Benchmark suite for "npm install" performance in browser to compare WebContainer, Nodebox, and npm-in-browser

npm-install-browser-benchmark.nry.app

0

2

15

@naruaway

Naru

7 years

この4月からIndeed Tokyoではたらいてます環境は正直最高だと思います応募しましょう！

1

1

14

@naruaway

Naru

1 year

JS hack: Automatically trigger loading animation when the main thread freezes (e.g. sync XHR) This is utilizing pre-started CSS animation, which is not affected by the main thread for certain configuration. With "watchdog timer", the trick works

Tweet media one

0

5

15

@naruaway

Naru

11 months

SourceKit-LSP経由の補完も効くし、Vite + React + TypeScript + Neovim並みのDXを手に入れたかも InjectionIIIとInjectに関しては作者による記事がわかりやすい hot reloading, Xcodeのプレビュー機能より安定していて早い!

Tweet media one

@naruaway

Naru

11 months

Hot-reloading SwiftUI with Neovim using InjectionIII and Inject worked! This is amazing. It's like Vite I am not running Xcode

2

2

27

1

1

14

@naruaway

Naru

7 years

@seiyab_ なんやて

0

0

1

@naruaway

Naru

1 year

Dataloder使いまくるとconcurrent thingsの数が爆発的に増えてしまう問題をGraphQLのクエリリゾルバに限定して解決した話面白いリクエストがバッチされるから良いだろうと.loadを並行に呼びまくるとplatformによってはconcurrency自体のオーバーヘッドが無視できなくなるか

Tweet card media

Dataloader 3.0: A new algorithm to solve the N+1 Problem

We present a new algorithm to solve the N+1 Problem in GraphQL that's much more efficient and easier to maintain than current solutions. By resolving breadth-first instead of depth-first, we can...

wundergraph.com

1

1

12

@naruaway

Naru

1 year

Valibot推測して計測したら4000％速くなりました！推測: object spreadはJITしにくそうで遅くなりそうとかいろいろ計測: Node.jsだけだとV8に対する最適化になるのでBunも使って、安定化させるためにいろんなデータとかスキーマのケースをinterleave

@FabianHiller

Fabian Hiller

1 year

Together with contributors like @naruaway , @jussisaur , @milankinen , @kurtextrem and @BastiDood , we were able to improve Valibot's performance by up to 4,000%. In my bachelor thesis, which will be published in the following weeks, I will go into detail about various optimizations.

Tweet media one

3

7

73

1

0

12

@naruaway

Naru

1 year

JS黒魔術🔮 useEffectが走るのに必要なバンドルサイズを97kBまで削減! 100kB以下のDLサイズで本物のReactのuseEffect動くの世界初かも　知らんけど削減対象まだ増やせるから50%ぐらいまで落とせそう evalとかsync XHR使ってるから実行速度撃遅な気がするけどせっかくやし磨いてライブラリ化する

Tweet media one

0

0

11

@naruaway

Naru

1 year

Valibotの実装がいかにsimpleか一発でわかる図作ってみた ZodStringの実装はindirectionだらけなのと、内部にminの実装がそのまま書かれててtree-shake不可(これを無理やりtree-shakeするやつ動いたけど割に合わない、バグりそう) 他にも細かいところで色々冗長な部分があってサイズを余分に取る

Tweet media one

1

0

11

@naruaway

Naru

1 year

I created a weird demo: npm-in-browser in StackBlitz It's meaningless but it works so 🤷

Tweet card media

npm-in-browser-demo - StackBlitz

Running npm-in-browser, which should actually work without WebContainers / StackBlitz

0

1

9

@naruaway

Naru

1 year

プログラミングはDSLを階層的に構築して機能の実装を自然にしていく取り組み e.g. ReactはUIというドメインのDSL 具体的な方法論は個別に違うから統一的に手法を語るのは... 語れてるように見えるときは前提があるか何かがおかしい DDD関連の文書にこう言う傾向が見られる(なお原典は読んだことない)

@sumiren_t

sumiren

1 year

DDD好きっていう人の99%は付き合う価値のないジュニアであることはよく知られているが、自分が1%側であることを証明する方法がないので、DDDは大嫌いということにしている。

1

16

140

1

0

10

@naruaway

Naru

1 year

同じ思いでElectronのBrowserViewを使った自作ブラウザ使ってるけど、セキュリティの観点から広く薦められない、、、 Electron本体はほぼChromeと同じようなプロセス分離かつNode.jsはデフォルトで無効だからあんまり心配ないけど、Chromium自体にゼロデイあった時アプデが遅れる

@daizplus

daiiz

1 year

ChromiumベースでありながらUIを大きく冒険している自分だけのウェブブラウザを作りたい。Arcみたいに。

1

0

17

1

0

10

@naruaway

Naru

1 year

これLTします！前との差分は色々ありますがWASM exception handlingをLuaの例外に対応づけたりしてプラグイン動くとこまでいきました！ WASMの話色々聞けるの楽しみ

Tweet card media

WebAssembly night #11 (2023/09/15 19:30〜)

## Wasm nightが3年ぶりに帰ってきました。しかも、オフラインイベントです。最後のイベントは3年前。そしてオフラインイベントを開催したのは4年前の開催でした。この間にもWasmを取り囲む状況も大きく変化しています： * WebAssembly Core Specifications2.0になる * Wasm GCのオリジントライアルが始まる * Component modelの仕...

emsn.connpass.com

@naruaway

Naru

1 year

Finally, Neovim Lua plugin works in browser! This demo is loading my favorite one, leap.nvim.

0

13

51

0

1

10

@naruaway

Naru

1 year

Next version of Neovim Web Playground will be able to download plugins from init.lua nvim.wasm -(msgpack-rpc)-> JS main thread Due to GitHub API's rate limiting, each IP can play with up to 50 plugins per hour though. Downloaded plugins are cached in IndexedDB

Tweet media one

2

3

12

@naruaway

Naru

7 years

ワシントン大学数年ぶりにきた！！！

Tweet media one

2

0

9

@naruaway

Naru

1 year

#CEATEC にきたシャープのカラー電子ペーパーePoster、紙ののカラーポスターみたい家に飾りたい

Tweet media one

1

0

10

@naruaway

Naru

7 years

肉！

Tweet media one

0

0

9

@naruaway

Naru

1 year

なんやかんや仕事関連の調べ物とかPoCとか面白くて無限にやってしまうな SwiftとKotlinを探検中ただキリをつけないと仕事の割合が多くなってしまう趣味プロもしたいーいや、する

0

0

10

@naruaway

Naru

1 year

Interesting observation is that for my case, code to handle React class components got removed since I do not use it. This is impossible with tree-shaking More details and code:

quickbootjs.nry.app

0

0

10

@naruaway

Naru

6 years

表参道のファミマきた

Tweet media one

0

0

6

@naruaway

Naru

1 year

デフォルトで再描画そもそもできないからむしろ良い進化のようなただのサーバーテンプレート動くUI実装してるならnext関係なくて、manual DOM manipulation vs. fine graind reactivity vs. vdomのトレードオフで、バグなく実装するにはvdomセマンティクスが良いと多くのひとが思っている

@dumblepytech1

medy.nim lang:🐍👑 ∞♦️

1 year

経験1年未満のエンジニアを採用してNextJS13を使って1ヶ月で不必要な画面の再描画が起きないようにオンボーディングできる人だけが石を投げなさい🤣

0

1

17

1

0

10

@naruaway

Naru

1 year

これnpm registry以外の外部依存なしで本物のnpmとwebpackをブラウザで動かすタイプのバンドルサイズチェッカー作れるな今日か明日作ってみる

@naruaway

Naru

1 year

"npm install react" in browser *without* StackBlitz or Sandpack 🎉 There is no blackbox 3rd party script and it connects to the official npm registry

Tweet media one

1

2

22

1

2

10

@naruaway

Naru

7 years

やっと東京帰ってきた...研修自体は楽しかったけどやっぱ都会がいいな🏙

0

0

9

@naruaway

Naru

1 year

サンプルを漁ると結構この画像の"Wrong"を使っているのが見つかるけどsilentにundefinedになってる本質的な��題は: * 内部構造に依存してしまうこと * 型エラーが起きない 😭 eslint.config.js自体を型チェック対象にできるようにならないとちょっと怖いな

Tweet media one

@naruaway

Naru

1 year

ESLint Flat Config、個人的にはまだ導入したくない typescript-eslintが公式にサポートしていないと言っているそしてネットで見つかる内部構造に依存したサンプルはすでに動かない source:

1

4

23

1

0

9

@naruaway

Naru

11 months

"Server-driven UI" pattern is already used in successful native mobile apps I can imagine "React Server Components for React Native" can be an ideal solution theoretically

1

1

9

@naruaway

Naru

1 year

JS Bundle Labが既存のバンドルサイズ見る系サービスと違うのは実際のコードをWebpackでバンドルすることでimportに応じたtree-shakingとかdead code eliminationの効果も加味できると言う点パッケージ単体の全体情報を見るのには向いてない(これにはすでに他の素晴らしいサービスが色々ある)

0

0

9

@naruaway

Naru

8 years

名刺コンペ懇親会お疲れ様でした！コンペやってる人たちが集まるところに初めて行ったんですけどみんないい人で楽しかったです！また勉強会的なのとかあったら参加したいです！(来年から東京なのでよろしくおねがいします)

0

1

7

@naruaway

Naru

2 years

昔落としたiPhone放置してたら成長してた　バッテリー怖い

Tweet media one

1

1

8

@naruaway

Naru

11 months

Prettier is fast enough for me. With cache, only a few files are processed anyway. Also to reduce the latency of launching Prettier process, I sometimes use prettierd, which is a daemon to reduce the overhead of launching Node.js process and initialization of Prettier state

0

2

8

@naruaway

Naru

1 year

これ一応ViteのHMRはmemory leak避けれなくてwebpackは避けれるの確認しとこうと思ったらどっちもメモリリークしてて、pmmmwh/react-refresh-webpack-pluginの実装が原因だった　あとでプルリク作るのとNext.jsも一応確かめるこういうコードを高速に書き換えまくるとDATA永遠にpurgeされない

Tweet media one

@naruaway

Naru

1 year

理論上アーキテクチャ的にTurbopackのほうがViteより速くなりうる Viteの"バンドルしないから速い"はある意味嘘で高性能なES module実装がブラウザにあることに依存してるブラウザのモジュールシステムはいじれないからすでに色々無理してる(HMR) Turbopackは全体最適化が可能

2

9

58

1

0

8

@naruaway

Naru

1 year

Sandpack is fun! This is yet another way to run "Node.js" inside browser. I built editable playground to interactively check the behavior of Kuma UI Vite plugin: Maybe I could add many CSS-in-JS libs to play with them simultaneously

3

1

8

@naruaway

Naru

1 year

@yusukebe Safariは少し大きめのバッファを持っていて最初にある程度データ送らないと描画反映されないみたいです！手元で実験してみるとFirefoxとChromeはバッファ無しで、Safariだけ最初の900 bytesほど(正確な値不明)バッファされちゃいました

2

3

7

@naruaway

Naru

1 year

ベジエ曲線ごねごねしてフォント使わず自作ロゴ作ってる楽しいけどFigmaわからん微妙に歪みがあるけど割とイメージに近くなってきたのでこれに合わせてデザイン刷新してデプロイするぞ

Tweet media one

1

0

8

@naruaway

Naru

7 years

羽田空港についてしまった...

1

0

8

@naruaway

Naru

1 year

zodコンパイラのプロトタイプみたいなのはエラーメッセージ削ったりも含めて53kbから13kbぐらいまで落とせるけどvalibotは何もせずに3kb (minified, not gzipped)

1

1

8

@naruaway

Naru

8 years

名刺コンペ3位取れた Daisy + Bag-of-words + Neural Network (３層) codebookを30通り作って最終結果を平均こんなのでいいのか…

1

2

8

@naruaway

Naru

1 year

Currently fighting with 3.8M JS for npm-in-browser and need formatter for easier debugging. - "deno fmt": panicked. - "prettier": 5s - "biome format": 0.5s Biome is perfect here

0

1

7

@naruaway

Naru

1 year

GitHub Actionsでベンチマークを記録していくの、実行環境が安定しないからブレすぎて無理な気がしてたけど固定されたプログラムを毎回実行してそれとの相対実行時間を記録することで環境のブレをある程度抑えられそうな目処がたってきた

0

0

7

@naruaway

Naru

1 year

npm-in-browserは依存を再配布してるのでを使ってライセンス抽出と許可していないライセンスが依存に入ってきた場合ビルド失敗するようにしてるはじめて使ったけど結構設定できて便利！ (違反しないように努力してるけどライセンスなにもわからない、、、)

GitHub - codepunkt/webpack-license-plugin: Manage third-party license compliance in your webpack...

Manage third-party license compliance in your webpack build - codepunkt/webpack-license-plugin

0

2

7

@naruaway

Naru

1 year

react-domなぜこんなにサイズでかいのか調査 hydration後にカバレッジ確認すると40%のstatementsしか実行されてない(思ってたより多い気もするけど) 現状のReactを保ったままコード削減する余地ありそう selective hydrationとかも結局react-domがユーザーに届くまで何も始まらないからなー

Tweet media one

1

0

7

@naruaway

Naru

1 year

Neovimがブラウザで動いた！ LuaもNeovim APIも一応動く WASMとwasi-sdkのおかげ

@naruaway

Naru

1 year

@Neovim now works in browser! It is experimental but at least Lua and Neovim API works I'll try to publish the build script in upcoming weeks after some refactor, maybe with a blog post

1

0

3

1

0

8

@naruaway

Naru

1 year

Firefoxが使ってる、特定のライブラリを同じプロセス上でメモリ分離する手法、"RLBox" 個人的にはWASM活用方法として面白いと思ってる CからWASMにしてwasm2cでCに戻すことで、WASMのメモリ分離の性質を得られる

0

0

7

@naruaway

Naru

7 years

やった！引用数1 !!

1

0

6

@naruaway

Naru

7 years

家から徒歩12分で会社つくの最高すぎる

1

0

6

@naruaway

Naru

1 year

webpackのアーキテクチャ、いい意味(機能盛りだくさん)でも悪い意味でもレガシー個人的にはViteは次の点が気になっている * dev: HMRのコード配信にESMを使うと必ずメモリリークしてしまう(のでESMを使わないHMRのための専用経路が欲しい) * build: Persistent cacheがない

@mizchi

mizchi

1 year

個人的な意見としては今現在の webpack のアーキテクチャは非ESM時代のものでメモリ上の中間フォーマット出力形式ともに時代に取り残されて完全に行き詰まってて、webpack をコアに据えた next.js はその負債に引きずられて無茶なアプローチをとってるんだけど、設計上のレガシー化は避けられない

0

4

82

1

0

7

@naruaway

Naru

2 years

#dena_lint_night 発表も全部楽しめたし久々に社外のlintとかAST触ってる人たちと話せて楽しかったですツールによってJSでもASTが微妙にちがうのはどうしようもないのか。。。あとTailwindで盛り上がったり昔の知り合いとも会えた！

0

0

4

@naruaway

Naru

1 year

Interested to hear any opinions on HMR memory leak in Vite Not sure how many people would actually care though. The same issue existed for other tools like Snowpack

Using ESM for Vite HMR always causes memory leak in browser · vitejs vite · Discussion #14438

Hello! I love using Vite, especially its snappy behavior of dev server. Recently I (re)discovered that Vite is using ESM for HMR (Hot Module Reloading: for React, Fast Refresh is used), where it ca...

0

1

6

@naruaway

Naru

1 year

I'll follow up with benchmarks with NodeBox and WebContainers. (spoiler: NodeBox is really fast since it's using optimized dedicated CDN and many things. Somehow WebContainers is on par with npm-in-browser for "npm install" 🤔 )

1

0

6

@naruaway

Naru

1 year

最後のほうで少し話せてよかったです、ありがとうございました興味範囲が似てるのでもっと色々深い話したかったですが時間が足りませんでした！

@mizchi

mizchi

1 year

今日の勉強会、自称 mizchi キッズいっぱいいたけど誰が誰かわからないので後で名乗り出てください

1

0

50

1

0

6

@naruaway

Naru

7 years

オースティンで神戸みつけた

Tweet media one

0

0

6

@naruaway

Naru

1 year

@vercel Faster Fast Refresh is nice! No rush but I would appreciate if someone can check this PR to fix memory leak for Fast Refresh Only relevant for extreme case though

Tweet card media

fix(react-refresh-utils): avoid memory leaks caused by prevExports by naruaway · Pull Request...

This fixes memory leaks caused by prevExports in react-refresh-utils. It happens in code like the following: const DATA = Array.from({ length: 100000 }, (_, i) => Math.random()); export con...

1

0

5

@naruaway

Naru

1 year

CSS Animationにより開始1sでスピナーが勝手に出てくるのを、setIntervalでリセットして抑え込んでるメインスレッドが死ぬと抑え込めなくなるのでアニメーションが現れる

1

2

6

@naruaway

Naru

1 year

"nry . app"っていう3文字ドメイン取った悪い意味での完璧主義無くすため、なんか作ったらすぐサブドメイン切ってデプロイする！適当にゲームとかアプリとか掲示板とか作ってた頃のフットワーク取り戻す作ったものどれが当たるかわからんからドメインとるのコスパ悪いという言い訳もうできない

1

0

6

@naruaway

Naru

2 years

eslintはtypescriptの型情報にアクセスできるから型システムを限定的ながら厳しくできて便利 eslint + typescript を一つの型チェッカーとしてとらえるとしっくりきた

@uhyo_

🈚️うひょ🤪✒📘 TypeScript本発売🫐

2 years

型チェックはlintの一種であるという見方もあり、十分頑張ったそれは型システム（型推論）ともはや区別がつかないと思う（？）

1

2

22

0

0

0

@naruaway

Naru

7 years

Indeed Seattleきた

Tweet media one

0

0

5

@naruaway

Naru

7 years

坂道で5回ほど滑ったけど一度もこけなかったからまだまだ若い

0

0

1

@naruaway

Naru

1 year

思考実験としてブラウザのESM実装をそのままパンドラの中で使えば、Viteと同じパフォがでるはずここからが勝負で、ユースケース特化の改善ができるまとめるところはまとめたり、HMRのコード配信をメモリリークが起きない手法でやったり (個人的にはViteシンプルで好き)

1

0

5

@naruaway

Naru

7 years

一日中Scalaを触っていた

0

0

5

@naruaway

Naru

1 year

WebContainersのこのissue面白い広い意味でブラウザでOSを実装する系がまとめられてる unikernelも言及されてる issueの結論は"WebContainers実装は公開されない"😆

Open-sourcing for the webplatform ? · Issue #458 · stackblitz/webcontainer-core

Is your feature request related to a problem? Please describe: It would be great if any website could have its own "WebOS" and be able to launch their own "Web Containers" in or...

0

0

5

@naruaway

Naru

7 years

ちょっと高い回る寿司！

Tweet media one

0

0

4

@naruaway

Naru

1 year

HMR (Fast Refresh)のメモリリークが通常問題になることはないけど、Fast Refreshを活用したコードをsource of truthにするタイプのGUIオーサリングツールみたいなのを作ろうとしてた時にリーク消せなくて悲しかったこの場合超高頻度で新しいESMがロードされるのでメモリがどんどん食われる

0

0

5

@naruaway

Naru

1 year

癖ってこわい StackBlitzでもVS Codeでも気づけばターミナルに vi って打ってしまう web editorぽいもの作るのは面白いけど自分は使えないな

0

0

5

@naruaway

Naru

1 year

@Neovim now works in browser! It is experimental but at least Lua and Neovim API works I'll try to publish the build script in upcoming weeks after some refactor, maybe with a blog post

Neovim Web Playground / Neovim running in a web browser using WASM

1

0

3

@naruaway

Naru

1 year

RSCがNext.jsとべったりなのは良くないと思ってる React本体へのViteサポートプルリク　がマージされれば風向き変わりそうかな...?

Tweet card media

add react-server-dom-vite impl and fixture by nksaraf · Pull Request #26926 · facebook/react

Summary Vite is one of the most popular bundlers used to build React apps. This PR is adding a vite integration for React server components. It would be shame if the usage of React server componen...

0

0

4

@naruaway

Naru

6 years

@blue_jam twitterにウイルスのソースコードを投稿した疑いで逮捕

1

0

1

@naruaway

Naru

1 year

Denoの人として一方的に知っていたので直接色々聞けて楽しかったです！イベントの主催者のかたもありがとうございました TC39のメンバーと直接話す機会なんてそうそうないと思うので貴重でした

@yusuktan

🍣maguro

1 year

昨日の #tc39_jsconfjp リアルで会うのははじめましての方々 @yusukebe @_poteboy_ @naruaway とお話できたし、何よりJavaScriptの未来をまさに作ってる人たちと同じ空��にいたのがすごく不思議な感覚だった（あと日本で英語オンリーのイベントというのがなんか新鮮だった）運営の方々に感謝！！

0

2

7

0

0

4

@naruaway

Naru

9 years

R社インターン、チーム優勝した！チームのメンバーとCycle.jsのおかげですありがとうございました

1

0

4