前週のフロントエンドの世界からの新鮮な材料のダイジェストNo. 212（2016年5月16〜22日）

役立つリソース、興味深い資料、ITニュースへのリンクを含むセレクションをご紹介します

ウェブ開発

CSS

Javascript

ブラウザ

ウェブ開発

• 簡単なフィルタリングのためにオーディオブックデータベースをまとめる
• Web標準の第16版：バッテリー、グラフィックス、HEXアルファ、重要、テーブル、ポリファイル
• Service Workerの作成：例の解析
• VKontakteフロントエンド：アーキテクチャ？ どんな建築？
• Avito SPAミートアップ＃2のビデオ
• Google I / O 2016のWebおよびChromeセクションからのすべてのレポートのビデオ
• ゼロからフロントエンドヒーローへ、パート1 （ゼロからフロントエンドヒーローへ、パート1 ）
• Web Animations APIの紹介
• オートフィル：ウェブ開発者が知っておくべきこと、しかし知らないこと
• ARIA、UIの問題と標準のある利用可能なタブ （ARIAタブ、UIの問題と標準）
• 15のサイト監視ツール
• Native ContentEditableがひどいのはなぜか
• 生活スタイルガイドの作成例 （ 生活スタイルガイドの作成 ：ケーススタディ）
• Visual Center-画像の視覚的中心を見つけるツール
• パフォーマンス ：
  
  • Google、モバイルフレンドリーテストツールの新バージョンを発表
  • パフォーマンスを低下させる画像の効果の分析 （Web Image Effects Performance Showdown）
  • ブラウザのカロリー -ウェブサイトのパフォーマンス予算を測定するChrome拡張機能
  • コーチ： YSlowの最新の代替品
  • 私たちのベストプラクティスはモバイルウェブのパフォーマンスを殺すことです
  
  
• AMP ：
  
  • 2016年のGoogle I / Oカンファレンスで、会社の代表者Richard GingrasはAMPプロジェクトに関する最新の統計とニュースを共有しました。AMP形式の配布は急速に成長しており、Googleはすでに65万のドメインから1億2500万を超えるAMPページのインデックスを作成しています。
  • 料理サイトAMPがGoogleに表示されます
  • Googleでは、Google検索アナリティクスのレポートでAMPページへの訪問者を確認できます
  
  
• 壮大なウェブ ：
  
  • CSS / SVG / JS＃38の美しいエフェクトの毎週の編集
  • SVGとCSSの手順を使用して、歩く人でレスポンシブループアニメーションを作成する（）
  • アニメーションとUIの実験
  • 3つの画像遷移
  
  

CSS

• 訪れたリンクをデザインするという失われた技術 。 記事の翻訳訪れたリンクの失われた芸術
• 初心者向けの良いCSSプラクティスと悪いCSSプラクティス 。 初心者翻訳のための良い点と悪い点のCSSプラクティス
• 重要！重要：CSSの不変性の保証 。 重要の翻訳！重要：CSSでの不変性の強制
• BEMantics：繰り返しのない意味のあるスタイルを記述します 。 BEMantic：DRY Like You Mean It
• すべてまたは何もない 。 ジョナサンスヌークのAll or Nothing翻訳
• 同じクラスのチェーンを使用するニュアンス 。 自己連鎖クラス翻訳の微妙さ
• CSSマジック。 第1章ブロック
• ブートストラップのリブート -CSSリセットの次の進化的ステップ
• CSSコーディング手法
• CSSのデバッグ
• アイコンをテキストに配置するためのヒント
• イーズアウト、イン; イーズイン、アウト
• セレクターとメディアクエリを改善するためのPostCSSガイド
• CSSプロパティ値の構文について
• checkbox.css-チェックボックス用のCSS3アニメーションの小さなセット
• CSSのobject-fitおよびobject-positionプロパティを使用）
• CSSPurge -42の人気のあるサイトおよびフレームワークのCSS統計
• Cutestrap -Sassに基づく最小限のCSSフレームワーク（ブートストラップのマイクロ代替）
• JavaScriptのないフルスクリーンカルーセル （ JavaScriptのないカルーセル）

