Дайджест свежих материалов из мира фронтенда за последнюю неделю №351 (4 — 10 февраля 2019)

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

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

---

Медиа

• Подкаст «Веб-стандарты», Выпуск №160: Перевод документации React, статьи про вёрстку, логический CSS, SVG-фильтры, цветные шрифты, полезные инструменты.
• Подкаст «CSSSR», Новости 512 — Выпуск №37 (02.02 — 08.02)
• «Я ️Frontend» — Запись трансляции конференции для фронтенд разработчиков в офисе Яндекс
• SunFox — BurnoutJS — трек, который не оставит равнодушным JS-разработчиков

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

• У дизайнера новая идея? Что может быть проще
• Обзорная статья по A-Frame
• Что можно узнать при разработке аудио плеера для разных браузеров
• Play Store теперь принимает прогрессивные веб-приложения (PWA)
• Как быстро создать десктопное приложение на HTML, CSS и JavaScript
• Где вы изучаете HTML и CSS в 2019 году?
• PWA на iOS 12.2 beta: хорошее, плохое и «еще не уверен, хорошее ли»

• Производительность:
  • CSS и производительность сети
  • Google: показатель PageSpeed Insights может меняться независимо от изменений на сайте
  • Рендеринг в вебе. Статья Jason Miller и Addy Osmani о вариантах и нюансах рендера в браузере и возможностях его оптимизации
  • GTMetrix — Как использовать GTMetrix для анализа и повышения скорости сайта
  • Как время загрузки страницы влияет на доход вашего сайта?
  • Делаем Google Шрифты Быстрее
  

• Инструменты:
  • Список инструментов разработчика JavaScript
  • Новые функции в Webpack 5
  • git-history: быстрый просмотр истории любого GitHub файла
  

• Accessibility:
  • Пожалуйста, прекратите создавать недоступные формы (и как их исправить)
  • Возвращаясь к элементу abbr
  • Ссылки, которые никуда не ведут, должны быть кнопками
  • The “C” Is For Accessibility — доклад Evangelina Ferreira с Fronteers
  

• Анимация:
  • SVG фильтры 101
  • Эффекты фильтров SVG: контурный текст при помощи feMorphology
  • Эффект искажения текста с помощью Blotter.js
  • Подборка с вдохновляющими сайтами #1
  • Пузырная анимация текста с помощью SVG и Text Clipping
  

CSS

• Telegram опять раздаёт деньги за разработку простых шаблонов CSS
• Новые логические свойства в CSS!
• Руководство по CSS Support в браузерах
• Использование малоизвестной функции CSS element () для создания навигационной мини-карты
• Буквы на чистом CSS, плохая, но забавная идея
• Классика: как создать бьющееся сердце на чистом CSS для вашей валентинки
• Единственная причина, по которой ваш CSS не работает
• Создание современной карусели с CSS scroll snap, плавной прокруткой и pinch-zoom
• Position: stuck; — и способ это исправить
• HTML-слайдер без фреймворков, просто CSS

JavaScript

• Что нового в JavaScript ES2019
• Новые функции JavaScript, которые изменят то, как вы пишете Regex
• Как справиться с пятью распространенных задачами на интервью по JavaScript
• React vs. Vue (Todo App) на примере
• 7 шаблонизаторов JavaScript с примерами кода
• Нуждаемся ли мы все еще в JavaScript-фреймворках?
• Первые мысли о Deno, среде JavaScript/TypeScript
• Обфусцированный javascript, мошеннические электронные письма и American Express

• Практика:
  • Точная оценка времени чтения статей на Medium в JavaScript
  • Как обнаружить последовательность нажатий клавиш в JavaScript
  • Анимируйте ваши цифры как Робингуд
  

• Теория:
  • Подробности о JavaScript-объектах
  • Разбираемся с асинхронностью в JavaScript [Перевод статьи Sukhjinder Arora]
  • Работа с часовыми поясами в JavaScript
  • Как работают генераторы в JavaScript.
  • Мастер JavaScript: как дела с ‘this’?
  

• React:
  

  Команда React начала кампанию по переводу документации. Приглашаются переводчики, желающие заняться русским переводом, в котором также участвует и Ден Абрамов. Кроме того, собирается команда мейнтейнеров по переводу документации на украинский язык. Прогресс перевода на разные языки можно отслеживать на ресурсе Is React Translated Yet?

  
  • React & БЭМ – официальная коллаборация. Часть историческая
  • Redux. Простой как грабли
  • Релиз React v16.8: того самого, который с хуками
  • Как загрузить данные в React с помощью redux-thunk, redux-saga, susse, & hooks
  • Как начать работу с React Hooks: контролируемые формы
  • React как пользовательский интерфейс
  • Глобальное управление состоянием в React без бойлерплейта
  • Создание онлайн-панели мониторинга в React
  

• VueJS:
  • Релиз Vue 2.6
  • Что значат хуки для Vue
  • Производительность в Vue — часть 2
  • Vuethereum: библиотека Vue, которую заслуживает Ethereum
  • Новое в Vue: ES Module Browser Build
  • Оптимизация производительности приложения Vue.js: часть 2 — Lazy loading routes и вендорный bundle anti-pattern
  

• Angular:
  • The Need for Speed: не маршрутизируемые модули с ленивой загрузкой в Angular
  • Планы на версию 8.0 и Ivy
  • Раскройте силу форм с помощью Angular’s Reactive Forms
  • Как реализовать локализацию в Angular с помощью инструментов i18n
  

• Libs & Plugins:
  • MiniSearch — Крошечная, но мощная полнотекстовая поисковая система для браузера и Node
  • uppy — это элегантный модульный загрузчик файлов JavaScript, который легко интегрируется с любым приложением.
  • timetable-fns: полезные утилиты для работы с датами и временем в расписаниях
  • x-spreadsheet: эксель таблицы на JavaScript
  

Браузеры

• Новое в браузерах: Firefox 66 по умолчанию блокирует видео и звук, Chromium ограничивает бюджет страниц
• В Firefox 67 ожидается блокировщик скриптов для майнинга и скрытой идентификации
• Для Firefox развивается режим строгой изоляции страниц
• Microsoft просит перестать использовать Internet Explorer
• Opera добавила VPN в браузер для Android
• Для Chrome реализован режим экономии ресурсов
• Из браузера Safari убирают функциональность Do Not Track
• Canary-сборка Chrome 74 для Windows 10 и macOS теперь сама переходит на тёмную тему, если таковая включена в настройках системы

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

• Империя Amazon — список всех подразделений онлайн-гиганта
• Как Салман Хан создал Khan Academy и получил миллионы долларов инвестиций
• Microsoft добавила в Skype размытие фона для видеозвонков
• Блокчейн – следующий этап эволюции интеграций
• Facebook — 15 лет: вот 15 событий, которые определили будущее соцсети
• Сотрудники Facebook создали игру, которая позволит проверить, какой ты UI-дизайнер
• Проблему точек в адресах Gmail все еще используют хакеры


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

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