The digest of fresh materials from the world of the frontend for the last week №280 (September 11 - 17, 2017)

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

• Web Standards podcast # 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.
• Five Minute React podcast # 35: FrontFest 2017
• Podcast "Frontend Weekend" # 19: Yuri Artyukh teaches how to become the most beautiful typesetter runet
• Podcast "Frontend Youth (18+)" : FrontTalks - the best conference in the galaxy
• Web Standards Podcast, Episode # 85: Aga Naploha, Harry Roberts, Eva Lettner, Zack Leserman and Hugo Zhiradel in a special issue of Web Standards
• Drinkcast Podcast, Release # 8: “What is FrontOps”
• "ALL YOUR HTML" # 14: "Animate graphics to SVG and Canvas, + perlin noise"
• HTML Shorts: Math for the programmer , plus text version
• Reports from Frontend Mix: optimization of loading sites and design system on BEM and React

Web development

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

• Performance:
  • How to speed up the loading site
  • A note on hacks.mozilla.org about quickly building a DOM - 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)
  

• Instruments:
  • Oh, the very long-awaited release of Sublime Text 3.0
  • Atom text editor has become the development environment
  • Prototyping DevTools features in future 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 and modify CSS variables using Javascript
• Locked buttons - sucks
• CSS-in-JS - how to replace a broken screwdriver with your favorite hammer
• Complete Flexbox Tutorial - Case Study
• New guide to support CSS in letters from campaignmonitor
• Video about creating CSS Grid . See how CSS Grid Layout went from idea to real distribution in all major browsers in 2017
• Remove unused CSS rules
• Devices.css - a selection of modern devices, recreated in "pure CSS"

Javascript

• Why does the Facebook SDK take up about 16% of the JavaScript code on sites 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 to deal with four common memory leaks
• Are search engines other than Google ready for crawling and indexing JavaScript?
• What I love and hate during Flow
• Does it make sense to people who can not write JavaScript?

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

• Theory:
  • JavaScript: the mysterious case of the expression null> = 0
  • Think like javascript . Kyle Simpson’s article “Thinking JavaScript”
  • JavaScript: Asynchronous Programming Techniques
  • Why are “throttling” and “debouncing” so called?
  • OOP in javascript
  

• VueJS:
  • Patterns of separation of application code on Vue.js
  • 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 more React application and make it scalable
  • react-powerplug - creates a state and passes logic to its children, giving life to dumb components
  

• Angular:
  • How I stopped loving Angular
  • Using Web Components with Angular
  • Get started with end-to-end testing at Angular using Protractor
  • Problems with the protection of the route in Angular
  

• Libs & Plugins:
  • p-progress is the creation of a promise that reports progress.
  • punchcard - jquery plugin for creating graphs in the style of GitHub punch cards
  • classwrap - js utility for concatenating CSS class names according to specified conditions
  • ellipsed - JS library for adding ellipsis in multiline texts
  

Browsers

• Chrome 64 will automatically stop playing video with sound , and FTP will be marked as unsafe
• The Mozilla project introduced an add-on with the implementation of context containers for Firefox
• Firefox 57 will update the look of the developer tools.

Entertaining

• iPhone X, iPhone 8 and 8 Plus, Apple Watch Series 3 and Apple TV 4K
• Russian designers and developers about the iPhone X, iPhone 8 and other announcements of the Apple presentation
• W3C has developed an API for cryptocurrency payments in browsers
• Neural network of the day: 3D face mask based on a photo
• Release of Vagrant 2.0, a toolkit for creating virtual environments
• The casino network has been compromised through a “smart” aquarium
• Oracle chose the Eclipse Foundation to transfer its Java EE development.
• The human brain is planning to connect to the “Internet of things”
• Why Silicon Valley is criticized more often, and what to do about it
Go

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 by dersmoll and alekskorovin