ジョン・ヘンリーの教訓 19世紀の都市伝説に「ジョン・ヘンリー」という人物がいます[１]。 彼は屈強な肉体労働者で、ハンマーを振るって岩に穴を開ける達人でした。ところが蒸気機関で動くドリルの登場により、彼は失業の危機に瀕します。そこで彼は、人間は機械よりも優れていることを示すために、穴開け競争で蒸気ドリルに戦いを挑んだというのです。 伝説によれば、ジョン・ヘンリーは（驚くべきことに）僅差で勝利を収めたとされています。しかし、あまりにも肉体を酷使したために、勝利の直後にその場で倒れて帰らぬ人になりました。周囲の野次馬たちは言いました。「彼は人間らしく死んだ」と。 この逸話から得られる教訓は何でしょうか？ 「機械と競い合うのは命にかかわる」とか「バカバカしい」とかではないと私は思います。それはあまりにも表層的な解釈です。生成ＡＩが躍進する現在、ジョン・ヘンリーは遠い過去の伝説ではありません。現

文章の折り返しはウェブ制作において意外と難しいものです。URLが文章に含まれている場合、URLがレイアウトを突き抜けてしまった、という経験をみなさんはお持ちではないでしょうか？　この記事では、国内のウェブ制作において「開発者が考えることが少なくてよくなる」安全なCSS指定を紹介します。 結論から説明すると、以下の指定を提案します。 body { overflow-wrap: anywhere; /* 収まらない場合に折り返す */ word-break: normal; /* 単語の分割はデフォルトに依存 */ line-break: strict; /* 禁則処理を厳格に適用 */ } この記事では上記の指定にいたった理由と、折り返しの理解について必要なoverflow-wrapとword-breakプロパティを中心に解説します。 overflow-wrap overflow-wrapは

こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今回は、Webデザインで「紙っぽさ」を出す方法を考えてみました。参考事例も掲載しながら紹介していくので、どうぞ最後までお楽しみください！ はじめに：「紙っぽさ」とは？私が言う「紙っぽさ」とは、おもに「雑誌っぽさ」のことです。Webデザインだけど、雑誌っぽい。ディスプレイに映っているけれど、エディトリアル感がある。 たとえば、以下のようなデザインは私にとって「紙っぽい」例です。 出典：六本木未来会議出典：DMN出典：ぼくのおじさんどうして、私はこれらを雑誌のようだと感じるのでしょう？自分なりに考えたポイントを、ひとつずつ紹介していきます。 その①：文字が「組まれて」いる最初に挙げたWebサイトのひとつをよく見てみると、画像左上にある「NO. 153」の文字のうち、「NO.」だけが縦向きになっています。「NO.」と「153」を

A complete guide on how to pair icons and typefaces to create a consistent visual language.Choosing the right icon set to complement a specific typeface is crucial for maintaining visual consistency in a project. This ensures that all the elements work together to create a recognizable brand and improve the overall user experience. Here's what you need to know to make the right choices. Early cons

JavaScriptパッケージシステム「npm」は巨大なバグを抱えていると指摘し、新たなパッケージシステムを開発する「vlt」。npm作者らの参加を発表 npmに代わる新しいJavaScriptのパッケージシステム「vlt」（vōlt：ボールト）を開発しているvlt technologyは、同社にnpmの作者であるIsaac Z. Schlueter氏、npmのスタッフエンジニアリングマネージャであったDarcy Clarke氏、npmのCLIチームであったRuy Adornoらが参加すると発表しました。 Node.jsとnpmが作ったJavaScriptのエコシステム サーバサイドでJavaScriptを実行可能にしたNode.jsの登場と、そのNode.jsを基盤にJavaScriptのアプリケーションやモジュールなどをパッケージングして登録し、自由にダウンロード可能にしたレジストリで

ティム・バーナーズ＝リーのオープンレターを起点に改めて考えるインターネットの統治 2024.03.26 Updated by yomoyomo on March 26, 2024, 15:00 pm JST 1989年3月12日は、ティム・バーナーズ＝リーが、当時彼が勤務していた欧州原子核研究機構でハイパーテキストを利用する情報管理システムの提案を行った日であり、「ワールド・ワイド・ウェブの誕生日」とされます。ティム・バーナーズ＝リーは、この3月12日に2017年、2018年、2019年と、ウェブの現状を憂い、ユーザーに行動を促す檄文を公開してきました。 そして、今年2024年の3月12日、前回から5年ぶりとなる「ウェブの35回目の誕生日を祝う：オープンレター」が公開されました。これまでと同様、なりゆきで日本語訳を公開した手前、まずこれを取り上げたいと思います。 ティム・バーナーズ＝リーは

