Будни разработчика

#инструмент дня Наткнулся на шрифт Datatype. Это вариативный шрифт, который превращает текст в… графики. Прямо через лигатуры. Пишешь что-то вроде: {l:15,45,90,30,75,20,85,95} → получаешь линейный график {b:30,70,50,90} → столбики {p:65} → круговую диаграмму То есть никакого SVG, canvas и прочего. Сделано это через OpenType-лигатуры + вариативные оси. По сути, шрифт парсит жисон и подменяет символы на нужные глифы. Выглядит интересно. Где это может быть полезно: — быстрые прототипы графиков прямо в тексте — документация — демки и презентации Минусы: — копирование: вставится исходный текст, но не график (логично) — доступность: скринридеры будут читать это как {l:15,45…}, а не как график (решаемо) — кастомизация сильно ограничена Хотя как концепт — очень круто. Пощупать можно тут: https://franktisellano.github.io/datatype/ Где используем, котаны? #font #diagram

Как давно вы от души смеялись? А отдыхали? Кажется, можно делать это чаще — даже вне зависимости от ответа. Да и лучше это всё совместить и поучаствовать в розыгрыше 10 и 20 тысяч рублей на 🌍Путешествиях. Переходите в тг-канал команды Яндекс Вертикалей, чтобы посмотреть подробности.

#статья дня Злые Марсиане в очередной раз хвастаются!

Making your site visible to LLMs: 6 techniques that work, 8 that don't

Ладно, на самом деле — крайне забавный кейс. Заказчик сидел-сидел, пилил чота с Клодом, в итоге решился на заказную разработку. И ему выкинуло, что, мол, Злые Марсиане отлично подходят. Как вам такое SEO, а? Сразу ссылка: https://evilmartians.com/chronicles/how-to-make-your-website-visible-to-llms На самом деле, статья большая, с историческими экскурсами и подробностями обсуждений, но сводится всё к одному: LLM-ки любят простой текст и чёткие направления. А кто-то застал этот максимально дурацкий бред от SEO-оптимизаторов? Помните же, как они ломали всю крутую семантику, не давали использовать заголовки, не давали прописывать strong, заставляя упихивать все стили в CSS и писать на дивах? В моей карьере был случай, когда нас заставляли в каждую статью вносить грамматическую опечатку, просто чтобы поймать людей, ищущих с ошибками 🤦‍♂️ Да, Google и прочие в итоге, конечно, стали ранжировать нормальные проекты выше, но ущерб уже был нанесён. А что же теперь? Как добиться от AI такой же эффективности как у марсиан? А теперь заполняете llms.txt, вводите отдельные роуты на Markdown-файлы — и вы великолепны. Зачем Markdown? Ну потому что все SEO потуги по добавлению в статьи смысла, которого нет, для LLM-ок являются просто HTML-мусором. А текст они любят. Статью всё равно почитайте, там хорошо. #llm #ai #seo

Да, кстати! Я же совсем забыл написать обновление по пульту и магазину 🙂 Как вы видите из сообщения, следующего за этим — модерацию я победил. И даже выпустил первую версию сразу же! Но в чат сразу не скидывал, ибо занялся не менее важной вещью — названием! Как оказалось — ну, и ожидалось — пультов в магазине многие десятки. И моё до глупости банальное Smart Remote Plus тупо не искалось (кто бы мог подумать). Пришлось начинать искать. Захотелось что-то короткое, и необычное. Финское, эстонское или карельское слово — подошло бы идеально. И понеслась... Koti, Koda, Sora, Vire, Lumi — занято. Havu тоже не прокатил. В какой-то момент наткнулся на Ruum — просто эстонское «комната». На этом и остановился. Ruum Hub — идеально. Итак, встречайте: Ruum Hub! Теперь шарить намного проще 🙂 https://apps.apple.com/fi/app/ruum-hub-smart-remote/id6761381793 Пока для iOS. Выделенная версия под macOS и на Android на подходе. Все, кто ставил из TestFlight — можете обновляться, я как раз починил интеграцию с последней webOS 25 и начал рабоду над LG NetCast. Google TV тоже на подходе. Спасибо за поддержку!

