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

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

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

• 10 особенностей Webpack
• Пособие по webpack
• Доступность «кастомных html-контролов для незрячих пользователей
• Frontend: Разработка и поддержка
• Будущее сайтов: автоматическая сборка на базе ИИ и не только
• Подкаст Веб-стандарты, Выпуск №32 : Safari 10 скоро, Chrome 53 уже, кастомные элементы, border-image, font-display, Лия Веру и HTML, вомбаты в носках и npm.
• Подборка видео по оптимизации HTML/JavaScript
• Поддержка Bootstrap 3 прекращена, хотя четвертая версия всё ещё находится в стадии «альфы»
• Какие элементы в HTML5 уже устарели? (What is obsolete in HTML5?)
• Дизайнерское руководство по оптимизации веб-производительности (Designers Guide to Web Performance Optimization)
• Руководство по браузерной скролл-анимации (A Guide to Browser Scroll Animations)
• 10k Apart:
  • Советы по созданию сайта для конкурса 10k (Building in 10k: Markup for Accessibility, Clarity, and Affordance)
  • Советы для более быстрой загрузки страницы в контексте конкурса 10к (10k Tips for a Lighter Page Load)
  • Еще один вариант реализации проекта для конкурса 10к — с webp, сервис-воркерами и другими плюшками (Image Beast — My 10 K Apart Entry)

