Before you buy a domain name, first check to see if it's haunted
In mid-2022 I bought a new domain name. The name was musicbox.fun. I got it for a side-project, an interactive online music box that I had built and hosted at musicboxfun.com. The new name was shorter and more quirky. I felt lucky to have grabbed it. Unfortunately, musicbox.fun had a history. Before I bought it, the domain was used to host pirated music. musicbox.fun, as it existed in 2018 (before
メニューデザインのチェックリスト：17のUXガイドライン
フッターには優先度の低いペルソナ向けの付加的なカテゴリー（投資家情報、求人情報など）を記載するとよい。 3. リンクテキストは背景とコントラストの強い色にする メニューリンクは、背景とすぐに区別でき、見つけやすくする必要がある。 コントラストのガイドラインを無視するデザイナーのなんと多いことか。デジタル空間を移動するだけでも迷いやすいのに、メニューを読み取るために目を細める必要まであるとすれば困ったことである。 ❌ Gus Modernのナビゲーションは、背景の回転するカルーセルに重なってほとんど見えない。 4. 大きな画面ではメニューで画面を覆わない 大きな画面では、メガメニュー（またはサブメニュー）が開いたときに画面全体が覆い隠されないようにしよう。メニューの可視性や読みやすさは重要だが、開いたメニューが画面全体を占領してはならない。開いたメニューは、コンテンツの上に表示される、動的で
Where web components shine
In this job we need to think a lot about the tools we choose and why, so I cataloged all the places where web components (for me) feel like “the right tool for the job”. Your list may be different and I’d love to read it. And because I don’t want this to be 100% propaganda, I’ll also cover some of the not-so-great parts of web components as well. The good parts Here’s an incomplete list of situati
Web Interface Guidelines
IntroductionWeb Interface Guidelines This document outlines a non-exhaustive list of details that make a good (web) interface. It is a living document, periodically updated based on learnings. Some of these may be subjective, but most apply to all websites. The WAI-ARIA spec is deliberately not duplicated in this document. However, some accessibility guidelines may be pointed out. Contributions ar
イラストストーリー「食の未来を考えよう！」
パナソニックのオウンドメディア「Make New Magazine」掲載コンテンツ『食べものが足りなくなる？イラストで読む、じつは身近な「食の課題」』を制作しました。 世界の人口増加に伴い、食に関してどんな課題があり、どんなアクションが必要なのか。イラストを使った読み物に仕立てました。 掲載コンテンツを見る コラボレーター Make New Magazine編集部 タグをチェック ACミラン Adidas EURO Jリーグ Umbro アルゼンチン代表 アワード アーセナル オリンピック サステナビリティ サッカー サプライヤー ジャーナリズム スポンサー セリエA チェルシー チャンピオンシップ デザイン ネットゼロ パリ・サンジェルマン ビジネス ブンデスリーガ プレミアリーグ ポルトガル代表 マネー マンチェスター・シティ マンチェスター・ユナイテッド ユニフォーム ラ・リーガ リ
The stretch keyword: a better alternative to width: 100% in CSS?
The stretch keyword: a better alternative to width: 100% in CSS? Certain HTML elements, like a div or a p, will stretch to take up the full available width by default. If you give them a horizontal margin, it won’t cause a horizontal scrollbar. This is an incredibly useful default behaviour. Of course, many other elements aren’t full-width by default. Let’s look at a few instances where width: 100
Should masonry be part of CSS grid?
Should masonry be part of CSS grid?An exploration of examples showing masonry as both a part of CSS Grid and as its own display type. Oct 30, 2024 The examples in this article work only in Firefox with experimental features enabled (Go to about:config and enable grid-template-masonry-value) or the latest Safari Technology Preview. I've included videos below each interactive demo for easy viewing o
Providing Accessible Names and Descriptions
How to build accessibility semantics into web patterns and widgets Introduction Providing elements with accessible names, and where appropriate, accessible descriptions, is one of the most important responsibilities authors have when developing accessible web experiences. While doing so is straightforward for most elements, technical mistakes that can completely block users of assistive technologi
Architecture Antipatterns
Architecture Antipatterns Discover common architecture antipatterns, learn how to avoid them and overcome design pitfalls! Gain valuable insights, practical advice, and real-world examples to build better software architectures and improve existing ones. Cargo-Culting Adopting processes, technologies or methodologies without understanding why and how they work, in the expectation to achieve the sa
JavaScript Best Practices | The WebStorm Blog
JavaScript is undoubtedly the most used programming language in the world and is hugely influential on one of the largest technologies we have all come to rely on – the internet. With this power comes great responsibility, and the JavaScript ecosystem has been rapidly evolving, making it incredibly hard to keep up with the latest JavaScript best practices. In this blog post, we will cover several
What is Baseline?
Baseline gives you clear information about which web platform features work across our core browser set today. When reading an article, or choosing a library for your project, if the features used are all part of Baseline, you can trust the level of browser compatibility. By aligning with Baseline, there should be fewer surprises when testing your site. How do features become part of Baseline? Bas
アクセシビリティに取り組まないと、企業はどれくらい「損」をする？ 試算する方法をご紹介｜Goodpatch Blog グッドパッチブログ
2024年4月に施行された法改正により、障害を持つ方への「合理的配慮」の提供が、民間企業においても法的義務となりました。これによりウェブデザイン分野では、アクセシビリティ対応の機運がますます高まっています。 この手の話になると、「アクセシビリティに取り組むには、どれくらいのコストがかかるんでしょう？」という質問をよくいただきます。実際に挙げてみると、以下のようなところでしょうか。 アクセシビリティの知識習得に費やす時間 専門家にアクセシビリティ診断を依頼する費用 アクセシビリティに対応するため、Webサイトやプロダクトを改修する費用 こうやって具体的な項目を見ると、アクセシビリティ対策に取り組むことを躊躇する方もいるかもしれませんが、逆に「アクセシビリティに取り組まないコスト」を考えたことはありますか？ アクセシビリティに取り組まないことで、潜在的な市場機会を逃し、顧客満足度を低下させるリ
mask-compositeでつくるCSSの新しい表現方法 - ICS MEDIA
CSSで特定の形に切り抜く（マスキングする）にはmask-imageプロパティが便利です。マスク用の画像をmask-imageプロパティを使って要素に適用すれば、その画像の不透過部分のみにマスキングできます。mask-imageプロパティに関連して2024年から使用可能になったmask-compositeプロパティを使うと、マスクの合成方法を指定でき、より幅広いマスク表現ができるようになりました。この記事ではmask-compositeプロパティについて解説します。 サンプルを別ウインドウで開く コードを確認する mask-compositeプロパティの値とそのマスク結果の違い mask-compositeプロパティは、複数のマスク画像をどのように合成するかの方法を指定するためのプロパティです。実はmask-imageプロパティは複数画像の指定にも対応しています。複数画像からマスク領域を生
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
A Friendly Introduction to Container Queries • Josh W. Comeau
The most effective ways to improve Core Web Vitals | Articles | web.dev
WebAIM: 25 Accessibility Tips to Celebrate 25 Years
Amazing CSS in 2024 at DevFest Nantes · October 30, 2024
You can use text-wrap: balance; on icons
Unconscious Bias: Definition and Examples | Built In
Scroll-Driven… Sections – Frontend Masters Boost