The science behind how design choices influence perception and behavior

Object-Oriented Conference 2024​​ https://ooc.dev/2024/ で喋ったスライドです。

Chrome の挙動を見てみる 百聞は一見に如かずと言いますので、実際の挙動を見てみます。以下の図では、text-align: justify を指定したテキストボックスに対し、上段には space-first を、下段には従来の挙動である space-all を設定しています。上段は下段に比べて、自然な組版が実現されていることが見て取れます。 文章は 京葉線 - Wikipedia を改変して使用。CC BY-SA 画像からは、以下の挙動が確認できます。 行頭の括弧（橙色） 1 行目のみアキが残り、2 行目以降は行頭のアキが詰まる（space-first であるため） 連続する約物（ピンク色、青色、緑色） 読点→句点、閉じ括弧→閉じ括弧ではアキなし、中黒→括弧、閉じ括弧→開き括弧では二分（1/2）–全角程度のアキに調整される 行末の閉じ括弧（青色） 必要に応じて行末のアキが詰まる 行末の

Chrome 124 以降、キーボードにフォーカス可能な子がない場合、スクローラーはデフォルトでキーボードをフォーカスできます。 背景 スクローラーは至るところに存在しています。[利用規約] ボックス内に利用規約が表示される場合がありますが、一番下までスクロールして [送信] ボタンをクリックする必要があります。垂直のメニューバーに多数のアイコンが表示され、そこから選択することもできます。 このようなケースでは、多くのウェブユーザーがマウスやタッチパッドを上下に動かして、要素をスクロールします。ただし、ユーザーがページを移動するには、ポインティング デバイス、トラックパッド、タッチスクリーンが最適な方法とは限りません。一部のユーザーは、キーボードのみを使用して HTML ページ間を移動し、フォーカス可能なすべての要素にアクセスすることがよくあります。これにはさまざまな理由が考えられます。振

ツイッターでアクセシビリティ向上日誌２【目視試験編】‐Akira Tsuda Portfolio and Blogというのを見かけて、そういえばアクセシビリティチェックって何をどうしているのかという話をウェブ上でほとんど見かけない（というか自分は知らない）ので、思い切ってチェックの過程や考え方を書いてみようかなと。 チェック対象のサイトを作った@HeldaForStudy氏に尋ねたところ、題材として使ってよいという返事をいただいたので、「アトリエ金工やまぐち」のサイト1ページをチェックしてみることにします。 対象ページはBasic認証がかかっているので、アクセシビリティ向上日誌１【各種ツール評価編】からたどってください。 @HeldaForStudy氏はレベルはA*1でチェックしたとのことなので、チェック基準はWCAG 2.1レベルAでチェックすることにしましょう。 わたしは普段はCOB-

TL;DR recommendation: Narrow down your definition of "tooltip," and jump to the last section. Tooltips have been a reliable source of web accessibility woes from the very beginning; or at least from the beginning of graphical web browsers. They have gone by many names: "tooltip," "infotip," "toggle tip," "hint text," "balloon help," "info bubble," "inaccessible overlay of shame"... the list goes o

This post is part of my Today I learned series in which I share all my web development learnings. I recently watched the talk Making Things Better: Redefining the Technical Possibilities of CSS by Rachel Andrews. Rachel's talks are always full of useful information presented clearly and compactly. The talk included one line of CSS that I haven't seen before. .something { display: flex; // 👇 what

Last summer at Tailwind Connect I shared a preview of Oxide — a new high-performance engine for Tailwind CSS that we’ve been working on, designed to simplify the developer experience and take advantage of how the web platform has evolved since Tailwind was first released. Last summer at Tailwind Connect I shared a preview of Oxide — a new high-performance engine for Tailwind CSS that we’ve been wo

Just like Safari 15.4 and Safari 16.4, this March’s release of Safari 17.4 is a significant one for web developers. We’re proud to announce another 46 features and 146 bug fixes. You can experience Safari 17.4 on iOS 17.4, iPadOS 17.4, macOS Sonoma 14.4, macOS Ventura, macOS Monterey, and in visionOS 1.1. Architectural improvements It’s always exciting to ship new features that you can use while b

Stable Diffusion WebUI Forge is a platform on top of Stable Diffusion WebUI (based on Gradio) to make development easier, optimize resource management, and speed up inference. The name "Forge" is inspired from "Minecraft Forge". This project is aimed at becoming SD WebUI's Forge. Compared to original WebUI (for SDXL inference at 1024px), you can expect the below speed-ups: If you use common GPU li