Случайно нашел неплохой бесплатный хостинг для бэка

alwaysdata.net

До 100Mb, MySQL/PostgreSQL с портом наружу, PHP, Python, Ruby, Node.js, Elixir, Java, Deno, .NET , SSH, подключение кастомного домена

Год использую - всё ровно.

#webhosting

Сегодня этому каналу 1 год.

Время вспомнить первый пост

По сей день это лучший учебник для изучения Vue.js на русском языке.

#vuefaq #learning #architecture #book

Сегодня - читальный зал

Белобров Попов
Груз ВКЖ-65

#offtop

Для реализации своих tooltip-ов и "выпадашек", наверное, самым оптимальный вариантом является использование современной и минималистичной библиотеки Floating UI

Их Vue адаптер мне не подошел. Вот простой вариант своего тултипа на их чистом js пакете.

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

Обертывать в Tooltip компонент то, на чем его надо показать, имхо, извращение.

<script setup lang="ts">
import { computePosition, flip, offset, shift } from "@floating-ui/dom";
import { onMounted, ref, useTemplateRef } from "vue";

const popover = useTemplateRef("popover");

onMounted(() => {
  popover.value.showPopover();
  computePosition(popover.value.parentElement, popover.value, {
    placement: "left",
    middleware: [flip(), shift({ padding: 5 }), offset(10)],
  }).then(({ x, y }) => {
    Object.assign(popover.value.style, {
      left: `${x}px`,
      top: `${y}px`,
    });
  });
});
</script>

<template>
  <div
    ref="popover"
    class="popover"
    popover
    role="tooltip"
  >
    <div class="tooltip-body">Hello</div>    
  </div>
</template>

<style scoped>
.popover {
  position: fixed;
  width: max-content;
  top: 0;
  left: 0;
  margin: 0;
  padding: 1em;
  text-align: left;
  border: 1px solid var(--bbl-c-border);
  border-radius: 5px;
  max-width: 400px;
  box-shadow:
    0 14px 44px rgba(0, 0, 0, 0.12),
    0 3px 9px rgba(0, 0, 0, 0.12);
  border-color: #bbb;
}
  </style>

#lib #tooltip #dropdown

Чтобы немного нейтрализовать психологическую травму, нанесенную TypeScript, вот на ночь четыре капли седатива от JS

#js

Автор русского перевода документации VitePress перевел и Vite документацию и просит сделать ревью его PR , чтобы его пропустили.

#vite #i18n

Вышел vue-router 4.5.0

Из примечательного - по инициативе Эвана на router-link появился prop view-transition, который задействует нативный View Transitions API для перехода между роутами.

<template>
  <RouterLink to="/some-page" view-transition>
    Go to some page
  </RouterLink>
</template>

Анимацию которого можно кастомизировать CSS стилями

Может быть быстрее вьюшного <Transition> и уж точно удобней в записи (по сравнению с конструкцией с router-view ). Но не такой функциональный, для простых переходов.

#router #animation #css

Неожиданно вышел Vite 6.0

Больших и даже просто значимых изменений практически нет. Предполагается, что это последний мажорный стабильный релиз перед заносом в Vite Rolldown-a и прочей Voidzero-шной машинерии.

#vite

Тут опросик замутили

Пишут, что уже несколько лет его проводят, но не попадался такой.

Эван, вроде, одобрил. Можно поучаствовать.

#vuejs #survey #stats

Вышел отчет State of Frontend 2024

Кроме того, что JQuery еще использует пятая часть опрошенных (а основная часть jq разрабов просто игнорирует подобные опросы), особо ничего интересного

#stats #survey

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

Сейчас HTML <dialog> делает это легко и непринужденно

Вот пример модалки в 30 строк с оверлеем, закрытием по outside клику и клавише ESC, с поддержкой доступности и других W3C стандартов

<script setup lang="ts">
import { ref } from "vue";

const dialog = ref(null);

function show() {
  dialog.value.showModal();
}
function close() {
  dialog.value.close();
}

function onClick($event) {
  if ($event.target === dialog.value) {
    dialog.value.close();
  }
}

defineExpose({ show, close });
</script>

<template>
  <dialog
    ref="dialog"
    role="textbox"
    tabindex="0"
    @mousedown="onClick"
  >
    <slot />
  </dialog>
</template>

<style scoped></style>

Использование:

const holaModal = useTemplateRef("holaModal");

// holaModal.value.show();
...
<ModalDialog ref="holaModal">
  <div>Hola!</div>
  <button @click="holaModal.close()">
    Close
  </button>
</ModalDialog>

И всё. Не надо никаких композаблов, телепортов и мучений с позиционированием.

В комментариях будут стили для плавного (fade in-out) открытия и закрытия окна диалога и оверлея.

#html #tip

Маск делает "беспристрастный" поисковик, альтернативу Google

(шутка)

#musk #seo

Активно используйте эмоджи, чтобы сделать коммит мессаджи поинтересней

#git #humor

Как приятно выйти на пенсию и заниматься только пет-проектами...

Предпоследний - Библеистика

Фронт в целом занял где-то треть работы. Технически было много интересных моментов, особенно на бэке (сбор данных, нормализация, структурирование, размещение, организация/оптимизация передачи их на фронт, индексация, морфологический поиск и т.п.). Был (и есть) даже вариант, что сайт может быть полностью статичным, без бэка, даже с поиском.

В итоге сайт "сотки" и близко к ним выбивает на PageSpeed

Репозиторий

#pet

Из эпохи, когда женщины были женщинами, и сами исполняли песни, которые сами писали.

#video #offtop