Дайджест свежих материалов из мира фронтенда за последнюю неделю №265 (29 мая — 4 июня 2017)

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

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

• Обзор изменений в новом мажорном релизе Node 8
• npm@5 теперь npm@latest
• Подкаст Frontend Weekend FW #5 — Секреты успешных докладов для frontend-конференций
• Кастомные свойства — HTML Шорты
• Асинхронный веб, или что такое веб-сокеты
• Browserslist — это хорошая идея
• Webpack vs Gulp
• Как я могу сделать сделать доступной свою иконочную систему?
• Как улучшать проекты с устаревшим кодом
• Песочница для GraphQL
• WebAssembly: Mozilla победила
• Производительность:
  • Более быстрая загрузка страницы с помощью легкой анимации CSS и SVG (без JavaScript)
  • Приключения новичка в веб-производительности
  • Проверка производительности CSS анимации с помощью браузерных инструментов для разработчика
  • Ловля мусора: как мы обнаружили самые медленные части UI
  • Использование метрик производительности, которые наиболее влияют на UX
  • Чеклист производительности фронтенда для продакшена
  • HTTP/2 push более сложный, чем я думал

CSS

• 11 вещей которые я узнал, читая спецификацию flexbox
• CSS в JavaScript: будущее компонентных стилей
• Изучаем CSS-гриды. Перевод статьи Learning CSS Grids
• CSS Media Queries Level 4 by Florian Rivoal
• Создание руководства по стилю прямо из кода Sass
• Обречен ли CSS всегда быть отстойным?
• Любовное письмо к CSS
• CSS-фильтры для регулировки яркости, контрастности, непрозрачности и инверсии
• Отчет в цифрах: полтора года с атомарным CSS
• Новая отзывчивость в вебе — единицы вьюпорта
• Подробно о нюансах создания кастомных чекбоксов и радиокнопок
• Искусство анимации единственного Div на странице
• < css-doodle /> — веб-компонент для рисования шаблонов с помощью css.
• Объяснение техники разрыва колонки широким блоком с помощью CSS Grid
• scssfmt — быстрый и простой форматор SCSS кода
• Трендовые тени на CSS
• ctr — очередной CSS Framework
• Подборка палитр для эффектной анимации градиентов

JavaScript

• Must see: видеозаписи митапа MoscowJS 37
• Переосмысливая JavaScript: break и функциональный подход
• Справочник современных концепций JavaScript: часть 2
• Итоги дискуссии по поводу выбора нового JavaScript фреймворка для WordPress
• Что означет Google AMP для JavaScript сообщества
• Управление состоянием в CSS с помощью переиспользуемых функций JavaScript — часть 2
• Реактивный UI с помощью VanillaJS – часть 1: чистый функциональный стиль
• Введение в наиболее часто используемые функции ES6
• Как отслеживать изменения в DOM с помощью Mutation Observer
• Почему JavaScript?
• Cоздание простого Twitter бота с Node.js всего в 38 строк кода
• React:
  • Подкаст Пятиминутка React #20 — MobX вместо Redux?
  • Повышение производительности React и Redux с Reselect
  • Создание библиотеки компонентов React | часть 1, часть 2
  • Airbnb перешел на React для создания более отзывчивого фронтенда
  • Зачем использовать React JS для создания быстрых интерактивных UI?
  • Получаем лучшую React-цию с помощью прогрессивных веб приложений
  • Оптимизация рендеринга в React (часть 1)
  • React как платформа: путь к кросс-платформенному UI — Leland Richardson

• Angular:
  • Динамический Angular или манипулируй правильно
  • Вот что вы должны знать о динамических компонентах в Angular
  • React vs Angular vs Vue в примерах
  • Какие плюсы и минусы AngularJS и ReactJS?

• Vue:
  • Начианем современную разработку фронтенда с Vue.js
  • Прототипирование Filter UX в Instagram с помощью Vue
  • Использование фильтров в Vue.js
  • vue-recyclerview — дозагрузка элементов больших списков с vue-recyclerview

• Libs & Plugins:
  • Клевая скролл-анимация с помощью библиотеки AOS
  • t-scroll — плагин для создания анимации по скроллу
  • Timeline.js — плагин для создания хронологического слайдера с временной шкалой
  • AmplitudeJS — современный HTML аудио-плеер
  • o — браузерный загрузчик/бандлер для JS. Без зависимостей, node и cli
  • taxi-rank — JSDom на базе Selenium Webdriver API
  • picodom — 1Kb Virtual DOM

Браузеры

• Chrome победил
• Google представил план интеграции блокировщика рекламы в Chrome
• Браузер на основе блокчейна Brave провел ICO и привлёк $35 млн за 30 секунд
• FF Developer Edition 54: новые функции инспектора и отладчика, помощь MDN в netmonitor и многое другое
• Chrome 59 — что нового в DevTools
• Технические детали Safari Technology Preview 31

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

• Microsoft кардинально обновила дизайн Skype. И теперь там есть «Истории»
• Датский стартап научил нейросеть верстать интерфейсы сайтов и приложений по макету
• Google выпустила сервис для визуализации данных через GIF-изображения
• Google вносит в чёрный список сайты, передающие пароли по HTTP
• Баг в Chrome позволяет сайтам записывать аудио и видео незаметно для пользователя
• В Google появился персональный поиск
• AlphaGo разгромила лучшего игрока-человека в го со счетом 3-0 и покинула спорт
• Facebook, Google и ещё 29 ИТ-гигантов выступили против интернет-шпионажа
• Создатель Android Энди Рубин представил свой первый смартфон и конкурента Google Home
• Microsoft создает новую оболочку для мобильных устройств
• IoT-устройства компрометируют своих владельцев, даже если трафик зашифрован
• «Умный, но не заносчивый» — как выбирали имена системам искусственного интеллекта
• Интернет-тренды на 2017 год: резкий взлёт киберспорта, визуальная реклама и онлайн-медицина
• Почему обученные на GTA нейросети нельзя применять в реальных задачах
• Как на гифках построить бизнес с оценкой в $600 млн — история сервиса Giphy
• Ученые: в социальных сетях люди воспринимают информацию в разы менее критично
• Сайт, который рассчитывает вероятность того, что ваша работа достанется роботу
• Компьютеры исчезнут физически. Но будут вокруг нас — прощальная колонка Уолта Моссберга

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

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

Автор: Zfort Group

Источник