🐴 📌 🧙🏾 Web開発およびITの世界からの興味深い資料のダイジェスト、先週第197（2016年2月1〜7日） 🚇 ⛹🏻 😨

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

ウェブ開発

CSS

Javascript

ブラウザ

設計

ニュース

おもしろい

ウェブ開発

BEM方法論：すべてがどのように始まり、なぜすべてが必要なのか
Web Standards Daysカンファレンスの記録-2015年モスクワ
FrontendFellows Confからのビデオ
JekyllおよびGitHubページを使用してブログを作成する
Ilya KantorによるGulpスクリーンキャストの最初の8つの問題
パフォーマンスウィークリー。問題＃0 先週のWebパフォーマンスに関するニュースダイジェスト
技術サイト最適化中の間違いを避ける方法。初期設定ガイド
Gruntへの初心者向けガイド
フロントエンド Webフレームワークの選択方法
Mobile Firstが古くなった理由
Webpack入門パート1：Webpack、React、Redux、およびTDDを使用したフロントエンド開発の旅（Webpackパート1を始めましょう）
Webpackの解凍。プロジェクトの作成プロセスにおける新しいパラダイムの詳細な理解
Tyler Sticka： SVGアイコン作成プロセス（ケーススタディ：SVGアイコンプロセス）
svg-icon-system-boilerplate-スプライトでsvgアイコンを組み立てるためのシステム
Service Worker Cookbook-Mozillaケーススタディコレクション
Service Workerの作成：例 Lyza Danger Gardnerによる詳細な記事（サービスワーカーの作成：ケーススタディ）
HTMLレターのタイポグラフィをマスターする（電子メールのマスターHTMLタイポグラフィ）
高速化されたモバイルページ
HTML5 Elements テーブル
コミットの芸術
HTML 5ゲーム開発ビデオシリーズビデオシリーズ
スマート自動トリミングを使用したレスポンシブ画像（アート指向のレスポンシブ画像）
壮大なウェブ：
- CSS / SVG / JS＃23の美しいエフェクトの毎週の編集
- 音声認識（Web Speech Demo）
- アニメーションドラムマシン（SVG）（SVG Animated Drum Kit（Play Me！））
- CSSとJavaScriptを使用してサイトをプレビューおよびデモするための効果的なツール

CSS

グローバルCSSの時代の終わり
便利なSCSSユーティリティの選択
Goldfish CSS3グリッドレイアウト（パート3）
グリッドレイアウト（CSSグリッドレイアウト）に要素を配置する方法の詳細。 css-live.ruコミュニティによる記事「 Deep Dive into Grid Layout Placement」の翻訳
もう一度CSS浮動小数点について。 css-live.ruコミュニティによる記事「 CSSを使用したフロートラベルパターンの再訪」の翻訳
SVGマスク
スクロールスナップポイントを使用したスマートスクロール
background-clipプロパティに関する詳細な記事と例（ `background-clip`プロパティとその使用例）
CSS変数：なぜこれについて考える必要があるのですか？（CSS変数：なぜ気にする必要があるのですか？）
最新のclearfixバージョンのリブート（最新のclearfixがリロードされました）
Sass：コードの維持に役立つディレクトリ構造
CSS3 Flexboxを使用した非常にレスポンシブなスプレッドシート。 CSS3 Flexboxを使用した本当にレスポンシブなテーブル
スクロール可能領域の使いやすさの改善に関する短いメモ
フレックスボックスとキーボードナビゲーションの切断
Flexboxによる星評価
Foundation 6：The New Flex Grid （Foundation 6：The New Flex Grid）
BigCommerceで「CSS」を使用する方法（ BigCommerceで「CSS」を使用する方法）
trivagoでの大規模なCSSリファクタリング（trivagoでの大規模なCSSリファクタリング）
フォントを制御します：Google Fonts + Chrome =問題？（タイプの制御：Googleフォント+ Chrome =トラブル？）
TestMyCSS -CSSを分析するためのオンラインツール

