Please open Telegram to view this post
VIEW IN TELEGRAM
👍2🔥2
Путаешься между
Посмотри на ключевые отличия, которые действительно важны
👉 Гайды по JavaScript | дать буст
as const
и satisfies
в TypeScript?Посмотри на ключевые отличия, которые действительно важны
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
«Как сделать так, чтобы пиксель-арт не был размытым в Chrome?»
Попробуй
👉 Гайды по JavaScript | дать буст
Попробуй
image-rendering: pixelated
Please open Telegram to view this post
VIEW IN TELEGRAM
Паттерн Smart и Dumb компонентов — что нужно знать:
Разделяйте обработку данных и отображение. Smart-компоненты управляют логикой и загрузкой данных, dumb-компоненты просто принимают props и отвечают за отображение.
Кроме того, базовые компоненты используются как фундаментальные строительные блоки приложения (например, карточки, кнопки и т. д.) и по соглашению именуются с префиксами v, base или app.
👉 Гайды по JavaScript | дать буст
Разделяйте обработку данных и отображение. Smart-компоненты управляют логикой и загрузкой данных, dumb-компоненты просто принимают props и отвечают за отображение.
Кроме того, базовые компоненты используются как фундаментальные строительные блоки приложения (например, карточки, кнопки и т. д.) и по соглашению именуются с префиксами v, base или app.
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Вопрос:
Ответ:
👉 Гайды по JavaScript | дать буст
«Можно ли обновить searchParams в Next.js без создания отдельного клиентского компонента?»
Ответ:
Да — с помощью next/form
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥1
Please open Telegram to view this post
VIEW IN TELEGRAM
Почему оптимизация приложений Vue для производительности имеет значение
В современном веб-ландшафте производительность - это не просто приятная мелочь, она необходима для:
✅ Улучшения пользовательского опыта и вовлеченности
✅ Повышения конверсии и улучшения бизнес-показателей
✅ Повышение SEO-рейтинга и видимости
✅ Сокращения расходов на сервер и использование ресурсов
👉 Гайды по JavaScript | дать буст
В современном веб-ландшафте производительность - это не просто приятная мелочь, она необходима для:
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
Прощай, 💔
В Node теперь можно читать
С помощью метода:
👉 Гайды по JavaScript | дать буст
dotenv
В Node теперь можно читать
.env
файл без установки каких-либо зависимостей.С помощью метода:
process.loadEnvFile()
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥3
Как я управлял аутентифицированными API-клиентами с безопасностью типа с помощью Hono.js
👉 Гайды по JavaScript | дать буст
Please open Telegram to view this post
VIEW IN TELEGRAM
Что ты знаешь о паттерне проектирования Form Component?
И мы можем применить похожий подход к целым формам.
Такая схема учитывает, как пользователи взаимодействуют с формой:
они ожидают, что данные будут "зафиксированы" только после нажатия кнопки Submit.
Кроме того, этот подход отлично работает с нативной валидацией:
событие
👉 Гайды по JavaScript | дать буст
v-model
на нативных полях ввода — это крутоИ мы можем применить похожий подход к целым формам.
Такая схема учитывает, как пользователи взаимодействуют с формой:
они ожидают, что данные будут "зафиксированы" только после нажатия кнопки Submit.
Кроме того, этот подход отлично работает с нативной валидацией:
событие
submit
не срабатывает, пока встроенная проверка браузера не пройдена.Please open Telegram to view this post
VIEW IN TELEGRAM
Смотри, как просто защитить маршруты дэшборда.
Максимально чисто, по TanStack'овски:
никакой возни с редиректами на новые URL,
никаких акробатик в middleware.ts.
Кода минимум. Всё читаемо.
👉 Гайды по JavaScript | дать буст
Максимально чисто, по TanStack'овски:
никакой возни с редиректами на новые URL,
никаких акробатик в middleware.ts.
Кода минимум. Всё читаемо.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1
Понимание предварительной загрузки компонентов во Vue
В типичном приложении на Vue.js компоненты подгружаются по мере необходимости — это называется ленивой загрузкой (lazy loading) или разделением кода (code splitting). Такой подход уменьшает размер начального бандла, но может вызывать небольшие задержки при первом обращении к компоненту.
Предварительная загрузка компонентов решает эту проблему, инициируя загрузку заранее — как правило, при проявлении пользователем намерения взаимодействовать с компонентом (например, при наведении на кнопку).
Типовые сценарии использования предварительной загрузки компонентов во Vue:
✔️ Модальные окна и попапы
✔️ Формы с пошаговым интерфейсом (wizard'ы)
✔️ Компоненты для визуализации данных
✔️ Редакторы с расширенным UI (например, rich text editors)
✔️ Любые тяжёлые или не отображающиеся сразу компоненты
👉 Гайды по JavaScript | дать буст
В типичном приложении на Vue.js компоненты подгружаются по мере необходимости — это называется ленивой загрузкой (lazy loading) или разделением кода (code splitting). Такой подход уменьшает размер начального бандла, но может вызывать небольшие задержки при первом обращении к компоненту.
Предварительная загрузка компонентов решает эту проблему, инициируя загрузку заранее — как правило, при проявлении пользователем намерения взаимодействовать с компонентом (например, при наведении на кнопку).
Типовые сценарии использования предварительной загрузки компонентов во Vue:
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Эффектная библиотека JavaScript для создания слайдеров с анимацией и эффектом параллакса.
>
👉 Гайды по JavaScript | дать буст
>
pnpm i smooothy
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1👍1
Как работает система предзагрузки (Vue + Vite) 👀
🔸 Определение компонента:
Мы используем
🔸 Импорт-функции:
Мы отдельно определяем функции импорта (loadComponent и loadRoute), которые возвращают динамические импорты. Поскольку в Vite нельзя использовать "магические" комментарии Webpack, эти функции и выступают в роли механизма предзагрузки.
🔸 Триггер-события:
Предзагрузка реализуется через событие
🔸 Условный рендеринг:
Сам компонент отрисовывается только при необходимости (это управляется, например, через
👉 Гайды по JavaScript | дать буст
Мы используем
defineAsyncComponent
для создания компонента, который будет загружаться асинхронно. Это основа для разделения кода (code splitting) в Vue.Мы отдельно определяем функции импорта (loadComponent и loadRoute), которые возвращают динамические импорты. Поскольку в Vite нельзя использовать "магические" комментарии Webpack, эти функции и выступают в роли механизма предзагрузки.
Предзагрузка реализуется через событие
@mouseenter
. Когда пользователь наводит курсор на элемент, вызывается соответствующая функция импорта, и начинается загрузка кода.Сам компонент отрисовывается только при необходимости (это управляется, например, через
ref show)
, но благодаря предзагрузке код уже находится в памяти.Please open Telegram to view this post
VIEW IN TELEGRAM
Nuxt 4.0 официально вышел! Включает в себя ряд обновлений функций и небольшой список критичных изменений, о которых стоит знать.
Хотите подробный разбор с примерами кода по самым важным изменениям? Смотрите полный курс:
https://vueschool.io/courses/what-s-new-in-nuxt-4
Или быстрое видеообзор здесь:
https://youtu.be/wx5_FVjbC9c
👉 Гайды по JavaScript | дать буст
Хотите подробный разбор с примерами кода по самым важным изменениям? Смотрите полный курс:
https://vueschool.io/courses/what-s-new-in-nuxt-4
Или быстрое видеообзор здесь:
https://youtu.be/wx5_FVjbC9c
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1
Лучшая альтернатива
Библиотека утилит для JavaScript
✓ Без внешних зависимостей
✓ debounce, pick, chunk, cloneDeep, countBy...
✓ Оптимизирована для Node 18+ и современных браузеров
👉 Гайды по JavaScript | дать буст
lodash
Библиотека утилит для JavaScript
✓ Без внешних зависимостей
✓ debounce, pick, chunk, cloneDeep, countBy...
✓ Оптимизирована для Node 18+ и современных браузеров
pnpm install es-toolkit
import { debounce, pick, chunk } from 'es-toolkit'
// 1. pick — выбирает конкретные свойства из объекта
const user = { name: 'Midu', email: 'midu@gmail.com', edad: 40 }
const profile = pick(user, ['name'])
console.log(profile) // { name: 'Midu' }
// 2. chunk — разбивает массив на группы
const nums = [1, 2, 3, 4, 5, 6, 7]
console.log(chunk(nums, 3))
// Результат: [[1, 2, 3], [4, 5, 6], [7]]
// 3. debounce — откладывает выполнение до завершения ввода
const debouncedSearch = debounce(query => {
console.log('Поиск:', query)
}, 500) // задержка 0.5 с
const searchInput = document.getElementById('buscador')
searchInput.addEventListener('input', e => {
debouncedSearch(e.target.value)
})
Please open Telegram to view this post
VIEW IN TELEGRAM
Проверьте экземпляр FetchError в Nuxt для безопасной обработки ошибок в запросах на выборку
👉 Гайды по JavaScript | дать буст
Please open Telegram to view this post
VIEW IN TELEGRAM
Все еще пишете JavaScript сложным способом?
Вот решение, которое вы будете использовать всегда
👉 Гайды по JavaScript | дать буст
Вот решение, которое вы будете использовать всегда
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
Совет по Javascript
Знаете ли вы об этом более простом способе получения/установки параметров запроса URL?
👉 Гайды по JavaScript | дать буст
Знаете ли вы об этом более простом способе получения/установки параметров запроса URL?
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1