Дайджест свежих материалов из мира фронтенда за последнюю неделю №324 (23 — 29 июля 2018)

Медиа

• Подкаст «Веб-стандарты», Выпуск №131:Chrome 68, опасный HTTP, React или jQuery, вы не знаете инлайн-блоки, иллюстрированные флексы, курсы на английском, опасные пресеты Babel, браузеры мешают JS
• Подкаст «Frontend Weekend» #63 – Александр Першин о том, как и зачем создавать школу онлайн-образования в России
• Подкаст «CSSSR» Новости 512 — Выпуск №16 (23.07 — 29.07)
• Подкаст «Девшахта/Ночной фронтенд»: №43 — Снова о Jenkins, ChaosConstructions 2018, ndb и ШРИ
• Подкаст «Фронтенд Юность (18+)»: #58 За что уволили jQuery из GitHub

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

• Основы прогрессивных веб-приложений
• 3 важных чек листа для веб-разработчиков
• Доступные заголовки страниц в Single Page App
• Умный путь к “минимальному фуллстеку”. От простого SPA к мультифункциональному PWA

Изображения:

• Конвертация изображений в WebP. Отрывок из книги “The WebP Manual”
• Иногда sizes в изображениях довольно важны
• Почему WebM лучше чем GIF для видео (сравнение)
• 8 советов по оптимизации видео для ускорения загрузки

Производительность:

• Чек-лист производительности фронтенда. Русскоязычный перевод популярного чеклиста
• Frontend News #1: Советы для балансирования веб-шрифтов и скорости загрузки страницы
• Размер сайтов: средний размер страницы больше 2MB – размер средней страницы увеличился в два раза за последние 3 года
• Как избавиться от блокирующих рендеринг JavaScript и CSS
• Скорость теперь является фактором для лендингов Google Search и Ads
• Отчет: Google mobile speed update не повлиял на общие мобильные метрики

Инструменты:

• Настраиваем удобный npm проект для себя и команды или немного о современных фронтенд инструментах
• Отладка с помощью Chrome DevTools: быстрые советы по фронтенду
• Terminalizer — запишите работу вашего терминала в анимированный gif
• Github story — Расширение для браузера — шаблон описания пулл реквеста на Github

CSS

• Как быстро прототипировать приложения с CSS-сеткой и CSS-переменными
• CSS-in-JS — мифы и реальность (на примере styled-components)
• Удивительный и неизвестный inline-block
• Почему CSS Grid лучше Bootstrap для создания макетов
• Фрустрации при использовании CSS Shapes и CSS Exclusions
• Решено с CSS! Логическая стилизация, основанная на числе полученных элементов
• Специфическая магия flexbox и auto margins
• Создания системы дизайна, часть 2: Grid & Layout
• 5 новых свойств CSS и как их использовать

JavaScript

• Github.com отказывается от использования jQuery и переходит на чистый JavaScript
• Создания системы управления состоянием на чистом JavaScript
• Почему новый V8 так чертовски быстр
• CSS в JS в реальной жизни

Фреймворки:

• Да, вам следует изучать Vanilla JavaScript перед модным JS фреймворком
• Как улучшить ваши знания по JavaScript с помощью написания собственного фреймворка
• React vs. Vue (vs. Angular)

Теория:

• О генераторах в JavaScript ES6, и о том, почему изучать их необязательно
• Приключения оператора pipeline в babel@7
• Использование промисов в JavaScript
• JavaScript Tutorial для начинающих
• Давайте поговорим о точке с запятой в JavaScript
• Stateful Monads in JavaScript: Часть 1, Часть 2
• Коллбеки — улучшите ваши знания в API, основанных на коллбеках, изучите их поведение и шаблоны в JavaScript
• Как перестать использовать коллбеки и начать жить

React:

• Основы React (текстовый учебник, 2-е издание)
• Изучение Render Props по примерам
• Трюки и советы для Reactjs SSR
• Конечные автоматы в React

Angular:

• Стал доступен Angular v6.1 — TypeScript 2.9, Scroll Positioning и многое другое
• Механизм одностороннего биндинга значений в Angular
• Понимание большого масштабируемого приложения на angular с @ngrx
• Превращение приложения Angular 6 в Progressive Web App

Libs & Plugins:

• ndb — улучшенная отладка Node.js, включенная через Chrome DevTools
• excel4node — модуль к Node, упрощающий создание Excel файлов
• jsQR — библиотека для чтения QR кодов в изображениях без зависимостей
• simple-data-table — лёгкая и простая библиотека для работы с таблицами без зависимостей
• AddThis теперь доступен для AMP

Браузеры

• Что нового в DevTools в Chrome версии 68
• Почему открытие YouTube в Firefox или Edge может занимать в 5 раз дольше, чем в Google Chrome
• Релиз web-браузера Chrome 68
• В Firefox 63 появится улучшенная система блокировки содержимого
• Mozilla планирует удалить из Firefox поддержку RSS и Live Bookmarks
• Google Chrome стимулирует переход на HTTPS
• Из Chrome Web Store случайно удалили настоящее расширение кошелька Metamask вместо фейкового
• Исправленный в мае критический баг в IE потребовал новых патчей и спровоцировал утечку памяти

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

• Послевкусие Apple: готовы ли руководители, разработчики и дизайнеры отказаться от Macbook в пользу других ноутбуков • Проверяем сайт на «вшивость» • Когда программисты становятся странными: забавные проекты с GitHub • Разработчики Google представили USB-ключи Titan Security Key для безопасной аутентификации • В Google Docs появилась проверка грамматики с использованием технологий машинного обучения • В Windows 10 внедрят машинное обучение, чтобы предотвратить непредсказуемую перезагрузку системы из-за обновлений

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