What the problem?
Основной проблемой данной разработки было то, что я очень хочу спать постоянненько. Поэтому работа заняла в два, а то и в три, раза больше времени
Transforming raw data…
Optimising re-renders!
Основной проблемой данной разработки было то, что я очень хочу спать постоянненько. Поэтому работа заняла в два, а то и в три, раза больше времени
document.addEventListener('DOMContentLoaded', () => {
const blocks = document.querySelectorAll('[data-before-after]');
blocks.forEach((block) => {
const range = block.querySelector('.before-after-range-input');
const overlay = block.querySelector('.before-after-overlay');
const line = block.querySelector('.before-after-slider-line');
if (!range || !overlay || !line) return;
const updateSlider = (val) => {
const rightInset = 100 - val;
overlay.style.clipPath = `inset(0 ${rightInset}% 0 0)`;
line.style.left = `${val}%`;
};
range.addEventListener('input', (e) => {
updateSlider(e.target.value);
});
});
});
Вот такие пироги, ребятки
Новые наброски и таймер
Старые наброски и таймер
Устранение лишних перерисовок DOM на 120 FPS.
Полноэкранные свайпы и жесты для мобильных пользователей.
Стабильные контейнеры без дерганий контента.
100% покрытие строгой типизацией TypeScript.
Мгновенные переходы между страницами с предварительной загрузкой ассетов в фоне.
Схема бизнес-процесса по поиску и обработке заявок
Сначала мы начали с того, что набросали схему бизнес-процессов. В том числе по поиску и обработке заявок, обработке почты и переписок, а также по фоновой аналитике
Потом я разработала главный экран и меню
В итоге всё было сделано, а продукт выпущен. На всю работку ушло 3 часа и 16 минуток ура ура!
Сюда можно добавлять больше шагов
Узкое место в производительности, неоптимальные ререндеры или сложная бизнес-логика.
Разработка кастомного хука, изоляция состояния и переход на мемоизированные селекторы.
Прирост скорости отрисовки на 60% и чистая масштабируемая архитектура модуля.
Оптимизация рендеринга и нормализация входящих данных на клиенте.
В этом блоке можно использовать как цифры, так и текста 🙂
Тута вы можете полюбоваться на книги 🙂
О проекте
Этот проект — веб-приложение для управления практикой студентов.
Система позволяет студентам подавать заявки на практику, а преподавателям — отслеживать их статус и контролировать процесс прохождения.
Основная задача проекта — упростить взаимодействие между студентами и преподавателями и сделать процесс оформления практики более прозрачным.
ЗАДАЧА
До разработки системы большая часть процессов происходила вручную:
документы передавались через почту или в бумажном виде, а статус заявок отслеживался отдельно.
Целью проекта было:
Реализация
Интерфейс построен как одностраничное приложение, что позволяет быстро переключаться между разделами без перезагрузки страницы.
Основные функции системы:
Особое внимание было уделено структуре интерфейса и навигации, чтобы пользователь мог быстро находить нужные разделы.
Особенности реализации
В проекте была реализована модульная структура компонентов, чтобы облегчить дальнейшее развитие системы.
Некоторые технические решения:
Это позволило сделать код более поддерживаемым и удобным для масштабирования.
Результат
В результате получилась система, которая позволяет централизованно управлять процессом практики и упрощает взаимодействие между участниками.
Проект стал хорошим опытом работы с архитектурой интерфейса и построением более сложной логики приложения.