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

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

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

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

Медиа

• «Новости 512» от CSSSR: Next.js 10.1, Socket.io 4, апрельские security-релизы Node.js, анонс Deno Company, Sublime Text 4
• «Новости 512» от CSSSR: SvelteKit beta, Bootstrap 5 beta-3, локализация MDN RU, прототип Container Query, атака на PHP
• Подкаст «Сделайте мне красиво» №59 — Чем программист отличется от светофора?
• Подкаст «Фронтенд Юность» #180: Конфетти-токены на самописном React-е
• Подкаст «Веб-стандарты» 275. Firefox 87, Container Queries, Compat 2021, SvelteKit, эмоджи, лонгрид и дорога к доступности
• Хард скиллы верстальщика: интервью с Людмилой Мжачих из PayDay, Mail.ru Group
• Подкаст «Да как-так то?». Пилотный выпуск

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

• 7 полезных HTML-атрибутов, о которых вы, возможно, не знаете
• Вы можете создавать эти элементы, не используя JavaScript
• Как я проанализировал все лицензии в NPM зависимостях
• Использование Python для фронтенда
• Новости платформы: скругленные outlines, GPU-Accelerated анимации в SVG, как определяются CSS переменные

• Инструменты
  • FrontEnd разработка в Docker
  • Генераторы SVG
  • Автоматизации в VSCode для разработчиков фронтенда
  

• Производительность
  • Метрики производительности WEB Vitals
  • Отладка Web Vitals в полевых условиях
  • Итеративная починка медленного сайта
  

• Доступность
  • HTML Inputs и Labels: История любви
  • Доступные компоненты фронтенда: претензии vs реальность
  

• Эффекты
  • Подборка креативных концептов «UI Interactions & Animations Roundup #15»
  • Подборка креативных сайтов «Inspirational Websites Roundup #24»
  

CSS

• Крутые трюки с переменными CSS
• Font size бесполезен, давайте это исправим
• CSS Container Queries, или Адаптация по-новому: контейнер вместо вьюпорта
• Container Queries уже на подходе
• Адаптивный веб-дизайн для нового поколения раскладывающихся устройств
• Темный режим за 5 минут, с инвертированными переменными яркости
• Встречайте Utopia: проектирование и разработка с использованием резиновых размеров и масштабирующихся отступов
• Портреты в виде кляксы: развлекаемся с функцией CSS path()
• Несовершенная разработка: стили CSS с перспективой на будущее
• Давайте создадим эффект всплывающего изображения с помощью SVG Clip Path
• Создание волшебной 3D-кнопки
• Совет: стилизуйте псевдоэлементы с помощью Javascript, используя кастомные свойства CSS
• Инструменты для аудита CSS
• Reseter.css — современный CSS Reset/Normalizer

JavaScript

• Экосистема JavaScript: тренды в 2021 году. Всё ли так однозначно?
• JavaScript: Стек вызовов и магия его размера
• Умная квартира на JavaScript. От светодиода до распознавания лица в камере домофона
• Лучший JavaScript-фреймворк 2021: React или Vue?
• Использование GPU для повышения производительности JavaScript
• [V8 Deep Dives] Случайные мысли о Math.random()

• React
  • Разработка приложений на React: пользовательский интерфейс, стили, управление состоянием, тестирование
  • Hyperapp – легковесный 'убийца React'?
  • Руководство по Jotai: минималистская библиотека управления состоянием в React
  • Как создать свой первый React Hook от начала до конца
  • Использование Font Awesome 5 с React
  • Лучшие бойлерплейты для React на 2021 год
  

• Vue
  • Рендеринг на стороне сервера и путь к центру Nuxt.js
  • Рекомендации по загрузке шрифтов в Vue
  • 5 полезных инструментов и библиотек для тестирования приложений на VueJS
  

• Angular
  • Глобальные объекты в Angular
  • Базовые понятия Angular. Теория и примеры для новичков
  • Angular docs. Навигация в приложении: маршрутизация в представлениях.
  • Angular Приоритеты стилей
  • Nx — это современный Angular
  • Лучшие практики NGRX
  

• Svelte
  • Почему Typescript и Svelte — это брак, заключенный на небесах
  

• Libs & Plugins
  • JParticles — легкая и эффективная библиотека на Canvas для создания классных эффектов с частицами.
  • Cheetah Grid — библиотека для быстрой работы с таблицами данных в вебе
  

Браузеры

• «Яндекс.Браузер» научился переводить текст на картинках
• Браузер Opera получил нативную поддержку ARM-процессора Apple M1

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

• Фальшивая версия плагина jQuery Migrate заразила множество сайтов
• Злоумышленники использовали GitHub для криптомайнинга, но сервис до сих пор не закрыл уязвимость
• Эксперимент: как запросы в поиске и просмотры на YouTube влияют на ленту от Google с новостями
• Офис остался на первом месте: у Amazon и Google не будет полной удалёнки, а сотрудников постепенно вернут в кампусы
• Подборка первоапрельских шуток 2021 года
• О чём пишут 1 апреля в ИТ-прессе. Лучшие шутки
• Google vs Baidu: ключевые различия в стратегии SEO

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