#фишка дня
Надоело угадывать высоту строки, чтобы текст стал высотой ровно в прописную букву? Say no more!
И вы великолепны.
P. S. ещё более вы великолепны, если Safari версии больше 17.2 включительно.
#css #бородач
Надоело угадывать высоту строки, чтобы текст стал высотой ровно в прописную букву? Say no more!
line-height: 1cap;
И вы великолепны.
P. S. ещё более вы великолепны, если Safari версии больше 17.2 включительно.
#css #бородач
❤15
Будни разработчика
#событие дня Я понятия не имею, как я пропустил! Итак, соревнование March MadCSS! 16 лучших фронтенд-разработчиков схлестнутся в жаркой битве по вёрстке интерфейсов. Ну, я надеюсь, вам что-то говорят имена Josh Cameau, Wes Bos, Kyle Cook, Chris Coyier...…
А у Mad CSS офигенский мерч оказался между прочим :)
❤16👍9
#статья дня
Когда пакет долго живёт, у него очень легко появляется один большой
В какой-то момент это начинает мешать: вроде бы импортируешь один маленький хелпер, а на практике инструменты идут через общий barrel-файл и поднимают гораздо больший граф модулей, чем реально нужен. На этом особенно быстро начинают болеть тесты и дев-среда, потому что Vitest и Vite очень чувствительны к размеру и связности module graph.
Статья Organize your library with subpath exports как раз про более аккуратный способ это организовать. Идея в том, чтобы не складывать весь публичный API в один вход, а объявлять несколько явных входов через
Снаружи это выглядит как импорт из подпапок, но на самом деле это не доступ внутрь пакета, а специально объявленные публичные entrypoint’ы.
За счёт этого API пакета становится понятнее, внутренности лучше инкапсулируются, а tooling меньше спотыкается о лишние реэкспорты и случайные зависимости. Хороший короткий разбор, если хочется быстро понять сам подход и зачем он нужен.
#vite #barrel #esm
Когда пакет долго живёт, у него очень легко появляется один большой
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
👍11👎1🫡1
Будни разработчика
#заметка дня Модераторы Apple отклонили мой пульт, соответственно, не приняв его в магазин. Причина звучит обидно и стыдно: 4.3 Spam. И означать это может всё, что угодно: от того, что использованы чужие закопирайченные ассеты и до того, что я просто взял…
Да, кстати! Я же совсем забыл написать обновление по пульту и магазину 🙂
Как вы видите из сообщения, следующего за этим — модерацию я победил. И даже выпустил первую версию сразу же! Но в чат сразу не скидывал, ибо занялся не менее важной вещью — названием!
Как оказалось — ну, и ожидалось — пультов в магазине многие десятки. И моё до глупости банальное 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 тоже на подходе.
Спасибо за поддержку!
Как вы видите из сообщения, следующего за этим — модерацию я победил. И даже выпустил первую версию сразу же! Но в чат сразу не скидывал, ибо занялся не менее важной вещью — названием!
Как оказалось — ну, и ожидалось — пультов в магазине многие десятки. И моё до глупости банальное 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 тоже на подходе.
Спасибо за поддержку!
App Store
Ruum Hub: Smart Remote App - App Store
Download Ruum Hub: Smart Remote by Sergey Bekharskiy on the App Store. See screenshots, ratings and reviews, user tips and more games like Ruum Hub: Smart…
❤14👍6
#статья дня
Злые Марсиане в очередной раз хвастаются!
Ладно, на самом деле — крайне забавный кейс. Заказчик сидел-сидел, пилил чота с Клодом, в итоге решился на заказную разработку. И ему выкинуло, что, мол, Злые Марсиане отлично подходят.
Как вам такое 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
Злые Марсиане в очередной раз хвастаются!
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
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9❤6
Как давно вы от души смеялись? А отдыхали?
Кажется, можно делать это чаще — даже вне зависимости от ответа. Да и лучше это всё совместить и поучаствовать в розыгрыше 10 и 20 тысяч рублей на🌍 Путешествиях.
Переходите в тг-канал команды Яндекс Вертикалей, чтобы посмотреть подробности.
Кажется, можно делать это чаще — даже вне зависимости от ответа. Да и лучше это всё совместить и поучаствовать в розыгрыше 10 и 20 тысяч рублей на
Переходите в тг-канал команды Яндекс Вертикалей, чтобы посмотреть подробности.
Please open Telegram to view this post
VIEW IN TELEGRAM
Telegram
Tech Community | Яндекс Вертикали
Расскажите нам, мы тоже посмеёмся. И 20 тыс. на Путешествиях подарим ❤
Наверняка у вас есть забавные истории или мемы, которые связаны с IT, работой продакта, разработчика, дизайнера или аналитика. Предлагаем ими поделиться и поучаствовать в розыгрыше промокодов…
Наверняка у вас есть забавные истории или мемы, которые связаны с IT, работой продакта, разработчика, дизайнера или аналитика. Предлагаем ими поделиться и поучаствовать в розыгрыше промокодов…
🤡11❤3🫡1
#инструмент дня
Наткнулся на шрифт Datatype.
Это вариативный шрифт, который превращает текст в… графики. Прямо через лигатуры. Пишешь что-то вроде:
{l:15,45,90,30,75,20,85,95} → получаешь линейный график
{b:30,70,50,90} → столбики
{p:65} → круговую диаграмму
То есть никакого SVG, canvas и прочего.
Сделано это через OpenType-лигатуры + вариативные оси. По сути, шрифт парсит жисон и подменяет символы на нужные глифы. Выглядит интересно.
Где это может быть полезно:
— быстрые прототипы графиков прямо в тексте
— документация
— демки и презентации
Минусы:
— копирование: вставится исходный текст, но не график (логично)
— доступность: скринридеры будут читать это как
— кастомизация сильно ограничена
Хотя как концепт — очень круто.
Пощупать можно тут:
https://franktisellano.github.io/datatype/
Где используем, котаны?
#font #diagram
Наткнулся на шрифт 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
👍14
This media is not supported in your browser
VIEW IN TELEGRAM
#статья дня
Кажется странным, что сначала в браузерах (браузере?) появились переходы между страницами aka View Transitions, и только сейчас — между элементами.
В Chrome 147, наконец, добавили element-scoped view transitions.
До этого если хотелось анимировать, например, сортировку списка, приходилось запускать document.startViewTransition() — даже если менялся один маленький блок.
Выглядело это примерно так:
Теперь можно запустить переход прямо на контейнере списка:
И в этот момент браузер работает только с этим куском DOM.
На практике это означает, что можно спокойно:
— анимировать список
— параллельно обновить, например, сайдбар
— и одно не будет цеплять другое
Сплошные плюсы.
Собственно, статья:
https://developer.chrome.com/blog/element-scoped-view-transitions
Что ещё в Chrome 147:
https://developer.chrome.com/blog/new-in-chrome-147
#chrome #view #transitions
Кажется странным, что сначала в браузерах (браузере?) появились переходы между страницами aka View Transitions, и только сейчас — между элементами.
В Chrome 147, наконец, добавили element-scoped view transitions.
До этого если хотелось анимировать, например, сортировку списка, приходилось запускать document.startViewTransition() — даже если менялся один маленький блок.
Выглядело это примерно так:
document.startViewTransition(() => {
list.sort(...)
render()
})
Теперь можно запустить переход прямо на контейнере списка:
listElement.startViewTransition(() => {
list.sort(...)
render()
})
И в этот момент браузер работает только с этим куском DOM.
На практике это означает, что можно спокойно:
— анимировать список
— параллельно обновить, например, сайдбар
— и одно не будет цеплять другое
Сплошные плюсы.
Собственно, статья:
https://developer.chrome.com/blog/element-scoped-view-transitions
Что ещё в Chrome 147:
https://developer.chrome.com/blog/new-in-chrome-147
#chrome #view #transitions
❤11
This media is not supported in your browser
VIEW IN TELEGRAM
#codepen дня
Ну что, кажется, настало то время, когда для стилизации радиокнопок и чекбоксов не нужно больше изгаляться с
Итак, смотрим на пример от Джона Кантнера: https://codepen.io/alinaki/pen/ExMXbqz
1. Для начала, обнуляем все браузерные стили и предположения браузера об внешнем виде радиокнопок вообще через
2. Я вам этого не говорил, но, технически, уже давно можно на поля ввода накладывать псевдоэлементы. Но не на select. Я всё хочу написать большой пост про реализацию select, пока вот так.
Благодаря этой возможности, собственно, можно стилизовать чекбокс как душе угодно:
3. Освободившиеся ресурсы мозга и тот факт, что теперь все элементы красиво вложены в label (как минимум, не нужны for и id), можно отправить на реализацию разных эффектов.
Например, проверить, есть ли лейбл с выделенным чекбоксом и подвинуть к нему рамку:
Обратите внимание, рамка — отдельный элемент, к ней обращаемся через селектор низлежащих соседей ~.
Не знаю, что меня больше впечатляет. Псевдоэлементы на полях ввода или :has.
И да, поддерживается везде.
#css #has #appearance #бородач
Ну что, кажется, настало то время, когда для стилизации радиокнопок и чекбоксов не нужно больше изгаляться с
input:checked+i. Это освобождает мозг и руки для более приятных вещей.Итак, смотрим на пример от Джона Кантнера: https://codepen.io/alinaki/pen/ExMXbqz
1. Для начала, обнуляем все браузерные стили и предположения браузера об внешнем виде радиокнопок вообще через
appearance: none.2. Я вам этого не говорил, но, технически, уже давно можно на поля ввода накладывать псевдоэлементы. Но не на select. Я всё хочу написать большой пост про реализацию select, пока вот так.
Благодаря этой возможности, собственно, можно стилизовать чекбокс как душе угодно:
::before, ::after, :checked::before, :checked::after... В целом, лично я бы обошёлся радиальным градиентом и одним псевдоэлементом.3. Освободившиеся ресурсы мозга и тот факт, что теперь все элементы красиво вложены в label (как минимум, не нужны for и id), можно отправить на реализацию разных эффектов.
Например, проверить, есть ли лейбл с выделенным чекбоксом и подвинуть к нему рамку:
label:nth-of-type(2):has(input[type="radio"]:checked) ~ .selection {
transform: translateY(100%);
}
Обратите внимание, рамка — отдельный элемент, к ней обращаемся через селектор низлежащих соседей ~.
Не знаю, что меня больше впечатляет. Псевдоэлементы на полях ввода или :has.
И да, поддерживается везде.
#css #has #appearance #бородач
👍14
В Сбере и Т-Банке менеджерил людей. Сейчас — Claude и OpenClaw. Не легче.
Егор у себя в канале рассказывает, как собирает AI-продукты соло — без команды, без кода руками.
Собрал MVP за 3 недели. Потом репозиторий вырос — и AI-агенты начали ошибаться на каждой задаче. Файл не туда положит, логику переиначит, чинит фикс в одном — ломает в трёх. Два дня правил за ним то, что он сам же и сломал, выглядел как идиот. 🫠
Дошло: дело не в модели. Дело в подходе.
В маленьком репо контекст помещался целиком — в большом агент стал работать по обрывкам: даёшь задачу, подтягивает 5 файлов, а нужны 12. Делает правдоподобно — а оно не работает.
Что понял:
• писать код — больше не работа. Работа — строить пайплайн, в котором AI не сбивается с задачи.
• контекст — это валюта. Каждый промпт = вопрос «что именно агент должен сейчас видеть, чтобы не угадывать».
Без ретуши — в @itsbulychev.
Егор у себя в канале рассказывает, как собирает AI-продукты соло — без команды, без кода руками.
Собрал MVP за 3 недели. Потом репозиторий вырос — и AI-агенты начали ошибаться на каждой задаче. Файл не туда положит, логику переиначит, чинит фикс в одном — ломает в трёх. Два дня правил за ним то, что он сам же и сломал, выглядел как идиот. 🫠
Дошло: дело не в модели. Дело в подходе.
В маленьком репо контекст помещался целиком — в большом агент стал работать по обрывкам: даёшь задачу, подтягивает 5 файлов, а нужны 12. Делает правдоподобно — а оно не работает.
Что понял:
• писать код — больше не работа. Работа — строить пайплайн, в котором AI не сбивается с задачи.
• контекст — это валюта. Каждый промпт = вопрос «что именно агент должен сейчас видеть, чтобы не угадывать».
Без ретуши — в @itsbulychev.
🤡11👎8❤1
#такое дня
Кто хочет поорать на монитор?
На меня не смотрите, я уже поорал.
Итак, насколько хорошо ты понимаешь даты в JavaScript?
Кто сказал Temporal API? Выйди вон из класса, дедушки разговаривают.
Итак, вашему вниманию квиз на пограничные условия в JS Date API.
Вперёд, делитесь результатами: https://jsdate.wtf/
У меня всё очень плохо🫠
#js #date #wtf #бородач
Кто хочет поорать на монитор?
На меня не смотрите, я уже поорал.
Итак, насколько хорошо ты понимаешь даты в JavaScript?
Кто сказал Temporal API? Выйди вон из класса, дедушки разговаривают.
Итак, вашему вниманию квиз на пограничные условия в JS Date API.
Вперёд, делитесь результатами: https://jsdate.wtf/
У меня всё очень плохо
#js #date #wtf #бородач
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3❤1
#статья дня
Висящие промисы как простой способ оборвать async-функцию
Зачем так делать?
Отмена через throw ненадёжна — её легко случайно поймать в try/catch, и код поедет дальше.
С висящим же промисом выполнение гарантированно останавливается.
Где это используется?
В пошаговых workflow, где функция должна завершиться на середине и продолжиться позже.
Оркестратор сохраняет прогресс и потом запускает её заново, пропуская выполненные шаги.
Минусы:
— такой код легко сломать случайно: забытый await или лишний Promise — и функция зависнет навсегда
— трудно дебажить: нет ошибки, нет стека, просто «ничего не происходит»
— не подходит для обычного приложения без оркестратора (сам по себе это тупик)
— может путать других разработчиков: выглядит как баг, а не как намеренное поведение
В общем, это способ явно остановить выполнение без исключений, но он требует дисциплины и инфраструктуры вокруг.
А, ну да. Сама статья: https://www.inngest.com/blog/hanging-promises-for-control-flow
#js #promise #halt
Висящие промисы как простой способ оборвать async-функцию
await new Promise(() => {})
Зачем так делать?
Отмена через throw ненадёжна — её легко случайно поймать в try/catch, и код поедет дальше.
try {
await handler()
} catch (e) {}
С висящим же промисом выполнение гарантированно останавливается.
Где это используется?
В пошаговых workflow, где функция должна завершиться на середине и продолжиться позже.
async function signup(user) {
await step("create-user", user)
if (!user.emailVerified) {
await new Promise(() => {}) // закончили здесь
}
await step("send-email", user)
}
Оркестратор сохраняет прогресс и потом запускает её заново, пропуская выполненные шаги.
Минусы:
— такой код легко сломать случайно: забытый await или лишний Promise — и функция зависнет навсегда
— трудно дебажить: нет ошибки, нет стека, просто «ничего не происходит»
— не подходит для обычного приложения без оркестратора (сам по себе это тупик)
— может путать других разработчиков: выглядит как баг, а не как намеренное поведение
В общем, это способ явно остановить выполнение без исключений, но он требует дисциплины и инфраструктуры вокруг.
А, ну да. Сама статья: https://www.inngest.com/blog/hanging-promises-for-control-flow
#js #promise #halt
👍4🫡1
23 мая Яндекс Вертикали и Авто.ру собирают разработчиков на Vertis JS, чтобы обменяться опытом, понетворкаться и зарядиться летним настроением — вне зависимости от погоды
В программе не только доклады: будут живые дискуссии, командный квиз, стенды с активностями и афтепати!
Please open Telegram to view this post
VIEW IN TELEGRAM
👎2
#фишка дня
А вы знали, что в GitHub Markdown не надо списки нумеровать самому?
будет буквально преобразовано в
И не надо париться, когда редактируешь.
P. S. оказывается, есть такая штука, как mdlint, и она на самостоятельную нумерацию очень даже ругается.
А вы знали, что в GitHub Markdown не надо списки нумеровать самому?
1. Раз
1. Два
1. Три
будет буквально преобразовано в
1. Раз
2. Два
3. Три
И не надо париться, когда редактируешь.
P. S. оказывается, есть такая штука, как mdlint, и она на самостоятельную нумерацию очень даже ругается.
🤩8❤1👍1🫡1