アクセシブルなフロントエンドコンポーネントの完全ガイド - 後編 | POSTD
※前編がこちらにあります 目次 icon links inputs keyboard navigation navigation menu modals prefers-reduced-* “skip” links SVGs tabs tables toggle switches tools tooltips video/audio players アクセシブルなインプット 2019年、WebAIMは上位100万件のWebサイトのアクセシビリティを分析し、エラーがないページの推定割合は1%未満というショッキングな結論に到達しました。アシスティブテクノロジー（支援技術）に頼っている人にとってインクルーシブで使いやすいサイトを作成するには、セマンティックHTMLの基礎を正しく理解する必要があります。Oscar Braunertのインクルーシブなインプットに関する記事は、彼の「小さく始めて共有・
アクセシブルなフロントエンドコンポーネントの完全ガイド - 前編 | POSTD
クイックサマリー ‐ 私たちは一連の短い記事で開発者とデザイナーにとって有用なツールやテクニックを紹介しており、直近の記事ではCSS監査ツールとCSSジェネレータを取り上げました。この記事ではタブやテーブルからトグルやツールチップまで、信頼性の高いアクセシブルなコンポーネントを見ていきます。 目次 以下にすべてのアクセシブルなコンポーネントをアルファベット順に記載しました。目次をスキップするか、スクロールして1つずつお読みください。 :focus styles autocomplete buttons carousels "close" buttons content sliders checkboxes color systems color palettes comics component libraries cookie consent prompts dark mode data
Git活用法 ー コードはいつも1行ごとにドキュメント化されている | POSTD
コードには1行ごとに隠しドキュメントがあります。 次のコードスニペットの4行目を書いた人は、何か理由があってDOMノードの clientLeft プロパティにアクセスしたのでしょうが、結果的に何もしていません。これはかなり不可解です。なぜこうしたのか、あなたは説明できますか？ 今後、この呼び出しを変更したり削除したりしても安全でしょうか？ // ... if (duration > 0) this.bind(endEvent, wrappedCallback) this.get(0).clientLeft this.css(cssValues) 私ではなく他の人があなたにこのコードを見せたとして、誰がこの行を記述したのか、どんな理由があったのか、このままの状態にしなければいけないのか、あなたはおそらく説明できないでしょう。ただし、プロジェクトを進めているときは大抵の場合、バージョン管理シス
Webサイト開発にCSS in JavaScriptを使うのはやめよう | POSTD
9つのおとぎ話 CSSは迷走しています。JavaScriptでドキュメントをスタイリングしているプロジェクトでは、多くの場合誤った理由からその方式を選択しています。本稿では、よくある誤解（神話）を列挙し、そうした問題に対するCSSソリューションを紹介します。 本稿は、特定のプロジェクトや人物への攻撃を意図するものではありません。ここでは、“CSS in JavaScript”(CSS in JS)を styled-components を使用することと定義します。これは、Reactのコンポーネントをスタイリングする最近のトレンドとなっています。 styled-components の作者である Max Stoiber と Glen Maddern 、また彼らに協力した人々は皆、卓越したアイデアと善意にあふれる優秀な人々です。 完全な透明性のために断っておくと、私は react-css-mo
ブラウザのキャッシュをクリアする | POSTD
最も一般的で最も簡単にフロントエンドのパフォーマンスを向上できる方法は、ブラウザにアセットをキャッシュすることです。しかし、いずれかの時点で開発者は長いキャッシュ寿命を持つアセットを誤ってリリースしてしまう場合があります。正す方法があるのです。キルスイッチの導入方法を教えましょう。 私のようにWeb開発をしている方であれば、誰もが一度は質の悪いフロントエンドアセットをリリースしてしまったことがあるのではないでしょうか。そのせいで30年というキャッシュ寿命を与えてしまうことになってしまいます。凶報です。ユーザが手動でキャッシュをクリアしない限り、残ってしまいます。果たしてそうでしょうか。 最近、 Steve Souders と朝食を一緒にしたのですが、相手がSteveということもあり、会話は3時間も続き、終わった時には頭が痛くなっていました。Steveに課題として考えさせられたのが、キャッシ
分散型システム徹底入門 – Part 1. | POSTD
分散型システムとは何でしょうか？ なぜそんなに複雑なのでしょう？ 分散型システムについて熟考中のクマ 目次 はじめに 分散型システムとは何か？ なぜシステムを分散させるのか？ データベースのスケーリングの例 分散型システムのカテゴリ 分散型データストア 分散型演算 分散型ファイルシステム 分散型メッセージング 分散型アプリケーション 分散型台帳 まとめ はじめに 目覚ましい進歩を遂げているテクノロジが世界中に拡大する中、分散型システムは広く知れ渡ってきました。コンピュータサイエンスにおいては、複雑かつ果てしない研究分野と言えます。 本記事は、基本的な方法を使って、この分散型システムを紹介しています。詳細まで深く掘り下げていくのではなく、こうしたシステムの様々なカテゴリを垣間見ていくことを目的としています。 分散型システムとは何か？ 分散型システムを最もシンプルに定義するとしたら、エンドユー
分散型システム徹底入門 – Part 2. | POSTD
Cassandra 先ほど触れたCassandraは分散型のNoSQLデータベースで、CAP定理のAとP（可用性と分断耐性）の特性を基準に最終的な一貫性が確保されています。ただ、このように言ってしまうと少し誤解を招くかもしれません。というのも、実際のところCassandraの設定は非常に柔軟性が高く、可用性を犠牲にして強い一貫性を提供することもできるからです。ですが、そうした使用ケースは一般的ではありません。 Cassandraでは、 コンシステントハッシュ法 を使って、渡そうとするデータをクラスタのどのノードが管理するのかを決めています。そしてその際は、データを複製するノード数を示す レプリケーションファクタ を設定します。 注釈： レプリケーションファクタ＝3 挿入（キー、値） Cassandraのノード（コーディネータ） Cassandraのノード ハッシュ（キー）＝2 ノード#2
分散型システム徹底入門 – Part 3. | POSTD
BitTorrent BitTorrentは、Web上でtorrentを使って大容量ファイルを転送する際に広く使われているプロトコルです。その主な目的はメインサーバを経由することなく、ネットワーク内のさまざまなピア間でのファイル転送を容易にすることです。 BitTorrentクライアントを使うと、世界中の複数のコンピュータに接続してファイルをダウンロードします。.torrentファイルを開くと、コーディネーターのような役割を果たすマシン、いわゆる トラッカ に接続されます。トラッカはピアを見つけ出し、欲しいファイルを持っているネットワーク内のノードを示してくれます。 *注釈： トラッカ ・オンラインのノードをトラッキングする ・ノードが何のファイルを提供しているかを認識する Seeder：シーダ Leeche： リーチャ 破線：ファイル転送 実線：メタデータ転送* ネットワークのサンプル
CSSモジュール ― 明るい未来へようこそ | POSTD
ここ最近、CSSに対する考え方が広がりを見せています。皆さんの中には、その転換点を見つけようと、Christopher Chedeauの”CSS in JS”という講演を聞いた方もいるでしょう。2014年11月にNationJSで行われたこの講演は、CSSにおける重大な分岐点となりました。まるで高エネルギー粒子が衝突した後のように、それを機に、数ある多様な考え方が、各々の方向へ渦を描くように広がったのです。その例として、 React Style と jsxstyle 、 Radium を挙げましょう。これら3つは、Reactのスタイリングにおける最新かつ最良、そして最も実行しやすいアプローチに含まれており、 各々のプロジェクトのReadmeファイルでも、 そのように言及しています。もし”発明”が、 adjacent possible（一歩先にある可能性） を探ることの一例であるのなら、Ch
型安全性とは何か | POSTD
以前書いた（C言語についての） メモリ安全性について定義した記事 について、型安全性について説明する記事も投稿してほしいというコメントがありました。型安全性についてはかなりよく知られてきていると思いますが、ズバリこうだと簡単に定義できるほどにはまだ理解が浸透していません。特に誰かが”Javaは型安全な言語だ”と言った場合、これは厳密に何を意味するのでしょう。全ての型安全な言語はある意味”同じ”と言えるでしょうか。ある特定の言語について、そして一般的な意味で、あなたを悩ませる型安全性とは何でしょうか。 実際のところ、型安全性が何を意味するのかは言語の型システムの定義によります。最もシンプルなケースでは、型安全性はプログラムの動作が正しく定義されるように保証します。もっと一般的な話をすると（この記事ではそのあたりをカバーするつもりですが）、言語の型システムはそのプログラムの正確さと安全性を推論
分散システムについて語るときに我々の語ること ― 分散システムにまつわる重要な概念について | POSTD
分散システムについては、もう随分と前から学びたいと思っていました。ただ、それは一度首を突っ込んだら最後、ゴールのない迷路に迷い込むようなものなのです。どこまでも続いているウサギの穴のようなものです。分散システムに関する文献は星の数ほど存在します。様々な大学からたくさんの論文が発表されているばかりでなく、膨大な数の書籍もあるのです。私のような全くの初心者には、どの論文を読んだらいいのか、どの書籍を買ったらいいのか、見当もつきません。 そんなとき、一部のブロガーが、 分散システムエンジニア （それがどういう意味であれ）になるなら知っておくべき論文というものを推奨しているのを見つけました。その一部を紹介しましょう。 FLP , Zab , Time, Clocks and the Ordering of Events in a Distributed Systems , Viewstamped
正式リリースされたES8の主な新機能 ???? | POSTD
EcmaScript仕様第8版の新機能 EcmaScript 8もしくはEcmaScript 2017が、6月末にTC39から正式にリリースされました。私たちはこの1年、EcmaScriptについて色々と議論しているようですが、それは無駄なことではありません。現在、ES標準は新しい仕様のバージョンが年1回公開されています。ES6は2015年、ES7は2016年に公開されましたが、ES5のリリース時期をご記憶でしょうか。JavaScriptが魔法のように普及する以前の、2009年のことでした。 つまり私たちは、安定した言語としてJavaScriptの開発上の変化をたどっており、今や自分の語彙にES8を加える必要があるのです。 ES2017 (the 8th edition of the JavaScript Spec) was officially released and publishe
ファイルシステムよりも35％高速に | POSTD
1. 概要 SQLiteを使うと小さなBLOB（例：サムネイル画像など）を読み書きする場合、fread()やfwrite()を使って個別のファイル上に記録されたBLOBを読み書きするよりも35％も速く (*1) 読み書きができます。 さらに、10キロバイトのBLOBを扱うようなSQLiteデータベースを考えた場合、個別のファイルにそれぞれのBLOBを格納する場合に比べてディスク領域を約20％も節約可能です。 このようなパフォーマンスの差が生じる理由は、（私たちの考えでは）SQLiteデータベースの場合、open()やclose()システムコールが呼び出されるのが1回だけなのに対して、個別のファイルに格納されているBLOBを使用する場合は、open()やclose()がBLOBの数だけ呼び出されるためだと思われます。どうやらopen()とclose()を呼び出すオーバーヘッドは、データベース
Railsアプリを66％スピードアップ ― Railsキャッシュの完全ガイド | POSTD
(訳注：2016/3/2、頂いた翻訳フィードバックをもとに記事を修正いたしました。) Railsアプリでのキャッシングは、「たまに夕食を一緒にするけれど、本当はもっと頻繁に一緒にいるべき友達」に少し似ています。パフォーマンスをまじめに考えるRailsアプリのほぼ全てで、もっとキャッシングを使えるはずですが、ほとんどのRailsアプリでは、完全にキャッシングを避けています。それでも普通は、Railsで高速なサーバ応答を達成するための唯一の道は、キャッシングの知的な利用なのです。約250msの応答時間を、簡単に50～100msに高速化できます。 定義についての注意 ― この記事は、アプリケーション層のキャッシングのみを対象としています。HTTPキャッシング（これは全く別の難物で、あなたのアプリケーションに実装する必要はありません）は、別の機会で扱いましょう。 するべきキャッシングをしない理由
Makefileを自己文書化する | POSTD
私たちのプロジェクトではいつも、非常に長い Makefile を使用して、インストールやビルド、テスト、デプロイメントの処理を自動化しています。ターゲット名はほとんど標準化されていますが（ make install 、 make deploy ）、中には説明が必要なものもあります（ make run-dev 、 make restart-api ）。そして、詳細なmakeターゲットを追加するほど、それらの処理内容をテキスト形式で大量に記載しなければなりません。私たちのプロジェクトでは通常、このような文書を README ファイルに書いています。 しかしCLI（コマンドラインインタフェース）を用いる場合は、主に自己文書化ツールを使っています。 make と打つだけで、利用可能なコマンドとその説明が一覧表示されたら便利だと思いませんか？ それを実現するのは、実はとても簡単です。まずは各ターゲッ
IRCは死んだ。IRCよ栄えよ。 | POSTD
IRC Internet Relay Chat が世に出たのは1988年だが、インターネットの言葉では、すでに古代だ。今なお世界で何十万ものユーザが使っているとはいえ、IRCの利用は劇的に減少してきている。 一時はこれほど広く使われた技術に多くのユーザが興味を失ったように思われるのはなぜか、IRCの開発者を含めた何人かと話をした。 IRCの起源 私たちはIRCの開発者、 Jarkko Oikarinen と連絡を取った。スウェーデンのGoogleに勤務する彼は、IRC誕生のストーリーを聞かせてくれた。 （初期のIRCサーバ。写真提供：Wikipedia.） Oikarinenによれば、彼は、1988年にフィンランドの University of Oulu で夏期インターンをしていた3か月か4か月の間にIRCを作った。 当時OikarinenはOuluBoxというローカルBBS（ 電子掲示板
GraphQLはWeb APIの次のフロンティアか？ | POSTD
RESTの規約。URLはリソースであり、CRUDはHTTP動詞にマップされる。 RESTの規約に1つ問題があるとすれば、規約が十分でないということでしょう。上記で”通常”、”多くの場合”、”時に”という表現を使ったのは、これらのやり方は仕様で推奨されているものの守られるとは限らないためです。実世界では、大抵のAPIはRESTishがせいぜいです。例えばStripeでは、リソース更新に PUT ではなく PATCH を使うべきですが、歴史的理由でそうはなっておらず、おそらく現時点では変更に値しないでしょう。いずれにしても開発者はドキュメントを読む必要があり、その時、 POST メソッドのユビキタスな使い方があることに気づくのです。 RESTには他の問題もあります。必要なものだけでなく全てが返ってくるため、リソースのペイロードが非常に大きくなることがあるのです。そして多くの場合、クライアントが
コーディングに対する考え方を変える6つのプログラミングパラダイム | POSTD
私は時折、コーディングに対する考え方を変えさせられるような、従来と非常に異なるプログラミング言語に出会います。本記事では、その中でも特に気に入っている発見をいくつかご紹介したいと思います。 これは、先賢による「関数型プログラミングは世界を変える！」的な投稿ではありません。本記事で挙げるのは、もっと「知る人ぞ知る」的なリストです。多くの読者の方にとって、以下の言語やパラダイムは聞いたことのないものが大半だと思いますので、私が経験したように、これらの新しい概念を学ぶ楽しさを感じていただければ幸いです。 注：私は以下の言語の多くに関して最低限の経験しかありません。その発想に引き込まれたのであって、専門的知識は持ち合わせていないため、訂正すべき点や誤りがあればどうぞご指摘ください。また、本記事で取り上げていない新しいパラダイムや概念に出会った方は、ぜひお知らせください。 最新情報：本記事が r/p
GitHubのコード検索 : プログラマにとっての宝の山 | POSTD
新しい言語やフレームワークを学ぶことは、時には苦闘になることがあります。従来のアプローチは、概念を説明し簡単な例を提供するドキュメントを読むことです。それで十分な場合もありますが、ドキュメントに高度な例や実際のプロジェクトでの使い方が書かれていない場合も多々あります。 ドキュメントに記載されていない問題に出くわすと、大抵の人はStack Overflowで解決策を探します（またはソースコードを丹念に調べます）。しかし、「使っているフレームワークが登場してから十分に期間が経っておらず、思い浮かぶ質問全てにStack Overflowが答えてくれない」ということもありえます。 今まで問題にはまって、こう考えたことはありませんか？ 「誰かが既にこの問題を解決しているはずだ！では、なぜこの問題に対する答えがStack Overflowにないのだろうか？」 そのとおりです。恐らく誰かは既にそれを解決
webpackとRollup：似て非なるもの | POSTD
先日、Facebookは 膨大なプルリクエスト をReactにマージして、既存のビルドシステムを Rollup ベースのシステムに移行しました。 その結果 、 何人もの人々 から「なぜwebpackではなくRollupを選んだのか」という質問が寄せられました。 これは、もっともな疑問でしょう。 webpack は、近年JavaScriptコミュニティで最も評価されているツールの1つです。毎月のダウンロード数は何百万件にもおよび、何万個ものウェブサイトやアプリケーションに使用されています。巨大なエコシステムがあり、コントリビュータも多くいます。さらにオープンソースプロジェクトとしては珍しく、 かなりの寄付金 が集まっています。 それに比べるとRollupは小規模です。しかしReact以外にも、Vue、Ember、Preact、D3、Three.js、Momentなど、数々の有名なライブラリに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
