Автор: dvcarrot
-
Sticky-сайдбар без sticky: когда нужен больший контроль
В предыдущей статье мы разобрали “умный sticky” через смещение (top: -offset).Этот подход позволяет сохранить один скролл страницы и аккуратно обрабатывать длинный контент. Но это не единственный способ. Иногда хочется: В таких случаях можно пойти другим путём и реализовать sticky-поведение вручную — через position: fixed. 💡 Идея подхода Вместо того чтобы “улучшать” position: sticky, мы: 👉…
-
Продолжение темы умный sticky в Vue
В первом варианте мы реализовали “умный sticky” через отслеживание скролла и накопление смещения (delta). Это даёт полный контроль, но у такого подхода есть особенность: положение сайдбара зависит не только от текущего scroll, но и от его истории Иногда это нормально, но можно сделать проще: 👉 не хранить промежуточное состояние вообще👉 а вычислять позицию напрямую из…
-
Умный sticky в Vue: как сделать прилипающий блок, который не ломается от длинного контента
position: sticky — одна из тех вещей, которые кажутся идеальными…пока не начинаешь использовать их в реальном интерфейсе. Особенно если у тебя: В какой-то момент всё начинает ломаться. В этой статье разберём решение:👉 sticky-блок с “внутренней прокруткой” без overflow: auto ❌ Проблема обычного sticky Классический вариант: position: sticky;top: 0; Работает отлично, пока: Но если больше —…
-
AI создаёт иллюзию скорости
Сейчас принято говорить, что AI ускоряет разработку в разы.На демках это выглядит именно так: написал промпт → получил код → поехали дальше. Но в реальной работе происходит другое. AI не столько ускоряет разработку, сколько создаёт ощущение, что ты ускорился.И это гораздо опаснее. Быстро написать ≠ быстро сделать С AI ты реально начинаешь писать код быстрее:…
-
Использование ECharts в Vue 3: практический пример
ECharts — мощная библиотека для визуализации данных. Она поддерживает линейные, столбчатые, круговые диаграммы, карты и многое другое. В этой статье разберём, как интегрировать ECharts в Vue 3 с помощью Composition API и показать пример динамической диаграммы. 1. Установка Для Vue 3 лучше использовать пакет echarts и обёртку vue-echarts: npm install echarts vue-echarts 2. Регистрация компонента…
-
VueUse на практике: таймеры, треки и локальное состояние
VueUse — это коллекция готовых Composition API утилит для Vue 3. Она позволяет ускорить разработку, уменьшить повторяющийся код и управлять состоянием, эффектами и событиями в реактивном стиле. В этой статье разберём реальные кейсы: таймеры, треки и локальное состояние. 1. Таймеры и интервалы Один из самых популярных хук-функций — useIntervalFn, которая заменяет обычный setInterval и автоматически…
-
Оптимизация Eloquent: уменьшение N+1 и кэширование
Работая с Laravel Eloquent, одна из самых частых проблем производительности — это N+1 запросов. Кроме того, правильное использование кэширования может значительно ускорить работу приложения. В этой статье мы разберём конкретные приёмы оптимизации с примерами кода. 1. Проблема N+1 N+1 запросов возникает, когда вы загружаете коллекцию моделей и для каждой модели выполняете отдельный запрос к связанной…
-
🚀 Figma Make — когда AI превращает идеи в работающие прототипы
В последние годы AI всё глубже внедряется в процессы создания интерфейсов, от автоматического заполнения макетов до генерации интерактивных элементов. Одним из самых интересных инструментов в этом направлении стал Figma Make — AI-помощник внутри Figma, который умеет на основе твоих описаний и дизайнов собирать функциональные прототипы, UI и даже базовый код веб-приложений. 🧠 Что такое Figma…
-
Replit: онлайн IDE, которая меняет веб-разработку
В мире веб-разработки выбор инструментов часто определяет скорость реализации идеи и комфорт разработки. Если классические IDE требуют установки, настройки окружения и длительного запуска, то Replit предлагает другой путь — когда вся ваша среда разработки живёт в браузере и доступна из любой точки с интернет-подключением. 🧠 Что такое Replit? Replit — это браузерная облачная IDE и…
-
Что такое n8n и почему он важен для веб-разработки
n8n — это платформа workflow automation с открытым исходным кодом, которая позволяет автоматически связывать разные сервисы, API и процессы, минимизируя ручное кодирование. Он сочетает в себе визуальное построение логики с возможностью добавления кастомного кода — JavaScript или Python — когда это нужно. Проще говоря, если раньше интеграции между приложениями требовали написания множества скриптов и ручного…