Refactoring optional chaining into a large codebase: lessons learned • Lea Verou
Refactoring optional chaining into a large codebase: lessons learned Chinese translation by Coink Wang Now that optional chaining is supported across the board, I decided to finally refactor Mavo to use it (yes, yes, we do provide a transpiled version as well for older browsers, settle down). This is a moment I have been waiting for a long time, as I think optional chaining is the single most subs
How CommonJS is making your bundles larger | Articles | web.dev
In this post, we'll look into what CommonJS is and why it's making your JavaScript bundles larger than necessary. Summary: To ensure the bundler can successfully optimize your application, avoid depending on CommonJS modules, and use ECMAScript module syntax in your entire application. What's CommonJS? CommonJS is a standard from 2009 that established conventions for JavaScript modules. It was ini
JavaScriptライブラリを読むときのコツ
少し前からライブラリを読むトレーニングを始めたのですが、最近ようやく読み方がわかってきたので、やり始めた頃に知っておきたかったことをまとめます。 これから JavaScript/TypeScript で書かれたライブラリを読んでみようと思っている方の助けになれば嬉しいです。 「私はこういう道具を使ったり、こういう工夫をしています」みたいな感じの内容ですので、もし「もっといい読み方があるよ」みたいなのがありましたらIssueなどで教えていただきたいです。 （※ライブラリを読むにあたって、ブラウザの話と NodeJS の話があるのですが、似てる点がほとんどなのでごった煮します。） エントリポイントを探す ライブラリを読むにあたって そのライブラリが持つ module がどう協調して全体が作られるのか その関数は正確にはどういう挙動をするのか などを考えると、ユーザーから渡された入力や呼び出しが
Introducing the MDN Web Docs Front-end developer learning pathway – Mozilla Hacks - the Web developer blog
Thanks! Please check your inbox to confirm your subscription. If you haven’t previously confirmed a subscription to a Mozilla-related newsletter you may have to do so. Please check your inbox or your spam filter for an email from us. Saboya Gustavo Great initiative! Never coded before 2020, and I intend to become a front-end developer since the beginning of this year. Sometimes, my path has slowed
小さなEventEmitterライブラリ - eventmitを書いた
EventEmitterのようにPub/Subを行うeventmitという小さなライブラリを書きました。 azu/eventmit: Simple EventEmitter. A single event object per an event. eventmitは、TypeScriptで書かれています。 また、Node.jsのEventEmitterなどとは違って、イベント一つに対してeventmitのオブジェクトを一つ作成して使います。 import { eventmit } from "eventmit"; const event = eventmit<{ key: string }>(); // Register handler event.on((value) => { console.log(1, value); }); event.on((value) => { consol
SES support for ECMAScript modules
SES v0.8.0Up to this point, SES has supported evaluating scripts in the SES runtime. Since every non-trivial application has many modules, running an application previously required creating a script bundle with a tool like Browserify. We’re excited to announce the first release of SES that directly supports loading ECMAScript modules. This is the first in a series of milestones toward delivering
The Svelte Compiler Handbook | Tan Li Hau
SvelteJavaScriptcompiler Who is this for? Overview 1. Parsing source code into AST Where can I find the parser in the source code? Where can I learn about parsing in JavaScript? 2. Tracking references and dependencies a. Svelte creates a `Component` instance. b. Traverse the instance script and module script AST c. Traverse the template d. Traverse the instance script AST e. Update CSS selectors t
module bundlerの作り方(準備編) - 技術探し
今回は中身がどう動いているかを解説したいと思います。 最初のこの記事では、最低限の実装を説明していくことにします。 webpack のアルゴリズムの仕組みはこちらを読んでください。 必要なステップ 必要なステップは以下の 3 つです。 エントリーポイントからのすべてのモジュールを走査し、requireを解決後にユニーク id を付与していく コード内のモジュールパス(requireの引数(e.g. ./module.js))を id へ置換する runtime のコードテンプレートの作成 IIFE(即時関数)箇所とそれに付随する引数の module 群 この実装されあれば、動くコードはできます。(2 つめは optional でもいいけど後からつらくなる) モジュール解決 今回は説明しやすいように関数を 2 つに分けています。 すべてのモジュールの把握と ID 作成 コード内の requi
How an anti ad-blocker works: Reverse-engineering BlockAdBlock
How an anti ad-blocker works: Reverse-engineering BlockAdBlock If you've used an adblocker, you may have seen BlockAdBlock. This script detects your ad-blocker and disables website access until you deactivate your adblocker. But I found myself wondering how it worked. How does an anti ad-blocker detect adblockers? And how do adblockers react and block ad-block-blockers? Reverse-engineering through
Kite is saying farewell - Code Faster with Kite
“These markets are so large and they’re growing so fast, we’re actually seeing brand effects take place. And we haven’t seen that since the internet. And by brand effects, I mean if you become the household name, you will get the adoption.” – Martin Casado, a16z, source From 2014 to 2021, Kite was a startup using AI to help developers write code. We have stopped working on Kite, and are no longer
Accessible Animations in React with "prefers-reduced-motion" • Josh W. Comeau
Accessible Animations in React The “prefers-reduced-motion” Hook Filed underReactoninMay 4th, 2020.May 2020.Last updatedoninMarch 5th, 2025.Mar 2025. IntroductionLong-time readers of this site have probably picked up that I am a big fan of animations. When used properly, I believe they add a ton of value to the user experience. That said, it's important to be mindful of the fact that not everybody
Web Vitals | Articles | web.dev
Published: May 4, 2020 Optimizing for quality of user experience is key to the long-term success of any site on the web. Whether you're a business owner, marketer, or developer, Web Vitals can help you quantify the experience of your site and identify opportunities to improve. Overview Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to deliv
The Cost of Javascript Frameworks - Web Performance Consulting | TimKadlec.com
There is no faster (pun intended) way to slow down a site than to use a bunch of JavaScript. The thing about JavaScript is you end up paying a performance tax no less than four times: The cost of downloading the file on the network The cost of parsing and compiling the uncompressed file once downloaded The cost of executing the JavaScript The memory cost The combination is very expensive. And we a
Crank.js | Introducing Crank
By Brian Kim – April 15, 2020 A deep dive into why Crank.js was created, exploring the limitations of React's Suspense API and the philosophy behind using generators and async functions for components. After months of development, I’m happy to introduce Crank.js, a new framework for creating JSX-driven components with functions, promises and generators. And I know what you’re thinking: oh no, not
What's new in ECMAScript 2020
ECMAScript 2020, the 11th installment of our favorite programming language, contains a handful of new features. Some are small ones, but others have the potential to change forever the way we write JavaScript. This article is an attempt at a short and concise overview of those new features. Grab your cup of tea and let's go. Dynamic import() ES2015 introduced the static import syntax. Now you coul
A Tour of Inline Caching with Delete
If you search for any JavaScript performance advice, a very popular recommendation is to avoid the delete operator. Today, this seems to be good advice, but why should it be vastly more expensive to delete a property than to add it? The goal of my internship at Apple this winter was to improve the performance of the delete operator in JavaScriptCore. This has given me the opportunity to learn abou
Mocha v7のmocha.optsから.mocharc.{json,js,yml,yaml}にマイグレーションするスクリプト
Mochaではv7からtest/mocha.optsの設定ファイルが非推奨となっています。 mocha.optsファイルはCLIの引数をそのまま書ける設定ファイルです。 mocha.optsファイルを利用すると次のようなDeprecation Warningが表示されるはずです。 (node:64389) DeprecationWarning: Configuration via mocha.opts is DEPRECATED and will be removed from a future version of Mocha. Use RC files or package.json instead. Mocha v6からmocha.optsの代わりに.mocharc.jsonなどの設定ファイルがサポートされました。 .mocharc.{json,js,yml,yaml,cjs}など色
JavaScript Primerの書籍版が4月27日に発売予定です！
JavaScript Primerは https://jsprimer.net/ でOSSとして公開しているJavaScriptの入門書です。 JavaScript Primerの書籍版が2020年4月27日にアスキードワンゴから発売されます！ 正式名称は「JavaScript Primer 迷わないための入門書」となっています。 略称は今まで通り jsprimer または js-primerです。 ハッシュタグも引き続き #jsprimer を利用してください。 予約できるのは物理書籍だけですが、電子版(Kindleと達人出版)も発売同日〜後日に発売される予定です。 書店への物理的なアクセスが難しい状況なので、欲しい人はできるだけ予約してください！Amazonなら次のページから物理書籍を予約できます。 JavaScript Primer 迷わないための入門書 | azu, Suguru
Under-the-hood of web bundlers (e.g. Webpack)
Webpack is somewhat of a black box for most developers. Tools like “create-react-app” abstract most of the bundler functionality away. I did some research into it and began building my own light-weight web bundler to understand more about what it entails. This is part of my “under-the-hood of” series: Type systems (e.g. TypeScript)Test runners (e.g. Mocha)VSCode auto formatters (e.g. Prettier)Sour
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
window.location Cheatsheet
