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

🔴 Тестовый собес на Frontend-разработчика со старшим разработчиком ex. Сбер в этот четверг!  [+ разбор 50 сложных вопросов в подарок ] 17 сентября (в этот четверг!) в 19:00 по мск приходи онлайн, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика! Собеседование проведёт Даниил Дмитриев - старший разработчик в R-Vision, ex. Сбер, Как это будет: 📂 Даниил задаст разработчику вопросы и задачи, которые могут спросить на реальном собесе 📂 После каждого ответа респондента ты услышишь подробный комментарий от ментора и поймёшь, чего на самом деле ожидает собеседующий на интервью 📂 В конце сможешь задать любой вопрос Даниилу и получить на него развёрнутый ответ Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы И ты можешь посмотреть его бесплатно 🔥 Только завтра, в прямом эфире! 🎁 Подарок для всех, кто зарегается на веб — файл с ОТВЕТАМИ НА 50 СЛОЖНЫХ ВОПРОСОВ с Frontend-собеседований 🔥 Переходи в бот, чтобы попасть на эфир и забрать подарок 👉 @shortcut_front_bot Реклама. О рекламодателе.

#инструмент дня Когда-то давно ещё на Ubuntu я пользовался колорпикером Pick. Он был настолько прост и удобен, с этими милыми названиями цветов, что я не мог себе представить работу как-то иначе. И вот, наконец, я сделал его клон для macOS! И назвал его Pipetka. Pipetka умеет брать цвет с рабочего стола и окон, умеет генерировать палитры из одного изображения или целого их каталога. Даёт названия цветам, позволяет переключаться между разными их представлениями и экспортировать в разных форматах. Проект открытый, на гитхаб автоматически выкладываются неподписанные релизы: https://github.com/bekharsky/pipetka А если есть желание поддержать — Pipetka лежит в App Store: https://apps.apple.com/fi/app/pipetka/id6784390987?mt=12 Пользуйтесь :) #colorpicker #app #macos

#статья дня Мы как-то с вами уже обсудили, какими разными бывают .*ignore-файлы. И что не .gitignore-ом единым, вот тут: https://t.me/htmlshit/3989 Но я упустил из виду, что у автора есть ещё статья-продолжение! И она — конкретно про разные вспомогательные файлы уже самого .git. Ну, например, с .gitignore всё уже понятно. А что насчёт .gitattributes? А этот файл помогает разобраться, как поступать с разными файлами. Например, merge strategy:

package-lock.json merge=ours

и всё, разрулится как надо. Или вот шипите вы мультиплатформу:

*.sh text eol=lf
*.bat text eol=crlf

А? По-моему, очень круто. Но давайте дальше. .gitmodules — конфигурация подмодулей git, .mailmap — хендлит обновление почты в старых коммитах, .gitmessage — шаблон сообщения коммита, .git-blame-ignore-revs — позволяет не включать преттиер и линтер в blame (Привет, Саша!). Ну и, например, как зашиппить пустую папку в git? Положите в неё файл .gitkeep! Но это не стандартный файл, это просто соглашение. Таких много. Короче, всё это — вот тут: https://nesbitt.io/2026/02/05/git-magic-files.html Я вообще этот блог люблю, автор жёстко упарывается по менеджерам пакетов и гиту. Алгоритмы разбора зависимостей, диффов, уязвимости — вот это вот всё. #git #config

‼️ ТОЛЬКО ДЛЯ МУЖЧИН Каждый мужчина может стать тем самым, которому говорят «это был самый лучший секс в моей жизни» 📢 Тебе точно надо в этот закрытый телеграм-канал, если хочешь: — Научиться заниматься сексом сколько захотите, а не сколько получается — Избавиться от синдрома тревожного ожидания сексуальной неудачи — Создавать притяжение без манипуляций и «пикап-трюков» — Испытывать мультиоргазмы, которые в 50 раз сильнее обычных — Удивить самую искушённую в сексе женщину и стать незабываемым суперлюбовником — Пробудить страсть и усилить любовь в долгих отношениях — Получить огромное количество энергии и сил. Забыть про усталость, выгорание и прокрастинацию — Получить мощный заряд для развития бизнеса, карьеры и спорта — Включать ‘мужское’ состояние, которое создает спрос и ажиотаж на вас и выбираете уже в первую очередь вы, а не ждете когда выберут вас Владелец канала Юрий — эксперт по управлению сексуальной энергией, мастер даосских практик. Более 13 лет обучался и практиковал с самыми известными даосскими мастерами, уже обучил более 1000 мужчин этим уникальным навыкам🔥 Это закрытый канал, куда можно вступить только по этой уникальной ссылке 👉🏻 https://t.me/+tZLDZUx33thjMDVi Отправляй заявку, пока она работает

