Дайджест свежих материалов из мира фронтенда за последнюю неделю №297 (8 — 14 января 2018)

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

    Медиа    |    Веб-разработка    |    CSS    |    Javascript    |    Браузеры    |    Занимательное

---

Медиа

• Подкаст «Веб-стандарты», Выпуск №102: Зачем нужны эксперименты с CSS, Хаяку на JS, как развиваются спецификации CSS и что им мешает, стили в компонентном стеке.
• Подкаст «Веб-стандарты», Выпуск №103: Браузеры и разработка интерфейсов, где искать, если потеряли статью, точка с запятой в JS, понятно о выравнивании в CSS, трюки Сары с SVG, управление проектами, фронтендер в Берлине.
• Подкаст «Frontend Weekend» #34 – Олег Бунин про организацию конференций, Павла Дурова и цены на билеты
• Подкаст «Frontend Weekend» #35 – Шокирующая правда о Фронтенд Юности
• Подкаст «devschacht»: Ночной фронтенд #17 — Webstorm, Wallaby для бедных и нативные модули
• Подкаст «Фронтенд Юность (18+)» #31: Стоит ли переписывать ваш проект на Rust?
• Подкаст «Фронтенд Юность (18+)» #33: Механизм спекулятивного выполнения кода
• «ALL YOUR HTML» #31: «Вёрстка простого макета и общение»
• 6 видео с KharkivFrontend Meetup#_0: Boilerplate, GraphQL, D3, Service Workers, Kiss и Как заработать на accessibility
• 23 доклада с FrontFest 2017: код и творчество, разработка SPA, оптимизация графики, декларативная шаблонизация, алгоритмы и структуры данных, доступность, i18n и другое

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

• Нейронная сеть, которая верстает сайты по картинке
• Фронтенд в 2018: больше консенсуса, меньше сложности
• Что нового в HTML 5.2?
• Краткий обзор HTML 5.2 Dialog
• Оптимизация SVG Text & Image Delivery с помощью with Inline SVG. Когда одной техники встраивания SVG недостаточно

• Безопасность:
  • Рассказ о том, как я ворую номера кредиток и пароли у посетителей ваших сайтов
  • Рассказ о том, как я майню эфир через meltdown на ваших телефонах при помощи npm
  • Сбой антиспам-системы привёл к коллапсу в репозитории NPM
  • Третьесторонние скрипты. Мнения экспертов об их влиянии на производительность и безопасность, а также подборка ссылок на соответствующие материалы
  • Объяснение HTTPS на примере голубиной почты
  • Сломают ли Spectre & Meltdown JavaScript?
  

• Производительность:
  • Google обновил инструмент PageSpeed Insights
  • 8 экспертов из области фронтенда высказывают свои мысли о веб-производительности в 2018-м
  • Оптимизация странц с помощью заголовка “Save-Data”
  • Black Friday/Cyber Monday 2017: Анализ и статистика производительности топовых интернет-магазинов в период распродаж
  

• AMP/PWA:
  • Google нашёл решение проблемы с отображением URL в AMP-результатах
  • Google значительно обновил инструмент для проверки AMP-страниц
  • Письмо о Google AMP. Открытое письмо сообщеста против монопольного навязывания Гуглом своих технологий
  • Прогрессивное веб-приложение для каждого проекта
  

• Tools:
  • Отладка JavaScript с помощью WebStorm 2017.3 в связке с Chrome DevTools
  • VS Code Blog: Что нового для отладки под Chrome
  • Webpack: В Webpack 4.0 будет использоваться JSON Tree Shaking, По умолчанию Webpack 4 будет работать в режиме configless
  

• Accessibility:
  • Пандус для сайта
  • Небольшие улучшения, которые могут оказать огромное влияние на доступность вашего сайта
  • Слепая женщина подает в суд на 30 сайтов из-за проблем с доступностью
  • Разбираемся с WCAG 2.1 – обзор критериев успеха для когнитивных расстройств
  • Маленькие шаги в сторону доступности N26 — крупного европейского онлайн-банка с веб-платформой на React
  

