Forwarded from Stage multimedia
Вчера было мероприятие для застройщика ЭНКО в Золотых воротах Сибири, хореографический номер с Кинектом и флюидами, которые потом заменялись масляной картиной моря. Видео не смог снять, попрошу у кого-нибудь. Пока посмотрите подготовку и то, как красиво сам экран светится от движения вихря
🔥19❤6💘1
YouTube
MoscowJS 50 — Меняем стул под пользователем — Александр Коротаев
Хотите страшных историй на ночь? Миллионы активных пользователей сидят в социальной сети, многие из них прямо сейчас смотрят видосики, слушают музыку и чатятся, а разрабам очень нужно обновить фронтенд. Тысячи коллбеков ждут своего часа, сотни обработчиков…
Вайбы разработки старого ВКонтакте
Посте про крестики я упоминал про модалку, которую нельзя было закрыть, о которой писали в новостях, рассказали по радио и даже в баре знакомые спрашивали. Притом это был не баг, это была довольно спорная фича.
А потом в комментариях к посту Зара про его опыт работы в ВК вспомнил как ломал один из некогда самых посещаемых сайтов рунета. Только представьте, ваша задача — просто переложить файлы статики в одну папку, чтобы упростить сборку...да что вообще может пойти не так и причем тут поезда?
История (с 25 минуты) в докладе, который я рассказал 4 года назад: https://youtu.be/W5YXcI3ov4w?si=epuc7PUr9IhJM-Jj
Посте про крестики я упоминал про модалку, которую нельзя было закрыть, о которой писали в новостях, рассказали по радио и даже в баре знакомые спрашивали. Притом это был не баг, это была довольно спорная фича.
А потом в комментариях к посту Зара про его опыт работы в ВК вспомнил как ломал один из некогда самых посещаемых сайтов рунета. Только представьте, ваша задача — просто переложить файлы статики в одну папку, чтобы упростить сборку...да что вообще может пойти не так и причем тут поезда?
История (с 25 минуты) в докладе, который я рассказал 4 года назад: https://youtu.be/W5YXcI3ov4w?si=epuc7PUr9IhJM-Jj
👍6🔥5🤡2💘2
Media is too big
VIEW IN TELEGRAM
Гугл не смог смириться с тем, что Cursor выпустили не они...
И они сделали копию — Antigravity. К сожалению с аккаунтами зарегистрированными в России, Беларуси и, внезапно, Молдове зайти в приложение не получится. Но хоть на сайт посмотрим. Там на заднем плане реализовали простую и красивую композицию из летающих частиц, при выборе пунктов меню они плавно выстраиваются в контуры иконки выбранного пункта.
Я уже пару раз делал такой эффект: все возможные позиции уже переданы в шейдер и между ними запускается функция интерполяции значений по времени. Делается просто, за то как эффектно.
И они сделали копию — Antigravity. К сожалению с аккаунтами зарегистрированными в России, Беларуси и, внезапно, Молдове зайти в приложение не получится. Но хоть на сайт посмотрим. Там на заднем плане реализовали простую и красивую композицию из летающих частиц, при выборе пунктов меню они плавно выстраиваются в контуры иконки выбранного пункта.
Я уже пару раз делал такой эффект: все возможные позиции уже переданы в шейдер и между ними запускается функция интерполяции значений по времени. Делается просто, за то как эффектно.
❤🔥13😁2🔥1💘1
Через час жена продолжит делиться тем как она научилась делать 3D визуализации интерьеров при помощи Chat GPT, казалось бы, что такого. А вы пробовали добиться от него визуализации чего-то сложнее мемасика?
🔥4💘1
Forwarded from GPT интерьеры🤖Bornatalia.design (Nataliia Borisenkova)
Друзья, напоминаю, что уже завтра 2 декабря в 12:00 состоится второй вебинар по работе в ИИ: « Метод точного рендера в GPT» приходите , буду рада всех видеть и ждать 🙌🤗
Ссылка на вебинарную комнату:
https://us06web.zoom.us/j/82679146906?pwd=8IYGcuuOnx1oczF7ASv2VlOZwH8WDR.1
Ссылка на вебинарную комнату:
https://us06web.zoom.us/j/82679146906?pwd=8IYGcuuOnx1oczF7ASv2VlOZwH8WDR.1
🔥7💘2😁1
Forwarded from Вольница. Учим полезному
3Dекабря - всемирный день компьютерной графики.
Поздравляем всех причастных!
Поздравляем всех причастных!
❤20😁12🌚1💘1
Забытое искусство формовки текста
Уже 4-й день в Генклубе обсуждают обтекание текстом разных форм, все началось с работ, выложенных @Yan_LS, который взял и просто на чистом C написал отбивание текста пробелами, рисуя текстом абстрактные формы и самостоятельно реализовав всю математику. Завязалось горячее обсуждение, где другие участники чата начали брать InDesign, Pages (аналог Word в MacOS) и сравнивать результаты, но все они были мягко говоря не очень по сравнению с тем, что я и многие мои сверстники помнили из детства: журнальную верстку.
О ней — далее
Уже 4-й день в Генклубе обсуждают обтекание текстом разных форм, все началось с работ, выложенных @Yan_LS, который взял и просто на чистом C написал отбивание текста пробелами, рисуя текстом абстрактные формы и самостоятельно реализовав всю математику. Завязалось горячее обсуждение, где другие участники чата начали брать InDesign, Pages (аналог Word в MacOS) и сравнивать результаты, но все они были мягко говоря не очень по сравнению с тем, что я и многие мои сверстники помнили из детства: журнальную верстку.
О ней — далее
🔥8💘2
Забытое искусство обтекания текстом: журналы
Когда-то давно я любил вглядываться в микрокартинки вставленные между текстовых столбцов, где буквы плавно обтекали контуры чего угодно: от ромбика-врезки с цитатой до обтравленного фото героя заметки. Место в журнале/газете тогда стоило денег, потому использовали буквально каждый квадратный сантиметр. Когда я еще искал кем мне стать, я взял InDesign и попробовал сверстать страницу журнала и как раз столкнулся с тем, что готовый текст и иллюстрации просто так не вставить, надо и текст подкоротить или удлинить, картинку покрутить чтобы не осталось пустого места, а еще не забыть по переносы, И использовать верные спецсимволы, дизайнеры-верстальщики те еще душнилы когда дело касается разницы между
Как это делалось в «докомпьютерную» и раннюю компьютерную эпоху
В металлической верстке — физически перемещали строки текста, подгоняя их вокруг клише.
С появлением настольных издательских систем (как Adobe PageMaker, QuarkXPress, а затем InDesign) — дизайнер создавал контур обтекания вокруг изображения, часто вручную расставляя точки, чтобы текст огибал именно нужные части рисунка (например, волосы модели или сложный предмет).
Почему сейчас это реже встречается
— Сложность чтения: Сильно «рваный» правый край ухудшает читаемость, особенно для больших объемов текста.
— Адаптивный дизайн: Техника плохо масштабируется для мобильных экранов и веб-верстки. Ранее каждый такой текстовый блок создавался вручную, теперь разработчики скорее делают системы разметки любого контента, а не штучные страницы.
— Минимализм: Современный дизайн склоняется к более простым, строгим сеткам с четким разделением текстовых и графических блоков.
А вам вак?
Когда-то давно я любил вглядываться в микрокартинки вставленные между текстовых столбцов, где буквы плавно обтекали контуры чего угодно: от ромбика-врезки с цитатой до обтравленного фото героя заметки. Место в журнале/газете тогда стоило денег, потому использовали буквально каждый квадратный сантиметр. Когда я еще искал кем мне стать, я взял InDesign и попробовал сверстать страницу журнала и как раз столкнулся с тем, что готовый текст и иллюстрации просто так не вставить, надо и текст подкоротить или удлинить, картинку покрутить чтобы не осталось пустого места, а еще не забыть по переносы, И использовать верные спецсимволы, дизайнеры-верстальщики те еще душнилы когда дело касается разницы между
x и × (да, да, говорили "кого это ты там на Х послал?").Как это делалось в «докомпьютерную» и раннюю компьютерную эпоху
В металлической верстке — физически перемещали строки текста, подгоняя их вокруг клише.
С появлением настольных издательских систем (как Adobe PageMaker, QuarkXPress, а затем InDesign) — дизайнер создавал контур обтекания вокруг изображения, часто вручную расставляя точки, чтобы текст огибал именно нужные части рисунка (например, волосы модели или сложный предмет).
Почему сейчас это реже встречается
— Сложность чтения: Сильно «рваный» правый край ухудшает читаемость, особенно для больших объемов текста.
— Адаптивный дизайн: Техника плохо масштабируется для мобильных экранов и веб-верстки. Ранее каждый такой текстовый блок создавался вручную, теперь разработчики скорее делают системы разметки любого контента, а не штучные страницы.
— Минимализм: Современный дизайн склоняется к более простым, строгим сеткам с четким разделением текстовых и графических блоков.
А вам вак?
🔥7✍2💘2
web.dev
WebGPU is now supported in major browsers | Blog | web.dev
Read about the biggest web graphics launch since WebGL. WebGPU is supported across major browsers, bringing unparalleled performance to the web.
https://web.dev/blog/webgpu-supported-major-browsers
🎉 WebGPU теперь поддерживается во всех современных браузерах!
Раньше мы с WebGL жили как в старом браке: сложно, но хотя бы знали все его косяки. Писали шейдеры, молились на драйверы, а артефакты называли «фичей» и ставили на артхаус. Но мы терпели, ведь альтернативы не было.
А теперь будет WebGPU! Говорят, это быстрее, современнее и «ближе к металлу».
Теперь вместо "почему не работает?" будем спрашивать:
😳 "Почему ничего не рисуется?" – а потому что теперь самому нужно синхронизировать пайплайн рендеринга. WebGL за вас это тихо делал. Теперь держите асинхронность и горсть командных буферов.
😤 "Три года все кричали 'WebGPU в Three.js!'..." – а на деле оказалось, что для перехода нужно не обновить версию, а переписать половину проекта с ShaderMaterial и кастомными рендер-пассами. Спасибо, что предупредили заранее.
🤯 "Это баг или я просто не понимаю workgroup size?" – классика. Грань между ошибкой в коде и фундаментальным непониманием концепций теперь ещё тоньше. Добро пожаловать в мир параллельных вычислений, где ваш код может просто молча не работать.
Готовьтесь: эра красивых демок с 1000 FPS, которые вы соберёте за вечер, а потом неделю будете дебажить рассинхрон между очередями, уже наступила! 🚀
🎉 WebGPU теперь поддерживается во всех современных браузерах!
Раньше мы с WebGL жили как в старом браке: сложно, но хотя бы знали все его косяки. Писали шейдеры, молились на драйверы, а артефакты называли «фичей» и ставили на артхаус. Но мы терпели, ведь альтернативы не было.
А теперь будет WebGPU! Говорят, это быстрее, современнее и «ближе к металлу».
Теперь вместо "почему не работает?" будем спрашивать:
😳 "Почему ничего не рисуется?" – а потому что теперь самому нужно синхронизировать пайплайн рендеринга. WebGL за вас это тихо делал. Теперь держите асинхронность и горсть командных буферов.
😤 "Три года все кричали 'WebGPU в Three.js!'..." – а на деле оказалось, что для перехода нужно не обновить версию, а переписать половину проекта с ShaderMaterial и кастомными рендер-пассами. Спасибо, что предупредили заранее.
🤯 "Это баг или я просто не понимаю workgroup size?" – классика. Грань между ошибкой в коде и фундаментальным непониманием концепций теперь ещё тоньше. Добро пожаловать в мир параллельных вычислений, где ваш код может просто молча не работать.
Готовьтесь: эра красивых демок с 1000 FPS, которые вы соберёте за вечер, а потом неделю будете дебажить рассинхрон между очередями, уже наступила! 🚀
🔥12❤1😁1🎉1💘1
Forwarded from 8BitJS
Что пошло не так в
Последние пару дней во всех фронтенд-пабликах пролетела новость: в
Но мне захотелось разобраться с инженерной точки зрения, что же именно оказалось сломано внутри React и почему это вообще стало возможно. А главное, понять, чему мы можем научиться из этого кейса как разработчики, даже если не используем
Небольшое отступление.
В рамках
With this combined commit, people now have to go through a >1500 line patch to try to understand the security relevant changes.
Что за уязвимость
CVE-2025-55182 - критическая уязвимость в React Server Components, которая позволяет, отправив специально сформированный запрос, добиться удаленного выполнения кода на сервере.
В коде было обнаружены три основные причины уязвимости:
1. Несимметричность в плане защиты между кодом клиентской и серверной реализацией
2. Небезопасная десериализация данных Flight-протокола на сервере
3. Незащищенное разрешение модулей и экспортов
Немного контекста
React Server Components
Основная идея состоит в том, что сервер может сам рендерить дерево компонентов, может делать запросы в БД и API. Клиент же получает поток (
Flight-протокол
Внутренний протокол
Разберемся в коде
Рассмотрим на практике два ключевых участка, которые стали причиной уязвимости.
Внутри серверного декодера есть функция
Упростим:
requireModule и доверие к экспорту
В
Сервер слишком доверяет экспортируемому модулю, поэтому могут сработать запросы вида:
Из-за чего можно было использовать имя экспорта, которого нет в модуле, но существующего в цепочке прототипов.
Для закрытия уязвимости для экспорта добавили проверку
Итого
Как мы смогли увидеть, в уязвимости нет каких-то хитростей
Что важного мы можем вынести для себя:
Никогда не доверяйте структуре данных от пользователя. Для защиты фильтруем все опасные ключи из прототипирования (__proto__,
#8BitJS #React #CVE #security #RSC
React Server Components и чему из этого стоит научитьсяПоследние пару дней во всех фронтенд-пабликах пролетела новость: в
React нашли критическую уязвимость с оценкой CVSS 10.0. Она позволяет получить удаленное выполнение кода на сервере. В списках пострадавших оказались все кто используют и/или поддерживают React Server Components (RSC).Но мне захотелось разобраться с инженерной точки зрения, что же именно оказалось сломано внутри React и почему это вообще стало возможно. А главное, понять, чему мы можем научиться из этого кейса как разработчики, даже если не используем
RSC.Небольшое отступление.
В рамках
PR с закрытием уязвимости было решено сделать рефакторинг. И справедливо было подмеченоWith this combined commit, people now have to go through a >1500 line patch to try to understand the security relevant changes.
Что за уязвимость
CVE-2025-55182 - критическая уязвимость в React Server Components, которая позволяет, отправив специально сформированный запрос, добиться удаленного выполнения кода на сервере.
В коде было обнаружены три основные причины уязвимости:
1. Несимметричность в плане защиты между кодом клиентской и серверной реализацией
2. Небезопасная десериализация данных Flight-протокола на сервере
3. Незащищенное разрешение модулей и экспортов
Немного контекста
React Server Components
Основная идея состоит в том, что сервер может сам рендерить дерево компонентов, может делать запросы в БД и API. Клиент же получает поток (
stream) данных о дереве, а не готовый HTML. React на стороне клиента постепенно собирает готовый результат из данных от сервера и клиентских компонентов.Flight-протокол
Внутренний протокол
React для передачи данных в RSC между клиентом и сервером. Простыми словами, сервер кодирует состояние дерева, ссылки на компоненты, промисы в поток байтов. Со стороны клиента поток читает декодер ReactFlightClient и восстанавливает исходные данные. Аналогично со стороны сервера есть декодер ReactFlightReplyServer, который обрабатывает обратные данные от пользователя.Разберемся в коде
Рассмотрим на практике два ключевых участка, которые стали причиной уязвимости.
Prototype pollution в ReactFlightReplyServerВнутри серверного декодера есть функция
reviveModel в связке с getOutlineModel, которые рекурсивно обходят данные и "оживляет" их в обычные JS структуры.Упростим:
function reviveModel(...) {
...
if (typeof value === 'object' && value !== null) {
...
for (const key in value) {
// hasOwnProperty проверка для защиты от вызова унаследованных ключей
if (hasOwnProperty.call(value, key)) {
...
// добавили проверку на __proto__
if (newValue !== undefined || key === '__proto__') {
value[key] = newValue;
}
}
}
}
requireModule и доверие к экспорту
В
RSC есть функция requireModule(metadata) для бандлеров, которая по metadata.id находит модуль и по metadata.name выбирает нужный экспорт.export function requireModule<T>(metadata: ClientReference<T>): T {
const moduleExports = parcelRequire(metadata[ID]);
return moduleExports[metadata[NAME]];
}
Сервер слишком доверяет экспортируемому модулю, поэтому могут сработать запросы вида:
{
"id": "foo",
"name": "__proto__"
}
Из-за чего можно было использовать имя экспорта, которого нет в модуле, но существующего в цепочке прототипов.
Для закрытия уязвимости для экспорта добавили проверку
if (hasOwnProperty.call(moduleExports, metadata[NAME])) {
return moduleExports[metadata[NAME]];
}
Итого
Как мы смогли увидеть, в уязвимости нет каких-то хитростей
React, а используется довольно распространенная проблема доверия к данных при десериализации.Что важного мы можем вынести для себя:
Никогда не доверяйте структуре данных от пользователя. Для защиты фильтруем все опасные ключи из прототипирования (__proto__,
constructor, prototype) и/или добавляем подход allowlist для ключей. Для конструкции for...in используем hasOwnProperty.#8BitJS #React #CVE #security #RSC
❤7😱2❤🔥1💘1