Дайджест свежих материалов из мира фронтенда за последнюю неделю №240 (5 — 11 декабря 2016)

Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.

Веб-разработка

• Основные принципы разметки в HTML 5.1 (Document Outlines in HTML 5.1)
• Маскирование изображений с помощью SVG
• Самый простой и производительный способ подключать ссылки для социальных медиа
• Нам нужно поговорить о техническом долге (We Need to Talk About Technical Debt)
• Девять ресурсов, на которых можно учиться кодить по 15 минут в день
• Тренды:
  
  • Языки, фреймворки и инструменты, которые вы «должны» изучить в 2017-м
  • Топ JS фреймворков и тем для изучения в 2017-м
  • 5 «лучших» Javascript фреймворков для изучения в 2017-м
  • Размышления о будущем веба (Access and Experience: The Future Web)

• Производительность и оптимизация:
  
  • Про оптимизацию рендеринга — с оптимизмом
  • Мгновенные статические веб-страницы с помощью Service Worker
  • Анимация 60fps в вебе
  • Сохраняем интернету 2000 терабайт в день благодаря оптимизации Font Awesome

• Доступность:
  
  • Accessibility — обновленное руководство MDN по доступности: основы WAI-ARIA, HTML и CSS, мультимедиа и мобильная доступность
  • Доступность в вебе — разработка веба с эмпатией (Web Accessibility — Developing web with empathy)
  • Опасайтесь вложенности ролей (Be Wary of Nesting Roles)

• AMP & PWA:
  
  • Progressive Web AMPs
  • Урок, который я получил, работая с AMP от Google
  • CloudFour делится опытом перевода сайта в PWA (Hey, Hey, Cloud Four is a PWA!)
  • Создание Web Bluetooth Progressive Web App

Медиа

• Подкаст «Веб-стандарты», Выпуск №45: Chrome 55, отладка гридов, парсер URL, PWA как APK, Supports, CSS в JS и бэктики, шрифты в Медузе, инструменты 2016.
• Подкаст radiojs, Выпуск 43: Фиолетовый паттерн. RxJS 5, PRPL паттерн, HTTP 2.0 vs бандлинг
• Я.Субботник по фронтенду — запись прямой странсляции и слайды (10 декабря)
• KharkivJS #7 2016
• Chrome DevTools: Optimise your Web Development Workflow 2016. Материалы по докладу от Umar Hansa, включающий в себя видео, 177 слайдов и бонусный контент
• CSSConf.Asia 2016
• JSConf.Asia 2016
• ffconf 2016
• ReactiveConf 2016

CSS

• Анимации на GPU: делаем это правильно
• Битва css-in-js
• Директива CSS @support и ее двойник в JS. Готовы к использованию! (CSS support directive and its JS twin. Ready to use!)
• CSS Grid! Оптимистичное мини-интревью Эрика Мейера о грядущем CSS Grid Layout
• Virtual CSS c помощью Styletron
• BEM и поддерживаемый CSS
• Мощь селекторов CSS и как их использовать
• Балансировка текста в отзывчивом дизайне
• Гибкая типографика с помощью :root
• Сокращенный синтаксис CSS рассматривается как антипаттерн (CSS Shorthand Syntax Considered an Anti-Pattern)
• Изучение linear-gradient() с помощью разработки сложного шахматного узора
• Новый мир: написание CSS в ClojureScript и жизнь после Sass
• Использование CSS переменных в разработке сайтов (Using CSS Variables in Site Development)
• Циклы в CSS препроцессорах
• CSS object-fit для добавления мощности вашей верстке

JavaScript

