前週のフロントエンドの世界からの新鮮な材料のダイジェストNo. 290（2017年11月19〜26日）

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

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

---

メディア

• フロントエンドウィークエンドポッドキャスト＃29-アレクサンドラエルモレンコがデザイナーと開発者のやり取りについて
• Web Standards Podcast、 第96号-Firefox 58およびブラウザ互換性、JSモジュール、React + BEM、キャリア、For Web、PublicおよびSmashing Magazine
• Devschachtポッドキャスト： Night Front End ＃12-お金は動機ではない
• Frontend Youth（18+）ポッドキャスト：JavaScriptは、他の人のバイクを思いがけなくコピーするのに最適な言語です
• Drinkcastポッドキャスト問題＃18-みんな、一緒に暮らそう
• 5分間の角度＃6-角度キエフ/ MSK /キャンプ、5.1.0ベータ2、角度要素、アニメーション映画
• 「すべてのHTML」＃24： 「カスタムスクロールおよびcssクリッププロパティ」
• loftblogの新しいDevShow問題： Andrey Sitnik-セックス、アルコール、Loguxについて

ウェブ開発

• アダプティブレイアウト 。 ラバー、アダプティブ、レスポンシブレイアウトの違いは何ですか？ それらを正しく適用する方法は？
• lit-htmlとは何ですか？ lit-html-競合他社またはちょうど別の種類のハンドルバーに反応する
• プログレッシブWebアプリ：PWAの詳細な紹介
• ウェブのローカリゼーションと翻訳
• 一般的なWebアプリケーションのセキュリティの問題、パート1

• 性能：
  • SVGをプレースホルダーとして使用する
  • Webページのレンダリング速度の最適化
  • Yandexは「ターボページ」検索を開始しました-Google AMPとインスタント記事の類似品
  • Chrome DevToolsの新しいパフォーマンスモニター 。 多くのリアルタイムパフォーマンスメトリックを確認できるようになりました
  • GTmetrixブログで説明された最初のコンテンツペイント（FCP）
  • HEIFとは何ですか？また、このJPEG形式を置き換えますか？
  

• 道具
  • 内部とwebpackバンドルの最適化
  • JestとPuppeteer：Web UIテストの自動化
  • stacks-cli-端末からのサイトスタックの視覚分析
  • クリーンマーク - マークダウンテキストへの記事コンバーター
  

• アクセシビリティ：
  • アクセシブルなコンテンツスライダーの作成に関する詳細な説明
  • HTMLメールテンプレートと可用性
  • 手頃な価格のインターフェース設計の提唱
  

• アニメーション：
  • CSS / SVG / JS＃63の美しいエフェクトの毎週の選択
  • シュレッダーRedux - three.js 、 Maf.js 、 dat.guiのインスタンスを使用したシュレッダーポリゴンの実装
  • CSSのTodoリスト内のチェックボックスのクリエイティブなアニメーション
  
  

CSS

• CSS-in-JSについて知る必要があるすべて
• CSSグリッドレイアウトのロジックグリッド、 alistapartのEric Meyerによる記事
• CSSを使用して問題を解決する技術
• コマンド用のCSS
• CSSセレクターとカスタム属性を使用してプロジェクトを更新する
• Atomic CSSの人気の高まりについて
• CSSの最適化：DevToolsによるパフォーマンスアニメーションの微調整
• フォントの読み込み時間を大幅に改善するために23分を費やしたZach Lithermanの物語

Javascript

• JavaScriptの費用はいくらですか？ エディ・オスマニによる「JavaScriptのコスト」の翻訳。
• 調査対象の433,000サイトの77％がJavaScriptライブラリの脆弱なバージョンを使用
• 今年のJSテンプレートに精通しているか、上司のように非同期を処理する方法
• PlainJS-一般的なフロントエンドタスクを解決するためのバニラJSの多くのユーティリティとプラグイン、デモとサンプル
• JavaScriptの正規表現（Regex）の概要
• JavaScriptの仕組み：WebAssemblyとの比較+場合によってはJavaScriptの代わりにJavaScriptを使用したほうがよい理由
• Javascriptでデフォルトのエクスポートを使用することを拒否した理由と、同じことを行う理由
• JavaScript FunctorとMonadの実装

• フレームワーク：
  • Aurelia、Ember、Dojo、Vue、React、Angularの比較と、それぞれの調査結果と賛否両論を含む11の記事からなる一連の出版物
  • 2017年秋時点でのJavaScriptフレームワークの数
  • 最新のフロントエンドフレームワークは、「フレーム」ではなく、「作業」を重視する必要があります。
  • 角度対反応：人気のコンテキストでの比較
  

• 理論：
  • JavaScriptとECMAScriptの違いは何ですか？
  • JavaScriptスロットルの基本
  • JavaScriptのタイプ：それらを気にする必要がある理由
  • 議会のレベルの例による変数の範囲の非標準JavaScript説明
  • TypeScriptで関数型プログラミングを使用して生活を楽にする
  • Try、Throw、Catch、およびfinallyを使用してJavaScriptエラーを処理する方法を学ぶ
  

• VueJS：
  • UnbabelでのAngularJSからVue.jsへのプログレッシブ移行
  • Vue JS、Webpack＆Material Designを使用したプログレッシブWebアプリケーション
  • Vueの使用を開始した方法
  

• 反応：
  • React Basics：始めるために知っておくべきことすべて
  • Advanced React.jsの無料講義
  • Reactでアプリケーションのパフォーマンスを大幅に改善する方法
  • bemto-components 。 ReactでBEM方法論を使用するためのスマートコンポーネント。 スタイル付きコンポーネントに最適です。
  • Node.jsでのサーバー側のReactレンダリングのパフォーマンスオーバーヘッド
  

• 角度：
  • サードパーティライブラリでの角度コンポーネントの使用
  • Vueのプリズムを通して角度を見る-おなじみのコード
  • Angular CLIを使用してAngularアプリのダウンロードコンポーネントを作成する方法
  • Angular 5サービスワーカー
  • 「ReactはAngularよりも優れています」およびその他のナンセンス
  

• ライブラリとプラグイン：
  • Scrollama-スクロールイベントを優先してIntersectionObserverを使用してストーリーテリングを実装するためのJSライブラリ。
  • Chartkick -Reactの1行で美しいグラフを作成
  • imaskjs-依存関係のない、入力テキストフィールドの指定されたパラメーターによるデータのマスキング
  • raspchat -Raspberry Piで実行できるチャットサーバー
  • z -Javascriptのネイティブ比較パターン
  • AWS Amplify -JSでクラウドサービスを使用してアプリケーションを開発するための宣言型ライブラリ
  

ブラウザ

• デバッガーの改善とWebExtensions API拡張：Firefox 58の開発者向けの新機能
• Firefoxは、以前にハッキングされたサイトにアクセスしたときに警告を表示する予定です
• 最初にニュースを受け取りたいですか？ さまざまなブラウザで迷惑なプッシュ通知をブロックする方法
• Kotlinで書かれたFirefox用の最初の（Web）拡張機能
• ブラウザーでのページの読み込み速度の比較：方法論の紹介

おもしろい

• GitHubでのコードの重複度の分析
• GitHubにはチームディスカッション機能があります
• Quartz：GoogleはAndroidユーザーの位置データを収集します
• Googleの中国部門の元責任者：将来、社会的スキルを必要とする仕事が前面に出る
• インターフェイスの11の錯視
• インターネットなしで最新の場所を見つける場所
• 別のバブルに向かうプログラマー？
• 開発者互換性神話

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

先週のダイジェスト 。
dersmollとalekskorovinが作成した資料。