14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#инструмент дня
Раньше утилиты были максимально простыми. Открыл файловый менеджер, скопировал файл, переименовал, удалил. Или упаковал всё через PKZIP и перенёс дальше. Это были отдельные программы под конкретные действия, без лишней обвязки.
Потом появился GUI, и инструменты начали разрастаться. Простые вещи превратились в громоздкие приложения с окнами, кучей настроек и аккаунтами. То, что раньше было секундным действием, стало местом, куда нужно специально заходить.
Позже началось обратное движение к упрощению. Интерфейсы стали легче, а инструменты — более однофункциональными. Появились менюбарные и systray-утилиты, CLI-скрипты и маленькие инструменты под одну задачу. А как вам взрыв популярности командных палитр, как в Sublime Text и VS Code?
Я на этой волне решил сделать свой Color Picker, экранную пипетку: чтобы можно было брать цвет с любой точки экрана, собирать палитру и экспортировать в разных форматах. Получилась небольшая, но удобная утилита, которой уже даже пользуюсь. Вот: https://github.com/bekharsky/clrpkr
И тут в разговоре мелькнула тема MCP (Model Context Protocol). Я подумал: а ведь таким вещам уже не обязательно жить как отдельным приложениям. Их можно вызывать прямо там, где работаешь — в Cursor, Claude, GitHub Copilot Workspace или VS Code.
В итоге я вынес свой пикер в MCP tool: описал входы (координаты или изображение) и выходы (цвет, палитра, export), убрал интерфейс и оставил только функцию, которую можно вызывать напрямую.
Пришлось повозиться, чтобы нормально отображалась картинка (swatch) выбранного цвета и чтобы всё стабильно работало, но в итоге получилось ровно то, что хотелось. Здесь, конечно, потоковая сущность общения с моделью не очень к месту — чат может показать PNG только в Base64, а эта запись получается очень длинная.
Получилось классно: окно само свернется, само развернется. Ну и запустить как обычно никто не мешает.
Utilities are dead. Long live utilities.
#mcp #llm #color
#фишка дня
Итак, все мы знаем, что при добавлении скроллбара (если этот скроллбар, конечно, виден) у нас происходит сдвиг по фазе полей справа.
Ну или слева, если вы араб.
Но это же можно исправить! Используя правило 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 #бородач
Захотелось какой-нибудь лёгкий холивар устроить… А подходящее для этого место, кстати, есть 🚀
19 мая AvitoTech собирает у себя в офисе фронтендеров на два круга открытых дискуссий на самые разные темы. Вот некоторые из них:
— Дизайн-системы в эпоху AI.
— Микросервисы во фронтенде.
— Рост в тимлида и страхи, связанные с ним.
— T-shape, мода на фулстек и важность бэкенда для фронтенда.
Хороший способ влиться или просто пообщаться с комьюнити! Закончится вечер, к слову, афтерпати на веранде.
Зарегаться можно тут!
В CodeRun встроили AI-тренера на SourceCraft
CodeRun — это онлайн-тренажер Яндекса для разработчиков: решаешь задачи, качаешь скиллы и готовишься к техсобесам. Теперь в нем появился AI-помощник: он не напишет код за тебя, но проведёт от намека к инсайту, не лишая права на ошибку. Вместо готового решения ты получаешь:
— прогрессивные подсказки;
— тест-кейсы для проверки решения, включая краевые случаи;
— разбор примеров из условия.
Чтобы попробовать, заходи в задачи на CodeRun и открывай вкладку «Кодерун AI». Пока фича в бета-режиме, нужна авторизация, а лимит — 20 запросов в сутки.
Замечал странную штуку: дел не так уж много, но любое – как будто через сопротивление?
Не то чтобы лень. Просто не делается и все тут! Зато видосики на Ютубе залетают на ура...
Попался годный разбор, советую посмотреть, если тоже чувствуешь, что превращаешься в апатичного зомби 👉🏼 /channel/Manifestans
Мысль, которая зашла: когда перестаешь понимать "чего хочу Я", даже нормальная жизнь ощущается, как каторга.
Кликай сюда, чтобы разобраться, что с тобой происходит и как снова начать испытывать ощущение, что ты живешь, а не существуешь.
🤖🤖🤖🤖🤖🤖🤖🤖🤖🤖
🤖🤖🤖🤖🤖🤖🤖🤖🤖🤖
🤖🤖🤖🤖🤖🤖🤖🤖🤖🤖
🤖🤖🤖🤖🤖🤖🤖🤖🤖🤖
🤖🤖🤖🤖🤖🤖🤖🤖🤖🤖
🤖🤖🤖🤖🤖🤖🤖🤖🤖
🤖🤖🤖🤖🤖🤖🤖🤖🤖
🤖🤖🤖🤖🤖🤖🤖🤖🤖🤖
🤖🤖🤖🤖🤖🤖🤖🤖🤖🤖
🤖🤖🤖🤖🤖🤖🤖🤖🤖🤖
Можно бесконечно ходить на самые разные митапы, знакомиться с людьми… И совсем не видеть эффекта
А всё потому, что всем нам нужна не встреча на 3 часа, а постоянное и активное коммьюнити, чтобы обсуждать наболевшее. Именно это сейчас хорошо получается у AvitoTech — регулярно у них в канале видим анонсы интересных встреч, отдельных подкастов для SRE, Go-разработчиков, тим и техлидов и какой-то бесконечный поток прикладных статей и советов.
Если находили ещё что-то похожее, делитесь в комментах!
Реклама. Рекламодатель ООО «Авито Тех». erid: 2VtzqurNidV
#фишка дня
А вы знали, что в GitHub Markdown не надо списки нумеровать самому?
1. Раз
1. Два
1. Три
1. Раз
2. Два
3. Три
#статья дня
Висящие промисы как простой способ оборвать async-функцию
await new Promise(() => {})
try {
await handler()
} catch (e) {}
async function signup(user) {
await step("create-user", user)
if (!user.emailVerified) {
await new Promise(() => {}) // закончили здесь
}
await step("send-email", user)
}
В Сбере и Т-Банке менеджерил людей. Сейчас — Claude и OpenClaw. Не легче.
Егор у себя в канале рассказывает, как собирает AI-продукты соло — без команды, без кода руками.
Собрал MVP за 3 недели. Потом репозиторий вырос — и AI-агенты начали ошибаться на каждой задаче. Файл не туда положит, логику переиначит, чинит фикс в одном — ломает в трёх. Два дня правил за ним то, что он сам же и сломал, выглядел как идиот. 🫠
Дошло: дело не в модели. Дело в подходе.
В маленьком репо контекст помещался целиком — в большом агент стал работать по обрывкам: даёшь задачу, подтягивает 5 файлов, а нужны 12. Делает правдоподобно — а оно не работает.
Что понял:
• писать код — больше не работа. Работа — строить пайплайн, в котором AI не сбивается с задачи.
• контекст — это валюта. Каждый промпт = вопрос «что именно агент должен сейчас видеть, чтобы не угадывать».
Без ретуши — в @itsbulychev.
#статья дня
Кажется странным, что сначала в браузерах (браузере?) появились переходы между страницами aka View Transitions, и только сейчас — между элементами.
В Chrome 147, наконец, добавили element-scoped view transitions.
До этого если хотелось анимировать, например, сортировку списка, приходилось запускать document.startViewTransition() — даже если менялся один маленький блок.
Выглядело это примерно так:
document.startViewTransition(() => {
list.sort(...)
render()
})
listElement.startViewTransition(() => {
list.sort(...)
render()
})
#инструмент дня
Наткнулся на шрифт 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
#статья дня
Злые Марсиане в очередной раз хвастаются!
Making your site visible to LLMs: 6 techniques that work, 8 that don't
НДС 0% для твоего продукта
Большинство небольших IT-команд думают, что реестр российского ПО - это для корпоратов с юристами и штатом 300 человек. Но это не так. Если у тебя есть:
– мобильное приложение
– SaaS продукт
– B2B сервис для бизнеса
– AI сервис / бот / автоматизация
…то вполне возможно, что продукт можно включить в реестр российского ПО. И вот зачем это делать:
– НДС 0% (и для НДС 5% на УСН тоже)
– возможность работать с госзаказчиками
– репутация: “реестровое ПО” звучит убедительнее, чем “мы стартапчик”.
Если у тебя уже есть продукт и ты хочешь понять, можно ли включиться в реестр - напиши нам.
Разберем бесплатно твою ситуацию, скажем честно:
– можно зайти или нет
– что нужно доработать
– сколько времени займет
– какие выгоды ты получишь.
Пиши или переходи на сайт.
Пока одни думают “это не для нас”, другие уже экономят деньги.
А у Mad CSS офигенский мерч оказался между прочим :)
Читать полностью…
Найти работу фронтендера трудно? Ты просто не там ищешь!
@job_webdev – огромная база вакансий фронтендеров, пополняющаяся ежедневно
Не трать время зря! Подписывайся и ищи заказы уже сейчас🧑💻
Совет на ближайшие годы — изучайте ВАЙБ-КОДИНГ
ИИ уже пишет код, чинит баги, генерирует тесты, документацию и помогает запускать продукты быстрее, чем это делали классические команды разработки. И это уже не "будущее когда-нибудь", а реальность, которая меняет рынок уже сегодня
И те, кто научится вайбкодить сейчас, будут увереннее конкурировать на рынке и зарабатывать больше тех, кто по-прежнему делает всё вручную.
Стартовать с нуля поможет канал Вайб-кодинг. Там ребята круглосуточно мониторят более 320 российских и зарубежных источников и публикуют только главное: релизы, инструменты, гайды, курсы и практические кейсы.
Подписывайтесь, нас уже 35 тысяч: @vibecoding_tg
#такое дня
Когда в следующий раз будете ворчать на коллегу за PR в 200 строк — вспомните это: https://github.com/oven-sh/bun/pull/30412
Ментейнеры Bun, конечно, могут сколько угодно рассказывать нам о бессонных ночах в попытке отдебажить утечку памяти в Zig (будучи крупнейшим проектом на этом языке), но без этих ночей ничего бы не вышло.
Штош.
P. S. кстати, почитайте, что ответили авторы Zig о недавнем «ИИ-форке», который представили Bun. Там прям интересно.
#rust #zig
#инструмент дня
Надоело каждый раз выходить из уютной консоли и открывать caniuse.com, чтобы посмотреть, с каких браузеров поддерживаются сабгриды?
Ой, только не говорите, что я один тут верстаю вслепую.
Вашему вниманию Bramus Van Damme и его caniuse-cli: bramus/caniuse-cli" rel="nofollow">https://www.npmjs.com/package/@bramus/caniuse-cli
$ caniuse viewport-units
$ caniuse "viewport units"
$ caniuse @property
#заметка дня
Ли Робинсон — разработчик и тренер в Cursor — поделился практическими советами о том, как выделиться среди сотен кандидатов при подаче на инженерную позицию.
Как сделать своё инженерное резюме заметным (глазами человека, который смотрит сотни резюме):
1. Резюме должно быть на одну страницу. Если нужно больше — добавьте ссылку на сайт. Не нужно по 10+ пунктов на каждую работу.
2. Вы сразу будете выделяться среди >90% кандидатов, если у вас есть персональный сайт с продуманным содержанием.
3. Если вы указываете свой X (Twitter), возможно, стоит почистить посты? Звучит очевидно, но люди публикуют всякое.
4. Обязательно добавьте GitHub. И, пожалуйста, без профиля в стиле MySpace с кучей бейджей и картинок — я хочу видеть код и ваши реальные навыки.
5. Адаптируйте отклик под компанию. Для стартапа курсы из университета менее важны. Для FAANG — могут помочь пройти ATS.
6. Удивительно, но многие резюме вообще не упоминают AI или агентов. Разработка меняется, и от вас ожидается понимание работы с AI. Это должно быть отражено в проектах и резюме.
7. Относитесь к LinkedIn серьёзно. Да, разработчики чаще сидят в X, но внутри компаний всё ещё пересылают именно LinkedIn.
8. Покажите свою индивидуальность: интересы, вкус, мышление. Книги, тексты, фильмы — всё, что раскрывает вас как человека. В конце концов, люди хотят работать с теми, кто им интересен и приятен.
9. Не используйте AI для написания резюме или сопроводительного письма. Это очень заметно, особенно в AI-компаниях. Можно использовать для идей, но писать — самому.
10. Не добавляйте фото в резюме. Лучше разместите его на внешних ссылках.
11. Качество важнее количества. Лучше 3 сильных проекта, чем 27 поверхностных AI-поделок.
Помните: рекрутеры просматривают сотни и тысячи откликов. Они не будут тратить 20 минут на каждый. Уберите лишнее и переходите к сути.
#resume #cv
#инструмент дня
Вот что происходит, когда компания годами игнорирует запросы сообщества и вместо этого штампует один AI-инструмент за другим.
Rebased — новый открытый графический Git-клиент, который быстро набирает обороты.
Все, кто работал с IDE от JetBrains, знают — их Git-инструменты долгое время считались одними из самых удобных. Особенно Diff.
Но пока рынок уходил в сторону AI-разработки, JetBrains топтались на месте — и многие пользователи начали искать альтернативы.
И вот появляется разработчик, который берет IntelliJ Community Edition (open source), вырезает оттуда всё, связанное с языками программирования, оставляет только Git — и собирает из этого отдельный продукт.
Так и появился Rebased.
Для тех, кто привык к экосистеме JetBrains — интерфейс будет знакомым.
В итоге:
• Полностью open source (Apache 2.0)
• Продвинутый Diff / Code Review (на базе JetBrains)
• Полноценные VCS-инструменты: Commit, Git Log, ветки
• Интерактивный rebase + визуальное решение конфликтов
• Полнотекстовый поиск
• Встроенный терминал (с вкладками)
• Нативная поддержка Git Worktree
• Те же хоткеи и UX, что в IntelliJ
Минус: потребляет больше памяти, чем другие клиенты. Но всё ещё заметно легче полноценной IDE.
На фоне быстрого развития agentic-разработки, удобный и привычный Git-клиент это очень важно, котаны.
GitHub: https://github.com/DetachHead/rebased
Скрины отсюда.
#git #ide #jetbrains
#статья дня
Scroll-driven animations уже давно есть в Chrome, и за последний год вокруг них накопилось много примеров — у того же Bramus Van Damme были подробные демки с view-timeline и разными вариантами ranges. Теперь появился ещё один большой разбор от самого Джоша Комо: https://www.joshwcomeau.com/animation/scroll-driven-animations/
Как всегда, это интерактивная документация по animation-timeline.
Посмею себе напомнить ключевую идею процесса: прогресс анимации берётся не из времени (`animation-duration`), а из положения элемента относительно viewport или scroll-контейнера. В статье это сразу показывается на примере с progress bar, где значение анимации напрямую связано со скроллом страницы.
Дальше он последовательно вводит scroll-timeline и view-timeline. Первый вариант привязывается к прокрутке контейнера, второй — к тому, как конкретный элемент входит и выходит из viewport. Есть наглядные демо, где один и тот же @keyframes ведёт себя по-разному в зависимости от выбранного таймлайна.
Отдельно разбирается animation-range. На интерактивных примерах видно, как entry, exit, cover, contain влияют на диапазон, в котором проигрывается анимация.
Есть демонстрации с несколькими timeline’ами и синхронизацией анимаций, где один scroll-прогресс управляет сразу несколькими свойствами.
Практически в каждом блоке есть интерактив: можно скроллить вложенные контейнеры и сразу видеть, как меняется поведение.
Документация: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline
Примеры от Google: https://developer.chrome.com/docs/css-ui/scroll-driven-animations/
Из нюансов — Safari всё ещё отстаёт: часть API отсутствует или работает неполно, так что без фоллбеков пока не обойтись.
#css #scroll
🏄♂️ Приближаем лето всем фронтенд-сообществом
23 мая Яндекс Вертикали и Авто.ру собирают разработчиков на Vertis JS, чтобы обменяться опытом, понетворкаться и зарядиться летним настроением — вне зависимости от погоды🌴
♦️Приходите обсудить, как прокачать AI-агентов под реальные задачи и тестировать на телефоне без единого деплоя. Ребята из разных сервисов поделятся, как их команды выстраивают процессы, которые экономят время и снижают риски в продакшене.
В программе не только доклады: будут живые дискуссии, командный квиз, стенды с активностями и афтепати!
🔖 Смотрите подробности и регистрируйтесь. Встречаемся только в офлайне, количество мест ограничено.
#такое дня
Кто хочет поорать на монитор?
На меня не смотрите, я уже поорал.
Итак, насколько хорошо ты понимаешь даты в JavaScript?
Кто сказал Temporal API? Выйди вон из класса, дедушки разговаривают.
Итак, вашему вниманию квиз на пограничные условия в JS Date API.
Вперёд, делитесь результатами: https://jsdate.wtf/
У меня всё очень плохо 🫠
#js #date #wtf #бородач
#codepen дня
Ну что, кажется, настало то время, когда для стилизации радиокнопок и чекбоксов не нужно больше изгаляться с 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%);
}
Весна — идеальное время, чтобы освоить и обновить навыки по выгодной цене.
При оплате курсов Яндекс Практикума до 30 апреля вы получите:
— 5 дополнительных курсов, подобранных специально под вашу программу
— набор из 5 электронных книг по саморазвитию
А также — скидку 15% для карьерного роста.
Начните сейчас — и уже к осени вы значительно прокачаете свои навыки и сможете уверенно выйти на рынок в пик сезона найма.
Как давно вы от души смеялись? А отдыхали?
Кажется, можно делать это чаще — даже вне зависимости от ответа. Да и лучше это всё совместить и поучаствовать в розыгрыше 10 и 20 тысяч рублей на 🌍Путешествиях.
Переходите в тг-канал команды Яндекс Вертикалей, чтобы посмотреть подробности.
Да, кстати! Я же совсем забыл написать обновление по пульту и магазину 🙂
Как вы видите из сообщения, следующего за этим — модерацию я победил. И даже выпустил первую версию сразу же! Но в чат сразу не скидывал, ибо занялся не менее важной вещью — названием!
Как оказалось — ну, и ожидалось — пультов в магазине многие десятки. И моё до глупости банальное 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 тоже на подходе.
Спасибо за поддержку!
#статья дня
Когда пакет долго живёт, у него очень легко появляется один большой 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
#фишка дня
Надоело угадывать высоту строки, чтобы текст стал высотой ровно в прописную букву? Say no more!
line-height: 1cap;
#фишка дня
У скроллящегося сайдбара можно сделать 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)
);
}