前週のフロントエンドの世界からの新鮮な材料のダイジェストNo. 298（2018年1月15〜21日）

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

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

---

メディア

• フロントエンドウィークエンドポッドキャスト＃36-Lyudmila MzhachikhによるMoscowCSS、Coding Girls、およびLeah Veruについて

• ポッドキャスト「Web Standards」 第104号：マッチセレクター、ビジネスグリッド、ニューラルメイク、またはマシンがあなたに取って代わらない方法、メイン、一般的なJSモジュール、ショート、敬意に関する合意についての説明

• ポッドキャスト「Frontend Youth（18+）」 ＃34プログラマー-私たちの時代のスニッカー専攻

• ポッドキャスト「devschacht」： Night Frontend＃18-PiterJS 21 and Ya。Subbotnik in Nizhny Novgorod

• 「すべてのHTML」＃32： 「PIXI.JSの波状画像」

• Loftblog Devshow： "React.js-プロのヒント 。 " React Five-Minuteポッドキャストの作成者であるPyat Myazinは、Reactについて語り、初心者に役立つヒントを提供します。

ウェブ開発

• Webコンポーネント：本番環境での概要と使用

• ブートストラップ4がベータ版から抜け出し、 redditに関する議論

• リビングスタイルガイドの作成方法

• 性能：
  
  • サイトを高速化する方法：初心者向けの7つの最適化のヒント
  
  • サイトが新興市場に焦点を合わせていない場合でも、最適化する必要がないという意味ではありません。
  
  • ページの読み込み速度は、Google検索結果の結果に影響します （2018年7月）
  
  • サイトを高速化するためにCSSとJSを最適化する方法。 標準プラクティスの概要
  
  • AMPパフォーマンスの測定
  
  • 事前接続のヒントを使用してサイトを高速化する
  
  • Speedometer 2.0 -WebKitおよびChromiumコマンドで作成された新しいJSブラウザーパフォーマンステスト
  
  

• 道具
  
  • ツール： Gulp-.getInstanceチャネルの新しいリリース
  
  • ちょっとメタ -簡単なチェックとソーシャルメタタグの生成
  
  • Puppeteer 1.0リリース：Chrome 65、JS / CSSコードカバレッジAPI、PDFカスタマイズ、XPathサポート、devtoolsプロトコルアクセス
  
  • ウェブパックの速度を節約する：パフォーマンスを改善するためのガイド
  
  

• アクセシビリティ：
  
  • アクセシビリティの資料とリソースへのリンク付きのリストリスト
  
  • Chrome DevToolsは、アクセシビリティの基準を満たすために、色のコントラスト比を決定および修正する優れた方法を提供します。 カラーピッカーが必要なほぼすべて
  
  • Vueでアクセシビリティを始めましょう 。 ARIAを使用してvueがどのように機能するか、vue-routerでヘッダーを動的に調整し、ディレクティブでフォーカスを制御する
  
  • 人工知能がWebアクセシビリティを変更できる5つのオプション
  
  • 米国では、すべての政府サイトへのアクセスを義務付ける新しい連邦法が施行されました（セクション508コンプライアンス）
  
  

• アニメーション：
  
  • CSSアニメーションの18の創造的な例
  
  • シンプレックスフラワージェネレーター-Three.js / WebGL
  
  • siluetを増やした興味深いスライドショー効果
  
  • Javascript / HTML5 Canvas Jelly Effectシミュレーション
  
  

CSS

• 文書化されていないCSSトリック

• 初心者向けのBEM。 明白なおよび明白でないレイアウトの問題

• 2018年に期待される5つのクールなHTMLおよびCSS機能

• この長方形の大きさは？ CSSレイアウトの寸法について

• SwissでCSSグリッドレイアウトを学ぶ

• Layout Land -Jen SimmonsのYouTubeでの新しいグリッドレイアウトショー

• デバッグの時間を節約するCSS命名規則

• 曲がったスタイルシート 。 JavaScriptを使用しない純粋なCSSを使用したWebサイトの追跡/分析の例

• CSS Paint API

• CSSグリッド+ CSSマルチカラム= <3

• cssgrid.io -Wes Bosの25本のビデオから無料のCSSグリッドコース

Javascript

• JavaScript：国際調査による2018年のトレンド予測

• JavaScriptと突然変異の恐怖

• ステートマシンとWebアプリケーション開発

• JavaScriptフレームワークの完全ガイド

• JQuery 3.3.0リリース-いくつかの新機能と多くの廃止予定

• ES6モジュールを使用したい

• JavaScriptアプリケーションのデプロイの完全ガイド、パート2： シングルページアプリケーション、ロギング、SSL

• VueJS：
  
  • Basic Vue-Javascript.NinjaからのVueコースに関する公開講座： Vue： starting 、 Reactivity
  
  • Vue Devtools 4.0の新機能
  
  • Vueのベスト認証プラクティス
  
  • 最初のVue.jsコンポーネントを作成する方法
  
  • Vue.jsでサーバーレス形式のチェックアウトを作成する： パート1-セットアップとテスト、 パート2-ストライプ関数とホスティング、 パート3-チェックアウトコンポーネントの適用、 パート4-チェックアウトコンポーネントの設定
  
  

• 反応：
  
  • ReactでWebpackを使用する方法：完全なガイド
  
  • React and React Routerを使用したコード分離
  
  • 事前反応のパフォーマンス
  
  • Reduxを使用する場合（および使用しない場合）
  
  • React.jsのよくある質問
  
  • After.jsの概要-Next.js -React Router 4を使用して作成されたサーバー側のReactアプリケーション用のフレームワーク
  
  • デザイン作成時のコード-スケッチからReactプロトタイプをエクスポートするためのツールの作成方法
  
  

• 角度：
  
  • Angular CLIプロジェクトでのPrettierの構成
  
  • NgClassを使用した角度CSSクラス
  
  • Angular 2のモジュールの学習：@NgModule
  
  

• ライブラリとプラグイン：
  
  • json-dry -JSONに変換し、循環リンク、日付、通常の日付を含むオブジェクトを解析できます
  
  • 電球：JavaScriptのリアクティブプログラミング用のライブラリ
  
  • jarvisは、Webpack用の非常に高度なブラウザダッシュボードです
  
  • webshot-factory-ヘッドレスChromeのスケーラブルなスクリーンショット
  
  

ブラウザ

• Firefox 58には、新しい2レベルのコンパイラが装備されます

• Mozilla Firefoxの新しいWebテクノロジーは、HTTPSを介してのみ利用可能になります

• Windows 10 Fall Creators UpdateのDevTools Consoleの改善

• DevToolsの新機能（Chrome 65）

おもしろい

• GoogleとMozillaはJPEGの「リタイアメント」を送信します

• GoogleはCourseraで基本的なITの概念に関する一連のコースを開始しました

• 今後10年間で最も予想される科学実験

• Amazonが登場：静かな本屋のJeff Bezosがビジネスからロックスターになった方法

• 日本の科学者は、メンタルイメージをイメージに変換するニューラルネットワークを作成しました

• GoogleがAutoMLを発表-初心者向けのニューラルネットワーク作成サービス

• パッチのエラーによる頻繁な再起動の問題は、Broadwell CPUとHaswell CPUだけでなく、前任者と後継者にも存在することを認めました 。

• アリババグループとマイクロソフトの人工知能は、情報処理テストで初めて人を上回りました。

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

先週のダイジェスト 。

dersmollとalekskorovinが作成した資料。