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

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

---

Медиа

• Подкаст «Frontend Weekend» #50 – Алексей Симоненко об истории создания HTML Academy и особенностях pitercss_conf
• Подкаст «Веб-стандарты», выпуск №118: Node.js 10 и npm 6, Google Fonts и HTTPS, фолбэки для гридов, ФП или ООП, Хабр по-английски, заголовки для SPA и самый плохой SPA в интернете.
• Подкаст CSSSR: Новости 512 — Выпуск №3 (23.04 — 29.04)
• «ALL YOUR HTML» #46: «Верстка на vue.js»

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

• Фронтенд как у сына маминой подруги
• Генератор статических сайтов metalsmith
• Я создал PWA и опубликовал его в 3 магазина приложений. И вот что я узнал
• О глобальном атрибуте `hidden` в HTML5

• Производительность:
  • Измеряем сайты с помощью Mobile-First инструментов оптимизации
  • GTmetrix Bookmarklet – начните тестирование прямо из вашей панели закладок
  • Case study: анализ производительности сайта Walmart
  • Perfume.js — JS библиотека для измерения коротких и длинных скриптов, FP/FCP, TTI, CFM, а также их аннотации в DevTools timeline и публикации результатов в Google Analytics.
  

• Инструменты:
  • Релиз Node.js 10 и NPM 6
  • Инструментарий Microsoft Edge DevTools представлен в виде Windows-приложения
  • Что нового в Node 10
  • 6 необходимы инструментов, которые сделают релиз, версионирование и поддержку ваших npm модулей
  • webpack 4 configurator — создание персонализированного и оптимизированного webpack.config.js
  

• Accessibility:
  • WCAG 2.1: что нас ожидает в новом руководстве по доступности
  • Более доступная разметка с помощью display: contents
  • Заметка о работе над доступностью сайта reddit
  • HTML Email и Accessibility
  • Инспектируем доступность писем в Firefox
  • О том, как правильно создавать мемы с учетом доступности
  • Infinite Scroll & Accessibility! Это вообще нормально? (Спойлер — нет)
  

• Анимация:
  • Креативный эффект для кнопок, позволяющих разложить их на мелкие частицы
  • Анимация для перехода по страницам, которая ощущается нативной
  • Интерактивный Mario Kart на «чистом» CSS
  

CSS

• Зачем нужны кастомные свойства?
• Оптимизация стилей от разработчиков Linkedin: опенсорсные проекты CSS Blocks для компонентов стилей и OptiCSS для их оптимизации
• GridtoFlex — проект от Юны Кравец, включающий в себя Flexbox фоллбеки для популярных решений интерфейсов, использующих CSS Grid.
• 7 трюков для улучшения производительности CSS
• Стилизация и анимация элемента Progress
• Рецепты радиальных градиентов
• 3 способа, с которыми CSSinJS убирает мусор из вашего процесса веб-разработки
• Заметка о производительной анимации и о скрытых проблемах will-change
• Почему мы решили отказаться от LESS в пользу SCSS

JavaScript

• «Герои Меча и Магии» в браузере: долго, сложно и невыносимо интересно
• Как работает JS: анимация средствами CSS и JavaScript
• Хочешь изучить ES6+? Попробуй этот бесплатный курс из 23 частей и стань JavaScript ниндзя
• Расширения VS Code, облегчающие написание кода JS разработчикам и делающие их счастливее
• Краткая история JavaScript, видео от Brendan Eich (создателя JavaScript)
• Демистификация ‘new’ в JavaScript

• VueJS:
  • Вопросы для собеседования по Vue.js
  • VuePress vs Nuxt.js
  • Создание отзывчивых Vue компонентов с помощью ResizeObserver
  • Приложение на Vue.js с использованием Axios с Vuex
  

• React:
  • Стратегии тестирования для React и Redux
  • 5 лучших архитектурных практик React
  

• Angular:
  • Ускорение Angular-приложений
  • Новые возможности для разработки приложений на AngularJS- Часть 1: компонентная архитектура, Часть 2: создание приложения
  • Запускаем AngularJS 1.6 в Angular 5 (бок о бок)
  

• Libs & Plugins:
  • tui.calendar — календарь со всем необходимым
  • DayJs — Быстрая иммутабельная библиотека, альтернативная Moment.js, с похожим современным API
  • Dinero.js — библиотека для работы с денежными значениями в JavaScript.
  

Браузеры

• Можно ли доверять свои пароли синхронизации Chrome и Firefox?
• В Firefox 60 появится защита от CSRF-атак
• Мгновенный поиск и синхронизация по QR-коду: браузер Opera получил обновление
• Новая версия браузера Google Chrome Canary демонстрирует грядущее обновление дизайна в стиле Material Design 2
• Улучшения в Inspector Styles Sidebar
• Использование Chrome как локального веб сервера

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

• habrahabr.ru → habr.com
• Google выпустила отдельное мобильное приложение для ведения задач Google Tasks
• Представлена утилита DeepCode для нахождения и исправления ошибок в коде
• Mozilla открыла доступ к Hubs: социальная сеть в виртуальной реальности
• Графический редактор GIMP обновился впервые за 6 лет
• Особенности соответствия требованиям GDPR для WordPress пользователей


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

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