The digest of fresh materials from the world of frontend for the last week №212 (May 16 - 22, 2016)

We offer you a selection with links to useful resources, interesting materials and IT-news

Web development

CSS

Javascript

Browsers

Web development

• We compile an audiobook base for easy filtering.
• The 16th edition of Web Standards: battery, graphics, HEX-alpha, important, tables, polyfiles
• Creating a service worker: parsing an example
• Frontend VKontakte: Architecture? What is architecture?
• Video from Avito SPA meetup # 2
• Video of all reports from the section "Web and Chrome" on Google I / O 2016
• From Zero to Front End Hero , Part 1 (From Zero to Front-end Hero (Part 1))
• Introduction to the Web Animation API (Intro to the Web Animations API)
• Autocompletion: what web developers need to know, but don't know (Autofill: What web devs should know, but don't)
• Available tabs with ARIA, UI problems and standards (ARIA tabs, UI problems and standards)
• 15 tools for monitoring sites
• Why native ContentEditable is terrible (Why ContentEditable is Terrible)
• An Example of Creating a Living Style Guide (Creating an Living Style Guide: A Case Study)
• Visual Center - a tool that finds the visual center of your images
• Performance :
  
  • Google launched a new version of the Mobile-Friendly Test tool
  • Analysis of effects for performance degrading images (Web Image Effects Performance Showdown)
  • Browser Calories - an extension for Chrome, which measures the budget performance of the site
  • The Coach: A Modern Alternative for YSlow (The Coach: A Modern Alternative to YSlow)
  • Our best practices that kill mobile web performance (Our best practices are killing mobile web performance)
  
  
• AMP :
  
  • At the Google I / O 2016 conference, company representative Richard Gingras shared the latest statistics and news on the AMP project: the spread of the AMP format is growing rapidly, and Google has already indexed over 125 million AMP pages from 650,000 domains.
  • Google will appear AMP-page culinary sites
  • Google allows visitors to see AMP pages in Google Search Analytics reporting.
  
  
• Spectacular web :
  
  • Weekly selection of beautiful effects on CSS / SVG / JS # 38
  • Creation of adaptive looped animation with a walking person using SVG and CSS steps ()
  • Experiment with animation and UI (An experiment with Animation and UI)
  • THREE Image Transition
  
  

CSS

• Lost art of visiting links . Translation of the article The lost art of the visited links
• Good and bad CSS practices for beginners . Translation of Good and Bad CSS Practices for Beginners
• The importance of! Important: a guarantee of immutability in CSS . Translation of the article The Importance of Important: Forcing Immutability in CSS
• BeMantica: write meaningful styles without repetition . Translation of the BEMantic article : DRY Like You Mean It
• All or nothing . Translation of the article All or Nothing by Jonathan Snook
• Nuances of using chains of the same classes . Translation of the article Subtleties with Self-Chained Classes
• CSS magic. Chapter 1. Block
• Bootstrap's Reboot - the next step in the evolution of CSS Reset (Bootstrap's Reboot - Next Evolutionary Step for CSS Reset)
• CSS code writing techniques (CSS coding techniques)
• CSS Debugging (CSS Debugging)
• Tips for aligning icons relative to text (Tips for Aligning Icons to Text)
• ease-out, in; ease-in, out
• PostCSS Guide to Improving Selectors and Media Queries (The PostCSS Guide to Improving Selectors and Media Queries)
• Detailed parsing of property value syntax in CSS (Understanding The CSS Property Value Syntax)
• checkbox.css - a small set of CSS3 animations for checkboxes
• Using object-fit and object-position properties in CSS (Using CSS's object-fit and object-position properties)
• CSSPurge - CSS statistics on forty-two popular sites and frameworks
• Cutestrap - minimalistic CSS framework based on Sass (micro-alternative to Bootstrap)
• Carousel without JavaScript with full screen mode (Carousel without JavaScript)

Javascript

• Reduce the size of published npm modules
• What browsers do with your JavaScript code: about optimizations in JS engines using V8 as an example
• The foundation of scalability javascript application
• What is isomorphism for?
• Visualization of geo-data in d3.js
• JQuery 3.0 Release Candidate Release
• Postponed loading of images? Do not rely on JS! (Lazy Loading Images? Don't Rely On JavaScript!)
• Hacking the JavaScript Lottery Hacking Lottery
• Unraveling spaghetti code: how to write supported JS (Untangling Spaghetti Code: Write Maintainable JavaScript)
• Prototypical Inheritance in JS (Prototypal Inheritance in JavaScript)
• Martin Fowler: refactoring javascript code video store
• Custom PDF Rendering in JavaScript with Mozilla PDF.Js (Custom PDF Rendering in JavaScript with Mozilla's PDF.Js)
• Framework :
  
  • Compare React vs. Angular2: the battle of heavyweights in JS (React vs. Angular2 Comparison: A Heavyweight Bout for the JavaScript Title)
  • Use Angular CLI to speed up Angular 2 projects (Use the Angular CLI for Faster Angular 2 Projects)
  • Upgrade your application to Angular 1.5 and up! (Upgrade Your App to Angular 1.5 Components and Beyond!)
  • Things that impressed me in Angular 2 (Things that Excite Me about Angular 2)
  • React with Webpack + Meteor as backend
  • Component Components in React (Composable React Components)
  • Learn Redux - Video Tutorials for React and Redux
  • Creating React + Flux applications with user authentication (Build a React + Flux App with User Authentication)
  • How to write a Google Maps React Component (How to Write a Google Maps React Component)
  
  
• ES6 :
  
  • Understand the spaces in the ES6 template literals (Handling whitespace in ES6 template literals)
  • Classes in ES6 - the new “bad” part in JS6 (Is “Class” In ES6 The New “Bad” Part?)
  • Optimize ES6 code for productive minification (Optimize ES6 Code For Output Minification)
  • Studying Promises in ES6 (Learning ES6: Promises)
  • Six elegant tricks for ES6 (Six nifty ES6 tricks)
  • The Hidden Power of ES6 Generators (The Hidden Power of ES6 Generators: Observable Async Flow Control)
  • lebab - converts ES5 code to readable ES6 code (babel vice versa) (lebab - Turn your ES5 code into readable ES6 (sugar-syntax). It does
  • Interpolate strings in javascript . Kyle Simpson demonstrates how much easier it is to collect strings in ES6 (JavaScript string interpolations)
  • ES6 modules and others from ES2015, ES2016 and higher in preview Microsoft Edge (Previewing ES6 Modules and more from ES2015, ES2016 and beyond)
  
  
• Plugins :
  
  • Push.js - a solution for cross-browser notifications using the JavaScript Notifications API
  • Timedropper - jQuery time plugin
  • nlp_compromise - use natural English in JS
  • jQuery text plugins (10 jQuery Text Highlighter Plugins)
  • Selection of solutions for creating responsive data tables
  
  

Browsers

• Firefox for the first time overtook Microsoft browsers in terms of frequency of use
• Google has planned a complete failure to autorun Flash in Chrome by the end of 2016
• Chrome stops using Backspac to navigate
• Opera restarted recommendation news service in the browser
• Bookmarks interface will be improved in Firefox
• Web Notifications in Microsoft Edge
• A look back: one year Microsoft Edge
• Flash is dead (in Chrome), and this time it is exactly like this (Flash is dead (in Chrome), and this time)

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 .