НДС 0% для твоего продукта Большинство небольших IT-команд думают, что реестр российского ПО - это для корпоратов с юристами и штатом 300 человек. Но это не так. Если у тебя есть: – мобильное приложение – SaaS продукт – B2B сервис для бизнеса – AI сервис / бот / автоматизация …то вполне возможно, что продукт можно включить в реестр российского ПО. И вот зачем это делать: – НДС 0% (и для НДС 5% на УСН тоже) – возможность работать с госзаказчиками – репутация: “реестровое ПО” звучит убедительнее, чем “мы стартапчик”. Если у тебя уже есть продукт и ты хочешь понять, можно ли включиться в реестр - напиши нам. Разберем бесплатно твою ситуацию, скажем честно: – можно зайти или нет – что нужно доработать – сколько времени займет – какие выгоды ты получишь. Пиши или переходи на сайт. Пока одни думают “это не для нас”, другие уже экономят деньги.

#статья дня Когда пакет долго живёт, у него очень легко появляется один большой index.ts, который реэкспортит почти всё подряд. В какой-то момент это начинает мешать: вроде бы импортируешь один маленький хелпер, а на практике инструменты идут через общий barrel-файл и поднимают гораздо больший граф модулей, чем реально нужен. На этом особенно быстро начинают болеть тесты и дев-среда, потому что Vitest и Vite очень чувствительны к размеру и связности module graph. Статья Organize your library with subpath exports как раз про более аккуратный способ это организовать. Идея в том, чтобы не складывать весь публичный API в один вход, а объявлять несколько явных входов через exports в package.json. Тогда вместо условного import { bau, useWow } from 'mylib' можно сделать import { bau } from 'mylib/helpers' и import { useWow } from 'mylib/hooks'. Снаружи это выглядит как импорт из подпапок, но на самом деле это не доступ внутрь пакета, а специально объявленные публичные entrypoint’ы. За счёт этого API пакета становится понятнее, внутренности лучше инкапсулируются, а tooling меньше спотыкается о лишние реэкспорты и случайные зависимости. Хороший короткий разбор, если хочется быстро понять сам подход и зачем он нужен. #vite #barrel #esm

А у Mad CSS офигенский мерч оказался между прочим :)

#фишка дня Надоело угадывать высоту строки, чтобы текст стал высотой ровно в прописную букву? Say no more!

    
        
 line-height: 1cap;
{}
    

И вы великолепны. P. S. ещё более вы великолепны, если Safari версии больше 17.2 включительно. #css #бородач

Найти работу фронтендера трудно? Ты просто не там ищешь! @job_webdev – огромная база вакансий фронтендеров, пополняющаяся ежедневно Не трать время зря! Подписывайся и ищи заказы уже сейчас🧑‍💻

#фишка дня У скроллящегося сайдбара можно сделать fade по краям так, чтобы пункты меню как будто уходили под градиент сверху и снизу. И сделать это красиво. Сразу пример со всем кодом и описанием: https://codepen.io/editor/alinaki/pen/019d954a-79e7-7e49-8653-181b0b67ad61 Для этого используется mask-image, а управляет всем scroll timeline: скролл контейнера становится прогрессом CSS-анимации. Дальше анимация меняет стопы градиента в маске, поэтому в начале верхний fade выключен, после начала прокрутки появляется, а в конце исчезает нижний.

    
        
@keyframes sidebar-fade-mask {
  0% { --fade-top-end: 0%; --fade-bottom-start: 94%; --fade-bottom-end: 99%; }
  8%, 92% { --fade-top-end: 6%; --fade-bottom-start: 94%; --fade-bottom-end: 99%; }
  100% { --fade-top-end: 6%; --fade-bottom-start: 100%; --fade-bottom-end: 100%; }
}

.menu-scroll {
  animation: sidebar-fade-mask auto linear both;
  animation-timeline: scroll(self block);
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 var(--fade-top-end),
    #000 var(--fade-bottom-start),
    transparent var(--fade-bottom-end)
  );
}
{}
    

Важный момент в том, что здесь не двигается сам градиент и не меняется opacity списка. Меняются именно стопы градиента, и из-за этого fade ведёт себя как часть скролла, а не как отдельный декоративный слой. Если хочется понять глубже, смотреть стоит в сторону animation-timeline, scroll-timeline и обзора scroll-driven animations. #css #scroll