パフォーマンス モニター パネル | Chrome DevTools | Chrome for Developers
パフォーマンス モニターを使用すると、サイトの読み込みとランタイムのパフォーマンスをすばやく把握できます。 概要 [パフォーマンス モニタ] パネルには、パフォーマンス指標をリアルタイムでグラフ化するタイムラインが表示されます。指標をクリックして、表示または非表示にします。次に、アプリの操作に応じてグラフがどのように変化するかを確認します。 パフォーマンス モニターは、次の指標を追跡します。 CPU 使用率。 JavaScript ヒープサイズ。 ページ上の DOM ノード、JavaScript イベント リスナー、ドキュメント、フレームの合計数。 1 秒あたりのレイアウトとスタイルの再計算。 パフォーマンス モニタ パネルを開く [パフォーマンス モニタ] パネルを開くには: DevTools を開きます。 次のキーを押してコマンド メニューを開きます。 macOS: Command+S
JSR: the JavaScript Registry
Introducing the JSR open governance boardJSR, a modern open source JavaScript registry, is meant for the greater JavaScript and TypeScript community. We're thrilled to announce its own independent governing body. Announcing OpenAI on JSROpenAI, leading development platform for building generative AI products and experiences, now has a JavaScript and TypeScript SDK on JSR. Announcing Growthbook on
フロントエンドのテストのモックには msw を使うのが最近の流行りらしい
皆様フロントエンドのテストを書いていらっしゃいますでしょうか？ フロントエンドのテストを書くときには API コールする処理を全てモックする必要があります。外部の API をコールする処理をテストに含めると API サーバーが落ちているなどの外部の要因によってテストが失敗してしまう可能性がありますし、テストを実行するたびに実際に API をコールしてしまうとサーバーに負荷がかかってしまうなど外部に対しても悪影響を与えてしまいます。 さて、従来のモックする手段としては Jest のモックを利用して axios や fetch などのモジュールをモック化する手法がよく使われていたかと思います。 最近のテスト手法として API コールをモックする際に Jest ではなく Mock Service Worker (以下 msw ）を使用する手法が注目されています。実施にどのように使用されているのか
クリエイティブコーディングの教科書
ゲームエンジンや3Dソフトウェアを利用して高度な表現ができるこの時代でも、プリミティブな描画や動き、アルゴリズムから学べることは多い。それらをJavaScriptで書くクリエイティブコーディングという形で学べる手引書が本書となる。
Offline.js – Handle your users losing their internet connection like a pro
What is Offline.js? Offline.js is a library to automatically alert your users when they've lost internet connectivity, like Gmail. It captures AJAX requests which were made while the connection was down, and remakes them when it's back up, so your app reacts perfectly. It has a number of beautiful themes and requires no configuration. Install The easiest way to add Offline to your site is with Eag
JavaScriptで任意のHTML要素をPicture-in-Pictureする
みなさんはPicture-in-Picture(PiP)という機能を使ったことがありますか。PiPは動画コンテンツなどを浮遊する小窓に表示する機能です。小窓はウィンドウの外側を自由に移動できます。 デスクトップが賑やかになりがちなPCでもPiPは大活躍なのですが、特にスマートフォンにおいては数少ない「ウィンドウ」機能になります。Androidはもちろん、iOS14も対応したことで話題になりました。 これによってスマホ一台あれば、ソシャゲの公式生放送を見ながらソシャゲのイベントを周回する地獄のような行為が可能になりました。 利用者という視点から見ると非常に便利なのですが、開発者から見ると動画しか表示できないのはなかなか使い所が難しくなります。そこで、この機能を使って好きな情報を表示できないか実験してみました。 PiP機能の対応環境 Chrome 70 Firefox 71（制限付き） mac
State of JavaScript 2020：いちばん利用率の高いJSフレームワーク、フロントエンドがReact、バックエンドはExpress、テストにはJest。2万4000人の調査結果
IT技術者のSacha Greif氏とRaphaël Benitte氏が、JavaScriptに興味を持つ世界中のIT技術者約2万4000人にアンケートを取り、結果をまとめたWebサイト「State of JavaScript 2020」が公開されています。 JavaScriptの最新のシンタックスや命令がどれくらい使われているか、フロントエンドやバックエンド、ビルドツールなど分野ごとにさまざまなJavaScript関連の技術はどれくらい興味を持たれているかなど、アンケート結果を基にして、満足度（Satisfaction）、興味（Interest）、利用率（Usage）、認知度（Awareness）などを計算。それぞれについてランキングを作成しています。 それぞれの値は次の式で計算されると説明されています。それぞれの項目にはアンケートの回答数が入ります。 満足度＝またこの技術を使いたい／（
「JavaScript」はここから始まった、1995年のJavaScriptリリースはこんな感じ
現代のウェブサイトに欠かせないプログラミング言語「JavaScript」は、当初はJavaを補完する言語としてリリースされましたが、今ではその地位にとどまらずウェブクライアントやサーバー、デスクトップアプリに至るまで、さまざまな製品で利用されています。そんなJavaScriptが初めて世に現れた、1995年のネットスケープコミュニケーションズとサン・マイクロシステムズによるリリースが、インターネットアーカイブに保存されています。 NETSCAPE AND SUN ANNOUNCE JAVASCRIPT, THE OPEN, CROSS-PLATFORM OBJECT SCRIPTING LANGUAGE FOR ENTERPRISE NETWORKS AND THE INTERNET https://web.archive.org/web/20070916144913/http://wp.
JavaScriptのexport defaultアンチパターンについて、検証してみた - Qiita
この記事はFringe81 アドベントカレンダー2017の16日目です。 始めに ES6のimport/exportについては ・基本的にexport defaultを使う ・exportする対象が複数あれば、exportを使う ・exportされたモジュールはimportで受け取る ぐらいの雑な理解をしてました。 「基本的にexport defaultを使う」については、Design goals for ES6 modulesにて、以下のように言及されてます。 16.8 Design goals for ES6 modules If you want to make sense of ECMAScript 6 modules, it helps to understand what goals influenced their design. The major ones are: ・D
🚀⚙️ JavaScript Visualized: the JavaScript Engine
JavaScript is cool (don't @ me), but how can a machine actually understand the code you've written? As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳 | Note: This post is mainly based on the V8 eng
Svelte • The magical disappearing UI framework
Svelte is a UI framework that uses a compiler to let you write breathtakingly concise components that do minimal work in the browser, using languages you already know — HTML, CSS and JavaScript. It’s a love letter to web development. But don’t take our word for it. Developers consistently rank Svelte as the framework they’re most excited about using.
きれいで読みやすいJavaScriptを書く デコレーターの基本を先取り
ES2015の登場とトランスパイラーの普及により、コードや記事の中で言語の新機能を見かけることが増えました。とりわけ難しい新機能がJavaScriptのデコレーターです。 デコレーターはAngular2に採用されたことで人気が高まりました。デコレーターは現時点ではAngularではTypeScriptで使うことができ、JavaScript（ECMAScript）のプロポーザルではステージ2（編注：ドラフト）です。将来的にはJavaScriptにも採用されるでしょう。そこで、デコレーターの役割や、デコレーターを使ってきれいで読みやすいコードを書く方法を紹介します。 デコレーターとは デコレーターは、コードの一部をほかのコードでデコレート（装飾）するように包むことで、「関数合成」や「高階関数」と表現されていました。JavaScriptで実装可能で、具体的には次のようにある関数をほかの関数で包む
HTML5のLocal Storageを使ってはいけない（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Randall Degges - Please Stop Using Local Storage 原文公開日: 2018/01/26 著者: Randall Degges 日本語タイトルは内容に即したものにしました。 画像は元記事からの引用です。 初版公開: 2019/10/19 追記更新: 2024/04/05 -- リンク情報を記事末尾に移動しました 本気で申し上げます。local storageを使わないでください。 local storageにセッション情報を保存する開発者がこれほど多い理由について、私にはさっぱり見当がつきません。しかしどんな理由であれ、その手法は地上から消えてなくなってもらう必要がありますが、明らかに手に負えなくなりつつあります。 私は毎日のように、重要なユーザー情報をlocal storageに保存す
フロントエンドエンジニア御用達の MDN web docs を網羅した
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? このリストは何？ MDN web docs を、あたかも書籍の目次かのごとく整理しなおしたものです。それぞれ MDN web docs の記事へリンクしています。 なぜこれが必要になったかというと、人材市場でフロントエンドエンジニアが少なすぎる現状をどうにかするべく教育体制を整えるところから考え始めたのですが、それならまずは日頃お世話になっている MDN web docs を教材として扱いたいなと思ったからです。慣れてきてもよく参照するし「アレどこだっけなぁ？」を軽減もしやすいかなって。 MDN web docs は内容そのものはかなり
JavaScript Primer - 迷わないための入門書 #jsprimer
JavaScript Primer 迷わないための入門書 Tweet Watch Star Twitterのハッシュタグ: #jsprimer これからJavaScriptを学びたい人が、ECMAScript 2015以降をベースにして一からJavaScriptを学べる書籍です。 プログラミングをやったことがあるが、今のJavaScriptがよくわからないという人が、 今のJavaScriptアプリケーションを読み書きできるように書かれています。 初めてのプログラミング言語としてJavaScriptを学ぶ人は、まずは「はじめに」から読んでみてください。 書籍版 このウェブサイトの内容はアスキードワンゴから書籍として出版されています。 書籍版の内容はウェブサイト版と同一ですが、本として読めるように最適化されています。 書籍版は次のサイトから購入できます。 Amazon 達人出版会（電子書籍版
javascript-algorithms/README.ja-JP.md at master · trekhleb/javascript-algorithms
数学 B ビット操作 - set/get/update/clear bits, 2つの乗算/除算, 否定的にする. 等 B 因果関係 B フィボナッチ数 - クラシックとクローズドフォームのバージョン B 素数性テスト (trial division 方法) B ユークリッドアルゴリズム - 最大公約数を計算する (GCD) B 最小公倍数 (LCM) B エラトステネスのふるい - 与えられた限度まですべての素数を見つける B Is Power of Two - 数値が2の累乗であるかどうかを調べる（単純なアルゴリズムとビットごとのアルゴリズム） B パスカルの三角形 B 複素数 - 複素数とその基本演算 B ラジアン＆度 - 度数と逆方向の変換に対するラジアン B 高速電力供給 A 整数パーティション A Liu Hui π アルゴリズム - N-gonsに基づく近似π計算 A 離散フ
大量のテキストを食っても速い Markdown Editor 作った - mizchi's blog
もう人生で何個目かわからない markdown エディタ作った。が、今回のは結構気に入っている。 https://markdown-buffer.netlify.com/ で遊べる。 用途としては、GitHub か Qiita か はてなブログかわからないが、なにか書こうと思ったときに、どのサービスも中途半端に重いので、とりあえずのバッファが必要、という感じで作った。なので速度重視。 ブラウザのストレージで永続化してる。オフラインで動く。できるだけエディタとしてはスコープを大きくせず、単に編集バッファ(textarea)でしかない、というのを意識している。 結構頑張って作り込んでしまった https://nedi.app が色々肥大化してしまっていて入力時にラグを感じるので、編集体験を見つめ直す自戒もある。 機能 数式対応 コードハイライト対応 バックグラウンドで自動保存 改行を br に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Operator Lookup - Search JavaScript Operators
社内でフロントエンドのパフォーマンスチューニングコンテストを開催した
How can I test a change handler for a file-type input in React using Jest/Enzyme?