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

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

---

Медиа

• Подкаст «Веб-стандарты», Выпуск №135: Сертификаты и TLS 1.3, флексы и кастомные свойства, совместимость и -webkit-мусор, SVG-фильтры и WebGL, новинки Node.js.
• Подкаст «Frontend Weekend» #67 – Виктор Грищенко о том, как и зачем развивать науку в современном мире IT
• Еженедельный подкаст «Недельный Vue», выпуск 1.
• Подкаст «Пятиминутка React» #44 — Из жизни одного middle разработчика
• «Девшахта — подкаст»: #47: Тестируй как дядя Боб
• Подкаст «Фронтенд Юность (18+)» #62 Мультикультурный подкаст не о фронтенде
• Интервью с руководителем ШРИ Сергеем Бережным
• 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