前週第211号のフロントエンド、デザイン、ITの世界からの新鮮な材料のダイジェスト（2016年5月9日〜15日）

フロントエンドとデザインの有用なリソースと資料へのリンクを含むセレクションをご紹介します。
投稿を作成し、それらを開発と設計の別々のストリームに分割する技術革新により、現在の投稿はこの形式の最後になります。

顧客開発

CSS

Javascript

ブラウザ

設計

ニュース

おもしろい

顧客開発

• Web Standardsの第15版：広告ブロック、ポインターイベント、拡張機能、Webコンポーネント
• RadioJS第39版：React、蜂蜜、ビールなど
• フロントエンドデータ：将来のアプリケーションへのステップ
• Web MIDIの概要
• 大画面用のコンテンツ、画像、およびタイポグラフィの振り付けの最適化に関する興味深い記事 （ 大画面の最適化）
• Page Visibility APIの概要
• Unstuck Webpack-セットアップに時間をかけたくない人向けの既製のWebpackテンプレートを備えたGUIツール
• Webpackの概要：パート2 （Webpackの概要：パート2）
• 2016年のクロスブラウザテストに不可欠なツール （2016年に必要な7つのクロスブラウザテストツール）
• ブートストラップ4チートシート
• 構造化テキストデータを操作するためのコマンドラインツールのリスト
• インタラクティブな崇高なチュートリアル （Sublime Tutor）
• 私はクソのウェブマスターです
• 性能：
  
  • HTML5でのリソースのプリロード 。 ユーザーアクションを予測し、リソースをプリロードしてパフォーマンスを向上させる
  • HTTP2フロントエンド展開のベストプラクティス
  • Web用に画像を最適化するための究極のガイド
  
  
• SVG：
  
  • 頭脳（または予算）を損なうことなくSVGパターンを作成する
  • もう一度SVGクリッピングパスについて
  • CSSおよびSVGを使用したブラウザーでのマスキング
  
  
• 可用性：
  
  • アクセシビリティのコスト
  • HTML5とUIAを使用してよりアクセスしやすいUXを作成する （ HTML5とUIAを使用してよりアクセスしやすいユーザーエクスペリエンスを構築する）
  • サイトで基本的なアクセシビリティ監査を実施する方法
  • クイックスタートガイド：アクセシブルなWebコンポーネントを作成する方法-簡単なガイド
  • Vox Mediaでのアクセシビリティの問題に対する彼らの取り組み
  • Frend -Webで使用可能なコンポーネントのコレクション（オフキャンバス、アコーディオン、タブなど）
  
  
• 壮大なウェブ：
  
  • SVGフィルターを使用したボタンのアニメーション化された歪み効果 （ SVGフィルターを使用した歪みボタン効果）
  • アニメーション効果
  • CSS / SVG / JS＃37の美しいエフェクトの毎週の編集
  
  

CSS

• Reactコンポーネントのスタイル設定
• HTMLグリッドからCSSグリッドシステムへの移行
• 意味のあるCSS：スタイルでロジックを記述します 。 意味のあるCSS： css-live.ruコミュニティからの あなたのようなスタイル
• PiterCSS No. 3からのビデオ
• 重要！CSSで重要 （重要！CSSで不変性を強制）
• CSS垂直メディアクエリの使用例
• BEMantic：DRY Like You Mean It
• to__bemまたはnot__to-bem
• フロントエンドスタイルのアーキテクチャの開発 （フロントエンドスタイルのアーキテクチャ）
• rescue.jsxのCSSモジュール
• 例のCSSモジュール
• 美しいCSSコメントを書きましょう
• 初心者向けの良いCSSプラクティス
• タイポグラフィ
  
  • vhおよびvw単位を使用した真に流動的なタイポグラフィ
  • フレックスボックスと切り捨てられたテキスト
  • レスポンシブモジュラースケール
  
  

Javascript

