Новые HTML элементы <dialog> и popover имеют много схожего

Элемент <dialog> используется для создания модальных и немодальных диалогов, которые требуют явного взаимодействия пользователя для закрытия. Модальные диалоги блокируют остальную часть страницы до тех пор, пока не будут закрыты пользователем, тогда как немодальные диалоги позволяют продолжать взаимодействие с остальной частью страницы. Это делает <dialog> полезным для сценариев, где необходимо привлечь внимание пользователя к определённому контенту или взаимодействию.

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

Ключевое различие между этими элементами заключается в их влиянии на фокус: диалоги перемещают фокус на первый доступный элемент внутри себя, в то время как поповеры сохраняют фокус на элементе, который их открыл. Это различие важно учитывать при разработке интерфейсов, чтобы обеспечить правильное взаимодействие и доступность для пользователей. Кроме того, поповер может быть управляем исключительно HTML методами, а <dialog> требует JavaScript.

<button popovertarget="my-popover">Open Popover</button>

<div popover id="my-popover">Hello!</div>

#dialog #popover

P.S. Не согласен с нарисованным

#meme

https://ios404.com/

Чего нет в iOS по сравнению с Android

#ios #android

Белорусский фулстек на заработках в Европе

Кому зайдет - Internal flight

#video #offtop

Тихо и незаметно вышел Svelte 5 со своими рунами - самый близкий Vue по духу фронтенд фреймворк

Ну и стандартно за два дня уже три дополнительных минорных релиза

Из новинок декларируется:

- более высокая производительность
- более гранулированная система реактивности с рунами
- более выразительный синтаксис шаблонов с фрагментами (snippets) и атрибутами событий
- встроенная поддержка TypeScript
- обратная совместимость с предыдущим синтаксисом

#svelte

Пару недель назад в интернете и Твиттере прошла ярая дискуссия по поводу Web Components, в которой принял участие и Evan You.

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

Но этот стандарт не может и не сможет заменить фронтенд фреймворки и даже приблизиться к ним в плане удобства и функционала. Да, на Web Components можно прекрасно писать большие приложения, но ему "не хватает" трех вещей, которыми избаловали современные фреймворки своих пользователей - связывания переменных шаблона и скрипта, директив в HTML и реактивности данных в JS.

И вряд ли они когда-то появятся, потому что любая их реализация будет частным случаем и будет означать, что это уже не просто HTML, и не просто JS. А такого быть не должно в W3C мире, потому что в его спецификациях стандарты, которым десятки лет, и которые должны просуществовать еще десятки лет.

#webcomponents

В 2024 году в CSS завезли типизацию переменных

Нетипизированное CSS property:

:root {
  --background-color: blue;
}

.box {
  background-color: var(--background-color);
}

Типизированное CSS property

@property --background-color {
  syntax: "<color>";
  inherits: false;
  initial-value: blue;
}

Через JS

window.CSS.registerProperty({
  name: "--background-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "blue",
});

Типы (syntax): <length>, <number>, <percentage>, <length-percentage>, <color>, <image>, <url>, <integer>, <angle>, <time>, <resolution>, <transform-function>, <custom-ident>, или список типов данных и значений ключевых слов.

Поддержка в браузерах уже полная

———

P.S. Типизация нужна, если это свойство используется в transition

Пример 1

Пример 2

#css

Недавно Эван сказал, что Vue близок к тому, чтобы быть "feature complete" (функционально полным).

Абсолютно согласен.

Гранит стабильности в безумстве появляющихся каждый день хайпожорских фронтенд перверсий.

#evanyou #vuejs

Если у вас в проекте есть данные в json файлах, то иногда удобней работать с json5 (+комментарии и переносы строк, как минимум)

Для этого надо:

1) Поставить Vite плагин vite-plugin-json5
2) Поставить расширение json5 для VS Code для подсветки синтаксиса
3) Чтобы не ругался TypeScript, прописать в index.d.ts:

declare module "*.json5" {
  const value: any;
  export default value;
}

Стало намного удобней.

Бандл не меняется.

#json #tip #dx

В CSS есть scroll-driven animations, которые позволяют делать сложные красивые анимации [почти] без JS

Демо

Документация

#css #animation

Нашел интересный сервис - https://assayo.online/

