#день_рождения дня

Сегодня День рождения не только лишь у меня, но и у HTML тегов!

29 октября 1991 года Тим Бернерс-Ли выкатил документ с названием HTML Tags.

И состоял он из описания 18 первых тегов: <title>, <nextid>, <a>, <isindex>, <plaintext>, <listing>, <p>, <h1>…<h6>, <address>, <hp1>, <hp2>…, <dl>, <dt>, <dd>, <ul>, <li>,<menu> и <dir>.

Архивная версия: https://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html

С Днём рождения, HTML! Ну и я :)

#html

#заметка дня

Вы, наверняка, слышали выражение: «В экстремальной ситуации ты не поднимаешься до уровня своих ожиданий, а опускаешься до уровня своей подготовки».

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

А ведь это — буквально закон Йеркса — Додсона, ссылка на Википедию.

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

Но если не повезёт в стрессе получить тяжёлую, сложную задачу... В какой-то момент кто-то даже начнёт кричать на монитор :)

Это я вообще к чему.

1. Слона нужно есть по-кусочкам.
2. Поведение в случае инцидента на работе должно быть строго задокументированое и разбито на понятные, простые действие.
3. Микроменеджмент, чайка-менеджмент — хороши для простых задач и абсолютное зло для больших.
4. Планирование — само по себе стресс, но в долгосрочной перспективе лучше с ним, чем без него.
5. Взгляните ещё раз на нижний график: важно знать, когда это самое планирование остановить и дать всем выдохнуть.

А ещё этот же принцип можно использовать для контроля команды и настроения команды в целом. Если человек постоянно занимается мелкими, пусть вроде и важными, задачами — самое время спросить, а всё ли в порядке, не нужен ли отпуск или выходной.

Немного сумбурно, пожалуй, но, надеюсь, я смог донести мысль.

Отдохните, котаны. И следите за собой и другими.

#stress #work

#ссылка дня

Продолжаем серию постов о Tailwind+React UI компонентах от Паскаля Витьелло!

У нас уже были поля ввода и кнопки. Настало время, очевидно, чекбоксов, радиокнопок и всякого рода переключателей!

На сей раз уже не 50, а даже побольше :)

Ссылка: https://originui.com/checks-radios-switches

Как обычно, основано на shadcn и Tailwind. Вообще, вышло мило и даже разнообразно.

#tailwind #shadcn #react #ui

#фишка дня

Итак, все мы знаем, что при добавлении скроллбара (если этот скроллбар, конечно, виден) у нас происходит сдвиг по фазе полей справа.

Ну или слева, если вы араб.

Но это же можно исправить! Используя правило scrollbar-gutter: stable можно зарезервировать место под скроллбар, не прибегая к иным методам вроде overflow: scroll (который буквально этот самый скроллбар заранее покажет, даже если он не нужен).

Демо от Ахмада Шадида в его Defensive CSS: https://defensivecss.dev/tip/scrollbar-gutter/

Can I Use: https://caniuse.com/?search=scrollbar-gutter

Поддержка в Chrome и Firefox. В Safari пока только в TP, но на Apple-устройствах скроллбары, как правило, скрыты и отображаются поверх контента, не занимая места.

Выглядит это, правда, как дополнительный паддинг, но!

Есть интересное но в виде scrollbar-gutter: stable both-edges, которое зарезервирует место под скроллбар, и такое же — на другой стороне. Что, в целом, избавит нас от разных паддингов.

Раньше за похожее решение отвечало правило overflow: overlay, но его отменили в пользу gutter.

Лучше всего это работает, впрочем, для попапов. Мало кого волнует скроллбар на тексте, а вот прыгающий body при появлении модалки — это уже перебор.

#css #scrollbar #gutter

#фишка дня

Как-то так получилось, что на мобильных устройствах работать с файлами и буфером обмена ну... неудобно.

