14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
Must-watch с недавней big tech night: доклад Дмитрия Иванова (руководитель SourceCraft в Yandex B2B Tech) о трансформации профессии разработчика под влиянием ИИ. Посмотреть доклад можно здесь.
Эти изменения хорошо прослеживаются во времени. Сначала AI появился в виде чат-ботов, которые помогали писать код и находить ошибки. Затем — встраивание ассистентов прямо в IDE, что уже стало стандартом. Следующий шаг — агенты, способные самостоятельно кодировать, запускать тесты и автоматизировать часть рабочих процессов. А дальше речь идёт о мультиагентных системах и «бесшовном AI», который будет встроен во все стадии цикла разработки и станет незаметным, но постоянным участником процесса.
Отдельный акцент был сделан на том, куда уходит время разработчиков. По данным исследования, почти половина рабочего дня уходит на работу с кодом. Около 20% занимают встречи и рутинные процессы, ещё столько же — поиск информации. Ревью кода и поддержка распределяются между остальным временем. Эта картина показывает, что прирост продуктивности возможен не за счёт абстрактных «ускорений», а через конкретные улучшения: ускорить работу с кодом хотя бы на треть и сократить время на поиск информации минимум вдвое — и эффект будет ощутим. Именно эти направления в Яндексе сейчас называют приоритетными.
Часть решений уже работает. Около трети разработчиков внутри компании пользуются генерацией кода, примерно четверть ревью проводится при поддержке моделей. В тестировании применяются генераторы чеклистов и автотестов, а в области поддержки и эксплуатации AI помогает анализировать логи, инциденты и даже core dump’ы.
Ключевая мысль доклада прозвучала так: искусственный интеллект в разработке стоит рассматривать не как замену специалиста, а как напарника. Важнее не сопоставление «человек против машины», а результат связки «человек плюс AI».
Именно через такую призму становится видно, что будущее профессии формируется постепенно, не за счёт резких революций, а благодаря снятию рутины и возвращению разработчикам времени на то, что действительно требует их внимания.
#статья дня
Белиберда на экране — вовсе не белиберда. Именно таким образом Slack тестирует свою систему интернационализации. Переводов.
i18n, если ещё короче.
Если говорить строго, правильная локализация — это жопа.
1. Какие-то языки по своей природе длиннее, какие-то короче. Какие-то вообще иероглифы.
2. Нужно не только перевести слова, но и учесть формат дат.
3. Убедиться, что какой-то кастомный символ не крашит приложение (да, такое бывает).
4. И всё это надо как-то поддерживать и обновлять.
Так что статья из блога инженеров Slack — самое то: https://slack.engineering/localizing-slack/
TL;DR они используют синтаксис ICU MessageFormat для хранения кроссплатформенных переводов, а белиберда на экране нужна для тестирования, чтобы быстро находить непереведённые строки. Они будут выглядеть нормально.
#slack #i18n #бородач
#инструмент дня
Писать тесты утомительно. Писать тесты компонентов — утомительно вдвойне. Писать тесты по доступности — втройне.
А проверять тесты и дописывать их — вчетверо.
Почему не вчетверне, кто знает?
На самом деле я, конечно, утрирую. Писать тесты, основываясь на доступных ролях элементов и их значениях — это весьма полезная практика для всех. Вот, обсуждали: /channel/htmlshit/3717
Но что делать, если надо посмотреть, а что происходит-то? Иногда изолированно запустить компонент довольно сложно, добираться до компонента внутри приложения — тоже.
Один из правильных ответов на самом деле — использовать Storybook, но об этом я в следующий раз. И одно другого всё равно не отменяет.
А сегодня у нас прекрасная тулза: Jest Preview.
Нетрудно догадаться, что она делает: визуализирует ваши тесты! Смотрим видео на иллюстрации.
Теперь не нужно постоянно сверяться с кодом и прокручивать дерево DOM в голове. Пара строчек — и вот вы уже в браузере наблюдаете, что происходит на самом деле.
Прекрасно? Не то слово!
#test #jest #preview #storybook
#ии дня
Когда тебе говорят «ИИ встроен во весь цикл разработки», обычно хочется дважды переспросить. Но тут реально интересно.
В SourceCraft Code Assistant появился ИИ-агент — его фишка в том, что он работает с полным контекстом твоего проекта прямо в веб-интерфейсе. Теперь агент может:
— поднять репозиторий,
— сгенерить автотесты,
— проверить, не оставил ли ты ключ API в коде (а ты оставил),
— и даже запустить деплой в Yandex Cloud, потому что платформа с ним теперь намертво интегрирована.
Причём всё это — по одному запросу. Пишешь: «хочу сервис для заметок» — и агент протаскивает идею от кода до выката.
У SourceCraft Code Assistant есть и базовый режим: теперь он умеет не только подсказывать, что писать, но и отслеживает связи в коде. Поменял функцию в одном месте — он автоматически покажет повторяющиеся места и предложит правки.
Плюс, появился крутой паблик API для автоматизации задач и CI/CD.
В общем, достойно.
#sourcecraft #ai #devtools
#заметка дня
Тут в нашем чатике aka @htmlshitchat человек задал вопрос: «Как заставить событие произойти только после долгого нажатия на кнопку?»
И, вроде, очевидный ответ: ставь таймаут да отменяй его:
Осторожно, псевдокод jQuery
let r = null;
$button.on("mousedown", function(e) {
e.preventDefault();
e.stopPropagation();
r = window.setTimeout(function() {
$button.html('Clicked');
}, 3000);
});
$button.on("mouseup", function() {
$button.html('Hold me');
window.clearTimeout(r);
});
function forward() {
tween.stop().to({
value: 2000
}, 3000).startFromCurrentValues();
}
function reverse() {
tween.stop().to({
value: 1000
}, 3000).startFromCurrentValues();
}
#статья дня
Вы когда-нибудь пытались анимировать смену цвета и сталкивались с тем, что в какой-то момент всё превращается в уныло-серое? Джош Комо как раз разбирает эту проблему.
Дело в том, что даже если мы задаём разные цвета через разные цветовые модели, браузер всё равно интерполирует их в RGB-пространстве. А оно ограниченное, и на кривой перехода иногда выпадает серый — как с градиентами (/channel/htmlshit/806), только теперь в анимации.
Казалось бы, решение простое: крутим hue в HSL, и серого не будет. Но на практике CSS-анимации всё равно сводятся к RGB, и мы снова получаем неожиданный результат. И более того, анимация от 0 до 360 (полный оборот) вообще не будет анимирована. Оптимизация!
Есть два способа это обойти:
1. Использовать filter: hue-rotate(), чтобы прокручивать оттенки напрямую.
2. Хранить угол оттенка в CSS-переменной и анимировать именно её, а не цвет в целом.
В итоге получается ровная и предсказуемая смена цвета без серых провалов.
Статья: https://www.joshwcomeau.com/animation/color-shifting/
#css #color #animation
#инструмент дня
Не устану повторять, что лучшая вёрстка — это та, которую делать не надо.
Поэтому я очень люблю конструкторы. Но мы тут не тильду делать собрались, потому речь о конструкторах раскладок.
И сегодня мне принесло очередной! FlexBox Labs: https://flexboxlabs.netlify.app/
Из названия понятно, что речь о флексбоксе, не о гридах. Но — повторю — одно другого не отменяет ни разу. Флекс и грид решают разные задачи, потому — стоит внимания.
Особенно учитывая, что на рынке не так много конструкторов под флекс, гриды казались более крутой технологией и натурально получили больше конструкторов.
Да и короткое объяснение, что и когда применять, на канале уже было: /channel/htmlshit/607
А что ещё круто, проект — открытый, можно держать у себя локально: https://github.com/prazzon/flexbox-labs
Генерирует как CSS, так и классы Tailwind.
Впрочем, гриды конструктор тоже может, в экспериментальном режиме: https://flexboxlabs.netlify.app/grid
#css #flex #layout #бородач
#фишка дня
Вот как вы думаете, что может преследовать разработчика веб-браузера во сне? Может, это разбор дерева DOM? А может, реализация всех новых атрибутов элементов?
Нет! Это поддержка легаси! Например, как вам такое сообщение в PR браузера Ladybird:
Atlassian login gets the base URL for its module scripts by throwing an error and pulling out the current script's URL from error.stack with regex.
function getBundleURL() {
// Attempt to find the URL of the current script and use that as the base URL
try {
throw new Error();
} catch (err) {
var matches = ('' + err.stack).match(/(https?|file|ftp):\/\/[^)\n]+/g);
if (matches) {
return getBaseURL(matches[0]);
}
}
RYBE — одежда с твоим языком программирования.
Где два айтишника могут познакомиться?
В офисе и на конференции. Нам этого мало. Мы захотели объединить людей, у которых одни интересы. Дать возможность узнать друг друга. В метро, на прогулке, в офисе, на конференции, в походе, в баре, в самолёте.
В каком-то смысле это мерч для твоего языка программирования.
А что еще?
- отшиваемся в Москве;
- плотный премиум-хлопок;
- фичи типо люверсов для крепления пропуска, кармана для наушников и салфетки для очков
Выбирай свой язык, заказывай, дари, носи сам: http://rybe.store/
Наш tg: @rybe_store
#зомби дня
Sanity написали про текущее состояние styled-components.
Библиотека официально с марта, если помните, в maintenance-режиме: новых фич ждать не стоит, и главная проблема — производительность. В React 18 она не использует useInsertionEffect, из-за чего вставка стилей тормозит рендер. И это ощутимо.
В Sanity сделали форк и оптимизировали вставку стилей, убрали лишние костыли и адаптировали всё под React 19. У Linear, после замены пакета на этот форк, рендер ускорился до 40% без переписывания компонентов.
Для React 18 они предлагают @sanity/styled-components, для React 19 — @sanity/css-in-js.
При этом авторы подчёркивают, что форк — временное решение. В ближайшей перспективе они советуют перестать писать новые компоненты на styled-components и выбрать альтернативу вроде vanilla-extract, Tailwind или Panda CSS, постепенно перенося стили.
Учитывая, что у нас в компании ещё огромное количество зависимостей от Styled Components (ведь все в целом ждали несколько иного развития событий), переход на форк, чтобы сгладить ситуацию во время апгрейда на React 18 и 19, кажется разумным. Тем более, что текущее состояние старых компонентов давно заморожено.
#css #react #sc
Когда-то у меня был коллега, который подсчёт калорий довёл до фанатизма. Он взвешивал на кухонных весах абсолютно всё — даже порционные хлеб и сыр для бутерброда. Каждый приём пищи в итоге превращался в мучение с калькулятором. Спойлер: долго так не протянул, сорвался и махнул рукой.
Правда в том, что контроль питания не должен быть пыткой. Эту проблему как раз и решает моя недавняя находка EasyFit AI — телеграм-бот, которому достаточно просто отправить фото еды или голосовое сообщение. Он мгновенно считает калории и БЖУ. Причём не «примерно», а с деталями: отличит бургер с одной котлетой от бургера с двумя, учтёт соусы, масло для жарки и даже газировку рядом.
✨ Почему это удобнее FatSecret или Yazio:
— Не нужно вручную вбивать каждое блюдо или ингредиент — достаточно сфотографировать тарелку.
— Работает и с домашней едой, и с ресторанной.
— ИИ-нутрициолог ежедневно даёт персональные рекомендации.
— Есть шаблоны блюд, учёт воды, напоминания о приёмах пищи.
— Можно получать советы по тому, что добавить в рацион, чтобы уложиться в норму.
В итоге — никаких весов и таблиц. Достаточно 30 секунд, чтобы понять, как обед вписывается в дневную норму.
🔥 Сейчас действует акция: пробный доступ за 1₽ на 2 дня, а потом — скидка 50% на годовой тариф. Предложение ограничено по времени, так что лучше успеть забрать цену.
Попробовать бот
#статья дня
Мне очень нравится пытаться учить разработку под 3D и WebGL в частности. Опыт имеется, но минимальный в рамках разработки промо-сайтов.
Шум там наложить, модельку картой нормалей увешать...
Поэтому я очень люблю статьи, которые объясняют работу с шейдерами на примерах. Например, темой статьи, ссылку на которую оставлю ниже, является имитация ЭЛТ-мониторов и телевизоров.
Да-да, под ретро-игры!
Ссылка: https://blog.maximeheckel.com/posts/the-art-of-dithering-and-retro-shading-web/
Даны базовые принципы квантизации изображений, дизеринга и результат приводится как на GLSL, так и готовая сцена на react-three.
Очень круто выглядит.
#webgl #shader #бородач
#фишка дня
Сидишь, переписываешь старый проект на новую дизайн-систему и тут оно.
Модальное окно.
И если предыдущей системе было всё равно на расположение кнопок отмены, сохранения — определил в форме и ладно — новая требует положить кнопки в Modal.Footer.
И всё бы ничего, но у тебя там форма. И не просто форма, а Redux Form-зависимая. И у неё свой внутренний обработчик submit. И снаружи его триггернуть — как-то многовато работы получается. И мешать в кучу компоненты модалки с компонентами формы неохота — всё протестировано давно, зачем трогать.
Что же делать? Очень просто! У button type="submit" имеется атрибут form, в котором — да, правильно — указывается id нужной формы. По аналогии с for у label. И клик по кнопке отправит форму, которая может быть расположена где угодно на странице.
<form id="test" onSubmit={() => null}>
<input type="text" name="name">
</form>
<button type="submit" form="test">Submit</button>
Golang: копирование и анонимизация данных
8 уроков, чтобы создать приложение на Golang, способное копировать и анонимизировать данные для prod-like окружений.
🎁Цена в сентябре всего 3250₽
Внутри курса:
➡️ Основы создания консольных приложений в языке программирования Golang, включая работу с флагами командной строки, обработку ввода-вывода и управление процессами.
➡️ Подключение к базам данных Postgres и MongoDB из своего приложения, выполнение запросов, обновлений и удаления данных, а также работа с транзакциями.
➡️ Разработка методики для анонимизации данных, чтобы защитить конфиденциальность информации при копировании данных между окружениями.
Как итог — у вас:
✔️ 8 видеоуроков — доступ к ним откроется сразу
✔️ Финальный проект – приложение для копирования и анонимизации данных, чтобы пополнить портфолио классным кейсом
✔️ И свидетельство о прохождении курса
➡️Узнать подробнее о курсе и забрать его по выгодной цене
#такое дня
12 сентября Cloudflare устроили себе эпичный автогол: https://blog.cloudflare.com/deep-dive-into-cloudflares-sept-12-dashboard-and-api-outage/
В новой версии дашборда React-хук внезапно превратился в пулемёт: вместо одного вызова useEffect он триггерился десятки раз подряд. Причина до обидного банальна — в зависимостях лежал объект, который пересоздавался на каждом рендере.
В итоге фронтенд начал долбить Tenant Service шквалом запросов, сервис не выдержал нагрузки и лёг. А вместе с ним посыпалась и авторизация всех API-запросов, так что по системе пошёл массовый вал 5xx.
И это ведь не какая-то загадочная бага в ядре Linux, а ошибка из разряда «прочитай первую статью про хуки». Её должны были отловить ещё на ревью.
Но видимо, ревью формальное, нагрузочных тестов не было вовсе, а сценарии перегруза и защиты от них решили «подразумеваются».
Рекомендую прочесть статью хотя бы ради того, чтобы узнать, что такое Thundering Herd :)
Особо смешно, что индустрия уже много лет живёт с готовыми решениями этих проблем. Есть react-query, SWR и куча других библиотек, которые умеют кешировать данные, контролировать повторные запросы, дебаунсить и ретраить без того, чтобы фронтенд превращался в DoS-атаку на свой же бэкенд. Но всё это дружно игнорируется, и в прод выкатываются костыли уровня «ну вроде работает».
В итоге — глобальная недоступность сервиса, вызванная элементарным skill issue. Ошибка, которую любой толковый джун заметил бы на месте, внезапно кладёт критичную часть инфраструктуры одной из крупнейших сетевых компаний в мире.
И нет, это не React виноват, дамы и господа, даже не начинайте.
Ирония в том, что чем больше индустрия пишет о «best practices» и «production-ready», тем чаще мы видим вот такие падения на ровном месте.
#react #useeffect #hook
#инструмент дня
Модульные шрифты всегда строились на простой идее: буква рождается из сетки. Ещё в 1920-е годы баухаузовцы экспериментировали с кругами, квадратами и треугольниками, чтобы создать универсальный алфавит, который можно воспроизвести где угодно — от печатного станка до архитектуры. Позднее Вим Кроуэл и другие дизайнеры показали, что строгая сетка может быть источником бесконечного разнообразия форм.
Сегодня к этим традициям обращается новый онлайн-редактор GRID TYPE. В нём можно выбирать разные сетки, настраивать их параметры, собирать буквы как из конструктора, экспериментировать с модульностью, сегментацией или пиксельностью.
Получившийся результат легко превратить в шрифтовой файл и использовать в реальных проектах.
Советую заглянуть в примеры — шрифтами дело не ограничивается! Орнаменты тоже тут. Можно использовать как часть CTF-игры…
Для тех, кто работает с кириллицей, доступна отдельная бета-версия: beta.grid-type.com А основной сервис здесь: grid-type.com
#fonts #tool
Ошибка доступа: необходимо обновить знания по базам данных 👁️🗨️
Академия Selectel выпустила квиз по базам данных. Проверьте свои навыки работы с СУБД и повторите основные термины — а после теста получите промокод на 1000 бонусов в панели управления Selectel.
Жмите на ссылку, чтобы начать квиз 👉
#фишка дня
Вот вы знали, что в слушатель события можно передать AbortSignal и не выкаблучиваться с именованными функциями и вообще перестать слушать много событий разом, если надо?
А вот можно! Как в этом примере от Мэтта Покока.
И больше таких приятных современных вещей описано в статье Марка Грабански. Крайне рекомендую к ознакомлению.
#js #event #abortsignal #бородач
#инструмент дня
Одной из самых популярных задач по работе с изображениями было и остаётся удаление фона с картинок. Вокруг этого развелось какое-то невероятное число сервисов.
И все хотят денег.
Но мы же с вами понимаем, что даже достаточно сложную нейронку можно запустить прямо в браузере, правда? Мощностей вашего компьютера в совокупности с возможностями WebGPU более чем хватит, чтобы работать с моделями разной направленности.
Итак, вашему вниманию — Transformers.js, как средство работы с моделями, и одно из самых наглядных его применений — удаление фона с фото прямо в вашем браузере: https://github.com/huggingface/transformers.js-examples/pull/4/files
Демо: https://huggingface.co/spaces/webml-community/remove-background-webgpu
Бесплатно, без SMS.
Конечно, Transformers.js могут и не такое, была бы натренированная модель: анализ эмоциональной окраски текста, распознавание речи, получение выжимки из текста... Впрочем, ребята и их предоставляют, в огромном количестве.
Огонь? Огонь! 🔥
#js #ml #бородач
🚀 Стажировка для начинающих аналитиков в Яндексе
Яндекс открыл новый набор стажёров-аналитиков в Москву и Санкт-Петербург. Компания обновила тестовые задания: если вы уже пробовали свои силы раньше, можно пройти ещё раз.
Стажировка — это возможность работать над реальными продуктами с миллионной аудиторией: запускать A/B-тесты, анализировать поведение пользователей, строить дашборды и предлагать решения, которые напрямую влияют на развитие сервисов. Для стажёров предусмотрены гибкий график, зарплата, поддержка наставника, Айтиобщага для участников из других городов.
И даже отложенный оффер — если вы ещё учитесь и хотите вернуться в Яндекс позже.
📍 Что важно знать про отбор
Первый шаг — тестовое задание. Оно включает задачи по алгоритмам, SQL и математике. Важно уметь писать эффективные запросы (в том числе с оконными функциями), уверенно работать с числами и логикой, применять статистические методы. После теста участников ждут технические секции и знакомство с командами.
👉 Подать заявку можно на сайте. Там же есть полезные материалы, которые помогут подготовиться к отбору.
#инструмент дня
Разработчики Google Chrome вот буквально вчера представили MCP для Chrome DevTools! Вот тут: https://developer.chrome.com/blog/chrome-devtools-mcp
MCP расшифровывается как Model Context Protocol — это протокол, который задаёт единый способ подключения внешних инструментов и источников данных к ИИ-моделям.
Зачем оно надо? Ну, собственно, это то самое недостающее звено в разработке: даёт возможность агенту реально пойти и посмотреть данные реального приложения, а не вашего о нём представления.
Живые метрики скорости и стабильности, реальный исполняемый код — все это доступно девтулзам, а теперь, значит, и агенту.
Берёшь такой и спрашиваешь: «У меня там валидация не срабатывает когда я ввожу неверный емейл, разберись». И ведь разберётся!
Поддерживаются все необходимые события, вплоть до загрузки файлов и получения состояния сети.
Не, кроме шуток, это очень круто. Теперь можно подсоединиться к Jira, Figma, натравить это всё на браузер и отдохнуть наблюдать :)
#chrome #mcp
Приглашаем на конференцию по защите и монетизации софта GuardConf 2025
📆 2 октября, Москва, LOFT #2
Встречаемся с ведущими экспертами отрасли, чтобы обсудить практики, которые реально помогают создавать и развивать российское ПО.
Что в программе:
🔵Разбор аналитики рынка ИТ и мер государственной поддержки отрасли
🔵Обсуждение технологий, которые реально помогают в разработке продукта, а также ландшафта ИТ-экосистем на российском рынке
🔵Кейсы по защите софта и борьбе с пиратством
🔵Лучшие практики по разработке безопасного ПО без уязвимостей
🔵Рекомендации по выбору бизнес-модели для грамотного лицензирования
🔵Стратегии вывода продукта на новый уровень
💡 Вас ждут демонстрации решений в интерактивной зоне и живой нетворкинг с теми, кто создаёт и развивает российское ПО.
На конференции соберутся CTO, директора по продукту, разработчики, тимлиды, специалисты по ИБ и AppSec, а также эксперты из разных ИТ- и B2B-компаний.
⏩ Программа и регистрация на сайте
Заявки проходят модерацию
Сообщество конференции GuardConf
#фишка дня
Сделали вы такие флекс-контейнер, потомки в колонку, по центру, красота.
Но тут что-то пошло не так и контейнер стал слишком узким. Появился скролл. Казалось бы, невелика потеря: пользователь поскроллит.
А вот фиг!
Контейнер просто обрежет самого широкого потомка и не даст посмотреть его содержимого.
Что же делать?
Очень просто, Стефан Юдис напоминает нам о существовании ключевого слова safe, которое можно передать аргументом в align-правило:.container {
display: flex;
flex-direction: column;
align-items: safe center;
width: 50%;
}
Смотрим видео. Теперь можно будет спокойно доскроллить до края самого широкого элемента.
Подробнее: https://www.stefanjudis.com/today-i-learned/safe-unsafe-alignment-in-css-flexbox/
По поводу поддержки браузерами: Chrome со 115 и Firefox с 63. И — ура — Safari с 17.6. В прошлый раз когда я эту статью упоминал — поддержка в Safari была только в TP.
А еще там Safari 26 вышла с поддержкой анимаций по скроллу, будем скоро вспоминать. Слава богу, macOS 26 для этого ставить не нужно.
#flex #css #scroll #бородач
#новость дня
TikTok Sans — теперь не только фирменный шрифт соцсети, но и полноценный опенсорс.
Его изначально делали в Grilli Type: нужен был вариативный гротеск с хорошей читабельностью и поддержкой 460 языков. Потом в работу подключились Contrast Foundry и Type Network. В итоге получился масштабный проект: шрифт оптимизировали под интерфейсы, а также под особенности рендеринга на разных платформах и языках.
Да, кириллица поддерживается!
В TikTok захотели, чтобы фирменный шрифт стал ресурсом для сообщества. Вместо того чтобы держать его закрытым, они оформили публичную OFL-лицензию и передали в Google Fonts и GitHub.
По сути, это редкий случай, когда корпоративный брендовый шрифт превращается в открытый инструмент для дизайнеров и разработчиков.
Google Fonts
GitHub
Для нас это значит, что можно использовать шрифт прямо в проектах без лицензионных заморочек.
#font #tiktok
#инструмент дня
Да-да, я в курсе, что писать SQL-запросы, возможно, не самая частая компетенция у фронтендеров, но мы же все хотим узнавать новое, не правда ли?
А запросы ведь могут стать достаточно сложными. Конечно, есть EXPLAIN, но его вывод по сложности может сравниться с самим запросом. Если не сложнее.
К счастью, есть визуальные инструменты! И одним из таких является MySQL Visual Explain.
Уникальное название, согласен.
Ссылка: https://mysqlexplain.com/
Рекомендую посмотреть примеры и попробовать самим, если MySQL является частью вашего стека.
Кстати, у них даже API есть, одним из примеров использования является плагин для Laravel: https://github.com/tpetry/laravel-mysql-explain
То есть, вариант использования может быть таким:
1. Прогнали интеграционные тесты
2. Нашли медленные запросы с помощью telescope
3. Отправили их на визуальный анализ
4. ...
5. Пофиксили!
Да и для обучения — бесценно.
#mysql #explain #laravel #бородач
#молния дня
По данным Aikido, в экосистеме npm снова обнаружена очередная атака на цепочку поставок.
Речь идёт о новом черве, который действует автоматически и был создан той же группой, что стояла за инцидентом в августе. Кажется, они прочитали комментарии к предыдущему посту: /channel/htmlshit/3761
Схема атаки выглядела так: в репозиторий загружались вредоносные версии пакетов. При установке они собирали информацию из окружения и CI — переменные process.env, ключи облачных сервисов и другие секреты.
Эти данные выгружались в GitHub в репозитории с названием «Shai-Hulud». Параллельно добавлялись workflow в GitHub Actions, которые отправляли содержимое на внешний сервер (через webhook) и дублировали его в логи.
Если у жертвы находились npm-токены, вредоносный код автоматически модифицировал другие пакеты этого же мейнтейнера: версия повышалась, в package.json добавлялся вызов скрипта, а вместе с пакетом публиковался payload. В результате заражение распространялось дальше без участия человека. Кроме того, в некоторых случаях приватные репозитории переводились в публичный режим, что увеличивало масштаб утечек.
Проверьте свои машины на наличие червя:
find . -type f -name "*.js" -exec sha256sum {} \; | grep "46faab8ab153fae6e80e7cca38eab363075bb524edd79e42269217a083628f09"
@ctrl/tinycolor.
Каждый, кто пытался когда-то войти в опенсорс, знает эту классическую сцену: открываешь GitHub, находишь проект мечты — и тут на тебя обрушивается стена из сотен issues, половина из которых требует понимания всей кодовой базы, а другая половина закрыта три года назад. Первая задача должна быть маленькой и понятной, но поиск такой задачи часто превращается в отдельное приключение.
Чтобы этот этап перестал быть лотереей, Yandex Open Source запустил страницу Good First Issue. Там в реальном времени собираются «входные» задачи из разных GitHub-проектов Яндекса. Не нужно тратить часы на ручной поиск — свежие issues подтягиваются автоматически, а дальше дело за вами. В планах — фильтры по проектам, языкам и технологиям.
Такой формат упрощает старт и позволяет быстрее перейти от чтения документации к реальной практике. Для фронтенд-разработчиков хорошим примером может быть дизайн-система Gravity — понятная точка входа, где можно сразу попробовать свои силы. Но список не ограничивается UI: в последние годы компания выкладывает в открытый доступ и крупные датасеты (например, Yambda), и инструменты вроде профилировщика Perforator.
Все проекты лежат на GitHub, а значит, остаются привычные пулреквесты, обсуждения и, конечно же, те самые GitHub-страйки, которые никуда не денутся. А новая страница просто экономит время и делает первый шаг заметно проще.
#инструмент дня
А вот бы запустить ffmpeg в браузере, да так, чтобы прямо на клиенте...
Если кто не знает, ffmpeg — это буквально столп современного стриминга и конвертации видео. На нём работает буквально всё, от Twitch до ваших любимых ботов «скачать видео с тиктока». И почти все плееры тоже. Даже VLC (с чем связан недавний скандал).
Ну, кстати, это вполне реально: есть порт ffmpeg для Webassembly. Со своими нюансами и весьма сложным API, но есть же.
Но на свете существует не один лишь только ffmpeg! Вот, например, Mediabunny: совсем свежий открытый проект, который реализует работу с видео и звуком прямо в браузере. Обладает весьма простыми API, поддерживает прозрачную работу с разными источниками данных, как сеть, так и локальные файлы. Посмотрите только на примеры: https://mediabunny.dev/examples
Извлечь метаданные, сгенерировать раскадровку, пережать видеофайл, запустить стрим — всё возможно. А главное, написано всё на TypeScript, легко тришейкается и читается. Конечно, она частично стоит на плечах гигантов — WebCodecs API — но, как и всегда, объём проведённой работы над стандартным API огромен. Хороший DX из ниоткуда не возьмётся.
Если вы хотели войти в мир кодирования видео — вот он ваш шанс, делайте свои редакторы! Посмотрим, кто бросит вызов капкату :)
#video #codec #ffmpeg #encode #decode
#статья дня
Клоунов к предыдущему посту больше, чем людей, кто реально зашёл обсудить проблему. Плохо, дамы и господа, очень плохо. Где жир?
Я тут вам неожиданно вкусного принёс! Последнее время Хабр представляет из себы нытьё великовозрастных программистов, рандомные переводы и сомнительного качества бизнес-кейсы в корпоративных блогах. Но тут, наконец, всё, как я люблю!
И реальный кейс, и геометрия, и чёткое проблемополагание, и погружение в документацию. А всё для чего — для отрисовки красивых стрелочек по кривым Безье! И их удобном последующем редактировании.
Вот оно: https://habr.com/ru/companies/ispring/articles/946176/
Кто не знает, что такое кривые Безье — в статье объясняется, а ещё я давно приносил тренажёр и — опять же — статью: /channel/htmlshit/3196
Статья стоит даже сохранения в виде PDF, чтобы перечитать спокойно при случае и попробовать реализовать самому. И, как обычно, оскорбительно мало комментариев :(
В общем, очень рекомендую. Без скидок, офигенно.
#svg #bezier
Ищем новичков во фронтенд-разработке и вёрстке сайтов.
Хотим показать, как получить реальный опыт в разработке сайтов и веб-приложений.
А именно:
- Сверстать веб-сайт на HTML + CSS;
- Реализовать функционал на JavaScript;
- Пощупать фронтенд-фреймворк Angular;
- Подключить Backend и загрузить сайт на хостинг.
Чтобы в итоге ты своими руками разработал качественный сайт, который не стыдно добавить в портфолио или продать.
Такой опыт можно получить на бесплатном практикуме уже завтра с поддержкой от опытных кураторов на каждом этапе.
👉 Приходи на бесплатное обучение и зови с собой друзей
Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку.