htmlshit | Unsorted

Telegram-канал htmlshit - Будни разработчика

14544

Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat

Subscribe to a channel

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

#фишка дня

Есть пропозал, который предлагает добавить в canvas возможность напрямую использовать результат рендера DOM-элемента.

Вот: https://wicg.github.io/html-in-canvas/

Он вводит метод drawElementImage(): ты передаёшь HTML-элемент, браузер сам делает для него layout, применяет стили и рассчитывает текст, а затем этот уже готовый результат можно рисовать в canvas.

В отличие от текущих подходов вроде html2canvas, здесь не происходит пересборки DOM в изображение вручную. Используется нативный рендеринг браузера, поэтому сохраняются точность текста, layout и поведение, которое уже есть в DOM.

В Chrome это уже можно попробовать через флаг:
chrome://flags/#canvas-draw-element

Собственно, это уже вполне себе рабочая реализация!

А в качестве примера сегодня — библиотека Liquid DOM. Ага, очередной Liquid Glass! Только очень красивый и рабочий:
https://github.com/AndrewPrifer/liquid-dom

Демо: https://liquid-dom-showcase.vercel.app/

Потрясающая штука получается. И примеров использования уже полно! Но, как обычно, ждём другие браузеры :(

#canvas #webgl

Читать полностью…

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

#фишка дня

Я не думал, что доживу, но, похоже, скоро можно будет вписывать текст в контейнер без хаков с vw/vh и даже без скриптов.

Сразу пример (нужны флаги! ниже): https://codepen.io/cssgrid/pen/emBZzPL

Фича называется text-fit. Это часть экспериментального CSS (обсуждается в рамках CSS Text / Sizing), и идея тут очевидна: вписать текст в контейнер.

Вот спека в процессе: https://drafts.csswg.org/css-text-4/#text-fit-property

Пока это всё работает только за флагом chrome://flags → Experimental Web Platform features.

Но уже хорошо же!

#css #text #fit

Читать полностью…

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

Поздравляем, вы на 1 шаг ближе к работе мечты 🥳

Осталось только прочитать этот пост, подписаться на канал и откликнуться на вакансию 😉

Avito Career* — место, где Авито делится актуальными вакансиями и стажировками для бэкенд-разработчиков.

Подписывайтесь, чтобы найти ту самую работу ✨

*карьера

Читать полностью…

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

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

Раньше утилиты были максимально простыми. Открыл файловый менеджер, скопировал файл, переименовал, удалил. Или упаковал всё через 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. Три


И не надо париться, когда редактируешь.

P. S. оказывается, есть такая штука, как mdlint, и она на самостоятельную нумерацию очень даже ругается.

Читать полностью…

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

#статья дня

Висящие промисы как простой способ оборвать 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

Читать полностью…

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

В Сбере и Т-Банке менеджерил людей. Сейчас — 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()
})


И в этот момент браузер работает только с этим куском DOM.

На практике это означает, что можно спокойно:
— анимировать список
— параллельно обновить, например, сайдбар
— и одно не будет цеплять другое

Сплошные плюсы.

Собственно, статья:
https://developer.chrome.com/blog/element-scoped-view-transitions

Что ещё в Chrome 147:
https://developer.chrome.com/blog/new-in-chrome-147

#chrome #view #transitions

Читать полностью…

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

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

Наткнулся на шрифт 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


Ладно, на самом деле — крайне забавный кейс. Заказчик сидел-сидел, пилил чота с Клодом, в итоге решился на заказную разработку. И ему выкинуло, что, мол, Злые Марсиане отлично подходят.

Как вам такое 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

Читать полностью…

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

Вебинар «Быстрый запуск AI-сценариев с vGPU»

21 мая эксперт VK Tech в прямом эфире покажет, как использовать облачные GPU, чтобы сэкономить на аренде полного объема ресурсов GPU.

Регистрируйтесь, чтобы узнать:
— какие сценарии бизнеса закрывают GPU VK Cloud,
— как выбрать видеокарту или кластер GPU под свою задачу,
— когда аренда доли GPU выгоднее целой карты,
— где прячется реальная выгода при использовании vGPU.

Во время вебинара мы развернем виртуальную машину с vGPU и покажем, какую пользу бизнесу могут принести эмбеддинговая модель и модель высокоэффективного распознавания текста и анализа документов.

Вы узнаете, как быстро поднять виртуальную машину, выбрать профиль vGPU под задачу и подготовить среду для ML-работы.

