Recharts: простая визуализация данных для React 👩💻
Recharts — библиотека, которая поможет добавить графики и диаграммы в ваш проект. Легко подключается, настраивается и отлично работает с React. Хотите показать тренды, сравнить показатели или сделать крутой аналитический дашборд? С этой библиотекой всё это можно сделать за пару строк кода. Выбирайте линейные графики, круговые диаграммы, гистограммы или что-то своё.
👀 Посмотреть библиотеку
#инструменты
Recharts — библиотека, которая поможет добавить графики и диаграммы в ваш проект. Легко подключается, настраивается и отлично работает с React. Хотите показать тренды, сравнить показатели или сделать крутой аналитический дашборд? С этой библиотекой всё это можно сделать за пару строк кода. Выбирайте линейные графики, круговые диаграммы, гистограммы или что-то своё.
👀 Посмотреть библиотеку
#инструменты
Как устроены цикл событий и стек вызовов в JavaScript
Цикл событий (event loop) — ключ к асинхронному программированию на JavaScript. Сам по себе язык однопоточный, но использование этого механизма позволяет создать дополнительные потоки, чтобы код работал быстрее. В этой статье разбираемся, как устроен стек вызовов и как они связаны с циклом событий.
👀 Читать
Coderoll | Frontend
Цикл событий (event loop) — ключ к асинхронному программированию на JavaScript. Сам по себе язык однопоточный, но использование этого механизма позволяет создать дополнительные потоки, чтобы код работал быстрее. В этой статье разбираемся, как устроен стек вызовов и как они связаны с циклом событий.
👀 Читать
Coderoll | Frontend
This media is not supported in your browser
VIEW IN TELEGRAM
5 офферов получили наши ребята на прошлой неделе
Оффер на 4,2k долларов
Оффер на 5k евро
Оффер 260k рублей
Оффер на 210k рублей
Оффер на 220k рублей
И еще 19 за сентябрь... а за лето более 50... и у тебя получится!
Я веду канал, в котором уже 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
Оффер на 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
document.getElementById('parent').addEventListener('click', function(event) { if (
Ставь ❤️ если знаешь ответ
Если нет — ставь 💅
Coderoll | Frontend
React Hook Form – лучшая библиотека для работы с формами
Ты все еще валидируешь формы вручную? React Hook Form делает это проще и эффективнее!
🔥 Почему стоит попробовать?
✔️ Минимальный ререндер компонентов
✔️ Поддержка Yup/Zod для валидации
✔️ Легко интегрируется с UI-библиотеками (MUI, Ant Design)
👀 Попробовать
Coderoll | Frontend
Ты все еще валидируешь формы вручную? React Hook Form делает это проще и эффективнее!
🔥 Почему стоит попробовать?
✔️ Минимальный ререндер компонентов
✔️ Поддержка Yup/Zod для валидации
✔️ Легко интегрируется с UI-библиотеками (MUI, Ant Design)
👀 Попробовать
Coderoll | Frontend
❓ Что такое Object.defineProperty?
Ответ:
Object.defineProperty позволяет определить новое свойство в объекте или изменить существующее, с указанием его настроек (например, enumerable, writable, configurable).
Ставь ❤️ если знаешь ответ
Если нет — ставь 💅
Coderoll | Frontend
Ответ:
Ставь ❤️ если знаешь ответ
Если нет — ставь 💅
Coderoll | Frontend
⚡️ Какие типы данных существуют в JavaScript?
Ответ:
- string
- number
- boolean
- bigInt
- symbol
- null
- undefined
- object
Ставь ❤️ если знаешь ответ
Если нет — ставь 💅
Coderoll | Frontend
Ответ:
- number
- boolean
- bigInt
- symbol
- null
- undefined
- object
Ставь ❤️ если знаешь ответ
Если нет — ставь 💅
Coderoll | Frontend
👩💻 Используем принципы “Чистого кода” в контексте JavaScript
✏ Избегайте условных конструкций - один из самых странных принципов 🥺
Вы спросите: "Как так? Как я могу писать код без использования условий?"
➕ Сделать это можно, если вы разделите условную конструкцию на отдельные функциональности. И вместо вычисления вы просто будете запускать нужное. Это перекликается и с другими принципами, которые мы уже с вами разбирали. Например то, что функция/метод должны делать что-то одно
Это работает как в комплексных функциях, так и в классах за счет полиморфизма (см. примеры кода)
Coderoll | Frontend
Функции
✏ Избегайте условных конструкций - один из самых странных принципов 🥺
Вы спросите: "Как так? Как я могу писать код без использования условий?"
➕ Сделать это можно, если вы разделите условную конструкцию на отдельные функциональности. И вместо вычисления вы просто будете запускать нужное. Это перекликается и с другими принципами, которые мы уже с вами разбирали. Например то, что функция/метод должны делать что-то одно
Это работает как в комплексных функциях, так и в классах за счет полиморфизма (см. примеры кода)
Coderoll | Frontend
Zustand — современный state-менеджер
Альтернатива Redux с минималистичным API. Подходит для небольших и крупных проектов. Использует контекст и хук для доступа к состоянию.
👀Попробовать
Coderoll | Frontend #react #state
Альтернатива Redux с минималистичным API. Подходит для небольших и крупных проектов. Использует контекст и хук для доступа к состоянию.
👀Попробовать
Coderoll | Frontend #react #state
❓Что такое “defer” и “async” в тегах <script>?
Ответ:
Атрибуты defer и async используются в тегах <script> для управления загрузкой и выполнением JavaScript на веб-странице.
— defer: Скрипт с атрибутом defer загружается асинхронно, но выполняется только после того, как весь HTML документ будет полностью загружен (после события DOMContentLoaded). Скрипты с defer выполняются в порядке их появления на странице.
<script src="script.js" defer></script>
— async: Скрипт с атрибутом async загружается асинхронно и выполняется сразу после того, как он будет загружен, без ожидания загрузки других скриптов или HTML. Порядок выполнения может быть произвольным, так как скрипты могут загружаться параллельно.
<script src="script.js" async></script>
Ставь ❤️ если знаешь ответ
Если нет — ставь 💅
Coderoll | Frontend
Ответ:
— defer: Скрипт с атрибутом defer загружается асинхронно, но выполняется только после того, как весь HTML документ будет полностью загружен (после события DOMContentLoaded). Скрипты с defer выполняются в порядке их появления на странице.
<script src="script.js" defer></script>
— async: Скрипт с атрибутом async загружается асинхронно и выполняется сразу после того, как он будет загружен, без ожидания загрузки других скриптов или HTML. Порядок выполнения может быть произвольным, так как скрипты могут загружаться параллельно.
<script src="script.js" async></script>
Ставь ❤️ если знаешь ответ
Если нет — ставь 💅
Coderoll | Frontend
❤2
❓ Что такое Мутабельность (Mutability) и Иммутабельность (Immutability)?
Ответ:
Мутабельность означает, что объект может быть изменён после его создания. Иммутабельность означает, что объект остаётся неизменным, и любые изменения создают новый объект. В JavaScript строки и числа являются иммутабельными, в то время как массивы и объекты — мутабельными.
Ставь ❤️ если знаешь ответ
Если нет — ставь 💅
Coderoll | Frontend
Ответ:
Ставь ❤️ если знаешь ответ
Если нет — ставь 💅
Coderoll | Frontend
❓ Что такое Destructuring Assignment?
Ответ:
Destructuring Assignment — это синтаксис JavaScript, который позволяет извлекать данные из массивов или объектов в переменные. Это упрощает работу с данными и делает код более читаемым.
Ставь ❤️ если знаешь ответ
Если нет — ставь 💅
Coderoll | Frontend
Ответ:
Ставь ❤️ если знаешь ответ
Если нет — ставь 💅
Coderoll | Frontend
❤1
Как тестировать современный фронтенд
Бывало, замечаешь в коде «нехороший» модуль или функцию и тут же тянутся руки их отрефакторить. Но как потом убедиться, что правки не сломали какой-нибудь сценарий в приложении или вовсе не положили продакшен? Этих ситуаций можно избежать, если в проекте есть тесты.
В этой статье разобраны основные виды тестов и правила написания тестов
👀 Читать
Coderoll | Frontend
Бывало, замечаешь в коде «нехороший» модуль или функцию и тут же тянутся руки их отрефакторить. Но как потом убедиться, что правки не сломали какой-нибудь сценарий в приложении или вовсе не положили продакшен? Этих ситуаций можно избежать, если в проекте есть тесты.
В этой статье разобраны основные виды тестов и правила написания тестов
👀 Читать
Coderoll | Frontend
Вопрос с собеседования:
❓Что такое лексическое окружение?
Концепция, которая связана с областью видимости переменных во время выполнения кода.
Лексическое окружение определяет, как переменные и функции связаны между собой внутри кода и каким образом они доступны друг другу.
Лексическое окружение состоит из двух основных компонентов:
Environment Record (запись окружения) - отвечает за хранение переменных и функций внутри определенного контекста выполнения кода (например, функции или блока кода).
Outer lexical environment reference (Ссылка на внешнее лексическое окружение) - это ссылка на лексическое окружение, в котором данная функция была определена. Другими словами, это ссылка на окружение, в котором произошло объявление данной функции.
Ставь ❤️если знаешь ответ
Если нет — ставь 💅
Coderoll | Frontend
❓Что такое лексическое окружение?
Лексическое окружение определяет, как переменные и функции связаны между собой внутри кода и каким образом они доступны друг другу.
Лексическое окружение состоит из двух основных компонентов:
Environment Record (запись окружения) - отвечает за хранение переменных и функций внутри определенного контекста выполнения кода (например, функции или блока кода).
Outer lexical environment reference (Ссылка на внешнее лексическое окружение) - это ссылка на лексическое окружение, в котором данная функция была определена. Другими словами, это ссылка на окружение, в котором произошло объявление данной функции.
Ставь ❤️если знаешь ответ
Если нет — ставь 💅
Coderoll | Frontend
⚡️Перечислите хотя бы 4 метода HTTP
Ответ:
GET, POST, PUT, DELETE
Ставь ❤️ если знаешь ответ
Если нет — ставь 💅
Coderoll | Frontend
Ответ:
Ставь ❤️ если знаешь ответ
Если нет — ставь 💅
Coderoll | Frontend
❤1
❓ Что такое Module Pattern?
Ответ:
Module Pattern — это паттерн проектирования в JavaScript, который позволяет создавать модули с приватными переменными и методами, используя замыкания.
Ставь ❤️ если знаешь ответ
Если нет — ставь 💅
Coderoll | Frontend
Ответ:
Ставь ❤️ если знаешь ответ
Если нет — ставь 💅
Coderoll | Frontend
💅1