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