この記事はlocation-stateをconformに対応させるために開発した、@location-state/conformの紹介記事です。 location-stateとは location-stateは履歴位置に同期する状態管理ライブラリです。主にNext.jsをサポートしています。 Next.jsなどを採用している場合、ページ内のuseStateは遷移時のunmountで状態が破棄され、ブラウザバック時には復元されません。そのため、アコーディオンやform要素の状態はブラウザバック時にはリセットされてしまいます。これはNext.jsに限らず、ReactやVueなどをベースにしたモダンなフロントエンドフレームワークを採用して、クライアントサイドルーティングが発生する場合に起きがちな挙動です。クライアントサイドルーティングが不在なMPAでは、bfcacheやブラウザ側の復元処理によっ
入力欄のプレースホルダーって結局どうなの - Qiita
入力欄のプレースホルダーの話をします。プレースホルダーというのは、フォームの入力欄で、ユーザーが入力するまでの間に表示されているテキストのことです。 書籍「Webアプリケーションアクセシビリティ1」では、「3.1 ラベルと説明」のところで、紙版にして約1.5ページの分量を割いて、フォーム入力欄のプレースホルダー（<input> 要素や<textarea> 要素の <placeholder> 属性）の問題点を指摘しています。 この本で指摘されているプレースホルダーの問題点は以下の3つです。 プレースホルダーの色が薄く視認しづらい プレースホルダーとフォームコントロールの値との区別がつかない フォームコントロールに値を入力したときにプレースホルダーの値が見えなくなってしまう Webアプリケーションアクセシビリティ さらに、Nielsen Norman Groupによる「Placeholders
Intro CSRF という古の攻撃がある。この攻撃を「古(いにしえ)」のものにすることができたプラットフォームの進化の背景を、「Cookie が SameSite Lax by Default になったからだ」という解説を見ることがある。 確かに、現実的にそれによって攻撃の成立は難しくなり、救われているサービスもある。しかし、それはプラットフォームが用意した対策の本質から言うと、解釈が少しずれていると言えるだろう。 今回は、「CSRF がどうして成立していたのか」を振り返ることで、本当にプラットフォームに足りていなかったものと、それを補っていった経緯、本当にすべき対策は何であるかを解説していく。 結果として見えてくるのは、今サービスを実装する上での「ベース」(not ベスト)となるプラクティスだと筆者は考えている。 CSRF 成立の条件 例えば、攻撃者が用意した attack.examp
最近、このブログのお問い合わせフォームや、Webスクール体験レッスン、メルマガ登録などのフォームにスパムボット（広告・宣伝などを自動で送信するプログラム）と思われる送信があまりにも多いため、対策をしています。 メールフォームのスパムポット対策と言えばGoogleの「reCAPTCHA」が有名ですが、 そういったものは使用せず、HTMLとサーバー側のPHPを工夫することで対策をしました。 reCAPTCHAを使わない理由 スパムボットを防ぐ有名な方法にGoogleのreCAPTCHAがありますが、以下の理由から私はできれば使用したくありません。 理由1: ユーザーに負担をかける reCAPTCHAでは、ボットかどうか疑わしい場合、人間であることを確認するためのパズルが表示されます。 しかし、例えばメールマガジン登録フォームにメールアドレスを入力して送信しようとした際に、そのようなパズルが現れ
すべてのフォームが要件を満たしている場合のみ、送信できます。 フォームバリデーションのデザイン 上記の例では最低限のHTMLのみ実装されています。しかし、実際のサイトではバリデーションエラーをユーザーにフィードバックする必要があります。よりユーザビリティの高いフォームでは、以下の点を検討する必要があります。 エラー時のスタイル エラーメッセージの出し方 バリデーションエラーの表示タイミング 以下では、それぞれについて深堀りします。 エラー時のスタイル エラーを検知する方法として、CSSには:valid疑似クラスと:invalid疑似クラスがあります。これらの疑似クラスは『CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方』でも紹介されている、バリデーションエラーが起きている要素にのみ適用されるクラスです。 しかし、この疑似クラスには欠点があります。required属性を
先日リリースされたSafari 17.4をはじめ、まもなくリリースされるChrome 124でフォームコントロールの縦書きモードが正式にサポートされます。これで、すべての主要モダンブラウザでサポートされることになります。 縦書きモードの対象として日本語ユーザーも含まれているのだと思いますが、見慣れぬせいか違和感が、、、縦書きのコンテンツだったらいいのかな。 フォームを縦書きにするには、writing-mode: vertical-rl;を設定します。サポートブラウザは、Safari 17.4+, Firefox 120+をはじめ、Chrome, Edgeも119からサポートされており、間もなくリリース予定のChrome 124で正式にサポートされる予定です。 writing-mode: Vertically-oriented form controlsのサポートブラウザ 詳しくは、下記をご
ついにChromeで使えるようになったCSSの便利機能！ light-dark()関数、field-sizingプロパティ、句読点括弧のカーニングができるtext-spacing-trimプロパティ
今回のアップデートでは、かなり便利なCSSのプロパティが追加されました。 ライトモードとダークモードのスタイルを簡単に定義できるlight-dark()カラー関数、垂直方向の中央に配置するalign-contentプロパティ、フォームのサイズを入力された文字量に合わせて自動変更するfield-sizingプロパティ、CSSで句読点括弧のカーニングができるtext-spacing-trimプロパティ、これらがブラウザにサポートされるのを待っていた人も多いと思います。 Chrome 123 beta New in Chrome 123 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSのlight-dark()カラー関数 CSSのdisplay-modeでpicture-in-p
公開日 : 2024年3月23日 カテゴリー : ユーザビリティ / アクセシビリティ フォームのパスワード入力欄 (<input type="password">) は基本的に、入力された文字列がマスキングされ、代わりに文字数の分だけ「黒い点」が提示されるようになっています。他人によるパスワードの盗み見を防ぐためですが、ユーザーは、大半のケースでは背後から覗く人が誰もいない状況でパスワードを入力するでしょうし、入力した文字列が視認できないと正しくタイプできているか不安になったり、タイプミスしたときの修正がしづらい (どの箇所でミスしたか確信が持てず、はじめから入力し直さざるを得なくなる) といった問題もあるでしょう。こうしたことを考慮に入れると、パスワードのマスキングはユーザーの任意で解除できる (入力した文字列を表示させる) ようにしたほうが、ユーザビリティの観点では望ましいと考えるこ
Safari 17.4 adds vertical writing mode support for form control elements across macOS, iOS, iPadOS, and visionOS. Setting written text vertically is commonly observed in East Asian languages. For example, Chinese, Japanese, and Korean (CJK) may be written vertically and read top-to-bottom, flowing in lines from right to left. Similarly, Traditional Mongolian is a vertical script that flows in line
新潟市に本社がある民間放送の「テレビ新潟」はサイバー攻撃を受けて、社内のネットワークに接続されているサーバーや端末に不具合が生じたと発表しました。 放送への影響はなく、これまでのところ、個人情報の漏えいなども確認されていないとしています。 「テレビ新潟」によりますと、11日、社内のネットワークに接続されているサーバーや複数の端末が内部データが暗号化され、正常に動かなくなっていることが確認されました。 社内で調査した結果、外部からサイバー攻撃を受けたと判断し、警察などに相談したということです。 サーバーや端末の不具合は11日午後7時の時点で復旧していませんが、社内のネットワークからは隔離する対応をとっているということです。 番組制作に関わる端末やサーバーもありましたが、放送への影響はなく、これまでのところ、個人情報の漏えいなども確認されていないとしています。 「テレビ新潟」は今後、システムの
Rauhul Varma works on Advanced Prototyping in the Platform Architecture group at Apple. I’m excited to share swift-playdate-examples, a technical demonstration of using Swift to build games for Playdate, a handheld game system by Panic. Why Swift? Swift is widely known as the modern language for app development on Apple devices. However, over the course of its first decade, it has grown into a ver
さまざまなサービスに手を広げている最近のGoogleですが、それでもやはり、Googleといえば検索がもっとも有名です。 Googleは、主力である検索エンジンの改良を続けており、ユーザーがより正確に検索を行なえるよう、新たなサポート機能を追加しています。 2024年2月29日（アメリカ時間）にも、iOS版、Android版、デスクトップ版それぞれのChromeをアップデートし、検索精度が向上する新機能をいくつか追加しました。そのアップデートによって起きた、Chromeの3つの変化について解説します。 ※まずはアメリカから、順次アップデートされていくとのことなので、その日を楽しみに待ちましょう。2024年3月12日公開時点、まだ日本ではアップデートされていません。
こんにちは！SmartHRプロダクトエンジニアのhimiです。 この記事ではプレースホルダーのアクセシビリティとユーザビリティについての課題と、その解決手段についての話を書きます。 プレースホルダーって何？ Webアプリでよく見る、フォームコントロールに値が無いときに表示するテキストのことです。 主な用途としては、フォームの入力例や入力内容の説明テキストが設定されることが多いです。 HTML Standardでは The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief de
ジム・ケラーのAIチップ企業「Tenstorrent」がAI推論に特化したPCIe拡張カード「Grayskull e75」と「Grayskull e150」をリリース＆日本のLSTCやRapidusとの協力も発表
RyzenのZenアーキテクチャやiPhone向けSoCの設計に携わったアーキテクトのジム・ケラー氏がCEOを務めるAIスタートアップのTenstorrentが、2024年3月5日にAI推論に特化したPCIe拡張カード「Grayskull e75」と「Grayskull e150」を発表しました。 Cards - Tenstorrent https://tenstorrent.com/cards/ Today we are officially launching our Grayskull Dev Kit, available for purchase on our website. This is our 1st gen AI PCIe card - an inference-only hardware kit we are releasing alongside TT-Metalli
フォームのアクセシビリティを考える
フォームのアクセシビリティを考える 2024.03.10 今日の Web におけるフォームはユーザーが情報を入力して対話するための重要な要素です。支援技術を利用しているユーザーがフォームの入力を妨げられることは当然避けるべきでしょう。また障害の有無に関わらず、ユーザーに迷いを与えたり、入力ミスを誘発するようなフォームはユーザーがタスクを完了せずに途中で離脱してしまう可能性が高まり、ビジネスの観点からも望ましくありません。この記事ではフォームのアクセシビリティについて考え、実際のフォームの実装においてどのような点に注意すべきかを紹介します。 今日の Web におけるフォームはユーザーが情報を入力して対話するための重要な要素です。スクリーンリーダーといった支援技術を利用しているユーザーがフォームの入力を妨げられることは当然避けるべきでしょう。また障害の有無に関わらず、ユーザーに迷いを与えたり、
はじめに この連載では共通化とモジュール分割について扱います。この話題においてQiitaで有名な記事のひとつが@MinoDrivenさんの単一責任原則で無責任な多目的クラスを爆殺するでしょう。この記事を未読の方はまずこちらを読むことをお勧めします。本連載では、この記事に書かれているような基礎的な事項については既知であることを前提に、どのようにすれば単一責任原則にそったモジュールの分割を行うことが出来るのかをなるべく 「場合による」という言葉に逃げずに なるべく 網羅的・理論的に 解説します。 いいね、ストックをよろしくお願いします。 対象読者 設計に興味のあるエンジニア 基礎的な設計原則について学んだものの、実際の場面でどのように応用すればいいのかが掴めないエンジニア ミクロな設計についての知識を増やしたい人 ※この記事では、特定のメソッドをどのように作成するべきか、このクラスは複数の処理
Next.jsで素朴なフォームをシンプルに作る
素朴なフォームを作る この記事では、素朴なフォームをNext.jsを使って簡単に（？）作る方法を順を追って解説します。これを読むことでNext.js AppRouterの新しい機能であるServer ActionsやuseFormStateなどの使い方理解が進むはずです。たぶん。 また、今回解説するServer Actionsを中心とした機能を用いれば、従来Reactでフォームを作る時のフロントエンドとバックエンド処理が煩雑になりがちなところを少しはシンプルに作ることができるようなります。ただし「素朴なフォーム」という前提ですが。 前提 Next.js v14.1 Next.js以外の外部ライブラリは使用していません HTMLのモックから まず素朴なフォームをHTMLから組み立てます。これ以上ないくらい素朴ですね。 素朴だ…（CSSのスタイル情報は記事上では消してます） export de
input type=“date” の沼から、ライブラリを導入する意義を考える - Mirrativ Tech Blog
はじめまして！2023年7月からミラティブでフロントエンドインターンをしております、かずえもんと申します😺 今回は、インターンでの作業中にハマってしまった Safari のバグについて調査していたら、なんと10年モノの issue だったことが判明し、ライブラリを導入する意義について考える機会となった話を書いてみたいと思います。 Safari の日付入力欄に無効な日付を入れると起こるバグ onChange が正しく呼ばれないのは Safari が原因？ Safari 17 以降で再現しないので原因は Safari で間違いなさそう Safari 17 以前での解決方法として DatePicker を使ってみる まとめ: ネイティブを補う存在としてのライブラリ We're Hiring!! Safari の日付入力欄に無効な日付を入れると起こるバグ 2023年8月、私はミラティブの管理シス
この記事では、Google Apps Script (GAS) を利用して、Google Formを自動で作成するGPTの構築方法を紹介します。 このシステムを活用することで、アンケートやフィードバックフォームの作成作業を大幅に効率化し、貴重な時間を節約することが可能になります。 たとえば、「ChatGPT利用状況についての調査フォームを作成して」と指示するだけで、適切に質問が考えられたGoogle Formが自動で作成されます： こちらが実際に作成されたGoogle Formです： こちらのリンクから実際に回答できるので、よかったら回答して下さい： https://docs.google.com/forms/d/e/1FAIpQLSf09QGODsV2p9YIQAOV9DjbLY8qv_er3ICMOBfhE_epWa1j1w/viewform?usp=sf_link 作成されたフォーム
Conform / Overview
OverviewConform is a type-safe form validation library utilizing web fundamentals to progressively enhance HTML Forms with full support for server frameworks like Remix and Next.js. #FeaturesProgressive enhancement first APIsType-safe field inferenceFine-grained subscriptionBuilt-in accessibility helpersAutomatic type coercion with Zod#The GistConform gives you control over the form submission lif
想定外の新機能！ HTMLの<input type="checkbox" switch>だけで、スイッチUIが実装できるようになるぞ
WebサイトやアプリのUIで、スイッチを実装するのはなかなか面倒です。CSSで書くと、なかなかのボリュームになってしまいます。 そんなスイッチがHTMLだけで実装できるようになります。 Release Notes for Safari TP 185によると、HTMLの新機能としてswitch属性がサポートされました。これにより、スイッチUIがHTMLで簡単に実装できるようになります。 switchについては、かなり前から実装についてGitHubで議論されていました。スイッチは人気のあるUIコントロールだけど、CSSで実装するのは簡単じゃないよね、簡単に実装できるようにしよう。という感じです。 スイッチUIを実装するHTMLは、下記の通りです。
1月23日に発信したフードメニューの購入事前予約受付において、WEBフォームの設定ミスにより、申込者22名の個人情報が一時的に他の申込者から閲覧できる状態となっておりました。 対象となった皆様に、多大なご迷惑をおかけしましたことを深くお詫び申し上げます。 概要 株式会社滋賀レイクスターズでは、1月31日のホームゲームで数量限定で販売予定のフードメニュー「ダンク3兄弟 トマホークステーキ」のオンライン時前予約の受付を、23日午後6時40分頃に一般公開いたしました。 その際、受付に使用したGoogleフォームの設定で「結果の概要を表示する」をONに切り替えた状態で公開しており、申込画面で記入事項を送信した後に画面表示される「前の回答を表示」というボタンを押すと、その時点で申込が完了している方の氏名、メールアドレス、電話番号が閲覧できる状態となっておりました。 弊社の公式WEBサイト問い合わせフ
RelayHub合同会社の久保田光則です。 Reactでフォームを効率よく実装するためのライブラリとして、React Hook FormやReact Final Form、TanStack Formなどがあります。これらのライブラリは、フォームを効率よく実装できる枠組みを提供してくれるだけではなく、高速なフォームを実装するための方法も提供してくれます。 で、この記事ではReact Hook Formとかそういうライブラリの使い方というよりかは、そもそもなぜReactで実装したフォームのパフォーマンスが問題になりやすいのか、その辺りの事情について解説します。 Reactのレンダリングの仕組み Reactでは皆さんご存知のとおり、仮想DOMと呼ばれるDOMに似た構造のオブジェクトを生成してレンダリングを行います。Reactのコンポーネントはレンダリングするたびにそのコンポーネントに対応する仮想
input[type=checkbox] 要素に switch 属性を指定することによる HTML 標準のスイッチ UI の提案
input[type=checkbox] 要素に switch 属性を指定することによる HTML 標準のスイッチ UI の提案 2023.12.23 スイッチは多くのウェブサイトで使われているものの、HTML の標準要素としては存在していませんでした。そのため多くの開発者は、スイッチを実装するために独自の実装を行っていましたが、このような独自の実装はアクセシビリティの問題を引き起こす可能性がありました。この問題を解決するために、WHATWG により `input[type="checkbox"]` 要素に `switch` 属性を追加することが提案されました。この属性を指定することで、チェックボックスをスイッチとして利用できます。 input 要素の switch 属性は 2023 年 12 月現在実験的に実装されている機能です。将来的に仕様が変更される可能性があります。 スイッチ とは
![input[type=checkbox] 要素に switch 属性を指定することによる HTML 標準のスイッチ UI の提案](https://cdn-ak-scissors.b.st-hatena.com/image/square/9f498fff7f14d1f4ab6c565817f30f1ad084c770/height=288;version=1;width=512/https%3A%2F%2Fazukiazusa.dev%2Fblog%2Fogp%2Finput%255Btype%253Dcheckbox%255D%2520%25E8%25A6%2581%25E7%25B4%25A0%25E3%2581%25AB%2520switch%2520%25E5%25B1%259E%25E6%2580%25A7%25E3%2582%2592%25E6%258C%2587%25E5%25AE%259A%25E3%2581%2599%25E3%2582%258B%25E3%2581%2593%25E3%2581%25A8%25E3%2581%25AB%25E3%2582%2588%25E3%2582%258B%2520HTML%2520%25E6%25A8%2599%25E6%25BA%2596%25E3%2581%25AE%25E3%2582%25B9%25E3%2582%25A4%25E3%2583%2583%25E3%2583%2581%2520UI%2520%25E3%2581%25AE%25E6%258F%2590%25E6%25A1%2588%2FHTML.png)
GitHub - vantezzen/auto-form: 🌟 A React component that automatically creates a @shadcn/ui form based on a zod schema.
AutoForm is mostly meant as a drop-in form builder for your internal and low-priority forms with existing zod schemas. For example, if you already have zod schemas for your API and want to create a simple admin panel to edit user profiles, simply pass the schema to AutoForm and you're done. AutoForm uses @shadcn/ui components as natively as possible with only minimal class overrides. This way, if
（受付終了）【「AIタイトルアシスト」機能リリース記念】年末年始に特別お題「買ってよかった2023」で記事を書きませんか？ 新機能を使って応募するとお年玉プレゼントのチャンスも！ - 週刊はてなブログ
あなたの1年を変えた商品を教えて！ ごきげんよう！ 週刊はてなブログ編集部の大藤です。気づけば、2023年も終わりが近づいています。いや〜、1年って本当に早い！ 皆さま本年も大変お世話になりました。 はてなブログでは、これまで、クローズドβとして提供していた「AIタイトルアシスト」機能を2023年12月20日（水）に正式リリースしました。それを記念して、年末年始「買ってよかった2023」をテーマに特別お題キャンペーンを開催します。「AIタイトルアシスト」機能を活用して記事を書くとAmazonギフトカードがもらえるチャンスも！ ぜひ最後までお読みください。 あなたの「買ってよかった2023」を教えて！ 新機能「AIタイトルアシスト」を活用した「第1回はてなブログタイトルコンテスト」概要はこちら！ 「AIタイトルアシスト」機能の使い方 注意事項 応募要項 あなたの「買ってよかった2023」を教
消費者庁ウェブサイト上の意見投稿・情報提供・申込等フォームに投稿された情報で、実際には消費者庁側のシステムに届いておらず、受付できていないものがあることが確認されました。 これは、システムの不具合によるものと考えられましたので、必要なシステム改修を行いました。現時点では、通常どおり届く状態(届かない場合は、エラーメッセージが出ます)となっております。 届いていない投稿については、現時点で確認されたものは下記のとおりです。 お心当たりがございましたら、再度、ご意見・情報提供・申込等をご投稿いただきたく、お願い申し上げます。 この度は、ご迷惑をおかけし大変申し訳ございません。 「消費者庁ウェブサイトについてのご意見・ご感想」からの投稿 2023年12月1日(金) 11時32分ころの投稿 2023年12月9日(土) 15時16分ころの投稿 2023年12月11日(月) 11時55分ころの投稿 「
解約.com
あらゆるサービスの解約情報が募るサイト
Googleフォームを悪用した新しいフィッシング攻撃を確認
Abnormal Securityは12月13日(米国時間)、「BazarCall Attack: Using Google Forms With Call-Back…｜Abnormal」において、Googleフォームが高度なフィッシング攻撃に悪用されているとして、注意を喚起した。高度なフィッシング攻撃の一つに、「BazarCall(別名：BazaCall)」と呼ばれるフィッシング攻撃がある。この攻撃には、被害者を誘導して攻撃者と対話(電話)させるという特徴があるが、今回確認された攻撃では、このBazarCall攻撃においてGoogleフォームが悪用されたとみられる。 BazarCall Attack: Using Google Forms With Call-Back…｜Abnormal 今回発見されたフィッシング攻撃の手口 従来のBazarCall攻撃ではフィッシングメールにより標的か
面白法人カヤック技術部の谷脇です。私は元気です。 この記事は面白法人グループ Advent Calendar 2023の5日目のエントリーです。 というわけでこの記事では、現環境(私が取り組んでいる業務のこと)ベストの管理画面の技術選択について考えたことを書き連ねていきます。 前提知識 管理画面の定義 ここで読者と私の目線を合わせるため、この記事上での管理画面の定義をしておきます。 管理画面はサービスの運営上必要な操作やデータの閲覧をまとめたWebアプリケーションです。また、このWebアプリケーションは一般ユーザーには開放されておらず、サービス運営者側のみ閲覧と操作が可能となっている、とします。 管理画面を作る動機 ここではTonamelの管理画面について、考えて導入したことを書きます。 tonamel.com Tonamelはゲーム大会やイベントを開催するためのプラットフォームです。We
Intro 10 年ほど前に同じことを調べたことがある。 なぜ html の form は PUT / DELETE をサポートしないのか? - Block Rockin' Codes https://jxck.hatenablog.com/entry/why-form-dosent-support-put-delete 当時は全くの素人で、素人なりに調査はしたが、ほとんどが推測の域を出ない結論だった。 この問題についてあらためて記す。 仕様策定の経緯 表題の通り、 <form> の method には GET と POST しかサポートされていない。 HTTP には他にも PUT や DELETE といったメソッドもあるのに、なぜサポートされていないのかという疑問から始まった。 仕様が決定した経緯は、以下に残っている。 Status: Rejected Change Descriptio
HTML: ログイン・ユーザー登録フォームの厳選ベストプラクティス11（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: 11 HTML best practices for login & sign-up forms—Martian Chronicles, Evil Martians’ team blog 原文公開日: 2023/05/24 原著者: Andrey Sitnik（PostCSSとAutoprefixerの作者、首席フロントエンドエンジニア） サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 日本語ブログ: 合同会社イービルマーシャンズ - Qiita 日本語タイトルは内容に即したものにしました。 はじめに ログインフォームやユーザー登録（サインアップ）フォームは、ほとんどのWebサイトで使
モバイルバッテリー回収サービスをアップデート。他社モバイルバッテリーも回収可能に。 | 株式会社CIO（シーアイオー）公式HP 充電器・モバイルバッテリーメーカー
株式会社CIO（所在地：大阪府守口市）は持続可能な開発目標の実現に向けた取り組みの一環として、新たなモバイルバッテリー回収サービスを2023年11月21日より開始いたします。 株式会社CIOは、お客様が使用しなくなった、または寿命を迎えたモバイルバッテリーの回収サービスを開始いたします。 CIO公式ホームページからログインをしていただき、手順に則り申請をしていただくことで、回収が可能となります。 対象製品： CIO製、並びに他社製のモバイルバッテリー 回収特典： 回収のご協力に感謝して、ご返送いただいたモバイルバッテリーの数に対し、弊社公式Amazon店でご使⽤いただける全CIO商品割引クーポンをプレゼントいたします。 <CIO製モバイルバッテリーの回収の場合> 1個返送：10%OFF 2個返送：13%OFF 3個以上：15%OFF ※対象商品以外の封入は固くお断りしています。 <他社製モ
サービスの管理画面を継続的に改善するためのReact Hook FormとZod活用術 - Mirrativ Tech Blog
こんにちは！ミラティブのフロントエンドエンジニア どじねこ です。 今回は、ミラティブを支える社内向けの管理システムにおいて、機能開発の体験を改善する取り組みを「MUI と Zod、React Hook Form の活用術」としてご紹介させていただきます。 前提 ミラティブでは、他の多くの Web サービスと同様に配信者さんの登録した情報や配信の履歴を管理する社内向けのシステムが存在しています。 特に管理システムのフロントエンドにおいては、その特性上入力フォームの実装がその大半を占めています。 日々の機能開発においては、そうした管理システムに実装された入力フォームの新規実装や機能拡張が行われています。 課題 一般的な入力フォームでは、画面の初期描画の際にすでに設定済みの値をフォームに適用する初期化処理や、入力された内容を検証して必要に応じてエラー表示するバリデーション処理が必要です。 ミラ
Next.js、Remix、SvelteKit といった近年のフレームワークは、JavaScript がなくても動作することを一つの価値として提供しています。 例えばSvelteKit のフォームではプログレッシブエンハンスメントとして、JavaScript が利用できる環境ではリッチなユーザー体験を提供しつつ、JavaScript が使えない環境においては HTML のフォームとして振る舞うことでアプリケーションの機能を変わらず提供できます。 React Server Component はサーバー側で HTML に変換されるため、クライアントに JavaScript のコードが配信されることはありません。React Server Component では useState() を使用できないといった制約がありますので、我々開発者は React Server Component の利点を
先日リリースされたChrome 119に地味だけど嬉しい新機能が実装されていたので、紹介します。 フォームのセレクトボックスで区切り線にhrを使用できるようになりました。すでにSafariでもサポートされており、これでChorme, Edgeでも使用できます。 Select element: now with horizontal rules by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 select要素内で区切り線（hr）を使用できるようになりました select要素内の区切り線（hr）の実装方法 select要素内の区切り線（hr）のデモ select要素内で区切り線（hr）を使用できるようになりました 11/1にリリースされたChrome 119では、
なぜ Server Actions を使うのか
Next.js 14 の Server Actions の stable リリースに発表は大きな反響を呼びました。 特に <button> の formAction 属性内で直接 SQL クエリを実行するコードは多くの人に衝撃を与えていました。"use server;" の部分を PHP やバイナリに置き換えると行った多くのミームも生まれました。 function Bookmark({ slug }) { return ( <button formAction={async () => { "use server"; await sql`INSERT INTO Bookmarks (slug) VALUES (${slug})`; }} > <BookmarkIcon> </button> ) } X 上での反応を見ると、このクライントから直接 SQL クエリを実行するコードは見た目の印象
Don't disable buttons
One of the most common accessibility issues I find (and fix) on client projects is dynamically disabled form buttons when a form is being submitted. Today I want to talk about why developers do it, why it’s bad, and what you can do instead. Let’s dig in! Why developers disable buttons Typically, I see the pattern used to prevent a form from being submitted a second time while waiting for the form
New in Chrome 119 Chrome 119 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 Chrome 119で追加された4つの新しいCSSの機能 CSSの疑似クラス「:user-valid」「:user-invalid」 CSSの相対カラー構文(RCS) CSSのclip-pathで「geometry-box」値 CSSのclip-pathで「xywh()」と「rect()」値 Chrome 119で追加された4つの新しいCSSの機能 11/1にリリースされたChrome 119で4つの新しいCSSの機能が追加されました。対象となるChrome 119は、Android、ChromeOS、Linux、macOS、Windowsに適用されます。 以下、その4つの新
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
@location-state/conformをリリースした
令和時代の API 実装のベースプラクティスと CSRF 対策 | blog.jxck.io
Webフォームのスパム対策: ユーザーに優しく、ボットに厳しく、reCAPTCHAを使わない方法
2024年版 HTMLで作るフォームバリデーション - ICS MEDIA
フォーム要素の縦書きモードがすべての主要ブラウザでサポートされます！ 見慣れないせいか違和感が
パスワードの入力文字列を任意で表示する | Accessible & Usable
Implementing Vertical Form Controls
テレビ新潟にサイバー攻撃 社内ネット接続のサーバーに不具合 | NHK
Byte-sized Swift: Building Tiny Games for the Playdate
Chromeの検索に今後起きる、3つの変化とは？ | ライフハッカー・ジャパン
プレースホルダーのアクセシビリティ上の課題と解決策 - SmartHR Tech Blog
どうしてあなたの共通化は間違っているのか：目次 - Qiita
【コピペでOK】Google Form を一発で作成！"フォーム作成GPT"の構築｜ChatGPT研究所
【お詫びとご報告】Googleフォーム誤操作による企画申込者の個人情報漏えいについて
Reactで実装したフォームのパフォーマンスが問題になるのはなぜか
投稿いただいたご意見等が受け付けられていませんでした | 消費者庁
俺の管理画面 2023年冬 - KAYAC engineers' blog
なぜ HTML の form は PUT / DELETE をサポートしないのか? | blog.jxck.io
JavaScript なしで動作するモダンなコードの書き方
地味だけど嬉しい新機能！ フォームのセレクトボックスで区切り線にhrを使用できるようになりました
Web制作者は要チェック！ Chrome 119で追加された、疑似クラス、相対カラー構文など4つの新しいCSSの機能
ビッグモーターが不正アクセス被害、約7年分の個人情報漏えいの可能性 対象は問い合わせフォームから連絡したユーザー
