タスクキューとマイクロタスクキュー｜イベントループとプロミスチェーンで学ぶJavaScriptの非同期処理
nextTick vs queueMicrotask vs Promise.resolve vs setTimeout - Qiita
はじめに 普段の開発でなかなかお目にかかることも使うことも滅多にない queueMicrotask について興味を持ったついでに、 process.nextTick や Promise, setTimeout などとの比較をしてみました。 TL;DR 下記の優先度順でキューからタスクが取り出され処理される。 nextTick queueMicrotask, Promise.resolve → Microtask setTimeout → Task (a.k.a. Macrotask) より具体的には、MicrotaskキューとTaskキューの2つのキューがあり、Microtaskキューが優先的に処理されるようになっている。 Microtaskキューが空でない限りはTaskキューの中身を実行しない構造となっており、queueMicrotask, Promise.resolve では Micr
Effective TypeScript › The Saga of the Closure Compiler, and Why TypeScript Won
Here's something that makes me feel old: in just six months, Gmail will celebrate its 20th anniversary. If you weren't actively developing web sites at the time, it's hard to capture just how revolutionary it was. This was a time when JavaScript was held in almost universally low regard. The idea that you could build a sophisticated web app using it was mind-boggling. But it clearly worked and it
Temporal API is Awesome · Taro
Wednesday, August 23, 2023 Dates in JS suck. Well, they suck in all languages, really. It's surprisingly hard to get right. The native Date is super limited. Sure, you can new Date('2015-10-21T01:22:00.000Z') and date.toISOString(), maybe dateA < dateB, but that's pretty much it. Need to add minutes, hours, or whatever to a date, check how many days there are until X date, etc? Good luck with that
ブラウザバックで壊れないstate管理を実現する`location-state`
この記事は最近リリースしたlocation-stateというライブラリの紹介記事です。 モチベーション Reactのstate管理は、様々な分類が可能です。筆者が過去に書いた記事「スコープとライフタイムで考えるReact State再考」では、stateの分類は大きく以下2つの観点で分類ができると述べました。 スコープによる分類 ライフタイム（=stateの生存期間）による分類 詳しく知りたい方はこの記事を読んでいただきたいのですが、今でもstate管理というと多くの場合スコープによる分類の話が多く、ライフタイムによる分類の話はあまり聞かない気がします。 なぜライフタイム観点が重要か ライフタイムを意識せずに実装した場合に発生するのが、遷移時に状態が破棄され復元されない、つまりブラウザバックでstateが壊れるという問題です。この問題については以下の記事で、Vercelの社長が2014年に
How we reduced the size of our JavaScript bundles by 33%
When was the last time you were about to click a button on a website, only to have the page shift—causing you to click the wrong button instead? Or the last time you rage-quit a page that took too long to load? These problems are only amplified in applications as rich and interactive as ours. The more front-end code is written to support more complex features, the more bytes are sent to the browse
Faster Vue.js Execution in Firefox – Mozilla Hacks - the Web developer blog
Speedometer 3 is a cross-industry effort to build a modern browser benchmark rooted in real-world user experiences. Its goal is to focus browser engineering effort towards making the Web more smooth for actual users on actual pages. This is hard to do and most browser benchmarks don’t do it well, but we see it as a unique opportunity to improve responsiveness broadly across the Web. This requires
Audjust - Snappy UIs With WebAssembly and Web Workers
Published: 2023-08-07 Our web app allows users can change the length of a song or find loops present in it for infinite listening, remixing, or for their next next video edit or performance. After uploading a song, there is an initial server-side analysis step after which the audio can be manipulated completely in the browser. Users can alter the desired length or mark sections of audio to prefer
Design Trade-offs in Bundler: The Rationale Behind Creating Rspack · web-infra-dev · Discussion #1
chinese version Before embarking on the development of Rspack, we explored various build tools and frameworks, including extensive use of Webpack, Vite, esbuild, and Rollup in real-world production environments. To provide some context, our team, known as the WebInfra Team, is responsible for overseeing the company's suite of front-end build tools and frameworks. Some of these are open-source, whi
14 Linting Rules To Help You Write Asynchronous Code in JavaScript
Debugging asynchronous code in JavaScript can feel like navigating a minefield at times. You don't know when and where the console.logs will print out, and you have no idea how your code is executed. It's hard to correctly structure async code so it executes in the right order as you intend it to. Wouldn't it be nice if you had some guidance while writing asynchronous code, and to get a helpful me
Introducing the scheduler.yield origin trial | Blog | Chrome for Developers
Building websites that respond quickly to user input has been one of the most challenging aspects of web performance—one that the Chrome Team has been working hard to help web developers meet. Just this year, it was announced that the Interaction to Next Paint (INP) metric would graduate from experimental to pending status. It is now poised to replace First Input Delay (FID) as a Core Web Vital in
Patterns for Reactivity with Modern Vanilla JavaScript – Frontend Masters Blog
“Reactivity” is how systems react to changes in data. There are many types of reactivity, but for this article, reactivity is when data changes, you do things. Reactivity Patterns are Core to Web Development We handle a lot with JavaScript in websites and web apps since the browser is an entirely asynchronous environment. We must respond to user inputs, communicate with servers, log, perform, etc.
Deprecating the unload event | Web Platform | Chrome for Developers
All sites deprecation timeline. Note that we also offer a menu of opt-out options in case this deprecation timeline doesn't provide sufficient time to migrate away from unload. Our goal is to use this soft deprecation to inform the timeline for the last phase (hard deprecation of unload) in which these opt-outs will be removed or reduced. Timeline of the unload deprecation. Background unload was d
Things you forgot (or never knew) because of React
Published: August 4, 2023 Updated: October 27, 2023 Part 1: an intro about music, defaults, and bubbles Like a lot of people, there was a time when the only music I listened to was whatever was played on my local radio station. (A lot of people over 30 or so, anyway. If this doesn’t sound familiar to you yet, just stick with me for a minute here.) At the time, I was happy with that. It seemed like
Blogged Answers: My Experience Modernizing Packages to ESM
Random musings on React, Redux, and more, by Redux maintainer Mark "acemarke" Erikson This is a post in the Blogged Answers series. Details on the painful experiences and hard-earned lessons I've learned migrating the Redux packages to ESM Table of Contents 🔗︎ Introduction Redux Packages Background Packages and Configurations Issue History Early Attempts Migrating to Vitest Initial Alpha Testing
Updates to Storage Policy
A website can store data on a user’s device using various storage APIs: localStorage, IndexedDB, File System, etc. It’s an important capability allowing websites to be functional offline with good performance by serving local resources. However, the storage capacity is not unlimited. In fact, it is usually much smaller than a device’s disk size. Bad things could happen when the capacity is full li
A compilation of outstanding testing articles (with JavaScript) | Practica.js
About the sweet and powerful 'use case' code patternA compilation of outstanding testing articles (with JavaScript)Testing the dark scenarios of your Node.js applicationPractica v0.0.6 is aliveIs Prisma better than your 'traditional' ORM?Which Monorepo is right for a Node.js BACKEND now?Popular Node.js patterns and tools to re-considerPractica.js v0.0.1 is alive
2023-08-03のJS: Riot.js v9.0.0、Firefox 116、React Server Componentsへの移行
JSer.info #654 - Riot.js v9.0.0がリリースされました。 Release Evergreen · riot/riot このリリースでは、Riot.jsとcompilerなどのバージョンを合わせるため、v8はスキップしてv9.0.0としてリリースされています。 Node.js 14/16のサポート終了、BabelでのTranspileをしないように変更、boolean属性の挙動変更などが含まれています。 Firefox 116がリリースされました。 Firefox 116.0, See All New Features, Updates and Fixes Firefox 116 for developers - Mozilla | MDN HTTP/2のアップロードパフォーマンスの改善、CSP3 external hashesをサポート。 FetchのgetRe
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Protractor Deprecation Update August 2023
Creating a recorder with Document Picture-in-Picture API