Feature-Sliced Design (FSD) — архитектура, в которую ты однажды влюбишься

Чем больше становится проект, тем сильнее тонет в файлах. Когда папка components имеет 1000+ файлов, а utils — страшнее node_modules, на помощь приходит FSD.

🔥 Зачем это нужно?
✅ Разделяет бизнес-логику и UI
✅ Улучшает масштабируемость
✅ Команды работают независимо
✅ Проект не рассыпается через год

👀 Читать

Coderoll | Frontend

Памятка по определению скоупов ответственности в FSD архитектуре

Coderoll | Frontend

Memoize.js — как управлять кэшем в браузере

Memoize.js — современная библиотека для работы с кешированием данных. Она идеально подходит для сохранения результатов API-запросов или временных данных.

👀 Потестить

Coderoll | Frontend

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

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

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

Coderoll | Frontend

Contrast Checker — проверка контраста цвета для доступного UI

Проблема низкоконтрастного текста часто мешает пользователям с нарушениями зрения. Не хочешь терять аудиторию? Убедись, что твои цвета соответствуют WCAG!

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

Coderoll | Frontend

SVGOMG — оптимизация SVG в один клик

Используешь SVG в проекте? SVGOMG – это онлайн-сервис для оптимизации SVG-файлов без потери качества.

Почему стоит использовать?
1) Удаляет лишние атрибуты и комментарии
2) Минифицирует пути и упрощает координаты
3) Убирает ненужные теги и атрибуты
4) Снижает вес файлов до 80% без потери качества

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

Coderoll | Frontend

Rem, Em, Px – какие единицы измерения лучше использовать в CSS?

При разработке адаптивных интерфейсов важно правильно выбирать единицы измерения. Но что лучше: px, em или rem?

📌 Краткий разбор:
✅ px – фиксированная величина, удобна, но не масштабируется.
✅ em – зависит от родительского элемента, удобно для вложенных блоков.
✅ rem – зависит от html, обеспечивает консистентность масштабирования.

❓ Когда использовать
Для шрифтов: rem
Для отступов и padding: em/rem
Для границ и теней: px

Coderoll | Frontend

Оптимизация рендеринга React-компонентов: как не навредить

Всё идёт хорошо, пока компоненты не начинают ререндериться без причины, нагружая браузер. Чем больше состояние и пропсов, тем сильнее страдает производительность.

В этом материале разберём:
✅ Почему React-компоненты перерисовываются?
✅ Когда стоит использовать useMemo и useCallback?
✅ Как React.memo может ускорить рендер?
✅ Какие инструменты помогают анализировать производительность?

Читай статью и избавляйся от лагов 👇

👀 Читать

Coderoll | Frontend

Deno — это новый инструмент для работы с JavaScript и TypeScript от создателя Node.js

Deno позиционируется как безопасная альтернатива Node.js с улучшенными возможностями для работы с модулями и встроенным TypeScript. Имеет улучшенную безопасность благодаря контролю за доступом к файлам, сети и процессам.

👀 Читать доку

Coderoll | Frontend

Alpine.js — легковесный фреймворк с удобным синтаксисом

Он идеально подходит для добавления динамичного поведения на страницы без необходимости в большом фреймворке, таком как Vue или React.

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

Coderoll | Frontend

Flexbox Froggy

Игра про лягушек, где ты управляешь их положением на экране с помощью свойств justify-content, align-items и др. Простая, но гениальная.

👀 Прокачать свой flexbox

Coderoll | Frontend

Valibot — минималистичная альтернатива Yup и Zod

Valibot — быстрая и легкая библиотека для валидации и преобразования данных. Работает с TypeScript и предоставляет простой API, который делает валидацию читаемой и производительной. Особенно актуальна в новых проектах, где важна производительность.

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

Coderoll | Frontend

Чистая архитектура фронтенда 

Хорошему программисту необходимо уметь совмещать свои навыки со здравым смыслом. Все дело в прагматизме и навыке выбора лучшего решения для вашей проблемы. Когда вы сталкиваетесь с проблемой при разработке ПО, вы можете воспользоваться базовыми принципами, которые помогут в выборе самого правильного подхода.

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

👀 Читать

Coderoll | Frontend

Взять то взял, а будут ли они сделаны это уже совсем другая история...

Coderoll | Frontend

❓Что такое слоистая архитектура (Layered Architecture) и зачем она нужна во фронтенде?

Слоистая архитектура — это подход, при котором код разделяется на логические слои, каждый из которых отвечает за свою зону ответственности. Обычно это: UI слой (компоненты), слой бизнес-логики, слой работы с API и слой хранилища данных.

Такой подход помогает:
1) изолировать ответственность каждого слоя;
2) улучшить читаемость и поддержку кода;
3) упростить тестирование;
4)снизить связность и повысить масштабируемость.

Во фронтенде слоистая архитектура позволяет удобно расширять приложение, не ломая уже работающие части.

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

Coderoll | Frontend

Jotai — атомарный state management для React

Jotai предлагает минималистичный и гибкий подход к управлению состоянием. Основан на атомах, которые можно комбинировать и использовать с Suspense. Поддерживает TypeScript и хорошую совместимость с серверным рендерингом.

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

Coderoll | Frontend

📚 Доступность во фронте

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

👀 Читать статью

Coderoll | Frontend

❓Что такое Lazy Loading?

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

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

Coderoll | Frontend

❓ Что такое Object.freeze()?

Ответ:
Object.freeze() делает объект неизменяемым (immutable). После вызова этого метода нельзя добавить, удалить или изменить свойства объекта.

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

Coderoll | Frontend

Классная шпаргалка для методов строк

Coderoll | Frontend