#инструмент дня Этого стоило ожидать. Вашему вниманию — Quake на CSS. Реализован он с помощью движка PolyCSS, а выбрать карту можно просто передав значение в параметр. Например, вот второй уровень первого эпизода: https://cssquake.com/?map=e1m2 Итак, а что же такое PolyCSS? PolyCSS — 3D-движок, который рендерит модели обычными DOM-элементами через CSS matrix3d(). Без WebGL и без canvas для самой сцены. Загружает OBJ/MTL, STL, glTF/GLB и VOX, умеет в текстуры, свет, тени, камеры, orbit/map/first-person controls, плюс есть обёртки для React и Vue. Полигоны при этом реально остаются HTML-элементами. Их можно увидеть в DevTools, стилизовать через CSS, повесить click, анимацию или вообще работать с ними как с обычным DOM. Отсюда же и довольно специфичная модель производительности: важны количество DOM-узлов и объём работы, который потом достаётся браузеру на рендер и композитинг. Поэтому PolyCSS много возится с самой геометрией: убирает внутренние грани, объединяет подходящие поверхности и выбирает разные способы рендера для разных типов полигонов. По умолчанию используется lossy`-оптимизация, которая может немного упростить исходную сетку ради меньшего количества DOM-элементов; если это нежелательно, есть `lossless. С текстурами похожая история: движок собирает texture atlas, а элементы показывают нужные участки, вместо того чтобы тупо вешать отдельную картинку на каждый треугольник. До Three.js или Babylon.js по возможностям тут далеко: освещение проще, у теней и текстур есть ограничения, а большие сцены довольно быстро начинают упираться в DOM. Но для небольших интерактивных сцен, моделей и всяких веб-экспериментов подход вполне рабочий, и при этом весь результат остаётся частью обычной страницы. PolyCSS: https://github.com/layoutit/polycss cssQuake: https://github.com/layoutit/cssQuake Демонстрация квейком, конечно, это мощно. #3d #polycss #quake

#инструмент дня Слово «модель» сейчас обычно вызывает в голове что-нибудь на 7–70 миллиардов параметров и десятки гигабайт весов. Но модель вообще не обязана быть такой. Vercel Labs сделали gpu-lexer — библиотеку подсветки кода, в которой вместо набора грамматик используется одна обученная модель на 41 321 параметр. Веса упакованы в 6 бит, а весь браузерный пакет занимает 27.4 KB, в сжатом состоянии. Работает через WebGPU. Код сначала режется на слова, пробелы, переводы строк и символы. Потом модель для каждого токена выбирает класс: keyword, string, function, type, operator и т.д. Язык заранее указывать не нужно. У классических хайлайтеров подход другой. Prism и Highlight.js хранят правила для отдельных языков. Shiki использует TextMate-грамматики. Больше языков — больше правил и больше данных. Здесь одна модель занимает два десятка килобайт и пытается покрыть всё сразу. Для сравнения, автор приводит примерно 162 KB для Prism, 240 KB для Highlight.js и 992 KB для полного набора Shiki. Но это именно ML: результат не гарантирован правилами. С Shiki модель совпадает примерно на 88–90% токенов. На TypeScript и Python лучше, на менее популярных языках и шаблонизаторах заметно хуже. Да, такой подход не вчера появился, но мне нравится, что он снова обретает право на жизнь в не слишком сильно детерменированных задачах. https://gpu-lexer.vercel.app/ #syntax #ml #highlight

