What the problem?
Основной проблемой данной разработки было то, что я очень хочу спать постоянненько. Поэтому работа заняла в два, а то и в три, раза больше времени
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.
Adaptive Touch
Полноэкранные свайпы и жесты для мобильных пользователей.
Zero Layout Shift
Стабильные контейнеры без дерганий контента.
Type Safety
100% покрытие строгой типизацией TypeScript.
Мгновенные переходы между страницами с предварительной загрузкой ассетов в фоне.
Схема бизнес-процесса по поиску и обработке заявок
Сначала мы начали с того, что набросали схему бизнес-процессов. В том числе по поиску и обработке заявок, обработке почты и переписок, а также по фоновой аналитике
Потом я разработала главный экран и меню
В итоге всё было сделано, а продукт выпущен. На всю работку ушло 3 часа и 16 минуток ура ура!
Сюда можно добавлять больше шагов
What the problem?
Узкое место в производительности, неоптимальные ререндеры или сложная бизнес-логика.
Решение
Разработка кастомного хука, изоляция состояния и переход на мемоизированные селекторы.
А что в итоге-то?
Прирост скорости отрисовки на 60% и чистая масштабируемая архитектура модуля.
Оптимизация рендеринга и нормализация входящих данных на клиенте.
В этом блоке можно использовать как цифры, так и текста 🙂
