Дайджест свежих материалов из мира фронтенда за последнюю неделю №274 (1 — 6 августа 2017)

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

Медиа

• Подкаст «Веб-стандарты», Выпуск №79: Сервис-воркеры уже не шутка, загрузка шрифтов, гриды и флексы, picture на практике, тяжёлые пакеты, WTF JS?
• Подкаст «Frontend Weekend» #14: От фриланса до собственной школы онлайн-образования
• Подкаст «Пятиминутка React» #28: React 16 Beta
• Подкаст «Пятиминутка React» #29: Мониторинг ошибок (youtube версия с видеорядом и слайдами презентации)
• Подкаст «Фронтенд Юность (18+)» #12 : Где зашкварно работать
• Подкаст «Фронтенд Юность (18+)» #13 : Хороший/Плохой программист
• Посторонние шрифты — HTML Шорты. Как правильно загружать шрифты? Вадим Макеев про FOIT, FOUT, FOFT и Font Face Observer
• Еженедельный стрим от Юрия Артюха «ALL YOUR HTML» #10 : Юрий играет в играл в Code In The Dark, делает акварель эффект и триангуляцию для будущих анимаций

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

• Руководство для начинающих по прогрессивным веб-приложениям и фронтенду
• 7 инструментов для разработки вашего первого прогрессивного веб-приложения
• Адаптивные изображения 201: технология Client Hints
• Упрощаем работу с npm: полезные сокращения и трюки
• 10 руководств для улучшения доступности в вебе
• Заменяемые элементы в HTML: мифы и реальность
• Я сделал стайлгайд для моего личного сайта и вы тоже должны. Свежая заметка от Zach Leatherman
• Производительность:
  • Разница между GTmetrix, PageSpeed Insights, Pingdom Tools и WebPagetest
  • Критический запрос. Подробная статья об особенностях загрузки различных типов контента, с приоритетами, примерами и чеклистом проверки
  • «Первая значимая отрисовка», доклад Patrick Hamann на Front-Trends 2017
  • «Производительность рендера наоборот» Martin Splitt на Front-Trends 2017 со взглядом на сайты с точки зрения компьютерной графики

• Эффектный веб:
  • Еженедельная подборка красивых эффектов на CSS/SVG/JS #47
  • Сравнение времени на Vue (+SVG, GSAP и .toLocaleTimeString )
  • Креативная анимация для эффектов наведения на мыши на меню
  • Эффекты переходов для полноэкраных лейаутов страниц
  • Инструменты для параллакс-анимации SVG

CSS

• Унифицированный язык стилей
• emotion: Следующее поколение CSS-in-JS
• Топ 9 библиотек для анимации в 2017
• Фокусировка на фокусе. О :focus, :focus-ring и доступности
• Есди вы действительно не любите FOUT, `font-display: optional` может вам помочь
• Shoelace — стартовый набор кастомизируемых стилей в духе bootstrap, но на современный лад
• Избавление от некрасивого состояния :focus (а так же его сохранение)
• Релиз Glamorous v4
• Как использовать пользоватеслькие CSS свойства с переходами, трансформациями и анимацией
• «Мастерим фоллбек для веб-шрифта», свежий ролик от Front End Center
• «Мощь CSS», доклад Una Kravets на Front-Trends 2017

JavaScript

• JavaScript как явление, JavaScript как праздник, JavaScript как мыслевирус
• Скрытые послания в именах свойств JavaScript
• Новый V8 и скорость Node.js: техники оптимизации сегодня и завтра
• Выпуск JavaScript-движка V8 6.1
• Online VS Code IDE для Angular и React.
• Дорога к современному JavaScript
• Vue vs React: битва Javascript фреймворков
• What the f*ck JavaScript?. Курируемый список забавных и хитрых примеров на JavaScript забавы ради
• Ваш последний ESLint config. Следующий будет с Prettier
• JavaScript-загадки для забавы и пользы — Dan Shappir
• Всплытие в JavaScript
• Создание библиотеки для эффекта Image Zoom на ванильном JavaScript
• О да! Async / Await
• VueJS:
  • Аудит производительности Vue.js docs
  • Nuxt.js: фреймворк для создания универсальных Vue.js приложений
  • Создание кастомных инпутов на Vue.js
  • Биндинг классов к HTML с помощью Vue.js
  • Как создать фотогалерею на Vue.js
  • vuestic — Админская приборная панель для Vue.js приложений

• React:
  • Как задеплоить веб-приложение на связке React и Redux за 10 минут
  • TDD React.js приложений
  • Изучение React.js проще, чем ты думаешь
  • Глубокое погружение в анимацию React
  • hocs — коллекция высокоуровненвых компонентов для React
  • Введение в React роутер
  • React.JS  —  передача данных в компонентах
  • Прототипирование с React VR

• Angular:
  • Что нового в Angular 5: упрощена работа с прогрессивными веб приложениями
  • Сравнение между: Angular 1 Vs Angular 2 Vs Angular 4
  • Ключевые концепции разработки приложений на Angular
  • Состояние CSS в Angular
  • Оптимизация производительности вашего Angular приложения

Браузеры

• В Firefox началось тестирование отправки файлов, голосового ввода и заметок
• Разработчики Mozilla тестируют инструмент для передачи уничтожающихся после загрузки файлов
• В тестовых сборках Chrome для Android появился встроенный блокировщик рекламы
• Еще одно расширение для Chrome превратили в adware, взломав его разработчика
• Intersection Observer приходит в Firefox
• Facebook присоединился к Chromium
• Машинное обучение проникает в браузеры с помощью JavaScript

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

• Flash мертв: кто следующий?
• Издатели возвращаются обратно к WordPress после коротких экспериментов с Medium
• Запущена рабочая группа по WebAssembly (W3C)
• webpack награждён $125,000 программой MOSS (Mozilla)
• Почему проваливаются стартапы: анализ причин, названных основателями 194 компаний
• Форк Bitcoin Cash в сети биткоина официально состоялся
• Более $3000: Курс Bitcoin обновил исторический максимум и продолжает расти
• В Facebook теперь для перевода используют нейронные сети
• Что происходит в интернете за минуту в 2017 году (инфографика)

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

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

Автор: Zfort Group

Источник