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

Сейчас 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

Бесплатные, доступные, опенсорсные и self-hosted альтернативы платным приложениям и сервисам

Notion -> Appflowy
Zoom -> Jitsi
Jira -> Plane
Airtable -> NocoDB
Vercel -> Coolify
Heroku -> Dokku
Firebase -> Pocketbase/Appwrite/Convex/Supabase
Shopify -> Prestashop
GitHub -> GitLab
Slack -> Mattermost
Salesforce CRM -> ERPNext
Dropbox -> NextCloud
Mailchimp -> Mautic
Trello -> Wekan
Docusign -> Docuseal
Calendly -> Cal dot com
Datadog -> Prometheus
Google Analytics -> Matomo
Microsoft Office 365 -> LibreOffice
Asana -> OpenProject

#software

Одно из полезных применений AI помощника в IDE - исправление CSS ошибок. Когда что-то не выводится, перекрывается и подобные проблемы, которые могут отнять очень много времени на их решение.

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

#css #ai