• DIYバインド機能メソッド
• b_方法論で公開された新しいドキュメント： BEM JavaScript、JavaScript機能
• JavaScriptロードマップ：より小さく、より頻繁な更新が先にあります）
• 簡略化されたJavaScript用語集 （簡略化されたJavaScript用語集）
• JSのニューラルネットワーク（Javascriptのニューラルネットワーク）
• JavaScriptでフィボナッチジェネレーターを書くことを学んだ7つの驚くべきこと）
• Promise.tryとは何ですか、なぜ重要なのですか？ （Promise.tryとは何ですか、なぜ重要なのですか？）
• 配列を使用して簡単なループを作成する
• モジュラーJavaScript：SystemJSとjspmの初心者向けガイド
• JavaScriptの新しい並列プリミティブの味（JavaScriptの新しい並列プリミティブの味）
• ファンシーjQueryセレクター （珍しいjQueryセレクター）
• Node.jsを使用して独自のカスタムSlackBotを作成 （ Node.jsを使用して独自のカスタムSlackBotを構築）
• Node.jsビデオコース （Node.jsの学習）
• ES6：
  
  • ES6の詳細：ジェネレーター、続き
  • ES6で修正された 5つの「不良」パーツES6で修復された JavaScript（ES6で修正された 5つのJavaScript「不良」パーツ）
  • ES6ジェネレーターの使用例 （ES6ジェネレーターの場合）
  • ES6セットの概要（ES6セットの概要 ）
  • BabelとRollupを使用してES6モジュールを今すぐビルドして公開する方法）
  
  
• フレームワーク
  
  • 2016年にBackbone.jsを使用できない理由
  • ReactJS 15.0.2チュートリアル
  • ng-conf 2016からの最高のニュースとお知らせ （Angularのng-conf 2016からの最高のニュース）
  • ng-conf 2016 （ng-conf 2016）の33ビデオ
  • Angularのパフォーマンス： エンジンの調整 （Angular Performance：Engine the Tuning）
  • フレームワークを責めないでください：AngularJSとReactJSの経験 （フレームワークを責めないでください：AngularJSとReactJSの経験）
  • Angular 2シリーズ-パート5：フォームとカスタム検証（Angular 2シリーズ-パート5：フォームとカスタム検証）
  • Angular 2とTypeScriptを使用して独自のChrome拡張機能を構築する
  • 心配をやめてJSXを愛することを学んだ方法
  • Reactの一連の要素のレンダリングを最適化するためのヒント ）
  • Ionicの開始：ナビゲーション
  
  
• スクリプトとプラグイン：
  
  • Tocbot -HTMLヘッダーの構造に基づいてアンカーリンクを含むページのコンテンツを生成します
  • JavaPoly.js-ブラウザーでのネイティブJVMサポート用のポリファイル （JavaPoly.js- ブラウザーでの Java（スクリプト））
  • Stop.js-約束に基づいた 'setTimeout' （Stop.js-約束ベースの `setTimeout`、コールバックを減らします）
  • Trial.js-シンプルなライブラリは、マウスの位置を監視し、ユーザー入力を予測できます）
  • Adobe CCスクリプトパネル -After Effects、Illustrator、およびPhotoshopのスクリプトパネル（Adobe CCスクリプトパネル-After Effects、Illustrator、およびPhotoshopのスクリプトパネル）
  
  

ブラウザ

• Firefoxを保存
• Firefoxパイロットテストの予備テストプログラムが導入されました
• OperaブラウザのPC用の新しいバッテリーセーバーモードにより、ラップトップの自律性が50％向上します
• ChromeはサイトのFlashサポートを無効にする予定
• Microsoft EdgeはAdBlockまたはAdblock Plusを使用して広告をブロックできるようになりました
• Yandex.Browser for Androidデバイスは、アンチショックテクノロジーを開始しました
• Safariテクノロジープレビュー4リリース
• Blisk-Web開発用のブラウザー（Chromiumベース） （見栄えがよく、どのデバイスでも正常に動作するWebサイトの開発とテスト）
• ブラウザセキュリティの最近の発展（ブラウザセキュリティの最先端）

設計

