サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
Couple of weeks ago when I was publishing The Hidden Cost of URL Design I needed to addSQL syntax highlighting. I headed to PrismJS website trying to remember ifit should be added as a plugin or what. I was overwhelmed with the amount of options in the download page so I headed back to my code. I checked the file for PrismJS and at thetop of the file, I found a comment containing a URL: /* http
この記事は、以下のモダンCSSに関する記事のHTML版です。 せっかくならHTMLもちゃんと学んでみようと思い、最近のHTMLの新機能を改めて学び直したので、アウトプットついでにこの記事を書いています。HTML Living Standardの時代へ 2019年5月28日、W3CとWHATWGは、HTMLとDOM標準の開発をWHATWGが主導することで合意しました。これにより、HTMLは「HTML5」のようなバージョン番号を持つ仕様から、継続的に更新される「HTML Living Standard」へと移行しました。 この変化は単なる管理体制の変更ではなく、HTMLの進化の方向性を示しています。この記事で紹介する2019年以降の新機能を見ると、以下のような傾向が明確に現れています： 宣言的UI構築への移行 -JavaScript実装から、HTML属性による宣言的な記述へ ブラウザネイテ
速くて安いWebサイトを目指して作ったときのポイントです。 追記 2/20：Cloudflare Pagesの毎月の無料枠のビルド回数が誤っていたので修正しました（50→500）
皆さん、フォーム作ってますか？ Webサイトやアプリを作るにあたって避けられないのがForm作成、多くの方が autocomplete を設定するなど、より使いやすいフォームを作成するために尽力されていることと思います。 一方で、悪気なく書いたコードでより使いにくいフォームになってしまっている例が世の中には多く見られます(特に銀行系) 今回は、よくあるフォームの実装を例に、(特に日本語話者にとって)より使いやすいフォームにするためのちょっとした仕様や私が考える対策を書いていこうと思います。 忙しい方のために最初に書いておくと、この記事に書いてあることの多くは autocomplete の仕様を意識した実装をしましょう の一言に集約されます。 多くの方にとっては「何を当たり前のことを」と思われる項目も多いかとは思いますが、当たり前のことがされていないフォームが世の中には多すぎるので、少しでも
すべてのフォームが要件を満たしている場合のみ、送信できます。 フォームバリデーションのデザイン 上記の例では最低限のHTMLのみ実装されています。しかし、実際のサイトではバリデーションエラーをユーザーにフィードバックする必要があります。よりユーザビリティの高いフォームでは、以下の点を検討する必要があります。 エラー時のスタイル エラーメッセージの出し方 バリデーションエラーの表示タイミング 以下では、それぞれについて深堀りします。 エラー時のスタイル エラーを検知する方法として、CSSには:valid疑似クラスと:invalid疑似クラスがあります。これらの疑似クラスは『CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方』でも紹介されている、バリデーションエラーが起きている要素にのみ適用されるクラスです。 しかし、この疑似クラスには欠点があります。required属性を
モダンCSSでテーブルをゼブラストライプしたり、テーブルの四隅を角丸にしたり（昔はかなり面倒でした）、列や行を分割したり、ホバーでハイライトやアウトラインを表示したりなど、表のデータを読みやすくするテーブル（<table>）のさまざまなスタイルを紹介します。 AGuide to Styling Tables by Mads Stoumann 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テーブルを構成するHTMLの要素 テーブルをゼブラストライブにするCSS テーブルを角丸にするCSS テーブルの列を分割するCSS テーブルの行を分割するCSS ホバー・フォーカスでハイライトするCSS ホバーでアウトラインを表示するCSS データを左右・中央に揃えるCSS 終わりに はじめに 私は最近、小さな矛盾に気がつきました。
HTMXとは https://htmx.org/ HTMXは、JavaScript を記述せずに、Ajax通信や高度なUXを実現できるライブラリ。 軽量 で 高速 で、既存のサーバーサイドのフレームワークとシームレスなやり取りができる。また、AJAX通信の発火、フォームの送信処理、DOMの更新などを既存のHTML要素を拡張するだけで可能とする。WebSocketやSSEにも対応しているので、チャットアプリなどにも適している。2023JavaScript Rising Starsでは、フロントエンド・フレームワーク部門で見事2位に輝いた！(一位はReact、全部門だとshadcn/ui) 似たような機能として、Ruby onRailsのHotWireがあるらしい。 2024年はHTMXがくると言われているぐらい世界で騒がれているのだが、あまり日本では流行っていない。以下はGoogle
HTMLメールの実装で「tableか、、、」とため息をついていた人に朗報です。 tableを使用しなくてはいけなかった理由はWindows上のOutlookだったのですが、新しいOutlookではレンダリングエンジンがEdgeに切り替わります。これにより、tableによる実装は不要になります。HTMLメールの最近の実装方法を解説します。 ModernHTMLemail (tables no longer required) by Ollie Williams 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめにHTMLメールの実装でもっとも頭を悩ませている問題 今日、HTMLメールをどのように実装すべきか？ 電子メール用のAMPについて 終わりに はじめに MailChimpによるHTMLメール実装のベストプラクティ
階層メニューやトーストUIが簡単に作れる新技術！ JavaScriptで利用するポップオーバーAPI ポップオーバーとはコンテンツの1番上に重ねて表示するUIで、ユーザーにアクションを促したり、補足の情報などを伝えるために画面に表示します。ポップオーバーAPIのMDNのドキュメントではオーバーレイ、ポップアップ、ポップオーバー、ダイアログなどを総称して「ポップオーバー」と呼んでいます。 ウェブサイトでよく見かけるポップオーバーですが、実装するには意外と調整や考慮の多いUIです。たとえば、画面の1番上に重ねるためにはz-indexで他の要素との重なり順を調整する必要があります。Escキーを押した時や要素外をクリックした時にポップオーバーを閉じるには、JavaScriptで制御を追加します。ポップオーバーが複数あった場合どうでしょう？ 1つだけ表示するのか、すべて表示したままにするのか？ その
この資料は、2023年4月23日に開催された「春のJavaScript祭り Online2023」にて発表した資料になります。 https://javascript-fes.doorkeeper.jp/events/154047 Remixとは、2021年にバージョン1.0が登場したフルス…
「Web Speed Hackathon2022」という「非常に重たいWebアプリをチューニングして、いかに高速にするかを競う競技」があります。 リモート参加で11月1日から27日まで開催されています。 ここで言う「高速」とはCore Web Vitalsのスコアが高いことを言い、Lighthouseのスコアをベースにした500点満点の争いです。 ISUCONのフロントエンド版ですね。 以前にも同じ課題で「学生向け」と「社内（サイバーエージェント）向け」が行われたらしく、まだ500点を出した人はいません。 そこで僕は「満点を出したい」と思い、初日から、いやむしろフライングしていたからその前から頑張ってきました。 そして、先日（17日）、ついに500点満点を出しました！ たぶん、レギュレーションはクリアしている、はずです（もし違反してたらすいません…）。 自動で行われる「Visual Re
はじめに個人開発もエンジニア自体の歴も浅いSEです。 就業先がJavaをメインで使う企業なのですが、個人的にフロントエンドまわりが好きです。 元々、興味本位でデザインの本だったりUXに関する本とかを読んでいたりするのですが、 その結論の際にたどり着いたのが、 「理論とか決まってるなら、それをよしなにやってくれるor参考にできるツールとかサイト探せばよくね」 という結論になりました。なんと怠惰な思考でしょうか。 そんなわけで、こちらではデザインに限らず、色々開発に便利なツールを紹介させていただきます。 （有名なのが多いかもしれませんが、ご容赦ください、結局有名なものに行き着くのです） レイアウト関係 1. Awwwards おしゃれなwebサイトが集まっているサイトです。 ここまで個人開発でお洒落にできたらいいなと思いますが、自分はアニメーションを考えるときや、 作りたいフロント側のデザイ
Are you usingSimple.css? If you are,it would be great if you considered buying me a coffee to say thanks. Things like this really help open source software thrive. You can Buy Me A Coffee or even sponsor me onGitHub. ❤️Simple.css is aCSS framework that makes semanticHTML lookgood, really quickly.Simple.css is mostly classless, which means that you can integrateSimple.css with plainHTML a
GitHub -BuilderIO/qwik: An Open-Source framework designed for best possible time to interactive, by focusing on resumability of server-side-rendering ofHTML, and fine-grained lazy-loading of code. 去年から気になってて、調べたいなーと思ってたやつ。 昨今の覇権を握ってる系のJavaScript-firstなフレームワークたちとは違い、HTML-firstを謳うユニークなアプローチをしてるのが一番の特徴。 中の人による一連のシリーズもあって、そこも読んでまとめてみた記事です。 Qwik Series' Articles - DEV Community Qwikの特徴 遅いモバイル環境だとしても、
ソシオメディアがまとめている、ヒューマンインターフェースをデザインする際の指針です。これらは、インターフェースデザインに関する様々な文献と、実際のデザインコンサルティングで得た知見をもとに、ソシオメディアが独自に編纂したものです。継続的に追加・更新していきます。 すべてモデルインタラクションプレゼンテーション
DFlexはどのJavaScriptフレームワークでも使えるVanillaなドラッグ&ドロップライブラリです。 他のD&Dライブラリとの大きな差として、最小限のレイアウトシフトをあげています。Webページで操作する要素が多い程、累積レイアウトシフト(CLS)が多くなり、結果としてレイアウトのズレを発生させ、UXに影響が出る、というものをGoogleがCore Web Vitals(コア・ウェブ・バイタル)の3つの指標の1つとして提唱しました。 CLS CLSは上のようにテキストを確認してボタンを押そうとしたら、遅れて表示されたコンテンツによりボタンの位置がズレ、本来押すつもりのなかったボタンを押してしまう、といったもので、GoogleのPageSpeed Insightsでも数値化され評価の対象として位置づけられています。 そのレイアウトシフトを最小限に抑える事が出来るD&Dライブラリとし
いくつかのクラウドサービスでは、1年程度の無料トライアルや一定額のクーポンなどに加えて、期間の制限なくずっと無料で使える、いわゆる「Free Tier」や「Always Free」と呼ばれる無料枠のサービスが提供されています。 こうした無料枠は試行用の環境や一時的なテスト環境などとして、期間を気にせずサービスを試すうえで非常に有効です。 もちろん、無料提供サービスは提供側の都合によってある日突然終了することもあり得ますが、いまのところ1年前の記事「ずっと無料で使えるクラウドの「Free Tier」主要サービスまとめ。2020年版」で紹介したサービスで終了したものはないようです。本記事では期限の制限なくFree TierやAlways Freeとして提供されている主なサービスを、2021年版としてまとめました。Amazon Web Services（AWS） 「AWS 無料利用枠」のWe
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
