Будни разработчика
14.3K subscribers
1.42K photos
411 videos
8 files
2.36K links
Блог Lead JS-разработчика
Автор: @bekharsky

По рекламе: https://telepost.pro/ch/id2415 или https://t.me/it_adv

Чат: https://t.me/htmlshitchat

№5001017849, https://www.gosuslugi.ru/snet/679b74f8dad2d930d2eaa978
Download Telegram
#молния дня

Postman во время фонового запуска или обновления без согласия пользователя автоматически модифицирует глобальные конфиги локальных AI-инструментов (в частности Claude Code и Codex) и устанавливает в них свои плагины.

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

P.S. Разве им кто-то ещё пользуется? Ну да ладно, лучше предупредить.

Продолжают себя закапывать.

Поделитесь пожалуйста прекрасными альтернативами в комментариях.

https://github.com/postmanlabs/postman-app-support/issues/14370

#postman #scam
🤬15❤3
This media is not supported in your browser
VIEW IN TELEGRAM
#заметка дня

Помните браузер Ladybird, который я тут периодически вспоминаю? Вот недавно: https://t.me/htmlshit/4055

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

Посмотрите на сравнение Ladybird с Chrome, Safari и Firefox в начале отчёта. Пока JavaScript блокирует основной поток, у всех трёх браузеров CSS-анимация замирает, а у Ladybird продолжает работать как ни в чём не бывало.

