#заметка дня

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

В CodeRun встроили AI-тренера на SourceCraft

CodeRun — это онлайн-тренажер Яндекса для разработчиков: решаешь задачи, качаешь скиллы и готовишься к техсобесам. Теперь в нем появился AI-помощник: он не напишет код за тебя, но проведёт от намека к инсайту, не лишая права на ошибку. Вместо готового решения ты получаешь:

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

Чтобы попробовать, заходи в задачи на CodeRun и открывай вкладку «Кодерун AI». Пока фича в бета-режиме, нужна авторизация, а лимит — 20 запросов в сутки.

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

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

Ой, только не говорите, что я один тут верстаю вслепую.

Вашему вниманию Bramus Van Damme и его caniuse-cli: https://www.npmjs.com/package/@bramus/caniuse-cli

$ caniuse viewport-units
$ caniuse "viewport units"
$ caniuse @property

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

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

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

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

#такое дня

Когда в следующий раз будете ворчать на коллегу за PR в 200 строк — вспомните это: https://github.com/oven-sh/bun/pull/30412

Ментейнеры Bun, конечно, могут сколько угодно рассказывать нам о бессонных ночах в попытке отдебажить утечку памяти в Zig (будучи крупнейшим проектом на этом языке), но без этих ночей ничего бы не вышло.

Штош.

P. S. кстати, почитайте, что ответили авторы Zig о недавнем «ИИ-форке», который представили Bun. Там прям интересно.

#rust #zig

#фишка дня

Итак, все мы знаем, что при добавлении скроллбара (если этот скроллбар, конечно, виден) у нас происходит сдвиг по фазе полей справа.

Ну или слева, если вы араб.

Но это же можно исправить! Используя правило 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 #бородач

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

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

#статья дня

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

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

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

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

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

*карьера

#заметка дня

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

Ну вот же, положила: https://t.me/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 #бородач

#фишка дня

Я не думал, что доживу, но, похоже, скоро можно будет вписывать текст в контейнер без хаков с 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

#фишка дня

Есть пропозал, который предлагает добавить в 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

Не удержался.

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

В прошлом году я уже показывал, как удаление фона с изображений постепенно переезжает прямо в браузер:
https://t.me/htmlshit/3797

Тогда речь шла про Transformers.js и WebGPU — мол, многие ML-задачи уже спокойно работают локально, без серверов и сервисов.

Теперь вот наткнулся на removerized:
https://github.com/yossTheDev/removerized

Это открытый AI image toolkit, который целиком работает в браузере.

Под капотом — ONNX Runtime Web, WebGPU и client-side inference. То есть модели запускаются прямо у вас на устройстве, без отправки изображений на сервер.

Из того, что есть сейчас:
— удаление фона
— апскейл изображений
— пакетная обработка
— офлайн-режим
— кэширование моделей
— расширенные настройки

А главное, работает.

Демо:
https://getremoverized.yoss.pro/removerized

Да, кстати. ONNX Runtime Web — это браузерный рантайм для запуска ML-моделей через ONNX.

Если очень грубо: штука, которая позволяет запускать нейронки прямо в браузере через WebGPU/WebAssembly, без Python, CUDA и отдельного бэкенда.

Сайт:
https://onnxruntime.ai/docs/get-started/with-javascript/web.html

GitHub:
https://github.com/microsoft/onnxruntime

#ai #opensource #webgpu #ml

Так, не прошло и месяца (на самом деле, конечно, прошло), а я выкатил небольшое будущее обновление к пульту!

Итак, теперь я поддерживаю Android/Google TV. К сожалению, оттестировано только на паре телевизоров Sony, так что я буду благодарен любым инсайтам.

Пришлось попотеть, потому что вместо протокола SSDP телевизоры ищутся по mDNS. А это значит никакого широковещания, только мультикаст. А это значит, письмо в Apple с разъяснениями, получение разрешения, обновление конфига сборкию...

Общение с телевизором тоже происходит оригинально — через бинарный формат protobuf, всё как у взрослых.

В общем, у кого есть айфоны и телевизоры на Android TV —
ссылка на TestFlight: https://testflight.apple.com/join/XXPPYAHN

У кого Android-телефоны, могу скинуть APK 🙂

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

Спасибо, котаны!