Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
•
«Новости 512» от CSSSR: Next.js 12, Error Boundaries, Node.js и Event Loop, алгоритмы на JavaScript, веб Photoshop и VSCode
•
Подкаст Frontend Weekend №108, в гостях Семён Левенсон из компании Яндекс о человечных собеседованиях и зимовке-локдауне в Азии
•
Подкаст «Фронтенд Юность»#210: HolyJS — зеркало общества
•
Подкаст «Веб-стандарты» №305. Экосистема 2021, VS Code в браузере, Node.js 17, Reporting API, автозаполнение, SPA или MPA
•
Подкаст «Сделайте мне красиво» №63 — Карьерный рост от пса до петуха
•
Отсобеседование: Cобеседование Senior Frontend разработчика на пенсии
•
About IT: Как пройти собеседование на MIDDLE front end разработчика? + задачка на event loop(Promise js)
•
Vova Dev: Как стать Front-End разработчиком? Что должен знать Junior Frontend разработчик в 2022
•
Как устроена Дока — опенсорсный справочник с документацией, который сообщество пишет для сообщества
•
Микрофронтеды: достоинства, недостатки и нюансы
•
Igalia и Vorwerk представляют улучшение рендера SVG движка на основе слоев в WebKit
•
Какой метод в SVG лучше всего подходит для слишком большого количества иконок?
•
Jamstack: новый взгляд на веб-разработку, сборку и доставку
•
Начало новой эры адаптивного веб-дизайна
•
Создание эффективного компонента Image
•
Путь Photoshop к веб-версии
•
Хаос микрофронтендов (и как его решить)
•
Популярный npm-пакет UA-Parser-JS скомпроментирован вредоносным ПО для майнинга и кражи паролей
•
Глубокое погружение в object-fit и background-size в CSS
•
Новый взгляд на атомарный CSS
•
100 байт CSS, чтобы страницы с контентом всегда выглядели отлично
•
Media Queries Level 4: Media Query Range Contexts
•
Процесс создания CSS-фреймворка
•
Новый CSS Reset
•
Использование переменных CSS для reduced motion в глобальном масштабе
•
Невероятные генераторы CSS лейаутов, о которых вы должны знать
•
Trie в Javascript: структура данных, лежащая в основе Autocomplete
•
Поиск-фильтр по странице с с использованием ванильного JavaScript
•
Скелетируйте себя с помощью распознавания позы на TensorFlow
•
Внедрение зависимостей в JavaScript — лучший инструмент, который вы не используете для своих тестов
•
Использование axios.all для одновременных запросов
Дайджест за прошлую неделю.
Материал подготовили 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)
•
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
•
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
•
![video](https://habrastorage.org/storage3/976/d3e/38a/976d3e38a34b003f86f91795524af9f8.gif)
Веб-разработка
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
•
![habr](https://habrastorage.org/storage2/c57/b92/af4/c57b92af4ee0d37f787c211a068b1b95.png)
•
![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)
-
Инструменты
•Расширения Chrome для программистов и сочувствующих
•Демистификация функции 'import' webpack: использование динамических аргументов
•Заменит ли Rome Webpack?
-
Производительность
•Повысьте производительность своего веб-приложения с помощью JS Web Workers
•Шпаргалка по метрикам веб-производительности
•Рекомендации по встраиванию сторонних веб-виджетов
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
•
![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 на bigfrontend (BFE): throttle и debounce
•Разреженные и плотные массивы в JavaScript
•JavaScript maps vs. sets: выбор структуры данных
-
React
•Хочу поиск как у MDN
•Next.js 12
•Руководство по SWR для начинающих: Data Fetching в React
•Почему хуки — лучшее, что могло случиться с React
•Топ-4 ошибки в интервью по React
•Понимание очистки в функции useEffect в React
-
Angular
•Ленивая подгрузка библиотек из CDN в Angular
•Улучшение доступности Angular Component
•Как масштабировать Angular без ограничений
•Концепция контроллеров компонента в Angular: часть II
-
Ember
•Импорт шаблонов Ember.js, часть 1
•Импорт шаблонов Ember.js, часть 2
•EmberJS Open Source Development — Overlay Development
-
Libs & Plugins
•Почему устаревший jQuery по-прежнему остается доминирующей библиотекой в JavaScript
•Представляем Elf — Реактивное хранилище с магическими способностями для JS приложений
•Type Query: манипуляции с типом в стиле jQuery
Дайджест за прошлую неделю.
Материал подготовили dersmoll и alekskorovin.