Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
•
Подкаст «Сделайте мне красиво» №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
•![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
Подкаст «Да как так-то?». Выпуск №14. Как джуну вырасти в мидла
•![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
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
Медиа
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
•
![podcast](https://habrastorage.org/web/259/2f4/069/2592f40697cc49dc939e9fc3983fc737.png)
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
•
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
Веб-разработка
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
-
Инструменты
•Полное дерево доступности в Chrome DevTools
•Что нового в npm 8?
•Ultimate Front-End Toolkit на 2022 год
•Сломанные дефисы в Chromium 96: объяснение (и исправление)
-
Производительность
•Как оптимизировать размер бандла SPA и ускорить загрузку приложения в несколько раз
•Объясните, как будто мне пять лет: оптимизация веб-производительности
•Представляем fuite: инструмент для поиска утечек памяти в веб-приложениях
•Влияние ошибок в JavaScript на производительность
•Процесс отображения веб-страницы в браузере | Critical Rendering Path
-
Эффекты
•Подборка креативных сайтов «Inspirational Websites Roundup #32»
•Эффект пиксельного искажения с помощью Three.js
CSS
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
JavaScript
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
• Асинхронное программирование с промисами JavaScript
•
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
•
![en](https://habrastorage.org/storage3/2e2/522/737/2e2522737ec404a9f76047e108dfaea0.gif)
-
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.