• Анимация:
  • Masked Circle Slider
  • ertdfgcvb — интерактивная ascii-анимация
  • Pure CSS Burrito Toggle — насколько далеко можно зайти с кастомными чекбоксами
  • Фантастические Pen-демки и где их искать: часть #1, часть #2
  
  

CSS

• Нужны ли CSS-препроцессоры в 2018 году, или насколько мы близки к ванильному CSS
• Делаем CSS анимацию более натуральной
• Улучшение типографики с помощью Font Variants
• CSS Cheat Sheet — современная шпаргалка по CSS
• Демистификация выравнивания в CSS
• «display: contents» все ближе. Наконец, поддержка «display: contents» включена в Chromium и WebKit, и вот несколько слов по этому поводу
• Последние способы разобраться с каскадом, наследованием и специфичностью

JavaScript

• Восходящие звезды 2017-го в JavaScript. Полный обзор ландшафта 2017: тренды фреймворков фронтенда и ноды, инструментария, IDE, мобильных, тестирования и т.п.
• ESLint: не пишите JavaScript без него!
• Полное руководство по развертыванию приложения на JavaScript — часть 1: Database и API Deployment
• Шесть маленьких, но клевых свойств ES7 + ES8
• «Создание робота на JavaScript» — доклад Anna Gerber с CampJS

• Фреймворки:
  • Stack Overflow назвал самые трендовые JS-фреймворки в соответствии с концепцией жизненного цикла
  • Топ JavaScript библиотек и технологий, которые стоит изучить в 2018
  • npmjs.com: Состояние JavaScript фреймворков, 2017 Часть 1: Front-End фреймворки, Часть 2: Экосистема React, Часть 3: Back-End фреймворки
  • Почему React более популярен, чем Angular?
  

• Теория:
  • Возможности JavaScript, о существовании которых я не знал
  • Почему мутация может быть пугающей
  • Понимание стэка вызова в JavaScript
  • Как читать ECMAScript спецификацию
  

• React:
  • 5 практических советов, чтобы наконец выучить React в 2018
  • Введение в React Router v4 и его философию роутинга
  • React, Redux и архитектура JavaScript
  • Знакомство с Immer: новый способ простой работы с иммутабельностью
  • Как создать чат в реальном времени на React и GraphQL
  • react-perf-devtool — расширение Chrome devtools для инспектирования производительности компонентов React
  

• Angular:
  • Реактивные формы (reactive forms) Angular 5 (2+) Часть 1
  • Анализ и оптимизация бандла Angular 5 приложения
  • Ngx-kit — набор инструментов и генератор компонентов для Angular 5
  • Стал доступен Angular 5.2
  • Динамическая загрузка компонентов с помощью Angular CLI
  • 12 вещей, которые помогут большим организациям работать Angular правильно
  

• VueJS:
  • Vuebnb: A Full-Stack Vue.js and Laravel App
  • Интернационализация с помощью vue-i18n (часть 1)
  • Пять ловушек, которые необходимо избегать при юнит тестировании Vue.js
  

Браузеры

• В Firefox 59 будет прекращена поддержка GTK+ 2
• David Walsh присоединяется к команде разработчиков Mozilla DevTools
• Что Spectre и Meltdown означают для WebKit

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

• Intel и Microsoft признали, что патчи для Meltdown и Spectre замедляют работу компьютеров
• Эксплоиты и тесты производительности, связанные с уязвимостями Meltdown и Spectre
• Под угрозой все. Что такое Meltdown и Spectre и как с ними жить?
• Заплатка против Spectre снижает производительность iPhone 6 до 50%
• Самые интересные AI-решения и проекты 2017 года
• CES 2018: Самые интересные гаджеты выставки
• Microsoft объединилась с Open Whisper Systems и представила end-to-end шифрование в Skype
• Как оценить проект и не попасть впросак? часть 1, часть 2

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

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