過去2週間のフロントエンドの世界からの新鮮な材料のダイジェストNo. 220（2016年7月11-24日）

フロントエンドエリアの有用なリソースと興味深い資料へのリンクを含むセレクションをご紹介します

ウェブ開発

CSS

Javascript

ブラウザ

ニュースと面白い

ウェブ開発

• BEMとの戦い：10の大きな間違いとそれらを回避する方法
• githubの効果的な使用
• GitHubからサーバーにデプロイする
• イリヤ・クリモフによる一連の記事の続きと終わり、「フロントエンド開発者：善、悪、悪」。 パート2：悪い道 、 パート3：邪悪な道
• Podcast Web Standards、Issue No. 25 ：アトム、アクセシビリティ、フォントのダウンロード、約束、ベクトル効果、コード、デザイン、タンパク質に関するアントン・ヴィノグラードフ。
• Webフォントのダウンロード戦略の包括的なガイド 。 css-live.ruコミュニティによる、フォント読み込み戦略に関する包括的なガイドの記事の翻訳
• Chrome Dev Toolsを使用してwebpackを学習およびデバッグします （ Chrome Dev Toolsを使用してwebpackを学習およびデバッグします）
• Web用のアクセス可能なUIコンポーネント
• モバイルファーストメールテンプレートの作成、ウォークスルー （モバイルファーストメールのコーディング）
• 知ってる？ ファックドロップダウン （You Know What？Fuck Drop Downs）
• サービスワーカー：
  
  • GithubページとCloudflareでホストされている単純なサイトにService Workerを追加する（単純なWebサイトにService Workerを追加する）
  • ServiceWorker：BackgroundSync基本ガイド
  • サービスワーカーのライフサイクル
  
  
• WebKit MathMLの機能強化
• Real World HTTP / 2：1日あたり400 GBの画像をダウンロード （Real – world HTTP / 2：1日あたり400 GBの画像）
• 最新のフロントエンド開発ワークフローのヒッチハイカーガイド
• rel = noopenerを使用した場合のパフォーマンス上の利点（ rel = noopenerのパフォーマンス上の利点）
• Microsoft REST APIガイド （Microsoft REST APIガイドライン）
• Pony Fooがいかにトリッキーであるか-なぜそれが本当にクールなのか （Pony Fooが途方もなく過剰に設計されている方法-そしてそれが素晴らしい理由）
• WebPサポート-思った以上に
• 絵の具の実用的な使用例
• HyperTerm-JS / HTML / CSSターミナル （JS / HTML / CSSターミナル）
• マップマーカーの壮大なインタラクティブ（シンプルなインタラクティブポイントエフェクト）

CSS

• モーダルウィンドウの設計 。 モーダルのスタイリングに関する考慮事項の翻訳
• 擬似クラスのトリック：target 記事の翻訳：ターゲットトリック
• StylelintでSass / CSSを正しくリントする方法 。 記事の翻訳StylelintでSass / CSSを適切にリントする方法
• stylelintでSCSSをリントする方法（stylelintでSCSSをリントする方法）
• WebコンポーネントはCSSアーキテクチャをどのように変えるのでしょうか？
• 聖杯を見つける：要素クエリに立ち寄った方法と、今日それらを使用する方法
• スティッキーに対処する4つの新しい方法：モバイルデバイスでのホバー効果
• PostCSSのある年（PostCSSのある年）
• PhantomCSSを使用した視覚回帰テスト（PhantomCSSを使用した視覚回帰テスト）
• CSSグリッドレイアウト （CSSグリッドの更新、ブラウザーの変更と状態） ニュースと現在のステータス
• BEM ＆アトミックデザイン：A CSS Architecture Worth Loving（BEM＆アトミックデザイン：A CSS Architecture Worth Loving）
• CSSフィルター効果：CSSのぼかし、グレースケール、明るさなど！
• メディアクエリの制限のサポート （ サポートの制限）
• Sassで文字列を操作する
• クールなCSSアニメーションを作成してフロントエンドのパフォーマンスを向上させる
• 入力への適応
• CSSポジショニングの解析 ：Paul O'Brienによるマスタークラス（CSSポジショニングのデコード：Paul O'Brienによるマスタークラス）
• レイチェルアンドリューによる印刷スタイル （ レイチェルアンドリューによるページメディアのCSSの翻訳）
• Jets.js-ネイティブCSS検索エンジン

Javascript

• JavaScriptは再び最も人気のあるプログラミング言語のリストのトップ（JavaScript、もう一度、トップのプログラミング言語のリストをリード）
• OdessaJS 2016カンファレンスからの9本のビデオ 、7月2〜3日
• コード分​​割による最新のWebアプリケーションのプログレッシブロード
• 「Real JavaScript Developer」の神話（The Brenna O'Brien / Front-Trends 2016）
• JavaScriptのオブジェクトリテラルがクールな理由
• クロスブラウザJSユニットテストのセットアップ（自動化されたクロスブラウザJavaScriptユニットテストのセットアップ方法の学習）
• 正規表現の代替：apg-exp （正規表現の代替：apg-exp）
• ES6：
  
  • ES6は人間です。 簡潔な（本当に簡潔な）ES6マニュアルの翻訳
  • 矢印地獄、または古い問題の新しいサークル
  • ES6テンプレートリテラル：テクニックとツール
  • Const or Let？ （ConstまたはLet：Let's Talk Javascript）
  • 知っておくべき ES2016機能の詳細（ ES2016機能に関する詳細を知っておく必要があります）
  • ES6プロキシの6つの魅力的なユースケース
  • ECMAScript 6で引数とパラメーターを使用する方法
  • Promiseを使用する5つの理由
  • ES6 Destructuring （最も詳細かつ理解しやすいES6 Destructuringチュートリアル（Assembled Avengersで完了））
  • ES6のデフォルトパラメータとプロパティショートハンドを使用したコードの整理
  • 新しいES6コレクションの使用：Map、Set、WeakMap、WeakSet（新しいES6コレクションの使用：Map、Set、WeakMap、WeakSet）
  • ES6ジェネレーターとイールドを使用してJavaScriptで非同期ワークフローを実装する）
  • JavaScript Promises 101 （JavaScript Promises 101）
  
  
