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