Дайджест свежих материалов из мира фронтенда за последнюю неделю №212 (16 — 22 мая 2016)

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

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

• Собираем базу аудиокниг для удобной фильтрации
• 16-й выпуск «Веб-стандартов»: батарейка, графика, HEX-альфа, !important, таблицы, полифилы
• Создание сервис-воркера: разбор примера
• Фронтенд ВКонтакте: Архитектура? Какая еще архитектура?
• Видео со Avito SPA meetup #2
• Видео всех докладов с секции «Web and Chrome» на Google I/O 2016
• От нуля до героя фронтенда, ч.1 (From Zero to Front-end Hero (Part 1))
• Введение в Web Animations API (Intro to the Web Animations API)
• Автозаполнение: что веб-разработчики должны знать, но не знают (Autofill: What web devs should know, but don’t)
• Доступные табы с ARIA, проблемы UI и стандарты (ARIA tabs, UI problems and standards)
• 15 инструментов для мониторинга сайтов
• Почему нативный ContentEditable ужасен (Why ContentEditable is Terrible)
• Пример создания живого руководства по стилям (Creating A Living Style Guide: A Case Study)
• Visual Center — инструмент, который находит визуальный центр ваших изображений
• Производительность:
  • Google запустил новую версию инструмента Mobile-Friendly Test
  • Анализ эффектов для изображений, снижающих производительность (Web Image Effects Performance Showdown)
  • Browser Calories — расширение для Хрома, которое измеряет бюджет производительности сайта
  • The Coach: современная альтернатива для YSlow (The Coach: A Modern Alternative to YSlow)
  • Наши лучшие практики, которые убивают мобильную веб-производительность (Our best practices are killing mobile web performance)

• AMP:
  • На конференции Google I/O 2016 представитель компании Ричард Гинграс поделился последней статистикой и новостями по проекту AMP: распространение формата AMP стремительно растёт, а Google уже проиндексировал свыше 125 млн AMP-страниц из 650 тыс. доменов.
  • В Google появятся AMP-страницы кулинарных сайтов
  • Google дает возможность видеть посетителей страниц AMP в отчетах Google Search Analytics reporting

• Эффектный веб:
  • Еженедельная подборка красивых эффектов на CSS/SVG/JS #38
  • Создание адаптивной зацикленной анимации с идущим человеком с помощью SVG и CSS steps()
  • Эксперимент с анимацией и UI (An experiment with Animation and UI)
  • THREE Image Transition

CSS

• Утерянное искусство оформления посещенных ссылок. Перевод статьи The lost art of visited links
• Хорошие и плохие CSS-практики для начинающих. Перевод статьи Good and Bad CSS Practices for Beginners
• Важность !important: гарантия неизменяемости в CSS. Перевод статьи The Importance of !important: Forcing Immutability in CSS
• БЭМантика: пишите осмысленные стили без повторов. Перевод статьи BEMantic: DRY Like You Mean It
• Все или ничего. Перевод статьи All or Nothing Джонатана Снука
• Нюансы использования цепочек одинаковых классов. Перевод статьи Subtleties with Self-Chained Classes
• Магия CSS. Глава 1. Блок
• Bootstrap’s Reboot — следующий шаг в эволюции сброса CSS (Bootstrap’s Reboot — Next Evolutionary Step for CSS Reset )
• Техники написания кода в CSS (CSS coding techniques)
• Отладка CSS (Debugging CSS)
• Советы по выравниванию иконок относительно текста (Tips for Aligning Icons to Text)
• ease-out, in; ease-in, out
• Руководство PostCSS по улучшению селекторов и медиа-запросов (The PostCSS Guide to Improving Selectors and Media Queries)
• Подробный разбор синтаксиса значений свойств в CSS (Understanding The CSS Property Value Syntax)
• checkbox.css — небольшой набор CSS3 анимаций для чекбоксов
• Использование свойств object-fit и object-position в CSS (Using CSS’s object-fit and object-position Properties)
• CSSPurge — CSS-статистика по сорока двум популярным сайтам и фреймворкам
• Cutestrap — минималистичный CSS фреймворк на базе Sass (микро-альтернатива Bootstrap-у)
• Карусель без JavaScript с полноэкранным режимом (Carousel without JavaScript)

