Дайджест свежих материалов из мира фронтенда за последнюю неделю №328 (20 — 26 августа 2018)

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

Медиа

• Подкаст «Frontend Weekend» #67 – Виктор Грищенко о том, как и зачем развивать науку в современном мире IT
• Еженедельный подкаст «Недельный Vue», выпуск 1.
• Подкаст «Пятиминутка React» #44 — Из жизни одного middle разработчика
• «Девшахта — подкаст»: #47: Тестируй как дядя Боб
• Интервью с руководителем ШРИ Сергеем Бережным
• ChernivtsiJS 2018 — June 23, 2018, 12 видео

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

• Введение в программирование шейдеров для верстальщиков
• Микросервисный фронтенд — современный подход к разделению фронта
• Web Payments, Payment Request API и Google Pay
• Создание AR/VR с помощью Javascript и HTML
• Быстрое введение в веб-безопасность
• Обзор популярных статических генераторов сайтов
• Новые инструкции по доступности в WCAG 2.1

• Производительность:
  • Советы по улучшению производительности CSS и JS анимаций
  • Руководство по использованию webpagetest
  • Как мы вошли в топ 3 самых быстрых e-commerce сайтов
  • Погружение в веб-производительность по версии Google I/O 2018
  • Глубокое погружение в веб-производительность в 2018

• Инструменты:
  • Профессиональные советы по использованию Visual Studio Code для достижения наибольшей производительности в 2018
  • SVG 3D Builder — комплексный инструмент для создания трехмерных моделей на svg
  • SVG Filters Playground. Инструмент, который делает управление фильтрами гораздо удобнее

• Эффектный веб:
  • Codepen-подборка CSS/SVG эффектов для текста в вебе
  • Подборка креативных анимацией для «гамбургер»-меню

CSS

• Кастомный подход для нормализации и сброса стилей (custom-reset.css)
• Решено с помощью CSS! Логическая стилизация на основе числа элементов
• Пишем CSS лучше и красивее
• Использование функции определения поддержки для написания кроссбраузерного CSS

• Стандарты:
  • Стандарт для нестандартного
  • Иногда они возвращаются: псевдоэлементы с префиксом -webkit- станут валидными в Firefox
  • ::before vs :before

• Визуальные эффекты:
  • Несколько слов о градиентах
  • Отзывчивые изображения: CSS-приёмы, которые помогают экономить время
  • Использование CSS Clip Path для создания интерактивных эффектов, часть 2
  • Использование background-attachment CSS для создания прилипающей фоновой рекламы в iFrame
  • Реальные примеры использования CSS с SVG
  • Продвинутные эффекты с помощью режимов смешения фонов в CSS

• Лейаут:
  • Всё, что нужно знать о выравнивании во Flexbox
  • Преимущества использования CSS Grid для раскладок веб-форм

• Типографика:
  • Исследование вариативных шрифтов
  • Вариативные шрифты и дислексия

• PWA:
  • CSS и PWA: некоторые советы по созданию прогрессивных веб приложений
  • Инструменты оптимизации CSS для ускорения прогрессивных веб приложений

JavaScript

• TypeScript 3.0
• Веб-приложения и серверы, работающие с JavaScript, уязвимы перед атаками ReDoS
• Топ 33 JavaScript проектов на GitHub
• Чеклист для написания компонентов повторного использования в React и Vue

• Tutorials:
  • Создание живого графика на D3.js
  • Пример Javascript Fetch API, руководство с нуля
  • Создание простого генератора статических сайтов с Node.js
  • Первые шаги с TensorFlow.js

• Теория:
  • JavaScript: исследование объектов
  • Повышаем уровень владения методом работы с массивами filter
  • Комплексные числа в JavaScript
  • Итераторы и генераторы занимают свое место в современном JavaScript
  • Асинхронная рекурсия: обещания, удивления, но, прежде всего, путаница

• VueJS:
  • Состояние Vue.js в 2018
  • Создание SEO-Friendly SPA на Vue.js с помощью Prerender, а также советы
  • JS-разработчик бросает вызов Google и Facebook
  • Обработка тач-событий с помощью VueJs

• React:
  • Kotlin + React vs Javasript + React
  • Руководство по React Autocomplete с примером
  • Полное руководство по props в React

• Angular:
  • Свойства Angular v6, которые меняют правила игры
  • Создание оптимизированного для поисковиков PWA на Angular — часть 1
  • Как создать архитектуру плагина/расширяемого приложения на Angular5+

• Libs & Plugins:
  • size-plugin — отображает размеры сжатых ассетов вашего webpack и изменения с момента последнего билда
  • WorkerDOM — реализация DOM API, предназначенная для работы внутри Web Worker

Браузеры

• Mozilla объявила об удалении устаревших дополнений Firefox
• Грядущее обновление Google Chrome 69 принесет радикально новый дизайн браузера
• В Firefox 62 планируют активировать системное дополнение Firefox Monitor
• Chrome для Android может начать отключение JavaScript на 2G соединении

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

• Яндекс отменяет тИЦ и вводит новый показатель качества сайта
• Программисты шутят. Не пора ли запретить?
• Европейский союз запретит производство галогенных ламп с 1 сентября
• Windows 95 портировали на Electron
• Ядру Linux исполнилось 27 лет
• Как закалялась мышь: эволюция игровой периферии
• OG стала чемпионом The International 2018. За победу коллектив заработал $11,2 млн.

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

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