🇩🇪 Германия нуждается в квалифицированных IT-специалистах. Но даже сильного опыта уже недостаточно, чтобы получить оффер. Узнайте у практикующих рекрутеров, что действительно работает на рынке. Самый активный сезон найма в Германии уже в самом разгаре. Если ваша цель — получить оффер и запустить переезд до конца года, начинать поиск работы нужно именно сейчас. Начать стоит с LinkedIn — ваш профиль должен быть адаптирован под выдачу в поиске рекрутера. 15 сентября в 19:00 по Берлину (UTC+2) пройдет бесплатный мастер-класс, где вы узнаете: ✔️ Как правильно настроить LinkedIn-профиль, чтобы рекрутеры находили вас и приглашали на интервью ✔️ Как рекрутеры ищут кандидатов через LinkedIn Recruiter и что влияет на выдачу профиля в поиске ✔️ Как адаптировать профиль под разные рынки и карьерные цели ✔️ Какие зарплаты сейчас предлагают компании для IT-специалистов (внутренняя статистика) ✔️ Как получить оффер в Германии уже в этом году 📌 Зарегистрироваться 🎙 Спикеры: Инесса — IT-рекрутер, раньше работала в Amazon, ING Bank и REWE Digital, где формировала и развивала международные IT-команды. Роман — Software Engineer с опытом 13+ лет. Работал в BMW, IBM и Eurowings, где прошёл путь от разработчика до тимлида. Обладает большим опытом найма IT-специалистов и точно знает, на что обращают внимание немецкие компании при выборе кандидатов. Инесса и Роман — основатели рекрутингово-иммиграционного агентства Transparent Hiring. Они знают рынок найма с обеих сторон: каждый день нанимают кандидатов для немецких компаний и помогают специалистам с поиском работы и переездом. У Transparent Hiring: ⚡️100% закрытие кейсов по визам и жилью — ни одного отказа в визе за 6 лет на рынке ⚡️В команде работают практикующие рекрутеры и визовые эксперты с опытом работы в немецких визовых центрах и австрийском консульстве ⚡️ 600+ успешных кейсов релокации в Германию кандидатов из 45 стран А еще у команды глубокая экспертиза в работе со специалистами из стран СНГ. Они продолжают перевозить кандидатов в Германию, в том числе из РФ. 👉 Регистрируйтесь на вебинар, чтобы понять, каким должен выглядеть ваш профиль для немецкого рынка. А пока ждете вебинар, подпишитесь на авторский канал Германия с Инессой 🇩🇪 — там Инесса делится полезными советами по оформлению CV и LinkedIn и переезду в Германию и другие страны Европы.

#релиз дня Вышел React 19.3, и на этот раз в релизе есть несколько вполне заметных вещей. Главное — две экспериментальные фичи наконец стали стабильными: — <ViewTransition> — React теперь умеет нормально работать с браузерным View Transition API: enter/exit/update/shared-element анимации, интеграция с Suspense, свои переходы. — refs на <Fragment> — можно получить доступ к группе DOM-элементов без лишнего wrapper-div: повесить event listener, IntersectionObserver, управлять фокусом, вызвать scrollIntoView() и т.д. Ещё появилась довольно приятная мелочь для SSR:

use(browser())

Компонент таким образом можно явно исключить из серверного рендера. На сервере он уйдёт в ближайший Suspense, а в браузере продолжит рендериться как обычно. Никаких typeof window !== 'undefined' и mounted через useEffect. Плюс React теперь поддерживает Trusted Types. Это браузерная защита от DOM XSS: через CSP можно запретить передавать обычные строки в опасные API вроде innerHTML и разрешать только заранее проверенный TrustedHTML. Раньше React такой объект превращал обратно в строку и ломал механизм. В 19.3 trusted-значения наконец проходят в DOM как есть. Штош, мне нравится этот островок стабильности. https://react.dev/blog/2026/09/09/react-19-3 #react

AvitoTech всегда славился своими проектами на День разработчика, но в этот раз ребята превзошли самих себя! В честь наступающего Дня разработчика вместе со студией FU2RE и 3D-художником Dmitriev Video они создали большой портал в прошлое — эмулятор 2006 года будущего разработчика. Внутри — олдскульные игры и викторины, за которые можно лутать баллы и подниматься в рейтинге. Трём лучшим игрокам 15 сентября подарят суперпак настоящих разрабов, внутри которого салфетка на монитор из коллаборации с Elnik, плед, сумка и плюшевый талисман — кот Б/У. Так что времени сыграть ещё много! P. S. А ещё в канале AvitoTech до 13 сентября будут каждый день выходить крутые праздничные посты. Не пропустите: может быть, и там они спрятали подарки ❤️

#такое дня Ничего такого, просто макбук с линуксом (конкретно, Omarchy) смотрится на себя в зеркало через вебкамеру, чтобы дать агенту нужную информацию для оптимизации драйвера AMD Radeon GPU. https://x.com/jpschroeder/status/2097758256420565442 #ai

#ссылка дня Если вдруг этим дождливым (ничо не знаю, у меня дождь) вечером нечем заняться, предлагаю вам попробовать покрасить кнопку! И не просто покрасить кнопку, а покрасить кнопку с помощью Клода. И ничего более. https://opusfived.dev/ Думаете, получится? :) #claude #opus

Работа, обучение, инструменты — все каналы в одной папке Собрали для вас все каналы, где публикуют вакансии, заказы, советы по карьере, а также ресурсы для прокачки навыков: дизайн, 3D, программирование, AI, безопасность, видео, звук. Всё в одной папке — подписывайтесь и будьте во всеоружии. https://t.me/addlist/bdE2qZVyP1U4OGM6 Папка с любовью собрана для вас командой Booosty. Booosty - умеем не только в папки 😉

