Сегодня в 17:00 GMT+3 начинается двухдневная онлайн конференция VueJsNation

Выступит Evan You с новостями о Vue 3.6 и Vapor

#event #evanyou #vapor

В мой vite-plugin-html-injection сделали первый PR

Приятно, чёрт возьми.

Теперь во фрагментах можно использовать Vite env переменные, типа %VITE_API_URL%, которые будут заменены на их значения.

#vite #plugin #lib

Время от времени можно удалять локальный npm/yarn/ pnpm кэш, чтобы освободить место на диске от устаревших версий пакетов.

#npm #pnpm #optimization

Очень классная статья по дизайн системам от сотрудника Озон

#designsystem

Датацентры всего мира производят 3.7% мирового CO2 (carbon footprint, углекислый газ)

Каждый показ вашего сайта является причиной выделения CO2 - в среднем 0.8 грамм.

Замерьте карбоновый след вашего сайта

Еще одна причина писать эффективные PWA

#pwa #optimization

Был на органном концерте.

Фулстек разработчик должен быть всесторонне развит.

#offtop #music

#offtop #music

Хорошая задачка попалась:

Даны два бикфордова шнура, каждый из которых горит ровно минуту, если его поджечь с одного конца (но сгорать может неравномерно).

Как с помощью этих шнуров отмерить 45 секунд? (Поджигать шнур можно с любого из двух концов.)

#math

Жила-была мышка в домике. 

Скачет мимо лягушка - прыг-прыг! - спрашивает: 
- Кто, кто в домике живет? 
- Мышка - джейквишка. А ты кто? 
- А я лягушка - реактушка. Пусти и меня! 
- Иди. 

Вот их уже двое. Бежит зайчик. Подбежал к домику, спрашивает: 
- Кто, кто в домике живет? 
- Мышка - джейквишка, лягушка - реактушка. А ты кто? 
- А я зайчик - ангулярчик. Пустите и меня! 
- Иди. 

Вот их уже трое. Бежит лисичка: 
- Кто, кто в домике живет? 
- Мышка - джейквишка, лягушка - реактушка да зайчик - ангулярчик. А ты кто? 
-А я лисичка - астричка. Пустите и меня! 

Вот их уже четверо сидит. Глядь, бежит волчок - и тоже к домику, да и спрашивает: 
- Кто, кто в домике живет? 
- Мышка - джейквишка, лягушка - реактушка, зайчик - ангулярчик да лисичка - астричка. А ты кто? 
- А я волчара - вьючара. Пустите и меня! 
- Ну иди! 

Влез и этот. Уже стало их пятеро. Откуда ни возьмись, бредет кабан: 
- Хро-хро-хро, кто в домике живет? 
- Мышка - джейквишка, лягушка - реактушка, зайчик - ангулярчик, лисичка - астричка да волчара - вьючара. А ты кто? 
- А я кабан - хатамахан. Пустите и меня! 
Вот беда, всем в домик охота. 
- Тебе и не влезть! 
- Как-нибудь влезу, пустите!
- Ну, что ж с тобой поделаешь, лезь! 

Влез и этот. Уже их шестеро. И так им тесно, что не повернуться! А тут затрещали сучья: вылезает медведь и тоже к домику подходит, ревет: 
- Кто, кто в домике живет? 
- Мышка - джейквишка, лягушка - реактушка, зайчик - ангулярчик, лисичка - астричка, волчара - вьючара да кабан - хатамахан. А ты кто? 
- Гу-гу-гу, вас тут многовато! А я медведюшка - денофрюшка. Пустите и меня! 
- Как же мы тебя пустим? Ведь и так тесно. 
- Да как-нибудь! 
- Ну уж иди, только с краешку! 

Влез и этот. Семеро стало, да так тесно, что домик того и гляди, разорвется.

А тем временем шёл Деми Мурыч по лесу. Смотрит - домик битком набитый. 
- Вы кто? - спрашивает. 
- Мы? Фронтендеры!!
- Идите в жопу, фронтендеры, - сказал Деми Мурыч и пошёл дальше.

#creative #literature #humor

DeepSeek R1 была доступна в Cursor AI уже 23 января, оказывается

Надо было в сеттингах просто включить

#ai #cursor

Идти по жизни надо так

#offtop #video #animals

Если показываете через <router-view> страницу с route параметром (продукты, каталоги, пользователей через id), и надо при смене параметра загружать нового, - то есть, следить за изменением параметра, то делать это можно двумя способами.

Через watch:

watch(
  () => props.id,
  async () => {
    userData.value = await fetchUser(to.params.id);
  },
  { immediate: true }
);

Через хук роутера onBeforeRouteUpdate:

js 
import { onBeforeRouteUpdate } from 'vue-router'

onBeforeRouteUpdate(async (to, from) => {
  if (to.params.id !== from.params.id) {
    userData.value = await fetchUser(to.params.id);
  }
})

Второй способ дает еще возможность использовать onBeforeRouteLeave, если вдруг надо

#router #tip

Написал статью "Обзор различных методов работы с реактивным стейтом во Vue"

Переделанная вот эта. Исправлены фундаментальные ошибки (автор не понимает, что такое composable функция) и некоторые другие недочеты

Внизу статьи опрос, просьба проголосовать.

Также размещено на Vue-FAQ

#reactivity #pinia #eventbus #article

Потестируйте и покритикуйте (UX, UI, функционал и др.) последний пет-проект

lissa-health.com

Позволяет держать в одном месте свою медицинскую информацию (лабораторные анализы, заключения, произвольные записи) и делать AI аналитику по ним

На сайте есть демо-видео
Также можно загрузить демо-данные

#lissa #pet

Есть строгие мальчики, есть ветренные девочки, и есть TypeScript - трансгендер с пронаунсом "AS"

#ts #lang

Если вы используете Google Analytics то Google Pagespeed часто ругается сам на себя - gtag.js размером в 100Кб+ снижает показатели сайта.

Можно сделать следующий финт:

 <script async src="https://www.googletagmanager.com/gtag/js?id=G-0SGZMMY7Y4"></script>
 <script>
   window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
   gtag('js', new Date());

   gtag('config', 'G-0SGZMMY7Y4');
</script>

меняете на

<script>
  window.addEventListener('load', function() {
    setTimeout(() => {
    var script = document.createElement('script');
    script.src = 'https://www.googletagmanager.com/gtag/js?id=G-0SGZMMY7Y4';
    script.async = true;
    document.head.appendChild(script);

    window.dataLayer = window.dataLayer || [];
    function gtag(){ dataLayer.push(arguments); }
    gtag('js', new Date());
    gtag('config', 'G-0SGZMMY7Y4');
  }, 3000);
});
</script>
});

Ушедшие в первые 3 секунды посетители считаться не будут, но они, обычно, и не нужны.

#google #seo

Как отключить scroll страницы, когда показываешь модальный диалог через <dialog>?

body:has(dialog[open]) {
  overflow: hidden;
}

Размыть фон/overlay?

dialog::backdrop {
  backdrop-filter: blur(2px);
}

#css #tip #scroll