Biome と ESLint の lint ルールの互換性
Biome では、現在約 150 個程度の JavaScript・TypeScript に関する lint ルールを実装しています。 これらのルール多くは既存の ESLint 関連で実装されているルールと同じものになっているのですが、ルールの名前が異なることもあり、その対応関係がわかりにくくなっています。 そこでこの記事では、フロントエンド開発をする場合によく設定していそうな次の lint ルールについて、Biome で実装されているかどうかの対応表を紹介します。 eslint (eslint:recommended) typescript-eslint (plugin:@typescript-eslint/recommended) eslint-plugin-jsx-a11y (plugin:jsx-a11y/recommended) eslint-plugin-react (plugi
CommonJS is not going away | Bun Blog
We're hiring C/C++ and Zig engineers to build the future of JavaScript! Join our team → Some may be surprised to see the recent release notes for Bun mention CommonJS support. After all, CommonJS is a legacy module system, and the future of JavaScript is ES Modules (ESM), right? As a "forward-thinking" "next-gen" runtime, why would Bun put so much effort into improving CommonJS support? The latest
1KBのWebフレームワークをつくる - ゆーすけべー日記
1KBのWebフレームワークをつくりました。 名前は「Pico」。 minifyしてビルドした模様。 コードはこれだけ。依存なし。ほんとにこれだけです。 Cloudflare WorkersとDenoで動きます。 今回はこのPicoというフレームワーク、 それに必要不可欠なURLPattern、実装について、 そして僕がつくっているもう一つのフレームワークHonoとの関係などを紹介します。 Hello World text/plainでレスポンスを返す、“Hello World"相当のコードは4行で書けます。 import { Pico } from "@picojs/pico"; const app = new Pico(); app.get("/", (c) => c.text("Hello Pico!")); export default app;
Reduxのstateの認知負荷を下げたい話 - カミナシ エンジニアブログ
カミナシのソフトウェアエンジニアの天野です。 カミナシは、現場DXプラットフォーム「カミナシ」の開発をしています。 今日はフロントエンドの小ネタを紹介しようと思います。 よろしくお願いします。 TL;DR 経緯 結論 実際に見てみると TL;DR Reduxで管理しているstateにコメントを入れておくと useSelector(https://react-redux.js.org/api/hooks#useselector)で値を取り出す時に コメントを表示してくれるようになって安心だよ。 経緯 カミナシのフロントエンドでは、全面的にReduxを採用しています。 まず、前提として「カミナシ」はかなり短期間で開発された経緯があります。 また、mobileとwebでサービスを提供する必要があったため、ReactとReact Native (Expo)を採用し、ローンチまでのスピードを上げる狙
Locators | Playwright
Introduction Locators are the central piece of Playwright's auto-waiting and retry-ability. In a nutshell, locators represent a way to find element(s) on the page at any moment. Quick Guide These are the recommended built in locators. page.getByRole() to locate by explicit and implicit accessibility attributes. page.getByText() to locate by text content. page.getByLabel() to locate a form contro
jestでDBありのテストを高速化する
課題link お手伝いしているシステムでNestJSを採用しているバックエンドのテストが遅いという課題があったので対処した。 前提link フレームワークDBテストランナーその他 テストの総数は700弱。 最終結果link 最終的には2段階の改修を経てローカルのテストが3倍速程度高速化した。 # before Test Suites: 145 passed, 145 total Tests: 2 skipped, 681 passed, 683 total Snapshots: 0 total Time: 925.063 s Ran all test suites. Done in 926.48s. # ts-jestを@swc/jestに置き換えた Test Suites: 145 passed, 145 total Tests: 2 skipped, 681 passed, 683 t
Babelプラグインの順序とallowDeclareFieldsの妙 | Wantedly Engineer Blog
Babelでdeclareクラスフィールドを使うためにallowDeclareFieldsというオプションがあります。一見すると単に設定でこれを有効化すればいいような気がしますが、実は正しくこの設定を有効化するには罠がありました。本記事ではBabelとTypeScriptのクラスフィールドサポートを紐解き、正しい理解にもとづいて適切な設定を紹介します。 クラスフィールドとはクラスフィールドはJavaScriptのStage 3提案で、クラスの直下に変数宣言のような記法でインスタンス変数やクラス変数に相当する宣言を行えるというものです。 class C { x; y = 42; static a; static b = 42; } console.log(new C().y); // => 42 console.log(C.b); // => 42TypeScriptでは型定義や修飾子ととも
ブラウザ内でバイナリを圧縮してコードやlocalStorageに埋め込む
JS で wasm のダウンロードや TypedArry を通じた操作をやってると、コード内や localStorage にバイナリを埋め込みたいときがあります。 考え方 JS の内部エンコーディングは UTF16 と決められているので、UTF16で表現可能な範囲を1文字として、バイナリをインライン化すればサイズが小さくて済むはず Chrome は CompressionStearm でブラウザ内で deflate できるので、あれば圧縮する https://chromestatus.com/feature/5855937971617792 Chrome ではない場合、deflate 処理は飛ばしてそのまま。localStorage の読み書きなら途中でブラウザ自体のサポート増える/消えるなどしない限り一貫性は取れる 今回はやってないが、インラインJSに埋め込む場合、50kb を超えたあた
React: import時のaliasを設定するときはWebpack、TypeScript、ESLintの3つを対応しなければならない件 - Qiita
React: import時のaliasを設定するときはWebpack、TypeScript、ESLintの3つを対応しなければならない件TypeScriptwebpackReactESLint ReactとTypeScript & ESLintで開発するのがここ最近好き。tslintさようなら、@typescript-eslintこんにちは。 そんな中でaliasを設定しよう思ったとき、三カ所も設定する必要があったので覚え書き。 以下、想定としては、ルート直下に/srcがあって、それに対するaliasを~/で書きたいというもの。Nuxtっぽい感じ。 ex) import Awesome from '~/components/Awesome'; 1. Webpack の resolve.alias 公式にもある通り、まず何よりバンドルする際にきちんと認識してもらわないと始まらない終わらない
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