Регистрируйтесь и смотрите трансляцию 21 мая в 17:00.

Зарегистрироваться

Читать полностью…

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

#заметка дня

А помните (конечно же помните!) как мы с вами обсуждали CSS Custom Highlight API для реализации подсветки кода?

Ну вот же, положила: /channel/htmlshit/2715

Так вот, а почему бы не объединить подсветку CSS с поиском по тексту? Ну в самом деле, интересно же, как это реализовано, например, в текстовых редакторах или браузерах при поиске по странице. Хотя бы на минимальном уровне.

А реализовано это через, простите, обход дерева!

Алгориииииитмы

Ладно, нам не придётся самим писать обходчик, он уже имеется! Вот: https://developer.mozilla.org/en-US/docs/Web/API/Document/createTreeWalker

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

Ну в нашем случае всё просто: NodeFilter.SHOW_TEXT — ищем по текстовым нодам, словам.

Ну а дальше всё просто: проверяем регуляркой на совпадения и запускаем подсветку. Уж это за нас теперь может и браузер делать: https://codepen.io/alinaki/pen/zxvPbRJ

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

Пользуемся, котаны.

#css #highlight #бородач

Читать полностью…

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

#статья дня

GitHub выкатил отличный пост о том, как они ускоряли рендеринг диффов в пулл-реквестах (исконно русские слова) — и внезапно выяснили, что браузеру становится плохо, когда в PR десятки тысяч строк.

Вот ссыль сразу: https://github.blog/engineering/architecture-optimization/the-uphill-climb-of-making-diff-lines-performant/

Главная проблема оказалась в том, что каждая строка diff-а была маленьким React-стартапом: 8–13 компонентов, куча DOM-нод и отдельные event handlers почти на всё подряд.

Старый подход выглядел примерно так:


<DiffLine>
<LineNumber />
<SyntaxHighlight>
<Token />
<Token />
</SyntaxHighlight>
</DiffLine>

И конечно же:

<div
onMouseEnter={...}
onMouseLeave={...}
onClick={...}
/>


Когда таких строк 10 000+, Chrome начинает потреблять память не в себя.

А дальше случилось прекрасное: GitHub героически переоткрыл event delegation — технику, которую jQuery нормально объяснял ещё лет 15 назад (не воспринимайте буквально, автоматическая делегация в реакте была и есть). Оказалось, что один обработчик событий на контейнер внезапно быстрее, чем 30 тысяч onMouseEnter на каждую строку. Кто бы мог подумать.

Новый вариант:

<table onMouseMove={handleHover}>
<tr data-line="42">
<td>const value = 1;</td>
</tr>
</table>
function handleHover(e) {
highlight(e.target.dataset.line)
}

В итоге GitHub выкинул 74% React-компонентов, почти вдвое снизил потребление памяти и ещё удалил пару лишних <code>-тегов из каждой строки, потому что 20 000 ненужных DOM-элементов — это всё ещё 20 000 ненужных DOM-элементов.

Мораль истории максимально простая: abstraction is not free. Иногда один обработчик событий и туповатый плоский код работают лучше, чем архитектура мечты из 400 reusable-компонентов, custom hooks и трёх уровней composition.

#github #react #virtualization

Читать полностью…

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

Совет на ближайшие годы — изучайте ВАЙБ-КОДИНГ

ИИ уже пишет код, чинит баги, генерирует тесты, документацию и помогает запускать продукты быстрее, чем это делали классические команды разработки. И это уже не "будущее когда-нибудь", а реальность, которая меняет рынок уже сегодня

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

Стартовать с нуля поможет канал Вайб-кодинг. Там ребята круглосуточно мониторят более 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


Имеется автокомплит для zsh.

Ну, консольные маньяки, перепись!

P. S. Скилл для Клода есть же уже?)

#cli #caniuse #бородач

Читать полностью…

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

#заметка дня

Ли Робинсон — разработчик и тренер в 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%);
}


Обратите внимание, рамка — отдельный элемент, к ней обращаемся через селектор низлежащих соседей ~.

Не знаю, что меня больше впечатляет. Псевдоэлементы на полях ввода или :has.

И да, поддерживается везде.

#css #has #appearance #бородач

Читать полностью…

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

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

При оплате курсов Яндекс Практикума до 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 тоже на подходе.

Спасибо за поддержку!

Читать полностью…
Subscribe to a channel