はじめに Webアプリケーションではユーザーとの対話を効果的に行うため、モーダルウィンドウ（モーダル）がよく利用されます。JavaScriptを駆使して制御するのが一般的ですが、それが必ずしも必要なわけではありません。今回は、JavaScriptを一旦忘れて、CSSのみを使って綺麗なモーダルを作成する方法を紹介します。 ここでは自分なりに考えた方法を紹介しているので、ぜひコメントで他の方法やアイデアを教えてください！ モーダルを表示する まず、モーダルの表示をCSSだけで実現します。 基本的にはクリックされた時に状態が切り替わるタグを利用して、表示を制御します。 checkboxを使う場合 checkboxにチェックが入ったかどうかに応じてモーダルの表示を制御します。 紐づけるlabelは複数配置できるので、表示ボタンと閉じるボタンに利用しています。 See the Pen CSSModa
Ecma International approves ECMAScript 2024: What’s new? On 26 June 2024, the 127th Ecma General Assembly approved the ECMAScript 2024 language specification, which means that it’s officially a standard now. This blog post explains what’s new. The editors of ECMAScript 2024 # The editors of this release are: Shu-yu Guo Michael Ficarra Kevin Gibbons What’s new in ECMAScript 2024? # Grouping synch
The polyfill.io domain is being used to infect more than 100,000 websites with malicious code after what's said to be a Chinese organization bought the domain earlier this year, researchers have said. Multiple security firms sounded the alarm on Tuesday, warning organizations whose websites use any JavaScript code from the polyfill.io domain to immediately remove it. The site offered polyfills – u
We've detected unusual activity from your computer network To continue, please click the box below to let us know you're not a robot. Why did this happen? Please make sure your browser supports JavaScript and cookies and that you are not blocking them from loading. For more information you can review our Terms of Service and Cookie Policy. Need Help? For inquiries related to this message please co
Rspack
Announcing Rspack v1.0 Alpha# June 29, 2024 Rspack 1.0 alpha is now available on npm! Before releasing Rspack 1.0 stable version, we will test for 1~2 months to improve the API stability and reliability of v1.0 and to verify its impact on downstream projects. Rspack 1.0 stable version is expected to be released this August. This is a significant milestone as it means that Rspack has implemented th
SPA におけるアクセシビリティ課題について シングルページアプリケーション（SPA）は、1 つの HTML ファイルに対して JavaScript と Web API を活用して、ユーザーに素早いページ切り替えの体験を提供するウェブアプリケーションの一形態です。 しかし、SPA にはアクセシビリティの課題があります。例えば、視覚障害のあるユーザーが使うスクリーンリーダーという支援技術ではページが遷移したことを認識できないことがあります。これは、JavaScript を使ってページを切り替える際に発生する問題です。 具体的には、ユーザーがあるページから別のページへ移動した際、スクリーンリーダーが新しいページに移動したことを認識しないことがあります。 この問題を解決するために、JavaScript と WAI-ARIA という技術を使って、Route Announcer という方法があります
はじめに リアルタイムでみんなの反応が見れるアプリ、作りたいですよね。 X や instagram など各種 SNS では、何かアクションがあれば通知に数字がつきます。 Slack や Chatwork でも同じですね。メンションされたらチャンネルに数字がつきます。 モンスターハンターは凄まじいです。 最大4名のプレイヤーで同じモンスターを狩るのですが、どこに誰がいるかリアルタイムで確認できます。 ディアボロスに追いかけ回されながら、半泣きで逃げ回っているとき、共闘しているはずのプレイヤーがホームから動かなかったり、明らかに素材集めに勤しんでいたらx意が湧きます。 このようなリアルタイム通信を実現するために、どのような方法があるか探したところ WebSocket WebRTC SSE(Server-Send Events) というものが見つかりました。 WebSocket を試したい 本当
みなさんこんにちは。調査・監視部に所属する宮﨑です。 普段の業務ではブルーチームとして、SOC監視・調査やフォレンジック調査、マルウェア解析などを行なっています。 今回はOffsec社が提供する、Webペンテストの資格 2種へ挑戦し合格したため、受験記を投稿します。 OSWA・OSWEとは これらはOffsec社が提供するWebペンテスト系の資格で、それぞれの正式名称は以下のとおりです。 OSWA （Offsec Web Assessor） OSWE （Offsec Web Expert） 資格の難易度とレベル Offsec社のコンテンツの難易度は、100から400まで存在し、通常の契約プランで購入できるコンテンツは300までになります。そして、OSWAは200、OSWEは300の位置付けにいるため、単純にOSWEの方が難易度としては高いです。また、300のコンテンツ・試験ではエクスプロイ
自分だけの ESLint Config を作る
これはなに 自身のプロジェクトに適合した ESLint Config の設計および実装方法についてまとめたものです。 業務や趣味プロに関わらず、 JavaScript / TypeScript でコーディングする際に ESLint は非常に有用なツールであり、広く使われています。ほとんどの場合において ESLint 基盤はプロジェクトごとに必要なパッケージをインストールして設定ファイルを作成し、構築されます。しかしその設定内容がプロジェクト間で重複することは珍しくなく、プロジェクトの数が増えるにつれ冗長となりがちです。そこで、複数プロジェクト間で共通のルールセットを定義して単一の ESLint Config として再利用することで、メンテナンス性や再利用性の向上が期待できます。本稿では、そのような用途で使える自分だけの ESLint Config を設計・実装する方法を紹介します。 前提
無料の開発者アカウントには、以下のものが含まれる。 豊富なリクエスト（1か月あたり200万件）と帯域幅（200GB超）およびTLS証明証が提供されるCDN 無制限のL3／4 DDoS緩和とすべてのL7トラフィックを管理するための柔軟性を備えたセキュリティ JavaScriptやRust、Goといった多彩な言語での大規模なアプリ実行のためのWasmベースのコンピューティングプラットフォーム 直接ソケットと1対多のプッシュを使ってリアルタイムシステムを構築・拡張できるWebSocketとプッシュ通知 もっとも高速なエッジデータプラットフォームの1つでありシークレット、構成状態、完全なK/Vデータを管理するデータストレージ、多数のエンドポイントへのログのリアルタイムストリーミングによる可観測性 エンタープライズ品質の画像変換、スマートクロップ、ぼかし、メタデータ、フレーミングなどをサポートする画
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptを忘れて、CSSだけでモーダルを創造する - Qiita
Ecma International approves ECMAScript 2024: What’s new?
Remove Polyfill.io code from your website immediately
Bloomberg - Are you a robot?
SPA のアクセシビリティを強化する Nuxt の Route Announcer 機能
みんなで粘土をこねる web アプリを hono で作った
Webペンテスト系の資格「OSWA」「OSWE」受験記 | 株式会社レオンテクノロジー
Fastly、エッジクラウドプラットフォームを無料で利用できる開発者アカウントの提供を開始