This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
CSS Grid умеет сам перекладывать карточки при ресайзе, но делает это мгновенно. Брамус не каратист Ван Дамм придумал довольно занятный способ добавить плавность без JS и View Transitions.
Трюк в том, что анимируется вообще не Grid. Карточки вынимаются из потока и привязываются к своим ячейкам через CSS Anchor Positioning. Grid пересчитывает раскладку, координаты
Сам Anchor Positioning уже добрался до современных Chrome, Safari и Firefox и считается Baseline 2026.
Firefox уже понимает anchors, но изменение координат из
Так-то забавно выходит.
Ах, да.
Ссылка:
https://www.bram.us/2026/09/07/animating-css-grid-layouts-with-css-anchor-positioning/
Сразу на демо: https://codepen.io/editor/bramus/pen/01a07dd4-4d23-7e7b-9f41-3e0aa126751f
#css #grid
CSS Grid умеет сам перекладывать карточки при ресайзе, но делает это мгновенно. Брамус не каратист Ван Дамм придумал довольно занятный способ добавить плавность без JS и View Transitions.
Трюк в том, что анимируется вообще не Grid. Карточки вынимаются из потока и привязываются к своим ячейкам через CSS Anchor Positioning. Grid пересчитывает раскладку, координаты
anchor() меняются, а transition плавно двигает карточку к новому месту.Сам Anchor Positioning уже добрался до современных Chrome, Safari и Firefox и считается Baseline 2026.
Firefox уже понимает anchors, но изменение координат из
anchor() пока не анимирует — карточки просто прыгают. Но зато в Safari 26 всё отлично! Я удивлён.Так-то забавно выходит.
Ах, да.
Ссылка:
https://www.bram.us/2026/09/07/animating-css-grid-layouts-with-css-anchor-positioning/
Сразу на демо: https://codepen.io/editor/bramus/pen/01a07dd4-4d23-7e7b-9f41-3e0aa126751f
#css #grid
🔥16❤6👍2
#заметка дня
Сразу нелишним будет напомнить, что я уже 6 лет живу и работаю в Финляндии, и даже в финской компании.
Есть одна вещь, которая мне очень нравится в том, как финны в IT обращаются с английским: они совершенно не считают нужным оставлять английские слова английскими.
Финский вообще довольно буквальный язык:
Jira — «йира».
Cache — примерно «кацхе».
Done — «до́нэ».
System — «сюстэм»
Apple — буквально «аппле».
Google — guugle.
YouTube — juutuubi.
А дальше слово ещё и становится грамматически финским:
sprint → sprintti
ticket → ticketti
server → serveri
bug → bugi
commit → committi
deploy → deployata
Есть даже отдельный термин — rallienglanti, «раллийный английский»: английский финских гонщиков, где слова английские, а фонетика, ритм и интонация остаются совершенно финскими.
Для человека из русскоязычной IT-среды это сначала непривычно. У нас долго было ощущение, что английское слово надо хотя бы на секунду произнести правильно.
А «яваскрипт», «микрософт», «аппле», «питон» или «докер» легко могли звучать либо как плохой английский, либо как намеренный айтишный китч.
Получалось смешно: всё предложение по-русски, но перед словом framework человек на секунду становился американским радиоведущим.
А потом садился в свой Mini с Union Jack на крыше.
В Финляндии этого переключения как будто нет. Человек может прекрасно говорить по-английски, но в финской фразе Jira всё равно будет «йира», Apple — «аппле», а что-нибудь вполне можно deployata.
Слово попало в язык — всё, поздно. Теперь оно немного финское. Или русское, смотря кто произнёс.
Иллюстрация: Jutta Mykrä.
#finland #it
Сразу нелишним будет напомнить, что я уже 6 лет живу и работаю в Финляндии, и даже в финской компании.
Есть одна вещь, которая мне очень нравится в том, как финны в IT обращаются с английским: они совершенно не считают нужным оставлять английские слова английскими.
Финский вообще довольно буквальный язык:
a читается как «а», e как «э», i как «и», j как «й», ударение почти всегда на первый слог. И английское слово, попав в финскую речь, часто просто прогоняется через эти правила.Jira — «йира».
Cache — примерно «кацхе».
Done — «до́нэ».
System — «сюстэм»
Apple — буквально «аппле».
Google — guugle.
YouTube — juutuubi.
А дальше слово ещё и становится грамматически финским:
sprint → sprintti
ticket → ticketti
server → serveri
bug → bugi
commit → committi
deploy → deployata
Есть даже отдельный термин — rallienglanti, «раллийный английский»: английский финских гонщиков, где слова английские, а фонетика, ритм и интонация остаются совершенно финскими.
Для человека из русскоязычной IT-среды это сначала непривычно. У нас долго было ощущение, что английское слово надо хотя бы на секунду произнести правильно.
А «яваскрипт», «микрософт», «аппле», «питон» или «докер» легко могли звучать либо как плохой английский, либо как намеренный айтишный китч.
Получалось смешно: всё предложение по-русски, но перед словом framework человек на секунду становился американским радиоведущим.
А потом садился в свой Mini с Union Jack на крыше.
В Финляндии этого переключения как будто нет. Человек может прекрасно говорить по-английски, но в финской фразе Jira всё равно будет «йира», Apple — «аппле», а что-нибудь вполне можно deployata.
Слово попало в язык — всё, поздно. Теперь оно немного финское. Или русское, смотря кто произнёс.
Иллюстрация: Jutta Mykrä.
#finland #it
👍9❤7🔥2
Проект от подписчика!
Напоминаю, что я выкачу любую статью или проект от вас, не стесняйтесь писать.
Презентация? Выступили на митапе? Хотите поделиться интересной статьёй — добро пожаловать!
Всем привет, меня зовут Виталий. Я иженер по автоматизации тестирования и по совместительству нагрузочный инженер. Проект такого масштаба никогда не планировал делать, но обо всем по порядку...
Все началось с того, что когда я пришел на проект - надо было поднимать нагрузку с абсолютного нуля. Поскольку у нас использовался JS стек(playwright) то было принято решение взять k6. Конечно, это позволило нам быстро стартануть, но чем дальше в лес, тем сложнее было поддерживать решение.
Начнем с того, что у k6 есть ограничение на VUS(virtual users) ~50k. И это стартовая точка костылей. Затем нам понадобился sidecar — helper сервер, чтобы производить определенные манипуляции, затем еще один за другим велосипедом. И в какой-то момент я решил, что управлять сложностью стало проблематично и решил, что хочу решить эти проблемы, но плавно.
Так появилась первая версия perfscale. Простой генератор нагрузки, который умеет еще и запускать k6, чтобы переход был максимально гладким.
Затем я начал думать над тем, что меняется от проекта к проекта и вывел закономерность - надо делить конфигурацию (configuration/config) от самого теста. Затем надо было добавить простой UI для отображения тестов и конфигураций, затем сделать интеграцию с OIDC и поместить внутрь контура. И вот так, постепенно, шаг за шагом, я пришел уже к полноценному продукту - https://perfscale.ru/ , который закрывает все типы тестов. А для большего комфорта я движок опенсорснул -🧑💻 https://github.com/Perfscale/perfscale. Считаю, что это правильный шаг.
Единственное, что нет в OSS - fix protocol (прим.📊 fix protocol - финансовый протокол для передачи финансовых данных), ну и самих фич: OIDC, multi tenant, AI inference ,integrations (git, prometheus, allure testops, slack, webhooks, etc.) вобщем все то, что накладывается поверх самого движка.
Из последних вещей, которые я сделал в perfscale OSS (на момент написания) - это gRPC, child_process(sidecar) а впереди еще и поддержка других клиентов: databases, webrtc, graphql, и даже собственный marketplace для того,чтобы не городить ворох велосипедов. А еще я веду sponsr / habr - где пишу о еженедельных новостях, связанных с perfscale.
Ну а если я лично вам приглянулся , то еще и веду свой TG канал -✈️ Haradkou SDET, где пишу обо всяком, связанным с автоматизацией тестирования
Напоминаю, что я выкачу любую статью или проект от вас, не стесняйтесь писать.
Презентация? Выступили на митапе? Хотите поделиться интересной статьёй — добро пожаловать!
Всем привет, меня зовут Виталий. Я иженер по автоматизации тестирования и по совместительству нагрузочный инженер. Проект такого масштаба никогда не планировал делать, но обо всем по порядку...
Все началось с того, что когда я пришел на проект - надо было поднимать нагрузку с абсолютного нуля. Поскольку у нас использовался JS стек(playwright) то было принято решение взять k6. Конечно, это позволило нам быстро стартануть, но чем дальше в лес, тем сложнее было поддерживать решение.
Начнем с того, что у k6 есть ограничение на VUS(virtual users) ~50k. И это стартовая точка костылей. Затем нам понадобился sidecar — helper сервер, чтобы производить определенные манипуляции, затем еще один за другим велосипедом. И в какой-то момент я решил, что управлять сложностью стало проблематично и решил, что хочу решить эти проблемы, но плавно.
Так появилась первая версия perfscale. Простой генератор нагрузки, который умеет еще и запускать k6, чтобы переход был максимально гладким.
Затем я начал думать над тем, что меняется от проекта к проекта и вывел закономерность - надо делить конфигурацию (configuration/config) от самого теста. Затем надо было добавить простой UI для отображения тестов и конфигураций, затем сделать интеграцию с OIDC и поместить внутрь контура. И вот так, постепенно, шаг за шагом, я пришел уже к полноценному продукту - https://perfscale.ru/ , который закрывает все типы тестов. А для большего комфорта я движок опенсорснул -
Единственное, что нет в OSS - fix protocol (прим.
Из последних вещей, которые я сделал в perfscale OSS (на момент написания) - это gRPC, child_process(sidecar) а впереди еще и поддержка других клиентов: databases, webrtc, graphql, и даже собственный marketplace для того,чтобы не городить ворох велосипедов. А еще я веду sponsr / habr - где пишу о еженедельных новостях, связанных с perfscale.
Ну а если я лично вам приглянулся , то еще и веду свой TG канал -
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8❤4
This media is not supported in your browser
VIEW IN TELEGRAM
#книга дня
Data Structures and Algorithms от Kirupa
Сегодня не совсем книга, а большой набор связанных статей по структурам данных и алгоритмам.
https://www.kirupa.com/data_structures_algorithms/introduction_book_tutorials.htm
Темы обычные: Big O, массивы, стеки, деревья, графы, DFS/BFS, Дейкстра, сортировки. Но часть материала сделана специально под веб, а не просто перенесена туда из учебника.
Например, офигенская глава про движение по двумерной сетке:
https://www.kirupa.com/data_structures_algorithms/moving_around_a_grid.htm
Там есть чувачок-инопланетянин, которого можно гонять стрелками или WASD по сетке 10×10. На нём разбираются смещения координат, проверки границ и обновление позиции.
Ах, да. Естественно, все изученные структуры данных даются не просто так, а чтобы написать простые игры, представленные в конце цикла.
#algorithms #data_structures
Data Structures and Algorithms от Kirupa
Сегодня не совсем книга, а большой набор связанных статей по структурам данных и алгоритмам.
https://www.kirupa.com/data_structures_algorithms/introduction_book_tutorials.htm
Темы обычные: Big O, массивы, стеки, деревья, графы, DFS/BFS, Дейкстра, сортировки. Но часть материала сделана специально под веб, а не просто перенесена туда из учебника.
Например, офигенская глава про движение по двумерной сетке:
https://www.kirupa.com/data_structures_algorithms/moving_around_a_grid.htm
Там есть чувачок-инопланетянин, которого можно гонять стрелками или WASD по сетке 10×10. На нём разбираются смещения координат, проверки границ и обновление позиции.
Ах, да. Естественно, все изученные структуры данных даются не просто так, а чтобы написать простые игры, представленные в конце цикла.
#algorithms #data_structures
❤8👍1
#ссылка дня
Если вдруг этим дождливым (ничо не знаю, у меня дождь) вечером нечем заняться, предлагаю вам попробовать покрасить кнопку!
И не просто покрасить кнопку, а покрасить кнопку с помощью Клода. И ничего более.
https://opusfived.dev/
Думаете, получится? :)
#claude #opus
Если вдруг этим дождливым (ничо не знаю, у меня дождь) вечером нечем заняться, предлагаю вам попробовать покрасить кнопку!
И не просто покрасить кнопку, а покрасить кнопку с помощью Клода. И ничего более.
https://opusfived.dev/
Думаете, получится? :)
#claude #opus
🤩4🔥2👎1
#такое дня
Ничего такого, просто макбук с линуксом (конкретно, Omarchy) смотрит на себя в зеркало через вебкамеру, чтобы дать агенту нужную информацию для оптимизации драйвера AMD Radeon GPU.
https://x.com/jpschroeder/status/2097758256420565442
#ai
Ничего такого, просто макбук с линуксом (конкретно, Omarchy) смотрит на себя в зеркало через вебкамеру, чтобы дать агенту нужную информацию для оптимизации драйвера AMD Radeon GPU.
https://x.com/jpschroeder/status/2097758256420565442
#ai
🤩26🔥5👍2👏1
Media is too big
VIEW IN TELEGRAM
AvitoTech всегда славился своими проектами на День разработчика, но в этот раз ребята превзошли самих себя!
В честь наступающего Дня разработчика вместе со студией FU2RE и 3D-художником Dmitriev Video они создали большой портал в прошлое — эмулятор 2006 года будущего разработчика. Внутри — олдскульные игры и викторины, за которые можно лутать баллы и подниматься в рейтинге.
Трём лучшим игрокам 15 сентября подарят суперпак настоящих разрабов, внутри которого салфетка на монитор из коллаборации с Elnik, плед, сумка и плюшевый талисман — кот Б/У. Так что времени сыграть ещё много!
P. S. А ещё в канале AvitoTech до 13 сентября будут каждый день выходить крутые праздничные посты. Не пропустите: может быть, и там они спрятали подарки❤️
В честь наступающего Дня разработчика вместе со студией FU2RE и 3D-художником Dmitriev Video они создали большой портал в прошлое — эмулятор 2006 года будущего разработчика. Внутри — олдскульные игры и викторины, за которые можно лутать баллы и подниматься в рейтинге.
Трём лучшим игрокам 15 сентября подарят суперпак настоящих разрабов, внутри которого салфетка на монитор из коллаборации с Elnik, плед, сумка и плюшевый талисман — кот Б/У. Так что времени сыграть ещё много!
P. S. А ещё в канале AvitoTech до 13 сентября будут каждый день выходить крутые праздничные посты. Не пропустите: может быть, и там они спрятали подарки
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
#релиз дня
Вышел React 19.3, и на этот раз в релизе есть несколько вполне заметных вещей.
Главное — две экспериментальные фичи наконец стали стабильными:
— <ViewTransition> — React теперь умеет нормально работать с браузерным View Transition API: enter/exit/update/shared-element анимации, интеграция с
— refs на <Fragment> — можно получить доступ к группе DOM-элементов без лишнего wrapper-div: повесить event listener,
Ещё появилась довольно приятная мелочь для SSR:
Компонент таким образом можно явно исключить из серверного рендера. На сервере он уйдёт в ближайший
Плюс React теперь поддерживает Trusted Types. Это браузерная защита от DOM XSS: через CSP можно запретить передавать обычные строки в опасные API вроде innerHTML и разрешать только заранее проверенный TrustedHTML. Раньше React такой объект превращал обратно в строку и ломал механизм. В 19.3 trusted-значения наконец проходят в DOM как есть.
Штош, мне нравится этот островок стабильности.
https://react.dev/blog/2026/09/09/react-19-3
#react
Вышел React 19.3, и на этот раз в релизе есть несколько вполне заметных вещей.
Главное — две экспериментальные фичи наконец стали стабильными:
— <ViewTransition> — React теперь умеет нормально работать с браузерным View Transition API: enter/exit/update/shared-element анимации, интеграция с
Suspense, свои переходы.— refs на <Fragment> — можно получить доступ к группе DOM-элементов без лишнего wrapper-div: повесить event listener,
IntersectionObserver, управлять фокусом, вызвать scrollIntoView() и т.д.Ещё появилась довольно приятная мелочь для SSR:
use(browser())
Компонент таким образом можно явно исключить из серверного рендера. На сервере он уйдёт в ближайший
Suspense, а в браузере продолжит рендериться как обычно. Никаких typeof window !== 'undefined' и mounted через useEffect.Плюс React теперь поддерживает Trusted Types. Это браузерная защита от DOM XSS: через CSP можно запретить передавать обычные строки в опасные API вроде innerHTML и разрешать только заранее проверенный TrustedHTML. Раньше React такой объект превращал обратно в строку и ломал механизм. В 19.3 trusted-значения наконец проходят в DOM как есть.
Штош, мне нравится этот островок стабильности.
https://react.dev/blog/2026/09/09/react-19-3
#react
1🔥13❤3👍2
🇩🇪 Германия нуждается в квалифицированных IT-специалистах. Но даже сильного опыта уже недостаточно, чтобы получить оффер. Узнайте у практикующих рекрутеров, что действительно работает на рынке.
Самый активный сезон найма в Германии уже в самом разгаре. Если ваша цель — получить оффер и запустить переезд до конца года, начинать поиск работы нужно именно сейчас.
Начать стоит с LinkedIn — ваш профиль должен быть адаптирован под выдачу в поиске рекрутера.
15 сентября в 19:00 по Берлину (UTC+2) пройдет бесплатный мастер-класс, где вы узнаете:
✔️ Как правильно настроить LinkedIn-профиль, чтобы рекрутеры находили вас и приглашали на интервью
✔️ Как рекрутеры ищут кандидатов через LinkedIn Recruiter и что влияет на выдачу профиля в поиске
✔️ Как адаптировать профиль под разные рынки и карьерные цели
✔️ Какие зарплаты сейчас предлагают компании для IT-специалистов (внутренняя статистика)
✔️ Как получить оффер в Германии уже в этом году
📌 Зарегистрироваться
🎙 Спикеры:
Инесса — IT-рекрутер, раньше работала в Amazon, ING Bank и REWE Digital, где формировала и развивала международные IT-команды.
Роман — Software Engineer с опытом 13+ лет. Работал в BMW, IBM и Eurowings, где прошёл путь от разработчика до тимлида. Обладает большим опытом найма IT-специалистов и точно знает, на что обращают внимание немецкие компании при выборе кандидатов.
Инесса и Роман — основатели рекрутингово-иммиграционного агентства Transparent Hiring. Они знают рынок найма с обеих сторон: каждый день нанимают кандидатов для немецких компаний и помогают специалистам с поиском работы и переездом.
У Transparent Hiring:
⚡️100% закрытие кейсов по визам и жилью — ни одного отказа в визе за 6 лет на рынке
⚡️В команде работают практикующие рекрутеры и визовые эксперты с опытом работы в немецких визовых центрах и австрийском консульстве
⚡️ 600+ успешных кейсов релокации в Германию кандидатов из 45 стран
А еще у команды глубокая экспертиза в работе со специалистами из стран СНГ. Они продолжают перевозить кандидатов в Германию, в том числе из РФ.
👉 Регистрируйтесь на вебинар, чтобы понять, каким должен выглядеть ваш профиль для немецкого рынка.
А пока ждете вебинар, подпишитесь на авторский канал Германия с Инессой 🇩🇪 — там Инесса делится полезными советами по оформлению CV и LinkedIn и переезду в Германию и другие страны Европы.
Самый активный сезон найма в Германии уже в самом разгаре. Если ваша цель — получить оффер и запустить переезд до конца года, начинать поиск работы нужно именно сейчас.
Начать стоит с LinkedIn — ваш профиль должен быть адаптирован под выдачу в поиске рекрутера.
15 сентября в 19:00 по Берлину (UTC+2) пройдет бесплатный мастер-класс, где вы узнаете:
✔️ Как правильно настроить LinkedIn-профиль, чтобы рекрутеры находили вас и приглашали на интервью
✔️ Как рекрутеры ищут кандидатов через LinkedIn Recruiter и что влияет на выдачу профиля в поиске
✔️ Как адаптировать профиль под разные рынки и карьерные цели
✔️ Какие зарплаты сейчас предлагают компании для IT-специалистов (внутренняя статистика)
✔️ Как получить оффер в Германии уже в этом году
📌 Зарегистрироваться
🎙 Спикеры:
Инесса — IT-рекрутер, раньше работала в Amazon, ING Bank и REWE Digital, где формировала и развивала международные IT-команды.
Роман — Software Engineer с опытом 13+ лет. Работал в BMW, IBM и Eurowings, где прошёл путь от разработчика до тимлида. Обладает большим опытом найма IT-специалистов и точно знает, на что обращают внимание немецкие компании при выборе кандидатов.
Инесса и Роман — основатели рекрутингово-иммиграционного агентства Transparent Hiring. Они знают рынок найма с обеих сторон: каждый день нанимают кандидатов для немецких компаний и помогают специалистам с поиском работы и переездом.
У Transparent Hiring:
⚡️100% закрытие кейсов по визам и жилью — ни одного отказа в визе за 6 лет на рынке
⚡️В команде работают практикующие рекрутеры и визовые эксперты с опытом работы в немецких визовых центрах и австрийском консульстве
⚡️ 600+ успешных кейсов релокации в Германию кандидатов из 45 стран
А еще у команды глубокая экспертиза в работе со специалистами из стран СНГ. Они продолжают перевозить кандидатов в Германию, в том числе из РФ.
👉 Регистрируйтесь на вебинар, чтобы понять, каким должен выглядеть ваш профиль для немецкого рынка.
А пока ждете вебинар, подпишитесь на авторский канал Германия с Инессой 🇩🇪 — там Инесса делится полезными советами по оформлению CV и LinkedIn и переезду в Германию и другие страны Европы.
🤡7❤2👍2🔥1
#инструмент дня
Слово «модель» сейчас обычно вызывает в голове что-нибудь на 7–70 миллиардов параметров и десятки гигабайт весов. Но модель вообще не обязана быть такой.
Vercel Labs сделали gpu-lexer — библиотеку подсветки кода, в которой вместо набора грамматик используется одна обученная модель на 41 321 параметр.
Веса упакованы в 6 бит, а весь браузерный пакет занимает 27.4 KB, в сжатом состоянии.
Работает через WebGPU.
Код сначала режется на слова, пробелы, переводы строк и символы. Потом модель для каждого токена выбирает класс:
У классических хайлайтеров подход другой. Prism и Highlight.js хранят правила для отдельных языков. Shiki использует TextMate-грамматики. Больше языков — больше правил и больше данных.
Здесь одна модель занимает два десятка килобайт и пытается покрыть всё сразу.
Для сравнения, автор приводит примерно 162 KB для Prism, 240 KB для Highlight.js и 992 KB для полного набора Shiki.
Но это именно ML: результат не гарантирован правилами. С Shiki модель совпадает примерно на 88–90% токенов. На TypeScript и Python лучше, на менее популярных языках и шаблонизаторах заметно хуже.
Да, такой подход не вчера появился, но мне нравится, что он снова обретает право на жизнь в не слишком сильно детерменированных задачах.
https://gpu-lexer.vercel.app/
#syntax #ml #highlight
Слово «модель» сейчас обычно вызывает в голове что-нибудь на 7–70 миллиардов параметров и десятки гигабайт весов. Но модель вообще не обязана быть такой.
Vercel Labs сделали gpu-lexer — библиотеку подсветки кода, в которой вместо набора грамматик используется одна обученная модель на 41 321 параметр.
Веса упакованы в 6 бит, а весь браузерный пакет занимает 27.4 KB, в сжатом состоянии.
Работает через WebGPU.
Код сначала режется на слова, пробелы, переводы строк и символы. Потом модель для каждого токена выбирает класс:
keyword, string, function, type, operator и т.д. Язык заранее указывать не нужно.У классических хайлайтеров подход другой. Prism и Highlight.js хранят правила для отдельных языков. Shiki использует TextMate-грамматики. Больше языков — больше правил и больше данных.
Здесь одна модель занимает два десятка килобайт и пытается покрыть всё сразу.
Для сравнения, автор приводит примерно 162 KB для Prism, 240 KB для Highlight.js и 992 KB для полного набора Shiki.
Но это именно ML: результат не гарантирован правилами. С Shiki модель совпадает примерно на 88–90% токенов. На TypeScript и Python лучше, на менее популярных языках и шаблонизаторах заметно хуже.
Да, такой подход не вчера появился, но мне нравится, что он снова обретает право на жизнь в не слишком сильно детерменированных задачах.
https://gpu-lexer.vercel.app/
#syntax #ml #highlight
❤12👍1🫡1
Media is too big
VIEW IN TELEGRAM
#инструмент дня
Этого стоило ожидать. Вашему вниманию — Quake на CSS.
Реализован он с помощью движка PolyCSS, а выбрать карту можно просто передав значение в параметр. Например, вот второй уровень первого эпизода: https://cssquake.com/?map=e1m2
Итак, а что же такое PolyCSS?
PolyCSS — 3D-движок, который рендерит модели обычными DOM-элементами через CSS
Полигоны при этом реально остаются HTML-элементами. Их можно увидеть в DevTools, стилизовать через CSS, повесить
Поэтому PolyCSS много возится с самой геометрией: убирает внутренние грани, объединяет подходящие поверхности и выбирает разные способы рендера для разных типов полигонов. По умолчанию используется
До Three.js или Babylon.js по возможностям тут далеко: освещение проще, у теней и текстур есть ограничения, а большие сцены довольно быстро начинают упираться в DOM. Но для небольших интерактивных сцен, моделей и всяких веб-экспериментов подход вполне рабочий, и при этом весь результат остаётся частью обычной страницы.
PolyCSS: https://github.com/layoutit/polycss
cssQuake: https://github.com/layoutit/cssQuake
Демонстрация квейком, конечно, это мощно.
#3d #polycss #quake
Этого стоило ожидать. Вашему вниманию — Quake на CSS.
Реализован он с помощью движка PolyCSS, а выбрать карту можно просто передав значение в параметр. Например, вот второй уровень первого эпизода: https://cssquake.com/?map=e1m2
Итак, а что же такое PolyCSS?
PolyCSS — 3D-движок, который рендерит модели обычными DOM-элементами через CSS
matrix3d(). Без WebGL и без canvas для самой сцены. Загружает OBJ/MTL, STL, glTF/GLB и VOX, умеет в текстуры, свет, тени, камеры, orbit/map/first-person controls, плюс есть обёртки для React и Vue.Полигоны при этом реально остаются HTML-элементами. Их можно увидеть в DevTools, стилизовать через CSS, повесить
click, анимацию или вообще работать с ними как с обычным DOM. Отсюда же и довольно специфичная модель производительности: важны количество DOM-узлов и объём работы, который потом достаётся браузеру на рендер и композитинг.Поэтому PolyCSS много возится с самой геометрией: убирает внутренние грани, объединяет подходящие поверхности и выбирает разные способы рендера для разных типов полигонов. По умолчанию используется
lossy`-оптимизация, которая может немного упростить исходную сетку ради меньшего количества DOM-элементов; если это нежелательно, есть `lossless. С текстурами похожая история: движок собирает texture atlas, а элементы показывают нужные участки, вместо того чтобы тупо вешать отдельную картинку на каждый треугольник.До Three.js или Babylon.js по возможностям тут далеко: освещение проще, у теней и текстур есть ограничения, а большие сцены довольно быстро начинают упираться в DOM. Но для небольших интерактивных сцен, моделей и всяких веб-экспериментов подход вполне рабочий, и при этом весь результат остаётся частью обычной страницы.
PolyCSS: https://github.com/layoutit/polycss
cssQuake: https://github.com/layoutit/cssQuake
Демонстрация квейком, конечно, это мощно.
#3d #polycss #quake
1🔥9❤2
Каждый мужчина может стать тем самым, которому говорят «это был самый лучший секс в моей жизни»
📢 Тебе точно надо в этот закрытый телеграм-канал, если хочешь:
— Научиться заниматься сексом сколько захотите, а не сколько получается
— Избавиться от синдрома тревожного ожидания сексуальной неудачи
— Создавать притяжение без манипуляций и «пикап-трюков»
— Испытывать мультиоргазмы, которые в 50 раз сильнее обычных
— Удивить самую искушённую в сексе женщину и стать незабываемым суперлюбовником
— Пробудить страсть и усилить любовь в долгих отношениях
— Получить огромное количество энергии и сил. Забыть про усталость, выгорание и прокрастинацию
— Получить мощный заряд для развития бизнеса, карьеры и спорта
— Включать ‘мужское’ состояние, которое создает спрос и ажиотаж на вас и выбираете уже в первую очередь вы, а не ждете когда выберут вас
Владелец канала Юрий — эксперт по управлению сексуальной энергией, мастер даосских практик. Более 13 лет обучался и практиковал с самыми известными даосскими мастерами, уже обучил более 1000 мужчин этим уникальным навыкам🔥
Это закрытый канал, куда можно вступить только по этой уникальной ссылке
👉🏻 https://t.me/+tZLDZUx33thjMDVi
Отправляй заявку, пока она работает
Please open Telegram to view this post
VIEW IN TELEGRAM
🤡50🤩3👎2🫡2❤1👍1👏1🤬1
#статья дня
Мы как-то с вами уже обсудили, какими разными бывают .*ignore-файлы. И что не .gitignore-ом единым, вот тут: https://t.me/htmlshit/3989
Но я упустил из виду, что у автора есть ещё статья-продолжение! И она — конкретно про разные вспомогательные файлы уже самого git.
Ну, например, с .gitignore всё уже понятно. А что насчёт .gitattributes?
А этот файл помогает разобраться, как поступать с разными файлами. Например, merge strategy:
и всё, разрулится как надо. Или вот шипите вы мультиплатформу:
А? По-моему, очень круто. Но давайте дальше.
.gitmodules — конфигурация подмодулей git, .mailmap — хендлит обновление почты в старых коммитах, .gitmessage — шаблон сообщения коммита, .git-blame-ignore-revs — позволяет не включать преттиер и линтер в blame (Привет, Саша!).
Ну и, например, как зашиппить пустую папку в git? Положите в неё файл .gitkeep! Но это не стандартный файл, это просто соглашение. Таких много.
Короче, всё это — вот тут: https://nesbitt.io/2026/02/05/git-magic-files.html
Я вообще этот блог люблю, автор жёстко упарывается по менеджерам пакетов и гиту. Алгоритмы разбора зависимостей, диффов, уязвимости — вот это вот всё.
#git #config
Мы как-то с вами уже обсудили, какими разными бывают .*ignore-файлы. И что не .gitignore-ом единым, вот тут: https://t.me/htmlshit/3989
Но я упустил из виду, что у автора есть ещё статья-продолжение! И она — конкретно про разные вспомогательные файлы уже самого git.
Ну, например, с .gitignore всё уже понятно. А что насчёт .gitattributes?
А этот файл помогает разобраться, как поступать с разными файлами. Например, merge strategy:
package-lock.json merge=ours
и всё, разрулится как надо. Или вот шипите вы мультиплатформу:
*.sh text eol=lf
*.bat text eol=crlf
А? По-моему, очень круто. Но давайте дальше.
.gitmodules — конфигурация подмодулей git, .mailmap — хендлит обновление почты в старых коммитах, .gitmessage — шаблон сообщения коммита, .git-blame-ignore-revs — позволяет не включать преттиер и линтер в blame (Привет, Саша!).
Ну и, например, как зашиппить пустую папку в git? Положите в неё файл .gitkeep! Но это не стандартный файл, это просто соглашение. Таких много.
Короче, всё это — вот тут: https://nesbitt.io/2026/02/05/git-magic-files.html
Я вообще этот блог люблю, автор жёстко упарывается по менеджерам пакетов и гиту. Алгоритмы разбора зависимостей, диффов, уязвимости — вот это вот всё.
#git #config
👍5🔥1
Media is too big
VIEW IN TELEGRAM
#инструмент дня
Когда-то давно ещё на Ubuntu я пользовался колорпикером Pick.
Он был настолько прост и удобен, с этими милыми названиями цветов, что я не мог себе представить работу как-то иначе. И вот, наконец, я сделал его клон для macOS!
И назвал его Pipetka.
Как оказалось, macOS не умеет записывать видео выбора цвета :)
Pipetka умеет брать цвет с рабочего стола и окон, умеет генерировать палитры из одного изображения или целого их каталога. Даёт названия цветам, позволяет переключаться между разными их представлениями и экспортировать в разных форматах.
Проект открытый, на гитхаб автоматически выкладываются неподписанные релизы: https://github.com/bekharsky/pipetka
Правда, неподписанный релиз означает, что, собственно, разрешения работать не будут :) Так что я в процессе загрузки бесплатного подписанного релиза туда же.
Upd. Подписанный релиз загружен на гитхаб, всё хорошо! Но запускать приложение надо из Applications.
А если есть желание поддержать — Pipetka лежит в App Store: https://apps.apple.com/fi/app/pipetka/id6784390987?mt=12
Пользуйтесь :)
#colorpicker #app #macos
Когда-то давно ещё на Ubuntu я пользовался колорпикером Pick.
Он был настолько прост и удобен, с этими милыми названиями цветов, что я не мог себе представить работу как-то иначе. И вот, наконец, я сделал его клон для macOS!
И назвал его Pipetka.
Как оказалось, macOS не умеет записывать видео выбора цвета :)
Pipetka умеет брать цвет с рабочего стола и окон, умеет генерировать палитры из одного изображения или целого их каталога. Даёт названия цветам, позволяет переключаться между разными их представлениями и экспортировать в разных форматах.
Проект открытый, на гитхаб автоматически выкладываются неподписанные релизы: https://github.com/bekharsky/pipetka
Upd. Подписанный релиз загружен на гитхаб, всё хорошо! Но запускать приложение надо из Applications.
А если есть желание поддержать — Pipetka лежит в App Store: https://apps.apple.com/fi/app/pipetka/id6784390987?mt=12
Пользуйтесь :)
#colorpicker #app #macos
1❤5