Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
•
Подкаст «Сделайте мне красиво» №65 — А работодатель знает, что ты эту шутку не слышал?
•
Подкаст «proConf» #116: DevOps.js 2021
•
Frontend Weekend №115, в гостях Илья Немиро из компании Toptal: о поиске идеальной компании для разработчиков, технических интервью и рефлексии
•
Подкаст «Веб-стандарты» 312. Firefox и Safari, Web Neural Network API, Turborepo, GitPod, вшитые node_modules и Деплойми
•
«Новости 512» от CSSSR: ReactConf 2021, оптимизации кода, Ruby on Rails 7 RC, Dart 2.15, Flutter 2.8, Tailwind CSS 3.0
•
Подкаст «Да как так-то?». Выпуск №14. Как джуну вырасти в мидла
•
Smashing Meets For All — December 2021. Три доклада на тему доступности
•
Что нового в последней спецификации GraphQL
•
Работа с веб-фидами: это больше, чем RSS
•
Audio API: знакомство с элементом audio и некоторыми возможностями его API путем создания кастомного аудиоплеера.
•
Как запретить прокрутку страницы в iOS Safari 15
•
Сейчас лучшее время для создания веб-сайтов
•
Итоговые результаты опроса «The State of CSS 2021»
•
Что нового в Tailwind CSS 3?
•
CSS Custom Properties
•
CSS Houdini Paint API
•
Консистентная, плавно масштабируемая типографика и отступы
•
Tailwind CSS — резюме после двух с половиной проектов
•
[Checklist] Как выбрать между SVG и Webfont
•
Адаптивный CSS border radius с техникой Fab Four
•
Изи-пизи автотесты на JavaScript
• Асинхронное программирование с промисами JavaScript
•
Объединение интервалов — задача с JS собеседования | Решаем задачи с LeetCode
•
Глубокое копирование в JavaScript с использованием structuredClone
•
6 скрытых жемчужин JavaScript, которые вы, вероятно, пропустили
•
Понимание POST запросов в Axios
•
Топологическая сортировка
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.
Медиа | Веб-разработка | CSS | JavaScript
Медиа
•

•

•

•

•

•


•


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

•

•

•

•

-
Инструменты
•Полное дерево доступности в Chrome DevTools
•Что нового в npm 8?
•Ultimate Front-End Toolkit на 2022 год
•Сломанные дефисы в Chromium 96: объяснение (и исправление)
-
Производительность
•Как оптимизировать размер бандла SPA и ускорить загрузку приложения в несколько раз
•Объясните, как будто мне пять лет: оптимизация веб-производительности
•Представляем fuite: инструмент для поиска утечек памяти в веб-приложениях
•Влияние ошибок в JavaScript на производительность
•Процесс отображения веб-страницы в браузере | Critical Rendering Path
-
Эффекты
•Подборка креативных сайтов «Inspirational Websites Roundup #32»
•Эффект пиксельного искажения с помощью Three.js
CSS
•

•

•

•

•

•

•

•

JavaScript
•

• Асинхронное программирование с промисами JavaScript
•

•

•

•

•

-
React
•Передаем React компоненты по WebSocket
•React Conf 2021
•Итоги React Conf 2021
•Методы оптимизации производительности рендеринга React: часть 1
•Redux Who? Лучше обрабатывайте собственное состояние
•Настройте Web3 в своем приложении на React
•Создайте продвинутый React хук для блокировки прокрутки
•Remix: руководство по новому фреймворку React
•Использование Fetch Event Source для событий, отправленных сервером в React
-
Vue
•Nuxt 3 Beta: что нового и с чего начать
•Как построить микро-фронтенд инфраструктуру на основе Vue
•Создание приложения с помощью Electron и Vue
•Получение элемента внутри компонента с помощью Vue querySelector
-
Svelte
•Руководство для новичков по Svelte — от основ до управления состоянием и анимации
•Будущее Svelte (интервью с Ричем Харрисом)
-
Libs & Plugins
•Релиз GSAP 3.9: Flip Plugin стал публично доступным
•Floating UI — Библиотека для работы с всплывающими подсказками, окнами, раскрывающимися списками, меню и многим другим
•quick-lint-js — Быстрее, проще, дружелюбнее: как quick-lint-js превзойдет ESLint
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.