Фронтенд-дайджест №351 (4 — 10 февраля 2019)

Признавайтесь, вы тоже радуетесь каждой новой звездочке у вашего пет-проекта на github? :)

Медиа

• Подкаст «Веб-стандарты», Выпуск №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’?

• VueJS:

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

• React:

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

• 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 теперь сама переходит на тёмную тему, если таковая включена в настройках системы