По логам GIT репозитория дает разную статистику, в том числе местоположение его разработчиков

Определяет это по времени коммитов, разным языковым символам, популярным именам в стране и др.

Мои координаты точно нашел.

#git

Современные браузеры поддерживают Text fragments

Это когда можно сделать ссылку на страницу, с выделением на ней определенного текста

Общий синтаксис:

https://example.com/page.html#:~:text=[prefix-,]textStart[,textEnd][,-suffix]

Пример:
https://vue-faq.org/ru/book/Chapter_2__Software_Design_Principles_and_Patterns.html#:~:text=Программирование,проблем

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

Большое интервью Эвана Ю о Voidzero

Есть субтитры на русском

#evanyou #voidzero

Замутил тут проект от нечего делать.

Есть сайт знакомств, там 9000 кандидаток. Настоящих, не ботов.
Работает наподобие Тиндера - с пролистыванием. Ну и описание у каждой немаленькое.

Листать вручную и читать всё - влом
Написал на Playwright бота, который все это пролистал и загрузил как HTML.

Распарсил в JSON.
Выделил четкие параметры (возраст, блондинка/брюнетка, локейшн и т.п.) - это хард-скилы.
Выделил нечеткие - описание, увлечения, мечты и т.д. - это софт-скилы.

Загрузил все в БД.

Дальше фильтруем сперва по хард-скилам. Остается пару тысяч вариантов.

Выгружаем всё частями в CSV для экономии, и скармливаем батчами AI с нужным промптом - подходим ли по интересам, насколько серьёзные у нее намерения и тому подобное. В gpt-4o-mini, чтоб недорого.

Ну он ранжирует, и получаем 30 самых подходящих потенциальных невест с хорошим приданным и прямыми ссылками на профили.

День работы.

#pet #ai

Марвин Джон Химейер (Marvin John Heemeyer; 28 октября 1951 — 4 июня 2004) — владелец мастерской в Гранби, штат Колорадо, военный инженер на пенсии, аэродромный техник ВВС США.

После длительного конфликта с компанией Mountain Park Concrete (бетонный завод) и местными властями по поводу территории, на которой находилась его мастерская, он оборудовал бульдозер Komatsu D355A-3 бронёй и разрушил 13 административных зданий (в том числе все здания, принадлежавшие бетонному заводу), после чего покончил жизнь самоубийством.

Это происшествие также известно в СМИ и интернете как «Война Марвина Химейера», а его бульдозер — как KillDozer

#offtop #video

К новости выше

«Куда ты ведешь нас?.. не видно ни зги! —
В сердцах к Владилену вскричали враги: —
Экспертами стать мы хотели Реакта,
Но света не видно в конце сего тракта.
«Куда ты завел нас?» — реактер вспрошал.
«Туда, куда надобно! — Минин сказал. —

Убейте! замучьте! — моя здесь могила!
Но знайте и рвитесь: во Vue наша сила!
Предателя, мнили, во мне вы нашли:
Их нет и не будет на вьюшной земле!
В ней каждый фреймворк сей с младенчества любит
И душу изменой свою не погубит».

«Злодей! — закричали враги, закипев, —
Умрешь под мечами!» — «Не страшен ваш гнев!
Кто с Vue в сердце ходит, тот бодро, и смело,
И радостно гибнет за правое дело!
Ни казни, ни смерти и я не боюсь:
Не дрогнув, умру за родимую Vue!»

«Умри же! — реактеры злобно вскричали,
И сабли над Мининым враз засверкали! —
Погибни, предатель! Конец твой настал!»
И медленно Минин весь в ранах упал!
Снег чистый чистейшая кровь обагрила:
Лишь губы шепнули: "Во Vue наша сила!"

#literature #creative #minin

Pinia Colada появилась и как Nuxt модуль

Сколько в Nuxt уже [неправильных] способов заменить fetch(), включая Tanstack?

#pinia #nuxt

VS Code позволяет отключить аппаратное ускорение при отрисовке, что может заметно убыстрить IDE при плохом GPU или проблемах с драйверами

1. Preferences > Configure Runtime Arguments
2. Добавить: "disable-hardware-acceleration": true

Или сразу в .vscode/argv.json

#vscode #tip #optimization

Хеллоувин!

#offtop