フロントエンドパフォーマンスのチェックリスト2021年版（PDF、Apple Pages、MS Word）-後編 目次＃ 前編 準備段階：計画と指標 パフォーマンスを重視する文化、Core Web Vitals、パフォーマンスのプロファイル、CrUX、Lighthouse、FID、TTI、CLS、端末。 現実的な目標の設定 パフォーマンスバジェット、パフォーマンス目標、RAILフレームワーク、170KB/30KBバジェット。 環境の定義 フレームワークの選択、パフォーマンスコストの基準設定、Webpack、依存関係、CDN、フロントエンドアーキテクチャ、CSR、SSR、CSR + SSR、静的レンダリング、プリレンダリング、PRPLパターン。 中編 アセットの最適化 Brotli、AVIF、WebP、レスポンシブ画像、AV1、アダプティブメディア読み込み、動画圧縮、Webフォント、Goog

あなたが知らない既存機能があるかもしれません！ マイクロソフト社は2006年、Microsoft Officeの新バージョンで追加してほしい機能について、顧客調査を実施しました。驚いたことに、ユーザが希望した機能の90%以上はすでに実装されており、その存在が知られていないだけであることが判明しました。機能の「見つけにくさ」の問題の解決策として同社が考案したのが、現在のMicrosoft Office製品でおなじみの「リボンUI」です。 この問題はOfficeに限ったものではありません。日々使用するツールの機能をすべて把握している人はほとんどいません。PostgreSQLのように大規模なツールであればなおさらです。数週間前にPostgreSQL 14がリリースされたばかりなので、この機会にPostgreSQLのあまり知られていない機能に注目してみたいと思います。 この記事では、Postgre

クイックサマリー ‐ Webフォントは往々にしてWebのパフォーマンスをひどく低下させており、この問題に対して特に効果的なフォント読み込みの戦略は存在しません。しかし、今後公表されるフォントのオプションによって、フォールバックフォントを最終的なフォントに合わせやすくなるかもしれません。 フォントの読み込みはWebのパフォーマンスにとって長年にわたる悩みの種であり、これを解決する良い方法はありません。Webフォントを使用する場合は基本的に、フォントをダウンロードするまでテキストが表示されないFOIT（Flash of Invisible Text）か、最初はフォールバック用のシステムフォントを使用し、ダウンロードが済んだらWebフォントに更新するFOUT（Flash of Unstyled Text）のどちらかを選ぶ必要があります。正直に言って、どちらの選択肢もあまり満足の行くものではなく、

クイックサマリー ‐ 私たちは一連の短い記事で開発者とデザイナーにとって有用なツールやテクニックを紹介しており、直近の記事では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

RESTの規約。URLはリソースであり、CRUDはHTTP動詞にマップされる。 RESTの規約に1つ問題があるとすれば、規約が十分でないということでしょう。上記で”通常”、”多くの場合”、”時に”という表現を使ったのは、これらのやり方は仕様で推奨されているものの守られるとは限らないためです。実世界では、大抵のAPIはRESTishがせいぜいです。例えばStripeでは、リソース更新に PUT ではなく PATCH を使うべきですが、歴史的理由でそうはなっておらず、おそらく現時点では変更に値しないでしょう。いずれにしても開発者はドキュメントを読む必要があり、その時、 POST メソッドのユビキタスな使い方があることに気づくのです。 RESTには他の問題もあります。必要なものだけでなく全てが返ってくるため、リソースのペイロードが非常に大きくなることがあるのです。そして多くの場合、クライアントが

最近、Amazonのエンジニア採用担当者から連絡を受けました。Amazonは、ベルリンオフィスのチームのソフトウェアエンジニアの採用面接をしていたのです。 連絡を受けてから契約書にサインするまでのプロセス全体は、2カ月でした。採用プロセスで経験したことと、私が合格できた理由として思い当たることをお知らせしたいと思います。 この記事で、もし私が何か重要なことに触れ忘れていたら、ぜひコメント欄に書いてください。出来る限りの詳細を回答に書きます。 4月27日：最初の連絡 採用担当者からの連絡は、 LinkedIn 経由でした。ベルリンオフィスのチームのソフトウェアエンジニアを募集しているので、もし興味があれば、最新のレジュメを送って欲しいとのことでした。私は、常にレジュメを最新にしていたので、翌日、Eメールに添付して送りました。 彼女からの返信には、募集しているソフトウェアエンジニアの役割と面接

