毎月のWeb開発アップデート11⁄2018：ジャストインタイムデザインと可変フォントフォールバック

デザインは、当社の製品とそれらを操作するユーザーの認識にどの程度影響しますか？ 私には、デザインがすべての違いを生むこと、そしてデザインをGoogle Material DesignKitのような標準モデルに統合することはうまく機能しないことが明らかになりつつあります。 もちろん、それを使用することで、技術的な観点から機能するまともなデザインを得ることができます。 しかし、それを使ってユニークな体験、持続する、または個人レベルで人々に届く体験を作成することはできません。

次に、どのWebサイトにアクセスするかを考え、そこにいることを楽しんでいる場合は、サービスを読んだり、コンテンツを提供したりします。 私の意見では、それはInstagramが非常にうまくやっているものです。 優れたデザインはあなたの会社の目的に適合し、訪問者が期待するものに適応し、訪問者がどこにいても快適に感じ、製品とつながることができるようにします。 ただし、標準的なソリューションは便利で便利な場合がありますが、常に匿名の感覚を持っているため、人々があなたの製品を本当に気にかけることはできません。 より良い体験を形作るのは私たちの手の中にあります。

ニュース

• はい、Firefox 63はここにありますが、それは何をもたらしますか？ 拡張機能とShadowDOMが組み込まれたカスタム要素を含むWebコンポーネントのサポート。 prefers-reduced-motionサポートも利用できるようになりました。デベロッパーツールには、ウェブタイポグラフィの操作を簡単にするフォントエディタが用意されており、アクセシビリティインスペクタはデフォルトで有効になっています。 img要素は、 sync 、 async 、またはautoの値を取得して、ブラウザーに優先デコードタイミングを示唆できるdecoding属性をサポートするようになりました。 Flexboxにもいくつかの改善が加えられ、 gap （ row-gap 、 column-gap ）プロパティがサポートされるようになりました。 最後になりましたが、Media Capabilities API、Async Clipboard API、およびCSP違反を送信できるSecurityPolicyViolationEventインターフェイスも追加されました。 うわー、なんてリリースだ！
• React 16.6がリリースされました—それは大きなニュースのようには聞こえませんね。 さて、このマイナーアップデートはReact.lazy()をもたらします。これは、 React.lazy()の呼び出しで動的インポートをラップすることでコード分割を行うために使用できるメソッドです。 パフォーマンスを向上させるための大きな一歩。 このアップデートには、他にも便利な新しい機能がいくつかあります。
• 最新のSafariTech Preview 68は、 <input type="color">をサポートし、 target="_blank"を持つリンクのデフォルトの動作を変更して、暗黙の属性としてrel="noopener"を取得します。 また、開発者がWebサイトをmacOSのライトモードまたはダークモードの設定に適合させることができる、新しいprefers-color-schemeメディアクエリも含まれています。
• 今後、PageSpeed Insightsは、おそらくGoogleで最も一般的に使用されているパフォーマンス分析ツールであり、多くの人がすでに追加で使用しているプロジェクトLighthouseを利用しています。 ツールの優れたイテレーションにより、以前よりもはるかに正確になります。
  

全般的

• 構造化された学習パスを探索して、最新のWebの構築について知っておく必要のあるすべてを発見してください。 web.devは、開発者向けのGoogleWebチームによる新しいリソースです。
• Apple Mapsについてどのように感じても（私たちのほとんどはApple Mapsに不満を感じていると思います）、これまで使用していたMapsデータと、改良されたMapsのために現在収集しているデータについてのこの比較は魅力的です。 詳細レベルの向上は、世界中の多くの人々に役立つと確信しています。 たとえば、ランドスケープアーキテクトがこれをどのように利用できるか、または地震後にレスキューヘルパーがその詳細レベルからどのように利益を得ることができるかを想像してみてください。

HTMLとSVG

• Andrea Giammarchiは、Safariの組み込み要素を拡張できるカスタム要素のポリフィルライブラリを作成しました。 これは、独自のカスタム機能を使用してネイティブ要素を拡張できるので非常に便利です。これは、ChromeとFirefoxですでに機能しており、他のブラウザーにもこの小さなポリフィルがあります。
• カスタム要素はまだ非常に新しく、ブラウザのサポートはさまざまです。 そのため、このhtml-parsed-elementプロジェクトは、信頼性の高いparsedCallbackメソッドを備えた基本カスタム要素クラスを提供するので便利です。

