Дайджест свежих материалов из мира фронтенда за последнюю неделю №296 (1 — 7 января 2018)08.01.2018 05:18

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

Медиа

• podcast Подкаст «devschacht»: Выпуск №11 — Школа разработки интерфейсов Яндекса
• video «ALL YOUR HTML» #30:»3D сетка с помощью линий и шейдеров»
• video PiterJS‏, Запись докладов с 19 митапа: Сергей Чикуенок — А так ли нужен Virtual DOM?, Дмитрий Пацура — О разработке на React Native, Сергей Новиков — Что умеет Polymer

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

• habr Путь верстальщика: с нуля до сеньора
• Awesome Checklist Checklist: курируемый список чеклистов, посвященных веб-разработке и не только
• Как оставаться в курсе безумия, творящегося во фронтенде — инструкция из трех шагов
• pwa Эксперты по SEO называют PWA ключем к успеху в 2018
• AMP Как Airbnb ставит AMP в основу своей цифровой стратегии
• Представление Web Payments: облегчаем онлайн-платежи с помощью Payment Request API
• Повторяющаяся анимация с помощью Web Animations API
• Я собираю номера и пароли кредитных карт с ваших сайтов. И вот как это происходит
• Обрезка и масштабирование изображений с помощью SVG. SVG, который заменяет CSS object-fit

Производительность:
• «Front-End Performance Checklist 2018» — все, что нужно знать на текущий момент о клиентской производительности. Всеобъемлющий чеклист/справочник от Виталия Фридмана с версией в PDF
• Влияние 3G/4G-соединений на пользовательский опыт и скорость загрузки страниц сайтов в разных странах
• Есть ли смысл в предзагрузке (Preload)?
• Подробный аудит производительности библиотеки boomerang, над которой работают разработчики Akamai
• Плейсхолдеры изображений: делайте это правильно или не делайте вообще. Пожалуйста

Инструменты:
• Встречайте Modern Serverless Starter Kit — современный стартовый serverless инструментарий от Postlight (Webpack, Babel, ESLint и Prettier)
• stimulus — современный JavaScript фреймворк для HTML, который у вас уже имеется
• Что такое бойлерплейт и зачем его использовать? Давайте взглянем на руководство по стилю кода
• Чего ожидать от WordPress в 2018

Accessibility:
• Следующий уровень Accessibility: 5 способов, с помощью которых я сделал freeCodeCamp Guide более удобным для людей с ограниченными возможностями
• Написание автоматических тестов для доступности
• Начинаем работать с доступностью веба
• Итоги судебных разбирательств по делам доступности сайтов в 2017: тяжелый год для бизнеса

CSS

• Решение реальных проблем с CSS Grid + Flexbox
• 8 лучших практик для идеальной CSS документации
• Адаптивная типографика с помощью : root
• Атака Spectre и Critical CSS. Решение потенциальной проблемы инструмента от filamentgroup
• Мониторинг неиспользованного CSS с помощью мощностей DevTools Protocol
• Новые руководства по flexbox на MDN от Rachel Andrew
• Как лучше писать CSS в командах с помощью ACSS — динамической библиотеки Atomic CSS
• Counters and Stones — CSS игра с необычным использованием селекторов, эксперимент Романа Комарова

JavaScript

• habr JavaScript: 12 вопросов и ответов
• JavaScript 2018: вещи, которые вам необходимо знать и несколько тех, которые можно пропустить
• JavaScript vs. Crawl Budget: первому игроку приготовиться. Актуальный взгляд на JavaScript SEO
• Но на самом деле, что же такое тестирование JavaScript?
• Десять вопросов по теории JavaScript — ES6-викторина
• JavaScript уже победил. Взгляд на текущую распространенность языка с широкой дискуссией в комментариях
• Рассвет стейт-машин. Знакомство со стейт-машинами в контексте разработки фронтенда

Теория:
• «Вы не знаете JS: Асинхронность и Производительность» Кайла Симпсона. Первая глава в переводе Максона Вислогурова.
• Руководство для разработчиков по надежному клиентскому JavaScript
• JavaScript Object Explorer — ресурс, помогающий понять, какой метод будет лучше применить в определенной ситуации
• Массивы JavaScript — нахождение суммы, минимального, максимального и среднего значений
• Немного о генераторах

React:
• 11 библиотек (наборов компонентов) для React, о которых стоит знать в 2018-м
• Final Form: Дорога к клетчатому флагу
• Как писать хорошо читаемый код на React — 10 советов по кодстайлу
• React PWA. Стартовый шаблон для PWA, с сервер-сайд рендерингом, встроенными SEO и техниками для достижения максимальной скорости UX
• React-Redux-Sass-Starter — все что вам надо для старта простого приложения на React
• Gatsby.js: как настроить и использовать статический генератор сайта на React
• Демистификация использования памяти в ES6 React классах
• React.Fragment и семантический HTML. Попрощайтесь с бессмысленными и беспорядочными
в ваших компонентах! React 16 приносит нам
• react-performance — хелперы для отладки и записи производительности рендера компонента

VueJS:
• Обзор Vue.js в 2017-м
• Встречайте VuePress: разработка на WordPress с помощью Vue и GraphQL
• vue-starter — стартовый шаблон для изоморфных прогрессивных веб-приложений

Angular:
• Angular JS & ASP.NET: будет ли это будущим веб-разработки?
• Angular vs. React: The CLI

Libs & Plugins:
• Нативный JS для Bootstrap
• javascript-obfuscator — лучший опенсурсный обфускатор JavaScript кода, написанный на TypeScript. Поддерживает ряд техник обфускации, таких как: control flow flattening, dead code injection, strings encryption, self defending, debug protection.
• Встречайте Hyperapp 1.0 — 1KB JavaScript библиотека для создания фронтенд приложений
• immer — создаёт следующее неизменяемое состояние при помощи изменения текущего
• Uppy — продвинутый загрузчик файлов

Браузеры

• «Чипокалипсис»: Google подготовила обновление, закрывающее уязвимость Spectre в Android и Chrome, а Mozilla готовит соответствующий патч для Firefox
• Обновление Firefox 57.0.4 и Chrome 63.0.3239.132
• Представлена Opera 50 с защитой от майнинговых скриптов
• UC Browser занимает 16% на глобальном рынке и доминирует в некоторых странах Азии
• Chrome превращается в новый Internet Explorer 6

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

• Новогодние подарки часть первая: Meltdown, часть вторая: Spectre
• Призрачная катастрофа: чем грозят ошибки безопасности в процессорах
• Так ли страшен KAISER, как его малюют.
• Apple признала, что все устройства на macOS и iOS подвержены уязвимости процессоров
• Google считает незначительным влияние на производительность патчей для блокирования атак Meltdown и Spectre
• Январский рейтинг языков программирования TIOBE: Си объявлен языком 2017 года
• Итоги 2017 года: виртуальная и дополненная реальность
• Итоги акционеров: Как изменилась стоимость крупнейших ИТ-компаний мира за 2017 год
• Сервисы, которые мир потерял в 2017 году — версия Wired
• Apple присоединилась к Google и Microsoft, чтобы усовершенствовать сжатие онлайн-видео

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

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