#новость дня

TikTok Sans — теперь не только фирменный шрифт соцсети, но и полноценный опенсорс.

Его изначально делали в Grilli Type: нужен был вариативный гротеск с хорошей читабельностью и поддержкой 460 языков. Потом в работу подключились Contrast Foundry и Type Network. В итоге получился масштабный проект: шрифт оптимизировали под интерфейсы, а также под особенности рендеринга на разных платформах и языках.

Да, кириллица поддерживается!

В TikTok захотели, чтобы фирменный шрифт стал ресурсом для сообщества. Вместо того чтобы держать его закрытым, они оформили публичную OFL-лицензию и передали в Google Fonts и GitHub.

По сути, это редкий случай, когда корпоративный брендовый шрифт превращается в открытый инструмент для дизайнеров и разработчиков.

Google Fonts
GitHub

Для нас это значит, что можно использовать шрифт прямо в проектах без лицензионных заморочек.

#font #tiktok

#фишка дня

Сделали вы такие флекс-контейнер, потомки в колонку, по центру, красота.

Но тут что-то пошло не так и контейнер стал слишком узким. Появился скролл. Казалось бы, невелика потеря: пользователь поскроллит.

А вот фиг!

Контейнер просто обрежет самого широкого потомка и не даст посмотреть его содержимого.

Что же делать?

Очень просто, Стефан Юдис напоминает нам о существовании ключевого слова safe, которое можно передать аргументом в align-правило:

.container {
display: flex;
flex-direction: column;
align-items: safe center;
width: 50%;
}

Смотрим видео. Теперь можно будет спокойно доскроллить до края самого широкого элемента.

Подробнее: https://www.stefanjudis.com/today-i-learned/safe-unsafe-alignment-in-css-flexbox/

По поводу поддержки браузерами: Chrome со 115 и Firefox с 63. И — ура — Safari с 17.6. В прошлый раз когда я эту статью упоминал — поддержка в Safari была только в TP.

А еще там Safari 26 вышла с поддержкой анимаций по скроллу, будем скоро вспоминать. Слава богу, macOS 26 для этого ставить не нужно.

#flex #css #scroll #бородач

#фишка дня

Вот как вы думаете, что может преследовать разработчика веб-браузера во сне? Может, это разбор дерева DOM? А может, реализация всех новых атрибутов элементов?

Нет! Это поддержка легаси! Например, как вам такое сообщение в PR браузера Ladybird:

Atlassian login gets the base URL for its module noscripts by throwing an error and pulling out the current noscript's URL from error.stack with regex.

Вы всё правильно поняли. Получение базового URL-адреса сборки ведётся путём выбрасывания исключения и поиска адреса в нём. Я такое делал на AppsScript чтобы получить стек, но прям в продакшене да чтобы для реального использования...

Пруф: https://github.com/LadybirdBrowser/ladybird/pull/5678

Дальше — больше. Не только разработчики Atlassian (Jira, Trello) используют подобное, тем же самым славится и любимый многими Parcel: https://github.com/parcel-bundler/parcel/pull/2534/files#diff-39112519f42223a8e331d0dac27d01f8a70db6fe3d515ad8016856931a6ccbda

Стало быть, фишкой дня объявляется:

function getBundleURL() {
  // Attempt to find the URL of the current noscript and use that as the base URL
  try {
    throw new Error();
  } catch (err) {
    var matches = ('' + err.stack).match(/(https?|file|ftp):\/\/[^)\n]+/g);
    if (matches) {
      return getBaseURL(matches[0]);
    }
  }

И, получается, ничего лучше же у нас так-то и нет. Если нет двери — используем окно.

А подробнее о браузере Ladybird я рассказывал в нескольких постах. Например, тут: https://news.1rj.ru/str/htmlshit/2935

#js #hack

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

Не устану повторять, что лучшая вёрстка — это та, которую делать не надо.

Поэтому я очень люблю конструкторы. Но мы тут не тильду делать собрались, потому речь о конструкторах раскладок.

И сегодня мне принесло очередной! FlexBox Labs: https://flexboxlabs.netlify.app/

Из названия понятно, что речь о флексбоксе, не о гридах. Но — повторю — одно другого не отменяет ни разу. Флекс и грид решают разные задачи, потому — стоит внимания.

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

Да и короткое объяснение, что и когда применять, на канале уже было: https://news.1rj.ru/str/htmlshit/607

