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

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

    Медиа    |    Веб-разработка    |    CSS    |    Javascript    |    Браузеры    |    Занимательное

Медиа

• Подкаст «Frontend Weekend» #63 – Александр Першин о том, как и зачем создавать школу онлайн-образования в России
• Подкаст «CSSSR» Новости 512 — Выпуск №16 (23.07 — 29.07)
• Подкаст «Девшахта/Ночной фронтенд»: №43 — Снова о Jenkins, ChaosConstructions 2018, ndb и ШРИ

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

• Основы прогрессивных веб-приложений
• 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, и о том, почему изучать их необязательно
  • JavaScript Tutorial для начинающих
  • Давайте поговорим о точке с запятой в JavaScript
  • Stateful Monads in JavaScript: Часть 1, Часть 2
  • Коллбеки — улучшите ваши знания в API, основанных на коллбеках, изучите их поведение и шаблоны в JavaScript
  • Как перестать использовать коллбеки и начать жить

• React:
  • Изучение 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 файлов (excel4node — Node module to allow for easy Excel file creation)
  • jsQR — библиотек для чтения QR кодов в изображениях без зависимостей
  • simple-data-dable — лёгкая и простая библиотека для работы с таблицами без зависимостей
  • AddThis теперь доступен для AMP

Браузеры

• Что нового в DevTools в Chrome версии 68
• Почему открытие YouTube в Firefox или Edge может занимать в 5 раз дольше, чем в Google Chrome
• Использование промисов в JavaScript
• Приключения оператора pipeline в babel@7
• Использование функций JavaScript для построения 3D-моделей
• Релиз 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 внедрят машинное обучение, чтобы предотвратить непредсказуемую перезагрузку системы из-за обновлений

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

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

Автор: alexzfort

Источник