Javascript

Node.jsが公式に承認したChakra
ES6：
- ES6：内部からのシンボル（詳細なES6シンボルの翻訳記事）
- ES6 Arrow Functions：JavaScriptの新しいファット＆簡潔な構文
- ES2015プロキシの紹介（ ES2015プロキシの紹介）
- 2016年のEs2015トレーリングコスト（コンパイルされたes2015のオーバーヘッドコストの調査）
- ESの提案：非同期関数、 Object.getOwnPropertyDescriptors（）
フレームワーク
- Angular 2とAureliaを並べて比較
- MVCフレームワークを使用しなくなった理由（ MVCフレームワークを使用しなくなった理由）
- 反応：
  - canvas要素でのReactの使用について
  - すべての開発者がReactを学ぶべき10の理由）
  - Reactjs Sasha Aickin トーク-サーバー側レンダリングの高速化
  - Reactによる生産的開発（ Reactによるパフォーマンスエンジニアリング（部1））
  - React Universal Blogアプリの構築：Fluxの実装
  - React入門：Hello Worldデモの作成
  - Reactアプリケーション開発を学習するための5つのステップ（Reactアプリケーション開発を学習するための5つのステップ）
  - react-designer-構成が簡単で、簡単で編集可能なベクターグラフィックスをreactコンポーネントで使用
- 角度：
  - Angular 1.5.0リリース
  - KarmaとJasmineを使用したAngularJSコントローラーの単体テスト
  - Angular を使用したマルチプレイヤーゲームの作成（Angular を使用したマルチプレイヤーゲームの構築）
  - Angular 2コンポーネント：入力と出力
  - Angular 1.x ng-repeatからAngular 2 NgFor with Componentまで）
  - Angular 2コンポーネントおよびプロバイダー：クラス、ファクトリー、および値）
- Meteorがスタートアップに理想的な5つの理由
新世代の再利用可能なJavaScriptモジュールをECMAScript 6で作成します（ ECMAScript 6で次世代の再利用可能なJavaScriptモジュールを作成）
HTMLパズルの JavaScript AI（HTMLスライドタイルパズルのJavaScript AI）
例によるJavaScriptの学習（例による JavaScript）
Javascriptを修正する方法...多分）
JavaScriptで防弾関数ラッパーを作成する方法
2016年にJSに期待すること-ブラウザー外（2016年にJavaScriptに期待すること-ブラウザーを超えて）
JavaScriptの非同期待機を理解する（ JavaScriptの非同期待機を理解する）
MediaRecorderでオーディオとビデオを記録（ MediaRecorderでオーディオとビデオを記録）
JavaScriptのレベルアップ
プラグイン
- jQuery Select Boxコンポーネント-選択済みvs Select2 （jQuery Select Boxコンポーネント-選択済みvs Select2）
- samsaraJS-アニメーション化されたインタラクティブインターフェイスを作成するためのライブラリ
- Gridifier-並べ替え機能を備えた適応グリッド
- Instadate-高性能の日付ライブラリ
- Multi-Screen.jsは、ページをさまざまな方向のアニメーションナビゲーションの複数の画面に変換するシンプルなjQueryプラグインです。
- Whitestorm- Three.jsテクノロジーに基づくWebGLエンジン（物理学およびポストエフェクトを含むThree.jsテクノロジーに基づくWhitestorm Modern WebGLエンジンの紹介）

ブラウザ

設計

