前週のフロントエンドの世界からの新鮮な材料のダイジェストNo. 291（2017年11月27日-12月3日）

フロントエンドエリアとその周辺の新しいマテリアルへのリンクを含むセレクションをご紹介します。

メディア | Web開発 | CSS | Javascript | ブラウザ | おもしろい

---

メディア

• フロントエンドウィークエンドポッドキャストFW＃30-レイアウトデザイナーからプロダクトディレクターになる方法に関するEvgeny Rodionov

• Web標準ポッドキャスト、 問題番号97：EdgeとChrome、FirefoxとWebコンポーネント、CSSウィザード、ポッドキャスト、フォーマット、サポート

• Devschachtポッドキャスト： ナイトフロントエンド＃13 —ダーツ、ポリマー、自転車

• フロントエンドユース（18+）ポッドキャスト＃28 React Breaksおなら

• ポッドキャスト「Drinkcast」、 ＃ 19-「 祝福されたJavaScript」

• 「すべてのHTML」＃25： 「すべてのHTML、3D、three.jsの線で写真を描く」

ウェブ開発

• フロントエンドテストの概要

• 生産のバグ-最も人気のあるダースダース

• 静的サイトの使用を開始する方法-ジェネレーターの概要

• フロントエンドのチェックリストは単なるツールです...それはすべてあなた次第です

• トップWebデザインおよびWeb開発ポッドキャスト

• 性能：
  
  • 知覚としてのパフォーマンス：時間の知覚
  
  • GoogleはランキングにTTFBメトリックを使用しません
  
  • 最良のクエリはクエリの不足です。 HTTP / 2の最適化戦略の改訂
  
  • Webサイトのパフォーマンスを向上させる23のツール
  
  • JavaScriptパフォーマンス最適化のヒント
  
  • Intersection ObserverとSQIP Progressiveを使用したプログレッシブ画像の読み込み
  
  • HTTP / 2 PUSHまたはHTTPプリロード
  
  

• AMP / PWA：
  
  • AMPがパブリッシャーおよびeコマースに及ぼす経済的影響の分析
  
  • ブラウザフリーWebの開発（PWAのコンテキストで）
  
  • Addy OsmaniがPinterest用PWAの作成とこの点での生産性の大幅な向上について詳しく説明
  
  

• ツール：
  
  • プロジェクトでeslintを使用する方法（および理由）
  
  • WebStorm 2017.3：Vue.jsのサポートの改善、リファクタリング、新しいRESTクライアントなど
  
  

• アクセシビリティ：
  
  • 2018年に知っておくべきこと：今後の標準準拠の期限とマイルストーン
  
  • アクセシビリティ第一：ウェブサイトのデザインと開発へのアプローチを再考します
  
  • これまでに読んだことがない人のためのWebコンテンツアクセシビリティガイド
  
  • funkifyはChromeの拡張機能であり、多くの視覚障害、運動能力、認知機能をエミュレートできます。
  
  

• アニメーション：
  
  • CSS / SVG / JS＃64の美しいエフェクトの毎週の選択
  
  • FLIPテクニックを使用したレイアウトのアニメーション化
  
  • WebGLの装飾的な背景
  
  • infinitown-手続き的に作成された都市でのWebGL実験
  
  • GLSL：ボロノイオクターブ
  
  

CSS

• 5分でCSSグリッドを学ぶ

• V6のタイポグラフィとプロポーションを構築するロジックについて

• 最新の非同期CSSロード

• メールテンプレートを作成するときに便利なCSSインラインツール

• Web開発のカスケードに機能クエリ（@supports）を使用する

• 中綿に対する綿花の効果の再現方法と、この実験から理解したこと

• CSSとHTMLを使用して、アウトラインとダイアゴナルでワイヤーフレームを生成します

• フレックスによる柔軟なコンテナオーバーフロー制御

• Webのフォントパフォーマンス -SmashingConf Barcelona 2017でのMonica Dinculescuレポート、およびレポートのフォント表示プロパティの簡単な説明

Javascript

• JSの仕組み：WebAssemblyの機能と範囲

• Storybookを使用してコンポーネントライブラリを作成する

• ファンタジーランドへの旅 。 Egor Trubnikov-PanovがJavaScriptプログラミングの機能スタイルとFantasy-land仕様について語っています。

• JSRobot-ゲームをプレイしながらJavaScriptを学ぶ

• V8の投機的最適化の概要

• ES6ヒップスター向けのJavaScriptハッキング

• 完全なJavaScriptインタビューインタビューガイド

• JavaScriptでのエラトステインふるいの実装

• Reactを使用したMobXとRedux：初心者向けの質問と比較

• ECMAScriptへの参加：指示

• VueJS：
  
  • Vue.jsのリアルタイムアプリケーション
  
  • madewithvuejs - vue.jsを使用して作成されたプロジェクトのコレクション
  
  • Vue.jsのスコープスロットを理解する方法
  
  • vuetron -Vue + Vuexでアプリケーションをテストおよびデバッグするためのツール
  
  

• 反応：
  
  • React 16とChrome Devtoolsを使用して、Reactのパフォーマンスをデバッグします。
  
  • React VRの概要
  
  • GiraffQL -Reactで書かれたGraphQLのインタラクティブな没入のためのツール
  
  • React Food Truckの紹介-VSコードのキュレーションされた拡張キット
  
  • reactopt -Reactアプリケーションを最適化するツール。不必要な再レンダリングを引き起こす可能性のある特定のイベントを識別します
  
  

• 角度：
  
  • Angular v4で新しいHTTPクライアントを使用する
  
  • telemachy -Angularアプリケーションのインタラクティブなサイトツアーとしての視覚的合図
  
  • NgUpgradeストーリー：バージョン1.6からAngular 4へのAngularJSアプリケーションの移行
  
  

• ライブラリとプラグイン：
  
  • Classily.js-クラストグル用の小さなプラグイン：常に単純なタスクではない単純なソリューション
  
  • rapid.js-リクエストAPI用のORMのようなインターフェースとルーター
  
  • superstruct -Javascriptでデータを検証するためのシンプルで構成可能な方法
  
  

ブラウザ

• Firefox 58は、「data：」URLへの直接アクセスを許可しません

• Chrome 63-DevToolsの新機能

• Chrome 64-DevToolsの新機能

• すべてのAndroidおよびiOSユーザーが利用できるMicrosoft Edgeモバイルブラウザー

• Microsoft Edge DevToolsの新しい改良されたイベントおよびCSSインスペクター

おもしろい

• Mozillaプロジェクトは、オープンな音声認識システムをリリースしました

• Googleアルゴリズムの更新の説明

• 24プルリクエスト：GitHubの年次オープンソース開発イベント

• HDMI 2.1：新しい標準、新しいケーブル

• 今日と明日の量子コンピューターと量子インターネット

• Stack Overflowでのテクノロジーの人気の急激な上昇と下降

• PhotoshopはAIを使用してオブジェクトをすばやく選択します

• エリックシュミット：医学と科学は、近い将来AIが使用される主要産業です

• イメージボードのパワー：4chanが暴力の温床になった方法

• キリル文字のスクリプト 。 Googleドキュメントとスライドのキリル文字について

• OWASPトップ10-2017-最も重要なWebアプリケーションの10の脆弱性

A.

入力ミスやリンクの破損/重複をおaびします。 あなたが問題に気づいた場合-個人的なメールに書いてください、私たちはすぐにそれらを修正しようとします。

先週のダイジェスト 。

dersmollとalekskorovinが作成した資料。