HTMLを最初に、JavaScriptを最後に：Webを高速化する秘訣 | POSTD
すべてのフレームワークはステートを保持する必要があります。フレームワークはテンプレートを実行することでステートを構築します。ほとんどのフレームワークは、このステートをリファレンスやクロージャとしてJavaScriptヒープに保持します。Qwikのユニークな点は、ステートが属性としてDOMに保持されることです（リファレンスもクロージャもシリアライズして送受信するのは不可能ですが、文字列であるDOM属性なら可能です。これがresumability(再開性）のカギとなります）。 DOMにステートを保持することには、以下のように多くのユニークなメリットがあります。 DOMはシリアライズの形式としてHTMLを使用します。ステートを文字列属性としてDOMに保持することで、アプリケーションをいつでもHTMLにシリアライズできます。HTMLを送信し、別のクライアントでDOMにデシリアライズすることが可能に
フォント読み込みの影響を軽減するための新しい方法：CSSフォントディスクリプタ | POSTD
クイックサマリー ‐ Webフォントは往々にしてWebのパフォーマンスをひどく低下させており、この問題に対して特に効果的なフォント読み込みの戦略は存在しません。しかし、今後公表されるフォントのオプションによって、フォールバックフォントを最終的なフォントに合わせやすくなるかもしれません。 フォントの読み込みはWebのパフォーマンスにとって長年にわたる悩みの種であり、これを解決する良い方法はありません。Webフォントを使用する場合は基本的に、フォントをダウンロードするまでテキストが表示されないFOIT（Flash of Invisible Text）か、最初はフォールバック用のシステムフォントを使用し、ダウンロードが済んだらWebフォントに更新するFOUT（Flash of Unstyled Text）のどちらかを選ぶ必要があります。正直に言って、どちらの選択肢もあまり満足の行くものではなく、
ディープラーニングの限界 | POSTD
(注：2017/04/08、いただいたフィードバックを元に翻訳を修正いたしました。 @liaoyuanw ) この記事は、私の著書 『Deep Learning with Python（Pythonを使ったディープラーニング）』 （Manning Publications刊)の第9章2部を編集したものです。現状のディープラーニングの限界とその将来に関する2つのシリーズ記事の一部です。 既にディープラーニングに深く親しんでいる人を対象にしています（例：著書の1章から8章を読んだ人）。読者に相当の予備知識があるものと想定して書かれたものです。 ディープラーニング： 幾何学的観察 ディープラーニングに関して何より驚かされるのは、そのシンプルさです。10年前は、機械認識の問題において、勾配降下法で訓練したシンプルなパラメトリックモデルを使い、これほど見事な結果に到達するなど誰も想像しませんでした。
さよなら、Firebug | POSTD
最も人気が高くパワフルなWeb開発ツール。 Firebugはこれまでに驚異的な成功を収めており、その12年の歴史において、オープンソースのツールとして、Web開発者の間でカルト的な人気を築き上げてきました。登場したのは2005年、Firefoxブラウザでコードの検査、編集、デバッグをできるようにした最初のツールです。また、どのようなWebページにおいても、CSS、HTML、JavaScriptの調査を可能にしています。これは大きな前進でした。 Firebugは多くの人の注目を集め、現在でも100万人以上の熱心なファンがそれを使用しています。 そのような中、来月リリースされるFirefox Quantum (バージョン57) で、Firebugが終焉を迎えるのは残念でなりません。ただし、現在のFirefox Developer ToolsにFirebugの全ての機能が盛り込まれている点につい
あなたはCSSプロパティ”display”をどのぐらい知っているだろうか？ | POSTD
CSSプロパティの1つである display は、CSSレイアウトに用いるプロパティの中でも極めて重要なものです。よく使われているのは、 block や inline 、 none あたりでしょう。 table や inline-block も、今ではかなり一般的になってきたと言えます。一方、 flex は新たに登場したものです。きっとユーザに気に入られるでしょう。これはレイアウト用に特別に作られたdisplayプロパティです。さらには、この先、 grid がまもなく私たちの秘密兵器となるでしょう（現在、盛んに取り組まれています）。これもまた、レイアウトに特化したプロパティです。 本記事は、当初予定していたよりもずっと長くなりました。ご希望に応じて、自由にサブセクションに飛んでお読みいただければと思います。もし、お時間を割いて全体を読んでいただけるのでしたら、大変嬉しく思います???? 目
CSSコーディングテクニック : 詳細度、単位、flexbox、mixin | POSTD
(2016/7/15、記事を修正いたしました。) 最近、ビギナーからベテランのデベロッパに至るまで、CSSに手を焼く人を多く見かけます。そうした人たちの中には、CSSの機能を好まず、別の言語を使った方がいいのではないかと考えている人もいます。もともと、CSSのプロセッサもこうした考え方から生まれました。書くべきコードを少なくできることを期待して（ 以前の記事で ご紹介しているとおり、普通はそうではありません）CSSのフレームワークを使う人もいれば、CSSを完全に見限り、スタイルの指定にJavaScriptを使うという人もいます。 しかし、あなたが取り組んでいるパイプラインにCSSプロセッサをいつも取り入れる必要があるとは限りません。どんなプロジェクトであれ、開始の時点から、膨れ上がったフレームワークをデフォルトに取り込む必要はありません。また、CSSを使うところで、代わりにJavaScri
効果的なフォームをデザインする：構造、入力、ラベルおよびアクション | POSTD
画像の出典：form-ux-tips あなたのアプリやサイトを利用する人々にはある一定の目的があります。そしてその目的を達成するために フォームに 記入しなくてはならないことがよくあります。Webやアプリにおいてフォームは、ユーザにとって未だに最も重要な 種類の操作 であるからです。事実、フォームは目的を達成するまでの 過程における最後のステップ と見なされることも多いのです。 フォームは目的達成の手段にすぎません。迅速に混乱なく、ユーザがフォーム入力を完了させられるようにするべきです。 この記事では、ユーザビリティテスト、フィールドテスト、視線計測（アイトラッキング）、そしてユーザからの実際の不満の声に基づく実用的なガイドラインを紹介します。 フォームの構成要素 一般的にフォームは以下の5つの要素から構成されます。 構造 。フィールドの順番、ページの外観、各フィールドとの論理的な関連付け
誰もあなたの製品を使いたいと思ってはいない : 製品をデザインするための考え方 | POSTD
毎朝、デザイナーは目が覚めると、喜んで自分の製品に取りかかります。それがデジタル製品であっても物理的な製品であっても、デザイナーは心の中で、人々が自分の製品を使いたがるようになり、楽しんで使うようになると信じているのです。 それはやや一般論かもしれません。しかし、私たちはデザイナーとして、自然と 自分が取り組んでいる各プロジェクトを最高のものにし 、革新的なものにして、そして何より、違いをもたらしたいと考える傾向があります。 ああ、私の製品は素晴らしい物になるはずだ。機能やオプション、設定が充実している。みんなが毎日その製品を使い、愛用するようになるだろう。 – あるデザイナー ここで少し意外な事実をお教えましょう。人々は製品を使用ことにあまり興味はありません。ユーザがインターフェースを操作したり、つまみを回したり、レバーを引いたり、ボタンをタップしたりするのはすべて時間の無駄です。むしろ
6つの簡単なステップで改善するアイコンデザイン | POSTD
私がIconfinderに投稿されたアイコンを検討する時には、デザイナーと顧客に対して、サイトで提供する全てのプレミアムアイコンが最高の品質であるようにする責任を負っています。ですが、「あまり良くない出来」と「プレミアムの出来」の違いはわずかである場合も多く、大体は最小限の変更で済むような差です。この記事では、私のデザインガイドラインを「 アイコンデザインを改善するための6つの簡単なステップ 」としてまとめてみました。これらのステップは適切なアイコンデザインの基礎を示していますが、独断的なルール集ではなくガイドとお考えください。聡明なデザイナーは、どんな状況であれば最大の効果を得るためにこのルールを破ってもよいか、判断できるのです。 以下でご紹介する見本の画像では、Kem BardlyというIconfinderユーザが最近投稿した犬（正確にはコーギー）のアイコンを改訂していきます。このアイ
色彩心理学：マーケティング担当者のための完全ガイド | POSTD
色彩心理学について最も分かりやすく書いている解説書にようこそ。 色の持つ意味のみを知りたい方は、直接 表 へと移ってください。 しかし、この記事では色彩の意味のみならず、日常生活にどのように適用できるかなど色彩心理学を深く掘り下げています。 今までは、色の情報は疑似科学(つまり、逸話的な戯言)によって汚されていました。 このような正確でない情報を正すため、私は色に関する 50もの学術論文 を読み漁り、最終的には、実に信頼性のある興味深い発見をしました。 この記事はそれらをまとめたものです。 PDF ：この記事は6,528ワードです。後で参照できるよう、 PDF版 をダウンロードしてみてください。 （訳注：元記事の同箇所のリンクから名前とメールアドレスを登録することでダウンロードできます。） 私の調査結果を次の表にまとめました（拡大版は表をクリックしてください）。次に色の選択に迷うようなこと
本当にCSSの詳細度は必要なのか | POSTD
(訳注：2016/01/05、頂いたフィードバックをもとに記事を修正いたしました。) まず、初めに言っておきたいことがあります。この記事は、私がどれほど詳細度を嫌っているのかを延々と書いたもの ではない ということです。もしそのような内容の記事を読みたいのであれば、インターネットで探してください。たくさんあるはずです。 この記事の目的はWeb開発コミュニティにただ質問を投げかけることですので、その答えを考えてもらえれば嬉しいです。 問題の核心を突くために、質問を言い換えてみましょう。「 カスケードに詳細度が追加されていない世界の方が良かったのでしょうか、悪かったのでしょうか。 」 もちろん、この質問を見て、 どうでも良いでしょうとか、詳細度は存在するのだから我慢するしかない、考える必要はないだろう と思う人がいることでしょう。 そう思っている人に、このような考えは正しくないということをお知
分かりやすいWeb入力フォームのための十戒 | POSTD
1. 各々の入力欄に、常に見えて分かりやすいラベルを付けよ 記入する前の入力欄にだけ、フォームのラベルを表示するのがWebデザインの主流になっています。これはユーザネームやパスワードなどを入力する際にはシンプルで使い勝手がいいのですが、それ以上に長い文字列になると少々勝手が悪くなります。 そのため余白があるのであれば、ラベルを表示すべきです 特に、長いフォームの場合では、ユーザは入力したものを見直すでしょう。どのラベルが入力欄と合致するのか分からなければ、間違いがないよう見直すことなどできるはずがありません。 改善前:入力欄中にラベルが記入してあります。今は見やすいかもしれません。 しかしフォームに入力するとラベルが見えなくなってしまい、間違いを見つけにくくなってしまいます。 改善後:それぞれの入力欄に、クリアでいつでも見えるラベルを付けましょう。 2. 十分な大きさのフォントを使用せよ
色弱のユーザーにもやさしいランディングページのデザイン | POSTD
私がバックエンドでいくつかの新機能を開発している間に、Fannyが我々のホームページの再デザインで非常にいい仕事をしてくれました。それ自体についてはまた別の記事で書くことにするのですが、それまでの合間に、我々のホームページの最初のバージョンに関するひとつの 逸話 をシェアしたいと思います。 Elokenzのホームページ(Ver.1) 私が最初にホームページをデザインしたとき、こういった仕事をどのように行うかという経験が本当に全くありませんでした。私は腕まくりをして、 Bootstrap を使って一からその制作を始めました。そのとき気に留めていたことは、 Oli Gardner が コンバージョンにフォーカスしたデザイン について述べた Unbounceの電子書籍 からのTipsだけでした。 そのため、ホームには気を散らしてしまうような要素を配置しないようにし、コントラストの高い2つのCal
バッドUIを改善する方法 ― UIの「5つの状態」を考える | POSTD
(訳注：2020/08/22、画像と動画が正しく表示されていなかったためリンクを修正しました。) こんにちは。このブログは12月にO’Reillyから出版予定の私の著書『 Designing Products People Love 』からの抜粋です。ぜひ本も読んでみてください。また、FacebookやTwitter、 Slackなどで活躍されている20人以上のプロダクトデザイナーにインタビューもしています。* 無味乾燥なUIを経験したことはありますか？ 何か が足りないと感じてしまうようなUIを作ってしまったことはありませんか？ もしそうであれば、使い勝手の悪いUIを経験したのだと思います。 使い勝手の悪いUIには進捗インジケータがありません。ユーザにどこで障害が起きたのか知らせてくれません。怖いエラーメッセージでも表示してくれれば、なお良いのですが。わずかなデータのみの奇妙なグラフです
シンプルの心理学 ― 心地良いデザインのために | POSTD
私たちの誰もが理解する”シンプル”という概念の正体を突き止めることは、難しそうに見えますが、実はそうでもありません。 私たちが製品やWebサイトをシンプルと感じるかどうかの背景には、”見れば分かる”ということだけではなく、単なる直観的な反応にとどまらない何かがあります。 Steve Jobs は次のように述べています。 シンプルであることは、複雑であることより難しい場合がある。物事をシンプルにするためには、思考を整理して懸命に考えなくてはならない。しかし、努力する価値はある。ひとたび達成すれば、山をも動かすことができるのだから。 シンプルにものを作ることにそんなに力があるのであれば、なぜ私たちはそうできないのでしょうか。 なぜシンプルであることは、こうも複雑なのでしょうか。 人生における多くの事柄と同じように、シンプルさには表面的に見えている以上の何かがあります。ここでは、私たちの脳が新し
楽しく役に立つCSSのプロファイリング | POSTD
私はここ最近、いわゆるシングルページWebアプリケーションのパフォーマンスの最適化に取り組んでいます。そのアプリケーションは非常に動的かつインタラクティブで、新しいCSS3の利点が詰め込まれたものです。単に角丸やグラデーションの効果にとどまらず、影やグラデーション、要素の変形がふんだんに使われており、加えてtransition効果（時間的変化）や多彩な半透明色、疑似要素をベースにしたCSSの巧妙なトリック、それに実験的なCSSの特徴がちりばめられています。 分析する際には、Javascript/DOM側のボトルネックだけではなく、CSSの領域にも踏み込んでみました。上に挙げたすばらしいUIの要素が、パフォーマンスにどのような影響を及ぼしているかを見たかったからです。このアプリケーションのベースにあるJavascriptのロジックは以前（表面的な装飾のないバージョン）からさほど変わってはいま
ノンデザイナーのための25のグラフィックデザインのコツ | POSTD
>このコツを大いに活用してグラフィックデザインに挑戦してみてください！ ソーシャルメディア向けのデザインからイベント用の招待状まで、どんなデザインであろうと使えるグラフィックデザインのアプリはたくさんあります。 ペアリングフォントやスケールから行揃えやホワイトスペースまで、デザインの世界は複雑な面を持ちます。この25のグラフィックデザインのコツが、創作過程のあれこれを通してあなたの手助けになるでしょう。 各項目をイメージした画像をクリックして、 独自のデザイン に編集してみましょう。楽しいデザインを！ 01. フォント頼みをやめて、書体を制限してみる このデザインを編集してみる シンプルかつ効果的なグラフィックデザインのために読みやすいフォントを使いましょう。いくつもの書体を使用したデザインは読みづらいものです。統一されたフォントを使うようにしましょう。 ここではAileronのフォントフ
優れたプログラマに対しての、管理職への昇進以外のキャリアパス | POSTD
あなたは、これからキャリアを切り拓こうとしている素晴らしいエンジニアたちを抱えています。チームは優れた成果を出して成長し続けているので、何らかの具体的な方法で賞賛したいと考えています。すぐに思いつくことは、特にエンジニアたちがそのチーム内ですでに事実上リーダーの役割を果たしている場合には、彼らにチーム内での役職を与えて昇進させることでしょう。でもその報酬は、本当にエンジニアたちが望んでいるものでしょうか？ もしかしたら彼ら自身も、昇進は望むべきもの、と思い込んでいるだけではないでしょうか？ 人材マネジメント力は別のスキル エンジニアの世界では、エンジニアたちが技術面ではピークに達した後に、これまで習得したものとは全く別の、社交面だとかソフト面におけるスキルを学ぶよう求められることがよくあります。これらは、エンジニアたちが過去のキャリアではほとんど気にしていなかったものです。このようなスキル
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
