https://habr.com/ru/post/544692/

• Разработка веб-сайтов
• CSS
• JavaScript
• HTML

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

Медиа    |    Веб-разработка    |    CSS    |    JavaScript    |    Браузеры

Медиа

• Подкаст «Веб-стандарты» №271. Safari, Firefox 86, SVG на GPU, куки в браузерах, WebP, AVIF и JPEG XL, офер в Яндекс за день
• «Новости 512» от CSSSR: Firefox 86, TypeScript 4.2, рендеры и мемоизация, «Код» Петцольда, Babel 7.13.0, 30-летие Python
• Подкаст «Фронтенд Юность» #174: Самый типизированный
• Pro Conf #88: OpenJS World 2020
• Как сделать презентацию на движке Shower: быстрый старт, шаблон, элементы и устройство темы

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

• Будущее веб-приложений — это HTML-over-WebSockets
• Как веб-компоненты используются в GitHub и Salesforce
• 10 самых популярных методов взлома веба в 2020 году
• Сколько времени нужно SEO, чтобы показать результаты?
• Новости веб-платформы: Reduced Motion, CORS, WhiteHouse.gov, popups, and 100vw
• Настигнет ли Deno в 2021 году NodeJS?

• Производительность
  • Свежая информация о возможностях анимации с аппаратным ускорением
  • Пришло время кодекам нового поколения отказаться от JPEG
  • Производительность JavaScript за пределами размера бандла
  • Серверный рендеринг в JavaScript: оптимизация производительности
  

• Доступность
  • Проверка доступности сайта: обзор инструментов для accessibility testing
  • Как мы улучшили доступность меню в SPA
  • Более доступный веб
  

• Эффекты
  • Веб-анимация для фронтендеров. Что выбрать: CSS, JavaScript или SVG
  • Создание бесконечной круговой галереи с использованием WebGL с шейдерами OGL и GLSL
  • Воссоздание ландшафта реального мира с помощью React, Three.js и WebGL шейдеров
  

CSS

• Создавайте адаптивные эффекты изображения с помощью градиентов CSS и aspect-ratio
• Стилизация символов CSS с помощью Background-Clip
• Houdini: JavaScript API для расширения CSS
• Погружение в псевдоэлементы ::before и ::after
• Как имитировать прозрачность с помощью CSS Background
• Обеспечение правильного вертикального положения для крупного текста
• Погружение в тени
• Поддержка CSS-in-JS в DevTools
• Будущее CSS: анимация с прокруткой и @scroll-timeline (часть 1)
• Отладка repaint-проблем, вызванных CSS Transition
• Красота крошечных улучшений в CSS
• Как стилизовать битые изображения с помощью css
• DRY подход к цветовым темам в CSS

JavaScript

• Мир JavaScript в 2021 году
• Неудачный опыт миграции Electron приложения на ECMAScript модули
• JavaScript нанобенчмарки и преждевременные тормоза
• Анонс TypeScript 4.2
• Как работать с датой в простом Javascript — библиотеки не нужны
• 7 вопросов для интервью о ключевом слове «this» в JavaScript.
• Redux vs Mobx: плюсы, минусы, область применения

• React
  • Разрабатываем чат на React с использованием Socket.IO
  • Перед тем, как вы используете memo()
  • Все, что вам нужно для начала тестирования в React
  • Человеческие тесты React компонентов
  • Создание real-time приложения с помощью React и Socket.io
  • Как создавать анимацию, базирующуюся на скорости в React
  

• Vue
  • 5 продвинутых советов по повышению производительности во Vue
  • PWA для приложений на Vue: практическое руководство
  

• Angular
  • Учим HostBinding работать с Observable
  • Angular Components & Routing
  • Лучшие практики безопасности в Angular (часть 1)
  • Новый способ валидации форм в Angular
  • Понимание Angular Ivy Library Compilation
  

• Ember
  • Релиз Ember 3.25
  • Serverless функции в Ember и Glimmer
  • The Ember Times — Issue No. 174
  

• Libs & Plugins
  • Tagger: редактор тегов на JavaScript на ванильном JS без зависимостей
  • simple-keyboard — симпатичная виртуальная клавиатура на Javascript, совместимая React, Angular и Vue
  • goober — Решение для css-in-js, размером менее 1 КБ
  • tldts — JS-библиотека для работы со сложными доменными именами, поддоменами и URI
  

Браузеры

• Релиз Firefox 86
• В десктопной версии Google Chrome появилась поддержка автоматических субтитров
• «Яндекс.Браузер» ограничит передачу данных пользователей сторонним трекерам
• Компания Mozilla опровергла ложную информацию об удалении лисы с логотипа Firefox



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