Hero Patterns

Онлайн-коллекция готовых к использованию SVG-фонов, которые легко интегрировать в веб-проекты. Можно быстро находить и использовать стильные и легкие фоны в формате SVG и настраивать их под конкретные проекты

👀Посмотреть поближе

#front

GitHub Copilot – AI-помощник для написания кода

Позволяет писать код быстрее, учиться на примерах и исправлять ошибки на лету.

👀 Попробовать

Coderoll | Frontend

❓ Как работает метод map?

Ответ:
Метод map создаёт новый массив, применяя указанную функцию к каждому элементу исходного массива. При этом исходный массив не изменяется.

Ставь ❤️ если знаешь ответ
Если нет — ставь 💅

Coderoll | Frontend

Используем принципы “Чистого кода” в контексте JavaScript.

Функции

❗️ Не создавайте глобальные функции, которые могут создать конфликт с аналогичными функциями сторонних библиотек

Давайте разберем на примере: что, если вы хотите расширить собственный метод JavaScript Array, чтобы иметь метод diff, который мог бы показать разницу между двумя массивами?

Вы можете написать свою новую функцию в Array.prototype, но она может конфликтовать с другой библиотекой, которая попытается сделать то же самое

Что, если эта другая библиотека просто использует diff, чтобы найти разницу между первым и последним элементами массива?

Вот почему было бы гораздо лучше просто использовать классы ES2015/ES6 и просто расширить глобальный Array.

Coderoll | Frontend

❓ Что такое Callback Hell?

Ответ:
Callback Hell — это ситуация, когда код становится трудно читаемым и поддерживаемым из-за глубокой вложенности коллбэков. Это часто происходит при работе с асинхронными операциями. Проблему можно решить с помощью Promises или Async/Await.

Ставь ❤️ если знаешь ответ
Если нет — ставь 💅

Coderoll | Frontend

Coolors — генератор цветовых палитр

Сервис для подбора цветовых сочетаний и создания палитр.
Помогает находить гармоничные цвета для UI, экспортировать палитры в CSS и работать с брендовыми цветами.

👀 Попробовать

Coderoll | Frontend

Preact – альтернатива React, которая весит 3KB

Если у тебя есть проблемы с размером бандла в React-проекте, попробуй Preact. Он совместим с React API, но весит всего 3 KB!

👀 Попробовать

Coderoll | Frontend

Вопрос с собеседования:

❓Что такое категории контента в HTML5, cколько их, расскажите о них

Каждый элемент HTML принадлежит некоторому количеству категорий контента, которые объединяют элементы с общим набором характеристик. Такая группировка является свободной, то есть не задает на самом деле отношение между элементами таких типов, но помогает определить и описать их поведение и правила, которым они должны следовать, особенно когда дело доходит до сложных деталей. Также возможна ситуация, когда элемент не входит ни в одну из этих категорий.

Существует три типа категорий контента:
— Основные категории контента, описывающие общие для многих элементов правила;
— Категории контента для элементов форм, описывающие общие правила для элементов форм;
— Особые категории контента, описывающие редкие категории, актуальные только для нескольких элементов, возможно, лишь в особом контексте.

Ставь ❤️если знаешь ответ
Если нет — ставь 💅

#html

👩‍💻👩‍💻 Как выглядит алгоритм сортировки подсчетом на JavaScript?

Сортировка подсчетом — это алгоритм сортировки коллекции объектов по ключам, представляющим собой небольшие целые числа

const countingSort = (inputArr: number[], min: number, max: number) => {
  const sortedArr = []

  const count = new Array(max - min + 1).fill(0)

  for (const element of inputArr) count[element - min]++

  count[0] -= 1

  for (let i = 1; i < count.length; i++) count[i] += count[i - 1]

  for (let i = inputArr.length - 1; i >= 0; i--) {
    sortedArr[count[inputArr[i] - min]] = inputArr[i]
    count[inputArr[i] - min]--
  }

  return sortedArr
}

Coderoll | Frontend

👨‍💻 Tabler Icons — легковесные иконки для ваших проектов

