The digest of fresh materials from the world of the front-end for the last week No. 280 (September 11 - 17, 2017)

We bring to your attention a selection with links to new materials from the frontend area and around it.

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

---

Media

• Podcast "Web Standards" # 86: How to fit into iPhone X, code editors, inverse theme in 153 bytes, life after git --force, grid history, layout and programming, ES-modules in Node and in battle.
• Podcast “Five Minutes React” # 35: FrontFest 2017
• Podcast “Frontend Weekend” # 19: Yuri Artyukh teaches how to become the most beautiful layout designer of Runet
• Podcast “Frontend Youth (18+)” : FrontTalks - the best conference in the galaxy
• Podcast “Web Web” Standards ”, Episode # 85: Aha Naploha, Harry Roberts, Eva Lettner, Zack Lezerman and Hugo Giradel in a special issue of“ Web Standards ”
• Podcast“ Drinkcast ”,Issue # 8: “What is FrontOps”
• “ALL YOUR HTML” # 14: “We animate the graphics on SVG and Canvas, + perlin noise”
• HTML Shorts: Mathematics for the programmer , plus the text version
• Reports from Frontend Mix: optimizing site loading and design system for BEM and React

Web development

• Errors and contentious issues in HTML-CSS layout
• Weekly compilation of beautiful effects on CSS / SVG / JS # 53
• How to remove white bars in Safari on iPhone X (background-color, viewport-fit, safe-area-inset- *)

• Performance:
  • How to speed up website loading
  • Note on hacks.mozilla.org about fast DOM building - risky parsing, async, defer and preload
  • Addy Osmani on how Treebo radically increased the speed of the mobile version of the site (React / Preact PWA)
  

• Tools:
  • Oh, very long-awaited release of Sublime Text 3.0
  • Atom text editor has become a development environment
  • Prototyping DevTools features in future versions of browsers
  

• Wordpress:
  • WordPress refuses React, Gutenberg will be rewritten based on another library
  • Gutenberg offers a new approach to TinyMCE in WordPress 5.0
  • Gutenberg 1.1.0: new editor features
  

CSS

• Access to CSS variables and changing them using Javascript
• Locked buttons sucks
• CSS-in-JS is how to replace a broken screwdriver with your favorite hammer
• Complete Flexbox Guide - Learn by Example
• New CSS Support Guide in letters from campaignmonitor
• Video about creating CSS Grid . See how CSS Grid Layout has gone from an idea to a real spread in all major browsers in 2017.
• Remove unused rules of the CSS
• Devices.css - a selection of modern devices, recreated in the "pure CSS»

Javascript

• Why the Facebook SDK occupies about 16% of JavaScript code on websites and what it means
• Babel: changes planned for version 7.0
• How to reduce the impact of third-party JS scripts on the performance of the entire site
• How JavaScript works: memory management + how deal with four common memory leaks
• Are search engines other than Google ready for crawling and indexing JavaScript?
• What I love and hate about Flow
• Does it make sense for people who can't write JavaScript?

• ES2015 +:
  • Using ES2015 + code on production today
  • Async / Await will make your code easier
  • Asynchronous recursion with Callbacks, Promises and Async.
  • A simple explanation of monads in JavaScript
  • HTML templates implemented using JavaScript Template Literals
  

• Theory:
  • JavaScript: the cryptic matter of expressing null> = 0
  • Think like JavaScript . Translation of Kyle Simpson's article “Thinking JavaScript”
  • JavaScript: asynchronous programming methods
  • Why are “throttling” and “debouncing” so called?
  • OOP in JavaScript
  

• VueJS:
  • Vue.js application code separation patterns
  • Vue.js and transitions render functions
  • Phytochemia: why we chose Vue.js
  

• React:
  • What's new in React 16? . The article describes an example of creating a music player using some of the features of the new React
  • React for Angular developers
  • How to organize a larger application on React and make it scalable
  • react-powerplug - creates state and passes logic to its children, giving life to dumb components
  

• Angular:
  • Как я перестал любить Angular
  • Использование Веб Компонентов с Angular
  • Начало работы с End-to-End тестированием в Angular с использованием Protractor
  • Проблемы с защитой роута в Angular
  

• Libs & Plugins:
  • p-progress — создание промиса, который сообщает о прогрессе.
  • punchcard — jquery плагин для создания графиков в стиле GitHub перфокарт
  • classwrap — js утилита для конкатенации имен CSS классов по заданным условиям
  • ellipsed — JS библиотека для добавления троеточия в многострочных текстах
  

Браузеры

• Chrome 64 will stop the automatic playback of video with sound , and FTP will be flagged as an insecure protocol
• Mozilla has introduced an extension with the implementation of contextual containers for Firefox
• In Firefox 57, the appearance of tools for developers will be updated

Entertaining

• iPhone X, iPhone 8 and 8 Plus, Apple Watch Series 3 and Apple TV 4K
• Russian designers and developers about iPhone X, iPhone 8 and other Apple presentation announcements
• W3C developed an API for cryptocurrency payments in browsers
• Neural network of the day: 3D mask faces based on photography
• Vagrant 2.0 release, tools for creating virtual environments
• The casino network was compromised through a smart aquarium
• Oracle chose the Eclipse Foundation to transfer Java EE development
• The human brain is planning to connect to the Internet of things
• Why Silicon Valley is criticized by everyone more often and what de amb

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

→ Digest last week
Material prepared dersmoll and alekskorovin