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

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

Медиа

• «Новости 512» от CSSSR: PhpStorm 2020.3; Playwright, Puppeteer и Selenium; Next.js в Lyft; Beaker 1.0; State of JS 2020, А также текстовая версия
• Подкаст «Веб-стандарты» №259: Chrome 88, State of CSS и JS, шрифты для кодинга, Monument Valley, вёрстка 2008, сторис, пуньк
• Верстать как в 2020, или Трюки на SVG: маски, трансформации и calc
• 10 лучших подкастов для веб-дизайнеров, разработчиков и профессионалов в области цифровых технологий

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

• Думать как фронтенд-разработчик
• Web Almanac 2020: Ежегодный отчет HTTP Archive о состоянии веба
• Отладка WebAssembly современными инструментами
• Как я случайно создал API Business
• Наложение прозрачности на видео с учетом кроссбраузерности

• Инструменты
  • Дорожная карта для Webpack в 2021
  • Руководство по NPM для новичков
  • Глубокое погружение в Rome: линтинг, компиляция и сборка
  

• Производительность
  • Google: неиндексируемые страницы могут влиять на Core веб Vitals
  • Повышение скорости рендеринга страницы с помощью только CSS
  • Запуск Lighthouse в GitHub Actions
  • Анализ Web Vitals с помощью WebPageTest
  • Изучение вкладки Network в Chrome Dev Tools
  

• Доступность
  • Доступность — это просто, Или 5 смертных грехов доступности
  • Alt vs Figcaption
  • Создание веба для следующего миллиарда пользователей, часть 1: ARIA, Focus и Focus Management
  • Доступные иконочные ссылки
  

• Эффекты
  • Макеты с плавной горизонтальной прокруткой
  • Реализация текста с глитч-эффектом на CSS за 3 минуты
  

CSS

• CSS var в rgba или удобное использование цветов в Sass
• CSS Scroll Snap
• Использование кастомных свойств CSS для настройки толщины вариативного шрифта в темном режиме
• Правила схлопывания margin
• Стилизация цепочек комментариев
• Почему я люблю Tailwind
• Что можно добавить в переменную CSS?
• Параллакс-эффект с помощью CSS Sticky
• Утилитарный класс для покрытия элементов

JavaScript

• Differential Serving — делаем свой код чище и производительнее
• Перемещение персонажа на спрайтах с помощью JavaScript: часть 1, часть 2
• Введение в Geolocation API в JavaScript
• Дорожная карта для JS Fullstack Web Developer в 2021 — часть 1
• Размышляя о 25-летнем возрасте JavaScript
• Публикуйте, отправляйте и внедряйте современный JavaScript для более быстрых приложений
• Как создать игру «Змейку» на JavaScript
• CSS Paint API: предсказуемая случайность
• Давайте создадим Native Event Bus на JavaScript
• Пробуем 9 JS фронтенд фреймворков с их CLI в 2021(React, Svelte, Angular, Vue+)

• Теория
  • Современный JavaScript – Импорты, экспорты, Let, Const, и промисы в ES6+
  • Понимание синтаксиса деструктуризации JavaScript
  • Ошибки и обработка ошибок в JavaScript
  

• React
  • Использование Effector в стеке React + TypeScript
  • Оптимизация изображений в соответствии с ограничениями сети и устройств в React
  • Новые улучшения JSX в React 17
  • 5 ошибок, которых следует избегать при использовании React Hooks
  • Скелетон-прелоадеры для приложений на React
  • Как увеличить производительность CSS-in-JS в 175 раз
  • Обновление до React 17 и Webpack 5
  

• Vue
  • Миграция Vue 2 на Vue 3
  • Tricky, Tricky—скрытые советы по миграции для Vue 3
  • Управление состоянием во Vue 3
  • Путешествие от React к Vue.js
  

• Angular
  • Интеграция чат-бота Dialogflow с Angular-приложением
  • Ускорьте свое Angular приложение с помощью Code Splitting
  • Представляем библиотеку @ngneat/dag
  • Пуленепробиваемый Angular. Объяснение строгого режима в Angular
  

• Ember
  • Отладка приложения Ember Octane
  • Autotracking: Elegant DX Via Cutting-Edge CS
  

• Svelte
  • Svelte для React разработчиков
  • Svelte: Как создать компонент динамической таблицы
  

Браузеры

• Google, Intel, Zoom и другие компании создали альянс для продвижения Chrome среди предприятий
• Google добивает многострадальный Internet Explorer
• Google упрощает синхронизацию паролей и платёжных данных в Chrome при использовании различных устройств
• Chrome 88 переведён на новый манифест, несовместимый с uBlock Origin

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

• Вышел WordPress 5.6 «Simone» с новой темой Twenty Twenty-One и улучшенным редактором
• Cloudflare выпустила бесплатный сервис веб-аналитики с поддержкой конфиденциальности данных
• Google представил рейтинг критически важных открытых проектов
• Gmail теперь позволяет редактировать прикреплённые документы прямо в почте
• Adobe Flash Player получил последнее обновление перед прекращением поддержки
• Новый интернет-протокол Apple и Cloudflare скроет от третьих лиц сведения о посещаемых пользователем сайтах
• Пикселизация больше не защитит информацию на изображениях — появился алгоритм, способный восстановить картинку
• Искусственный интеллект и сознание: imitation game

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