JavaScript

• Leonardo Maldonadoは、開発者にとって非常に役立つJavaScriptの概念のコレクションをまとめました。 リストにはビデオと記事の両方が含まれているため、好みの学習方法を選択できます。
• ビデオがWebサイトで機能しなくなり、Service Workerを使用している場合、問題はRangeリクエストにある可能性があります。 Phil Nashは彼のページでこの奇妙な問題をデバッグし、あなたもその方法を説明しています。

UI / UX

• どのようにカラーパレットを作成しますか？ RefactoringUIのSteveSchogerは、実際のニーズを満たす優れたアプローチを共有しています。
• MatthewStromの記事「Just-in-timeDesign」では、製品設計と製品エンジニアリングの間の断絶を最小限に抑えるためのソリューションについて言及しています。 それは、設計にジャストインタイム方式を採用することです。 私の現在のチームが非常に興奮していたこと、そして私はそれを試してみてうれしいです。
• HolaBriefは有望に見えます。 これは、デザインブリーフの作成方法を改善し、プロセス中に全員が同じページにいるようにするツールです。
• メンタルモデルは、私たちが世界をどのように見ているかを説明するものです。 Teresa Manは、メンタルモデルを製品設計に適用する方法とそれが重要である理由について書いています。
• Shelby Rogersが、より良い404エラーページを作成する方法を紹介しています。

ツーリング

• カラーパレットジェネレーターPalxを使用すると、基本の16進値を入力し、それに基づいてフルカラーパレットを生成できます。

安全

• このきちんとしたPythonツールは、優れたXSS検出ユーティリティです。
• Svetlin Nakovは、無料で入手できる開発者向けの実用的な暗号化に関する本を書きました。 秘密鍵/公開鍵、ハッシュ、暗号、または署名がどのように機能するかを理解または知りたい場合は、ここから始めるのが最適です。
• Facebookは、誰が政治広告にお金を払っているのかを明らかにすると主張した。 現在、VICEはこの新機能を調査し、現在の100人の米国上院議員全員が「彼らによって支払われた」広告を掲載するように装いました。 ユーザーに意図したとおりの力を与える1つのセキュリティ障害が、世界の政治をどのように変えることができるかを見るのはかなり怖いです。

プライバシー

• 有料の制限付き記事にリンクするのは好きではありませんが、これは私に考えさせてくれました。あなたは私をフォローするために完全なストーリーを必要としません。 テスラがモデル₃の生産を^24⁄7に増やすと発表したとき、多くの人がこれを確認したいと考えていました。ジオロケーションデータを提供することで収益を上げている企業は、テスラ工場周辺の労働者からスマートフォンの位置データを取得して、これは本当かもしれません。 個人の追跡よりも大量監視の場合であるにもかかわらず、同意なしに誰かを追跡することがいかに簡単であるかについてのもう1つの悲しい話。

Webパフォーマンス

• Addy Osmaniは、ストリーミングサービスのインタラクティブ化までの時間を改善するためのNetflixのパフォーマンスケーススタディを共有しています。 これには、Reactおよびその他のライブラリからプレーンJavaScriptへの切り替え、HTML、CSS、および（React）JavaScriptのプリフェッチ、およびサーバー側でのReact.jsの使用が含まれます。 非常に多くの型破りなアプローチとその利点を見るのは非常に興味深いです。 ただし、他の人に役立つものがプロジェクトにとって完璧なアプローチである必要はないことを忘れないでください。盲目的にコピーするのではなく、インスピレーションとして取り入れてください。
• ハリーロバーツは、CSSとネットワークパフォーマンスについて知っておくべき重要なすべての詳細を説明します。 コードにasyncスクリプトがある場合の非常に興味深いヒントも提供する包括的なコレクション。
• Web配信用に画像をバッチ最適化するための小さなImageOptimアプリが大好きです。 しかし、今では「Squoosh」と呼ばれる印象的なWebアプリがあり、Webブラウザーで画像を完全に最適化できます。また、ボーナスとして、画像のサイズを変更したり、mozJPEGやWebPなどの圧縮を選択したりすることもできます。 GoogleChromeチームによって作成されました。

