Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Медиа | Веб-разработка | CSS | Javascript | Браузеры | Занимательное
Медиа
• 
Подкаст «Пятиминутка React» #34: Moscow Frontend Conference 2017 и BEM React Core
• 
Подкаст «devschacht»: Ночной фронтенд #3
• 
Подкаст «Фронтенд Юность (18+)» #18 Как Лёха не попал в Booking: Прокрастинация, собеседование в Booking, Приватные данные классов ES6, async_hooks
• 
Подкаст «Drinkcast», Выпуск #7 — «Все фронтендеры попадают в Питер»
• 
.getInstance: «Промисы в JavaScript»
• 
Видео докладов с конференции ChernivtsiJS #3, прошедшей 10 июня, 2017
• 
Свежий выпуск шоу «Supercharged» о новом свойстве Font-Display, позволяющим улучшить скорость загрузки веб-шрифтов
• 
Свежий выпуск шоу «Totally Tooling Tips» об инструменте Lighthouse
Веб-разработка
• 
confs.tech — сайт, где можно ознакомиться с грядущими международными конференциями по фронтенду
• 
Руководство по виртуальной реальности для веб-разработчиков
• 
Об особенностях и огранизации фронтенда на HealthCare.gov
• 
Примеры того, что я делаю каждый день в качестве разработчика фронтенда. Блог разработчика из IoT-компании
• 
Как в сервисе каршеринга car2go выбирали себе фреймворк
• 
Ленивое асинхронное растрирование SVG. Jake Archibald показывает способ растрирования SVG с помощью createImageBitmap
• Еженедельная подборка красивых эффектов на CSS/SVG/JS #52
- AMP/PWA:
•
Google официально добавил быстрые ответы на основе AMP в мобильную выдачу
•
Свежая статья в блоге amphtml о том, как AMP может ускорить e-commerce сайты
•
Зачем и как внедряли Google AMP на Condé Nast
•
Имплементируем “Приложение” в Прогрессивных Веб-Приложениях
- Инструменты:
• Анонс Yarn 1.0
•
Это нормально не использовать Yarn
•
Прекрасный мир Webpack
•
RESTool — open source UI инструмент для управления RESTful APIs
CSS
• 
Сокращённые свойства. Зачем задавать картинку через background-image, если можно просто написать background?
• 
Сборник советов по организации интерфейсов от Steve Schoger, на HTML и CSS
• 
Онлайн-генератор Critical Path CSS
• 
Цзен просто писать CSS. Заметка от Rich Harris, где он рассказывает, как самые большие проблемы с CSS могут быть решены без CSS-in-JS
- Структура страниц:
• Что может поломать макет на гридах (CSS Grid Layout)
•
Два способа сломать CSS Grid и как это починить
•
Создаем структуру Trello с помощью CSS Grid и Flexbox
•
Видео, показывающее как использовать Feature Queries и Grid Layout
•
Базовая грид-раскладка с фоллбеком с помощью feature queries
•
Конкурс по использованию CSS Grid: создай макет и выиграй призы от SmashingMagazine!)
JavaScript
• 
8 Ошибок при изучении JavaScript — видео на канале Web Developer Blog
• JavaScript и SEO: сканирует ли Google JavaScript?
• [[][[]]+[]][+[]][++[+[]][+[]]] — это «n» в JavaScript
• 7 советов по обработке «undefined» в JavaScript
• 
Javascript: любопытный случай с Null >= 0
• 
Ироничный рассказ о руковостве каждого JavaScript фреймворка, написанного более чем 5 минут назад
• 
Как я убедил нашего технического директора перейти с CoffeeScript на ES6
• 
Набор базовых алгоритмов: стартовый комплект
• 
React vs Angular: подробное сравнение
- Теория:
•
Как работает JS: обзор движка, механизмов времени выполнения, стека вызовов
•
Как работает JS: о внутреннем устройстве V8 и оптимизации кода
• ES6, ES8, ES2017: что такое ECMAScript и чем это отличается от JavaScript
•
Глубокое погружение в JavaScript массивы – эволюция и производительность
VueJS:
• Как разместить Vue-app на Heroku
•
Готовые к продакшену веб-приложения с vue-pwa-boilerplate (Jeff Posnick на VueNYC)
•
Vue.Js Vs. Jquery: варианты использования и сравнение с примерами
•
3 шаблона резделения года для VueJS и Webpack
React:
•
react-imgpro — компонент процессинга изображений для React
•
Вам может понадобиться React, но не вся экосистема
•
Firebase + React: оптимизация для реального мира
Angular:
•
Как я перестал любить Angular
•
Существенное различие между pure и impure pipes в Angular и почему это имеет значение
•
Существенное различие между Constructor и ngOnInit в Angular
- Libs & Plugins:
•
webworker-promise — Учим webworkers хорошим манерам
•
Size Limit: делаем веб легче. Злые Марсиане представляют инструмент, который предотвратит ваши JS библиотеки от разбухания, отслеживая зависимости и полифилы
•
Rythm.js — JS библиотека, которая заставляет компоненты на странице ритмично танцевать
•
LookForward.js — небольшая библиотека, помогающая создавать плавные переходы между страницами
•
Захват потока с MediaRecorder
Браузеры
• 
Выпуск web-браузера Chrome 61
• 
9 вещей в Firefox Dev Tools, о которых вы не знали
• 
Обзор всех инструментов разработчика Chrome DevTools
• 
Как отлаживать JavaScript с помощью Chrome DevTools
• 
В Chrome 63 появятся средства информирования о попытках перехвата HTTPS
• Создатель Opera обвинил Google в препятствовании работе Opera и Vivaldi
Занимательное
• Мэтт Мулленвег описал проблемы, связанные с Gutenberg, и подтвердил, что новый редактор появится в WordPress 5.0
• Компания-владелец Trello и Jira запустила корпоративный мессенджер Stride
• Facebook запустил сервис для встреч с друзьями в духе Badoo и Tinder
• Криптовалюта: текущее состояние и перспективы развития
• Наставничество в IT: что делать, если вам поручили джуниора
• Как защитить веб-приложение: основные советы, инструменты, полезные ссылки
• Как Google в тайне финансирует академические исследования. Себе на пользу
• Ради всего святого, напишите на главной сайта, что делает ваша компания
Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Автор: alexzfort
