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 Launches AI-Powered JavaScript Completions - Code Faster with Kite
Today we’re excited to launch Kite’s AI-powered completions for JavaScript. Kite’s completions automate away the repetitive boilerplate of writing JavaScript code. Let’s take a look… Now let’s break it down… Kite can complete up to multiple lines of code at a time, reducing the time you spend writing repetitive code. We’ve trained a new deep learning model on 22 million open-source JavaScript file
Accessible Animations in React with "prefers-reduced-motion" • Josh W. Comeau
Accessible Animations in ReactThe “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
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 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 – Published April 15, 2020 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 are already so many of them out there and each carries a non-negligible cost in terms of learning it and building an ecosystem to sur
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
フロントエンド x RTC界隈の最近とこれから - console.lealog();
フロントエンドエンジニアからみる、この界隈で今どんなIssueが話題になってるのかと、この先どういう動きがありそうかについて。 そこまで自分に先見の明があるとも思ってないけど、アウトプットしておかないと忘れてしまいそうなので・・。 ちなみにここでいうフロントエンドは、いわゆるブラウザとかJavaScriptのAPIのことです。 プロトコル的な側面はそこまで詳しくないのであまり触れません。 WebRTC 1.0 GitHub - w3c/webrtc-pc: WebRTC 1.0 API まず、RTCといえばズバリのWebRTCから。 昨年末にWDからCRへ格上げということで、もうAPIが激変したりはしない・・はず。 実際のところ、ここ半年くらい大きな対応した覚えがないです。（WebRTCそのものを実装してる人は、地味にいろいろ対応してると思うけど） ガワのAPIという観点でいうと、最近はも
JavaScriptやCSSを読み込むローダーライブラリをES Modulesとして読み込む
今どきのnpmパッケージはUNPKGやPika CDNを使えば、ES Modulesとして直接import文読み込めることがあります。 たとえばPreactなら、次のようにUNPKG経由で直接モジュールをインポートできます。 <script type="module"> import { h, Component, render } from 'https://unpkg.com/preact?module'; // Create your app const app = h('h1', null, 'Hello World!'); render(app, document.body); </script> Getting Started | Preact: Fast 3kb React alternative with the same ES6 API. Components & Vir
What’s new in react-query v1.0 - LogRocket Blog
react-query v1.0 was released on 26 February, which brought about a change in the react-query API and all-new dedicated devtools. In this post, I will be discussing the following changes on: Query keys and query functions useQuery Hook The new queries operation handler, queryCache react-query-devtools A comprehensive list of the updates (mostly minor changes) can be found on the changelog. Moving
Implementing single-file Web Components | CKEditor
# Implementing single-file Web Components Probably everyone who knows the Vue.js framework also heard about its single-file components. This super simple idea allows web developers to define the entire code of a component in one file. It is such a useful solution that an initiative to include this mechanism in browsers has already appeared. However, it seems quite dead as, unfortunately, no progre
Node.jsでUnhandled Rejectionsのときにexis statusが0となる問題を回避する
Node.jsでUnhandled Rejectionsが発生してprocessが終了すると、Exit Statusが0となる問題とその対策についてのメモです。 追記： Node.js 15+からUnhandle Rejectionが発生するとプロセスがExit Status 1で終了する動作がデフォルトとなりました Node.js v15ではunhandled rejectionでプロセスがエラー終了する 事前知識: Async FunctionはPromiseを返す関数定義です。 その辺について詳しくは次のサイトを読んでください。 JavaScript Promiseの本 非同期処理:コールバック/Promise/Async Function · JavaScript Primer #jsprimer 今回のサンプルコードは次のリポジトリにあります。 azu/unhandled-rej
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UI Fabric is evolving into Fluent UI - Microsoft 365 Developer Blog
Introduction to AntV