#книга дня Data Structures and Algorithms от Kirupa Сегодня не совсем книга, а большой набор связанных статей по структурам данных и алгоритмам. https://www.kirupa.com/data_structures_algorithms/introduction_book_tutorials.htm Темы обычные: Big O, массивы, стеки, деревья, графы, DFS/BFS, Дейкстра, сортировки. Но часть материала сделана специально под веб, а не просто перенесена туда из учебника. Например, офигенская глава про движение по двумерной сетке: https://www.kirupa.com/data_structures_algorithms/moving_around_a_grid.htm Там есть чувачок-инопланетянин, которого можно гонять стрелками или WASD по сетке 10×10. На нём разбираются смещения координат, проверки границ и обновление позиции. Ах, да. Естественно, все изученные структуры данных даются не просто так, а чтобы написать простые игры, представленные в конце цикла. #algorithms #data-structures

Вы правите код за ИИ дольше, чем написали бы сами Сгенерил компонент на 400 строк за минуту. Полчаса разбирались, что там происходит, потом переписали руками. Знакомо? Проблема почти никогда не в модели. Проблема в том, что мы даём агенту задачу одной строкой в чате и надеемся на лучшее — без спецификации, без плана, без критериев приёмки. В четверг Хекслет проводитбесплатный воркшоп, где этот цикл показывают целиком и вживую. Берут готовый бэкенд мессенджера и за полтора часа пишут к нему фронтенд: спецификация в OpenSpec → задача агенту в OpenCode → проверка → доработка. Без «вот вам промпт, дальше сами». Что заберёте: — схему работы с агентом, которую можно приложить к своему проекту в тот же вечер — понимание, где агент экономит время, а где создаёт технический долг — код, который не надо переписывать 10 сентября, 19:00 МСК. Бесплатно Регистрация → 🔗 https://tglink.io/0725637718e778?erid=2W5zFGF4m5s ㅤ ㅤ #реклама О рекламодателе

Проект от подписчика! Напоминаю, что я выкачу любую статью или проект от вас, не стесняйтесь писать. Презентация? Выступили на митапе? Хотите поделиться интересной статьёй — добро пожаловать! Всем привет, меня зовут Виталий. Я иженер по автоматизации тестирования и по совместительству нагрузочный инженер. Проект такого масштаба никогда не планировал делать, но обо всем по порядку... Все началось с того, что когда я пришел на проект - надо было поднимать нагрузку с абсолютного нуля. Поскольку у нас использовался JS стек(playwright) то было принято решение взять k6. Конечно, это позволило нам быстро стартануть, но чем дальше в лес, тем сложнее было поддерживать решение. Начнем с того, что у k6 есть ограничение на VUS(virtual users) ~50k. И это стартовая точка костылей. Затем нам понадобился sidecar — helper сервер, чтобы производить определенные манипуляции, затем еще один за другим велосипедом. И в какой-то момент я решил, что управлять сложностью стало проблематично и решил, что хочу решить эти проблемы, но плавно. Так появилась первая версия perfscale. Простой генератор нагрузки, который умеет еще и запускать k6, чтобы переход был максимально гладким. Затем я начал думать над тем, что меняется от проекта к проекта и вывел закономерность - надо делить конфигурацию (configuration/config) от самого теста. Затем надо было добавить простой UI для отображения тестов и конфигураций, затем сделать интеграцию с OIDC и поместить внутрь контура. И вот так, постепенно, шаг за шагом, я пришел уже к полноценному продукту - https://perfscale.ru/ , который закрывает все типы тестов. А для большего комфорта я движок опенсорснул - 🧑‍💻 https://github.com/Perfscale/perfscale. Считаю, что это правильный шаг. Единственное, что нет в OSS - fix protocol (прим. 📊fix protocol - финансовый протокол для передачи финансовых данных), ну и самих фич: OIDC, multi tenant, AI inference ,integrations (git, prometheus, allure testops, slack, webhooks, etc.) вобщем все то, что накладывается поверх самого движка. Из последних вещей, которые я сделал в perfscale OSS (на момент написания) - это gRPC, child_process(sidecar) а впереди еще и поддержка других клиентов: databases, webrtc, graphql, и даже собственный marketplace для того,чтобы не городить ворох велосипедов. А еще я веду sponsr / habr - где пишу о еженедельных новостях, связанных с perfscale. Ну а если я лично вам приглянулся , то еще и веду свой TG канал - ✈️ Haradkou SDET, где пишу обо всяком, связанным с автоматизацией тестирования

