The digest of fresh materials from the world of the frontend for the last week No. 215 (June 6 - 12, 2016)

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

Web development

CSS

Javascript

Browsers

news

Web development

• Web standards podcast , Release 19 : CSS and HTML semantics, CSS content useful for SVG, web and applications.
• What should html-maker-up know?
• What services does a freelance frontend developer face? Interview with Anton Nemtsev
• Progressive web applications:
  
  • Progressive web applications - let's not repeat the mistakes that were at the beginning of the development of responsive design
  • PWA Discovery: You have not seen anything yet (PWA Discovery: You Ain't Seen Nothin Yet)
  • Problems and tasks of developers when working with PWA (Developers Surface Issues And Concerns With Progressive Web Apps)
  • Do not irresponsibly use iOS meta tags for your web applications (Don't use iOS meta tags irresponsibly in your Progressive Web Apps)
  
  
• Instruments:
  
  • Chrome add-on to validate your AMP pages
  • Debugging JavaScript with Chrome DevTools Breakpoints
  • Memory Debugging with Safari Web Inspector (Memory Debugging with Web Inspector)
  • DevTools Digest: DevTools in 2016 and beyond
  • How Mozilla helps developers deal with JavaScript errors (Helping web developers with JavaScript errors)
  
  
• What's new in Shadow DOM v1 (in examples) (What's New in Shadow DOM v1)
• Bootstrap 4: a visual guide and a review of innovations (Bootstrap 4: A Visual Guide)
• Automate your development with Gulp JS (Automate your Workflow with Gulp JS)
• CloudFlare presents cf-ui - open UI framework
• Why SVG online hosting is so complicated and how to do it (Why Hosting SVG Online Is Hard (... and How to Do It))
• About properties and attributes in the context of setting a mask using SVG (More About SVG Masking - Properties And Attributes)
• MIND Patterns - eBay Availability Book
• Importance of Code Review (The Importance of Code Reviews)
• Diving into Git: Jump to Git Branches (Jump Start Git: Branching in Git)
• Unique gradients built from data for visualizations with d3.js (Data-based and unique gradients for visualizations with d3.js)
• Weekly selection of beautiful effects on CSS / SVG / JS # 41

CSS

• New draft CSS module pseudo-elements 4 levels
• CSS magic. Chapter 3. Tables . Translation of a chapter from The magic of CSS
• Semantic CSS . Translation of Jonathan Snook's Semantic CSS article
• CSS Grid Layout and Positioned Elements . Translation of the article CSS Grid Layout and positioned items
• Battle with BEM: 10 most common problems and ways to solve them (part 1)
• Avoid Overriding Base Styles (Avoid Overstyling Base Styles)
• Rubber List on Flexbox from AMP Roadmap
• AOS: library for implementing CSS animations when scrolling the page
• Interactive data visualization: viewBox animation (Interactive Data Visualization: Animating the viewBox)
• 4 properties that change our way of using CSS (4 features transforming how we use CSS)
• Rationalization of functional CSS (Rationalizing Functional CSS)
• How to create a markup for a news site with Flexbox (How to Build a News Website Layout with Flexbox)
• Quick tip: how z-index and Auto Margin work in Flexbox (Quick Tip: How z-index and Auto Margins Work in Flexbox)
• CSS specificity (CSS Specificity)
• EQCSS - CSS extension library for working with Element Queries
• Learn Sass (course in codeacademy) (Learn Sass)
• Sass Deprecate - Sass Mixin, which signals outdated code (Sass Deprecate)
• Chinese text is displayed in different sizes and fonts: font problems in China

Javascript

• Asynchrony in JavaScript: A guide for those who want to understand
• jQuery 3.0 Final Released
• Introducing Functional JavaScript: Part 1
• Video from ReactEurope 2016: Day 1 , Day 2
• 7 amazing "properties" of JavaScript (Seven Surprising JavaScript 'Features')
• The Shocking Secret About Static Types
• TypeScript, WTF ?!
• I was wrong about TypeScript, and this is why (I Was Wrong About TypeScript, Here is Why)
• Making your JavaScript Pure
• Creating Objects in JavaScript: Patterns and Best Practices (JavaScript Object Creation: Patterns and Best Practices)
• Web Storage: lesser evil for session tokens (Web Storage: the lesser evil for session tokens)
• Create your own tagging system from scratch (Make your own tagging system from scratch)
• Why do you need key in default props (ReactJS)
• lernajs - a tool for managing multi-batch JavaScript projects
• ES6:
  
  • ES and Node.js: Hard Choices (ES Modules and Node.js: Hard Choices)
  • Why are there classes ES6 (Why do ES6 Classes exist and why now?)
  • 10 Lodash features that can be replaced with ES6 (10 Lodash Features You Can Replace with ES6)
  • Promises: all the wrong ways (Promises: All The Wrong Ways)
  • When not to use arrow functions (When 'not' to use arrow functions)
  • 6 tips for cleaner js promises
  
  
• Framework:
  
  • How to add ReactJS to an existing web application
  • Angular directives and their equivalents to React (Angular Directives Mapped to React)
  • Using React Native: A Year Later (Using React Native: One Year Later)
  • Scaling React.js applications (Scaling React.js Applications)
  • trixly - universal starter pack for Angular 2 and React, with tests for Mocha & Chai, TSLint-validation and compilation in ES5 with Babel (trixly - Universal TypeScript starter kit for Angular 2 and Reactor, tests in Mocha & Chai, TSLint for better code quality, transpilation to ES5 by Babel for compatibility)
  • Checklist for Angular Code Review Checklists
  • Comprehensive diving into Angular 1.5 lifecycle hooks (Comprehensive dive into Angular 1.5 lifecycle hooks)
  
  
• Lessons:
  
  • "Hero Node" - a lesson on unit testing Node.js (Node Hero - Node.js Unit Testing Tutorial)
  • Creating Real-time applications with Websockets and server-sent events (Building Real-time Apps with Websockets & Server-Sent Events)
  • Creating a video chat application based on WebRTC with PeerJS (Building a WebRTC Video Chat Application with PeerJS)
  • How to make an existing real-time API with FeathersJS (Make your existing API real-time with FeathersJS)
  
  
• Plugins:
  
  • chillout.js - reduce CPU usage by JSth using asynchronous iterations
  • lodash-bound - includes lodash chaining functions with ES bind (: :) syntax
  • is.js is a minimalist data verification library.
  • seen.js - render 3D scenes in SVG or HTML5 Canvas. (Render 3D scenes into SVG or HTML5 Canvas.)
  
  

Browsers

• Resize images in the browser. Things could get worse
• Firefox 47 Release , Technical Release Details for Web Developers
• Testing Firefox 48-beta and Firefox Developer Edition 49
• The release of the Opera 38 browser , What's new in Chromium 51 and Opera 38
• Chrome 51 is experiencing problems with the inability to use HTTP / 2
• In the stable version of Opera 38, a power saving mode has appeared, reducing the laptop's temperature by 3 degrees
• Firefox is scheduled to enable default multiprocess mode.
• The opening of the source code for the Microsoft Edge WebGL engine has begun.
• Yandex browser got a personalized tape of Zen recommendations

News and Entertaining

• Yandex made changes to the processing of the robots.txt file
• Google: Ads on AMP pages have higher visibility and CTR
• Google accused of manipulating Hillary Clinton
• Develop design flair
• India banned from doing street view for national security reasons
• "VKontakte" began the forced transfer of users to a new design.
• What European investors love startups: top 20 best projects at TNW Europe 2016
• The hacker who merged MySpace, LinkedIn and Tumblr data, sells 379 million Twitter accounts
• "Ten" at any cost: why did not go Windows 10?
• Google Play Music has learned how to select the "right" music that corresponds to the current moment.
• The whole world - energy problem map
• As a fan of "Star Wars" invented the languages ​​of nations "Game of Thrones"
• Why I refused $ 500 000, angered investors and closed the startup
• We listen to you carefully. Daniel Turovsky - on the vulnerability, which allows to open almost any mobile phone
• The vibration motor of the smartphone can be used as a microphone to listen to users
• Immortal Spammers: Why "Nigerian Letters" Still Work
• Fall in love with a robot: how technology changes relationships
• Ruler for quasar . How to measure distances in space and why sometimes they have to be reviewed

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 .