Javascript

• 公開されているnpmモジュールのサイズを縮小する
• JavaScriptコードでブラウザーが行うこと：V8の例を使用したJSエンジンの最適化について
• Javascriptアプリケーションのスケーラビリティの基盤
• なぜ同型が必要なのですか？
• d3.jsでの地理データの視覚化
• JQuery 3.0リリース候補リリース
• 画像の読み込みが遅れていますか？ JSに依存しないでください！ （画像の遅延読み込み？JavaScriptに依存しないでください！）
• JavaScript抽選のハッキング
• スパゲッティコードのもつれを解く：保守可能なJavaScriptの書き方
• JavaScriptのプロトタイプ継承
• Martin Fowler：ビデオストアのJavaScriptコードのリファクタリング
• MozillaのPDF.Jsを使用したJavaScriptでのカスタムPDFレンダリング
• フレームワーク
  
  • 反応と比較 Angular2：JSのヘビー級バトル （React対Angular2比較：JavaScriptタイトルのヘビー級バウト）
  • より高速なAngular 2プロジェクトにAngular CLIを使用する
  • アプリケーションをAngular 1.5以上にアップグレードしてください！ （アプリをAngular 1.5コンポーネント以降にアップグレードしてください！）
  • Angular 2で感銘を受けたもの （Angular 2について私を興奮させるもの）
  • Webpack + Meteorをバックエンドとして使用する
  • 構成可能なReactコンポーネント
  • Reduxの学習 -ReactおよびReduxのビデオチュートリアル
  • ユーザー認証を使用してReact + Fluxアプリを構築する
  • Google Maps Reactコンポーネントを書く方法
  
  
• ES6 ：
  
  • ES6テンプレートリテラルの空白の処理
  • ES6のクラス-JS6の新しい「悪い」部分 （ES6の「クラス」は新しい「悪い」部分ですか？）
  • 出力の最小化のためにES6コードを最適化する
  • ES6での学習の約束（ES6の学習：約束）
  • ES6用の6つの優雅なトリック （6つの気の利いたES6のトリック）
  • ES6ジェネレーターの隠れたパワー（ES6ジェネレーターの隠れたパワー：観測可能な非同期フロー制御）
  • lebab- ES5コードを読み取り可能なES6（砂糖構文）に変換します。Babelの場合とは逆になります。）
  • JavaScriptの文字列補間 。 カイルシンプソンは、ES6で文字列を収集することがいかに簡単かを示しています（JavaScript文字列補間）
  • Preview Microsoft EdgeのES2015、ES2016以降の ES6モジュールなど（ES2015、ES2016以降のES6モジュールなどのプレビュー）
  
  
• プラグイン
  
  • Push.js -JavaScript Notifications APIを使用したクロスブラウザー通知のソリューション
  • Timedropper -jQuery Timeプラグイン
  • nlp_compromise -JSで自然な英語を使用する
  • テキストを強調表示するjQueryプラグイン （10個のjQueryテキストハイライタープラグイン）
  • レスポンシブデータテーブルを作成するためのソリューションの選択
  
  

ブラウザ

• Firefoxは最初にMicrosoftブラウザーのパフォーマンスを上回りました
• Googleは2016年末までにChromeでのFlashスタートアップの完全な放棄を計画しています
• Chromeはナビゲーションにバックスペースキーの使用を停止します
• Operaがブラウザ推奨のニュースサービスを再開
• Firefoxはブックマークインターフェースを改善します
• Microsoft EdgeのWeb通知
• 振り返ってみる：1年間のMicrosoft Edge
• Flashは死んでいます（Chromeで）。今回は本当にそれを意味しています）

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

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