Разработчики научили браузер обрабатывать CSS отдельно от JavaScript. Теперь, даже если JavaScript занят тяжёлыми вычислениями, браузер продолжает обновлять стили и расположение элементов на странице. Поэтому анимации работают, даже если они меняют размеры элементов (`width`, font-size`). Более того, даже :hover` продолжает реагировать на мышь! Авторы утверждают, что ни один другой браузер пока такого не умеет.

А заодно в октябре добавили JIT для JavaScript, новый движок WebAssembly (до 7 раз быстрее старого в отдельных тестах), пачку новых CSS-возможностей, обновили интерфейс и обогнали Safari Technology Preview по количеству пройденных Web Platform Tests, практически догнав Firefox.

Всё это на собственном движке, без Chromium и WebKit.

Вообще, в конце 2026 года делать очередной браузер на Chromium уже должно быть немного стыдно. Сколько можно перекрашивать один и тот же движок?

https://ladybird.org/newsletter/2026-10-31/

#ladybird #browser
🤩18👍4🔥3❤2👎1🥱1
#заметка дня

Там WebKit-товарищи выкатили CSS mesh gradients и это какая-то совершеннейшая дичь, только посмотрите на иллюстрацию.

В отличие от привычных CSS-градиентов, здесь цвета задаются в узлах двумерной сетки. Узлы можно двигать, линии между ними изгибать кривыми Безье, а браузер сам рассчитывает плавные переходы. То, ради чего раньше приходилось открывать графический редактор или городить конструкцию из десятка radial-gradient().

Простейший пример — mesh-gradient(red, blue; green, yellow). Точка с запятой разделяет строки сетки. А дальше начинаются координаты, контрольные точки, интерполяция в разных цветовых пространствах и прочие радости.

Пока это лютый эксперимент. Базовый рендеринг только что попал в WebKit, причём пока на CPU, а GPU-реализация ещё впереди. В стабильном Safari этого нет, Chrome и Firefox тоже пока не поддерживают.

Зато CSS Working Group уже согласовала включение mesh-gradient() и его более простого родственника freeform-gradient() в CSS Images Level 5.

На MDN отдельной документации пока нет, но можно почитать предложение с примерами и синтаксисом.

#css #gradient
❤12
В поисках новых карьерных возможностей?

Необязательно ограничиваться локальным рынком: зарубежные компании тоже могут стать хорошей точкой для профессионального роста. Тем более что среди них есть команды, в которых уже работают русскоговорящие специалисты — адаптироваться к новой рабочей среде будет проще.

Коллеги из Dev Connectable Jobs подготовили подборку зарубежных вакансий, которые могут заинтересовать тех, кто задумывается о следующем карьерном шаге 👇

• QA Automation Engineer в Planner5D — один из мировых лидеров в нише home design, меняющий индустрию с помощью передовых технологий AI и 3D-графики.
•
• Senior Data Engineer в Symfa — международная компания, которая занимается разработкой ПО и IT-консалтингом для бизнеса.
• Senior QA Engineer (Full Stack) в Spotware — финтех-компания, специализирующаяся на разработке продуктов для брокеров, банков и трейдеров.
• Senior Staff Machine Learning Engineer в Inworld AI — предлагает платформу разработки виртуальных персонажей, управляемых AI.
• Backend Team Lead в Splitmetrics — платформа для аналитики и продвижения мобильных приложений в App Store и Google Play.
❤4
#игра дня

В 1996 году Пэт Керр за одни выходные написал на Atari ST небольшую симуляцию физики автомобилей. Позже она стала основой поведения машин в первой GTA.

Прототип был написан на GFA BASIC, а для самой игры его перенесли на C. Спустя 30 лет автор воссоздал его на JavaScript, добавил визуализацию сил и подробно разобрал, как всё работает.

В основе — физика твёрдого тела с массой, инерцией и вращением. А поведение шин автор, по собственному признанию, практически выдумал: сопротивление движению вбок значительно сильнее, чем вдоль колеса. Никакой сложной модели сцепления с дорогой, зато машина вполне убедительно разгоняется, поворачивает и уходит в занос.

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

А заодно вспомним, что недавно Брамус Ван Дамм воссоздал первую GTA на JavaScript и WebGL. Причём не через эмулятор, а написав собственный движок на TypeScript и Three.js, который читает оригинальные файлы игры. И да, большую часть реализации ему помог написать Gemini.

Играем, котаны?

#game #engine
👍8❤5
#статья дня

В Twitter переписали веб-клиент с нуля. Разумеется, с AI-агентами, пятью инженерами и прочими обязательными атрибутами 2026 года.

Потому пишем про работу над производительностью!

Например, Vite с Rolldown создавал 582 стартовых JavaScript-файла для неавторизованных пользователей и 754 для авторизованных. Это особенность алгоритма code splitting, унаследованного от Rollup: общие зависимости выносятся в отдельные чанки, иногда по одному модулю. Проблема настолько известная, что у Rolldown есть отдельный RFC.

Да-да, ESM на вебе это же такая офигительная идея.

Браузеру приходилось загружать сотни файлов за несколько сетевых раундов. Инженеры написали плагин, объединяющий стартовые модули в крупные чанки, и сократили количество файлов до 10 и 182 соответственно.

А ещё они перестали загружать JavaScript одновременно с CSS. На медленных соединениях скрипты конкурировали за пропускную способность с блокирующими рендеринг стилями. Теперь JS загружается после CSS, и First Contentful Paint на странице твита сократился с 7,2 до 1,8 секунды.

Из остального: объединили три сервера в один на Fastify, заменили пустую HTML-заглушку на streaming SSR, научились гидратировать страницу до завершения HTML-потока. Вместо сериализации Relay Store передают GraphQL-ответы прямо в HTML — это в 4–5 раз меньше данных. Убрали дублирование SVG-иконок, уменьшили HTML для поисковиков, перевели изображения на WebP и выкинули несколько десятков килобайт ненужных переводов и зависимостей.

И даже написали собственный anti-slop линтер, чтобы отлавливать мусор, который любят генерировать AI-агенты.

Кажется, самая интересная часть.

В результате на Slow 4G первый твит появляется за 2,7 секунды вместо 23,9.

Забавно, что главное достижение всех этих оптимизаций — снова научить браузер показывать HTML до загрузки JavaScript.

Подробный технический разбор от инженеров X.

Казалось бы, показать колонку с постами, да?


#twitter #performance
👍13❤6
Смысл быть Senior/Lead с доходом 300k+, если вы ведете себя как финансовый безграмотный и позволяете инфляции превращать ваш кэш в тыкву?

Пока вы ловите иллюзию стабильности и держите миллионы на тающих счетах, продвинутые удаленщики хакают систему и оформляют квартиры в Москве и Питере через гибкие беспроцентные рассрочки вообще без переплат

Команда Влюбленных в недвижимость без соплей и маркетинговой шелухи выложила закрытый пул инвест-объектов с готовой юнит-экономикой для ИТ – кликайте и забирайте, иначе так и останетесь с обесценивающейся бумагой.

Реклама. Рекламодатель ИП Громова А.Л. ИНН 781014051159 erid: 2VtzqxfKuJn
🤡22👎3🔥1
#инструмент дня

Во вчерашнем посте про переписывание веб-клиента Twitter я мельком упомянул их собственный линтер для AI-мусора — anti-slop.

Разработчики активно использовали AI-агентов (ещё бы), но одних инструкций в промптах оказалось недостаточно. Поэтому в репозитории появился AGENTS.md с общими правилами и больше 25 skills для типовых задач: от работы с Relay и роутером до ревью и сопровождения PR.

А правила, которые агенты регулярно нарушали, превратили в плагины для Oxlint.

Один из них — anti-slop. Он ловит характерные для AI-генерации конструкции:

- Цепочки приведений типов вроде value as unknown as User, которыми обходят проверку TypeScript.
- Параметры с типом unknown вместо конкретного контракта.
- Условные spread-операторы вроде ...(condition ? { value } : {}), которыми агенты любят усложнять код.

Есть и другие плагины, проверяющие использование Relay, Tailwind, тестов и переводов. Всё это запускается автоматически вместе с форматированием и проверкой типов.

Кстати, существует и независимый открытый anti-slop от Диллона Малроя. Тоже набор правил для Oxlint, но уже доступный всем. Там около 20 проверок: от небезопасных приведений типов и ненужных async до моков модулей и копирования аккумулятора на каждой итерации reduce.

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

#ai #slop #tool
1🔥19
This media is not supported in your browser
VIEW IN TELEGRAM
#библиотека дня

Skullet — библиотека, которая сама генерирует скелетоны для загрузки контента. Больше не нужно рисовать серые прямоугольники руками и поддерживать отдельную вёрстку для каждого состояния.

Работает довольно просто: передаём компонент и пример данных, библиотека невидимо рендерит его, измеряет размеры элементов и строит по ним скелетон. В результате заглушка повторяет геометрию настоящего интерфейса, а при загрузке данных ничего не прыгает.


import { Skeleton } from "skullet/react";

const SAMPLE_USER = {
name: "John Doe",
bio: "Frontend developer",
};

<Skeleton data={user} sample={SAMPLE_USER}>
{(user) => <UserCard user={user} />}
</Skeleton>


Есть разные стили скелетонов, анимации появления контента, поддержка SSR и даже плавная загрузка изображений. Никакого дополнительного этапа сборки.

Работает с React, Vue, Svelte и обычным JavaScript.

На сайте отличные интерактивные примеры, обязательно потыкайте.

GitHub: https://github.com/lochie/skullet

#skeleton #loading
1❤16👎1
#статья дня

В Vercel научили AI-агентов заниматься работой, до которой у разработчиков обычно не доходят руки, — разбирать JavaScript-бандлы и выкидывать из них лишнее.

В Next.js 16.4 появился специальный скилл next-bundle-optimizer. Он даёт агенту доступ к графу зависимостей Turbopack, чтобы тот мог искать модули, которые случайно попали в первоначальную загрузку, неработающий lazy loading, дублирующиеся зависимости и прочие радости современной фронтенд-разработки.

Устанавливается одной командой:

npx skills add vercel/next.js --skill next-bundle-optimizer

Дальше запускаем /next-bundle-optimizer, изучаем предложения и при желании просим агента применить исправления.

В Vercel таким способом уже убрали почти 2 МБ сжатого JavaScript суммарно с разных страниц v0 и vercel.com. Например, обнаружили, что редактор кода грузился даже для пользователей, которым он вообще не был доступен. Минус 150 КБ почти на каждой странице.

Кстати, о том, что ещё можно поручить ИИ. Поделюсь папкой Telegram-каналов, где авторы экспериментируют с нейросетями, автоматизируют рутину, занимаются вайб-кодингом и запускают собственные проекты. Есть что подсмотреть и попробовать у себя.

А на канале Veai из этой папки прямо сейчас лежит рабочий способ обойти блокировки Claude.


Добавить папку в один клик
❤8
This media is not supported in your browser
VIEW IN TELEGRAM
#инструмент дня

Я в универе постоянно делал презентации для своих работ и семинаров. Ну просто как минимум потому, что старание — это всегда плюс балл не только к оценке, но и к репутации.

Это, кстати, вполне себе лайфхак. Пишите лабы по программированию на двух языках, делайте нормальные доки — и будет вам легко.

Но не суть. Я сильно пристрастился к тачпаду на ноутбуке, потому все визуальные задачи, где нужно было мышевозить, давались с трудом. Когда готовишь документ, горячие клавиши спасают, а уж сейчас всё сразу в Markdown по-умолчанию пишешь и голова не болит. Но вот презентации и электронные схемы — дело другое.

И если для схем я ещё готов подключить мышь, напрячься и так далее, то презентации я писал на HTML, используя https://revealjs.com/.

Но инструмент, который хочу показать сегодня — это https://sli.dev/

Что он делает? Из видео, в общем, понятно — преобразует Markdown-файлы во всё те же презентации! Это очень круто, почти один уровень с Mermaid по удобству.

Горячая рекомендация.

P. S. Впрочем, можно взять ллм-ку и ffmpeg и устроить фурор с видео: https://t.me/htmlshit/4309

Но вдруг вам текст надо.

#markdown #tool #presentation #бородач
❤3
👾 Открытое собеседование для Frontend-разработчиков: интервьюер из R-Vision, ex-Сбер

12 ноября в 19:00 мск приходи посмотреть, как проходит реальное техническое интервью на позицию Frontend-разработчика

Интервьюер: Даниил Дмитриев, Frontend-разработчик в R-Vision, ex-Сбер. Работает с React и TypeScript, совмещает разработку с ролью тимлида, менторит коллег и проводит код-ревью

Без сценария и заранее известных вопросов ↓

В роли кандидата – действующий разработчик, который впервые увидит задания прямо на эфире

Обычно ты видишь собеседование только со стороны кандидата. Здесь сможешь посмотреть на процесс глазами интервьюера:

— какие темы и задачи проверяют на Frontend-собеседованиях
— как кандидат отвечает и где возникают сложности
— на что Даниил обращает внимание при оценке ответов


В конце Даниил ответит на вопросы зрителей

Эфир проходит в рамках менторской программы ШОРТКАТ. Мы помогаем разработчикам расти в грейде и зарплате. В нашем сообществе более 150 менторов из бигтеха, а наши менти уже получили более 500 офферов

Участие бесплатное 🔥

Зарегистрироваться на эфир можно в боте → @shortcut_front_bot

Реклама.
О рекламодателе.
❤2
#релиз дня

Последние несколько месяцев активно развивается тема HTML-in-Canvas. Особенно на фоне агентской разработки, когда собрать какой-нибудь безумный эксперимент с WebGL, шейдерами и интерактивным интерфейсом стало гораздо проще. Ещё до официального релиза API появилась целая подборка экспериментов, и посмотреть там есть на что.

А теперь в Chrome 157 HTML-in-Canvas наконец добрался до стабильной версии и работает без флагов.

Суть в том, что обычный HTML теперь можно рисовать внутри <canvas>, в том числе использовать как текстуру в WebGL и WebGPU. Причём это не просто картинка из DOM: кнопки нажимаются, поля ввода работают, текст можно выделять, копировать, переводить и находить через Ctrl+F. Даже доступность для скринридеров сохраняется.

Можно буквально натянуть HTML-форму на вращающийся куб, пропустить через шейдер или отобразить на изогнутой поверхности — и всё продолжит работать. Раньше для такого приходилось синхронизировать HTML-оверлеи с 3D-сценой или самостоятельно реализовывать привычные возможности браузера.

Правда, за время разработки API уже успели несколько раз поменять, как это обычно и бывает. Например, <canvas layoutsubtree> превратился в <canvas content="drawable">, а WebGL-метод texElementImage2D() переименовали в texElementSubImage2D(). В результате часть старых экспериментов из той самой подборки в Chrome 157 уже не работает. Даже реализации в Three.js, PixiJS и PlayCanvas не успели сразу адаптироваться к изменениям.

Зато вот несколько примеров из актуального репозитория спецификации:

— Официальные демки Chrome
— Интерактивная HTML-карточка в WebGL
— Желейный слайдер на WebGPU
— Сложная типографика внутри Canvas

А здесь ещё одна галерея экспериментов с учётом изменений API.

Пока это преимущественно территория Chromium: Firefox и Safari API ещё не поддерживают.

Чо, котаны, кто сделает свою крутую демку? :)

#html #3d #webgl #webgpu #canvas
🔥2🫡1
This media is not supported in your browser
VIEW IN TELEGRAM
Бэкендеры, 17 ноября AvitoTech усаживает вас за игровые столы 🔥

Backend Roulette — вечеринка для бэкенд- и Go-разработчиков и архитекторов System Design. Инженерные задачи там раскладываются как партия в покер, а вместо докладов будут практика, обмен опытом и немного азарта.

Роль крупье за каждым столом играет эксперт AvitoTech: выдаёт команде вводные и по ходу игры подкидывает новые обстоятельства, под которые придётся перестраивать решение.

Для тех, кто не хочет за стол, организаторы подготовили сайд-активности и нетворкинг с коллегами. А после игры — афтерпати и нетворк.

P. S. Играть в покер уметь необязательно, достаточно желания классно провести время.

📎 Регистрация
Please open Telegram to view this post
VIEW IN TELEGRAM