И ладно iOS, но на Android тоже интерфейсы такие себе. Даже на Windows Mobile и PalmOS было как-то... стандартнее чтоль.

С другой стороны, появилась идея шэринга, aka share. И она на самом деле отвечает запросам людей: перекинуть файл из одного приложения в другое, а что нам ещё нужно-то?

Итак, встречайте: Web Share API.

Пользоваться очень просто:

navigator.share({
  title: "Будни разработчика",
  text: "Фронтенд и не только",
  url: "https://www.tg-me.com/htmlshit",
});

Но таким образом можно передавать не только текст и ссылки, но и файлы! Включая те, что вы только что сгенерировали на холсте или в приложении вообще.

navigator.share({
  files: [file],
  title: 'hello.png'
});

На десктопе, к сожалению, не работает. Но там у нас иные средства имеются.

#web #share #api #бородач

#фишка дня

Мне очень понравился этот бред, так что в рамках субботы очень даже пойдёт.

Итак, как найти первое вхождение элемента на странице, даже если он — вложен где-то внутри другого? Можно же так?

Вы не поверите, можно!

Код:

.target {
  &:nth-child(1 of &):not(:has(&) ~ * *):not(:has(&) ~ *):not(& ~ * *):not(& *) {
    /* your CSS here  */
  }
}

Итак, что же тут происходит?

✅ Это первый элемент среди своих сиблингов с таким же классом (&:nth-child(1 of &))
✅ Это не потомок элемента с таким же классом (:not(& *))
✅ Это не потомок элемента, перед которым находится элемент с таким же классом (:not(& ~ * *))
✅ Перед ним нет элемента, который содержит элемент с таким же классом (:not(:has(&) ~ *))
✅ Это не потомок элемента, перед которым находится элемент, содержащий элемент с таким же классом (:not(:has(&) ~ * *))

Как вам такое? :)

Демо: https://codepen.io/alinaki/pen/NWQzzv

Оригинал: https://css-tip.com/first-element-dom/

Естественно, есть похожее решение для последнего элемента: https://css-tip.com/last-element-dom/

#css #has #dom

#статья дня

Что делать, если ну очень хочется выпендриться, но времена кейгенов и демосцены ты уже не застал, или вообще — начать с чего-то надо?

И желательно бы при этом не сильно бесить посетителей и пользователей твоих проектов. То бишь, выпендриваться для своих.

И решение на самом деле очевидно! Засирать консоль браузера!

Ну серьёзно, если человек туда попёрся — наверное, он что-то хотел увидеть? Так давайте предоставим такое удовольствие!

А секрет прост: консоль браузера поддерживает CSS. А значит, можно сделать всё, что угодно. Включая анимирование SVG. Или даже буквально анимированные SVG.

То есть представьте, что наше сообщение — это некий блок. В него можно вставить фоновый SVG, как анимированный, так и обычный. А уже в SVG можно писать свои стили в теге style.

Какой-то глитч на бесконечные стили. Вот бы с деньгами так.

Как-то так:

console.info(
  '%c ',
  `padding-left:750px;padding-top:200px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 750 200'%3E%3Cstyle%3E text %7B font-family: sans-serif; font-weight: 100; fill: %23d8eaff; %7D %23stop1 %7B animation: recolor 40s linear infinite alternate %7D %23stop2 %7B animation: recolor 40s -32s linear infinite alternate %7D @keyframes recolor %7B 0%25 %7B stop-color: %23388bee; %7D 20%25 %7B stop-color: %2324c6dc; %7D 40%25 %7B stop-color: %23af74fd; %7D 60%25 %7B stop-color: %23c020d9; %7D 80%25 %7B stop-color: %23514a9d; %7D 100%25 %7B stop-color: %23053ece; %7D %7D %3C/style%3E%3Cdefs%3E%3ClinearGradient id='grad'%3E%3Cstop id='stop1' offset='0%25' stop-color='%23388bee'%3E%3C/stop%3E%3Cstop id='stop2' offset='100%25' stop-color='%23514a9d'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='750' height='500' fill='url(%23grad)'%3E%3C/rect%3E%3Ctext text-anchor='end' font-size='50' x='725' y='125'%3E thanks for %3C/text%3E%3Ctext text-anchor='end' font-size='50' x='725' y='175'%3E stopping by %3C/text%3E%3C/svg%3E")`
);

Вы любите простыню кода в сообщениях, я знаю :)

Статья на тему: https://frontendmasters.com/blog/console-delight/

Демо, сконвертировал из обычного кодпена: https://codepen.io/alinaki/pen/BaXPmoV

Естественно, можно просто на файл сослаться, не обязательно столько кода упихивать :)

Если хотите делать своё, вам пригодится конвертер от Йоксель: https://yoksel.github.io/url-encoder/

#css #svg #devtools #console #fun

#инструмент дня

Этого следовало ожидать и оно свершилось!

Дамы и господа, без лишних слов: библиотека и конструктор анимаций для Tailwind — Motion.

Сходу ссылка: https://rombo.co/tailwind/#animator

Казалось бы, бери да используй CSS-анимации, но... тут уж как есть. Думаю, работающим с тейлвиндом людям должно быть удобно, да и для конструкторов самое то.

Но, кроме шуток, инструмент и правда довольно оригинальный и подход к построению его интерфейса мне очень зашёл.

#css #tailwind #motion #animation #ui

#инструмент дня

Я, конечно, прошу прощения за неожиданную иллюстрацию к посту, но у меня примерно сейчас такие вот ощущения от либы, про которую хочу рассказать :)

И называется она, какая неожиданность, cigs.

Ну, буквально: 🚬 cigs

Сразу ссылка: https://github.com/cigs-tech/cigs

Итак, что же она делает.

А она позволяет задавать вопросы по заданной Zod-схеме обычным человеческим языком используя OpenAI-токены!

Короче, ещё более просто. Описываешь некую схему объекта, а потом спрашиваешь у системы: "А какой там любимый цвет у Джона?". И получишь ответ!

Пример:

function getUserCompliment(username: string) {
  const colorMap = {
    "Alice": "blue",
    "Bob": "green",
    "Charlie": "red",
  };
  return {
    color: colorMap[input.username as keyof typeof colorMap] || "unknown",
  };
}

const userInfoSchema = z.object({
  username: z.string(),
});

// Define a cig to get a user's favorite color
const getFavoriteColor = cig("getFavoriteColor", userInfoSchema)
  .handler(async (input) => {
    // Simulated database lookup
    return getUserCompliment(input.username);
  });

// Usage example
(async () => {
  try {
    const result = await getFavoriteColor.run(
      "What is the favorite color of Alice",
    ); // { color: 'blue' }
    console.log(result);

    const result2 = await getFavoriteColor.run(
      "What is the favorite color of Susan",
    ); // { color: 'unknown' }
    console.log(result2);

    // You can also call that function with the specified input
    const result3 = await getFavoriteColor.run({ username: "Alice" }); // { color: 'blue' }
    console.log(result3);
    // Expected output: { username: 'alice', favoriteColor: 'blue', compliment: 'You have great taste!' }
  } catch (error) {
    console.error("Error:", error);
  }
})();

Вы вообще понимаете, что это значит для тех, кто пишет парсеры или генераторы фейковых данных? :)

Вытащить все спец предложения с "красной ценой" со страницы интернет-магазина? Да запросто! Даже если этот самый магазин обфуцирует код.

Или использует Styled Components.

Пройдите на страницу библиотеки и почитайте примеры. Это нечто потрясающее.

#ai #parser

#фишка дня

Когда я наткнулся на этот твит в обсуждении утилиты работы с цветами Андрея Ситника, я не сразу примерил его на себя. Но, как оказалось, стоило бы.

