The digest of fresh materials from the world of the frontend for the last week №216 (June 13 - 19, 2016)

We offer you a selection with links to useful resources and interesting materials from the frontend area.

Web development

CSS

Javascript

Browsers

News and entertaining

Web development

• Web standards podcast , issue 20 : Firefox, Chromium and jQuery releases, practical CSS, SVG typography, bloody open web, and Dmitry Baranovsky tells how things are in Adobe.
• Frontflip podcast , episode 18 . "Persuade me to change Redux to MobX." Peter Myazin
• Google: common mistakes when adding a logo to AMP pages
• How we use SVG sprites
• Where the Web is heading in 2016 (Where The Web Is Going In 2016)
• You can't just learn and write code (One does not simply learn to code)
• Fucking Open Web
• Review of online sandboxes for writing code (A Round up of Online Code Playgrounds)
• UX form validation using HTML and CSS (Form Validation UX in HTML and CSS)
• Details on how to create new templates for distribution to Tuts + (How we Did It: Building the New Tuts + Email Templates)
• PNG to WebP - Comparison Size Comparison
• Video recordings of reports from the Web Rebels 2016 conference
• Setting and calculating web performance budget (Setting and Calculating a Web Performance Budget)
• Landing Page Optimization: radio buttons vs dropdowns (Landing Page Optimization: Radio buttons vs. dropdowns)
• How Emoji Can Improve Your Code (How Emoji Can Improve Your Code — Seriously)
• Google Fonts website got redesign and new features.
• Styling Development with Atomic Docs (Style Guide Driven Development with Atomic Docs)
• Mega Boilerplate - a starting set of technologies in the form of an interactive generator for a quick start of the project
• Improving the quality of front-end projects automatically (Improving the Quality of Front End Projects, Automatically! Pt. 1 - HTML)
• Spectacular web
  
  • Interactive Player Using Web Audio API
  • SVG book page turning animation (SVG: Multiples Make A 3d Flip Book)
  • Dynamic bi-color SVG images using feColorMatrix and Jade (Dynamic duotone SVG images with feColorMatrix and Jade)
  • Sticking demo on canvas with emulation of the physical properties of the fluid
  • Weekly selection of beautiful effects on CSS / SVG / JS # 42
  
  

CSS

• How to call css-classes
• Designing <use> content in SVG with CSS
• CSS magic. Chapter 4. Color
• Web Font Download Patterns
• How z-index and autoindent work in flexbox
• Battle with BEM: 10 most common problems and ways to solve them (part 2)
• Video with PiterCSS # 5
• Yuri Zaitsev on how to improve the quality of CSS code on Facebook (Improving CSS quality at Facebook and beyond)
• Exposing pixel density (Pixel Density, Demystified)
• Comparison of the best CSS pre- and post-processors (What are the best CSS preprocessors / postprocessors?)
• 7 PostCSS plugins to facilitate the start of using PostCSS (7 PostCSS Plugins to Ease You into PostCSS)
• Google Chrome default browser styles (The default style sheet used to render HTML)
• React CSS components (React CSS components)
• Reflections on floats, figures, regions and grids
• Snapper: A CSS Snap Points Carousel
• Integrate Stylelint into your development process to improve CSS (Integrate Stylelint Into Your Workflow For Better CSS)
• About Using Pointer Events (A Mouse, Some Touches, and All Sorts of Pointers)
• CriticalCSS in action
• Implementing baseline rhythm in CSS

Javascript

• Video from Frontend Conf 2016: Library of UI components you have always dreamed of
• Making your javascript clean
• Introducing Functional JavaScript: Part 2
• Two pillars of javascript
• Video reports from JSConf Budapest 2016
• Framework:
  
  • Redux Tutorial
  • Video recording of reports from the conference React Amsterdam 2016
  • Choosing a JavaScript framework (Choosing a JavaScript Framework - Rob Eisenberg)
  • Testing AngularJS with Jasmine and Karma (Part 1)
  • Structure of React and Redux Applications (Structuring React and Redux Applications)
  • Minimum starting kit for working with React (The bare minimum to work with React)
  • Three reasons why I stopped using React.setState (3 Reasons why I stopped using React.setState)
  • React: ES5 (createClass) or ES6 (class)? (React: ES5 (createClass) or ES6 (class)?)
  • Egghead Courses Review: React, Reactive Programming, and Egghead Courses Review: React, Reactive Programming & Open Source
  • Syntax Angular Component (Angular Component Syntax)
  • Angular 2.0 RC2 (RC2 Now Available) Available
  • Revised Angular 2 Routing (Routing in Angular 2 revisited)
  • Preact - an alternative to React with the same ES6 API (Preact)
  
  
• ES2015, ES2016:
  
  • # ES2016 (aka # ES7) spec is out.
  • ECMAScript 2016 approved
  • ES6: Number object improvements from the inside
  • Understanding JavaScript Promises, Pt. I: Background & Basics
  • Worldview based on promises (A Promise-Based Worldview)
  
  
• gulp-sww - a plugin for gulp that allows your web application or site to work offline using ServiceWorkerWare and AppCache
• ESLint Study (ESLint Part 1: Exploration)
• Migrating 10k lines of JS TypeScript code (Migrating a 10,000-line legacy JavaScript codebase to TypeScript)
• Functional programming in JavaScript (Functional Programming in JavaScript)
• Functional concepts for JavaScript developers: currying (Functional Concepts For JavaScript Developers: Currying)
• Currying Functions in JavaScript
• How three dots changed javascript ( how three dots changed javascript)
• Isomorphic Javascript, even easier. (Isomorphic Javascript, let's make it easier.)
• One weird trick that will change your way of writing code is: JavaScript TDD (JavaScript TDD)
• History of JavaScript module loaders (History and Background of JavaScript Module Loaders)
• Learning the basics of D3.js, growing vegetables in a vegetable garden (Learn D3.js Basics By Planting A Vegetable Garden)
• Practical functional programming with Ramda.js (Hands-on Functional Programming with Ramda.js)
• PQ: Human Readable Promise Chain Compiler (PQ: Human Readable Promise Chain Query Compiler)
• Kakapo.js - a new generation framework for creating mocks (Kakapo.js - Next generation mocking framework in Javascript)
• fetch-sync - proxy fetch requests through the Background Sync API (fetch-sync - Proxy fetch requests through the Background Sync API)

Browsers

• Experimental support for virtual reality in Google Chrome
• Opera ad blocker is now available on all mobile platforms.
• What's new in Safari
• Google is preparing a big optimization for Chrome 53
• Blisk: your next web development browser? (Blisk: Your Next Web Development Browser?)

News and Entertaining

• The developers showed the world's first 1000-core processor
• GitHub warned of an attack using passwords intercepted from other sites
• The era of copying Apple comes to an end
• Samsung buys Joyent
• "Yandex" opens the source code ClickHouse
• Microsoft buys LinkedIn for $ 26.2 billion
• Why Microsoft bought LinkedIn
• How IT experts and users of social networks have responded to the deal between Microsoft and LinkedIn
• 10 rules that allow NASA to write millions of lines of code with minimal errors
• WWDC'16 in 10 minutes: iOS 10, macOS Sierra and watchOS 3
• Supervision technology: there is no privacy
• The best trailers of the past E3
• "Everyone will suffer": How the introduction of a "tax on Google" will affect the Russian IT market
• Where is the money: the top 10 most "generous" startup accelerators in the world
• Social networks: it was and passed
• 7 gadgets that everyone should try
• Top 5 IT-companies in the ranking of the most expensive brands
• Google accused of stealing ideas Project Loon

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 .