想定外の新機能！ 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,000種以上の入力ボタンアイコンが無料公開。ゲームパッド・キーボードなどのアイコンパック『Input Prompts』がアップデート
Webサイト「Kenney」で無料公開されている入力ボタンのアイコンパック『Input Prompts』がアップデート 各種コンシューマー機のゲームパッド、キーボード・マウスといった入力ボタンのアイコンが収録されている アイコンが追加され、800種以上→1,000種以上に ゲーム開発用素材の配布やゲームの公開・販売などを行うWebサイト「Kenney」にて、ゲームパッドなどの入力ボタンのアイコンがセットになったパック『Input Prompts』がアップデートされました。 Input Prompts update released! Over 1,000 icons covering many consoles and input methods, they're all CC0 (public domain) and can be used for any type of project
顧客からのちょろちょろインプットを脱却 顧客からのめちゃ太いインプットを通して何を選んでもアウトカムを生み出すプロダクトバックログを実現する/Break free from narrow customer input 2024
よわよわプロダクトバックログアイテムで悩むプロダクト開発チームに向けて、顧客からのインプットを太くすることで、つよつよプロダクトバックログを作り出すための仕組みと構造を解説します。 発表者 https://twitter.com/_N_A_ https://note.com/mryy 関…
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月、私はミラティブの管理シス
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)
ゲームパッド・キーボードなどの入力ボタンアイコンが800種以上詰まった『Input Prompts』、Webサイト「Kenney」で無料公開
入力ボタンのアイコンパック『Input Prompts』、Webサイト「Kenney」で無料公開 各種コンシューマー機のゲームパッド、キーボード・マウスといった入力ボタンのアイコンが収録されている SVGファイル、サイズの異なる2種のPNGファイルで用意 ゲーム開発用素材の配布やゲームの公開・販売などを行うWebサイト「Kenney」にて、ゲームパッドなどの入力ボタンのアイコンがセットになったパック『Input Prompts』が公開されました。 Input Prompts are now available! Contains 800+ glyphs for common input types, including overlays and generic controls. Includes PNG (64×, 128×) and SVG, plus an overview of a
Motivation Introduction User input strace Printing non-printable stty raw -echo -isig UTF-8 Conclusion Motivation This blog series explains how modern terminals and command-line tools work. The primary goal here is to learn by experimenting. I’ll provide Linux tools to debug every component mentioned in the discussion. Our focus is to discover how things work. For the explanation of why things wor
Contains glyphs for: Xbox 360, Xbox One & Xbox Series PlayStation™ 1 – 5 Steam Deck Steam Controller Nintendo Switch Nintendo Wii Nintendo WiiU Playdate Keyboard & mouse Generic controls Flairs
【CSS】<input type="file">は::file-selector-buttonでスタイルをつけよう - Qiita
<input type="file">は直接スタイル指定ができず、デザインの変更 が面倒だったのですが、::file-selector-button を使えば簡単に指定できることを知ったので備忘録です。 使い方 See the Pen ::file-selector-button by himeka223 (@himeka223) on CodePen. ::file-selector-button にボタンのスタイルを設定するだけです！ 「選択されていません（選択後はファイル名）」の文言のスタイルはinputの方で変更できます。 display: block; を追加すればボタンとテキストの間で改行も可能です。 すべてのブラウザで対応済み 既にすべてのブラウザで対応済みのようで、安心して使えます！ テキストも変更したい場合は疑似要素をのせる 残念ながら ::file-selector-b
GitHub - jina-ai/reader: Convert any URL to an LLM-friendly input with a simple prefix https://r.jina.ai/
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
MUI Autocomplete で API のデータから検索候補を表示する Input を作ってみる - asoview! Tech Blog
この記事は アソビューAdvent Calendar 2023 の6日目（B面）になります。 アソビューでフロントエンドエンジニアをしている白井です。 今回は文字入力時に候補検索し表示できるような Input コンポーネントを作ってみようと思います。 果物検索補完付き Input 今のプロジェクトで使用している MUI の Autocomplete を使うことで簡単に実装できるのですが、オプションが多くて癖が強いことや、細かいことをやろうとしたりリクエストを間引いたりすると一手間必要になるので、そのあたりの解説をしていきます。 主に以下の3つのライブラリを使用して実装を進めていきます。 データ取得：SWR バリデーション：React Hook Form コンポーネント：MUI Autocomplete オートコンプリート付き Input の作成 まず、Autocomplete コンポーネン
Zoology (Blogpost 2): Simple, Input-Dependent, and Sub-Quadratic Sequence Mixers
Table 1: Perplexity of 355 million parameter models trained for 10 billion tokens on the Pile. Yet, some subquadratic gated-convolutions match attention on the non AR slice! Can we capture the strengths of both gated convolutions and attention in one purely sub-quadratic architecture? We find the AR gap is because gated convolution models (e.g. Hyena, H3, RWKV, RetNet) need model dimension that sc
The reason why you can't input text in PyCharm - ITipsUs
I can't input text in PyCharm. Why does PyCharm refuse my input? PyCharm is famous IDE of Python. But sometimes it refuses our text input. When we tried to input text in PyCharm, text is not displayed. Why does PyCharm refuse our text input? Today I will introduce about "The reason why you can't input text in PyCharm". What is PyCharm ? PyCharm is a kind of editor for writing program. It is made b
GitHub - lelanthran/l2h: Convert s-expressions input to HTML output.
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
この記事は GMOアドマーケティング Advent Calendar 2023 22日目の記事です。 お疲れ様です。GMOアドマーケティングの天河です。 テキストエリアなどの入力系のタグ内のテキストを選択した際に、その部分の座標情報を取得する方法を共有したいと思います（なかなか情報がなく苦戦した）。 ちなみに現時点で一発で取得できるメソッドは存在しません。ライブラリなどを利用する必要があります。 ちなみにこれができると、Twitter（現 X）や Instagram などのSNSでよく見るハッシュタグの予測変換機能が作れます。 HTML内で選択したDOM要素の情報は const selectedText = document.getSelection(); によって、Range オブジェクトとして取得することが可能です。ここで取得した Range オブジェクト情報から selectedTe
フォーム入力などで、テキスト入力してEnterキー入力を検出する方法 いくつか方法があって、簡単に説明すると例えばこんなやり方でしょうか： input要素にキー入力イベントリスナーを設ける方法。 form要素のsubmitイベントで処理する方法。 input要素を対象にした方法に絞って、以下の説明を続けます。 よく見る例（非推奨のコードが含まれます） let text_form = document.getElementById('text_form'); let output = document.getElementById('output'); text_form.addEventListener('keypress', test_ivent); function test_ivent(e) { if (e.keyCode === 13) { output.innerHTML = t
iPhone（iOS16以降の端末）のブラウザでのinput[type="time"]のレイアウトをCSSで修正する。
こんにちは、オフィス狛 デザイン部のSatoです。 先日、モバイルで利用するWebシステムのHTMLを作成した際に、時間を入力する必要があるフォームが必要になりました。 そこで、input[type="time"]を使いました。 HTMLの作成後に、「iPhone端末で表示すると、時間入力欄（input[type="time"]）の入力後の文字が上揃えになっているので、他のに入力欄と同じ縦中央揃えに修正してほしい」という報告をいただきました。 指摘いただいた箇所を私の方でもiPhone端末で確認すると、時間入力欄(input[type="time"])だけで入力後の文字の行揃えも中央揃えになっていて、他の入力欄に合わせる為に文字揃えも修正が必要になってきました。 そこで時間を入力するinputにclassをつけ、そのclassで余白をつけ行揃えを左に修正しました。 実機で修正ができているこ
![iPhone（iOS16以降の端末）のブラウザでのinput[type="time"]のレイアウトをCSSで修正する。](https://cdn-ak-scissors.b.st-hatena.com/image/square/d4143abc6903db4769c90b61d3915b794236639b/height=288;version=1;width=512/https%3A%2F%2Fblogger.googleusercontent.com%2Fimg%2Fb%2FR29vZ2xl%2FAVvXsEj8UPI2b290RH9VXFtNWrWF-4npn-ozanoqyqykihM-XCK6qazFS0MPvVj3q6X9-1KVeNSIvHrpcDxIEmSW8viLjQE8LnoewP2fHIbsgQF5B_TQmxjm4NBkHCB1MAYsIlBdtmrzvDYTpXkLBvx8X-8fn_xbrTeL1uneTejJdvA8csiU1M83osNfLyXrfQHJ%2Fw1200-h630-p-k-no-nu%2F%25E3%2583%2595%25E3%2582%2599%25E3%2583%25AD%25E3%2582%25AF%25E3%2582%2599%25E3%2582%25B5%25E3%2583%25A0%25E3%2583%258D%25E3%2582%25A4%25E3%2583%25AB108.png)
ごきげんよう🙋♀️ツクリンクでエンジニアリングマネージャーをしている、あっきー（@kuronekopunk）です。 この記事はツクリンク プロダクト部 Advent Calendar 2023 9日目の記事です。 今回はエンジニア向けの記事やイベント情報を共有するSlackの#dev-inputチャンネルについて書きます。 いい記事見つけたらSlackで共有したりしますよね。分報や部署のチャンネルを使っているところもあると思います。エンジニアチームでは情報シェア専用のinputチャンネルを作ってそこに流すようにしています。 inputチャンネルのキャプチャ専用チャンネルを作る意味偶然の出会いを増やす入っていない分報やその他チャンネルに投稿された場合には出会えない可能性があるため、専用のチャンネルを作り情報の一元化をしています。 また、人は興味のある事柄しか目に入りません。SNSで知らな
Not only Python but also other program, you want it to wait input from keyboard. But what should we write to wait input. Today I will introduce about "How to wait input from keyboard in Python". Get character from keyboard In order to get character from keyboard, we use "standard input". "Standard input" means standard source of input. It is abstracted. But you can consider "standard input" as "ke
GitHub - mtgto/macSKK: Yet Another macOS SKK Input Method
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.
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How terminal works. Part 1: Xterm, user input
Input Prompts · Kenney
input, textarea中のキャレット座標 (カーソルの位置) を取得する
input要素でEnterキー入力を検出する方法が、いつの間にかアップデートされていた - Qiita
Slackのinputチャンネルで組織内の知識を増やす ｜あっきー
How to wait input from keyboard in Python - ITipsUs