The digest of fresh materials from the world of the frontend for the last week №285 (October 16 - 22, 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

• Podcast "Frontend Weekend" # 24 - Vadim Rezvy on the founding of Moscow Coding School, friendship with presidents, rap and Hinduism
• Devschacht podcast: Issue 9 - Eychary, Cerebral and Deployment Questions
• Podcast "Frontend Youth (18+)" # 23 Everything you need to know about functionalism
• The podcast "Drinkcast", Issue # 13 - "OOP is a hoax"
• "ALL YOUR HTML" # 19: "Swallows in the sky under Strauss"

Web development

• Mozilla, Microsoft, Google, W3C and Samsung unify Web-technology documentation.
• Front-end life in Spotify
• Errors and controversial issues in HTML-CSS layout . Part 3: Styling
• Front-End-Checklist - detailed structured checklist for frontend developers - from web fonts and meta tags to accessibility and SEO
• 5 tips before starting a frontend refactoring project
• Painless API introduction: use, integration and benefits
• Migration towards Yarn and Webpack
• How would I explain a decade of web development to a time traveler from 2007
• Accessibility components: # 1 colors and contrast , # 2 dynamic ARIA tags
')

• AMP / PWA:
  • Project AMP 2 years, Automattic interacts with Google to improve WordPress-plugin
  • AMP: two years user oriented pages
  • Arguments for AMP: lessons from ten practical examples
  • Tips for working with Progressive Web Apps in DevTools
  • How to debug Progressive Web Apps using browser tools
  

• Performance:
  • The whole web on 60+ FPS: how a new renderer in Firefox got rid of jerks and slowdowns
  • Wait a minute, and WebP is really nothing!
  • Can you afford it? Real-world performance budgets
  • We increase the speed of the site Shopify - step by step analysis of optimization
  

• Animation:
  • Weekly selection of beautiful effects on CSS / SVG / JS # 58
  • First look at GreenSock's “GSDevTools” , a visual tool for working with complex animations
  • Overlay mapping effect using dynamic forms on SVG
  • Seamless loop for animation SVG stroke
  • Interesting Drops Spreading Effect on CSS
  • Metaballs - in detail about the morph effect of the flow of one round shape to another
  

CSS

• How the trick helps . The manager and the designer force to clean the offline everywhere. Tell them it's a bad idea!
• Indentation in the layout (margin / padding)
• A look back at CSS history.
• Prettier + Stylelint: writing very clean CSS
• So, can we already use CSS variables?
• CSS Box Shadow vs. Drop Shadow - comparing two methods
• My approach to using z-index

• Fonts:
  • An impressive selection of strategies for downloading web fonts from Zach Leatherman, with demos and descriptions
  • Web typography: numbers in fonts
  • Fontisto - icon font with a set of 267 available icons
  

• Grid Layout:
  • The history of CSS Grid from its creators
  • Naming things in CSS Grid Layout
  • What I learned about CSS Grid layouts - Rachel Andrew report on CSS Day 2017
  • Introducing CSS Grid Layout: Part 1 , Part 2
  

Javascript

• Why robots have to format the code for us
• A tricky javascript question asked at Google and Amazon interviews
• How JS works: event loop, asynchrony, and five ways to improve code with async / await
• First TypeScript Demo
• Modern javascript explained for dinosaurs
• The melting pot JavaScript , article by Dena Abramova
• Control object visibility using the IntersectionObserver API
• Ember.js: the perfect framework for web applications

• ES2015 +:
  • ES6 for beginners with examples
  • ES2015 + Cheat Sheet
  • Moki in tests - this is the code with the smell
  

• VueJS:
  • Create live chat on VueJS, Vuex & Cloud Firestore
  • vue-mc - models and collections for Vue.js
  • Vue.js + Brunch: The Webpack Alternative You Have Been Waiting For
  

• React:
  • 8 key decisions in development on React
  • How we moved to React 16
  • How to structure components in React?
  • How to migrate an application from AngularJS to React and Redux
  

• Angular:
  • Top 12 Angular WebStorm Production Tips - Part 1
  • Angular 4 Basics: Data Binding
  

• Libs & Plugins:
  • Say hello to Schnack.js : new library for commenting in the style of Disqus, for static sites
  • Introduction to open source crossdomain javascript package from PayPal
  • accessibilityjs - client accessibility error scanner
  

Browsers

• Google Chrome 62: Added support for OpenType Variable Fonts, expanded HTTP warnings
• Bleeping Computer: Chrome will get the function of blocking mining on sites
• Google has added antivirus functions to Chrome for Windows browser
• Google criticized the Microsoft update system. In response, Microsoft told about the RCE-bug in Chrome
• What's New in Microsoft Edge for Windows 10 Fall Creators Update : CSS Grid Layout, object-fit / position, WebVR motion controllers, Service Worker preview, DevTools improvements, and more
• Firefox Nightly adds support for PWA
• Technical details of Safari Technology Preview 42

Entertaining

• Microsoft officially released Windows 10 Fall Creators Update
• Detailed information about WPA2 issues has been published.
• Critical vulnerability in the Wi-Fi WPA2 security protocol: an overview of the situation
• How technology companies responded to news about a Wi-Fi vulnerability
• GitHub has published statistics for 2017
• Tim Cook: “It’s better to learn code, not English, instead of a second language”
• New services for mining through browsers appear like mushrooms after rain
• How great engineers seek help
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 dersmoll and alekskorovin .