#заметка дня
Вам всем наверняка знакома раскладка masonry — «кладка каменщика». Собственно, название она получила от Masonry.js, библиотеки сетки, влияние которой на веб сложно переоценить.
Так вот. Естественно, давно предпринимались попытки внести эту раскладку в стандарты. Попытки эти усилились с началом полноценной поддержки гридов в браузерах, но к общему знаменателю за много лет так и не пришли.
Собственно, в 2020 Firefox стал первым браузером, внёс масонри в
Масонам это не понравилось.
Потому в стандарт пошло название grid-lanes. Да-да,
Короче, к чему это я. Буквально три недели назад команда WebKit смёрджила в стабильную базу PR, который включает поддержку grid-lanes. И, соответственно, выпустила Safari Technology Preview 234 под соответствующую новость в блоге: https://webkit.org/blog/17660/introducing-css-grid-lanes/
Там очень подробная статья о том, как и когда применять, какие режимы есть, какие настройки.
Chrome и Firefox тоже уже вносят изменения в свой код, так что Masonry в Baseline не за горами!
P. S. кстати, скачивать разные ранние версии WebKit задолго до выхода очередной версии Safari TP можно отсюда: https://webkit.org/build-archives/
#css #masonry
Вам всем наверняка знакома раскладка masonry — «кладка каменщика». Собственно, название она получила от Masonry.js, библиотеки сетки, влияние которой на веб сложно переоценить.
Так вот. Естественно, давно предпринимались попытки внести эту раскладку в стандарты. Попытки эти усилились с началом полноценной поддержки гридов в браузерах, но к общему знаменателю за много лет так и не пришли.
Собственно, в 2020 Firefox стал первым браузером, внёс масонри в
display: grid под флагом и так и сидел все эти годы. А Chrome 140 (и соответствующий Edge) так и назвали — display: masonry.Масонам это не понравилось.
Потому в стандарт пошло название grid-lanes. Да-да,
display: grid-lanes, частью grid это так и не стало (и очень хорошо).Короче, к чему это я. Буквально три недели назад команда WebKit смёрджила в стабильную базу PR, который включает поддержку grid-lanes. И, соответственно, выпустила Safari Technology Preview 234 под соответствующую новость в блоге: https://webkit.org/blog/17660/introducing-css-grid-lanes/
Там очень подробная статья о том, как и когда применять, какие режимы есть, какие настройки.
Chrome и Firefox тоже уже вносят изменения в свой код, так что Masonry в Baseline не за горами!
P. S. кстати, скачивать разные ранние версии WebKit задолго до выхода очередной версии Safari TP можно отсюда: https://webkit.org/build-archives/
#css #masonry
👍19
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
Итак, верстаешь ты страницу с кучей врезок, аккордеонов, вкладок и прочих интерактивных элементов, требующих действия пользователя.
Но у аккордеонов есть один очевидный минус: поиск по странице не подсветит найденное. Ну ещё бы, оно же скрыто.
Так вот, Chrome очень старается это исправить и именно поэтому начиная со 102 версии у атрибута
Ссылка на блог разработчиков: https://developer.chrome.com/docs/css-ui/hidden-until-found
Сразу пример, если кому-то в лом на статью лезть: https://codepen.io/web-dot-dev/pen/JjMxmom
Попробуйте поискать слово, которое скрыто в каком-либо из аккордеонов.
Ну и для браузеров, которые не поддерживают этот атрибут, либо для иных UI-виджетов, они предлагают проверять поддержку события onbeforematch:
Довольно странное решение, если честно, но очевидно, что проблема существует и делать с ней что-то надо.
#chrome #hidden #бородач
Итак, верстаешь ты страницу с кучей врезок, аккордеонов, вкладок и прочих интерактивных элементов, требующих действия пользователя.
Но у аккордеонов есть один очевидный минус: поиск по странице не подсветит найденное. Ну ещё бы, оно же скрыто.
Так вот, Chrome очень старается это исправить и именно поэтому начиная со 102 версии у атрибута
hidden есть уникальное для Chrome значение until-found, говорящее само за себя.Ссылка на блог разработчиков: https://developer.chrome.com/docs/css-ui/hidden-until-found
Сразу пример, если кому-то в лом на статью лезть: https://codepen.io/web-dot-dev/pen/JjMxmom
Попробуйте поискать слово, которое скрыто в каком-либо из аккордеонов.
Ну и для браузеров, которые не поддерживают этот атрибут, либо для иных UI-виджетов, они предлагают проверять поддержку события onbeforematch:
if (!(‘onbeforematch' in document.body)) {
// expand all hidden content
}
Довольно странное решение, если честно, но очевидно, что проблема существует и делать с ней что-то надо.
#chrome #hidden #бородач
❤10👍6🤩2
#инструмент дня
На связи Глеб, который принес немножечко странного.
Думали ли вы когда-нибудь о том, что алгоритмы сжатия строк потребуются для передачи состояния приложения?
Всё когда-нибудь случается впервые, вот и мне потребовалось передавать в ссылке текущее состояние редактора кода (в нашем продукте это один из основных иструментов).
Так как в нашем редакторе есть владки, то у каждой свои параметры рабочего пространства, которые составляют композицию объектов.
Передавать необходимо как раз такую компиляцию состояний в одном объекте, который должен передаваться в генерируемой ссылке.
Но как, ведь длина адресной строки очень ограничена и не вместит даже небольшой сериализованный объект в параметре адресной строки.
Оказывается не так уж это сложно если вспомнить про алгоритмы сжатия.
Сериализуем объект, сжимаем его с помощью библиотеки lz-string и генерируем ссылку с параметрами состояния редактора в одном из параметров.
Попробовать можно в codepen.
Да, можно использовать более эффективный алгоритм LZMA (один из примеров), однако он существенно медленнее. Тем не менее, производительность LZMA в контексте ограниченного числа символов, позволяет вообще не думать о каком-либо существенном влиянии на результат.
В CedrusData (компания, в которой работаю) много интересных задач, в том числе связанных с производительностью. Ждите новых заметок😎
#compression #performance
На связи Глеб, который принес немножечко странного.
Думали ли вы когда-нибудь о том, что алгоритмы сжатия строк потребуются для передачи состояния приложения?
Всё когда-нибудь случается впервые, вот и мне потребовалось передавать в ссылке текущее состояние редактора кода (в нашем продукте это один из основных иструментов).
Так как в нашем редакторе есть владки, то у каждой свои параметры рабочего пространства, которые составляют композицию объектов.
Передавать необходимо как раз такую компиляцию состояний в одном объекте, который должен передаваться в генерируемой ссылке.
Но как, ведь длина адресной строки очень ограничена и не вместит даже небольшой сериализованный объект в параметре адресной строки.
Оказывается не так уж это сложно если вспомнить про алгоритмы сжатия.
Сериализуем объект, сжимаем его с помощью библиотеки lz-string и генерируем ссылку с параметрами состояния редактора в одном из параметров.
Попробовать можно в codepen.
Да, можно использовать более эффективный алгоритм LZMA (один из примеров), однако он существенно медленнее. Тем не менее, производительность LZMA в контексте ограниченного числа символов, позволяет вообще не думать о каком-либо существенном влиянии на результат.
В CedrusData (компания, в которой работаю) много интересных задач, в том числе связанных с производительностью. Ждите новых заметок😎
#compression #performance
GitHub
GitHub - pieroxy/lz-string: LZ-based compression algorithm for JavaScript
LZ-based compression algorithm for JavaScript. Contribute to pieroxy/lz-string development by creating an account on GitHub.
1👍13
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
Тут Jh3y опять по красоте исполняет. Итак, поступил вопрос из аудитории: «Как сделать эффект подсвеченной стеклянной фаски, как на новых иконках в iOS?»
Ответ интереснее и одновременно проще, чем может показаться: https://codepen.io/jh3y/pen/WbwyGBb
Весь секрет в наложении маски в виде градиента под элемент:
И всё, дальше просто вращаем по желанию. Техника не нова, даже блендинг не нужен. Ну а весь JS-код — он просто для обработки позиции курсора и для фирменного эффекта взрыв-диаграммы, ставшей визитной карточкой Джея.
Работает, кстати, во всех современных браузерах.
#css #gradient #mask
Тут Jh3y опять по красоте исполняет. Итак, поступил вопрос из аудитории: «Как сделать эффект подсвеченной стеклянной фаски, как на новых иконках в iOS?»
Ответ интереснее и одновременно проще, чем может показаться: https://codepen.io/jh3y/pen/WbwyGBb
Весь секрет в наложении маски в виде градиента под элемент:
&::after {
mask: linear-gradient(calc(var(--pointer-angle) * 1deg), #ffffff80, #ffffff30 30% 60%, #fff);
}
И всё, дальше просто вращаем по желанию. Техника не нова, даже блендинг не нужен. Ну а весь JS-код — он просто для обработки позиции курсора и для фирменного эффекта взрыв-диаграммы, ставшей визитной карточкой Джея.
Работает, кстати, во всех современных браузерах.
#css #gradient #mask
❤20
Forwarded from Технотренды от Альфа-Банка
Общий искусственный интеллект появится в новом году: миф или реальность? 🤔
Представьте искусственный интеллект, способный решать любые задачи как человек. Пока такого не существует — это лишь концепция под названием AGI.
Илон Маск утверждает, что его компания xAI может достичь уровня AGI, равного или превосходящего человеческий интеллект, уже в ближайшие годы. Возможно даже, в 2026 году.
Так насколько реальны эти прогнозы и стоит ли ожидать появления AGI в ближайшее время?
🙂 Дмитрий Григоров, директор по искусственному интеллекту и данным, старший вице-президент Альфа-Банка:
@alfa_trends
Представьте искусственный интеллект, способный решать любые задачи как человек. Пока такого не существует — это лишь концепция под названием AGI.
Илон Маск утверждает, что его компания xAI может достичь уровня AGI, равного или превосходящего человеческий интеллект, уже в ближайшие годы. Возможно даже, в 2026 году.
Так насколько реальны эти прогнозы и стоит ли ожидать появления AGI в ближайшее время?
Прогнозы появления AGI в 2026 году выглядят чересчур оптимистично, это миф. Сегодня мы видим значительные успехи в развитии AI для широкого спектра задач — модели уже умеют генерировать профессиональные подсказки для юристов и врачей, писать код, анализировать данные и многое другое. Для перехода на уровень AGI искусственному интеллекту всё ещё не хватает универсального понимания мира, ему нужно научиться оперировать логикой, выходящей за пределы статистики.
Безусловно, движение в этом направлении стремительно. Показателен недавний результат модели GPT 5.2 в тесте на «человечность» ARC-AGI-2: модель набрала 52,9%, приблизившись к человеческому показателю в 66%.
Однако ключевой вызов сохраняется: даже при бурном росте вычислительных мощностей, улучшении архитектур нейросетей и обучении на масштабных данных AI-системы остаются ограниченными символическими проекциями мира в виде текста, картинок, звуков, видео. Они изолированы от физической реальности и работают только с ограниченной частью человеческого опыта.
Этот разрыв пытаются закрыть на практике: интегрируют искусственный интеллект в «мозги» гуманоидных роботов для обучения через сенсорный опыт, создают целые AI-симуляций мира. Всё это требует многих лет научно-инженерной работы.
Хотя прорыв к AGI может произойти раньше, чем предполагают скептики, заявления о его достижении в ближайшие пару лет стоит воспринимать скорее как яркую маркетинговую кампанию. Ключевые инвестиции и ожидания лучше сосредоточить на практических и измеримых достижениях искусственного интеллекта.
@alfa_trends
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🤡6❤5🤩2👎1
#ссылка дня
Я и подумать не мог, сколько в моей работе времени будет отдано обсуждению различных фич продукта.
Когда я был частью веб-студии/галеры, мы просто дубасили по готовому дизайну и техзаданию (когда таковое было, *звук горьких слёз*), не особо задумываясь, почему было принято то или иное решение. В лучшем случае можно было пост-фактум указать на проблему.
В продуктовой же компании дела обстоят чуть-чуть иначе. Если ты на уровне senior, от тебя ожидают не только и не столько дубасить код, сколько понимать принципы работы продукта и быть готовым защищать решения по бизнес-логике или взаимодействию с клиентом.
Количество Google Docs- и вики-материалов в такой работе зашкаливает. Вопросы «почему?» и «зачем?», повторяемые раз за разом… Метрики.
Отсюда интересно посмотреть, что же творится в других компаниях. И тут — на удивление — Microsoft нам такую возможность даёт. Теперь можно взглянуть на каталог explainers (сопровождающих документов, документации, расшифровывающих заметок) браузера Edge: https://github.com/MicrosoftEdge/MSEdgeExplainers
Почему что-то является проблемой? Как выявили? Почему было принято то или иное решение? Как команда объяснила себе какие-то новые концепты? Какой состав команды? И так далее.
Довольно погружающее чтиво. Особенно в разделе про DevTools, на которые разработчики Edge в принципе делают упор (да-да, я в курсе, что там тот же Chromium, но дело же в мелочах).
#docs #explainers #process #бородач
Я и подумать не мог, сколько в моей работе времени будет отдано обсуждению различных фич продукта.
Когда я был частью веб-студии/галеры, мы просто дубасили по готовому дизайну и техзаданию (когда таковое было, *звук горьких слёз*), не особо задумываясь, почему было принято то или иное решение. В лучшем случае можно было пост-фактум указать на проблему.
В продуктовой же компании дела обстоят чуть-чуть иначе. Если ты на уровне senior, от тебя ожидают не только и не столько дубасить код, сколько понимать принципы работы продукта и быть готовым защищать решения по бизнес-логике или взаимодействию с клиентом.
Количество Google Docs- и вики-материалов в такой работе зашкаливает. Вопросы «почему?» и «зачем?», повторяемые раз за разом… Метрики.
Отсюда интересно посмотреть, что же творится в других компаниях. И тут — на удивление — Microsoft нам такую возможность даёт. Теперь можно взглянуть на каталог explainers (сопровождающих документов, документации, расшифровывающих заметок) браузера Edge: https://github.com/MicrosoftEdge/MSEdgeExplainers
Почему что-то является проблемой? Как выявили? Почему было принято то или иное решение? Как команда объяснила себе какие-то новые концепты? Какой состав команды? И так далее.
Довольно погружающее чтиво. Особенно в разделе про DevTools, на которые разработчики Edge в принципе делают упор (да-да, я в курсе, что там тот же Chromium, но дело же в мелочах).
#docs #explainers #process #бородач
GitHub
GitHub - MicrosoftEdge/MSEdgeExplainers: Home for explainer documents originated by the Microsoft Edge team
Home for explainer documents originated by the Microsoft Edge team - MicrosoftEdge/MSEdgeExplainers
👍7
#статья дня
Ну что же, пора просыпаться от зимней спячки, котаны! Салаты съедены, сериалы отсмотрены. Плавно готовимся к неизбежному.
В моей предыдущей компании были очень популярны турниры по настольному футболу, aka foosball. Не до драк, конечно, но со своим лором, правилами и даже традициями. Например, проигравший увековечивал своё имя под столом.
Так вот, к чему это я.
Помню, мы использовали какой-то сервис для составления турнирных таблиц. Я какое-то время даже планировал его склонировать, но руки не дошли. А тут наткнулся на интересную реализацию деревьев диаграмм. Ну или блок-схем, если хотите. Как раз похожих на турнирные таблицы.
Как вам такое: отрисовка дерева с помощью... списков!
Вот, глядите: https://codepen.io/alinaki/pen/ZYOOWOL
Не, ну буквально. У автора четыре статьи, от горизонтальных и вертикальных деревьев до более сложных конструкций вроде центрально-ориентированной диаграммы (вот то, что на иллюстрации, к таким как раз относится) и прочих экспериментов.
Начало тут: https://fractaledmind.com/2018/03/05/css-tree/
Ну что, будем таки писать такой сервис? Или максимально гибкая отрисовка на холсте наше всё?
#css #html #tree #list
Ну что же, пора просыпаться от зимней спячки, котаны! Салаты съедены, сериалы отсмотрены. Плавно готовимся к неизбежному.
В моей предыдущей компании были очень популярны турниры по настольному футболу, aka foosball. Не до драк, конечно, но со своим лором, правилами и даже традициями. Например, проигравший увековечивал своё имя под столом.
Так вот, к чему это я.
Помню, мы использовали какой-то сервис для составления турнирных таблиц. Я какое-то время даже планировал его склонировать, но руки не дошли. А тут наткнулся на интересную реализацию деревьев диаграмм. Ну или блок-схем, если хотите. Как раз похожих на турнирные таблицы.
Как вам такое: отрисовка дерева с помощью... списков!
Вот, глядите: https://codepen.io/alinaki/pen/ZYOOWOL
Не, ну буквально. У автора четыре статьи, от горизонтальных и вертикальных деревьев до более сложных конструкций вроде центрально-ориентированной диаграммы (вот то, что на иллюстрации, к таким как раз относится) и прочих экспериментов.
Начало тут: https://fractaledmind.com/2018/03/05/css-tree/
Ну что, будем таки писать такой сервис? Или максимально гибкая отрисовка на холсте наше всё?
#css #html #tree #list
❤6
Media is too big
VIEW IN TELEGRAM
#статья дня
Зачем писать код, если можно сгенерировать, правда? Такие нынче правила игры. Но нужно идти дальше.
Зачем писать код, если можно украсть? Особенно, когда сам в руки идёт. Ведь если даже генерировать что-то, нужно, как минимум, учитывать требования по работе, дизайну... никто не отменял понимание сути задачи.
Так вот, сегодня на поветске дня — как украсть любой React-компонент!
И в этом нам поможет React DevTools, любая сносная LLM-ка и вот эта инструкция: https://fant.io/react/
TL;DR
React-приложение хранится не только в DOM-представлении, но и в виде React Fiber — внутреннего дерева (тот самый виртуальный DOM), где видно, какой компонент и с какими пропсами создал разметку.
Все экземпляры одного компонента ссылаются на один и тот же т. н.
Эти примеры вместе с минифицированным кодом компонента скармливаются LLM, которая восстанавливает чистый React. Дальше идёт проверка: компонент рендерится с теми же пропсами, HTML сравнивается с оригиналом, а расхождения отправляются обратно модели. Компоненты собираются снизу вверх, от простых к составным. Анимации и сложные состояния чуток могут замедлить процесс, но для статичного UI он работает прям хорошо.
Дивный новый мир. А чтобы понимать внутренности Fiber, можно использовать инструмент со странным названием bippy: https://github.com/aidenybai/bippy, когда, что и почему отрендерилось.
#react
Зачем писать код, если можно сгенерировать, правда? Такие нынче правила игры. Но нужно идти дальше.
Зачем писать код, если можно украсть? Особенно, когда сам в руки идёт. Ведь если даже генерировать что-то, нужно, как минимум, учитывать требования по работе, дизайну... никто не отменял понимание сути задачи.
Так вот, сегодня на поветске дня — как украсть любой React-компонент!
И в этом нам поможет React DevTools, любая сносная LLM-ка и вот эта инструкция: https://fant.io/react/
TL;DR
React-приложение хранится не только в DOM-представлении, но и в виде React Fiber — внутреннего дерева (тот самый виртуальный DOM), где видно, какой компонент и с какими пропсами создал разметку.
Все экземпляры одного компонента ссылаются на один и тот же т. н.
type, поэтому можно сгруппировать их и собрать реальные примеры прямо из продакшена.Эти примеры вместе с минифицированным кодом компонента скармливаются LLM, которая восстанавливает чистый React. Дальше идёт проверка: компонент рендерится с теми же пропсами, HTML сравнивается с оригиналом, а расхождения отправляются обратно модели. Компоненты собираются снизу вверх, от простых к составным. Анимации и сложные состояния чуток могут замедлить процесс, но для статичного UI он работает прям хорошо.
Дивный новый мир. А чтобы понимать внутренности Fiber, можно использовать инструмент со странным названием bippy: https://github.com/aidenybai/bippy, когда, что и почему отрендерилось.
#react
👍16
#статья дня
Если вы не читали адвент-календарь HTMHell, то могли и пропустить интересности!
Во втором дне календаря 2025 года речь идёт о теге
Штука гениальная: как только браузер встречает
В браузере и
Существенная часть статьи посвящена тому, как
Например, обнулить CSP.
Короче, можно долго растекаться по поводу того, зачем знать всю эту вот подноготную истории веба, но такие штуки кажутся весьма забавными. Почитайте, там интересно.
#html #sanitize
Если вы не читали адвент-календарь HTMHell, то могли и пропустить интересности!
Во втором дне календаря 2025 года речь идёт о теге
<plaintext>. Это устаревший элемент, который запрещён стандартами, но до сих пор поддерживается браузерами. Штука гениальная: как только браузер встречает
<plaintext>, он прекращает разбор HTML. Всё, что идёт дальше, воспринимается как обычный текст, независимо от того, что там написано.
<body>
<h1>Заголовок</h1>
<plaintext>
<div>Этот div не станет элементом</div>
<script>alert('xss')</script>
</body>
В браузере и
<div>, и <script> будут выведены как текст. DOM на этом месте обрывается, ошибок в консоли нет, с точки зрения браузера всё произошло корректно.Существенная часть статьи посвящена тому, как
<plaintext> ведёт себя при санитайзинге HTML. Разные санитайзеры обрабатывают его по-разному: кто-то удаляет, кто-то экранирует, кто-то оставляет в форме, которая всё равно влияет на парсинг. В результате один и тот же входной HTML после «очистки» может либо работать нормально, либо полностью ломать страницу. Например, обнулить CSP.
Короче, можно долго растекаться по поводу того, зачем знать всю эту вот подноготную истории веба, но такие штуки кажутся весьма забавными. Почитайте, там интересно.
#html #sanitize
❤12
#молния дня
А пока вы читали сообщение выше, оказалось, что вышел jQuery 4.0: https://blog.jquery.com/2026/01/17/jquery-4-0-0/
Кто-нибудь ещё использует jQuery для новых проектов? Или по-инерции?
С другой стороны, эта инерция всё ещё драйвит 70% веб-сайтов в мире... есть у меня интересная инфа на тему, попозже сегодня выкачу 🙂
А пока вы читали сообщение выше, оказалось, что вышел jQuery 4.0: https://blog.jquery.com/2026/01/17/jquery-4-0-0/
Кто-нибудь ещё использует jQuery для новых проектов? Или по-инерции?
С другой стороны, эта инерция всё ещё драйвит 70% веб-сайтов в мире... есть у меня интересная инфа на тему, попозже сегодня выкачу 🙂
Jquery
jQuery 4.0.0 | Official jQuery Blog
jQuery: The Write Less, Do More, JavaScript Library
❤10👍5🤩2
Изучаете программирование? Хотите стать классным айтишником с высокой ЗП?
Пока все в спячке после Нового Года, вы можете стремительно войти в сферу IT при помощи сборки "IT в деле" которую мы составили.
Что внутри сборки:
- Каналы о программировании и разработке: Python, C++, C#, Java
- GameDev каналы, создание игр, подсказки для ваших проектов и реальный опыт в создании игр💍
- Аналитика и базы данных, всё по теме работы с данными от А до Я, авторские лайфхаки и простые заметки с проектов 🔤
- Каналы о QA-тестировании, опытные тестировщики делятся с вами знаниями и помогают в комментариях👨💻
Для каждого здесь что-то найдётся! Выберите интересные вам каналы и подпишитесь на сборку. Найдите то, что нужно вам для следующего шага в IT
Пока все в спячке после Нового Года, вы можете стремительно войти в сферу IT при помощи сборки "IT в деле" которую мы составили.
Что внутри сборки:
- Каналы о программировании и разработке: Python, C++, C#, Java
- GameDev каналы, создание игр, подсказки для ваших проектов и реальный опыт в создании игр
- Аналитика и базы данных, всё по теме работы с данными от А до Я, авторские лайфхаки и простые заметки с проектов 🔤
- Каналы о QA-тестировании, опытные тестировщики делятся с вами знаниями и помогают в комментариях
Для каждого здесь что-то найдётся! Выберите интересные вам каналы и подпишитесь на сборку. Найдите то, что нужно вам для следующего шага в IT
Please open Telegram to view this post
VIEW IN TELEGRAM
🫡2