新しいインターフェースはインターフェースの欠如です
フードデザインダイジェスト、2016年1月
コンテンツ戦略の完全な初心者向けガイド
グラフィックエディター：
- Photoshop、UI / UXデザイナー向けのスケッチツールキット：インターフェイスデザインに選択すべきもの
- スケッチチュートリアルシリーズ（5/4）：タブレットとモバイルの設計
- スケッチチュートリアルシリーズ（パート5/5）：開発者へのデザインの転送
- Git-sketchプラグイン。これは、Sketchに直接組み込まれたGitクライアントです。
- SketchのiOSアプリ設計に関する詳細なチュートリアル：パート1/3
- PhotoshopからSketchへの切り替え
- チームをSketchに移行する方法
- 便利なスケッチのヒント（5つの非常に特別な、10の便利なスケッチのヒント）
- InVision LABS Craft Plugin in Sketchを使用した動的コンテンツデザイン（Holy Sh！T〜Sketch in InVision LABSによるCraftによるデザイン）
Uberは新しいロゴと新しいアプリケーションアイコンを導入しました
「私たちは私たちが誰であるかを理解します」：Uberブランディングの作成方法
社内で行われたUberの新しいロゴとIDYour Identity is Arriving）
バドワイザーの再設計の背後にあるものは何ですか？（バドワイザーの新しい外観の背後には何がありますか？）
微小相互作用：悪魔は細部に宿る
見出しを次のレベルに引き上げるクールなタイポグラフィ（タイトルを次のレベルに引き上げる素晴らしいタイポグラフィ）
Dream Crewの設計方法（Dream Crewの設計方法）
UIアニメーションの設計方法（ユーザーインターフェイスアニメーションの設計方法）
Webで読書を再考する
デザイナー向けパーソナルブランディングガイド
さまざまなモバイルアプリケーションでユーザーを引き付けることでインスピレーションを得るためのビデオギャラリー（モバイルオンボーディングデザインインスピレーションのためのビデオギャラリー）
アルバムオブザイヤー（ALBUM COLORS OF THE YEAR）
freelancigへのラブレター
すべての広告ユニットサイズ（究極のソーシャルおよびデジタル広告サイズガイド！）
国際アーティスト：ロシア（国際アーティスト特集：ロシア）
デジタル遊牧民が私を非常にやる気のあるデザイナーに変えた方法
デザインの工業化（またはシリコンバレーがUXデザイナーを必要としなくなった理由）
一貫した設計の価値
アプリのUX設計のヒント、パート2
60秒でのIllustrator ：カラースウォッチの作成およびエクスポート方法：カラーセットの作成およびエクスポートに60秒
ペンツールとライブトレース：詳細な比較（ペンツールとライブトレース：大きな比較）
これは最高の保存アイコンですか？（これは完璧な保存アイコンですか？）
サンフランシスコに到着（サンフランシスコに到着）

無料のデザイナーCookieのセレクション

バレンタインベクトルセット
無料のUIキット
Craft-SketchおよびPhotoshopのプラグイン（Craft-実際のデータを活用したSketchおよびPhotoshopのUIデザインプラグイン）
未来的なインターフェイス要素で設定された Photoshopブラシ（これまでに作成された25の最高の技術インターフェイスPhotoshopブラシ）
無料のグラフィックとフォントを含むHellena Scriptフォントセット（無料ダウンロード：バレンタインデーの落書き、グラフィック、ブラシスクリプトフォント）
デザイナー向けの最高の水ベースのブラシ（デザイナー向けトップ無料Photoshop水彩ブラシ）
クールなテキスト効果を備えた最高のスマートPSD （簡単なテキスト効果を作成できる30の無料のスマートPSD）
SVG形式のフードアイコン（[景品]フードアイコン）
バレンタインデーのアイコンのパッキング（無料のバレンタインデーアイコンパック+その他の素敵なリソース）
AI形式のロゴ（プロジェクト用の無料ロゴデザイン、毎週火曜日に追加）
Pacha-装飾フォント（Pachaはラテンアメリカの古代文化に触発された素朴でエスニックなデザインのディスプレイ書体です。）
Fibon Sans-Thin Sans Serifフォント（Fibon Sans-通常のウェイトフリー）
15個の美しく不完全なフリーブラシフォント