Дайджест свежих материалов из мира фронтенда за последнюю неделю №261 (1 — 7 мая 2017)

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

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

• Подкаст «Фронтёрки», выпуск №5: Зарема Халилова, митапы и смерть jQuery
• Подкаст Веб-стандарты, Выпуск №66: Из React в Sketch, из HTML в WebGL, игры на CSS, гриды, HTML Шорты, дизайнеры и код в Яндексе.
• Фронтенд по фэн-шуй. Часть 1
• Как проверить доступность цветов, — новый выпуск A11ycasts #17
• “UX drives all of this.”. Крис Койер рассуждает об усложнении веб-разработки последнее время
• Начало работы с Relay “Modern” (клиентской библиотекой GraphQL от Facebook) для создания изоморфных веб приложений
• Как работает ContextReplacementPlugin в webpack
• Обновления:
  • Вышел npm@5 beta, можно ознакомиться со множеством обновлений
  • Релиз Autoprefixer 7: поддержка PostCSS 6 и Browserslist 2, улучшенная производительность, уменьшение размера node_modules и многое другое
  • Релиз PostCSS 6.0: дропнута поддержка Node.js 0.12, поддержка apply и меньшее потребление памяти
  • Презентация d3.express: интегрированная среда для реактивной разработки

• Производительность:
  • pageweight — посмотрите, как изображения влияют на скорость вашей страницы с помощью этого онлайн инструмента
  • Подождите, а WebP действительно стоит того. Zach Leatherman разбирается с новым форматом изображений в вебе
  • Молниеносно быстрые сайты благодаря различным вариантам предзагрузи (Prefetching)
  • speedracer — коллекция метрик производительности для вашей библиотеки/приложения
  • Как настроить поддержку AMP в WordPress
  • От AMP к PWA: Progressive Web AMPs

• SVG:
  • SVG спрайт с webpack одной строкой
  • SVGito: маленькие оптимизации для SVG
  • Три способа уменьшения размера SVG файлов с помощью SVGO
  • Как создать и редактировать SVG спрайты
  • Визуализация функций мозга в SVG
  • SVG текст маскирующий видео
  • Морфинг иконок в кнопках по клику

CSS

• Очередные HTML Шорты: Зачем задавать картинку через background-image, если можно просто написать background?
• Обратитесь к спецификации. Перевод вступительной заметки приглашенного эксперта рабочей группы CSS Rachel Andrew к серии Refer to the spec.
• Первый черновик CSS 5 уровня
• Является ли CSS-in-JS действительно плохой техникой для UX?
• Нативная валидация форм, ч. 1. Подробный разбор от Peter-Paul Koch
• Терминология набора правил в CSS
• Подробно о свойстве backdrop-filter, позволяющем применять фильтр к контенту за элементом
• CSS Animations vs Web Animations API: сравнение и примеры
• mini.css — минималистичный и отзывчивый CSS фреймворк
• iotacss — еще один масштабируемый SASS-фреймворк, использующий принципы OOCSS. Введение в iotaCSS
• Решение проблем, блокирующих рендер CSS
• Пошаговое руководство по созданию всплывающих подсказок на чистом CSS
• Упорядоченные списки с помощью юникод символов
• Сайты, использующие CSS Grid на продакшене
• Mobile, Small, Portrait, Slow, Interlace, Monochrome, Coarse, Non-Hover, First. Полезные медиа-запросы в спецификации Media Query Level 4
• Почему Facebook стоит поискать других писателей CSS
• CSS Custom Properties:
  • CSS Custom Properties и темизация
  • Выигрываем с CSS переменными
  • CSS Custom Properties — ежедневное использование

JavaScript