А что ещё круто, проект — открытый, можно держать у себя локально: https://github.com/prazzon/flexbox-labs

Генерирует как CSS, так и классы Tailwind.

Впрочем, гриды конструктор тоже может, в экспериментальном режиме: https://flexboxlabs.netlify.app/grid

#css #flex #layout #бородач

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

Разработчики Google Chrome вот буквально вчера представили MCP для Chrome DevTools! Вот тут: https://developer.chrome.com/blog/chrome-devtools-mcp

MCP расшифровывается как Model Context Protocol — это протокол, который задаёт единый способ подключения внешних инструментов и источников данных к ИИ-моделям.

Зачем оно надо? Ну, собственно, это то самое недостающее звено в разработке: даёт возможность агенту реально пойти и посмотреть данные реального приложения, а не вашего о нём представления.

Живые метрики скорости и стабильности, реальный исполняемый код — все это доступно девтулзам, а теперь, значит, и агенту.

Берёшь такой и спрашиваешь: «У меня там валидация не срабатывает когда я ввожу неверный емейл, разберись». И ведь разберётся!

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

Не, кроме шуток, это очень круто. Теперь можно подсоединиться к Jira, Figma, натравить это всё на браузер и отдохнуть наблюдать :)

#chrome #mcp

#статья дня

Вы когда-нибудь пытались анимировать смену цвета и сталкивались с тем, что в какой-то момент всё превращается в уныло-серое? Джош Комо как раз разбирает эту проблему.

