Browser Dev Tools: The Ultimate Guide 🔥
Pretty Print Raw files are usually minified, and therefore hard to read. Use the Pretty Print option to format it In the background, Chrome is creating a new file (names filename.js:formatted), closing that file will undo the formatting. If doing this each time is getting boring, then there's an experimental setting to auto-enable pretty print for all sources. Under ⋮ → Settings → Experiments Sele
「State of JavaScript 2022」公開。利用率1位のフロントエンドライブラリはReact、レンダリングはNext.js、テストはJestなど、4万人のエンジニアが回答
JavaScriptに興味を持つ世界中のIT技術者3万9472人が回答したアンケートの結果をまとめた「State of JavaScript 2022」が公開されました（日本語訳版が同時公開されています）。 回答者の国別分布を上位5位までを見ると米国が11.9％、ドイツが5.2％、フランスが3.7％、イギリス（UK）が3.6％、そしてインドが3.2％。 言語別の回答者は、英語が69.6％、フランス語が3.4％、ドイツ語が3.1％、スペイン語が3％などとなっており、日本語での回答者は0.4％でした。 アンケートの結果は、ProxyやPromiseなどに関するJavaScriptの新機能がどのくらい使われているか、Service WorkerやWebGLなど新しいブラウザAPIがどのくらい使われているかや、人気のJavaScriptライブラリ、JavaScriptは正しい方向に進化していると思
moment.js・day.js よりも速くて軽い cdate ライブラリ - Qiita
moment.js や day.js と似たインターフェースを実装した高速・軽量の JavaScript ライブラリ『cdate』をリリースしました。→ https://www.npmjs.com/package/cdate cdate の主な特徴： moment.js や day.js、Luxon よりも高速 moment.js と同じ .format("YYYY-MM-DD HH:mm:ss") 出力フォーマットに対応 strftime と同じ .text("%Y-%m-%d %H:%M:%S") 出力フォーマットに対応 moment.js と同様に .add(1, "month").startOf("week").endOf("day") のような計算に対応 .tz("Asia/Tokyo") あるいは .utcOffset("+09:00") のようなタイムゾーン（時間帯）指定に対
[JavaScript] URLを文字列結合で組み立てないために、url-cheatsheetを作った
[JavaScript] URLを文字列結合で組み立てないために、url-cheatsheetを作った URLを文字列結合で組み立てると色々問題が起きやすいので、それを避けるためにURL APIやURLSearchParams APIでURLを組み立てるパターンをまとめたチートシートを作りました。 azu/url-cheatsheet: URL manipulation cheatsheet for JavaScript URLにユーザーが入力した文字列を含めるときはencodeURIComponentでエスケープする URLはプレーンな文字列ではなく構造化された文字列(文字の並びに意味がある文字列)として扱わないと、さまざまな問題を抱えやすいです。 たとえば、次のように文字列結合でURLを組み立てるとパストラバーサルの問題があります。 name に ../../adminのような文字列が
![[JavaScript] URLを文字列結合で組み立てないために、url-cheatsheetを作った](https://cdn-ak-scissors.b.st-hatena.com/image/square/b26f7dc8f9e783316f720174980e93c627438d74/height=288;version=1;width=512/https%3A%2F%2Fefcl.info%2Fpublic%2Ffavicon.png)
【Bun】BunとNode.jsの違いのメモ - UGA Boxxx
以前、Bunについてざっくり調べたことがある uga-box.hatenablog.com この時からBunについて、特にNode.jsとの違いについて、知る機会があったのでメモ （2022/9/5 追記）ソース元はfurukawaさんがNode学園40限目で話された内容 speakerdeck.com Node.jsの構成要素の一部 Standard Libraries HTTP、File systemとか n-api C++とかCを呼び出すネイティブモジュールの抽象化ライブラリ V8 JavaScript エンジン http-parser HTTP1.1用のパーサー OpenSSL HTTPSとかTLSとかの暗号化周りのライブラリ zlib 圧縮とか解凍とか ng-http2 HTTP2用のライブラリ ng-tcp QUIC用のライブラリ libuv OSによって異なるシステムコールの
【Bun】Bunとは - UGA Boxxx
bunという新たなJavaScriptランタイムが話題になったので調べた bunはJarred Sumner氏が開発したJavaScriptおよびTypeScriptプロジェクトをバンドル、トランスパイル、インストール、実行を高速に行うオールインワンのビルドツール（webpackやnpmが含まれたnodeのよう） Introducing Bun - an incredibly fast all-in-one JavaScript runtime. https://t.co/Yt6tAcnBQs— Jarred Sumner (@jarredsumner) 2022年7月5日 bunはパンという意味なので肉まんのようなアイコン 公式ドキュメントによると特徴は以下 bun.sh fetchのようなWeb APIやWebSocket、 ReadableStream がビルトインされている npm
1分でわかるreturn false; preventDefault(); stopPropagation() の違い
クリックイベントのサンプル .innerを子、.outerを親にしてそれぞれにクリックイベントのサンプルを作成した。リンクをクリックするとalertの".inner", ".outer"が表示されてからiwb.jpに遷移する。 $(".inner").click(function(){ alert(".inner"); }); $(".outer").click(function(){ alert(".outer"); }); alertの".inner", ".outer"が表示されてからiwb.jpに遷移するサンプル preventDefault()を使用するとリンクの遷移などのイベントを無効にできる。 $(".inner").click(function(e){ e.preventDefault(); alert(".inner"); }); $(".outer").click(fu
スケジューリング: setTimeout と setInterval
関数をすぐには実行させず、ある時点で実行するようにしたいことがあります。それは “呼び出しのスケジューリング” と呼ばれます。 そのための2つのメソッドがあります。: setTimeout は指定時間経過後、一度だけ関数を実行します。 setInterval は各実行の間は指定した間隔で、定期的に関数を実行します。 それらのメソッドは JavaScript の仕様の一部ではありません。しかしほとんどの環境は内部スケジューラをもち、それらのメソッドを提供します。特に、これらはすべてのブラウザと Node.js でサポートされています。
Qwikの基本概念である Resumable を理解する
この記事は Cloudflare Workers and micro-frontends: made for one another のブログを理解するためのに Qwik の基本的な概念について理解することを目的とした記事です。 上記ブログに関しては、@laiso さんがわかりやすく解説してくれています。 本記事が、これらの記事やブログを読んで Qwik に付いて深堀りしたくなった方のお役に立てれば幸いです。 また、後日私の方でも、上記記事の解説や補足を何かしらの方法でまとめたいと思っています。 2022/10/26 追記 上の宣言通り、スクラップにまとめました。 What is Qwik ? Qwikは builder.io によって作られた、フロントエンドライブラリです。 SSRをデフォルトとし、Cloudflare Workers などでのエッジレンダリングにも対応しています。 js
Vercel、Webpack後継を目指す、Rustベースの「Turbopack」をリリース | gihyo.jp
Vercel、Webpack後継を目指す、Rustベースの「Turbopack」をリリース JavaScriptフレームワークNext.jsの開発などで知られるホスティングサービス企業Vercelは2022年10月25日、Rustベースで高速に動作する新たなモジュールバンドラ「Turbopack」をリリースした。これはNext.jsでのアプリ開発を高速化するため、JavaScriptモジュールバンドラWebpackを置き換えるもの。 Webpackの700倍の速さを実現 同社によると、大規模なアプリケーションではTurbopackはWebpackの700倍高速に更新が表示されるとのこと。これは同社のビルドツールTurborepoなどで培われた各種キャッシュ最適化の技術を用いて実現されている。 TurbopackをNext.js 13開発サーバーで使用することで、超高速なホットリロード（HM
Turborepo
Make ship happenTurborepo is the build system for JavaScript and TypeScript codebases
JavaScript の undefined と null を完全に理解する
JavaScript で頻出する undefined と null について語ります。 言語仕様上の違い JavaScript (ECMAScript) において、仕様上 undefined と null は当然ながら明確に区別されています。いくつか言語仕様上の扱いについて挙げてみます。 比較 厳密な比較演算子 === において undefined と null は区別されます。ゆるい比較演算子 == においては両者は区別されません（仕様 7.2.14）。 console.log(undefined === null); // false console.log(undefined == null); // true
FontFaceSet: check() method - Web APIs | MDN
The check() method of the FontFaceSet returns true if you can render some text using the given font specification without attempting to use any fonts in this FontFaceSet that are not yet fully loaded. This means you can use the font specification without causing a font swap. Note: The check() method is not designed to verify whether a specific font style can be rendered or if a particular font is
JavaScript/Node.jsでのバイナリデータ処理 - Qiita
概要 JavaScriptでバイナリデータを扱おうとするとBufferとArraryBufferという似た名前のオブジェクトが登場して混乱したり、Uint8Arrayという耳慣れないオブジェクトが登場して途方に暮れたりすることがあると思います。本記事ではこれらのオブジェクトの概念を整理することでJavaScriptでのバイナリデータの扱いの見通しを良くしていきます。 概念の整理 まずバイナリデータを処理しようとしている環境がNode.jsなのかブラウザ環境なのかが重要です。Node.js環境の場合はBufferクラスを利用することになります。BufferクラスはNode.jsの標準ライブラリとして実装されています。 ブラウザ環境ではJavaScript自体に実装されているArraryBufferオブジェクトを利用することになります。Bufferは実装されていません。 これらは名前は似ていま
ブラウザのキーボードを制御する inputmode
October 26, 2019 created( August 1, 2022 updated ) input[type]によるキーボードの表示制御Googleの記事、web foundamentals 最適なフォームの作成では、type属性による入力しやすいキーボードの表示コントロールが説明されていました。 例えば、type="email"を指定すると、 <input type="email"> emailが入力しやすいキーボードが表示されます。 しかし、この指定方法には副作用もありました。 例えば、type="number" を指定した場合、 <input type="number"> このように、入力フィールド内に余計な入力補助要素 が表示したり、フィールドにhoverした状態でmouse wheelを動かすと 入力済みの値が勝手に増減 したりします。 前者はCSSで後者はJava
JavaScriptのメモリリークを検出するフレームワーク「MemLab」、メタがオープンソースで公開
JavaScriptのメモリリークを検出するフレームワーク「MemLab」、メタがオープンソースで公開 メタ（旧Facebook）は、JavaScriptアプリケーションのメモリリークを検出するフレームワーク「MemLab」をオープンソースとして公開したと発表しました。 We’ve open-sourced MemLab. #MemLab is a JavaScript memory testing framework that automates leak detection and makes it easier to root-cause memory leaks. 1/2 https://t.co/vo6Gzv56ud — Engineering at Meta (@fb_engineering) September 12, 2022 Metaが展開しているFacebook、Fac
イベントループとプロミスチェーンで学ぶJavaScriptの非同期処理
JavaScript の非同期処理は非常に難しく、その難しさの原因は「制御の流れ」が掴みづらいことにあります。 この本では非同期処理を理解するために必要な概念であり、仕組みでもあるイベントループでプロミスチェーンの処理がどのように行われるかをクイズ形式で学ぶことによって、非同期処理の「制御の流れ」を掴めるように訓練します。 知識面については中枢となるイベントループの機構から、実行環境と API、async/await や Promise.all などの一通りの範囲を学習し、最終的には並列化や順序づけて反復処理を行うための制御方法と TypeScript での型注釈までを網羅します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.cse.psu.edu/~sxz16/papers/malware.pdf
JavaScript Obfuscation: The Definitive Guide | Jscrambler
GitHub - mrpapercut/nonalpha-js-obfuscator: Non-Alphanumeric JS Obfuscator