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

#инструмент дня Я не знаю, насколько для вас знакома картина, как на иллюстрации, но всё же. Итак, что там изображено? Там изображён лог вывода терминала. То есть, условно, запустил я 100 тестов, чтобы проверить их стабильность. И вывод упавших тестов положил в файл. Если бы я просто в терминале за этим наблюдал — я бы получил подсвеченный текст: ошибки, результат тестирования, общий вывод консоли. И это всё обозначается так называемыми escape sequence aka «управляющая последовательность». Управляющая посредственность, гг Ну вам они знакомы по, например, регулярным выражениям и командам терминала: «заэскейпить кавычки». Вот так: "\"". Только в терминале это управляет в том числе цветом и выглядит чуть сложнее. Короче, понадобилось мне эти логи проанализировать. Агент-то тоже работает, но и самому надо. И в VS Code оно открывается, как на картинке. И решение оказалось простым! Расширение ANSI Colors. Открыли файл, выбрали ANSI Preview в командной панели — и вы великолепны. Очень удобно. #vscode #ansi #escape

#новость дня CENTI CONF: Frontend Day — 21 ноября, Москва Остановите всё: офлайн-день фронтенда, который стоит посетить. Centicore Group собирает frontend- и Angular-специалистов — настоящих, с опытом на реальных проектах. Что будет — Разборы реальных кейсов от ведущих разработчиков. — Неформальное общение со спикерами в лаунж-зонах и на afterparty. — Темы: генеративные UI, Computer Science во фронтенде, сигналы в Angular, и честное резюме без «подкруток». Для кого Для frontend- и Angular-разработчиков уровня middle, middle+, senior, teamlead. А также всех, кто хочет вырасти в профессии и поговорить с людьми, которые реально пишут код. 📍 Москва, ул. Новодмитровская, д. 1, стр. 23 🕥 21 ноября 2025 г., 10:30 (МСК) 💸 1000 ₽ 🔗 https://events.centicore.ru

#фишка дня Как заставить элемент изменять свою ширину... ступенчато? Ну, например, вам нужно, чтобы шахматная сетка при любых условиях оставалась цельной. И сегодня у нас аж несколько вариантов, как этого добиться. 1. От Аны Тюдор: https://codepen.io/thebabydino/pen/zYbZpBq Используем функцию модуля:

    
        
width: calc(95vmin + -1*mod(95vmin, 15px));
{}
    

Но вот беда, в Chrome модуль пока не поддерживается... но не унываем! Есть ещё два варианта от Темани Афифа aka CSS Challenges. 2. Эффективное значение функции выше это, буквально, округление. Но так и такая функция в CSS имеется! Как-то так:

    
        
min-width: round(95vmin,15px);
{}
    

Пример: https://codepen.io/alinaki/pen/VwRMpPY И раньше это не работало в Chrome, до версии 125. Просто потому что ребята их Chrome решили сделать сразу тригонометрию, забыв про простую арифметику. Ну и ещё вариант... 3. CSS Grid конечно же: https://codepen.io/t_afif/pen/KKEXwmR И секрет будет в правиле:

    
        
grid-template-columns: repeat(auto-fill, 15px);
{}
    

Всем шахмат, котаны :) #css #trick #math #бородач

#инструмент дня Я бы сказал, #офигеть дня. Возможно, вы помните этот пример, его во многих пабликах презентовали как «ад разработчика». Так вот. Вы не поверите. Его смогли запрограммировать! Давайте я сразу пруф дам, а потом уже к делу и о чём я вообще. Вот ссылка, можно подёргать. Итак, инструмен, который помог создать это творение, называется TypeGPU. Что он делает? Он конвертирует TypeScript в GLSL. Да, в язык описания шейдеров! Точнее, в WGSL — WebGPU Shading Language. Ну то есть понимаете, что происходит? Вы описываете логику так, как привыкли на TypeScript — с некоторыми особенностями шейдеров (например, дикая параллельность вычислений) — и получаете на выходе разделённый на логику и шейдеры код! Можно начать с простого примера градиента, чтобы хоть немного в это въехать. Но, конечно, это не за один вечер :) Я обожаю такие проекты. Стирают все грани и вдохновляют. #typescript #webgpu #webgl #glsl #wgsl

Ваша история в IT начинается в Авито 🚀 Хотите расти в разработке — приходите на оплачиваемую стажировку в Авито. Мы ищем будущих специалистов в направлениях Frontend, Backend, QA и Android. Вы будете работать над продуктами, которыми ежедневно пользуются миллионы людей, и прокачивать навыки с помощью: ➡️ наставника — подскажет, как мыслить в процессе решения задач; ➡️ комьюнити стажёров — всегда рядом, чтобы обсудить задачи и поддержать; ➡️ корпоративных курсов, библиотек и баз знаний — всё, чтобы развиваться быстрее. Выберите два направления — основное и запасное. Если не получится попасть в первое, сможете пройти отбор на второе при наличии мест. Условия: ➡️ зарплата и корпоративный ноутбук, ➡️ формат — офис, удалёнка или гибрид, ➡️ от 25 часов в неделю, ➡️ продолжительность — 9 месяцев, ➡️ компенсация питания, консультации с психологами и юристами, ➡️ после стажировки — возможность остаться в команде, если покажите крутой результат. 📌 Регистрация открыта до 12 ноября. Подать заявку можно по ссылке.