Набор из более чем 4300 современных SVG-иконок с минималистичным дизайном. Они быстро загружаются, легко настраиваются по размеру, цвету и толщине линий, что делает их отличным выбором для использования в React, Vue и других фреймворках. Набор полностью бесплатный и подходит для коммерческих проектов. Благодаря Tabler Icons интерфейс становится более профессиональным, а интеграция занимает всего несколько минут.

👀 Посмотреть иконки

#web

Webpack, Vite или Rspack: что это за зоопарк или как собирать микрофронтенды в 2025?

Короткая статья, в которой проводятся замеры скорости работы актуальных сборщиков

👀 Читать

Coderoll | Frontend

❓ Что такое Immediately Invoked Async Function Expression (IIFE)?

Ответ:
Это асинхронная версия IIFE, где функция немедленно выполняется асинхронно. Она используется для выполнения асинхронных операций без необходимости явно вызывать функцию.

Ставь ❤️ если знаешь ответ
Если нет — ставь 💅

Coderoll | Frontend

Recharts: простая визуализация данных для React 👩‍💻

Recharts — библиотека, которая поможет добавить графики и диаграммы в ваш проект. Легко подключается, настраивается и отлично работает с React. Хотите показать тренды, сравнить показатели или сделать крутой аналитический дашборд? С этой библиотекой всё это можно сделать за пару строк кода. Выбирайте линейные графики, круговые диаграммы, гистограммы или что-то своё.

👀 Посмотреть библиотеку

#инструменты

Как устроены цикл событий и стек вызовов в JavaScript

Цикл событий (event loop) — ключ к асинхронному программированию на JavaScript. Сам по себе язык однопоточный, но использование этого механизма позволяет создать дополнительные потоки, чтобы код работал быстрее. В этой статье разбираемся, как устроен стек вызовов и как они связаны с циклом событий.

👀 Читать

Coderoll | Frontend

5 офферов получили наши ребята на прошлой неделе

Оффер на 4,2k долларов
Оффер на 5k евро
Оффер 260k рублей
Оффер на 210k рублей
Оффер на 220k рублей

И еще 19 за сентябрь... а за лето более 50... и у тебя получится!

👋 Меня зовут Тихон, я действующий Frontend-разработчик и ментор. За руку довожу до оффера в Big Tech и не бросаю на испытательном сроке. Вокруг меня собралось целое комьюнити из почти 300 фронтендеров.

Я веду канал, в котором уже 15 тыс разработчиков. Регулярно публикую полезные материалы по подготовке к собесам. А еще каждый четверг у нас проходят полезные стримы с решениями задач и разборами резюме)

Забирайте в закрепленном сообщении

Полные разборы реальных собеседований: Сбер, VK, OZON, M-Video, Evrone, еще раз OZON, IT One, Trading View, МТС, Лантан, ДОМ.РФ

Сборники вопросов по темам:
Кибербезопасность на собеседовании
Все вопросы по React на собеседовании
Все вопросы по TypeScript на собеседовании
Как решать задачи двумя указателями
Вопросы с Vue собеседований
Вопросы по сетям и методологиям с 200 собесов
Вопросы по JS с 200 собесов
Какие задачи спрашивают на livecoding чаще

Полезные посты:
Job-борды для поиска работы
Запись нашего самого кринжового собеса
Новый HTTP метод QUERY

🏆Статистика по рынку:
Июль, Июнь, Май, Апрель, Март

Подписывайся 👇
frontend_punks

Реклама, erid: 2W5zFH7cSp1 ИП Галактионов Тихон Витальевич, ИНН 771618975809

❓Что такое “event delegation”?

Делегация событий — это техника, при которой событие обрабатывается на родительском элементе, а не на каждом дочернем. Это позволяет оптимизировать обработку событий.

document.getElementById('parent').addEventListener('click', function(event) { if (event.target && event.target.matches('button')) { console.log('Button clicked'); } });

Ставь ❤️ если знаешь ответ
Если нет — ставь 💅

Coderoll | Frontend

React Hook Form – лучшая библиотека для работы с формами

Ты все еще валидируешь формы вручную? React Hook Form делает это проще и эффективнее! 

🔥 Почему стоит попробовать?
✔️ Минимальный ререндер компонентов
✔️ Поддержка Yup/Zod для валидации
✔️ Легко интегрируется с UI-библиотеками (MUI, Ant Design)

👀 Попробовать

Coderoll | Frontend