В Москве митапнулись модные вьюшники на msk_vue_js

#event

Метод navigator.sendBeacon() предоставляет возможность гарантированно отправить небольшой объем данных на сервер, даже если пользователь закрывает страницу или браузер. В отличие от традиционных AJAX-запросов, которые могут быть прерваны при выгрузке страницы, sendBeacon обеспечивает доставку данных в таких сценариях.

Браузер дает запросу sendBeacon приоритетное выполнение перед завершением работы страницы, что делает этот метод идеальным для критически важных данных.

Практические применения

- Финализация аналитических данных - отправка собранной за сессию аналитики перед закрытием страницы
- Автосохранение - сохранение последнего состояния приложения, которое пользователь мог не сохранить явно
- Отчеты об ошибках - гарантированная отправка логов о критических ошибках
- Трекинг поведения - фиксация последних действий пользователя перед уходом

const data = JSON.stringify({event: 'page_close', time: Date.now()});
navigator.sendBeacon('/analytics', data);

Ограничения

- Максимальный размер полезной нагрузки ограничен (обычно 64Кб)
- Поддерживает только POST-запросы
- Не поддерживает кастомные заголовки
- Ответ сервера не может быть обработан

#tip

Во Vue используется модель потока данных: "данные вниз, события наверх"

Но иногда всё-таки нужно послать событие дочернему компоненту, и в этом случае используется defineExpose. Это вполне соответствует лучшим практикам обычного HTML и DOM API

Основные use cases:

- открыть/закрыть модалку
- установить фокус
- сбросить форму
- валидировать поле
- обновить данные
- включить/выключить аудио/видео/анимацию

#expose

Несколько месяцев назад Cursor (и другие, наверно, тоже) научились работать с линтером, за один прогон исправляя ошибки

Можно пойти дальше - попросите Cursor написать и использовать тестовый скрипт для проверки некого функционала (без каких либо тестовых библиотек), который вы ему заказали. Тогда агент будет в цикле сам запускать этот скрипт, который будет проверять правильность уже проектного кода, ставить логи, изучать ошибки и исправлять их, пока всё не пофиксит. Часто он делает это сам.

Экономия времени и кредитов.

(не для vue, для js, py, php etc).

P.S. В новом Курсоре появилась фича Run agent in Clouds, включенная по умолчанию, из-за которой редактор начинает жутко тормозить. Можно отключить.

#ai #cursor #tip

Любимая рубрика "В мире животных"

#offtop #video #animals

При использовании router-view с transition с mode="out-in" в dev режиме при переходах по роутам часто ловится белый экран

Единственное найденное решение - отключать этот mode в dev режиме

<router-view v-slot="{ Component }">
  <Transition mode="out-in">
    <component :is="Component" />
  </Transition>
</router-view>

#router #tip

Вышел Oxlint 1.0.0

Но поддержки Vue правил еще нет

#oxlint

Ссылка была на англоязычный vue-faq.org на Реддите

На этом канале 900 человек, из них пусть половина вьюшников, а статьи по Vue на том же Хабре выходят раз в месяц.

Писать надо не из тщеславия, а потому, что при создании статьи, понимание ее материала выходит на новый уровень.

Аспирантов заставляют преподавать не из-за того, что мало преподавателей, а потому, что подготавливая материал, они сами узнают его намного лучше. Это как включить у AI режим thinking - "дай ответ и покритикуй его"

Если хотите развиваться как программист или просто человек, надо писать. Даже если будут ошибки, это пойдет только на пользу и развитие.

#article #learning

Дал порассуждать о Vue разным LLM

ChatGPT: Давайте сразу к делу. Vue.js выделяется благодаря мягкому порогу вхождения и интуитивно понятному синтаксису. Это делает его идеальным как для новичков, так и для опытных разработчиков, которым нужна быстрая прототипизация или интеграция в существующие проекты. Его компонентная архитектура также способствует поддержанию кода.

Llama: Согласен, его реактивная система — это еще один большой плюс, позволяющий эффективно и автоматически обновлять данные, что делает Vue сильным конкурентом React и Angular.

DeepSeek: Добавлю, что однофайловые компоненты Vue (.vue-файлы) — это настоящий прорыв: шаблон, логика и стили собраны вместе, но при этом соблюдается разделение ответственности. Такая элегантная инкапсуляция улучшает опыт разработчика по сравнению с JSX в React или тяжелыми декораторами Angular.

Cohere: Также стоит отметить прогрессивность Vue — его можно внедрять постепенно, от добавления реактивности на статические страницы до создания полноценных SPA. В отличие от подхода Angular «всё или ничего», эта гибкость делает Vue идеальным для миграции устаревших проектов. Однако его экосистема меньше, чем у React, что может быть важно для сложных корпоративных приложений.

Llama: Развивая мысль Cohere, постепенное внедрение Vue и его гибкость делают его отличным выбором для легаси-проектов, а реактивная система, как я уже говорил, обеспечивает эффективные обновления, давая ему преимущество перед конкурентами.

Cohere: Точно! Vue находит редкий баланс между мощью и доступностью. Структура .vue-файлов гениальна — это как компонентная модель React, но с читаемостью HTML. Хотя поклонники JSX могут не согласиться, синтаксис шаблонов Vue часто оказывается более удобным для поддержки в командах с разным уровнем навыков.

Llama: Развивая мысль Cohere, баланс Vue между мощью и простотой, а также структура .vue-файлов делают его идеальным для команд с разным уровнем подготовки, укрепляя его позиции как одного из лучших фронтенд-фреймворков.

system:
Ключевые аргументы:
- Vue.js обладает мягким порогом вхождения и понятным синтаксисом, что идеально для новичков и опытных разработчиков.
- Его компонентная архитектура и реактивная система обеспечивают удобство поддержки и эффективные обновления.
- Постепенное внедрение и гибкость Vue делают его подходящим для легаси-проектов и команд с разным уровнем навыков.

Важные инсайты:
- Однофайловые компоненты Vue (.vue-файлы) обеспечивают элегантную инкапсуляцию, улучшая опыт разработчиков.
- Vue находит баланс между мощью и доступностью, что делает его одним из лучших фронтенд-фреймворков.

Итог:
Vue.js выделяется среди фронтенд-фреймворков благодаря уникальному сочетанию доступности, удобства поддержки и гибкости, что делает его идеальным выбором для команд с разным уровнем подготовки и миграции устаревших проектов.

#ai #react #vuejs