14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#уязвимость дня
Итак, Next.js обосрался. Гремит уже пару дней точно: https://nextjs.org/blog/cve-2025-29927
И уязвимость, если коротко, заключается в следующем: сформировав определённый заголовок, можно пропустить все проверки аутентификации пользователя и выполнить нужный код.x-middleware-subrequest: middleware
Если значение этого заголовка содержит имя middleware (middlewareInfo.name), то выполнение данного middleware пропускается.
Естественно, должно сойтись несколько условий, например — аутентификация должна проходить в middleware, который мы и можем пропустить. Скриншот очень хорошо показывает суть проблемы.
Так вот, за подробностями-то можете сходить сюда: https://zhero-web-sec.github.io/research-and-things/nextjs-and-the-corrupt-middleware, но вот что очень интересно.
А интересно это:
2025-02-27T06:03Z: Disclosure to Next.js team via GitHub private vulnerability reporting
2025-03-14T17:13Z: Next.js team started triaging the report
2025-03-14T19:08Z: Patch pushed for Next.js 15.x
#фишка дня
Надоело угадывать высоту строки, чтобы текст стал высотой ровно в прописную букву? Say no more!
line-height: 1cap;
#такое дня
Тринадцать лет назад я работал в горнодобывающей/камнеобрабатывающей компании и пилил всякие инхаус-проекты: от учёта блоков, добытых на карьере, до их продажи, каталогизации, распиловки. Вплоть до визуального конструктора надгробий (на котором тщетно пытался сделать бизнес, но сегодня не о нём).
И вот сегодня в девять утра позвонил бывший коллега. С проблемой 🫠
Итак: не грузятся продажи больше, чем за пару дней. Сервер выбивает в пятисотую.
Начал диагностику и понял, что падает по памяти. Причём, не потому что много продаж, а потому что может быть много блоков в продаже.
Ну а памяти-то там кот наплакал. Как крутилось на шаред-хостинге со 128 мегабайтами памяти на PHP 5.3, так и крутится.
Как оказалось, я образца 2012 года, для подсчёта продаж просто грузил в памяти вообще все блоки, а потом их уже фильтровал и считал объёмы.
Казалось бы, какая фигня, скажете вы, ну сколько там тех блоков?
Ну так-то за 13 лет добыли почти 24000 блоков и совершили несколько тысяч продаж. А каждый блок — специфика работы — должен был сохранять историю изменений, распилов, расколов и так далее... Ревизии, короче. Это довольно ощутимый объём данных.
Сначала я предложил просто убрать статистику. Но оказалось, это едва ли не самая нужная фишка — даёт моментальную видимость по контрагенту.
Естественно, код был переписан самым простым способом — пакетной обработкой. Грузим по 5000 блоков, считаем объём. И всё прекрасно заработало.
Это, к слову, о преждевременной оптимизации. Довольно плохой масштабирующийся код прекрасно работал в не самой маленькой компании 13 лет :)
Такой вот blast from the past, ничего не скажешь. Кто бы вообще мог подумать, что это всё будет работать столько лет без проблем.
#php #memory
#пятница дня
Срочно идём и вводим в консоль traceroute -m 50 bad.horse.
И поём все вместе :)
P. S. а цепочка сертификатов https://signed.bad.horse содержит тот же текст.
#такое
🚀 Качайте английский за счёт компании для работы в IT!
🌍 Хотите выйти на международный уровень в сфере разработки, аналитики, проектного управления или дата-сайенса?
Яндекс Практикум предлагает курсы, которые помогут уверенно общаться на английском языке в профессиональной среде:
✅ Вместо зубрёжки — симуляции интервью, рабочих созвонов и даже смолтока возле кулера
✅ Вас ждут встречи с иностранными IT‑специалистами и много разговорной практики
✅ Мы взяли за основу опыт работы Яндекса с международными партнёрами, чтобы вы освоили навыки, которые ценят зарубежные работодатели
✅ Поможем эффективно совмещать учёбу с работой
✅ Выдадим сертификат об окончании курса
👉 Курс может оплатить ваш работодатель, заполните форму, расскажем, как это устроено.
Реклама, АНО ДПО “Образовательные технологии Яндекса”, ИНН 7704282033, erid: 2VtzqucjFMA
#новость дня
Google переводит рендеринг шрифтов в Chrome на Rust
В Chrome 133 для Linux, ChromeOS и Android по-умолчанию включён новый движок рендеринга шрифтов Skrifa, написанный на Rust. Он заменяет старый C++-код и является частью проекта Fontations.
Почему это важно?
Рендеринг шрифтов — одна из самых уязвимых частей браузера. Ошибки в обработке OpenType-файлов могут приводить не только к некорректному отображению текста, но и к серьёзным уязвимостям. 70% всех багов безопасности в Chrome связаны с управлением памятью, а Rust помогает устранить эту проблему на уровне языка.
Похоже, Google наконец-то заметил, что Firefox уже лет пять как использует Rust, и решил, что пора бы догонять.
📌 Подробнее:
🔗 Статья на русском
🔗 Блог Google
#rust #chrome #opentype
Как выглядит ваше типичное утро четверга? Если там нет DJ Stonik1917 и милых роверов, то даже не зовите. А если серьезно — так утренним кофе-рейвом Яндекс начинает новый сезон образовательных проектов для стажёров.
Кто куда, а я на рейв 🌟 📹
#новость дня
Ну что же, скажем Styled Components пока-пока!
https://opencollective.com/styled-components/updates/thank-you
Спасибо им, что показали нам, как можно работать с компонентами. Правда и цена оказалась высока.
Пока коллективный CSS-in-JS динозавр решал проблему экстракции CSS из бандла, растеряв мощь Babel под натиском Rust-решений, подтянулись млекопитающие вроде Tailwind и заняли нишу гораздо быстрее, мощнее и эффективнее.
С бесплатной экстракцией в том числе, да. И не ограниченные фреймворками.
Маятник мощно качнулся. Я не любитель Tailwind и, возможно, предпочту CSS Modules, но надо признать, что работу они проделали прекрасную.
Помянем, в общем.
А вторая новость — кратко: вышел Parcel 2.14.0 c поддержкой React Server Components!
Они подчёркивают, что Parcel сам по себе не фреймворк, но обеспечивает необходимый минимум и позволяет строить фреймворки уже на его базе.
Дивный новый мир!
#cssinjs #styled #parcel #tailwind
#такое дня
Есть две вещи, которые я очень не люблю в веб-приложениях.
Первая — однокнопочные шорткаты. Например, в Jiira — нажатие на W добавляет тебя в список следящих за таской людей. Зачем? Почему? Непонятно.
Возможно, кому-то и удобно, но моя природная неусидчивость заставляет меня иногда нажимать кнопки на клавиатуре просто так. Ну нравится.
Хабр тоже этим страдает. А в Твиттере — вообще аккордные сочетания клавиш (типа G-T), как будто я в каком-то сраном Emacs.
Не, есть, конечно, приложения, где это возведено в абсолют — вроде Vim. Но это прям идеология. От веб-страниц я такого не жду.
А вторая категория приложений — те, кто перехватывает стандартные шорткаты. Например, ConfigCat — менеджер фича-флагов — делает неудобоваримое с шорткатом поиска.
Зачем? Почему? У меня всего 3-5 флагов на экране, имейте совесть. А может, я ищу UI-элемент какой-то. Ведь всё, что есть на экране — это текст.
А самое смешное, что они записывают факт предупреждения в LocalStorage, и больше такое не показывают. Я прям не могу представить себе этот диалог между продактом и лидом разработки. Надеюсь, была немая сцена.
А что раздражает вас в UX известных приложений и сайтов?
#ux
Сегодня Яндекс всё меньше ассоциируется исключительно с разработкой софта. В 2017 году появился первый автономный автомобиль, в 2018 — первая Станция, в 2022 — первый робот Маркета. Все эти разработки становятся возможными благодаря людям с инженерным духом — тем, кто не боится экспериментировать и создавать железо.
25-26 апреля пройдет Repair Cafe — два дня для тех, кто любит технологии, железо и запах флюса по утрам.
Главной точкой притяжения станет мастерская, где можно починить или разобрать технику под присмотром опытных наставников. Все нужные инструменты выдадут, но чинить придется самому.
На мероприятии можно будет послушать о том, как сделать устройство для чтения ДНК напильником в домашних условиях. Думаю, зайдет тем, кому интересен процесс реверс-инжиниринга микросхем и прочие инженерные нюансы.
Еще из интересного: будет техносвоп для обмена гаджетами разных лет, починка культового ПК «Ленинград» (олды помнят), и передвижная выставка, где можно потрогать роботов, лидары и игровые консоли.
Количество мест ограничено, зарегистрироваться и узнать детали можно тут.
#баг дня
Как вы думаете, что обозначает тип {}?
Ну, буквально:
type b = {};
TemplateQueryDetails = Omit<
z.infer<typeof QueryDetails>, 'metadata'
>;
TemplateQueryDetails = Omit<
z.infer<typeof QueryDetails>, 'metadata'
> & {};
Фронтенд с юмором — это "Frontline" 💻😂
Ты кодишь, но не забываешь смеяться? Тогда заходи, тимлид фронтенда рассказывает про все что связано с web-разработкой и не забывает запостить смешных мемасов.
На Frontline соединяются профессионализм и веселье в мире веб-разработки.
Здесь ты найдешь:
👨💻 Гайды и советы по HTML, CSS, JavaScript и популярным фреймворкам.
😂 Мемы и шутки про будни разработчика — потому что смех это тоже часть работы!
🔥 Новости и тренды в веб-разработке — чтобы быть на шаг впереди.
💬 Обсуждения и обмен опытом с коллегами по цеху.
🎉 Вдохновение и мотивация — ведь кодить можно с улыбкой (даже на javascript)
🔗 Присоединяйся и и будь в курсе фронтенд-новинок, не забывая про отличное настроение 🚀
#реальноклассныйканал
#новость дня
Вчерашнего дня, конечно, и многие из вас уже в курсе, но...
TypeScript переписывают на Go!
Да, если вы не знали — транслятор TypeScript всё это время был написан на самом себе, что, как вы понимаете, не делало его быстрым :)
И вот, новость: https://devblogs.microsoft.com/typescript/typescript-native-port/
Результат ошеломляет: разбор типов и сборка уже в 10 раз быстрее! Это означает, что и LSP в ваших IDE будут быстрее. И работать станет приятнее.
Очень рекомендую пойти почитать статью.
Кстати, кто же этот седой дядя на видео? А это Андерс Хейлсберг! Создатель Turbo Pascal, Delphi, C# и, внезапно, TypeScript.
И на этом видео он, в том числе, объясняет, почему не Rust. Этим вопросом задолбали уже всю команду.
И, если коротко:
1. Это портирование, а не переписывание. Они хотели оставить структуру проекта и работы над ним той же, что и была.
2. Rust, хоть и облегчает управление памятью, полностью не освобождает от связанного с этим управлением бойлерплейта. И, поскольку, структура транслятора TypeScript представляет из собой огромный набор вложенных друг в друга структур, количество бойлерплейта вышло бы неразумным.
В общем, нас ждёт дивный новый мир! И я очень рад. И выбором языка тоже.
#typescript #go
Алгоритмы, кодогенерация и куда идёт Go: строим платформу для разработчиков
В новом выпуске подкаста «Расскажите про MWS» обсуждаем как работает команда, которая создает базовую инфраструктуру для разработчиков облака. Дмитрий Новиков — TechLead команды Development Platform в MWS рассказывает:
— Зачем команда пишет собственный кодогенератор
— Нужны ли задачи про алгоритмы на собеседованиях
— В каком направлении развивается Go и есть ли повод для беспокойства
Смотрите и слушайте на всех популярных площадках:
🎬 YouTube
🎬 VK Видео
🎧 Яндекс Музыка
🎧 Apple Podcasts
🎧 Mave Digital
#новость дня
Утекли промпты и модели v0.dev от Vercel: https://github.com/x1xhlol/v0-system-prompts-and-models/
Я их почитал и — как и со всеми кастомными промптами для тех же Cursor, Aider и Claude — сделал для себя всё тот же вывод.
Если вы сами прочитаете промпты и будете следовать им и в своей работе — это сделает вас лучшим (чем вы сейчас) разработчиком. Как подготовка к собеседованию.
Серьезно, они буквально представляют из себя весьма хорошее техническое задание.
К тем, кто составляет эти промпты — вопросов нет :)
В любом случае, очень круто, что инструменты, сокращающие рутину, стали нашей нормальной действительностью.
#ai #vercel #prompt
Как Павел Дуров и Илон Маск перевернут IT-индустрию в 2025 году?
Новости из digital-мира, которые влияют на вашу жизнь и которые интересно обсуждать, отбираются и фильтруются на канале AdBranch.
➡️ Следить за движухой
#ссылка дня
Наверное, стоило прислать это сразу после пятничных котов :)
Итак, вашему вниманию: диаграмма разрешения кодов HTTP.
Тут: https://github.com/for-GET/http-decision-diagram?tab=readme-ov-file
Разрешения не в смысле "можно ли", а в смысле процесса принятия решения, когда какой код уместен.
Она довольно большая и основывается на большом количестве RFC: RFC7230, RFC7231, RFC7232, RFC7233, RFC7234 RFC7235.
Ну и там, где в спецификациях оставлены пробелы — дополняет.
Штука довольно большая, но весьма хорошо укладывается в голове.
#http #diagram
Выиграй стажировку в IT и стартуй в карьере!
Pulpy и SuperJob запустили проект “Карьера шаг за шагом”. Его участники могут выиграть индивидуальную карьерную консультацию и стажировку в топовых компаниях.
У каждого направления (маркетинг, ИТ, бизнес, большие данные) есть свой эксперт. В вопросах ИТ своим опытом поделилась Наталия Давыдова, разработчица и автор канала “Наташа пишет про IT”. На сайте вы найдете видео-интервью и гайд: там много дельных советов и личный опыт Наташи по поиску работы.
Что делать?
Зайди на сайт, посмотри видео и скачай гайд
Отправь резюме — первым 200 участникам эксперты SuperJob бесплатно дадут обратную связь!
В мае эксперты выберут нескольких ребят, которых пригласят к себе на карьерную консультацию. А самый сильный участник получит стажировку в ИТ-департаменте SuperJob.
🔗 Ссылка на проект
Реклама АО “Мултон”, ИНН 7810249327, erid: 2W5zFK9uByA
#карьера #стажировка #IT #вайб
#ссылка дня
Пятничных котов вам в ленту! Но просто котов вы можете найти где угодно, тут же — HTTP-коты: https://http.cat/
Знать коды протокола HTTP должен каждый веб-разработчик, чтобы не попадать в глупые ситуации и правильно пользоваться API. А раз их можно выучить, глядя на котов, почему бы и нет.
#http #handbook #бородач
#фишка дня
Когда вызываешь async-функцию, но не обрабатываешь её результат, промис остаётся "висящим" (floating). Это может привести к разным проблемам:
Потеря ошибок.
Если промис завершается с ошибкой, но её никто не ловит, можно упустить важные сбои в коде.
Непредсказуемое поведение.
Асинхронный код может выполняться позже, чем ожидается, что приведёт к багам.
Неоптимальное использование ресурсов.
Если промис делает сетевой запрос или что-то грузит, но результат нигде не используется, это просто тратит ресурсы впустую.
Ещё, конечно, IDE ругается и бесит.
Чтобы явно указать, что промис можно игнорировать, используй один из этих способов:
void fetchData(); // Показываем, что знаем о промисе, но он нам не нужен
fetchData().catch(() => {}); // Глушим ошибки (осторожно, можно скрыть баги!)
fetchData().then(() => {}); // Запускаем, но не обрабатываем результат
(async () => { await fetchData(); })(); // IIFE, помните ещё такое?
no-floating-promises (https://typescript-eslint.io/rules/no-floating-promises/) в ESLint помогает находить такие промисы и не оставлять их без внимания.
Если нужно подтянуть разговорный английский для работы, помочь с этим могут в онлайн-школе Authentic Pigeon.
Ребята вкладываются в кастомизацию и топят за человеческий вайб, чтобы развивать английский было в кайф, а не обязаловку.
Абсолютно кайфую от подхода ребят. Занятия тут это не потогонка, а крутой дружеский разговор.Студент школы — Иван, QA инженер
Узнать подробнее о занятиях и записаться на бесплатный демо-урок можно в боте.
Реклама. Моисеев Кирилл Владимирович. ERID: 2VtzqwKiQ6b
#баг дня
Посмотрите на иллюстрацию к посту, ничего интересного не замечаете?
А тут происходит ого-го какая драма!
Да, использование новомодных HDR-цветов и описывание их в OKLCH в Chrome на macOS приводит к неожиданным эффектам, будучи применённым на корневую ноду, aka тег HTML.
Правильный цвет тот, что темнее. Откуда я знаю? В Safari бага нет. В FIrefox, кстати, тоже.
А багу в Chrome на macOS тупо два года уже: https://issues.chromium.org/issues/40064153
Ну, бывает.
#oklch #color #bug
В России можно посещать бесплатные IT-мероприятия хоть каждый день: как оффлайн, так и онлайн.
Чтобы не пропустить полезные — сохраните канал @FreeItEvent.
Анонсы вебинаров, хакатонов, конференций, мастер-классов и других событий в IT. Ивенты от гигантов индустрии и лучших специалистов по frontend и backend разработке
Всё публикуют здесь.
#статья дня
Я уже не раз выражал свою любовь к шейдерам и 3D в целом. Это какой-то свой особый мир, который требует отдельного погружения. Когда удаётся прикоснуться самостоятельно — хоть немного — уже ору от восторга.
Хочется выделить хотя бы недели две только на изучение нужной математики.
Ладно, хватит нытья. Сегодня у нас прошлогодняя работа Shopify: глобус чёрной пятницы.
Да, глобусы разных вариаций с какими-нибудь рюшками постоянно появляются в ежегодных отчётах разных компаний, то у GitHub, то у Google. Но Shopify добавили nice touch в виде шейдеров фейрверков.
И выкатили об этом статью! Вот: https://shopify.engineering/how-we-built-shopifys-bfcm-2023-globe
Пройдите сразу, насладитесь этой красотой. А уже потом провалитесь в статью и удивитесь, что все эти фейрверки — это просто вершины икосаэдров.
Кстати, статья интерактивная и начинена примерами кода с ног до головы. Включая работу с моделью глобуса, текстурами и камерой.
Это настоящий подарок.
#webgl #glsl #shaders #бородач
#codepen дня
Сайт по продаже пончиков должен быть пончиком и точка!
Пруф: https://codepen.io/narrowdesign/pen/ZYErvWv?editors=1000
Извините, я просто никак больше не могу это прокомментировать.
#threejs #3d
#проект дня
Мы прошлым летом проводили отпуск в Валенсии. Целью был более пляжный и гастрономический отпуск, нежели любование музеями и природой, потому поселились в районе, который когда-то представлял из себя рыбацкую деревню — Эль Каваньял (El Cabanyal).
Этот бывший рыбацкий квартал славится домами, украшенными азулежу — расписными глазурованными плитками. Они служили не только украшением, но и защитой стен от влаги и солнца.
Часто встречаются узоры в сине-белых тонах, растительные мотивы, геометрические орнаменты и изображения святых. Многие дома облицованы плиткой полностью или частично, создавая неповторимый колорит района. Сейчас плитки ценятся как культурное наследие, но часть зданий с ними утрачена из-за застройки.
Меня настолько эти плитки и эта традиция восхитили, что я посвятил несколько прогулок по жаре +40 только их фотографированию.
К сожалению, сфотографировать и сами дома тоже мозгов не хватило.
И так фотографии и лежали с конца июля, но я подумал, что пришло время их оформить в очередной проект!
Итак:
1. Собираем фотографии в каталоге
2. Вычленяем из них геоданные
3. Находим в интернете векторный файл пина на карте, для маски, и готовим картинки маркеров и миниатюры.
4. Выводим всё на карте используя библиотеку React Leaflet.
Ну по пути, конечно, пришлось придумать простой алгоритм, центрирующий карту по фотографиям и отсекающий выбросы. Довольно коротко получилось:
const sortedTiles = [...tiles].sort((a, b) => a.lat - b.lat || a.lng - b.lng);
const majorityStart = Math.floor(tiles.length * 0.3);
const majorityEnd = Math.ceil(tiles.length * 0.7);
const majorityTiles = sortedTiles.slice(majorityStart, majorityEnd);
#codepen дня
Как сделать элементы интерфейса... зернистыми? Напоминающими шершавую структуру, например, пластика? Или плёнки...
Для достижения эффекта можно воспользоваться SVG-фильтром! Например, от Аны Тюдор: https://codepen.io/thebabydino/pen/MWBNrZq
К сожалению, на Safari съехали буквы, но сути дела не меняет :)
#svg #grainy #бородач
#codepen дня
Давно не было рубрики, потому что это ну как-то ну слишком лениво.
Но вы только посмотрите на эту кнопку от Петра Кнолла: https://codepen.io/Petr-Knoll/pen/QwWLZdx
Если это не приближает нас к пику глассморфизма — то я не знаю, что приближает :)
#css #glassmorphism
#инструмент дня
Сложно представить себе проект, в котором не использовался бы ESLint.
Ну разве что вы или до сих пор на TSLint или ушли на Biome.
Так вот, в прошлом году, совместно с релизом версии 9, они обозначили свои планы. А планы большие: стать основным инструментом для поддержки качества кода на фронтенде. Это значит, линтинг JS, TS, JSON, Markdown. Ну и CSS тоже.
И вот, наконец, 18 февраля команда объявила о начальной поддержке линтинга CSS: https://eslint.org/blog/2025/02/eslint-css-support/
Соответственно, выпустив плагин @eslint/css:
no-duplicate-imports - запрещает дубликаты @import rules
no-empty-blocks - запрет пустых блоков
no-invalid-at-rules - валидация @-правил
no-invalid-properties - запрет некорректных свойств
require-baseline - самое интересное, заставляет придерживаться Baseline (современных фич веба и CSS в том числе, которые поддерживаются всеми браузерами в должной мере)
use-layers - а вот это спорно, использование слоёв aka @layer. Я пока не видел никого, кто их понимает :)
Ну что, убираем Stylelint?
#css #lint #eslint
#фишка дня
Не совсем про разработку, но достаточно интересно.
Итак, понадобилось мне вчера отправить фотографии костюмов из одного сериала знакомой портной. Зашёл я на стриминг HBO Max, нашёл нужные кадры, снял скриншот...
А он чёрный. Элементы UI и... чёрный экран.
— DRM, — подумал Штирлиц.
И таки да, DRM. Защита авторских прав содержимого.
Виральность? Не, не слышали.
Технология, по которой работает DRM на стримингах, называется EME: Encrypted Media Extensions. Разработана совместно Netflix, Google и Microsoft.
Есть хорошее описание её работы: https://hsivonen.fi/eme/
Encrypted Media Extensions (EME) — это JavaScript API для <video> и <audio>, предназначенное для работы с DRM-защищенным контентом. Для расшифровки требуется Content Decryption Module (CDM), который доверен правообладателями и скрывает определенные данные от пользователя. Браузер при этом считается ненадежным.
CDM может быть встроен в браузер, загружен отдельно или реализован на уровне ОС и железа. Он управляет ключами для расшифровки контента. В EME есть учебная система Clear Key, но она не предназначена для коммерческого использования.
CDM может работать по-разному: просто расшифровывать данные, расшифровывать и декодировать видео в браузере, передавать декодированные кадры напрямую ОС или работать с GPU, скрывая пиксели даже от системы. EME определяет только интерфейс API, оставляя детали DRM разработчикам.
Так вот, к фишке дня. В Firefox EME не реализованы, скриншоты делаются без проблем. А в Chrome — работают на GPU, иначе ваши процессоры сошли бы с ума.
А это значит, что достаточно (по крайней мере пока) отключить аппаратное ускорение графики. И, вуаля, скриншоты снова можно делать!
Очевидно, с развитием железа и это скоро станет невозможно. Останется только аналоговая брешь (крутое название для экранки, не правда ли?).
#drm #eme #api