#такое дня Вчера Apple выкатила сорсмапы своей новой веб-версии AppStore прямо в продакшен. И, естественно, оно утекло. Естественно, репа уже грохнута. Естественно, у меня есть копия. И вообще, её довольно интересно смотреть! Да и клоны вовремя успели создать, например этот репозиторий. Но для начала, чтобы этот пост не был таким уж бесполезным, слито всё было с помощью Chrome-расширения Save All Resources. Как минимум, мы знаем теперь, что оно работает! Итак, что же интересного в исходниках? Ну, для начала, это Svelte. Неожиданно? Да не сказать. Apple любит не-мейнстримовые фреймворки (да-да, фанаты Svelte, двух фреймворков достаточно). Начинали они со SproutCore в то время, когда везде был Angular и Backbone, а продолжили моей любовью — Ember.js. Как минимум, Apple Music был на нём написан. Во-вторых, авторы не стесняются комментариев в коде. И нет, это не ИИ-комментарии, там всё по делу. Но в мире, где принято писать самодокументирующийся код, это неожиданно. В-третьих мне, как — в основном — React-разработчику очень необычно видеть весьма странную структуру репозитория и настолько огромные компоненты. Но то такое. Ну и в-четвёртых, у них, похоже, свой фреймворк для стейта, роутинга, запросов — Jet. Пока сложно сказать, насколько эффективный. Естественно, утечка подняла в очередной раз миллион вопросов вроде: «Если код всё равно будет на клиенте, какая разница, обфуцированный он, или нет». Как минимум, фишингу отсутствие исходников никак не мешает. Мнения, котаны? #apple #svelte

#инструмент дня Наверняка многие сталкивались с проблемой правильного описания и, как результат, поддержки регулярных выражений. Особенно остро встает вопрос восприятия - правильно ли добавил группу захвата в последовательность условий, какой предполагается вывод, да и впринципе есть ли сейчас в регулярном выражении ошибки. Да, можно исопльзовать сервисы вроде regex101.com, но ведь хочется не покидая среду разработки. Недавно появилось отличное решение проблемы - ArkRegex как абстракция над new RegExp() с выводом пояснительной информации и валидацией в типах Typescript https://arktype.io/docs/blog/arkregex Пример из документации:

    
        
import { regex } from "arkregex"

const ok = regex("^ok$", "i")
// Regex<"ok" | "oK" | "Ok" | "OK", { flags: "i" }>

const semver = regex("^(\\d*)\\.(\\d*)\\.(\\d*)$")
// Regex<`${bigint}.${bigint}.${bigint}`, { captures: [`${bigint}`, `${bigint}`, `${bigint}`] }>

const email = regex("^(?<name>\\w+)@(?<domain>\\w+\\.\\w+)$")
// Regex<`${string}@${string}.${string}`, { names: { name: string; domain: `${string}.${string}`; }; ...>
{}
    

Однако не обошлось без нюансов - во избежание проблем с производительностью, лучше ограничивать длину и сложность регулярного выражения (скорее всего большинство из вас не столкнутся с этим нюансом). Если сильно увлечься, потенциально сложный вывод типов может сильно нагружать языковой сервер и typescript начнет с большой задержкой выводить типы проекта из-за сложных регулярных выражений в большом количестве. Ждём tsgo и существенного прироста производительности, чтобы не думать о нюансах.

#обновление дня В плагины PT AI для IDE кажется, подвезли не только сканер уязвимостей, но и встроенного помощника для уставшего от триажа разработчика. Смотрите, что теперь умеет: ● Встроенный ассистент для триажа. Теперь умный алгоритм не просто накидывает проблем, но и предлагает, с чего начать разбор полетов: какие уязвимости подтвердить, а какие — отклонить в первую очередь. Плюс, группирует похожие issues, чтобы обрабатывать их пачкой, а не по одной. Наконец-то! ● Массовое управление уязвимостями. В плагине для IntelliJ IDEA появилась долгожданная функция массового управления. Выделяешь несколько уязвимостей галочками на вкладке Detected Vulnerabilities (Обнаруженные уязвимости) — и разом меняешь им статус. Для фанатов VSCode эту фичу обещают до конца года. ● Copilot на основе LLM(большая языковая модель) (экспериментальная фича пока только для пользователей Intellij). В плагин интегрирован ИИ-помощник на базе YandexGPT для генерации исправлений прямо в IDE. Он помогает с автоисправлением кода: система не только находит уязвимость, но и предлагает готовый патч с предпросмотром изменений. Объясняет логику: можно запросить пояснение, почему исправление выглядит именно так. Хранит историю рекомендаций: все сгенерированные советы сохраняются в новой вкладке «How to Fix» (как исправить) . Фича выключена по умолчанию (включается в настройках) и работает для всех уязвимостей, кроме опровергнутых и исключённых. PT AI эволюционирует из статичного сканера в активного участника процесса, который помогает не только найти, но и быстро отсортировать, а в идеале — и исправить проблемы.

#статья дня Живя в стране, основной язый которой не английский и не русский, достаточно быстро — хвала современным UX-тенденциям — наблатыкиваешься ориентироваться в разного рода веб-приложениях. Даже, условно, налоговую карту могу заполнить без перевода страницы. Тем не менее, пользоваться Google Translate приходится достаточно часто. И если вы хотя бы раз его в жизни использовали, вам прекрасно знакомо, что перевод часто ломает поведение приложения и крайне нежелательно, например, делать покупки на переведённой странице. Можно что-то упустить. Почему это происходит? А вот об этом сегодняшняя статья дня и её перевод. TL;DR Google Translate в Chrome при переводе страницы подменяет текстовые узлы (TextNode) на элементы <font> (sic!), ломая структуру DOM и работу React. После этого текст перестаёт обновляться при изменении данных, а операции с узлами (removeChild, insertBefore) вызывают ошибки. Обойти проблему можно лишь частично — оборачивая текст в <span> или отключая перевод, что снижает производительность и доступность. Как всегда, я рекомендую оригинал. Потому что там полно интерактивных примеров и дополнительной информации по теме. Правда, финские программисты даже и пытаться не будут... #translate