Чтобы немного нейтрализовать психологическую травму, нанесенную 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