• Нейронные сети на JS. Создавая сеть с нуля
• Дорогой JavaScript, мне хочется рассказать тебе о проблеме в нашем сообществе.
• React, Web Components, Angular и jQuery — друзья навеки. Универсальные JavaScript-компоненты
• Челендж JavaScript30
• Распутываем спагетти-код: как писать поддерживаемый Javascript
• Забавные хаки для ускорения контента
• Нативная разработка JavaScript после Internet Explorer
• Отображаем динамические сообщения с помощью Web Notification API
• Как должны работать табы по версии Реми Шарпа
• Примеры JavaScript кода, актуального для 2016-го года по версии автора (Enough JavaScript to be dangerous in 2016)
• Урок по созданию Scrollspy-навигации на JS
• styletron — универсальные высокопроизводительные стили css-in-js
• Новости:
  
  • Релиз V8 версии 5.6 (V8 Release 5.6)
  • Angular 1.6 уже здесь, и вот что вы должны по этому поводу знать
  • Релиз Angular 2.3.0
  • Текущее состояние Babel и его планы на будущее
  • Анонс TypeScript 2.1, TypeScript 2.1: async/await для ES3/ES5
  • Async/Await заработали в Firefox

• ES6:
  
  • Путеводитель по JavaScript Promise для новичков
  • Неизменяемый JavaScript: как это делается с ES6 и выше
  • Что и как в ES6: хитрости, лучшие практики и примеры. Часть вторая. Мэпы, слабые мэпы, обещания, генераторы, async / await, геттеры / сеттеры, символы

• Статическая типизация и Flow:
  
  • Основы Flow за 10 минут (The Fundamentals of Flow in 10-ish Minutes)
  • Проверка типов в JavaScript: Начало работы с Flow. (Type Checking In JavaScript: Getting Started with Flow.)
  • Зачем использовать статические типы в JavaScript? Часть I, II & III
  • Возможно вам не понадобится TypeScript (или статические типы) (You Might Not Need TypeScript (or Static Types))

• Фреймворки:
  
  • Основы производительности React-приложений
  • Можно ли обойтись без jsx и зачем?
  • Переведена документация Vue.JS 2.x
  • 5 бесплатных туториалов по VueJS
  • Laravel выбрал Vue, но вы не должны (заменив его на React)
  • Если вы перешли с React на Vue, почему вы это сделали? Большой тред на reddit
  • React на серверной стороне (Server Side React)
  • Начало квеста по написанию кода: Как написать свой первый React компонент
  • Ошибочное сравнение React и Angular (Wrong comparisons between React and Angular)
  • Почему мы выбрали Angular 2 вместо React для нашей ентрейпрайз разработки

• Плагины:
  
  • pulltorefresh.js — быстрый и мощный плагин для реализации pull-to-refresh в вашем веб-приложении
  • myScale — Quick SVG Icon Resizer
  • Siema — очередная легкая и простая карусель без зависимостей
  • es-beautifier — ECMAScript beautifier based on eslint

Браузеры

• Инструмент разработки Firebug закрывается: «Пользуйтесь Firefox DevTools»
• Новая версия браузера Chrome 55 использует примерно на 30% меньше оперативной памяти, нежели предыдущая Chrome 54
• Chrome 56 Beta: “Not Secure” warning, Web Bluetooth и CSS position: sticky
• Google Chrome полностью прекращает поддержку Adobe Flash Player
• Google добавила в Chrome для Android возможность скачивать музыку и видео
• Детали свежего обновления Microsoft Edge — частичная поддержка CSS Custom Properties, Async/await, улучшенная производительность DOM и другое
• Release Notes for Safari Technology Preview 19

Занимательное

• Свершилось! Полноценная Windows 10 приходит на ARM
• YouTube выплатил $1 млрд авторских отчислений музыкантам и лейблам за последние 12 месяцев
• Куда пойти учиться программисту: советы опытного тимлида, преподавателя и новичка
• Мифы, в которые верят программисты
• «Уберите всё со стола» — рассказ разработчика о дистанционном собеседовании в Amazon
• О техподдержке Google или робот с человеческой душой
• Depositphotos назвал 12 главных трендов видео и фото на 2017 год
• Magic Leap — афера на $1.4 миллиарда?
• Самые яркие технологические тренды на Web Summit 2016: как изменится мир в ближайшем будущем
• В Google Play Movies теперь доступны 4K-фильмы
• 4 эксперимента с рукописным текстом с помощью нейронной сети

Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.

Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
ссылка на оригинал статьи https://habrahabr.ru/post/317362/