• Как выглядит звук? Искусство веб-аудио (What Does a Sound Look Like? Web Audio Art!)
• Строительные блоки прогрессивных веб-приложений (The Building Blocks Of Progressive Web Apps)
• 10 золотых правил отзывчивых SVG (10 golden rules for responsive SVGs)
• BroadcastChannel API: передача сообщений для веба (BroadcastChannel API: a message bus for the web)
• Использование SVG для прозрачных растровых изображений (Using SVG's for Transparent, Raster Images)
• Washington Post анонсирует ‘молниеносный’ мобильный сайт, который будет работать на технологии прогрессивных веб-приложений и использовать AMP (Washington Post Unveils ‘Lightning-Fast’ Mobile Website)
• Релиз текстового веб-редактора Quill 1.0 (Announcing Quill 1.0)
• Роботы и вы: руководство по Robots.txt (Robots and You: A Guide to Robots.txt)
• Руководство по оптимизации изображений для SEO (Your Guide to Optimizing Images for SEO)
• Ох, твою мать, git!

CSS

• Разработка расширяемых компонентов на HTML и CSS
• Оформление строчных блоков кода
• Несколько способов изменить порядок следования элементов с помощью CSS (A Few Different CSS Methods for Changing Display Order)
• Переводим всё на Flexbox (Going all-in on Flexbox)
• Создание масштабируемых компонентов с помощью относительных CSS-единиц (Building Resizeable Components with Relative CSS Units)
• Автопрефиксы, с помощью CSS переменных! (Autoprefixing, with CSS variables!)
• На каком этапе находится рабочий черновик по CSS Grid Layout (Where Things Are at in the CSS Grid Layout Working Draft)
• Simple CSS Media Queries — сборник медиа-выражений для устройств
• CSS is !important
• CSS в trivago — часть 1: Структура и ITCSS
• Как давать названия цветовым переменным в Sass (How to name Sass color variables)
• Интервью с Harry Roberts перед Webexpo Prague: о рефакторинге CSS и ITCSS
• Начинаем работать со счетчиками в CSS (Getting Started with CSS Counters)
• Перебор в Sass с помощью директив контроля (Loop Through Sass Code Using Control Directives)
• nth-child vs nth-of-type
• radiobox.css — набор анимаций для радио-кнопок (radiobox.css — Tiny set of CSS3 animations meant for your radio inputs.)
• Курсор-мутант, с svg и анимациями (Mutant Cursor)
• «Веб-шрифты на прериях» — рассуждения о текущем состоянии веб-шрифтов от Richard Fink на alistapart (Webfonts on the Prairie)
• Rachel Andrew: CSS Grid Demo — Multiple Image Hero Layout

JavaScript

• 4 вида утечек памяти в JavaScript и как с ними бороться
• Строим свой full-stack на JavaScript: Основы
• Samsung добавляет JavaScript в Интернет «вещей» (Samsung brings JavaScript to the Internet of Things)
• Прощание с Node.js v5, подготовка к v7 (Farewell to Node.js v5, Preparing for v7)
• Отладка JavaScript на продакшене (Debugging Production JavaScript)
• Меры против document.write() (Intervening against document.write())
• Введение в стрелочные функции JavaScript (JavaScript Arrow Functions Introduction)
• Моя новая любимая ES6 игрушка: деструктурированные объекты как параметры (My New Favorite ES6 Toy: Destructured Objects as Parameters)
• JavaScript: массивы против объектов (JavaScript: Arrays vs Objects)
• Объявление var умерло? Что же я должен использовать? (Is var Dead? What should I use?)
• Готовимся к собеседованию по JavaScript: что такое композиционная функция? (Master the JavaScript Interview: What is Function Composition?)
• Нативная бесконечная прокрутка с IntersectionObserver API (Native Infinite Scrolling with the IntersectionObserver API)
• Лучшие практики по работе с Node.js (Node.js Best Practices)
• Введение в Chart.js 2.0 — шесть простых примеров (An Introduction to Chart.js 2.0 — Six Simple Examples)
• Уроки:
  • Help с HyperDev — бесплатный интерактивный курс по Node для начинающих (Learn Node.js — a free interactive course for Node beginners)
  • Урок: как собирать JavaScript с Rollup (Tutorial: How to Bundle JavaScript With Rollup)
  • Начало работы с PouchDB, клиентской JavaScript базой-данных (Getting Started with PouchDB Client-Side JavaScript Database)
  • Руководство: как использовать Vue.js с jQuery-плагинами (Guide: How to use Vue.js with jQuery Plugins)

• Фреймворки:
  • JavaScript фреймворки: распределенные каналы для хороших идей (JavaScript Frameworks: Distribution Channels for Good Ideas)
  • Анимация элементов React с помощью BoxArt (Animating React Elements with BoxArt)
  • Создание амбициозного веб-приложения с помощью Ember.js (Building Ambitious Web Applications with Ember.js)
  • react-fake-component — компонент для визуальной симуляции загрузки контента
  • React Native Elements — кроссплатформенный UI инструментарий
  • Как масштабировать React приложения (How To Scale React Applications)
  • Роутинг в React приложениях: полное руководство (Routing React Apps: The Complete Guide)
  • Как использовать модуль react-redux (How to Use the react-redux Package)
  • Создание форм с React и Redux (Creating Forms with React and Redux)
  • Angular 1.6 — убрана песочница выражений (Angular 1.6 — Expression Sandbox Removal)
  • От ngAnimate к Angular 2 animate (From ngAnimate to Angular 2 animate)

• Плагины:
  • awesome-grid — курируемый список библиотек и ресурсов по динамическим таблицам (гридам) для разработчиков
  • appmetrics.js — небольшая (1.1Кб) библиотека для измерений параметров производительности веб-страницы и отправки результата в Google Analytics.
  • timeago.js — преобразует дату в понятное представление «3 часа назад»
  • cookies.js — для работы с cookies в браузере
  • Fuse.js — библиотека для реализации нечёткого поиска (запрос может содержать ошибки)
  • granim.js — плагин для создания интерактивных анимированных цветовых градиентов

Браузеры

• Устанавливать расширения в десктопный Chrome теперь можно прямо с Android
• Chrome начнёт помечать небезопасными страницы, открытые по HTTP
• Выпуск web-браузера Vivaldi 1.4
• Mozilla: многопроцессная версия Firefox на 400%-700% отзывчивее обычной
• Google существенно оптимизировала производительность и энергопотребление Chrome 53
• Firefox 49 для разработчиков
• DevTools Digest, September 2016

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

• Презентация Apple: часы для пловцов, iPhone без миниджека, Марио
• Конференции Apple и Sony (7 сентября 2016)
• Презентация Sony: анонсы PlayStation 4 Pro и нового дизайна консоли
• Microsoft готовится представить конкурента популярному корпоративному мессенджеру Slack
• Новый формат изображений HVIF позволяет создавать красивые иконки весом в 500 байт
• Крупнейшая IT-сделка в истории Европы завершена: ARM стал частью SoftBank
• Baidu открыл наработки в области машинного обучения
• OpenOffice умер, да здравствует LibreOffice!
• Новая статистика Steam показывает, что пользователи больше не покупают гарнитуры виртуальной реальности HTC Vive и Oculus Rift
• История проекта Stack Overflow — экспертные ответы на ваши вопросы
• История Project Ara: почему Google не удалось создать модульный смартфон
• Новостной ленте Facebook исполнилось 10 лет
• Исследование SWIFT: биткоин — спекулятивный актив, который не способен вытеснить классические валюты
• Зачем процессору нейроны?
• Как работает лента новостей в Facebook
• В Bank of America допустили, что человечество существует в матрице
• Особенные люди в коллективе: почему западные ИТ-компании высоко ценят сотрудников c аутизмом
• Как извлечь из посещения конференций реальную пользу, а не просто просрать день своей жизни
• «Японский Билл Гейтс»: биография основателя SoftBank Масайоши Сана

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

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

Автор: Zfort Group

Источник