タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
こんにちは！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
入力欄のプレースホルダーって結局どうなの - Qiita
入力欄のプレースホルダーの話をします。プレースホルダーというのは、フォームの入力欄で、ユーザーが入力するまでの間に表示されているテキストのことです。 書籍「Webアプリケーションアクセシビリティ1」では、「3.1 ラベルと説明」のところで、紙版にして約1.5ページの分量を割いて、フォーム入力欄のプレースホルダー（<input> 要素や<textarea> 要素の <placeholder> 属性）の問題点を指摘しています。 この本で指摘されているプレースホルダーの問題点は以下の3つです。 プレースホルダーの色が薄く視認しづらい プレースホルダーとフォームコントロールの値との区別がつかない フォームコントロールに値を入力したときにプレースホルダーの値が見えなくなってしまう Webアプリケーションアクセシビリティ さらに、Nielsen Norman Groupによる「Placeholders
SNS等のローディングで見かけるプレースホルダーをSVGで作れる・「Create Content Loader」 - かちびと.net
Create Content LoaderはSNS等のローディングで見かけるプレースホルダーをSVGで作れるWebアプリです。 FacebookのカードやInstagramなどで読み込み中にコンテンツのシルエット丸ごとプレースホルダーにした、みたいなアレ。 試しに作ってみました。 スクエアかサークルの任意のオブジェクトを作成して配置、色やアニメーション速度を設定します。 また、ユーザーによって作られたサンプルもいくつか公開されています。 コードはReactやVue、SVGから選択可能で、今後はgifでのエクスポートも予定されてるみたいです。 本アプリはOSSとしてもソースコードが公開されています。ライセンスはMIT。 Create Content Loader
[レベル: 中級] この記事では、Lazy-load で利用するプレースホルダー画像を Google にインデックスさせないようにする方法を紹介します。 JavaScript で画像を遅延読み込みするときに、JavaScript の実行が完了して本来の画像が読み込まれるまでの間、代わりに読み込ませるのが画像がプレースホルダーです。 プレースホルダー画像は実質的に意味があるものではありません。 検索の観点から見れば、インデックスさせる必要はありません。 そのため、プレースホルダー画像が Google に取得されないようにするにはどうしたらいいかを、あるサイト管理者がマーティンに Twitter で質問しました。 That does sound like inviting trouble. There are three safe options, I'd say: 1.) No placeh
サイト開発の初期で課題になることの一つに開発途中でダミー画像をどうするかという問題があります。 多くのプロジェクトではAPI連携などが完了して正式な画像で開発できるようになるのは開発終盤になることもあり、それまでつなぎのダミー画像をどう見せるかは悩みどころです。 デザインカンプなどから書き出して静的に配置しても良いのですが、手間がかかる上にダミー画像が削除されず本番データとして残り続けることがよくあります。 https://placehold.jp/ といったプレースホルダー画像用のサービスもありますが、開発途中のサイトで外部サービスを利用することのセキュリティ的な懸念もあります。 Next.js(App Router)にはImageResponseという画像生成が手軽にできる機能がありますのでプレースホルダー画像を自作してしまえば、前述の問題や懸念を取り払うことができるようになります。
Alfred 4のスニペットで使えるプレースホルダー機能
以前スニペット機能に関しての基本的な解説はしたのですが、今回はスニペット内で使えるプレースホルダー（正式名称：Dynamic Placeholders）についてまとめておきます。 スニペット追加時の「Snippet:」内に波括弧{}で囲まれた特定の文字列を入れておくことで、日付やクリップボードなどの情報を入れた状態でスニペットを発火できるようになります。 プレースホルダーの追加は左下にある{}アイコンをクリックして選択します。 日付関連「Date and Time」内のプレースホルダーは、日付や時間に関するプレースホルダーがまとめられています。
こういう見た目のやつ loading 僕の Next.js で作ったポートフォリオサイト https://pokutuna.com/ では、blog エントリ情報や github の活動は、Cloud Firestore から読み込んで表示していて、その読み込み中の表示を作る話です。 よくあるのは、くるくる回るローディングインジケーター わかりやすいけど、ロード完了後に大きくレイアウトが変わってしまう。ガタッと見た目が変わるのは WebVitals の Cumulative Layout Shift 的にも良くない。 ガタツキを減らすには実際のコンテンツと高さのプレースホルダーを置いておくのが良くて、適当に領域を確保するのが簡単だけど、記事であることは分かりたい。しかし画像でプレースホルダを作ると追加の画像読み込みが発生してしまうし(SVG で埋め込んでおく手もある)、記事の見た目を変えた
Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up
雑に数万件ぐらいのidを突っ込んでMySQLへselectクエリ投げたらエラーになったので調べた。 ざっくりまとめ MySQLでプリペアドステートメントを使う場合、65536個以上のプレースホルダを含めることができない 先の制約はシステム変数で緩和できない (変更できない) ハックとして、プリペアドステートメントを使わない "動的プレースホルダ" を使うことで先の制約を回避することができる エラーメッセージ 前提: MySQL 5.7 SQLSTATE[HY000]: General error: 1390 Prepared statement contains too many placeholders (SQL select * from iikanji_no_table where id in (1, 2, 3, ....) MySQLではプレースホルダを65536個以上含められない
[小ネタ] Kinesis Data FirehoseのIAMポリシーに含まれるプレースホルダーについて | DevelopersIO
しばたです。 検証用にAmazon Kinesis Data Firehose(以後Kinesis Firehose)を手作業で作成した際に気が付いた点について、ネット上に意外と情報が無かったのでブログにしてみました。 配信ストリーム作成時に生成されるIAMロール マネジメントコンソールからKinesis Firehose配信ストリームを新規作成する場合、配信ストリームと同時にIAMロールを新規作成することが可能です。 例として下図の様にシンプルなS3への配信ストリーム(PUT-S3-Test1)を作る場合、 Advanced settingsの「Permissions」欄でIAMロールを新規作成するかどうかを指定できます。 ここでIAMロールを新規作成した場合以下の様なポリシーを持つロールとなり、ところどころに%FIREHOSE_POLICY_TEMPLATE_PLACEHOLDER%と
![[小ネタ] Kinesis Data FirehoseのIAMポリシーに含まれるプレースホルダーについて | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/884975641c5db14bff3082afe3e0b5c719bc93f4/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F04%2Famazon-kinesis-firehose.png)
ReactJS: Keep Simple. Everything can be a component!
プレースホルダとは？SQLインジェクション攻撃を回避せよ！ データベーススキル この記事の動画版はこちら（画像クリックでYoutubeに飛びます） SQLインジェクションという攻撃（実例） Webサービスはインターネット上に公開され、世界中のユーザーにさらされているため、悪意のあるユーザーから攻撃を受けるリスクが常にあります。 有名な攻撃手法の1つに「SQLインジェクション」というものがあります。 SQLインジェクションとは、開発者の裏を突いて想定外のSQLを組み立てて、DBに対して実行させようとする攻撃方法です。 SQLインジェクションの実例（※悪用厳禁） 例えば、以下のようなSQLを実行するPHPプログラムがあったとします。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
プレースホルダーのアクセシビリティ上の課題と解決策 - SmartHR Tech Blog
遅延読み込みのプレースホルダー画像をGoogleにインデックスさせない3つの方法
Next.js(App Router)でプレースホルダー画像を自作する
記事っぽい読み込み中プレースホルダをかんたんに作る - ぽ靴な缶
【初心者向け】select要素にプレースホルダーを付ける方法と付けられない理由の考察 - Qiita
MySQLでプレースホルダ使いすぎて怒られるのを動的プレースホルダを使って回避する - モヒカンメモ
スクリーンリーダーはプレースホルダーにアクセスできるのか
プレースホルダとは？SQLインジェクション攻撃を回避せよ！
news.yahoo.co.jp
amass.jp
kana4.st.coresv.net
binpaku.hatenablog.com
news.yahoo.co.jp
www.jstage.jst.go.jp