The digest of fresh materials from the world of the frontend for the last week №298 (January 15 - 21, 2018)

We offer you a selection with links to new materials from the front-end area and around it.

Media | Web Development | CSS | Javascript | Browsers | Entertaining

---

Media

• Podcast "Frontend Weekend" # 36 - Lyudmila Mzhachikh about MoscowCSS, Coding Girls and Liu Vera
• Podcast "Web Standards", Issue # 104: Clarification about the matches selector, grids for business, neurograf, or how machines will not replace you, agreement on main, common JS modules, shorts and respect
• Podcast "Frontend Youth (18+)" # 34 Programmers - snickering majors of modernity
• Devschacht podcast: Night frontend # 18 - PiterJS 21 and Ya.Subbotnik in Nizhny Novgorod
• ALL YOUR HTML # 32: Wavy PIXI.JS Images
• Loftblog Devshow: "React.js - Tips from the pros . " Pyatminutka React podcast creator Peter Myazin talks about React and gives useful tips to newcomers.

Web development

• Web components: review and use in production
• Bootstrap 4 out of beta , discussion on reddit
• How to create a Living Style Guide
')

• Performance:
  • How to speed up site loading: 7 optimization tips for beginners
  • Even if your site does not focus on emerging markets, this does not mean that it should not be optimized.
  • The download speed of the pages will affect the results of Google search results (C July 2018)
  • How to optimize CSS and JS to speed up the site. Review of standard practices
  • We measure the performance of AMP
  • Accelerate the site using preconnect tips
  • Speedometer 2.0 - new JS performance test in browsers created with the participation of WebKit and Chromium commands
  

• Instruments:
  • Tools: Gulp - a new release on .getInstance
  • hey meta - quick check and generation of social meta tags
  • Puppeteer 1.0 released: Chrome 65, JS / CSS code coverage API, PDF customization, XPath support, devtools protocol access
  • Saving speed webpack: a guide to improve performance
  

• Accessibility:
  • List of lists with links to materials and resources on accessibility
  • Chrome DevTools provides a great way to determine and correct color contrast ratios to meet accessibility standards. Color picker is almost everything you need
  • Getting started with accessibility in Vue . How vue works, using ARIA, dynamically configuring headers with vue-router and managing focus with directives
  • Five options in which artificial intelligence can change web accessibility
  • A new federal law has entered into force in the US, requiring all state sites to be accessible (Section 508 Compliance)
  

• Animation:
  • 18 Creative CSS Animation Examples
  • Simplex Flower Generator - Three.js / WebGL
  • Interesting slideshow effect with increasing silhouette
  • Canvas-simulation of javascript / HTML5 jelly effect
  

CSS

• Undocumented CSS Techniques
• BEM for beginners. Obvious and non-obvious layout questions
• 5 interesting HTML and CSS properties to expect in 2018
• How big is this rectangle? Understanding CSS Layout Sizes
• Learning CSS Grid Layout with Swiss
• Layout Land - Jen Simmons' new YouTube show on Grid Layout
• CSS naming conventions that will save you debug hours
• Unfair style sheets . An example of tracking / analyzing a site using pure CSS without JavaScript
• CSS Paint API
• CSS Grid + CSS Multi-Columns = <3
• cssgrid.io - free CSS Grid course of 25 videos from Wes Bos

Javascript

• JavaScript: trend forecasts for 2018 based on international survey results
• Javascript and horror mutations
• State Machines and Web Application Development
• Comprehensive framework for javascript frameworks
• JQuery 3.3.0 release - several new features and a whole bunch of deprecations
• So you want to use ES6 modules
• Complete Guide to Deploying JavaScript Applications, Part 2: Single Page Applications, Logging, SSL

• VueJS:
  • Basic Vue - open lectures on the course Vue from Javascript. Ninja: Vue: the beginning , Reactivity
  • What's new in Vue Devtools 4.0
  • Authentication Best Practices for Vue
  • How to create your first component Vue.js
  • Creating a serverless checkout form on Vue.js: Part 1 - Setup and testing, Part 2 - Stripe Function and hosting, Part 3 - application component of the checkout, Part 4 - setting up the component of the checkout
  

• React:
  • How to use Webpack with React: the complete guide
  • Splitting code with React and React Router
  • We promote React performance
  • When to use (and when not) Redux
  • Frequently asked questions React.js
  • Introduction to After.js - a framework in the style of Next.js for server applications that are being rendered on React, created using React Router 4
  • Code when creating a design - how we created a tool for exporting React prototypes from Sketch
  

• Angular:
  • Configure Prettier on Angular CLI Project
  • Angular CSS Classes with NgClass
  • Let's learn the module in Angular 2: @NgModule
  

• Libs & Plugins:
  • json-dry - allows turning into JSON and parsing objects containing circular links, dates, regulars
  • Bulb: a library for reactive programming in javascript
  • jarvis - very advanced browser dashboard for Webpack
  • webshot-factory - scalable screenshots taken in headless Chrome
  

Browsers

• Firefox 58 will be equipped with a new two-level compiler
• New web technologies in Mozilla Firefox will only be available via HTTPS
• DevTools Console Improvement in Windows 10 Fall Creators Update
• What's new in DevTools (Chrome 65)

Entertaining

• Google and Mozilla will send JPEG "retired"
• Google launched on Coursera a series of courses on basic concepts of IT-sphere
• The most anticipated scientific experiments of the next decade.
• Mr. Amazon is coming to light: how Jeff Bezos turned from a quiet bookseller into a rock star from business
• Japanese scientists created a neural network that turns mental images into images
• Google announced AutoML - a neural networks creation service for beginners.
• Intel admitted that problems with frequent reboots due to errors in the patches are not only in CPU Broadwell and Haswell, but also in their predecessors and successors
• The artificial intelligence from the Alibaba Group and Microsoft for the first time bypassed a person in an information processing test.

We apologize for any typos or broken / duplicate links. If you notice a problem - please write in a personal, we are trying to fix them quickly.

Digest from last week .
Material prepared dersmoll and alekskorovin .