• フードデザインダイジェスト、2016年4月
• マテリアルデザイン：哲学と実践
• Web Brutalism：開発者が90年代のスタイルでシンプルでいサイトを作成する理由
• コミュニティに触発-Instagramのデザイン変更
• デザイナーになり始める場所
• Instagramは新しいデザインとレインボーアプリのアイコンを導入しました
• 負荷の高いデータ駆動型インターフェースの設計
• モバイルおよびWebインターフェイスでスマート通知を設計する
• Googleの新機能-マテリアルモーション （Material motion）
• デザインの進化、または私がより良いデザイナーになった方法
• 初心者デザイナーによる8つのよくある間違い （ 初心者デザイナーが犯す8つのよくある間違い ）
• Photoshopで常に欲しかった Retina セット （ Photoshopで常に欲しかった Retina Asset Workflow）
• UX研究入門ガイドを完了
• UIの暗い側面。 暗い背景の利点 （UIの暗い側。暗い背景の利点）
• 新しいInstagramアイコンにアートワークをドリブル
• Instagramのコミュニティにヒントを得た新しいアイコンデザイン （ Instagramの新しい外観のデザイン 、コミュニティに触発された）
• Web Design Trends 2016：The Complete Guide （ウェブデザイントレンド2016：決定版ガイド）
• より良いアイコン設計への簡単なステップ
• Eventbrite Design：進化のプロセス
• アプリの再設計方法（アプリの再設計方法）
• Duolingoが心理学を使用して設計する方法（Duolingoが心理学を念頭に置いて設計する方法）
• 高齢者向けUberと視界不良
• ボットのユーザビリティヒューリスティック
• エビデンスに基づいた色 （ 色に関する科学に裏打ちされた50の事実）
• 常にあなたの作品を見せてください：デザイナーが壁に書く理由（そしてあなたもそうすべき理由））
• OpenBazaarの詳細：ブランディングと美学
• デジタルアーティストの教師付きコレクション （才能のあるWebアーティストはコード駆動型のアートを展示）
• ロゴの目的は何ですか？ （ロゴの目的は何ですか？それはデザイン以上のものです...それは目的に関するものです）
• ユーザーでテストされていないデザインを表示しない （ ユーザーでテストしていないデザインを表示しない）
• プライマリおよびセカンダリアクションボタン
• クイックヒント：スケッチの更新されたシンボルの使用方法
• Sketchの更新されたシンボルツールがワークフローを改善する方法（Sketchの新しいシンボルがワークフローを改善する方法）
• 60秒でのIllustrator ：幅ツールの使用方法
• 隠しメッセージ付きのロゴ（15個のロゴ付き隠しメッセージ）
• 衝突フォントの使用方法

ニュース

• Google翻訳がAndroidアプリケーション内で動作するようになりました
• 組み込みのメッセンジャーがYouTubeに表示されます
• アルファベットは再び世界で最も高価な会社です。
• Googleフォトにコメントとヒントが掲載されました
• Githubは無制限のプライベートリポジトリを導入し、組織の価格を引き上げます
• トップeスポーツチームが新しいeスポーツリーグを作成
• Electron 1.0のリリース、Chromiumエンジンに基づいたアプリケーションを作成するためのプラットフォーム
• Amazonが独自のビデオホスティングを開始-YouTubeのライバル
• Mozillaはオープンプロジェクトの助成金制度の範囲を拡大しました
• 裁判所のMozillaは、Tor BrowserでのFBI攻撃で使用される脆弱性の開示を求めています
• Facebookがパノラマ写真のサポートを開始
• SpaceXの宇宙服を設計するハリウッド映画デザイナー
• 人工知能IBM Watsonはサイバー犯罪と戦います

おもしろい

• Habrahabr≥10年
• 創造性：払拭の時間だという5つの神話
• ハイパーループテストにより、将来はまだ退屈であることが証明されました
• 「さようならスマートフォン、さようならラップトップ！」：最も神秘的なITスタートアップMagic Leapのツアー
• 例外なく、プログラミングを学びます。 お願いします
• プログラミングを学ばないでください
• 視覚的な数学：積分を使用してユーザー値を計算する方法
• ああ、その愚かなスマートホーム！
• ネバダ州でテストされたハイパーループ
• 現代はアイアンマンのコスチュームをデザイン

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

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