Exploring the Web Speech API
Experimenting with voice on the web using the Web Speech Synthesis and Recognition API The Web Speech API is one of those web technologies that no one ever talks about or writes about. In this blog post, we are going to take a closer look at what the API is capable of, what its limitations and strengths are, and how web developers can utilize it to enhance the user’s browsing experience. “The Web
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
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の作り方(準備編) | hiroppy's site
今回は中身がどう動いているかを解説したいと思います。 最初のこの記事では、最低限の実装を説明していくことにします。 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 updatedoninApril 29th, 2026.Apr 2026. 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 everybod
window.location Cheatsheet
Samantha Ming Posted on Apr 22, 2020 • Edited on May 4, 2020 • Originally published at samanthaming.com Looking for a site's URL information, then the window.location object is for you! Use its properties to get information on the current page address or use its methods to do some page redirect or refresh 💫 https://www.samanthaming.com/tidbits/?filter=JS#2 window.location.origin → 'https://www.sa
Web Vitals | Articles | web.dev
Published: May 4, 2020, Last updated: October 31, 2024 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 sig
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
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 another web framework. There a
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}など色
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Understanding Template Literals in JavaScript | DigitalOcean
How CommonJS is making your bundles larger | Articles | web.dev