フロントエンドで収集するべきテレメトリは何か
先日『フロントエンド監視の全体像と実現方法』という記事を投稿しましたが、その中でテレメトリについては触れませんでした（※本記事は上記記事の内容を知らなくても読み進められるようになっています）。 というのは、テレメトリは可観測性を実現するための重要な概念ではあるものの、テレメトリを軸に監視を考えるのは手段の目的化になってしまうと考えているからです。 重要なのはサービスにとって何を観測するべきかを考えることであり、テレメトリはそれを設計や実装に落とし込む際に現れるものです。 一方で監視に対する理解を深める上では、テレメトリを軸に考えることも重要でしょう。 そこで本記事ではフロントエンド監視においてどのようなテレメトリを収集するべきか述べていきます。 監視 SaaS と OpenTelemetry (OTel) Datadog, New Relic, Sentry のいずれかを利用することを考え
【Vue.js】今、ゼロから Vue を学び始めるならこうやるといいんじゃないか (2024) 【初学者向け】
【Vue.js】今、ゼロから Vue を学び始めるならこうやるといいんじゃないか (2024) 【初学者向け】 🤔 Vue.js って何から勉強すれば良いですか？ この疑問は Vue.js に限らず、多くの初学者の中でホットなトピックです。 すごく端的にこの問いに答えてみると、「好きにすればいい、正解はない！自分で考えなさい！」です。 これは確かにとても正しい意見[1]だと思いますが、そうは言っても初学者にとっては何から手をつけたらいいのかわからない状況が多いです。 と言うことで、上記のような前提は持ちつつ「まぁ、とりあえずこんな感じで良いんじゃないですかね(安牌)」と言う私(筆者)なりのアイデアを書いてみたいと思います。 ご参考までに 😙 それではスタート 💨 Vue.js の公式ドキュメント 「おいおい、急にハードルが高すぎるだろ...」 そう思った方も少なくないかもしれません。
TypeScript を学習中の方に勧められる練習問題集として手頃なものがないなと思い、作ってみました。 TS の問題集としてはtype-challenges がよく話題に上がりますが、実用上あそこまでの型パズルを使うことはあまりないため、最初に取り組むにはハードルが高いです（もちろん知っていたら便利ではありますが、初学者向けではない）。 想定読者 JavaScript を書くことには慣れている TypeScript はこれから・まだ慣れていない TypeScript の基本的な型についてはすでに知っている はじめに JavaScript の機能に関する問題は扱いません。TypeScript の型システムに関する問題のみ扱います。 そもそも TypeScript についてよくわかっていない場合、サバイバル TypeScriptなどで学習から始めてみてください。 「型がつけられると何が嬉しい
JSer.info #680 - jQuery 4.0.0 Betaがリリースされました。 jQuery 4.0.0 BETA! | Official jQuery Blog IE 10以下のサポートを終了、非推奨のAPIを削除、jQuery prototypeオブジェクトからArrayメソッドを削除、focusとblurのイベント順を上書きしないように変更されています。 また、FormDataのサポート、自動的にJSONPへfallbackする挙動を削除、コードベースをAMDからESMへの移行、Trusted Typesのサポートなども含まれています。 jQuery 5では、IE 11のサポートを削除する予定となっています。 Storybook 8 Betaがリリースされました。 Storybook 8 Beta デフォルトのコンパイラをBabelからSWCに変更、モバイルUIの改善とい
FOSDEM 2024/Schedule/Events/Developer rooms/Web Performance/Fast JavaScript with Data-Oriented Design Let’s squeeze the last bits of performance out of JS so that we can crunch massive amounts of data! In this presentation I will describe what I learned while optimizing the Firefox Profiler. The Firefox Profiler is a web application which needs to handle large profiles containing hundreds of thous
フルスタック Web フレームワーク HonoX を使ってみる 2024.02.10 HonoX は Hono と Vite をベースにしたフルスタック Web フレームワークです。Hono が提供するサーバーサイドやクライアントサイドの機能を使いつつ、ファイルベースルーティングや Islands Architecture などの新しい機能を使うことができます。 HonoX は 2024 年 2 月現在アルファステージとなっています。セマンティックバージョンに従わずに破壊的な変更が行われる可能性があります。 HonoX は Hono と Vite をベースにしたフルスタック Web フレームワークです。以下のような特徴があります。 ファイルベースのルーティング 高速な SSR BYOR（Bring Your Own Rerender）：レンダリングエンジンを自由に選択できます island
In July 2022, I released dax for Deno providing a cross-platform shell for JavaScript written in JavaScript: const data = $.path("data.json").readJsonSync(); await $`git add . && git commit -m "Release ${data.version}"`; This is similar and inspired by zx, but because it uses a cross-platform shell with common built-in cross-platform commands, more code is going to work the same way on different o
Anyone is capable of having their caps lock key on at any given time without realizing so. Users can easily spot unwanted caps lock when typing in most inputs, but when using a password input, the problem isn’t so obvious. That leads to the user’s password being incorrect, which is an annoyance. Ideally developers could let the user know their caps lock key is activated. To detect if a user has th
From many to one: Moving our JavaScript code into a monorepo | Aha! software
Aha! Develop is for healthy enterprise development teams — that use scrum, kanban, and SAFe frameworks Learn more Do we need a monorepo? When I first joined Aha!, I was surprised by how well-structured the engineering onboarding program was. I spent several weeks getting to know all the teams and learning the pieces of our system. What I didn't realize at the time was these onboarding conversation
Intro Promise.withResolvers() は、 Stage 4 であり ES2024 の候補となった。 すでにブラウザでの実装も進んでいるため、その活用方法を解説する。 イベントの Promise 化 JS では、非同期処理 API は長らくイベントリスナベースで定義され、それを組み合わせるフロー制御で処理されてきた。 しかし、 Promise が定義されて以降は、標準 API も Promise を返すようになり、 async/await によって処理されるのが一般的になってきた。 結果、イベントリスナベースの API を Promise 化するような場面も増えた。 例えば以下のようなものだ。 async function request() { return new Promise((resolve, reject) => { document.querySelect
jQuery 4.0では、Internet Explorer 10以前のサポートが終了されるとともに、レガシー版のMicrosoft Edge、iOS 10以前、Firefox 64以前といった古いWebブラウザがサポートされなくなっている。 あわせて、以前のバージョンで非推奨になっていたいくつかのAPIが削除されるとともに、push、sort、spliceメソッドが削除された。 そのほか、jQuery 4.0でサポートするWebブラウザに合わせて、focusin、focusout、focus、blurの順番が変更され、blur→focusout→focus→focusinとなったほか、jQuery.ajaxへのFormDataを含むバイナリデータのサポート追加、従来自動で行われていたjQuery.ajaxにおけるdataType: "json"使用によるJSONPリクエストへの変換の削除
Going to full-stack. Hono v4.0.0 is out! This major update includes some breaking changes and the addition of three major features. Static Site Generation Client Components File-based Routing So Hono is going to full-stack. Let's take a look at the three features. 1. Static Site Generation We introduce SSG Helper. With it you can generate static pages of your Hono applications. To use this, create
GitHub - honojs/honox: HonoX - Hono based meta framework
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Interop 2024の取り組みスタートなど : Cybozu Frontend Weekly (2024-02-06号)
Interop 2024の取り組みスタートなど : Cybozu Frontend Weekly (2024-02-06号) こんにちは! サイボウズ株式会社フロントエンドエンジニアの Saji (@sajikix) です。 はじめに サイボウズでは毎週火曜日に Frontend Weekly という「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2024/02/06 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 テストの学習へようこそ！ | web.dev web.dev が公開している学習コンテンツのシリーズにテストのコンテンツが追加されました。 web アプリケーションのテストに不慣れな初学者が一通り学ぶ際などに適していそうです。一部のコンテンツは近日提供予定になっており今後の更新も楽しみな内容と
JSR is designed for TypeScript. You publish TypeScript source, and JSR handles generating API docs, .d.ts files, and transpiling your code for cross-runtime compatibility. JSR packages are distributed as web-standard ECMAScript modules. JSR isn't a replacement for the npm registry; it's a superset of npm. JSR modules can be used with any JavaScript package manager, and in any project with a node_m
GitHub - awslabs/llrt: LLRT (Low Latency Runtime) is an experimental, lightweight JavaScript runtime designed to address the growing demand for fast and efficient Serverless applications.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
負荷テストツール「k6」入門
こんにちは。 PharmaX でエンジニアをしている諸岡（@hakoten）です。 この記事の概要 APIの負荷テストツールにGrafana Labs社が開発している「k6」というツールがあります。 k6はオープンソースのCLIツールですが、 「Grafana Cloud k6」というクラウドベースSaaSツールも提供されている便利なツールです。 ローカルのk6は、負荷テストの時に使ったことはあったのですが、真面目に負荷テストの設計をするにあたり、ちゃんと理解したかったため、改めて基本から調べてみました。k6の入門記事としてお役に立てれば嬉しいです。 インストール Macでは、k6を「Homebrew」でインストールすることができます。
どうもみゅーとんです. 最近パフォーマンス周りで問題をおこしかけてしまったので, パフォーマンスの劣化を抑制する方法を調べてみました. 概要 3 行でまとめ public repository であれば, CodSpeed を無料で利用できる main ブランチでのパフォーマンスを計測しておき, Pull Request で劣化したら警告してくれる CodSpeed から, 内部処理を詳細に追うことができる 前提知識 vitest でパフォーマンステストを行う構成ができていることが条件になります. 導入方法についてはこの記事を確認してください. techblog.hacomono.jp CodSpeed とは docs.codspeed.io なんて読むんでしょうか・・？私はコードスピードと呼んでいますが, コッドスピードのほうが正しそう・・？ GitHub Actions で実行した P
jQuery 4.0.0 has been in the works for a long time, but it is now ready for a beta release! There’s a lot to cover, and the team is excited to see it released. We’ve got bug fixes, performance improvements, and some breaking changes. We removed support for IE<11 after all! Still, we expect disruption to be minimal. Many of the breaking changes are ones the team has wanted to make for years, but co
Storybook 8 Beta
🚀Update March 12: Storybook 8 is out now!Storybook 8 is now available to try in beta! This latest release continues Storybook’s quest of giving you an instant-on, seamless environment for frontend development. Check out the release highlights and try the beta release today! 🚀 Major performance improvements 🆕 Visual tests workflow 📱 Polished mobile UI 🔬 Improved test utilities ⚛️ React Server
WebAssemblyでOpenJDKのJavaランタイムを実装、JarファイルをそのままWebブラウザで実行できる「CheerpJ 3.0」正式リリース
WebAssemblyでOpenJDKのJavaランタイムを実装、JarファイルをそのままWebブラウザで実行できる「CheerpJ 3.0」正式リリース Webブラウザ上で実行可能なWebAssembly製JavaVM 前バージョンのCheerpJは、Javaのバイトコードを事前コンパイルによりJavaScriptコードに変換することで、Webブラウザ上でJavaアプリケーションを実行可能にするコンパイラを中心とするツール群でした。 今回の新バージョン「CheerpJ 3.0」では、WebAssemblyによってOpenJDKのJavaランタイムを完全に実装したと説明されています。これにより、JITコンパイラなどを含むJavaVMの機能をWebブラウザ上で実行できるようになりました。 Javaアプリケーションのソースコードは不要で、ビルド済みのJarファイルをそのままWebブラウザで実行
GitHub - guidepup/guidepup: Screen reader driver for test automation.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Intl.Segmenter についておさらい JavaScript には Intl と呼ばれる国際化 API があり、日時や数値のフォーマットを始めとする国際化に便利な機能が揃っています。Intl.Segmenter はこの Intl の一機能で、文字・単語・文章単位での文字列分割を可能にします。 文字単位での分割では複数のコードユニットやコードポイントを持った文字を考慮し、正確に見た目上の１文字（書記素）で分割できるので、絵文字を含んだ文字数のカウントなどに便利です。 const segmenter = new Intl.Segmenter("ja", { granularity: "grapheme" }); console.log("🇯🇵👨🏻💻".length); // ❌ 11 console.log([..."🇯🇵👨🏻💻"].length); // ❌
Electron代替を目指す軽量なフレームワーク「Tauri v2」β版リリース。iOS/Android対応など
JavaScriptとHTML/CSSを用いてアプリケーションを構築できるElectronの代替を目指し、より軽量なRust製のフレームワークとして開発されている「Tauri v2」のβ版がリリースされました。 iOS/Androidモバイル対応 TauriはこれまでWindows、Mac、Linuxに対応したデスクトップ版が2022年6月にバージョン1.0としてリリースされていますが、iOSとAndroidに対応したモバイル対応は正式版となっていませんでした。 Tauri v2ではWindows、Mac、Linuxに加えてモバイル版としてAndroidとiOSに対応することで、デスクトップ版のアプリケーションからモバイル版への移植をスムーズに行えるようになります。 また、モバイルOSで提供されている通知機能、NFC対応、生体認証、バーコードの読み取り、クリップボードなどのAPIにもアクセ
JSer.info #679 - TypeScript 5.4 Betaがリリースされました。 Announcing TypeScript 5.4 Beta - TypeScript クロージャーにおけるNarrowing結果の改善、NoInfer Utility Typeが追加されています。 また、ES2024のObject.groupBy/Map.groupByをサポート、Import Attributesのサポートが追加されています。 そのほかには、target: "ES3"やoutオプションなどを非推奨として、次のTypeScript 5.5で削除されることがアナウンスされています。TypeScript 5.5で削除されるオプションは、次のIssueにまとめられています。 Feedback: 5.0 deprecations · Issue #51909 · microsoft/T
ライブラリやツールなどを作っているときに、特定の機能やパッケージを非推奨にする場合があります。 これらの非推奨はリポジトリ上のREADMEやIssueなどに書いても、利用者が気づかないことがあります。 そのため、利用者が気付けるように非推奨の機能やパッケージを使った場合に警告を出す方法を紹介します。 非推奨にはいくつかの段階があり、それに応じてやり方を変えられるので、それぞれの方法を紹介します。 パッケージの非推奨化: npm deprecate <package> <message> コードレベルの非推奨化: JSDocタグの@deprecated 実行時の非推奨化: process.emitWarning() パッケージの非推奨化: npm deprecate <package> <message> npmのパッケージレベルで、そのパッケージが非推奨であることを通知するにはnpm de
Reactと状態は切っても切れない関係です。なぜなら、Reactは状態に基づいて画面を更新するコンポーネントベースのUIライブラリだからです🤝🏻 そんなReactの状態を管理・操作しやすくしてくれているのが、React 16.8から登場したフックです。それゆえ、フックを正しく利用するにあたってReactの状態の理解は非常に重要であり、Reactの状態の理解があやふやだと、予期せぬ挙動やバグのもとになりかねません。 今回の記事では、Reactの状態を理解しながら適切な箇所で適切なHooksを選択していくプロセスを再確認できた！自信を持ってReactをコントロールできるようになりそう！と言えることをゴールとしています🎉 今回使用した即席匿名メモアプリのコードベースです。 サークルでは、コミットに沿って説明をしていきました。（あくまで即席なので細かいこと気にしながら作ってませんorz） 【
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
垂直スケーラビリティと効果的なテストによる金融取引システムのパフォーマンスと効率の最大化 Peter Lawrey氏はJavaチャンピオンであり、Chronicle SoftwareのCEOとして、開発者を鼓舞してソリューションのクラフトマンシップを高めることに情熱を注いでいる。経験豊富なソフトウェアエンジニアとして、Lawrey氏はソフトウェア開発プロセスにおけるシンプルさ、パフォーマンス、創造性、革新性を奨励することに努めている。
Hono で Server-Sent Events によるストリーミングを実装する 2024.02.01 Server-Sent events（SSE）は、サーバーからクライアントに向けてイベントをストリーミングするための仕組みです。WebSocket と比較すると、サーバーからの単方向の通信、HTTP で通信するという特徴があります。この記事では Hono を使って OpenAI API を使ったテキスト生成をストリーミングする方法を紹介します。 Server-Sent Events（SSE） は、サーバーからクライアントに向けてイベントをストリーミングするための仕組みです。WebSocket と比較すると、サーバーからの単方向の通信になるという特徴があります。また HTTP で通信するため、WebSocket のように独自のプロトコルではないため、運用の負担が少ないというメリットがあり
そのfor文ちょっと待った！！ ループ処理の代替表現ガイド
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【初学者向け】具体例で学ぶTypeScript練習問題集
Node.jsから呼び出したWASMバイナリ（Rust製）と非同期に通信したい話
2024-02-12のJS: jQuery 4.0.0、Storybook 8 Beta、Vite 5.1(Runtime API)
FOSDEM 2024 - Fast JavaScript with Data-Oriented Design
話題の日本酒「ソースコード」を読んで（飲んで）みた | DevelopersIO
フルスタック Web フレームワーク HonoX を使ってみる
dax - Cross-platform shell tools for Node.js
Detect Caps Lock with JavaScript
Promise.withResolvers によるイベントの Promise 化 | blog.jxck.io
JavaScriptライブラリ「jQuery 4.0.0 BETA」が公開
Release v4.0.0 · honojs/hono
JSR: the JavaScript Registry
(小ネタ) Vitest でパフォーマンス劣化を検知する - hacomono TECH BLOG
私のJavaScriptの情報収集法 2024年版
jQuery 4.0.0 BETA! | Official jQuery Blog
TC39 に新設された Stage 2.7 について | blog.jxck.io
Intl.Segmenterはどうやって単語分割しているのか
#jsprimer week: 2024-02-05 - 2024-02-11
2024-02-05のJS: TypeScript 5.4 Beta、Learn Testing/Performance、Interop 2024
2023年、Denoはこんなに進化していた ー Node.jsとの互換性強化、Deno.serve()、WebGPU…
【JavaScript】let宣言は for ループに特化される - Qiita
Node.jsで機能やパッケージの非推奨メッセージを通知する方法
Bouncy Ball - Compare Web Animation Techniques
Reactの状態を理解して適切にHooksを利用する
Release v9.0.1 · typicode/husky
2023年の"JavaScript Rising Stars"が発表
web.dev
Hono で Server-Sent Events によるストリーミングを実装する