#заметка дня Сразу нелишним будет напомнить, что я уже 6 лет живу и работаю в Финляндии, и даже в финской компании. Есть одна вещь, которая мне очень нравится в том, как финны в IT обращаются с английским: они совершенно не считают нужным оставлять английские слова английскими. Финский вообще довольно буквальный язык: a читается как «а», e как «э», i как «и», j как «й», ударение почти всегда на первый слог. И английское слово, попав в финскую речь, часто просто прогоняется через эти правила. Jira — «йира». Cache — примерно «кацхе». Done — «до́нэ». Apple — буквально «аппле». Google — *guugle*. YouTube — *juutuubi*. А дальше слово ещё и становится грамматически финским: *sprint* → sprintti *ticket* → ticketti *server* → serveri *bug* → bugi *commit* → committi *deploy* → deployata Есть даже отдельный термин — rallienglanti, «раллийный английский»: английский финских гонщиков, где слова английские, а фонетика, ритм и интонация остаются совершенно финскими. Для человека из русскоязычной IT-среды это сначала непривычно. У нас долго было ощущение, что английское слово надо хотя бы на секунду произнести правильно. А «яваскрипт», «микрософт», «аппле», «питон» или «докер» легко могли звучать либо как плохой английский, либо как намеренный айтишный китч. Получалось смешно: всё предложение по-русски, но перед словом *framework* человек на секунду становился американским радиоведущим. А потом садился в свой Mini с Union Jack на крыше. В Финляндии этого переключения как будто нет. Человек может прекрасно говорить по-английски, но в финской фразе Jira всё равно будет «йира», Apple — «аппле», а что-нибудь вполне можно *deployata*. Слово попало в язык — всё, поздно. Теперь оно немного финское. Или русское, смотря кто произнёс. Иллюстрация: Jutta Mykrä. #finland #it

#фишка дня CSS Grid умеет сам перекладывать карточки при ресайзе, но делает это мгновенно. Брамус не каратист Ван Дамм придумал довольно занятный способ добавить плавность без JS и View Transitions. Трюк в том, что анимируется вообще не Grid. Карточки вынимаются из потока и привязываются к своим ячейкам через CSS Anchor Positioning. Grid пересчитывает раскладку, координаты anchor() меняются, а transition плавно двигает карточку к новому месту. Сам Anchor Positioning уже добрался до современных Chrome, Safari и Firefox и считается Baseline 2026. Firefox уже понимает anchors, но изменение координат из anchor() пока не анимирует — карточки просто прыгают. Но зато в Safari 26 всё отлично! Я удивлён. Так-то забавно выходит. Ах, да. Ссылка: https://www.bram.us/2026/09/07/animating-css-grid-layouts-with-css-anchor-positioning/ Сразу на демо: https://codepen.io/editor/bramus/pen/01a07dd4-4d23-7e7b-9f41-3e0aa126751f #css #grid

Скачиваете утилиту, чтобы пройти тестовое, а телефон превращается в кирпич📱🧱 Желание побыстрее найти работу иногда берет верх над осторожностью — соискатели закрывают глаза на странные условия, серые схемы и «мутные» предложения. Мошенники этим отлично пользуются. За заманчивым оффером от известной компании теперь легко может скрываться фейковый рекрутер — итог: потерянные данные, заблокированные устройства и деньги. Ася Маркевич, HRD Далее, собрала 3 главные схемы современного фрода в найме и четкие правила безопасности. Еще больше советов и полезных материалов про ИТ-проекты, управление разработкой и карьеру — в канале Далее. Подписывайтесь! #реклама О рекламодателе

#инструмент дня TanStack выпустили Hotkeys — библиотеку обработки клавиатурных сокращений. Да, давно уже есть react-hotkeys-hook, hotkeys-js, Mousetrap, у части из них тоже есть scopes, refs, sequences и запись макросов. Но у TanStack Hotkeys всё это сразу считается одной командной системой. Скоупы, последовательности, удержание клавиш, keyup, rebinding, конфликты, Mod для Ctrl/Cmd, platform-aware отображение сочетаний, работа с editable-элементами и даже devtools. По отдельности почти всё это уже где-то было. Вопрос в том, сколько библиотек и собственного кода вам нужно было собрать вокруг простого keydown, чтобы получить всё сразу. Ах, да. Framework-agnostic, конечно же. С Query, Table и Virtual у них уже получалось примерно то же самое. Они редко приносят новую идею как таковую, зато дорабатывают прекрасно. Hotkeys пока alpha, но почитать документацию стоит хотя бы ради того, чтобы посмотреть, сколько нюансов там вообще. #tanstack #hotkeys #library