Итак, давайте поясню для тех, кто по ссылкам не ходит.

В азиатских иероглифических языках почти весь ввод с клавиатуры происходит в аккордном режиме или же в режиме т. н. композитинга, общее название — Input Method Editor.

TL;DR: На экране всплывает окошко с символами или их группами и пользователь может что-то выбрать.

На каких-то ОС оно вызывается долгим зажатием клавиши, где-то — по хоткею, а где-то — автоматически и сразу.

Так вот, одно дело азиатские языки (я очень рекомендую посмотреть сам твит), а другое — разные европейские. И речь о диакритических знаках: умляуты, акуты, ударения, птички и шапочки.

Так вот, я не имею финской раскладки, потому буквы ä, å и ö ввожу как раз в режиме композитинга, долгим зажатием «материнской» клавиши.

Собственно, так база для азиатских языков проникла и в мою жизнь.

Кстати, выбор Emoji из всплывающего окошка — туда же.

В JavaScript-событиях для этого режима имеется флаг isComposing. Поэтому если вы, как и я в примере на видео, решили реализовать ввод групп символов подобным образом — циклически перебирая поля ввода — стоит об этом подумать :)

Собственно, давайте и пример: https://codepen.io/alinaki/pen/MWMpdvO?editors=1010

И напишите в комментариях, как вы решаете проблему редкого ввода букв с диакритикой у себя в системе. Например, я не помню, как это происходит в Windows, а в Linux я использую клавишу Compose, она работает чуть иначе.

#javascript #composing #event #бородач

#инструмент дня

Вы, наверное, уже наслышаны от обладателей айфонов про AirDrop и дикпики.

Кроме шуток, передать файлы по локальной сети между двумя своими устройствами должно быть максимально просто же! Без ковыряний в Network Discovery, настроек Samba и так далее.

И такое решение есть, даже с открытым кодом: LocalSend.

Сайт: https://localsend.org/

Написано на Dart и Flutter, работает на всех разумно доступных платформах: Windows, Linux, MacOS, Android, iOS.

Не опирается на один протокол, а перебирает все доступные и даже может запустить свой собственный сервер по необходимости. В крайнем случае, можно донастроить.

Никаких облаков, всё по локальной сети.

Поддержка нескольких получателей, поддержка буфера обмена.

В общем, если у вас дома зоопарк устройств и пока не хватило времени настроить что-то иное, или лучше Samba вы ничего в жизни не видели — вот это самое то.

Мне особенно импонирует Flutter. Я недавно вернулся к разработке своего пульта и это всё ещё очень приятный экспириенс.

#flutter #localsend #airdrop #network

#новость дня

Итак, мы писали Джаваскрипт в браузере, в консоли, на серверах, на микроконтроллерах, в играх, в кофеварках, в аудиоплеерах, телевизорах, в макросах офисных пакетов, в NoSQL базах данных...

Но до сих пор не писали его в хранимых процедурах MySQL!

Встречайте: JavaScript Stored Programs in MySQL. И соответствующий пост в блоге Oracle: https://blogs.oracle.com/mysql/post/introducing-javascript-support-in-mysql

Зачем? Ну для разных целей:
1. Извлечение данных, очевидно
2. Форматирование
3. Примерный поиск
4. Валидация данных
5. Собственные алгоритмы сжатия, сериализации и десериализации данных

Пример:

CREATE FUNCTION gcd_js (a INT, b INT) RETURNS INT 
LANGUAGE JAVASCRIPT AS $$

  let [x, y] = [Math.abs(a), Math.abs(b)];
  while(y) [x, y] = [y, x % y];
  return x;

$$;

Работает всё, ожидаемо, на GraalVM. Почему ожидаемо? Ну потому что Oracle и Java/JVM :)

Что, котаны, пишем стартап на MySQL? 😬

#mysql #sql #js #бородач