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

    Медиа    |    Веб-разработка    |    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'e 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 алгоритмов: для начинающих
• 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.

Original source: habrahabr.ru (comments, light).