Media is too big
VIEW IN TELEGRAM
#дичь дня
Лукас Бономи сделал GSS (GPU Style Sheets) — язык, на котором можно создавать полноценную 3D-графику, используя практически обычный CSS. И чем дальше читаешь документацию, тем больше вопросов к автору.
Объекты объявляются через
А дальше начинается прекрасное. Тут есть каскад, специфичность, `!important`, `:nth-child()`, `:hover` и даже `:has()`. Последний позволяет, например, менять внешний вид куба при наведении на соседнюю сферу. Да, теперь можно три часа выяснять, почему CSS не красит бублик.
Материалы тоже описываются стилями:
Причём это не какая-то хитрая обёртка над Three.js. GSS компилирует сцену в GPU-шейдеры GLSL или WGSL, а геометрия строится через SDF (функции расстояния) и raymarching. Никаких привычных полигональных мешей — видеокарта сама вычисляет поверхности объектов при отрисовке.
У проекта есть интерактивная песочница, npm-пакет, интеграция с Vite и даже расширение для VS Code. Всё это пока экспериментальное, но вполне работающее.
Не знаю, кому пришло в голову, что трёхмерной графике не хватает CSS-каскада и проблем со специфичностью, но теперь я хочу увидеть, как кто-нибудь будет отлаживать сцену с сотней объектов и
https://www.gss-lang.dev/
#3d #webgpu
Лукас Бономи сделал GSS (GPU Style Sheets) — язык, на котором можно создавать полноценную 3D-графику, используя практически обычный CSS. И чем дальше читаешь документацию, тем больше вопросов к автору.
Объекты объявляются через
@scene. Хотите куб? Пишите cube. Сферу? sphere. Трёхмерный бублик? torus. Можно назначить им классы и идентификаторы, расположить в пространстве и стилизовать привычными селекторами.
@scene {
sphere#ball;
}
#ball {
translate: 0 1 0;
color: #ff5a36;
material: glass(1.5, frosted 0.3);
animation: float 2s ease-in-out alternate;
}
@keyframes float {
from {
translate: 0 1 0;
}
to {
translate: 0 1.5 0;
}
}
А дальше начинается прекрасное. Тут есть каскад, специфичность, `!important`, `:nth-child()`, `:hover` и даже `:has()`. Последний позволяет, например, менять внешний вид куба при наведении на соседнюю сферу. Да, теперь можно три часа выяснять, почему CSS не красит бублик.
Материалы тоже описываются стилями:
metal(), glass(), jelly(), iridescent(). Есть градиенты, текстуры, освещение, тени, туман и фильтры. Анимации задаются через @keyframes, работают переходы и управление сценой через прокрутку страницы.Причём это не какая-то хитрая обёртка над Three.js. GSS компилирует сцену в GPU-шейдеры GLSL или WGSL, а геометрия строится через SDF (функции расстояния) и raymarching. Никаких привычных полигональных мешей — видеокарта сама вычисляет поверхности объектов при отрисовке.
У проекта есть интерактивная песочница, npm-пакет, интеграция с Vite и даже расширение для VS Code. Всё это пока экспериментальное, но вполне работающее.
Не знаю, кому пришло в голову, что трёхмерной графике не хватает CSS-каскада и проблем со специфичностью, но теперь я хочу увидеть, как кто-нибудь будет отлаживать сцену с сотней объектов и
!important.https://www.gss-lang.dev/
#3d #webgpu
❤7👍4🫡2🔥1
#статья дня
У vlt.io есть собственный коммерческий реестр npm-пакетов. Казалось бы, зачем кому-то альтернатива бесплатному npmjs.org? Но разработчики vlt решили покопаться в том, как npm передаёт метаданные пакетов, и нашли довольно много лишнего.
Например, полный документ с метаданными 759 версий Vite занимает 4,41 МБ даже после gzip. У npm есть сокращённый формат, но в нём не хватает некоторых полей, поэтому пакетным менеджерам иногда приходится запрашивать полную версию со всей накопившейся за годы историей.
В vlt переработали формат, убрали ненужные данные и сократили тот же документ Vite до 104 КБ. В среднем объём передаваемых метаданных уменьшился на 70%, а холодная установка зависимостей в их тестах ускорилась на 20–70%.
Причём менять пакетный менеджер не требуется: обычные npm, pnpm и Bun могут работать с альтернативным реестром. То есть значительную часть оптимизаций удалось сделать исключительно на стороне сервера.
Конечно, тесты проводились без lockfile, а в проектах с кешированием выигрыш будет скромнее. Но сама история показательна: спустя столько лет развития npm в его протоколе всё ещё остаются неэффективности, которые можно устранить, даже не меняя клиентский код.
https://www.vlt.io/blog/registry-metadata-70-percent-smaller
#npm #pnpm
У vlt.io есть собственный коммерческий реестр npm-пакетов. Казалось бы, зачем кому-то альтернатива бесплатному npmjs.org? Но разработчики vlt решили покопаться в том, как npm передаёт метаданные пакетов, и нашли довольно много лишнего.
Например, полный документ с метаданными 759 версий Vite занимает 4,41 МБ даже после gzip. У npm есть сокращённый формат, но в нём не хватает некоторых полей, поэтому пакетным менеджерам иногда приходится запрашивать полную версию со всей накопившейся за годы историей.
В vlt переработали формат, убрали ненужные данные и сократили тот же документ Vite до 104 КБ. В среднем объём передаваемых метаданных уменьшился на 70%, а холодная установка зависимостей в их тестах ускорилась на 20–70%.
Причём менять пакетный менеджер не требуется: обычные npm, pnpm и Bun могут работать с альтернативным реестром. То есть значительную часть оптимизаций удалось сделать исключительно на стороне сервера.
Конечно, тесты проводились без lockfile, а в проектах с кешированием выигрыш будет скромнее. Но сама история показательна: спустя столько лет развития npm в его протоколе всё ещё остаются неэффективности, которые можно устранить, даже не меняя клиентский код.
https://www.vlt.io/blog/registry-metadata-70-percent-smaller
#npm #pnpm
❤5👍5
#инструмент дня
Когда надоело, что ссылки из рабочего Slack открываются в личном профиле Chrome, а мемчики из Telegram — в рабочем.
Встречайте — ContextRoute! Создано мной с любовью для вас, котаны. Пока только для macOS.
Работает просто: выбираете, в каком браузере или профиле открывать ссылки из конкретных приложений.
Например, всё из Slack отправляется в рабочий профиль Chrome, из Telegram — в личный, а из остальных приложений — как принятно в macOS aka в последнее окно. Чуть меньше раздражения.
Альтернативы, конечно, существуют. Но мне они как-то не зашли.
Такие утилиты, во-первых, очень opinionated, а во-вторых, любят обрастать настройками. А я люблю минимум.
Вот, например, Yojam. У него только тёмная тема. И не просто тёмная, а чёрная! В сочетании с обилием, несомненно, прекрасных настроек пользоваться этим мне показалось невозможным. Skill issue.
Finicky — прекрасный инструмент, но зачем мне писать конфиг на TypeScript, чтобы открывать ссылки в браузере? Я вот не понял.
Поэтому и сделал свою утилиту. Пока она умеет только маршрутизировать ссылки по приложениям, из которых их открывают. Никаких правил по доменам, сложных условий и прочих радостей автоматизации. Всё это появится позже, но сейчас мне хотелось решить одну конкретную проблему.
Надеюсь, что смогу вовремя остановиться. Хотя, наверное, разработчик Yojam тоже так считал.
#swift #macos
Когда надоело, что ссылки из рабочего Slack открываются в личном профиле Chrome, а мемчики из Telegram — в рабочем.
Встречайте — ContextRoute! Создано мной с любовью для вас, котаны. Пока только для macOS.
Работает просто: выбираете, в каком браузере или профиле открывать ссылки из конкретных приложений.
Например, всё из Slack отправляется в рабочий профиль Chrome, из Telegram — в личный, а из остальных приложений — как принятно в macOS aka в последнее окно. Чуть меньше раздражения.
Альтернативы, конечно, существуют. Но мне они как-то не зашли.
Такие утилиты, во-первых, очень opinionated, а во-вторых, любят обрастать настройками. А я люблю минимум.
Вот, например, Yojam. У него только тёмная тема. И не просто тёмная, а чёрная! В сочетании с обилием, несомненно, прекрасных настроек пользоваться этим мне показалось невозможным. Skill issue.
Finicky — прекрасный инструмент, но зачем мне писать конфиг на TypeScript, чтобы открывать ссылки в браузере? Я вот не понял.
Поэтому и сделал свою утилиту. Пока она умеет только маршрутизировать ссылки по приложениям, из которых их открывают. Никаких правил по доменам, сложных условий и прочих радостей автоматизации. Всё это появится позже, но сейчас мне хотелось решить одну конкретную проблему.
Надеюсь, что смогу вовремя остановиться. Хотя, наверное, разработчик Yojam тоже так считал.
#swift #macos
❤13👍1👎1
🏁Тестовый собес на Frontend с разработчиком из R-Vision, ex-Сбер
15 октября в 19:00 (МСК) приходи посмотреть открытое онлайн-собеседование на Frontend-разработчика!
Интервьюер: Даниил Дмитриев – Frontend-разработчик в R-Vision, ex-Сбер. Пишет на React и TypeScript, совмещает роль тимлида, менторит разработчиков и проводит код-ревью.
На эфире нет сценария ↓
Кандидат – случайный разработчик, который не знает вопросов заранее.
На обычном собесе ты не знаешь, что думает интервьюер, пока не придёт фидбек. На этом эфире Даниил проговорит всё вслух:
А в конце ответит на твои вопросы.
Эфир проходит в рамках менторской программы от ШОРТКАТ для разработчиков, которые хотят повысить грейд, ЗП и прокачать скиллы!
Участие бесплатное 🔥
Зарегаться на эфир можно в боте → @shortcut_front_bot
Реклама.
О рекламодателе.
15 октября в 19:00 (МСК) приходи посмотреть открытое онлайн-собеседование на Frontend-разработчика!
Интервьюер: Даниил Дмитриев – Frontend-разработчик в R-Vision, ex-Сбер. Пишет на React и TypeScript, совмещает роль тимлида, менторит разработчиков и проводит код-ревью.
На эфире нет сценария ↓
Кандидат – случайный разработчик, который не знает вопросов заранее.
На обычном собесе ты не знаешь, что думает интервьюер, пока не придёт фидбек. На этом эфире Даниил проговорит всё вслух:
— какие вопросы и задачи даёт кандидатам на Frontend-собесах;
— что в каждом ответе засчитал бы, а что нет — и почему.
А в конце ответит на твои вопросы.
Эфир проходит в рамках менторской программы от ШОРТКАТ для разработчиков, которые хотят повысить грейд, ЗП и прокачать скиллы!
Участие бесплатное 🔥
Зарегаться на эфир можно в боте → @shortcut_front_bot
Реклама.
О рекламодателе.
🤡4👍1
This media is not supported in your browser
VIEW IN TELEGRAM
#такое дня
Сидим, разрабатываем дизайн систему, следуем WCAG, вычитываем эксплейнеры с https://open-ui.org/, следуем всем законам о доступности...
Но мы все лишь грязь под ногтями дизайнеров Apple, потому что спроектировать убегающий из под курсора компонент в их понимании абсолютно нормально.
Что дозволено Юпитеру, не дозволено быку, да?
#apple #ui
Сидим, разрабатываем дизайн систему, следуем WCAG, вычитываем эксплейнеры с https://open-ui.org/, следуем всем законам о доступности...
Но мы все лишь грязь под ногтями дизайнеров Apple, потому что спроектировать убегающий из под курсора компонент в их понимании абсолютно нормально.
Что дозволено Юпитеру, не дозволено быку, да?
#apple #ui
🤩9🤡8🫡2
Атмосфера HolyJS: ради чего стоит приехать на площадку
23–24 октября в Санкт Петербурге и онлайне пройдет HolyJS 2026 Autumn — масштабная JS-конференция, которая объединит фронтенд, бэкенд, графику и веб-платформу.
Интересные доклады — это база. Но Холи — это еще и то, что происходит между ними: живые разговоры, крутой нетворкинг, возможность самому выйти к микрофону и форматы, в которых можно посмотреть на привычные вещи под другим углом.
Для удобства собрали в карточках активности, ради которых точно стоит посетить конференцию.
Выбирайте, в чем хотите поучаствовать, и забирайте персональный билет со скидкой по промокоду
→ Программа HolyJS
→ Купить билет
Реклама. ООО «Джуг Ру Груп». ИНН 7801341446
23–24 октября в Санкт Петербурге и онлайне пройдет HolyJS 2026 Autumn — масштабная JS-конференция, которая объединит фронтенд, бэкенд, графику и веб-платформу.
Интересные доклады — это база. Но Холи — это еще и то, что происходит между ними: живые разговоры, крутой нетворкинг, возможность самому выйти к микрофону и форматы, в которых можно посмотреть на привычные вещи под другим углом.
Для удобства собрали в карточках активности, ради которых точно стоит посетить конференцию.
Выбирайте, в чем хотите поучаствовать, и забирайте персональный билет со скидкой по промокоду
htmlshit→ Программа HolyJS
→ Купить билет
Реклама. ООО «Джуг Ру Груп». ИНН 7801341446
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6👍1
#заметка дня
Когда Гарри Каспаров проиграл DeepBlue в шахматы, всем, в целом, стало понятно, что шахматисты не победят ботов.
Помешало ли это шахматам с переменным успехом быть самой популярной игрой? Нет. Помешало ли это шахматистам снова достигать уровня практически рок-звёзд? Тоже нет. Признание, процесс, обучение, скандалы — всё на месте.
Это я к чему. Ну, собственно, что меня зацепило — оно на иллюстрации. «Ни одна модель». Ссылка на X. Вызов принят!
Задача предельно ясна: закрыть картинку и видео-файл "скелетоном", все только через css, видео-элементу нельзя добавлять никакие атрибуты и доп. css-классы, разметку менять нельзя, можно только менять css root элемента, работать должно везде.
И, собственно, GPT 6.1 Sol Max прекрасно справился, по пути выдав весьма интересное решение: через filter.
Вот оно: https://codepen.io/editor/alinaki/pen/01a13fa3-609c-71ea-b6ae-8fc97433cae8
Лучше ли оно предложенного? Хороший вопрос! Я пока предложенное не видел, но оно, как минимум, использует сильно более новые возможности, которые гораздо менее доступны в браузерах.
Одну проблему своего решения я уже знаю — маска анимации заставляет фон просвечиваться. Но я уверен, что это можно решить, и проблемой стать не должно.
Но целая ночь против 10 минут. Никогда не говори никогда, короче.
#css #skeleton
Когда Гарри Каспаров проиграл DeepBlue в шахматы, всем, в целом, стало понятно, что шахматисты не победят ботов.
Помешало ли это шахматам с переменным успехом быть самой популярной игрой? Нет. Помешало ли это шахматистам снова достигать уровня практически рок-звёзд? Тоже нет. Признание, процесс, обучение, скандалы — всё на месте.
Это я к чему. Ну, собственно, что меня зацепило — оно на иллюстрации. «Ни одна модель». Ссылка на X. Вызов принят!
Задача предельно ясна: закрыть картинку и видео-файл "скелетоном", все только через css, видео-элементу нельзя добавлять никакие атрибуты и доп. css-классы, разметку менять нельзя, можно только менять css root элемента, работать должно везде.
И, собственно, GPT 6.1 Sol Max прекрасно справился, по пути выдав весьма интересное решение: через filter.
Вот оно: https://codepen.io/editor/alinaki/pen/01a13fa3-609c-71ea-b6ae-8fc97433cae8
Лучше ли оно предложенного? Хороший вопрос! Я пока предложенное не видел, но оно, как минимум, использует сильно более новые возможности, которые гораздо менее доступны в браузерах.
Одну проблему своего решения я уже знаю — маска анимации заставляет фон просвечиваться. Но я уверен, что это можно решить, и проблемой стать не должно.
Но целая ночь против 10 минут. Никогда не говори никогда, короче.
#css #skeleton
❤5👍1