ここで論じているのは、オーディオアプリの開発者が陥りがちな 4つの間違い 、 より良く開発する方法 、 問題個所の発見方法 です。主に開発者向けの内容ですが、開発者以外の方にも知っておいてもらいたいと思います。ここでは、開発者向けの診断ツールである Realtime Watchdog を紹介し、 人気のあるオーディオライブラリの調査結果 を提示します。 オーディオアプリの開発はとてつもなく楽しいです。やりがいを感じるし、創造力を発揮できる範囲が大きく広がり、ひとたび開発が終われば、 誰かがクリエイティブなツールとして使ってくれるのです！ こんな分野は多くないし、この領域で働けるなんて非常に幸運だと自分でも思っています。 しかし、仕事でオーディオアプリを扱う時には深く考えなければならない部分もあります。オーディオアプリの開発者としてユーザに対する責任があるのです。大前提として、ユーザを公共の

私はpingが大好きです！簡単に使えて、ネットワークが稼働しているかを直接明らかにできます。 「 Pingはセキュリティの欠陥ではない!(むしろ友達である) 」、「 Traceroute上級 」の記事をご参照ください。少なくとも、外行きのping(trust(=信頼されるゾーン)からunstrust(=そうでないゾーン)へ)はセキュリティ上の心配なしに用いられるべきです。しかし、これらのuntrustからDMZへのICMPエコー・リクエストは多くの会社で拒否されているため、すべてのサーバが起動・稼働しているかをテストするのが困難になっています。 私は、顧客のサイトのDMZファイアウォールの置き換えに取り組んでいました。当然ながら私は「すべてのサーバが適切に接続されているか(NAT)」「ファイアウォールが接続を許可しているか(ポリシー)」を(外部から)知ろうとしました。 そこで私は、さまざま

(編注：2016/5/31、頂いたフィードバックを元に記事を修正いたしました。) larry wall 怠慢と勤勉 コンピューティングにおいて、”laziness(怠惰)”は幅広い意味の単語です。大抵は、もし必要が無ければ何もしないということを意味します。その正反対を指すのは”eager(勤勉)”です。後で必要になる場合に備えて、できるだけ働くということを意味します。 以下のJavaScriptを見てみましょう。 function ifThen (a, b) { if (a) return b; } ifThen(1 === 0, 2 + 3) //=> undefined ここで、問題です。「JavaScriptは 2+3 を評価する？」答えはお分かりですね。「評価する」です。呼び出し関数に、引数を引き渡すこととなると、JavaScriptは eager(勤勉＝先行評価) で、式の全てを

ソフトウェア開発の原点は可能性の追求であり、不可能を可能にすることです。ひとたび ソフトウェア が開発されると、エンジニアは次に 程度 という課題に向き合うことになります。企業向けのソフトウェアであれば、「速度はどれくらいか」と頻繁に問われ、「信頼性はどの程度か」という点が重視されます。 ソフトウェアのパフォーマンスに関する質問に答え、さらには正しい内容を語る上で欠かせないのが統計学です。 とはいえ、統計学について多くを語れる開発者はそうはいません。まさに数学と同じで、一般的なプロジェクトで統計学が話題に上ることなどないのです。では、新規にコーディングをしたり、古いコードのメンテナンスをしたりする合間に、手が空くのは誰でしょうか？ エンジニアの方は、ぜひ時間を作ってください。近頃は、15分でも貴重な時間と言えるでしょうから、 こちらの記事をブックマークに追加 しておいてもいいでしょう。とに

