Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Медиа | Веб-разработка | CSS | Javascript | Браузеры | Занимательное
•
Подкаст «devschacht»: Выпуск №11 — Школа разработки интерфейсов Яндекса
•
«ALL YOUR HTML» #30: «3D сетка с помощью линий и шейдеров»
•
PiterJS, Запись докладов с 19 митапа: Сергей Чикуенок — А так ли нужен Virtual DOM?, Дмитрий Пацура — О разработке на React Native, Сергей Новиков — Что умеет Polymer
•
Путь верстальщика: с нуля до сеньора
•
Awesome Checklist Checklist: курируемый список чеклистов, посвященных веб-разработке и не только
•
Как оставаться в курсе безумия, творящегося во фронтенде — инструкция из трех шагов
•
Эксперты по SEO называют PWA ключем к успеху в 2018
•
Как Airbnb ставит AMP в основу своей цифровой стратегии
•
Представление Web Payments: облегчаем онлайн-платежи с помощью Payment Request API
•
Повторяющаяся анимация с помощью Web Animations API
•
Я собираю номера и пароли кредитных карт с ваших сайтов. И вот как это происходит
•
Обрезка и масштабирование изображений с помощью SVG. SVG, который заменяет CSS object-fit
•
Решение реальных проблем с 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: 12 вопросов и ответов
•
JavaScript 2018: вещи, которые вам необходимо знать и несколько тех, которые можно пропустить
•
JavaScript vs. Crawl Budget: первому игроку приготовиться. Актуальный взгляд на JavaScript SEO
•
Но на самом деле, что же такое тестирование JavaScript?
•
Десять вопросов по теории JavaScript – ES6-викторина
•
JavaScript уже победил. Взгляд на текущую распространенность языка с широкой дискуссией в комментариях
•
Рассвет стейт-машин. Знакомство со стейт-машинами в контексте разработки фронтенда
• «Чипокалипсис»: 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.
Медиа | Веб-разработка | CSS | Javascript | Браузеры | Занимательное
Медиа
•

•

•

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

•

•

•


•


•

•

•

•

- Производительность:
•“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
•

•

•

•

•

•

•

•

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. Попрощайтесь с бессмысленными и беспорядочными <div /> в ваших компонентах! React 16 приносит нам <Fragment />
•react-performance — хелперы для отладки и записи производительности рендера компонента
VueJS:
•Обзор Vue.js в 2017-м
•Встречайте VuePress: разработка на WordPress с помощью Vue и GraphQL
•vue-starter — стартовый шаблон для изоморфных прогрессивных веб-приложений
- 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% на глобальном рынке и доминирует в некоторых странах Азии
•

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