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

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

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

---

Медиа

• Подкаст «Frontend Weekend» #39 – Григорий Шехет про жизнь и работу в Сан-Франциско, frontend-дайджест и FRP
• Подкаст «Веб-стандарты», Выпуск №107: CSS на JS в Chrome, HTTPS и SEO, сервис-воркеры в Safari, маркетинг CSS, как провести и пройти собеседование.
• Подкаст «devschacht»: Ночной фронтенд #21 — Rolling Scopes, день первый
• Подкаст «Пятиминутка Angular» #9 — Angular Msk, Pipeable Operators, Clarity UI, CLI 1.7.0 Beta 3, Ng 6.0 Beta 2
• Подкаст «Drinkcast», #25 — «Те самые Java-фронтендеры»
• «ALL YOUR HTML» #35: «Wordpress минисайт с нуля за час»
• Запись конференции WSD, прошедшей Москве 3 февраля
• Митап по БЭМ. От азов до React.js.
• Все видео со @SmashingConf London
• Yo! новое шоу с последниими новостями о дизайне и веб-разработке от Rob Hope

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

• Фронтенд фреймворки: кастомные vs готовые к использованию решения
• Еще одна причина использовать noopener — глубокое погружение в распределение процесса рендеринга
• Web Assembly Studio — онлайн-песочница для изучения Web Assembly

• Производительность:
  
  • Оптимизация веб-производительности с помощью webpack: уменьшаем размер фронтенд кода и мониторим его скорость. Новое руководство от Ивана Акулова и Эдди Османи на developers.google.com
  • Как СЕОшники могут извлечь выгоду из Google Lighthouse – метрики веб-производительности
  • Взгляд на текущее состояние прогрессивных изображений и пользовательское восприятие
  • Производительность сайта и краулинговый бюджет
  • Как мы сделали загрузку наших страниц еще быстрее
  • Оптимизация вашего MP4 видео для лучшей производительности
  

• AMP/PWA:
  
  • PWA на десктопе
  • Service workers: маленькие герои, стоящие за Progressive Web Apps
  • Google AMP & WordPress: все, что вам нужно знать
  • Встречаем PWA в Microsoft Edge и Windows 10. Microsoft изложила стратегию по внедрению Progressive Web Apps
  

• Инструменты:
  
  • Роутинг, бандлинг и ленивая загрузка на Webpack
  • hreftools — коллекция онлайновых веб-инструментов для ускорения вашей работы
  • В разделе анализа сайтов Chrome появилась новая категория с SEO аудитом
  • От Webpack к Parcel: миграция create-react-app
  

• Accessibility:
  
  • aria-label — это ксенофобия
  • Мое путешествие по доступности: что я узнал за это время
  • Вопросы по Accessibility для собеседования
  • Упрощенные рекомендации по WCAG 2.1
  

• Эффекты:
  
  • Еженедельная подборка красивых эффектов на CSS/SVG/JS #69
  • Анимированный куб на чистом CSS
  • Бесконечная лестница на CSS
  • Slice Revealer. Эффектная анимация полос слайдера
  • Эффекты наведения, зависящие от направления движения курсора
  • Реализация Winamp2-js на JS
  

CSS

• Современный CSS для динозавров
• Ссылки против кнопок в современных веб-приложениях
• Поиск «мёртвого» CSS
• CSS позволяет собирать конфиденциальные данные пользователей
• Использование Media Queries для отзывчивого дизайна в 2018
• Использование конических градиентов и CSS переменных для создания круговой диаграммы для Range Input
• Темизация сайтов с помощью CSS переменных
• Вычисления с помощью CSS каунтеров и CSS Grid
• modern-normalize — современные техники нормализации стилей в браузерах
• 3 суперспособности модели Flex-Box — как работают flex-basis, flex-shrink и flex-grow
• Internet Explorer еще существует. Использовать ли CSS Grid?

JavaScript

• Топ-10 ошибок из 1000+ JavaScript-проектов и рекомендации по их устранению
• Как работает JS: веб-воркеры и пять сценариев их использования
• Научитесь определять красные флажки в вашем коде JavaScript/React коде
• Обзор JavaScript тестирования в 2018
• Пять общих проблем в приложениях на GraphQL (и как их исправить)
• JavaScript фреймворки в числах — зима 2018
• Angular 5 vs. React vs. Vue

• ES6:
  
  • Отменяемые Promises в EcmaScript6
  • JavaScript ES6 — синтаксис оператора spread (…)
  • JavaScript ES6: оператор расширения
  • Использование параметров по умолчанию в ES6
  • Приватные переменные в JavaScript
  

• React:
  
  • Что нового в React 16.3(.0-alpha)
  • Техники бесконечного скролла в React
  • Эволюция паттернов в React
  • Презентация React Scope — инструмент для визуализации ваших React компонентов, показывающий, как вы взаимодействуете с вашим приложенем
  • Новый Context API в React
  

• VueJS:
  
  • Создание приложение простого распрознавания лиц с помощью Vue.js и Kairos
  • Vue в 2018 — интервью с Evan You, автором Vue.js
  

• Angular:
  
  • Переход с AngularJS на Angular: Цели, планы и правила переноса элементов (1/3), Проблемы и решения гибридного режима (2/3), Жизнь после AngularJS (3/3)
  • Запускайте Angular CLI репы напрямую в вашем браузере
  • Начало работы с Angular SDK
  

Браузеры

• Быстрее Firefox и в обновлённом дизайне: представлен браузер Opera 51
• Анонсирована функция удаления личной информации из URL-адреса в Firefox 59
• Google выпустила бета-версию Chrome 65. Разработчики улучшили блокировку всплывающих окон, обновили видеоплеер для Android и представили несколько новых API.
• С июля браузер Google Chrome будет отмечать все HTTP-сайты небезопасными
• Как работает блокировщик рекламы в Google Chrome

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

• 15 SEO-мифов, которые никогда не умрут
• Новая версия WordPress сломала функцию автообновления движка
• Google обучила ИИ многозадачности в процессе интенсивной игровой сессии
• Обнаружена уязвимость, позволяющая «положить» почти все сайты на движке WordPress
• Компания Mozilla представила шлюз для интернета вещей
• Что происходит в космическом бизнесе: обзор перспективных направлений частной космонавтики
• Блокчейн Шредингера: как технология в основе биткоина и полезна, и опасна одновременно
• Определены главные тренды 2018 года на GitHub-проекты
• «Лично я приветствую наших механических повелителей»: мнения ведущих мировых учёных об ИИ
• Жадность, хрупкость, непрозрачность и мелочность: что не так с ИИ на основе глубинного обучения
• Программист разгадал головоломку 2015 года и получил 50 тысяч долларов в биткоинах

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

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