RFC: Rspack v1.0 Release Plan · web-infra-dev/rspack · Discussion #6315You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
「実装例から見る React のテストの書き方」をアップデートする
社内の人から、自分が以前書いた次の記事が「便利で助かった！書いた時から何かアップデートある？」ってメッセージがきた。 そんな便利だなんてどうもありがとうございますウフフ、と思いながら書いた日を見てみると 2022-08-09 だった。もうすぐ 2 年経とうとしてる。時の流れが早くて怖い。 この記事に書かれた実装例はリポジトリにまとめていたんだけど、当然、何かメンテをしていたわけもなく、2022 年当時の状態がそのまま残っていた。 せっかく便利に思ってくれる人がいたので、内容をアップデートする。 アップデートまとめ メジャーバージョンのリリースやビルドツールの統一の観点で Jest から Vitest に移行 useFakeTimers({ shouldAdvanceTime: true }) @testing-library/reactを v15 にバージョンアップ MSW を v2 にバ
Panda CSS - The Origin Story
Building Panda CSS was one of the most inspiring moments of my career; it reminded me of the period before launching Chakra UI. I knew it would be very "Node" heavy, and I needed to learn more about Abstract Syntax Trees (ASTs). I was familiar with using basic modules like fs, path, and small bits of express to build APIs, but that was about it. Creating a CSS framework that delivers a similar DX
How we built JSR | Deno
We recently launched the JavaScript Registry - JSR. It’s a new registry for JavaScript and TypeScript designed to offer a significantly better experience than npm for both package authors and users: It natively supports publishing TypeScript source code, which is used to auto-generate documentation for your package It’s secure-by-default, supporting token-less publishing from GitHub Actions and pa
ブラウザーにChromeのデベロッパーツールを埋め込めるReactコンポーネントを作ってみた
とてもニッチな用途で使えるコンポーネントですがその場のiframeのデバックができるReactコンポーネントを作ってみました！ まずはこちらのポストをご覧ください！ このポストではChromeのデベロッパーツールを開いているわけではなく、ブラウザー内に直接デベロッパーツールが埋め込まれています！ 今回はこのようなReactコンポーネントを作ってみたので、どのように作ったかをご紹介したいと思います。 デモページ こちらのページで実際にデモを試すことができます。 https://react-embed-devtools.vercel.app/ なぜ作ったか Reactをオンラインで学習できるサービスmosya Reactを先日リリースしました。 このサイトではオンライン上でコードを書いてその場で書いたコードがプレビューできるようになっています。 詳しい開発記事はこちらをご覧ください！ ただ、プ
Object Structure in JavaScript Engines
Object Structure in JavaScript EnginesFrom a developer's perspective, objects in JavaScript are quite flexible and understandable. We can add, remove, and modify object properties on our own. However, few people think about how objects are stored in memory and processed by JS engines. Can a developer's actions, directly or indirectly, impact performance and memory consumption? Let's try to delve i
History of JS interop in Dart
AI Image generated by GeminiInteroperability has been a core focus from the beginning of Dart. When Dart was first released in 2011, it was designed to be embeddable and multi-platform. It ran on a standalone virtual machine, embedded in a browser, and compiled to JavaScript. When Flutter came along in 2015, we were ready to embed it there, too. Now, we’re excited to target WasmGC runtimes, as wel
JavaScript Visualized - Promise Execution
Promises in JavaScript can seem a bit daunting at first, but understanding what's happening under the hood can make them much more approachable. In this blog post, we'll dive deep into some of the inner workings of promises and explore how they enable non-blocking asynchronous tasks in JavaScript. I'm still working on making this blog better on mobile devices, mobile browsers don't always render t
Iterator helpers · V8
Iterator helpers are a collection of new methods on Iterator prototype that help in general use of iterators. Since these helper methods are on the iterator prototype, any object that has Iterator.prototype on its prototype chain (e.g. array iterators) will get the methods. In the following subsections, we explain iterator helpers. All the provided examples are working in a blog archive page that
Optimizing Javascript for fun and for profit
I often feel like javascript code in general runs much slower than it could, simply because it’s not optimized properly. Here is a summary of common optimization techniques I’ve found useful. Note that the tradeoff for performance is often readability, so the question of when to go for performance versus readability is a question left to the reader. I’ll also note that talking about optimization n
JavaScript である値がオブジェクト型であることを判定する変なテク
TC39の活動で有名なJordan Harbandが作成した下記issueで知ったのでメモ。 前提として、次のコードによって x がオブジェクト型であることを判断できる。JavaScriptにおける null は typeof の結果が "object" になるという有名な変な挙動がカバーされている。 function isObjectA(x) { return (typeof x === "object" && x !== null) || typeof x === "function"; }
JavaScript PrimerのES2024対応を手伝ってくれるContributorとSponsorを募集しています
JavaScript PrimerのES2024対応を手伝ってくれるContributorとSponsorを募集しています JavaScript PrimerのES2024の対応を進めていく予定なので、 対応を手伝ってくれるContributorとjsprimerというプロジェクトを支援してくれるSponsorを募集しています。 追記(2024-03-22): Contributorを希望する方は集まりました。ありがとうございます！ JavaScript Primerスポンサーは引き続き募集しています！ Gold Sponsors Supporters 3行サマリー ES2024の対応を6月末までにやるマイルストーンを切りました ES2024の対応を手伝ってくれるContributorを募集しています Open Collectiveを始めたので、プロジェクトを支援してくれるSponsorを
フロントエンドとバックエンドの一貫したバリデーションで開発プロセスに調和と効率化をもたらす - Sansan Tech Blog
技術本部 Digitization部の湯村です。 新規アプリケーション開発で採用したバリデーションロジックの管理方法を紹介します。 1. はじめに 2023年末に以下の技術スタックでデータ化アプリケーションの開発をしました。 フロントエンド: TypeScript + Next.js バックエンド: TypeScript + Express Next.js では App Router を採用しましたが、Server Components、Route Handler は利用せず、ブラウザから Express の API を呼び出す構成にしました。 SPA + API で開発する際の課題 この構成で開発をする際の課題の1つにフロントエンドとバックエンドでのコードの重複があります。 特にバリデーションのロジックの管理方法は頭を悩ませた方も多いはずです。 バリデーションに対するアプローチ バリデー
Object.fromEntriesを活用してArray#reduceを代替する
JavaScriptにおいて、ある配列をもとにして別のオブジェクトを作成する場合、Array#reduceを使用することが多い。 const input = ['foo', 'bar', 'baz']; const result = input.reduce((accumulator, currentValue) => { accumulator[currentValue] = capitalize(currentValue); return accumulator; }, {}); assert.deepStrictEqual(result, { foo: 'Foo', bar: 'Bar', baz: 'Baz' }); しかし例のように、単にキーと値の組み合わせにマッピングするだけなら、あえてArray#reduceを使うまでもない。代わりにObject.fromEntriesを使え
【LINE証券 Frontend】requestIdleCallbackを活用して初期レンダリング時間を約14%削減した話
こんにちは。フィナンシャル開発センターの鈴木です。LINE証券のフロントエンドを担当しています。この記事は【LINE証券 FrontEnd】シリーズの4番目の記事です。 最近のWeb Vitalsの隆盛を受けて、LINE証券のフロントエンドでもパフォーマンスの改善に取り組み始めました。およそ2週間ほど改善に取り組んだ結果として、開発環境での計測ではLighthouseのperformanceスコアが従来より30点ほど上昇しました。 パフォーマンス改善のためにさまざまな施策を行いましたが、この記事ではその中でも興味深かったものとして、requestIdleCallbackを活用してLazy Loadingされるコンポーネントの読み込みを遅延し、その結果初期レンダリングにかかる時間を約14%削減できた事例をご紹介します。 環境 以前の記事でご紹介したとおり、LINE証券のフロントエンドはTyp
CSPでサードパーティースクリプトを律する
はじめに Legalscapeの顧客の中には、情報セキュリティー等の理由から社内ネットワークからの通信の宛先を制限している組織もたくさんいます。 そのためLegalscapeでは、プロダクトの動作に必要な第三者リソースの一覧を管理し、Legalscapeの導入時にはそれらのドメイン名への接続を許可するようにお願いしてきました。 しかし、現代のWeb開発は、第三者リソースが利用可能であることを暗に期待しがちです。開発者がLegalscapeの顧客背景をよく知らずに新しい依存を導入してしまうことも考えられます。またさらに厄介なのが間接依存の増加です。実際に、firebase packageの更新によって内部で呼び出しているAPIのエンドポイントが変化し、開発者が知らないうちに接続先が変わっていたということが判明しています。[1] そこで私は、CSPを使うことでサードパーティースクリプトやAPI
Using localStorage in Modern Applications - A Comprehensive Guide | RxDB - JavaScript Database
When it comes to client-side storage in web applications, the localStorage API stands out as a simple and widely supported solution. It allows developers to store key-value pairs directly in a user's browser. In this article, we will explore the various aspects of the localStorage API, its advantages, limitations, and alternative storage options available for modern applications. What is the local
TanStack Router（& Query）はSPA開発で求めていたものだった✨【Reactのルーティングとデータ取得】
Reactの技術選定においてルーティングとデータ取得は特に重要な役割を担っています。 もちろんNext.jsやRemixのようなフレームワークを採用すれば、個別のライブラリを追加することなくルーティングからデータ取得までフレームワークが提供するAPIを使って実装することができます。 しかし、AI ShiftのようなBtoBのサービスにおいてはSPAで十分なことがほとんどで、Next.jsなどのフレームワークの採用がtoo muchになりかねません。 この記事は2024年2月時点の技術選定において、TanStack RouterがSPAのルーティングライブラリとして非常に有力な候補であることを紹介します。 はじめに TanStack RouterとTanStack Queryの採用がSPAアプリケーションにおける最適解の一つになりうることをその特徴と実際の設計例をもとに解説します。 TanS
A novel technique for creating ergonomic and tree-shakable TypeScript libraries | SoftwareMill
Software DevelopmentPerformant BackendsData-Intensive FrontendsLegacy Systems MigrationLeadershipTechnology PartnerFractional CTOArchitectureSoftware Audit & ConsultingCybersecurity ServicesAI and MLMLOpsBespoke AI ChatbotsScience as a ServiceComputer VisionOperationalCloud Cost ReductionDevOps as a ServicePlatform EngineeringDeveloper ExperienceObservability Services
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Migrating 500+ tests from Mocha to Node.js | Astro