Дело в том, что даже если мы задаём разные цвета через разные цветовые модели, браузер всё равно интерполирует их в RGB-пространстве. А оно ограниченное, и на кривой перехода иногда выпадает серый — как с градиентами (https://news.1rj.ru/str/htmlshit/806), только теперь в анимации.

Казалось бы, решение простое: крутим hue в HSL, и серого не будет. Но на практике CSS-анимации всё равно сводятся к RGB, и мы снова получаем неожиданный результат. И более того, анимация от 0 до 360 (полный оборот) вообще не будет анимирована. Оптимизация!

Есть два способа это обойти:

1. Использовать filter: hue-rotate(), чтобы прокручивать оттенки напрямую.
2. Хранить угол оттенка в CSS-переменной и анимировать именно её, а не цвет в целом.

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

Статья: https://www.joshwcomeau.com/animation/color-shifting/

#css #color #animation

#заметка дня

Тут в нашем чатике aka @htmlshitchat человек задал вопрос: «Как заставить событие произойти только после долгого нажатия на кнопку?»

И, вроде, очевидный ответ: ставь таймаут да отменяй его:

Осторожно, псевдокод jQuery

let r = null;

$button.on("mousedown", function(e) {
  e.preventDefault();
  e.stopPropagation();
  r = window.setTimeout(function() {
    $button.html('Clicked');
  }, 3000);
});

$button.on("mouseup", function() {
  $button.html('Hold me');
  window.clearTimeout(r);
});

Но это было бы скучно и недостаточно для поста, не правда ли?

И тут я вспомнил, что в 2017 году уже делал нечто подобное. Тогда не обошлось без погружения в Three.js и математику шестиугольников. Я об этом уже рассказывал: https://news.1rj.ru/str/htmlshit/2639

Немного покопавшись в вебархиве, я нашёл тот проект. Итак, что же мы делали?

А вот на видео видно.

Анимация была оформлена на Tween.js, который всё ещё очень и очень популярен. Правда, название их последнего релиза ну прям удручает. End of the end — серьёзно?

С 2017 года API их, конечно же, поменялся. Мне хотелось одновременно и последний вариант API вам показать, и сетку заставить работать... как хорошо, что мы в вебе, где можно вообще всё!

Итак, кодпен: https://codepen.io/alinaki/pen/KwPwVPr?editors=1100

Весь современный код упихан в секцию с HTML, в noscript type="module", где импортированы нужные модули и константы из ESM-версии Tween.js, он же является нашим скоупом.

Это вообще очень удобный паттерн чтобы быстро накидать пример без бандлинга.

По зажатию кнопки мыши запускаем анимацию forward, по отпусканию кнопки — запускаем reverse. Из breaking changes — раньше можно было просто вызвать start(), а теперь нужно вызывать startFromCurrentValues(), иначе красоты не получится.

  function forward() {
    tween.stop().to({
      value: 2000
    }, 3000).startFromCurrentValues();
  }

  function reverse() {
    tween.stop().to({
      value: 1000
    }, 3000).startFromCurrentValues();
  }

Достаточно просто и эффектно.

#js #animation #tween #бородач

#фишка дня

Вот вы знали, что в слушатель события можно передать AbortSignal и не выкаблучиваться с именованными функциями и вообще перестать слушать много событий разом, если надо?

А вот можно! Как в этом примере от Мэтта Покока.

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

#js #event #abortsignal #бородач

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

Писать тесты утомительно. Писать тесты компонентов — утомительно вдвойне. Писать тесты по доступности — втройне.

А проверять тесты и дописывать их — вчетверо.

Почему не вчетверне, кто знает?

На самом деле я, конечно, утрирую. Писать тесты, основываясь на доступных ролях элементов и их значениях — это весьма полезная практика для всех. Вот, обсуждали: https://news.1rj.ru/str/htmlshit/3717

Но что делать, если надо посмотреть, а что происходит-то? Иногда изолированно запустить компонент довольно сложно, добираться до компонента внутри приложения — тоже.

Один из правильных ответов на самом деле — использовать Storybook, но об этом я в следующий раз. И одно другого всё равно не отменяет.

А сегодня у нас прекрасная тулза: Jest Preview.

Нетрудно догадаться, что она делает: визуализирует ваши тесты! Смотрим видео на иллюстрации.

Теперь не нужно постоянно сверяться с кодом и прокручивать дерево DOM в голове. Пара строчек — и вот вы уже в браузере наблюдаете, что происходит на самом деле.

Прекрасно? Не то слово!

#test #jest #preview #storybook

#статья дня

Белиберда на экране — вовсе не белиберда. Именно таким образом Slack тестирует свою систему интернационализации. Переводов.

i18n, если ещё короче.

Если говорить строго, правильная локализация — это жопа.

1. Какие-то языки по своей природе длиннее, какие-то короче. Какие-то вообще иероглифы.
2. Нужно не только перевести слова, но и учесть формат дат.
3. Убедиться, что какой-то кастомный символ не крашит приложение (да, такое бывает).
4. И всё это надо как-то поддерживать и обновлять.

Так что статья из блога инженеров Slack — самое то: https://slack.engineering/localizing-slack/

TL;DR они используют синтаксис ICU MessageFormat для хранения кроссплатформенных переводов, а белиберда на экране нужна для тестирования, чтобы быстро находить непереведённые строки. Они будут выглядеть нормально.

#slack #i18n #бородач

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

Модульные шрифты всегда строились на простой идее: буква рождается из сетки. Ещё в 1920-е годы баухаузовцы экспериментировали с кругами, квадратами и треугольниками, чтобы создать универсальный алфавит, который можно воспроизвести где угодно — от печатного станка до архитектуры. Позднее Вим Кроуэл и другие дизайнеры показали, что строгая сетка может быть источником бесконечного разнообразия форм.

Сегодня к этим традициям обращается новый онлайн-редактор GRID TYPE. В нём можно выбирать разные сетки, настраивать их параметры, собирать буквы как из конструктора, экспериментировать с модульностью, сегментацией или пиксельностью.

Получившийся результат легко превратить в шрифтовой файл и использовать в реальных проектах.

Советую заглянуть в примеры — шрифтами дело не ограничивается! Орнаменты тоже тут. Можно использовать как часть CTF-игры…

Для тех, кто работает с кириллицей, доступна отдельная бета-версия: beta.grid-type.com А основной сервис здесь: grid-type.com

#fonts #tool

#ссылка дня

Вы ждали этого. Вы хотели этого. Вы жаждали этого!

Вы рисовали мемы, вы унижали бакендеров, вы унижались сами. Но теперь все проблемы решены!

Итак, 100 способов отцентировать div: https://css-generators.com/center/

Красненькое не надо использовать.

#css #div #center

#фишка дня от Jhey

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

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

Потому... разбиваем строку на span-ы и в каждом с помощью ключевых кадров меняем переменные, отвечающие за контент:

button:hover span:after {
  animation: flip 0.2s calc(var(--i) * 0.05s);
}
@​keyframes flip {
  20% { content: '_'; }
  40% { content: var(--c1); }
  60% { content: var(--c2); }
}

Вуаля, вы великолепны!

Естественно, символы надо определить заранее:

  <span
    style="--i: 0; --c1: 'x'; --c2: '$'; --c3: '≈';"
  >C</span>

The Matrix has you.

А, ну и ссылочка на кодпен: https://codepen.io/jh3y/pen/GRLKMPY

#css #var #flip #бородач

#статья дня

Я уже откровенно боюсь иной раз выкладывать статьи с какой-то теорией или генераторами, потому что обязательно в комментариях будет «есть же ИИ». Таким темпом проще рассказывать о продакт-инициативах (я вот про Story Map недавно узнал, надо?). Но вдруг продактов тоже заменит ИИ? Я бы с удовольствием.

Ладно, к чему это я. Конечно же к очередной статье про Big O aka сложность алгоритмов!

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

Итак, что же тут у нас? А тут у нас и сама статья:
https://samwho.dev/big-o/

И её перевод: https://habr.com/ru/companies/timeweb/articles/942956/

Но честное слово, лучше идите смотреть статью. Там наш с вами любимый интерактив!

#bigo #algorithm #cs

#статья дня

Motion почти 5 лет держали монорепозиторий на TypeScript (~2.5 млн строк). Но со временем разработка стала всё медленнее.
CI прогонял проверки больше 20 минут. Компилятор часто падал.

Это все решилось бы ts-go, но они устали ждать.

Приходилось поддерживать Zod, иначе проверка данных разваливалась. Prisma и Drizzle создавали трудности при рефакторинге. Совместный код между вебом и мобилой ломался при малейших изменениях.
В итоге команда решила перейти на .NET и C#.

Ссылка на статью: https://engineering.usemotion.com/moving-off-of-typenoscript-e7bb1f3ad091?gi=1f6548fc7f1a

Аргументы:
— Entity Framework упрощает работу с данными.
— Синтаксис и структура знакомы после TypeScript.
— Экосистема стабильная, инструменты зрелые.

Теперь их бэкенд пишется на C#, фронт остался на React. По их словам, так быстрее и предсказуемее, чем поддерживать TypeScript на большом масштабе.

Еще интересный момент: для своей системы ИИ-агентов языком исполнения они решили оставить JavaScript, но выполнять чужой Джаваскрипт на джаваскриптовом же бакенде выглядело небезопасно. Возможно, это стало решающим аргументом?

Мнения, котаны?

#typenoscript #zod #dotnet

#codepen дня

Мы когда-то давно смотрели на интересный пример использования clip-path и маскинга в CSS для создания кружочка статуса пользователя в сети: https://news.1rj.ru/str/htmlshit/2741

И вот Саймон Гелнер довёл этот пример до идеала! Размер, положение — всё настраивается через CSS-переменные и выглядит шикарно. Вот, можно поиграться: https://codepen.io/simeydotme/pen/ogNWvMN

Кстати, что даже более интересно, там используется прикольный API аватарок! https://www.dicebear.com/

Максимально неожиданная штука, конечно, с весьма интересными решениями по настройке внешнего вида аватарки и даже с предопределёнными генераторами (seed) на тысячи и миллионы вариантов.

Потрясающая находка, я считаю.

#css #noscript #api #avatar

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

Как узнать, верный ли JSON тебе передали, или нет?

Ну, общепринято как-то так:

function tryParseJSONObject (jsonString){
    try {
        const o = JSON.parse(jsonString);
        if (o && typeof o === "object") {
            return o;
        }
    }
    catch (e) { }

    return false;
};

Зачем проверка на объект? Ну потому что попытки распарсить 1234 и false к ошибке не приведут. Да и передача null просто вернёт null, который ещё и объект... ну вы поняли.

А что делать, если получение кривого JSON в вашем мире стало нормой? Да, звучит странно, но таких случаев больше, чем кажется.

Ну, во-первых, определиться, что лучше: упасть или попробовать вернуть хоть что-то? Но это утверждение верно и без проблем с JSON.

Мне когда-то опытный Java-разработчик возвращал самодельный JSON с одиночными кавычками. Такое видение было у человека.

Если хоть что-то, вашему вниманию jsonrepair: https://github.com/josdejong/jsonrepair

Справится с комментариями, кривыми кавычками, незакрытыми полями, отсутствующими запятыми, случайными операторами и всяческой питонячестью вроде True.

А ещё иногда модели этим грешат, просто не досылают стрим.

Плохой JSON ближе, чем кажется, котаны :)

#json #repair #fix