Sign-in form best practices | Articles | web.dev
Sign-in form best practices Stay organized with collections Save and categorize content based on your preferences. Use cross-platform browser features to build sign-in forms that are secure, accessible and easy to use. If users ever need to log in to your site, then good sign-in form design is critical. This is especially true for people on poor connections, on mobile, in a hurry, or under stress.
どうしてHTML5が廃止されたのか | フューチャー技術ブログ
フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては「何をいまさら」という話題かと思います。 しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。 そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。 広義のHTML5 / 狭義のHTML5HTML5
ブラウザレンダリングの仕組み
フロントエンド用語を100秒で解説するチャンネルを作りました！ よかったらチェックしてみてください！ はじめに 以前書いた記事「Webページがブラウザに表示されるまでに何が起こるのか？」で ブラウザレンダリングについて詳細に知りたいという意見をいただいたので、調べてまとめてみました。 全体図 レンダリングの大まかな流れです。 HTMLのダウンロード サーバから送られてきたHTMLをダウンロードします。 HTMLの解析 サーバから送られてきたHTMLファイルは、「0」と「1」でできたデータになっています。 ブラウザは、サーバから受け取ったデータをそのままHTMLとして解釈することはできないので、自分で扱うことができる形、つまりDOMに変換する必要があります。この作業を 解析 ( Parse ) と言います。 HTMLをダウンロードしたら、すぐにこの解析作業に入ります。作業は以下のようなステッ
HTML and CSS techniques to reduce your JavaScript
Anthony Ricaud (@anthony_ricaud) is a web engineer helping teams ship efficient products at a sustainable pace. With a broad understanding of web protocols and browsers, he likes to design simple but fast web architectures. Longer page load times Page is unusable until the JavaScript loads and if it does so without any errors Usability, reactivity and accessibility can be lacking without a team wi
</> htmx ~ SPA Alternative
Recently Tom MacWright has written a few posts on Single Page Applications and their discontents: Second-guessing the modern web If not SPAs, What? The emerging norm for web development is to build a React single-page application, with server rendering. The two key elements of this architecture are something like: The main UI is built & updated in JavaScript using React or something similar. The b
</> htmx - high power tools for html
NEWS: htmx finished 2nd in the 2023 JavaScript Rising Stars "Front-end Frameworks" category, just behind React (htmx is a library, btw) and #10 overall! Thank you to everyone who starred us! introduction htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hyper
HTML over the wire
You can write fast, modern, responsive web applications by generating your HTML on the server, and delivering that (with a little help) directly to the browser. You don’t need JSON as an in-between format. You don’t need client-side MVC frameworks. You don’t need complicated bundling and transpiling pipelines. But you do need to think different. Because the mainstream story in web development of t
Geri Reid - Forms best practice
Form design Best practice, research insights and examples Here's my best practice guidelines for form design. Working on a design system for a bank taught me a lot about forms. I watched testing in labs. I worked alongside experts from specialist accessibility organisations. I saw forms tested by people with disabilities and users of assistive technology. I've also read a lot of research. From all
Establish network connections early to improve perceived page speed | Articles | web.dev
Establish network connections early to improve perceived page speed Stay organized with collections Save and categorize content based on your preferences. Learn about rel=preconnect and rel=dns-prefetch resource hints and how to use them. Before the browser can request a resource from a server, it must establish a connection. Establishing a secure connection involves three steps: Look up the domai
W3C and WHATWG to work together to advance the open Web platform
W3C and WHATWG to work together to advance the open Web platform I am pleased to announce that W3C and the WHATWG have just signed an agreement to collaborate on the development of a single version of the HTML and DOM specifications. The Memorandum of Understanding jointly published as the WHATWG/W3C Joint Working Mode gives the specifics of this collaboration. Motivated by the belief that having
Memorandum of Understanding Between W3C and WHATWG
Last Update: May 28, 2019 Memorandum of Understanding Between W3C and WHATWG This Memorandum of Understanding (“MOU ”) is entered into this __May 28, 2019, between the World Wide Web Consortium (“W3C”), with its principal place of business located at 32 Vassar Street, Room 32-386, Cambridge, MA, 02139 USA; and the WHATWG. Whereas W3C is an international community where Member organizations, a full
Microsoft Days in the Web - Welcome
Day 1 Get set up and learn to build a todo app using HTML, CSS, JavaScript, and React.
マークアップをパワーアップするWAI-ARIA
私たち @masuP9(わかり手) 株式会社サイバーエージェント @o_ti(キレ手) 株式会社まぼろし マークアップ生まれ マークアップ育ち フロントエンドエンジニア 受託魔族はだいたい友達 #deisui_html_radio ウェブ制作をこじらせたオレたちが 歩いてきた道は何か、進むべき道はどこかを探る （ただの飲み配信） 目次(role="directory") WAI-ARIAってなに WAI-ARIAでできること WAI-ARIAをどういうときに使うの WAI-ARIAの前に WAI-ARIAってなに <header role="banner"> hogehoge </header> WAI-ARIAは、ウェブコンテンツおよびアプリケーションの アクセシビリティと相互運用性を改良するための フレームワークを提供する技術仕様である。 Accessible Rich Interne
普通のHTMLの書き方
保守しやすく、規模に依存しないHTML文書のために 一般 DOCTYPEで始める 置き換えられるべきまたは旧式のDOCTYPEを使わない XML宣言を使用しない 文字参照はできる限り使わない &と<、>、"、'は名前文字参照を使ってエスケープする 制御文字や不可視文字は数値文字参照を使う コメントではその内容の前後へ空白文字を置く 終了タグを省略しない 空要素の書き方を混ぜない タグや属性値の前後へ空白文字を置かない 大文字・小文字を混ぜない 引用符を混ぜない 属性を2文字以上の空白文字で区切らない 真偽値を取る属性の値は省略する 名前空間は省略する XML属性は使わない data-*とMicrodata、RDFa Lite用の属性と通常の属性を混ぜない デフォルトの暗黙のARIAセマンティックスを尊重する 文書要素 lang属性を追加する lang属性の値はできる限り短くする できる限り
formvalidation_CSSDay
Form validation Peter-Paul Koch http://quirksmode.org http://twitter.com/ppk Browser API Special, 15 June 2017 Form validation Literally the oldest trick in the JavaScript book. Netscape 2 could do form validation, and little else. Modern input types • type=“date” • type=“email” • required • pattern • and so on Modern input types • Automatically validated • Automatically get native error messages
HTMLは開発者たちのために
昔からよく「HTMLの正しさ」というような表現を見る。少し前はHTMLの構造的な完全さや文法的な正確さなどにウェブページの表示やCSS、そしてJavaScriptが依存していたので、そういった点を強く意識する必要があった。Firefoxが親切に教えてくださっていたXMLパースエラーのことを思い出すとわかりやすい。僕も良くそれに類する表現を使っていた。 今はブラウザーとウェブ標準技術が共に進化したので、そういった形式的な正しさはさほど重要ではない。かろうじてハイパーリンクだけがまともな壊れたHTMLでもなんとか修復して解釈してくれる。命名規則ベースのCSSならばHTMLがどうあれうまくスタイルが当たってくれるだろう。足りない機能はDOMツリーの状況をほとんど無視できるShadow DOMでどうにでもできるというわけだ。 HTMLにCSSとJavaScriptを生やしてウェブページが出来ていた
target="_blank" で開くリンクには rel="noopener" をつける - Qiita
The performance benefits of rel=noopener - JakeArchibald.com より target="_blank" でリンクを開く場合は、rel="noopener"をつけておくのが良い。 管理画面などでは rel="noopener noreferrer"というかたちでnoreferrerをつけるとさらに良いかもしれない（参考：http://qiita.com/wakaba@github/items/707d72f97f2862cd8000 ） target="_blank" で開いたWindowは、 window.opener を使って親のWindowを操作することができる。つまりtarget="_blank"で開いたサイトで任意の操作ができてしまうことになるけど、Same origin の仕組みが働く。ので、Same originではない場
Form Validation Part 1: Constraint Validation in HTML | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Most JavaScript form validation libraries are large, and often require other libraries like jQuery. For example, MailChimp’s embeddable form includes a 140kb validation file (minified). It includes the entire jQuery library, a third-party form validation plugin, and some cus
アクセシビリティに配慮してアイコンフォントを使う - Qiita
アイコンフォントis便利 FontawesomeやIcoMoonといったアイコンフォントは、ベクターデータをフォントとして扱えるためとても便利です。 アクセシビリティ問題 しかし、アイコンフォントをそのまま使ってしまうとアクセシビリティ的にはよろしくない。 具体的にはスクリーンリーダーでサイトを読み上げながら閲覧しているユーザーにとっては、アイコンが登場する度に意味不明な情報を聞かされることになってしまいます。 もしアイコンがいくつも並ぶようなページでそのようなことになったら、ユーザーにとっては苦痛でしかないですよね。 コーディングによるソリューション ではどうするか。例えば上記画像の「Download」ボタンのアイコンをFontawesomeを使用し実装するとき、以下のようにHTMLコードに一手間加えることで問題を解決出来ます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How Writing Semantic HTML Can Help Accessibility