JavaScript

• Уменьшаем размер публикуемых npm модулей
• Что браузеры делают с вашим JavaScript-кодом: об оптимизациях в JS-движках на примере V8
• Фундамент масштабируемости javascript приложения
• Для чего вообще нужна изоморфность?
• Визуализация гео-данных в d3.js
• Релиз jQuery 3.0 Release Candidate
• Отложенная загрузка изображений? Не полагайтесь на JS! (Lazy Loading Images? Don’t Rely On JavaScript!)
• Взлом лоттереи на JavaScript (Hacking the JavaScript Lottery)
• Распутывание спагетти-кода: как писать поддерживаемый JS (Untangling Spaghetti Code: How to Write Maintainable JavaScript)
• Прототипическое наследование в JS (Prototypal Inheritance in JavaScript)
• Martin Fowler: рефакторинг javascript кода видео-магазина
• Кастомный PDF рендеринг в JavaScript с Mozilla PDF.Js (Custom PDF Rendering in JavaScript with Mozilla’s PDF.Js)
• Фреймворки:
  • Сравнение React vs. Angular2: битва тяжеловесов в JS (React vs. Angular2 Comparison: A Heavyweight Bout for the JavaScript Title)
  • Используем Angular CLI для ускорения проектов на Angular 2 (Use the Angular CLI For Faster Angular 2 Projects)
  • Обновление вашего приложения до Angular 1.5 и выше! (Upgrade Your App to Angular 1.5 Components and Beyond!)
  • Вещи, которые впечатлили меня в Angular 2 (Things that Excite Me about Angular 2)
  • React с Webpack + Meteor в качестве бекенда
  • Компонуемые компоненты в React (Composable React Components)
  • Learn Redux — видеоуроки по React и Redux
  • Создание React + Flux приложения с аутентификацией пользователя (Build a React + Flux App with User Authentication)
  • Как написать Google Maps React компонент (How to Write a Google Maps React Component)

• ES6:
  • Разбираемся с пробелами в литералах шаблонов ES6 (Handling whitespace in ES6 template literals )
  • Классы в ES6 — новая «плохая» часть в JS6 (Is “Class” In ES6 The New “Bad” Part?)
  • Оптимизация кода ES6 для производительной минификации (Optimize ES6 Code For Output Minification )
  • Изучение промисов в ES6 (Learning ES6: Promises)
  • Шесть изящных приемов для ES6 (Six nifty ES6 tricks)
  • Скрытая сила ES6 генераторов (The Hidden Power of ES6 Generators: Observable Async Flow Control)
  • lebab — конвертирует ES5 код в читаемый ES6 код (babel наоборот) (lebab — Turn your ES5 code into readable ES6 (sugar-syntax). It does the opposite of what Babel does.)
  • Интерполяции строк в JavaScript. Kyle Simpson демонстрирует, насколько легче собирать строки в ES6 (JavaScript string interpolations)
  • ES6 модули и прочее из ES2015, ES2016 и выше в preview Microsoft Edge (Previewing ES6 Modules and more from ES2015, ES2016 and beyond)

• Плагины:
  • Push.js — решение для кроссбраузерных уведомлений с помощью JavaScript Notifications API
  • Timedropper — jQuery-плагин для выбора времени
  • nlp_compromise — использование естественного английского в JS
  • jQuery плагины для подсветки текста (10 jQuery Text Highlighter Plugins)
  • Подборка решений для создания отзывчивых таблиц с данными

Браузеры

• Firefox впервые обогнал браузеры от Microsoft по частоте использования
• Google запланировала полный отказ от автозапуска Flash в Chrome к концу 2016 года
• В Chrome прекращено использование клавиши Backspacе для навигации
• Opera перезапустила рекомендательный сервис новостей в браузере
• В Firefox будет улучшен интерфейс закладок
• Web Notifications в Microsoft Edge
• Взгляд назад: один год Microsoft Edge
• Flash мертв (в Chrome), и в этот раз это именно так (Flash is dead (in Chrome), and we really mean it this time)

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

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

Автор: Zfort Group

Источник