• Prepack — новый инструмент от Facebook, делающий исполнение JavaScript кода быстрее. Cравнение Prepack и Svelte, а также webpack плагин для prepack
• 4 видео с UralJS #3
• Элементы JavaScript стиля. Код должен быть простым, а не упрощенным.
• Python для разработчиков JavaScript
• Глоссарий современных концептов JavaScript: часть 2
• Почему я двигаюсь к веб-компонетам и не оглядываюсь назад
• Введение в Flow, выступление Benjamin Reid на Bristol JS
• ES2015+:
  • Ужасный import кракен — как использовать ES6-модули и не сойти с ума
  • Как продвигается внедрение ES6 модулей в Node.js
  • ECMAScript модули в браузерах
  • Практическое руководство по использованию fetch() и reduce() для извлечения и форматирования данных со внешних API
  • Асинхронный JavaScript с async/await. Бесплатный курс на egghead
  • JavaScript: стрелочные функции для начинающих

• React:
  • Подкаст «Пятиминутка React» #13 — Redux Business Logic
  • Разработка вашего первого Progressive Web App c React
  • 10 известных приложений, использующих сегодня ReactJS
  • Анимированные переходы по страницам в React
  • Оптимизация производительности React с помощью компонентов без состояния
  • react-native-masonry — react-native компонент для вывода сетки изображений в стиле Mansory с поддержкой динамических колонок, прогрессивной загрузки изображений, изменения ориентации устройства и обработчиками событий нажатия
  • SVG в JSX — конвертер SVG в валидный React SVG, написанный на Svelte
  • Как создать ToDo приложение с React, Redux и Webpack

• Angular:
  • Почему мы выбрали новый Angular
  • Как создать full-page сайт на Angular
  • Обновление Angular приложений

• Vue:
  • Когда VueJS не может помочь тебе
  • Обновление до Vue.js 2.3
  • Концепт минималистичного блога с креативными переходами на Vue.js 2
  • Переход с Angular на Vue: вьюдивительное приключение
  • Семь способов задания шаблона компонента во VueJS
  • vue-infinite-loading — плагин для беконечной прокрутки под Vue.js 1.0 и Vue.js 2.0

• Libs & Plugins:
  • SmartPhoto.js — новая библиотека для создания отзывчивых галерей, отлично подходящая для мобильных устройств
  • pkg — CLI упаковщик проекта на Node.js в исполняемый файл
  • Начало работы с Riot.js
  • Typefont — JavaScript проект для распознавания текста в изображениях.
  • spector — с легкостью изучайте и устраняйте неполадки в WebGL сценах

Браузеры

• Браузер Microsoft Edge и поисковик Bing, установленные в Windows 10 S по умолчанию, нельзя заменить
• Fathom, новый JS-фреймворк от Mozilla, позволит браузерам «оценивать» веб-страницы с точки зрения человека
• Microsoft тестирует функцию безопасного выполнения браузера Edge в виртуальной машине
• Обновление Firefox 53.0.2 и 52.1.1
• Samsung DeX привносит новое разрешение в мобильный веб
• Технические подробности Safari Technology Preview 29
• Работа с Chrome в Headless Mode

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

• Массовый фишинг с поддельными ссылками на Google Docs возымел ряд последствий
• Причиной недавней фишинговой атаки «Google Docs» стала уязвимость в OAuth, обнаруженная 6 лет назад
• Microsoft представила Windows 10 S для образования. Что это за система?
• 26% взрослого населения развитых стран не умеют пользоваться компьютером
• Первые спутники SpaceX для раздачи интернета отправятся на орбиту в 2019 году, теперь планируется запустить почти 12 тыс. аппаратов
• Google и Facebook контролируют 20% мировых доходов с рекламы
• Microsoft перестала инвестировать в Windows 10 Mobile
• Истёк срок действия патентов на MP3
• Аудитория Facebook достигла 1,9 млрд пользователей в месяц
• Apple — лидер рынка носимых устройств
• DARPA: сюрпризы и непроизносимое
• Из-за чего наступит закат Google
• Facebook, Google, Microsoft: о стажировках и карьере в гигантах
• SpaceX наметила запуск первых спутников для раздачи интернета на 2019 год

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

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

Автор: Zfort Group

Источник