CSS

• Oliver Schondorferは、古いブラウザーにフォールバックWebフォントを提供しながら、最新のブラウザーに可変フォントを提供する方法を示しています。 これは、Oliverがフォールバックフォントの最適化とCSSを介した調整に深く関わっており、ページの読み込み中にフォントスワップが発生した場合に備えて、可変フォントにできるだけ一致させるために特に興味深いものです。
• Andy Clarkeは、最近いくつかのオペレーティングシステムに導入され、まもなくさまざまなブラウザによるメディアクエリでサポートされる明るいモードと暗いモードをサポートするために、製品とWebサイトを再設計するために必要なものを示します。
• background-clipはそれほど新しいものではありませんが、ブラウザがサポートされていないため、あまり役に立ちませんでした。 しかし、Sime Vidasが示すように、CSSバックグラウンドクリップは現在広くサポートされており、Webサイトのテキストスタイルを強化する絶好の機会を与えてくれます。

仕事と生活

• Stig Brautasetは、愚かな雇用規則のために潜水艦ソナーオペレーターとしての仕事に就けなかった理由と、状況を最大限に活用して成功した方法について書いています。 人を雇うことに関しては、ガイドラインやルールに固執するべきではなく、自分の内臓を信頼し、代わりに彼らの話を聞くべきであることを示す貴重な教訓。
• 「ロボットではなく人：人類をカスタマーサポートに戻す」で、Kristin Aardsmaは、カスタマーサポートがどのように機能するかを再考することが重要である理由を説明しています。
• マーカス・ウェルマスは、マネージャーになることが昇進ではなく転職である理由を振り返ります。

超えて…

• スティーブ・ジョブズ、創造性と死、そしてなぜこれが人生にとって良い話であるかについてのニール・スティーブンソン。 スティーブ・ジョブズをコピーすることはおそらく良い考えではありませんが、ニールは私たちがどのように働きたいか、私たちの生活をどうするか、そしてなぜ私たちの多くにとって目的が重要であるかについていくつかの異なる角度を提供します。
• ライアン・ブローデリックは、インターネットを発明することによって私たちがしたことを振り返ります。 彼は、世界のすべての急進主義、それらの奇妙な政治的見解はすべて、ソーシャルメディア、チャットソフトウェア、および私たちの社会で起こっているすべての悪いことを促進し受け入れるという（それほどサブではない）文化の発明によるものであると結論付けています。 4chan、Reddit、および同様のサービスだけでなく、Facebookなども覚えていますか？ 彼らは、良いアイデアだけでなく、しばしば愚かな、あるいは有害なアイデアに貢献し、それを受け入れます。 「これが私たちが世界を急進化させた方法です」は、読むのは悲しい話ですが、よく書かれており、テクノロジーを通じて社会をどのように形作るかについて多くの刺激的な考えがあります。
• 申し訳ありませんが、これはビットコインのエネルギー消費に関する別のリンクですが、ビットコインマイニングだけで2033年までに世界の気温が臨界限界（2°C）を超える可能性があることを示しています。この非効率的なタイプの暗号通貨を放棄する時が来ました。 今。
• 荒野は特別なものです。 そして、この記事が説明しているように、私たちの惑星にはますます少なくなっています。 この地図は、最近、荒野がたくさんある国はごくわずかであり、希少な動物や種に住む場所を与え、人間に自然を探索し、リラックスし、冒険に出かける方法を与えていることを示しています。
• 私たちは間違いなくエキサイティングな時代に生きていますが、過去40年間で野生生物の個体数が60％減少したことを読んだとき、私は悲しくなります。 それはかなり大規模で、これが続けば、私が年をとったとき、世界は別の場所になるでしょう。 そうです、私が年をとると、自然界で知っていて見た動物はもうたくさん存在せず、次世代の人間は美術館以外では見ることができなくなります。 その理由は完全には明らかではありませんが、気候変動は1つのことかもしれません。また、野生生物地域への人間の拡大は、おそらくそれにも大きく貢献しています。