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

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

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

• Размышления по поводу невыполненных обещаний веб-компонентов
• 10 самых разрушительных ошибок в мобильном SEO
• Датчики внешней освещённости могут использоваться для хищения данных из браузера
• Facebook открыл фреймворки для построения интерфейса: Litho, React Fiber, Relay Modern и React VR
• Производительность:
  • Техники детального анализа производительноти с помощью Dev Tools в блоге разработчиков Google
  • Презентация библиотеки pwmetrics, предназначенной для анализа различных факторов, влияющих на скорость загрузки страницы
  • Пять Lazy Load техник для изображений, для повышения производительности сайта
  • Тестирование производительности — инструменты и Waterfall диаграммы

• Слайды и видео с конференции Render 2017: Рабочий процесс в современном фронтенде от Umar Hansa, Как правильно выбирать современные технологии от Jeremy Keith, Начинаем использовать CSS Grid Layouts уже сегодня от Rachel Andrew и другие доклады
• Записи докладов F8, конференции для разработчиков от Facebook
• Mega Tags — самый полный генератор социальных мета-тегов
• Что нового на сайте «AMP by Example»: новый дизайн, интерактивная песочница, обновление компонентов и новые примеры
• RealWorld — посмотрите, как абсолютно одна и та же платформа для блогинга работает на совсем разных стеках: React/Angular и Node/Rails/Django
• SVG слайдер с эффектом морфинга — 20th Century Women
• Креативный концепт страницы для разработчика/дизайнера

CSS

• Ремы, емы, и почему отказ от них — не проблема
• Пришло время начинать использовать пользовательские свойства CSS
• Переход к стеку системных шрифтов в 2017
• 8 примеров, как не нужно и как нужно писать CSS селекторы
• CSS Grid Layout — новая терминология
• Шпаргалка по CSS Grid: полное визуальное руководство по гридам
• Между строк — подробно о технике реализации адаптивной типографики и лейаутов
• Проблема с атомарным CSS
• Создание устойчивой архитектуры на Sass: часть 2
• ragrid — базовая сетка на flexbox
• Как мы сделали наш продукт более персонализированным с помощью CSS переменных и React
• Путешествие к высокоэффективным и поддерживаемым медиазапросам CSS
• О состоянии вариативных шрифтов в браузерах на начало 2017-го
• Использование flow-root сегодня

JavaScripts

• Революция в JavaScript. Буквально
• Способы отладки JS на клиенте
• Трудные уроки: пять лет с Node.js
• Спецификация Static Land
• Разбор инструментов для тестирования JavaScript: Sinon.js vs testdouble.js
• JavaScript: что волнует меня в 2017
• JavaScript: изучение регулярных выражений для новичков
• Управляем мышкой и сенсорным вводом с помощью Pointer Events API
• CSS в JS. Rockey.
• Практика:
  • Методы обхода массива
  • Добавляем комментарий в код: хороший, плохой, безобразный
  • Адаптивные фоновые изображения с JavaScript
  • Начинаем работать с Three.js
  • Начинаем работать с Chart.js: введение

• ES2016+:
  • Нативные ECMAScript модули — первый обзор
  • Асинхронные функции 101
  • Async итераторы и генераторы
  • Вы нуждаетесь в ES2017 функциях Async Functions. И вот почему…
  • Пришло время овладеть стрелочными функциями

• React:
  • Facebook готовит к релизу React Fiber, перезапуск JS-библиотеки React·
  • Oculus опубликовала WebVR-библиотеку React VR
  • Создаем свой собственный Redux, часть 2: функция connect
  • React Move — красивые и изолированные анимации всего в реакте
  • Быстрый совет: как стилизовать компоненты React с помощью styled-components
  • Выбираем между React и Angular: глубокое сравнение
  • Использование AngularJS компонентов и директив в React
  • Когда проекту нужден React?
  • Вещи, о которых никто вам не скажет о React.js

• Vue:
  • Руководство по аутентификации во Vuejs 2
  • Юнит тестирование для Vue.js и TypeScript
  • Мощь пользовательских директив в Vue
  • Давайте создадим веб-приложение с Vue, Chart.js и API
  • Создание игры Tic-Tac-Toe Game на Vue 2: часть 2
  • vee-validate — простой плагин для валидации полей ввода для Vue.js

• Angular:
  • Все, что вам нужно знать об обнаружении изменений в Angular
  • Вопросы для собеседования на позицию Angular разработчика
  • Angular 2.0 vs Polymer

• Libs & Plugins:
  • zuck.js — javascript библиотека, позволяющая добавить истории ВЕЗДЕ
  • Forall.js — Выразительные статические типы и инвариантные проверки JavaScript. Похоже на TypeScript, но с нюансами
  • d3-annotation — добавляение аннотаций к визуализациям
  • lodash-form-collector — сборщик данных форм на lodash
  • simple-slider — простая микро-карусель, 1.2kb
  • HR.js — плагин для выделения и замены текста в DOM-е

Браузеры

• Google приписывают намерение встроить функцию блокирования «неприемлемой» рекламы в браузер Chrome
• Выпуск web-браузера Chrome 58
• Релиз Firefox 53, плюс подробности для разработчиков
• Тестирование бета-версии Firefox 54
• Реструктуризация процесса разработки Firefox и отказ от ветки Aurora
• Улучшенная производительность JavaScript, WebAssembly, и Shared Memory в Microsoft Edge
• Подробно о том, как переписали DOM в Microsoft Edge

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

• Соцсеть в виртуальной реальности, управление компьютером силой мысли и множество новинок для разработчиков — всё, что Facebook показала на конференции F8 . 8 важных анонсов с конференции Facebook F8 и их значение для маркетологов
• Google открыла доступ к Cloud Speech API, лежащей в основе Google Ассистента технологии распознавания речи
• «Даже создатели ИИ не до конца знают, как он работает»: 4 проблемы искусственного интеллекта
• Mastercard представила биометрическую банковскую карту нового поколения
• Видео: Григорий Бакунов показал собственного голосового ассистента для автомобиля
• «Мы не Facebook или Instagram»: сервис Pinterest убрал кнопку Like
• Google приписывают намерение встроить функцию блокирования «неприемлемой» рекламы в браузер Chrome
• Илон Маск планирует создать полноценные нейроинтерфейсы для связи мозга с компьютером за 8-10 лет, а продукты для медицины – за четыре
• Как Reddit создал r/Place
• Весь гарвардский курс по основам программирования. 23 лекции на русском языке по 40-60 минут
• Новая версия Google Earth: Земля как на ладони
• Google Hire — новый сервис для поиска работы
• Internet Archive запустил онлайн-эмулятор Macintosh

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

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

Автор: Zfort Group

Источник