私がどのようにして180日で180個のウェブサイトを作り、YC フェローシップ・ファウンダーになったか 私はY Combinatorの2016冬季フェローシップに選ばれたスタートアップのテクニカル・ファウンダーです。たった3年前にはコーディングのことを全く知らなかったことを思うと、すこしシュールにも感じられます。この記事は、私はどのようにして現状に至ったのか、そこから何を学んだかのストーリーです。 180日で180個のウェブサイト – 背景となる話 私は、180日で180個のウェブサイトを作ることでコーディングを独習しました。1日1サイトの設立で、私の6か月は完全に費やされました。「このプロジェクトに挑むために私が仕事をやめた」という事を聞くと人はよく驚きましたが、私が仕事をしながらコーディングを学ぶ方法はないという事を私は分かっていたのです。 私はかつてある種の…ファインアーティストでし

(前編はこちら： 2016年、C言語はどう書くべきか (前編) ) (編注：2020/08/18、いただいたフィードバックをもとに記事を修正いたしました。) システム依存の型 まだ「32 bitのプラットフォームでは32 bitのlong型、64 bitのプラットフォームでは64 bitのlong型がいい」という不満があるようですね。 プラットフォームに依存する2つの異なるサイズを使うため、 故意に コードを難しくすることを考えたくなければ、システム依存の型のために long を使おうとは思わないでしょう。 この状況では、プラットフォームのためにポインタ値を保持する整数型、 intptr_t を使うべきです。 モダン32-bitプラットフォームでは、 intptr_t は int32_t です。 モダン64-bitプラットフォームでは、 intptr_t は int64_t です。 int

今年からAWS（Amazon Web Services）クラウドコンサルタントとして、中小規模のAWSデプロイの相談を受けています。その多くは典型的なWebアプリケーションです。ここで、ぜひ避けたい5つのよくある間違いを紹介します。 インフラストラクチャを手動で管理する。 Auto Scaling グループを使わない。 CloudWatchのメトリクスを分析しない。 Trusted Advisorを無視する。 仮想マシンを活用しない。 典型的なWebアプリケーションにおける間違いを防ぎたい人は、次に進んでください。 典型的なWebアプリケーション 典型的なWebアプリケーションは最低限次の要素で構成されているものを指します。 ロードバランサ スケーラブルなWebバックエンド データベース そしてこのアプリケーションは、次の図のような仕組みを持っています。 注釈：（左から）DNS、CDN、静

(訳注：2016/01/05、頂いたフィードバックをもとに記事を修正いたしました。) まず、初めに言っておきたいことがあります。この記事は、私がどれほど詳細度を嫌っているのかを延々と書いたもの ではない ということです。もしそのような内容の記事を読みたいのであれば、インターネットで探してください。たくさんあるはずです。 この記事の目的はWeb開発コミュニティにただ質問を投げかけることですので、その答えを考えてもらえれば嬉しいです。 問題の核心を突くために、質問を言い換えてみましょう。「 カスケードに詳細度が追加されていない世界の方が良かったのでしょうか、悪かったのでしょうか。 」 もちろん、この質問を見て、 どうでも良いでしょうとか、詳細度は存在するのだから我慢するしかない、考える必要はないだろう と思う人がいることでしょう。 そう思っている人に、このような考えは正しくないということをお知

この記事では、シンプルなTodoアプリのAngular 1のコンポーネントを、Angular 2のコードにアップグレードする方法を見ていきます。APIの違いや文法のテンプレートを比較することで、それがAngular 2へのアップグレードに何らかのヒントを与え、難しさが軽減すると感じてもらえることを願っています。 注意：Angular 2は、まだ”アルファ”の状態なので、APIやこれまでの技法は変化するかもしれません。しかし、この記事は残し、コードをアップグレードしていくつもりです。 Angular 1..x Todoアプリ この小さなコンポーネントを、Angular 2で書き換えてみます。まずは、このアプリの機能は以下の通りです。 Todoリストにアイテムを追加する アイテムを削除する機能がある アイテムが完了するとマークをつける機能がある 未完了のものと、合計のTodoの数を表示する こ

