Автор: dvcarrot
-
Адаптивные сетки в Tailwind CSS: как сделать гибкую раскладку элементов
В современной веб-разработке важно, чтобы интерфейсы корректно отображались на любых устройствах. Один из ключевых инструментов для создания адаптивных макетов — CSS Grid. В этой статье разберём, как с помощью Tailwind CSS легко настраивать адаптивные сетки, которые автоматически подстраиваются под доступное пространство. 1. Базовый подход: фиксированное количество колонок Самый простой способ — использовать встроенные классы Tailwind…
-
Vue 3: Композиция vs Опции – что выбрать?
Сравнение Composition API и Options API, плюсы и минусы + пример миграции С выходом Vue 3 появился Composition API – новый способ организации кода компонентов. Но Options API никуда не делся. Какой подход выбрать? Давайте разберёмся! 1. Options API vs Composition API – в чём разница? 🔹 Options API (классический стиль Vue 2) Компонент строится…
-
Laravel + Vue: Простое SPA с API на Laravel
В этой статье мы создадим одностраничное приложение (SPA) на Vue.js с бэкендом на Laravel. Разберём: ✅ Настройку Laravel Sanctum для аутентификации✅ Подключение Vue Router✅ Пример CRUD (создание, чтение, обновление, удаление) 1. Настройка проекта Установка Laravel и Vue Создадим новый проект Laravel: Установим Vue 3 и необходимые зависимости: Настройка Vite (vite.config.js) Подготовка структуры Vue (resources/js/app.js) 2.…
-
Vue.js: Основы реактивности и работа с состоянием (Vuex/Pinia)
Реактивность — одна из ключевых возможностей Vue.js, которая делает разработку удобной и эффективной. В этой статье разберём: 1. Что такое реактивность во Vue? Реактивность — это автоматическое обновление интерфейса при изменении данных. Vue 3 использует Proxy (в отличие от Vue 2, где применялся Object.defineProperty), что делает систему более гибкой и производительной. Пример реактивности 🔹 ref…
-
Сравнение Nuxt.js и Astro: какой фреймворк выбрать?
В мире современной веб-разработки существует множество инструментов для создания быстрых и SEO-дружественных сайтов. Два популярных решения — Nuxt.js и Astro — предлагают разные подходы к разработке. В этой статье мы сравним их по ключевым параметрам, чтобы помочь вам выбрать подходящий инструмент для вашего проекта. 1. Общая информация Nuxt.js Astro 2. Ключевые различия Критерий Nuxt.js Astro…
-
Анимации в Astro: GSAP, Framer Motion и CSS-решения
Как добавить плавные переходы без вреда для производительности Одна из сильных сторон Astro — скорость загрузки страниц благодаря минимальному JavaScript. Но как быть с анимациями, которые обычно требуют JS? В этой статье разберём несколько способов добавить анимации в Astro-проект: 1. CSS-анимации: самый лёгкий способ Подходят для базовых эффектов (появление, fade-in, hover). Пример: плавное появление элемента…
-
Особенности использования Astro.js: почему он идеален для современных сайтов
Astro.js — это современный инструмент для создания быстрых и оптимизированных веб-приложений. Он сочетает в себе преимущества статической генерации (SSG), серверного рендеринга (SSR) и гибридных подходов, позволяя разработчикам выбирать оптимальный вариант для каждого проекта. В этой статье разберём ключевые особенности Astro.js и как их эффективно использовать. 1. Мультифреймворковая поддержка Astro позволяет использовать компоненты из React, Vue,…
-
Способы вызова 404 ошибки в Nuxt.js
В Nuxt.js есть несколько способов выкинуть 404 ошибку, чтобы фреймворк корректно её обработал и отобразил соответствующую страницу ошибки. Основные методы: 1. Использование throw createError() 2. В асинхронных данных (asyncData или fetch) 3. В middleware 4. В обработчиках API маршрутов (server/api) Настройка кастомной страницы 404 Nuxt автоматически использует файл ~/error.vue для отображения ошибок. Вы можете создать…
-
Создаем класс для генерации PDF чеков с динамической высотой
В веб-приложениях часто требуется генерировать PDF документы — чеки, отчеты, счета. Сегодня мы создадим удобный класс на PHP для этой задачи с использованием библиотеки Dompdf, который будет автоматически подстраивать высоту документа под его содержимое.
-
Создание консольной команды в NestJS
В NestJS можно создавать консольные команды (CLI-команды) несколькими способами. Вот основные подходы: 1. Использование встроенного CommandRunner (NestJS 8+) Затем добавьте команду в модуль: 2. Использование Commander.js (более гибкий вариант) 3. Использование NestJS CLI плагинов Вы также можете создать собственный плагин для NestJS CLI, но это более сложный вариант, подходящий для интеграции с существующим NestJS CLI.…