• フレームワーク
  
  • React.jsのポータル
  • パターンのReact.js
  • Reactで状態を操作する方法。 FAQがありません。 （Reactで状態を処理する方法。欠落しているFAQ。）
  • Redux入門：はじめに
  • Reactによるプログレッシブエンハンスメントのテクニック、パート1 （Reactパート1のプログレッシブエンハンスメントテクニック）
  • React Reduxコードを改善する3つの簡単なステップ
  • Reactコンポーネントを使用したメールテンプレートの作成（Reactコンポーネントを使用したメールテンプレートの作成）
  • Angular 2でさまざまなフォームコントロールを処理する方法
  • モバイルJSアプリ：React Native Dawn （モバイルJavaScriptアプリ：The Dawn of React Native）
  • AngularJSと Ember.js：どのJavaScriptフレームワークが最適ですか？
  • Vue.js入門（Vue.js入門）
  • 次のWebプロジェクトにVueJSを検討する
  
  
• 教訓：
  
  • 無料オンラインAngular 2トレーニング8月16-17日
  • AngularJSとWordPress REST APIを使用したSPA（AngularJSとWordPress REST APIを使用したシングルページアプリ）
  • 角度1.5でアプリをデートするコンポーネントベースのヤギを書く
  • VueJS 2でアプリを作成する
  • Electron、React、ES6で音楽をストリーミングするためのアプリケーションを作成する （ Electron、React、ES6で音楽ストリーミングアプリを構築する）
  • 例によるD3.jsデータ視覚化の作成を学ぶ
  
  
• プラグイン
  
  • howlerjs-最新のWeb用のオーディオライブラリhowler.jsは、すべてのプラットフォームでJavaScriptでのオーディオの操作を簡単かつ信頼性の高いものにします。）
  • Cleave.js-入力時に<input />フィールドのコンテンツをフォーマットする
  • allora- 50行未満のコードですべての Javascript APIにES6プロキシを使用することを約束します）
  • Dioは、仮想DOMを備えた軽量（〜6kb）フレームワークです。 （Dioは軽量（〜6kb）の仮想DOMフレームワークです。）
  • Aquarelleは、水彩絵の具を広げる効果を実装するためのJSです （Aquarelleは水彩js効果です）
  
  

ブラウザ

• Firefox 48はRustコンポーネントの統合を開始します
• FirefoxはいくつかのタイプのFlashコンテンツをブロックします
• Chrome Web Browserリリース52
• マイクロソフトでは、エネルギー効率のためにMicrosoft Edgeブラウザの使用を推奨しています
• 中国のコンソーシアムによるOpera Softwareの購入には何が伴いますか？
• ChromeLens ChromeLens、色覚異常およびスクリーンリーダーをシミュレートするためのChrome DevTools拡張機能
• トップ12ブラウザー互換性テストツール
• Safariテクノロジープレビューリリース9リリースノート
• Ōryōki-薄いインターフェースを備えた小さなWebブラウザー、開発中のパイロットプロジェクト
• AppleはWebPを実装してWebサイトの速度を上げる予定です

ニュースと面白い

• Stack Overflowがプロジェクト全体の開始以来最大のイノベーションを開始-ドキュメント
• 中国が広告ブロッカーをブロック
• Windows 10の次のメジャーアップデートでは、開発者モードが表示されます
• Googleは機械学習を使用して漫画を読む
• Apple Watchの売り上げの減少は、スマートウォッチの市場全体を引き下げました
• CloudFlare captchaはTorユーザーの匿名化に使用できます
• 技術者の需要は40％減少しましたが、誰もそれについて語りません
• SEO市場の基盤は不正行為を続けています
• ニューラルネットワークのブーム：誰がニューラルネットワークを作っているのか、なぜ必要なのか、どれだけのお金をもたらすことができるのか
• 未来の5つの医療動向
• ソリューションの分析によるITインタビューを伴う108のタスク
• あなたを死に追いやる未来についての10の予測
• Pokemonomania：ゲームPokémonGoで誰がどのようにお金を稼ぐか
• 認知の歪み。 誰もが知っておくべきこと
• コードを書くことを学ぶのをやめる-データを分析することを学ぶ
• Satya Nadellaによるロボット工学の7つの法則
• ニューラルネットワークはどこでどのように動作しますか？
• プラン2026：今後10年間のFacebook開発の主な方向性についてマーク・ザッカーバーグ
• 毎月10億人がFacebook Messengerを使用しています
• Skypeのモバイル版の代替品を探す時ですか？

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

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