最近、普段以上にChromeの開発者ツールを使うことに時間をかける機会がありました。その過程で、自分が今まで気づいていなかった機能をいくつか見つけました（少なくとも今までその機能を探す必要に迫られていなかった、とも言えるのですが。例えばブラックボックス化や非同期のスタックトレースなど）。そのため、開発者ツールでとても気に入っているいくつかの機能についてまとめてみたくなったのです。 小さな虫眼鏡ののアイコンは、特定の要素やCSSプロパティに対して、「どのCSSファイルに書かれているどのセレクタ/クラスが最終的なスタイルを決めているか」を示してくれます。例えば、どれかDOM要素に対して「要素を検証」を選び、右側の「Computed」というタブを選びます。確認したいCSSプロパティを見つけてその虫眼鏡アイコンをクリックすることで、すぐさま右側に正しいCSSファイル内のクラス/セレクタを表示してく

(訳注：2015/11/4、いただいた翻訳フィードバックを元に記事を修正いたしました。) 8月の初めに、モントリオールでディープラーニングのサマースクールに参加することができました。サマースクールは10日間にわたるもので、著名なニューラルネットワークの研究者の講演で構成されていました。この10日間で、私は1件のブログ投稿にはまとめきれないほど多くの事を学びました。ここで私は、60時間で得られたニューラルネットワークの知識をそのままお伝えしようと試みるのではなく、1パラグラフに要約できるようなちょっとした面白い情報のリストを作ることにしました。 これを書いている現在、 サマースクールのウェブサイト は現存しており、全てのプレゼンテーションのスライドが載せられています。全ての情報とイラストはこれらのスライドから利用しており、権利はそれぞれのオリジナルの著者に帰属するものです。またサマースクール

スケーリング＝時速160㎞で走行しながら自動車の全ての部品を取り替えること －Mike Krieger　 Instagramの共同設立者＠ Airbnb OpenAir 2015 Airbnbのピーク時のアクセス数は、毎年夏のピーク時で見ると年率3.5倍で増加しています。 2015年夏の旅行シーズンを前に、Airbnbの基盤チームは、夏季のアクセスで予想されるデータ通信量に対処するため、データベースのスケーリングで忙殺されていました。中でも特に全体への影響が大きかったプロジェクトが、特定のテーブルを、アプリケーションの機能に従ってそれぞれのデータベースに分割することを目的としたプロジェクトでした。これは通常、アプリケーション層のフォームの変更やデータ移行、データの整合性を保証する堅牢性テストなど、最小限のダウンタイムで多大な技術的投資を必要とするものです。何週間もかかるエンジニアリング時間

主観的な観点からPythonとRの比較した記事は山ほどあります。それらに私たちの意見を追加する形でこの記事を書きますが、今回はこの2つの言語をより客観的な目線で見ていきたいと思います。PythonとRを比較をしていき、同じ結果を引き出すためにはそれぞれどんなコードが必要なのかを提示していきます。こうすることで、推測ではなく、それぞれの言語の強みと弱みの両者をしっかりと理解できます。 Dataquest では、PythonとRの両方の言語のレッスンを行っていますが、データサイエンスのツールキットの中では両者ともそれぞれに適所があります。 この記事では、NBA選手の2013/2014年シーズンの活躍を分析したデータセットを解析していきます。ファイルは ここ からダウンロードしてください。解析はまずPythonとRのコードを示してから、その後に2つの異なるアプローチを解説し議論していきます。つま

(訳注：2015/10/31、いただいた翻訳フィードバックを元に記事を修正いたしました。) 開発者は嫌うでしょう。 ここでは、標準的なコツや策略について書きますが、本当に興味があるのは、別のことです。究極の奇策を見つけたいと思います。策略をひとつずつ試して、プログラミングの聖域に少しでも近づければ良いのですが。 はじめに 私が初めて書いたビデオゲームは、 Ninja Wars （忍者戦争）でした。 そう、これは、画像で埋めたHTMLのtableです。 src 属性を変えることで、動きを実現しています。JavaScriptファイルの冒頭は下記のようになっています。 var x = 314; var y = 8; var prevy= 1; var prevx= 1; var prevsw= 0; var row= 304; var endrow= 142; var sword= 296; v