Дайджест свежих материалов из мира фронтенда за последнюю неделю №223 (8 — 14 августа 2016)

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

Веб-разработка
CSS
Javascript
Браузеры
Новости и занимательное

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

• Распространенные ошибки начинающего HTML-верстальщика
• Почему я люблю работать с вебом. Рэми Шарп
• Frontend-разработчики должны быть в теме всего
• Подкаст Веб-стандарты, Выпуск №28: Новинки браузеров, триумф EdgeHTML 14, будущее сервис-воркеров, чистый и безопасный SVG, заливка текста и адаптивная вёрстка. Плюс расшифровка на GitHub
• Антиода фронтендерам
• Опыт масштабирования генератора статических сайтов
• Web Audio и объёмный звуковой ландшафт. Введение, Реализация
• Два десятка веб-разработчиков, на которых можно подписаться в твитере (20 Web Designers and Developers You Should be Following on Twitter)
• Подборка подкастов для разработчиков фронтенда (Top podcasts all front-end developers should follow)
• Крис Койер: что проносится в мой голове, когда я изучаю сайт (Chris Coyier: What Goes Through My Head When Exploring a Site)
• SVG:
  • SVG-градиенты
  • Новые свойства SVG 2
  • «Practical SVG» — урок от Криса Койера на A List Apart
  • Интервью с Nikos Andronikos, главой SVG WG

• Создание отзывчивого прогрессивного веб-приложения (Designing Responsive Progressive Web Apps)
• Руководство для новичком по отзывчивым веб-приложениям (A Beginner’s Guide To Progressive Web Apps)
• Google AMP: что это означает для мобильного SEO?
• Shadow DOM v1: автономные веб-компоненты (Shadow DOM v1: self-contained web components )
• Я заглянул в директорию Node_Modules, и вы не поверите, что случилось дальше (I Peeked Into My Node_Modules Directory And You Won’t Believe What Happened Next)
• Странный хак, позволяющий вынести курсор за пределы окна браузера
• Эффектный веб:
  • Multi-Layout Slideshow
  • Создание эффекта ластика с помощью HTML5 Canvas (Scratch-Off Reveal with HTML5 Canvas)
  • Анимированный эффект distortion SVG/CSS/JS (Distorted SVG (animated))
  • SnookSVG w/Polycleaner
  • Трава в WebGL (WebGL grass)

CSS

• Взаимодействие между Javascript и CSS с помощью CSS-переменных
• Масштабирование CSS компонентов с помощью БЭМ, REMs и EMs (Scaling CSS Components with BEM, REMs, & EMs)
• Как хранить данные в списках Sass (How To Store Data In Sass Lists)
• Atomic Design – полное руководство по масштабируемому и модульному CSS (Atomic Design – Your Ultimate Guide to Scalable & Modular CSS (Sass))
• Достигаем плавной 60 FPS анимации с помощью CSS3 (Smooth as Butter: Achieving 60 FPS Animations with CSS3)
• Создание тем с помощью CSS4 Color (Building Themes with CSS4 Color Features)
• Создание анимации смайликов с реакциями в Facebook (Implementing Facebook’s Reaction Animation)
• Как использовать техники маскирования и обрезки CSS и SVG (How to use CSS and SVG clipping and masking techniques)
• Принудительное выделение текстового блока (Force Selection of Text Block)
• Руководство по стилям в Nextdoor
• CSS свойство will-change
• Предлагаемое свойство box-suppress (The proposed box-suppress property)
• Объемные интерактивные гистаграммы на CSS (3D Stat Bars in CSS)

JavaScript

