The digest of fresh materials from the world of the frontend for the last week №240 (December 5 - 11, 2016)

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

Web development

CSS

Javascript

Browsers

Entertaining

Web development

• Basic principles of markup in HTML 5.1 (Document Outlines in HTML 5.1)
• Image masking with SVG
• The easiest and most productive way to connect links for social media
• We need to talk about technical duty (We Need to Talk About Technical Debt)
• Nine resources to learn to code 15 minutes a day.
• Trends:
  
  
  • Languages, frameworks and tools that you "should" learn in 2017
  • Top JS frameworks and themes for study in 2017
  • 5 "best" Javascript frameworks to learn in 2017
  • Reflections on the future of the web (Access and Experience: The Future Web)
  
  
• Performance and optimization:
  ')
  
  • Pro Rendering Optimization - With Optimism
  • Instant Static Web Pages with Service Worker
  • 60fps web animation
  • We save 2000 terabytes per day due to optimization of Font Awesome
  
  
• Availability:
  
  
  • Accessibility - MDN's Updated Accessibility Guide: WAI-ARIA Basics, HTML and CSS , Multimedia and Mobile Accessibility
  • Web Accessibility - Developing web with empathy (Web Accessibility - Developing web with empathy)
  • Be wary of nesting roles (Be Wary of Nesting Roles)
  
  
• AMP & PWA:
  
  
  • Progressive web amps
  • The lesson I learned from working with AMP from Google
  • CloudFour shares the experience of translating a site to PWA (Hey, Hey, Cloud Four is a PWA!)
  • Creating a Bluetooth Web Progressive Web App

Media

• Podcast “Web Standards”, Release №45 : Chrome 55, debugging grids, URL parser, PWA as APK, Supports, CSS in JS and backtick, fonts in Medusa, tools 2016.
• Radiojs Podcast, Release 43: The Violet Pattern . RxJS 5, PRPL pattern, HTTP 2.0 vs bundling
• J.Subbotnik on the frontend - recording of direct travel and slides (December 10)
• KharkivJS # 7 2016
• Chrome DevTools: Optimize your Web Development Workflow 2016 . Materials on the report from Umar Hansa, which includes video, 177 slides and bonus content
• CSSConf.Asia 2016
• JSConf.Asia 2016
• ffconf 2016
• ReactiveConf 2016

CSS

• GPU animations: doing it right
• Battle css-in-js
• CSS @support directive and its counterpart in JS. Ready to use! (CSS support directive and its JS twin. Ready to use!)
• CSS Grid! Eric Meyer's optimistic mini-interview about the upcoming CSS Grid Layout
• Virtual CSS with Styletron
• BEM and supported CSS
• The power of CSS selectors and how to use them
• Text balancing in responsive design
• Flexible typography with: root
• CSS shorthand syntax is considered as an anti-pattern (CSS Shorthand Syntax Considered an Anti-Pattern)
• Exploring linear-gradient () with complex chess pattern design
• New World: Writing CSS in ClojureScript and Life after Sass
• Using CSS Variables in Website Development (Using CSS Variables in Site Development)
• Loops in CSS preprocessors
• CSS object-fit to add power to your layout.

Javascript

• Neural networks on JS. Creating a network from scratch
• Dear javascript , I want to tell you about a problem in our community.
• React, Web Components, Angular and jQuery are friends forever. Generic JavaScript Components
• Challenge JavaScript30
• Unraveling spaghetti code: how to write supported javascript
• Funny hacks to speed up content
• Native JavaScript development after Internet Explorer
• Displaying dynamic messages using Web Notification API
• How should Remy Sharp's tabs work
• Examples of JavaScript code that is relevant for 2016 according to the author (Enough JavaScript to be dangerous in 2016)
• Lesson on creating Scrollspy navigation on JS
• styletron - universal high-performance styles css-in-js
• News:
  
  
  • Release V8 version 5.6 (V8 Release 5.6)
  • Angular 1.6 is already here, and this is what you should know about it.
  • Angular 2.3.0 release
  • The current state of Babel and his plans for the future
  • TypeScript 2.1 announcement , TypeScript 2.1: async / await for ES3 / ES5
  • Async / Await earned in Firefox
  
  
• ES6:
  
  
  • Promise JavaScript Guide for Newbies
  • Unchangeable JavaScript: how it is done with ES6 and higher
  • What and how in ES6: tricks, best practices and examples. Part two. Maps, weak mappings, promises, generators, async / await, getters / setters, symbols
  
  
• Static typing and Flow:
  
  
  • Basics of Flow in 10 Minutes (The Fundamentals of Flow in 10-ish Minutes)
  • Type checking in JavaScript: Getting Started with Flow. (Type Checking In JavaScript: Getting Started with Flow.)
  • Why use static types in javascript? Part I , II & III
  • You may not need TypeScript (or static types) (You Might Not Need TypeScript (or Static Types))
  
  
• Framework:
  
  
  • Essentials of React Application Performance
  • Is it possible to do without jsx and why?
  • Translated documentation Vue.JS 2.x
  • 5 free tutorials on VueJS
  • Laravel chose Vue, but you don't have to (replacing it with React)
  • If you switched from React to Vue, why did you do it? Big reddit thread
  • React on the server side (Server Side React)
  • Beginning of the quest to write code: How to write your first React component
  • Wrong comparison of React and Angular (Wrong comparisons between React and Angular)
  • Why we chose Angular 2 instead of React for our enterprise development
  
  
• Plugins:
  
  
  • pulltorefresh.js - fast and powerful plugin to implement pull-to-refresh in your web application
  • myScale - Quick SVG Icon Resizer
  • Siema - another easy and simple carousel without dependencies
  • es-beautifier - ECMAScript beautifier based on eslint

Browsers

• Firebug development tool closes: “Use Firefox DevTools”
• The new version of the browser Chrome 55 uses about 30% less RAM than the previous Chrome 54
• Chrome 56 Beta: “Not Secure” warning, Web Bluetooth and CSS position: sticky
• Google Chrome completely stops supporting Adobe Flash Player.
• Google has added the ability to download music and video to Chrome for Android
• Details of the latest update for Microsoft Edge - partial support for CSS Custom Properties, Async / await, improved DOM performance and more.
• Release Notes for Safari Technology Preview 19

Entertaining

• It is finished! Full Windows 10 comes to ARM
• YouTube has paid $ 1 billion in royalties to musicians and labels over the past 12 months
• Where to go to learn a programmer: advice from an experienced team leader, teacher and beginner
• Myths that programmers believe in
• "Remove everything from the table" - the developer's story about the remote interview at Amazon
• About tech support Google or a robot with a human soul
• # Named 12 main trends videos and photos for 2017
• Is Magic Leap a $ 1.4 billion scam?
• The brightest technological trends at the Web Summit 2016: how the world will change in the near future
• 4K movies are now available in Google Play Movies
• 4 experiments with handwritten text using a neural network

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 last week
Material prepared by dersmoll and alekskorovin