smilingcheater

1) Линии через path.
2) Круги на местах соединений - через svg элемент<marker>.
3) Анимацию тегом animate.

<svg viewBox="0 0 140 140" width=100vw height=100vh>
  <defs>
    <marker id="markerCircle" markerWidth="8" markerHeight="8" refX="5" refY="5">
        <circle cx=5 cy=5 r=3 />
    </marker>
  </defs>
  <path d="M20 20 L30 40 L70 20 L90 80" fill="none" stroke="red" marker-start=url(#markerCircle) marker-mid=url(#markerCircle) marker-end=url(#markerCircle)>
    <animate 
           attributeName="d"
           values="M20 20 L30 40 L70 20 L90 80;
               M20 40 L30 10 L70 60 L90 110;
               M10 10 L15 80 L120 70 L150 75;
               M20 20 L30 40 L70 20 L90 80"
           dur="20s"
           repeatCount="indefinite"
           />
  </path>
</svg>

UPD: круги через svg marker

Да, действительно, все крайне просто:
1. На удаленном сервере в /etc/ssh/sshd_config ставим GatewayPorts yes

2. На домашнем сервере набираем
ssh -f -N -R 1111:localhost:80 domain.ru user@domain.ru
где 1111 - порт на удаленном сервере, domain.ru - адрес удаленного сервера, user - пользователь на удаленном сервере.

Спасибо Алексей Тен.

connection.query('SELECT * FROM menu', (err, result) => {
  if(err) {
    console.error(err);
    return;
  }
  const index = result.reduce((acc, row) => ({...acc, [row.id]: row}), {});
  const menu = [];
  for(const row of result) {
    if(row.parent_id === 0) {
      menu.push(row);
      continue;
    }
    const parent = index[row.parent_id];
    if(!parent) {
      console.warn(`Undefined parent with id ${row.parent_id}`);
      continue;
    }
    if(!parent.children) {
      parent.children = [];
    }
    parent.children.push(row);
  }
  console.log(menu);
});

Работает только в достаточно новых браузерах:
https://developer.mozilla.org/en-US/docs/Web/API/N...

navigator.share({
    title: 'Дратути!', // Заголовок
    text: 'Здарова, бандиты!', // Текст
    url: 'https://bandits.org', // ссылка
  });

Текущая ссылка и title:


Свои параметры:


На примере data-атрибутов:


~ ~ ~

Всё это вызывает сие меню:


И весьма недурно отправляет, например, в Telegram:

Ударит. Все что вы таким образом будете делать с помощью Vue, будет невидимым для поисковиков.
UPD. Вы не сможете использовать ssr, nuxt и тп, как советуют, если хотите использовать Vue для отдельных частей страницы.

И насколько хорошей\плохой практикой будет использовать Vue в качестве вспомогательного средства, а не для создания полноценного SPA?

Очень хорошая практика. Например, если у вас существующий интернет магазин с десятками фильтров, котрые между собой связаны. Реализация таких фильтров на jQuery или чистом JS - это ад. Тут можно и нужно брать Vue и переписывать только кусок с фильтрами, потому что используя реактивность, разрабатывать такие сложные взаимозависимые вещи, как фильтры, одно удовольствие.

Я виндовсом не пользуюсь.
Но "Остальные "програмулины" не внушают доверия.", что значит не внушают доверие?? Может стоит просто попробовать?

И второе. Я думаю эти заметки не самое удобное решение.
Есть несколько причин.
Первый, у тебя сломался комп и все твои заметки не доступны. Поэтому я заметки использую только в облаках. Сейчас куча решений есть, выбирай)
Второе, мне кажется хранить их на самом рабочем столе не удобно. И другие пользователи и авторы этих решений знают об этом поэтому и мало качественных решений предлагаются на рынке. (именно для рабочего стола). И из этого вытекает твое недоверие к другим программам, парадокс)))

Поэтому может стоит посмотреть на что-то более другое. К примеру эвернот, onenote(кстати чем пользуюсь я). Потому что они бесплатны и есть как десктоп версии и мобильные приложении.

Это в шаблоне используют обрезку текста древними методами.
Вам нужно в шаблоне найти где вывод этого текста или саму функцию обрезки по числу символов и заменить хотяб на mb_strimwidth если очень надо обрезать по количеству символов.

Немного дополню:
используя стандартные компоненты, на выходе получается бОльшая нагрузка, т.к. они рассчитаны под большое количество нужд, чем конкретная задача.
Результат использования своих компонентов очень просто отследить, достаточно включить режим отладки и посмотреть количество запросов, которые генерирует страница.

Все правильно понимаешь. Продолжай.

UPD:
Если делаешь сайт на компонентах и примерно понимаешь как все это работает, проще и лучше делать именно на написанных с нуля.
Стандартные компоненты пытаются быть с одной стороны гибко настраевыемыми, с другой стороны стараются изолировать API от пользователя. Так как это плохо совместимые задачи, настройки компонтентов пухнут, а логика в работы не оправданно усложняется пытаясь покрыть максимум потребностей.
Но на проекте тебе как правило нужны компоненты достаточно узкой специализации, если ты не хочешь их использовать за его пределами.
Поэтому написание с нуля на практике - лучшее решение.