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

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

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

CSS

Javascript

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

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

• Подкаст Веб-стандарты, Выпуск №70: Маркетинг Firefox, npm 5 догоняет, доступность, почему шорты и шоу, CSS-в-JS, Webpack и SPA, гриды, новичкам.
• Подкаст Frontend Weekend FW #4 — Как стать звездой frontend'а за год
• Подкаст devschacht, Выпуск №3
• Подкаст Пятиминутка React #18 — pnpm
• Зачем нужен БЭМ? — HTML Шорты
• Экспорт графики для веба, Виталий Зюзин — HTML Academy
• Фронтенд по фэн-шуй. Часть 3
• Какое будущее у фронтенд разработки?
• Как долго должен существовать сайт?
• Делаем ли мы веб слишком сложным?
• REST 2.0 уже здесь и его название GraphQL
• Производительность:
  
  • Справочник по анализу производительности в Chrome DevTools
  • Вне пузыря: производительность в реальном мире
  • Frontend Optimization Handbook — бесплатная PDF-книга об инструментах и процессе оптимизации фронтенда, от O'Reilly
  • Руководство по оптимизации WordPress в блоге gtmetrix
  • asm-dom — минимальный WebAssembly virtual DOM, сфокусированный на производительности
  
  
• Инструменты:
  
  • Введение в философию Webpack
  • Вышел релиз npm v5.0.0: более быстрый, с оффлайн режимом, --save по умолчанию и локфайлом
  • Этапы изучения Webpack, ч.2 — The Config
  • Что нового в DevTools (Chrome 60): подробная панель аудита, пометки для третьесторонних ресурсов, множество улучшений в консоли
  • Инструменты для работы с HTML письмами
  
  
• PWA:
  
  • Ускорение сайтов: принципы работы Progressive Web AMP
  • Исследуем прогрессивные веб-приложения в реальном мире
  • Правильный путь создания PWA
  • Создание PWA в контексте JavaScript фреймворков
  • Реализация Hacker News в качестве Progressive Web Apps
  • Shape Detection API: определение баркодов, лиц и текста в изображениях
  
  
• Доступность:
  
  • Подробно об ARIA. Причина и решение всех наших проблем доступности
  • Почему заголовки и лендмарки так важны? — свежий выпуск A11ycasts #18
  • Улучшения доступности в EdgeHTML 15
  
  
• SVG:
  
  • Что лежит в основе SVG
  • Продвинутая работа с SVG иконками с помощью SnapAnimationStates, плагина к snap.svg
  • Как создать интерактивные карты на SVG с react, topojson и d3-geo
  
  
• Эффектный веб:
  
  • Интерактивный эффект фокусировки при наведении мыши
  • Красиво анимированные точки с помощью WebGL и regl
  • Морфинг фоновых фигур по скроллу
  • Gif masking в SVG
  • Бегущий неоновый текст на «чистом CSS»
  
  

CSS

• Видео с moscowcss_3
• Решения принципов SOLID в CSS: часть 1, часть 2, часть 3
• Унифицированный язык стилизации
• 11 вещей, которые и выучил, читая спецификацию flexbox
• Как изучить Flexbox за 10 минут
• Хорошее время, чтобы понять CSS layout, говорит нам Рейчл Эндрю
• Архитектура CSS и лучшие практики, серия обучающих видео «Foundation CSS Lesson Series» от ZURB
• Собственные темы с Angular Material

JavaScripts

• Невероятный JavaScript — трюки, недоразумения и необычные возможности
• JavaScript: элементы стиля
• Путь к трансдьюсерам на чистом JavaScript
• Жизнь и удивительные приключения в экзотических JavaScript окружениях
• Подкаст Пятиминутка React #19 — React Europe и Holy JS
• f(вторник): введение. Цикл статей о функциональном программировании в JavaScript
• Ленивый синтаксический анализ JavaScript в V8. Перевод статьи Matt Zeunert: Lazy JavaScript Parsing in V8.
• Видео с MinskJS Meetup #2
• Топ 7 фреймворков JavaScript
• Функции высокого порядка в Lodash
• Состояние JavaScript модулей
• JavaScript и оператор расширения
• Что такое Event Bubbling в JavaScript? Обяснение Event Propagation
• Введение в управление данными и визуализации в JavaScript
• Управление асинхронными зависимостями с JavaScript
• chromatism — простой набор утилит для работы с цветами
• Инструменты:
  
  • Краткая и неполная история бандлеров JavaScript
  • JavaScript фреймворки для юнит тестирования: сравнение Jasmine, Mocha, AVA, Tape и Jest
  • iD3 — IDE для D3.js
  
  
• React:
  
  • Как добиться повторного использования React компонентов (Перевод)
  • Анонс styled-components v2
  • Как структурировать ваш проект на React
  • Создание приложения React VR
  • React Forms: использование Refs
  • react-live — песочница для живого редактирования React компонентов
  • editor — кастомизируемый WYSIWYG на стероидах (React и Redux)
  
  
• Angular:
  
  • Формы и кастомные поля ввода в Angular 2+
  • Создание семантических компонентов в Angular и React
  • Превращение Angular контроллеров в ES6 классы
  
  
• Vue:
  
  • Управление состоянием во Vue: начинаем знакомиться с Vuex
  • Переключаемся с React на Vue.js
  • Как мигрировать с AngularJS на Vue
  
  

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

• Статья, на которую можно ссылаться: что такое блокчейн
• Stack Overflow вывел из Vim уже больше миллиона пользователей
• Итоги WannaCry: подборка основных материалов на «Хабрахабре» и не только
• Рейтинг ИТ-книг 2017
• Microsoft переводит разработку Windows на Git
• Google будет автоматически конвертировать медийные объявления в AMP
• Facebook создал решение для интеграции Instant Articles, AMP и Apple News
• Нейросеть написала кулинарную книгу
• «Скиапарелли» сгубила тригонометрия
• 4 самых важных фактора ранжирования Google в 2017 году
• Рабы XXI века. Внемировая экономика: надо ли платить киборгам зарплату?
• Как проходит стажировка в Microsoft — рассказ студента
• MP3 умер? Да здравствует MP3!
• Chrome выиграл
• Сатана объясняет HTML с помошью DEATH METAL

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

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