• Композиция функций. Перевод статьи Function Composition: Building Blocks for Maintainable Code
• Функциональное тестирование JavaScript с помощью Nightwatch.js
• var const let: совет от Реми Шарпа
• Улучшения доступности для клавиатуры с помощью JavaScript (Keyboard accessibility improvements with JavaScript)
• Создание вашего первого приложения на Vue.js (Building Your First App With Vue.js)
• Состояние Vue (2.0 релиз кандидат) (The State of Vue)
• Оператор запятая в JS (Comma operator in JS)
• Полируем JavaScript код: избавляемся от старых хаков ES5 (Make your JavaScript code shine: knockout old ES5 hacks)
• JSON.is — документация для распространенных JSON-форматов (JSON.is — Open-source documentation for common JSON formats)
• Параллельность процессов в JS (Parallel Processing in JS)
• Анимированные многослойные гистаграммы с D3.js (Animated stacked bar charts with D3.js)
• Текущее состояние Javascript — Jack Franklin (The State of Javascript — Jack Franklin | August 2016)
• Cоздание собственного EventEmitter-а (Build Your Own EventEmitter)
• Фреймворки:
  • Сколько дней прошло с момента релиза нового JavaScript фреймворка? (How Many Days Since the Last JavaScript Framework?)
  • Angular 2 vs React — о чем разработчики часто забывают? (Angular 2 vs React – What Developers Often Forget?)
  • Angular 2 релиз кандидат 5 (Angular 2 RC5 — NgModules, Lazy Loading and AoT compilation)
  • Осмысление Redux (Making sense of Redux)
  • Взгляд в будущее с React Native для веб (A Glimpse Into The Future With React Native For Web)
  • Загрузка и манипуляции с изображениями с React (Image Upload and Manipulation with React)
  • Черновик книги «React-просвящение» (React Enlightenment [DRAFT])
  • Курс «Основы Angular 2» (Angular 2 Fundamentals)
  • Angular 2 с примером приложения со SPQR (Angular 2 by Example)
  • Изучение Ember.js с нуля: уроки, книги, и ресурсы для новичков (Learn Ember.js From Scratch: Tuts, Books, and Resources for Beginners)
  • Настройка Flow с уже установленным Babel (Setting up Flow when you’ve already got Babel in place)

• Плагины:
  • Scrollanim — CSS3/JavaScript библиотека для создания скролл-анимаций, работающих всюду
  • Typr.js — Javascript парсер для работы со шрифтами (TTF, OTF). Альтернатива opentype.js.
  • baffle.js — библиотека для шифровки и расшифровки текста в DOM элементах (baffle.js — a tiny (~1.8kb) javascript library for obfuscating and revealing text in DOM elements.)
  • Полифил для плавной прокрутки (smooth scroll polyfill)

Браузеры

• Тестирование Firefox 49-beta и Firefox Developer Edition 50
• Контент Flash начнет блокироваться по умолчанию в Chrome 53, который выйдет в следующем месяце
• Презентация Samsung Internet для разработчиков — нового веб-браузера для телефонов Samsung Galaxy и фаблетов
• FF Developer Edition 50: Console, Memory Tool, Net Monitor and more
• Что убрали в Chrome 53
• Chrome 53 Beta: Shadow DOM, PaymentRequest, and Android autoplay
• DevTools Digest, August 2016
• #EdgeBug: новая веб-платформа для отлова багов с помощью твиттера
• 13 из 13… Расширения для Microsoft Edge

Новости и занимательное

• Inbox от Gmail интегрировался с Google Alerts, Диском, Trello и GitHub
• MIT представил новый язык программирования
• Google развивает новую операционную систему Fuchsia
• Microsoft случайно забыла в коде режим отладки, позволяющий обойти UEFI Secure Boot
• Четверть разработчиков Сан-Франциско ищет работу за пределами Кремниевой долины — исследование Indeed
• Нейросеть научилась распознавать цензуренные изображения
• Работа мечты: в Google существует команда устраивающая внутри компании катастрофы
• Google представил целевые страницы в формате AMP
• Forbes составил очередной рейтинг из 100 самых богатых IT-деятелей мира
• От 1947 года до наших дней: куда двигается робототехника
• Смерть стартапа: Обзор самых заметных стартапов, закрывшихся в 2016 году
• Кибератаки: скрытая угроза и противодействие
• Проблемы карьерного роста в IT-компаниях
• Идеальный код
• Правила этикета для VR от Google

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

Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.