Fastest Frontend Tooling in 2022
First published on October 3, 2022, updated on June 4, 2026 I tried tons of frontend tools this year in my pursuit to optimize my Developer Experience. I published an incredibly fast minimal template with sensible defaults which you can use to quickly spin up new projects: cpojer/vite-ts-react-tailwind-template. This is not a does-it-all starter kit. The template comes with the essential tools for
Optimize long tasks | web.dev
Published: September 30, 2022, Last updated: December 19, 2024 Common advice for keeping JavaScript apps fast tends to boil down to the following advice: "Don't block the main thread." "Break up your long tasks." This is great advice, but what work does it involve? Shipping less JavaScript is good, but does that automatically equate to more responsive user interfaces? Maybe, but maybe not. To unde
The Basics of Remix | CSS-Tricks
You’ve probably heard a lot of hype around one of the newest kids on the framework block, Remix. It may be surprising that it got its start back in 2019, but it was originally only available as a subscription-based premium framework. In 2021, the founders raised seed funding and open sourced the framework to let users start using Remix for free. The floodgates opened and everyone seems to be talki
Generating an EPUB File in the Browser
I’ve been meaning to blog about a few aspects of how I built my tool Readlists and I finally have the time to do it. So here we go. Readlists is a purely client-side app, i.e. JavaScript required. That’s something I might change in the future as I dabble in how to host and maintain a website with a server, but for now purely client-side is the way it works (because that’s the way I knew how to bui
雰囲気でパッケージマネージャーを作ろう
概要 本記事では、 npm や yarn などの、Node.js におけるパッケージマネージャーを自作することで、その仕組みや挙動の理解を深めようという取り組みを整理した記事になります。 想定読者は以下を満たす人です。 普段 npm や yarn などのパッケージマネージャを使用している package.json 内の dependencies devDependencies ぐらいはわかる npm リポジトリの構成や、パッケージインストールの仕組みとか全然わからんけど、興味がないこともない TypeScript のコードをまぁまぁ読み書きできる 筆者自身も上記のレベルのため、パッケージマネージャに詳しい方が見たら鼻で笑うレベルの内容でもあるので、どうぞお手柔らかにお願いします。 注意事項 本記事ではソースコードを断片的に記載していますが、ハンズオン形式にはなっていないため、コードの全容に
Implementing Promisable setTimeout - Dmitry Kudryavtsev
In a world controlled by the event loop, setTimeout is the king of execution control. It allows you to schedule function calls to be executed later. However, it can’t do one thing - suspend the execution for a certain amount of time. Think of an equivalent to sleep(ms) from different languages. Let us now explore how we can implement it. Promisifying setTimeout In order to make setTimeout behave s
Things not available when someone blocks all cookies
l'occasion f — Gelegenheit f, die ~ , der ~. bei Gelegenheit — à l'occasionI #StandWithUkraine 🇺🇦. The other day, I received a harmless-looking Issue for my app SVGcode (announcement blog post). The Issue read: Crash when opened with cookies blocked Hey I block cookies by default. Unfortunately your website doesn’t handle that nicely despite it not needing (IMO) cookies to operate. I'm getting t
Will Bun JavaScript Take Node's Crown
Huge thanks to Jarred Sumner for reviewing this post. It wouldn’t have been possible without his help. Bun is a new and ambitious JavaScript toolset and runtime. Early adopters have been reporting that Bun JavaScript is incredibly fast. So fast that it has been touted by some as a Node.js killer. Curious, I decided to check out Bun for myself and benchmark it against the competition. Is it as fast
Checking if a JavaScript native function is monkey patched
TL;DR: How can you determine whether a JavaScript native function was overridden? You can't — or at least not reliably. There are ways to get close to it, but you can't fully trust them. Native functions in JavaScript In JavaScript, a "native function" is a function whose source code has been compiled into native machine code. Native functions can be found in JavaScript's standard built-in objects
Meta の新しいリッチテキストエディターフレームワーク Lexical を調べる(実践編)
Lexical で簡単なリッチテキストエディターを作ってみよう Lexical は Meta が開発したリッチテキストエディターフレームワークです。以前 Lexical のアーキテクチャを調べてまとめた記事を執筆したので、概要や設計についてはそちらをご覧ください。 Lexical のコアライブラリは EditorState の差分から最も効率のいい方法で DOM を更新する Reconciler がメインで、エディターの機能やビューはプラグインという形で各々実装する必要があります。 ただ、コアライブラリだけ提供しても使う側が戸惑ってしまうので、すでに多くの公式プラグインが同じリポジトリで提供されています。 そして注目すべきは Playground の充実度です。 もはや Playground をそのまま使っても十分なほど多機能なエディターが実装されています。もちろんソースコードは同じリポジ
Everything You Need to Know About JavaScript Import Maps
Everything You Need to Know About JavaScript Import Maps By Ayooluwa Isaiah on Jul 25, 2022 When ES modules was first introduced in ECMAScript 2015 as a way to standardize module systems in JavaScript, it was implemented by mandating the specification of a relative or absolute path in import statements. import dayjs from "https://cdn.skypack.dev/dayjs@1.10.7"; // ES modules console.log(dayjs("2019
爆速のアイコン検索サイトを作った
爆速のアイコン検索サイトを作ったので、遊んでみてください。 (1) まずは自分が使いやすいアイコン検索サイトを作りたかったので作りました。(2) 様々なアイコンを爆速で横断検索し、サクッとアイコンをコピーできるようにしました。単純ながら意外とその部分が面倒なサイトは多い気がします。(3) また応用とメンテがしやすい実装にして、非常にサポート範囲の広い DB を GitHub Pages 上で構築しました。公開時点では 120+ のアイコンセットと、130,000+ のアイコンをサポートしており、サポート数も観測範囲では No.1 です。 開発動機 アプリ/サイト開発ではまずお世話になるであろうアイコン。私はこれまで Material Icons と Bootstrap Icons ばかり使っていました。これは検索が面倒だったからです。検索が面倒だと知名度の高いものだけに閉じてしまうので、良
Retry XMLHttpRequest Carefully
Aaron D. Parks June 28, 2022 Share: Twitter Reddit Facebook Linkedin Telegram It's rare to see a web app that doesn't use XMLHttpRequest (or fetch, the new API with comparable capability). XMLHttpRequest (which we can call XHR if you're into the whole brevity thing) is as handy as a shirt pocket, but it doesn't do much to encourage robust and resilient programming practices. Any app that runs in t
応答性を示す新しい指標「INP」 | フロントエンドBlog | ミツエーリンクス
ユーザーの直帰率や離脱率とパフォーマンスの関係から、コンテンツを表示する速度や応答性（ページがユーザー入力に応答する速度）がいかに重要であるかは、既によく知られるようになってきています。 ではコンテンツを表示する速度や応答性を上げるにはどうしたらいいでしょう。 結論から述べるとパフォーマンスを客観的な指標に基づいて正確かつ定量的に測定し、そこから課題を見つけて解決することが必要になります。 GoogleはChrome User Experience Reportに新しく応答性指標INPを導入しました。 INPとは INP（Interaction to Next Paint）は、ページの読み込みを開始してからユーザーがページを離れるまでの間に発生するユーザー入力の応答性（インタラクション）を評価する測定基準で、遅延時間を計測します。 計測対象のインタラクションは、以下となります。 ユーザー入
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
Faster JavaScript Builds with Metro
How Airbnb migrated from Webpack to Metro and made the development feedback loop nearly instantaneous, the largest production build 50% faster, with marginal end-user runtime improvements. By: Rae Liu IntroductionIn 2018, the frontend Airbnb infrastructure relied on Webpack for JavaScript bundling which had served us well up until then; however, with our codebase almost having quadrupled in the pr
Using JavaScript to fill localStorage to its maximum capacity
Using JavaScript to fill localStorage to its maximum capacity Earlier this week, I had to test how one web app I work on behaves when it tries to store some data in an already full localStorage. To do so, I wanted to find a way to programmatically fill localStorage to its maximum capacity using JavaScript. Knowing that the only way to detect when the localStorage is full is catching the QuotaExcee
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://engineering.mercari.com/en/blog/entry/20220930-building-secure-apps-using-web-workers/
Font Family and @supports
SpiderMonkey Newsletter (Firefox 104-105)