Alex

https://www.electronjs.org/
https://tauri.studio/en/

Что-то в таком духе возможно:

<?php
// form.php

// во время загрузки станицы проверить была ли отправлена форма:

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
 // ... сделать то что вам нужно
}
?>
<form action="" method="post">

Смысл в том, что форма отправляет данные на ту же страницу, по сути просто перезагружается но при повторной загрузке сервер может обработать данные из формы.

Ну, вот вам с ходу костыль:

1. Создаёте AbortController и передаёте его во все вызовы.
   
2. Для каждого вызова добавляете один и тот-же обработчик
   
3. В нем, условно пушите полученный результат в какой-то массив. И тут же проверяете количество результатов в этом массиве.
   
4. Если их два -- вызвать abort чтобы отменить все остальные вызовы
   

Вы можете использовать систему реактивности из фреймворка Vue. Вам не нужен весь фреймворк. Достаточно только @vue/reactivity (работает на Proxy)

Пример:

import { computed, effect, reactive } from "@vue/reactivity";

const obj = reactive({ foo: 1 }); // Реактивная переменная
const doubleFoo = computed(() => obj.foo * 2); // Вычисляемое свойство (Реактивная переменная которая автоматически пересчитывается когда изменяется какая-либо из использованных внутри реактивных переменных)
effect(() => console.log("doubleFoo value changed to:" + doubleFoo.value)); // Функция, запускается когда изменяется какая-либо из использованных внутри реактивных переменных)

// Каждую секунду изменяет значение obj.foo
// После чего автоматически пересчитывается значение doubleFoo 
// После изменения doubleFoo вызывается функция переданная в effect и выводится сообщение в лог
setInterval(() => obj.foo++, 1000)

https://codesandbox.io/embed/ecstatic-wind-68ez4?f...

Перед сравнением, проверить что следующий элемент !== undefined

В данный момент задачи такого рода решаются с помощью JavaScript и математики:
Вычисляете размеры блока, смотрите размеры окра, смотрите положение блока. Если он как-либо вываливается за пределы видимой области -- сместить блок в сторону. Есть и готовые библиотеки для этого. Например popper.js

Если речь идёт именно про "Адаптивный" дизайн -- то нет, не стоит. Если речь идёт про отдельный мобильный сайт (когда общих стилей почти нет) тогда да.

Проблема в том, что определение "Смартфона" на основе размеров экрана может быть крайне не точным. Смартфоны есть большие, смартфоны умеют менять ориентацию, у смартфонов есть разные режимы работы. То же касается и ноутбуков. Как вы отличите маленький ноутбук от фаблета или планшета?
Вариантов устройств великое множество. И не забывайте, что во многих случаях ваш сайт может быть открыт не на весь экран.

import и media используют там, где места не хватает для блоков. Но почему

Идея в том, что вы изменяете не всю страницу, по каким-то заранее установленным точкам, а каждый отдельный компонент и по собственным размерам. То есть каждый компонент страницы умеет адаптироваться индивидуально и не зависимо от других. (Особенно С приходом Container Queries)

При таком подходе, с какого-бы устрйоства не зашел пользователь он увидит наиболее оптимальную страницу.

Добавьте атрибут novalidate на форму.
https://developer.mozilla.org/ru/docs/Web/HTML/Ele...

В общем случае -- стоит.

Но это больше всего зависит от вашего конкретного случая. Сколько кода является общим для всех страниц? Сколько уникально для каждого типа страниц? Сколько уникально для каждой страницы? Какова модель поведения пользователя? Он посетит все страницы сайта или только страницы одного типа? Пользователи заходят на сайт только раз, или постоянно возвращаются? С каких устройств и с какой скоростью интернета к вам приходят? Как построен процесс деплоя? Какие тарифы у вашего хостинга? Как часто и что вы изменяете в исходном коде? Как будете инвалидировать кэш? И ещё очень много вопросов, которые нужно учитывать.

Можно всё сгрести в один огромный бандл. Тогда первичная загрузка будет дольше, особенно ощутимо на медленном интернете. Но навигации по страницам будут быстрее, а нагрузка на сервер меньше. Но при изменении, скажем цвета одной кнопки, пользователю придётся заново качать весь бандл. И наоборот. Можно уйти и в другую сторону: дробить всё на как можно меньшие кусочки. (Например вынести весь код для какой-то модалки отдельно) и загружать каждый чанк только в момент когда он понадобится. Так первичная загрузка будет намного быстрее, но реакция на действия пользователя будет медленнее.

В общем случае -- дробить код сайта на куски и отдавать их частями -- стоит. Но вмеру. А как именно делить -- зависит от вашего случая.

Если вам по какой-либо причине хочется вручную "перерендерить" компонент, то скорее всего вы что-то делаете не так. Vue сам управляет отображением данных в зависимости от этих самых данных. Следовательно в вашем случае, TaskFormAdd должен изменить данные, а TaskList среагировать на эти изменения и изменить отображение.

Поищите в настройках плагина. Там есть нужный вам параметр

Что-то в таком духе?

:to="{name: item.url_type, params: {pathMatch: item.url_path}}"