#дайджест недели, а точнее, двух
Понедельник
Разбор оптического выравнивания и причин, почему иконки выглядят смещёнными даже при точном центрировании. Про барицентр фигур, автоматизацию и простой способ быстро проверить баланс иконки.
https://t.me/htmlshit/3922
Среда
Обсуждение адвент-календарей по разработке и статьям.
https://t.me/htmlshit/3923
Четверг
Критическая уязвимость в React Server Components, позволяющая выполнить код на сервере через специально сформированный запрос. Затрагивает все проекты с RSC, патчи уже выпущены.
https://t.me/htmlshit/3925
Воскресенье
Текст о доступности в реальных условиях использования, а не в идеальной среде. Разбор распространённых мифов и причин, почему a11y касается всех.
https://t.me/htmlshit/3927
Понедельник
GameShell — обучающая консольная игра для изучения Unix-команд в формате текстового квеста. Подходит для практики базовой работы с терминалом.
https://t.me/htmlshit/3928
Вторник
Почему серверы специально увеличивают размер страниц ошибок. Коротко о поведении браузеров, стандартных заглушках и решении, которое использует nginx и Cloudflare.
https://t.me/htmlshit/3930
Среда
Как DRM в стриминговых сервисах блокирует скриншоты через EME и GPU. Почему в Chrome кадры чёрные и при чём тут аппаратное ускорение.
https://t.me/htmlshit/3932
Пятница
CSS Wrapped 2025 — обзор ключевых изменений в CSS за год: нативные компоненты, скролл, анимации и новые функции языка.
https://t.me/htmlshit/3933
Понедельник
Разбор оптического выравнивания и причин, почему иконки выглядят смещёнными даже при точном центрировании. Про барицентр фигур, автоматизацию и простой способ быстро проверить баланс иконки.
https://t.me/htmlshit/3922
Среда
Обсуждение адвент-календарей по разработке и статьям.
https://t.me/htmlshit/3923
Четверг
Критическая уязвимость в React Server Components, позволяющая выполнить код на сервере через специально сформированный запрос. Затрагивает все проекты с RSC, патчи уже выпущены.
https://t.me/htmlshit/3925
Воскресенье
Текст о доступности в реальных условиях использования, а не в идеальной среде. Разбор распространённых мифов и причин, почему a11y касается всех.
https://t.me/htmlshit/3927
Понедельник
GameShell — обучающая консольная игра для изучения Unix-команд в формате текстового квеста. Подходит для практики базовой работы с терминалом.
https://t.me/htmlshit/3928
Вторник
Почему серверы специально увеличивают размер страниц ошибок. Коротко о поведении браузеров, стандартных заглушках и решении, которое использует nginx и Cloudflare.
https://t.me/htmlshit/3930
Среда
Как DRM в стриминговых сервисах блокирует скриншоты через EME и GPU. Почему в Chrome кадры чёрные и при чём тут аппаратное ускорение.
https://t.me/htmlshit/3932
Пятница
CSS Wrapped 2025 — обзор ключевых изменений в CSS за год: нативные компоненты, скролл, анимации и новые функции языка.
https://t.me/htmlshit/3933
👍4❤1
This media is not supported in your browser
VIEW IN TELEGRAM
#статья дня
Одна из самых сложных и плохо контролируемых проблем в интерфейсной типографике — встроенные вертикальные метрики шрифтов (ascent, descent, line gap).
Из-за них текстовый элемент по box-модели почти никогда не совпадает с тем, как текст выглядит визуально: появляется лишнее пространство сверху и снизу, которое мешает точному вертикальному выравниванию.
Для этого в Chrome и Safari не так давно появился
.text {
text-box: trim-both cap alphabetic;
}
А вот и ссылка на статью в девблоге: https://developer.chrome.com/blog/css-text-box-trim
В Firefox пока не работает совсем.
Ранее похожий эффект достигался с помощью библиотек вроде Capsize и других `leading-trim`-решений. Они опираются на вычисление метрик конкретного шрифта и генерацию псевдоэлементов с отрицательными отступами, что усложняет систему, привязывает её к шрифтам и может создавать проблемы с производительностью при масштабировании.
Давно пора или классическая типографика — наше всё, котаны?
#css #trim
Одна из самых сложных и плохо контролируемых проблем в интерфейсной типографике — встроенные вертикальные метрики шрифтов (ascent, descent, line gap).
Из-за них текстовый элемент по box-модели почти никогда не совпадает с тем, как текст выглядит визуально: появляется лишнее пространство сверху и снизу, которое мешает точному вертикальному выравниванию.
Для этого в Chrome и Safari не так давно появился
text-box-trim — CSS-правило, позволяющее обрезать это дополнительное пространство и привести текстовый бокс к реальным границам глифов:.text {
text-box: trim-both cap alphabetic;
}
А вот и ссылка на статью в девблоге: https://developer.chrome.com/blog/css-text-box-trim
В Firefox пока не работает совсем.
Ранее похожий эффект достигался с помощью библиотек вроде Capsize и других `leading-trim`-решений. Они опираются на вычисление метрик конкретного шрифта и генерацию псевдоэлементов с отрицательными отступами, что усложняет систему, привязывает её к шрифтам и может создавать проблемы с производительностью при масштабировании.
text-box-trim — это попытка решить задачу на уровне браузера и сделать точную вертикальную типографику частью нативного CSS.Давно пора или классическая типографика — наше всё, котаны?
#css #trim
👍13❤1
#статья дня
SourceCraft обновил ИИ-агента — Code Assistant теперь помогает с безопасностью кода и командной работой.
ИИ-агент анализирует найденные уязвимости в коде, оценивает степень риска и сразу предлагает исправления. Каждая найденная проблема превращается в карточку с объяснением, насколько она критична и как её можно безопасно устранить.
Всё это экономит часы рутинного разбора уведомлений: анализ безопасности теперь занимает минуты, а не полдня.
Для наглядности добавили центр контроля уязвимостей — интерактивные дашборды, где можно увидеть типы рисков и затронутые системы.
Хороший пример того, как ИИ перестаёт быть «магией» и становится инструментом ежедневной разработки.
#ai #code #security
SourceCraft обновил ИИ-агента — Code Assistant теперь помогает с безопасностью кода и командной работой.
ИИ-агент анализирует найденные уязвимости в коде, оценивает степень риска и сразу предлагает исправления. Каждая найденная проблема превращается в карточку с объяснением, насколько она критична и как её можно безопасно устранить.
Всё это экономит часы рутинного разбора уведомлений: анализ безопасности теперь занимает минуты, а не полдня.
Для наглядности добавили центр контроля уязвимостей — интерактивные дашборды, где можно увидеть типы рисков и затронутые системы.
Хороший пример того, как ИИ перестаёт быть «магией» и становится инструментом ежедневной разработки.
#ai #code #security
👍10❤2
This media is not supported in your browser
VIEW IN TELEGRAM
#заметка дня
Минутка удивительно полезной информации!
Почему Vite.js стартует на порту 5137, а не на 8000, 8080, 8888 и прочих стандартных для разработки веба портах?
Потому что, следим за руками:
Я уже вижу, как вы потянулись к клавиатуре чтобы написать: «Пять и один-то понятно, римские. А 7 и E тут при чём?»
Так вот, котаны, это называется leetspeak. Пруф: https://en.wikipedia.org/wiki/Leet
Просто 7 похожа на T, а 3 на E. А ещё всё это вместе похоже на SITE :)
Кстати, Evan You, собственно, создатель Vitejs, Vitest, и Vue.js, подтвердил это достаточно давно.
Какие ещё будут примеры, помимо 1337? :)
#web
Минутка удивительно полезной информации!
Почему Vite.js стартует на порту 5137, а не на 8000, 8080, 8888 и прочих стандартных для разработки веба портах?
Потому что, следим за руками:
V — 5
I — 1
T — 7
E — 3Я уже вижу, как вы потянулись к клавиатуре чтобы написать: «Пять и один-то понятно, римские. А 7 и E тут при чём?»
Так вот, котаны, это называется leetspeak. Пруф: https://en.wikipedia.org/wiki/Leet
Просто 7 похожа на T, а 3 на E. А ещё всё это вместе похоже на SITE :)
Кстати, Evan You, собственно, создатель Vitejs, Vitest, и Vue.js, подтвердил это достаточно давно.
Какие ещё будут примеры, помимо 1337? :)
#web
🫡10❤5👍1🤩1
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
Вот как вы чаще всего распространяете свои компоненты для всякого рода тулбаров? Наверняка, группы кнопок или, например, кнопка и текстовое поле будут в своём контейнере.
Вставляете этот контейнер в какой-нибудь флекс или грид и получаете... херню получаете, потому что содержимое вашего контейнера подчиняться внешнему флексу или гриду и не собирается.
Но есть решение! Правило
Демо: https://codepen.io/alinaki/pen/abeOjKw
Статья на тему от Ахмада Шадида: https://ishadeed.com/article/display-contents/
Пугаться данных на caniuse.com не надо: смотрите сноску о доступности.
Не рекомендую разворачивать таким способом значащие элементы вроде кнопок, таблиц, заголовков. А вот дивы — милое дело.
Да, ваш любимый TailwindCSS тоже в курсе: https://tailwindcss.com/docs/display#contents
Спасибо Весу Босу за напоминание об этом.
#css #display #contents #бородач
Вот как вы чаще всего распространяете свои компоненты для всякого рода тулбаров? Наверняка, группы кнопок или, например, кнопка и текстовое поле будут в своём контейнере.
Вставляете этот контейнер в какой-нибудь флекс или грид и получаете... херню получаете, потому что содержимое вашего контейнера подчиняться внешнему флексу или гриду и не собирается.
Но есть решение! Правило
display: contents буквально развернёт контейнер и предоставит внешнему потоку полный контроль над компонентами внутри. Это реально самая мозговзрывающая вещь на сегодня.Демо: https://codepen.io/alinaki/pen/abeOjKw
Статья на тему от Ахмада Шадида: https://ishadeed.com/article/display-contents/
Пугаться данных на caniuse.com не надо: смотрите сноску о доступности.
Не рекомендую разворачивать таким способом значащие элементы вроде кнопок, таблиц, заголовков. А вот дивы — милое дело.
Да, ваш любимый TailwindCSS тоже в курсе: https://tailwindcss.com/docs/display#contents
Спасибо Весу Босу за напоминание об этом.
#css #display #contents #бородач
👍4❤2
Forwarded from Альфа-Банк
СКАЧИВАЙТЕ СКОРЕЕ И ПЛАТИТЕ ЗА ВСЁ БЕЗ КАРТЫ. Просто подключайте Alfa Pay — а мы вернём кэшбэк до 50% за первую покупку.
ПРЯМО СЕЙЧАС СКАЧИВАЙТЕ на айфон приложение Альфото. Кто не успел, тот опоздал
@alfabank
Please open Telegram to view this post
VIEW IN TELEGRAM
❤49👍20🤩18🤡18👎3
#статья дня, даже две
Похоже, команды браузеров всё-таки пришли к общему пониманию, как должен выглядеть безопасный способ вставки HTML.
Речь про Sanitizer API — нативную замену innerHTML, которая сразу учитывает XSS и не оставляет это на совести разработчика. Вместо работы со строками используется setHTML(): HTML парсится один раз, очищается и сразу вставляется в DOM.
Это снижает риск обходов безопасности, возникающих при раздельном парсинге и сериализации строк.
API по умолчанию намеренно жёсткий. Удаляются <script>, <iframe>, <object>, <embed>, SVG-элементы, style, link, все form-теги, кастомные элементы, комментарии и любые on*-атрибуты — по факту остаётся минимум безопасного HTML, остальное надо разрешать вручную через конфигурацию. Подробности: https://olliewilliams.xyz/blog/sanitizer/
Первая реализация появилась в Chrome, но её удалили, потому что спецификация сильно изменилась и текущая версия API её не отражает. Команды решили не фиксировать «устаревший» API в движках и сейчас переписывают его в соответствии с обновлённым стандартом.
И вот, собственно, статья о том, как все вместе приходили к упрощению API: https://frederikbraun.de/why-sethtml.html
Ссылки на ишью с намереними релизнуться:
https://groups.google.com/a/chromium.org/g/blink-dev/c/iu3VwMotMBc
https://groups.google.com/a/mozilla.org/g/dev-platform/c/9ddjRQbYKuk
Актуальный Sanitizer API в соответствии с новой уже есть в Firefox Nightly и в Chrome Canary за флагом. Ожидаем в 145 Хроме и 148 Лисе.
А вот Safari как обычно. Полифиллим, котаны?
Ах, да! MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API/Using_the_HTML_Sanitizer_API
#sanitizer #xss
Похоже, команды браузеров всё-таки пришли к общему пониманию, как должен выглядеть безопасный способ вставки HTML.
Речь про Sanitizer API — нативную замену innerHTML, которая сразу учитывает XSS и не оставляет это на совести разработчика. Вместо работы со строками используется setHTML(): HTML парсится один раз, очищается и сразу вставляется в DOM.
Это снижает риск обходов безопасности, возникающих при раздельном парсинге и сериализации строк.
API по умолчанию намеренно жёсткий. Удаляются <script>, <iframe>, <object>, <embed>, SVG-элементы, style, link, все form-теги, кастомные элементы, комментарии и любые on*-атрибуты — по факту остаётся минимум безопасного HTML, остальное надо разрешать вручную через конфигурацию. Подробности: https://olliewilliams.xyz/blog/sanitizer/
Первая реализация появилась в Chrome, но её удалили, потому что спецификация сильно изменилась и текущая версия API её не отражает. Команды решили не фиксировать «устаревший» API в движках и сейчас переписывают его в соответствии с обновлённым стандартом.
И вот, собственно, статья о том, как все вместе приходили к упрощению API: https://frederikbraun.de/why-sethtml.html
Ссылки на ишью с намереними релизнуться:
https://groups.google.com/a/chromium.org/g/blink-dev/c/iu3VwMotMBc
https://groups.google.com/a/mozilla.org/g/dev-platform/c/9ddjRQbYKuk
Актуальный Sanitizer API в соответствии с новой уже есть в Firefox Nightly и в Chrome Canary за флагом. Ожидаем в 145 Хроме и 148 Лисе.
А вот Safari как обычно. Полифиллим, котаны?
Ах, да! MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API/Using_the_HTML_Sanitizer_API
#sanitizer #xss
1👍23❤6🤩2
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
Не так давно я выкладывал статью и пример, как вывести коллег в вашем любимом командном мессенджере, будь то слак, тимс, маттермост и прочие поделки от разных остальных компаний.
Всего-то достаточно загрузить свою аватарку или реакцию в HDR и начать выжигать глаза всем обладателям макбуков и вообще ноутбуков с экранами, поддерживающими расширенный динамический диапазон цвета. Вот: https://t.me/htmlshit/3594
И от этого, кстати, очень страдают соцсети, например, пресловутый твиттер, aka X. Стоит одному умнику загрузить свою аватарку в HDR — всё, вся страница сереет, а он один сверкает.
Но, как оказалось, на это есть решение! В CSS есть правило, которое позволяет в том числе нормализовать динамический диапазон:
...X ещё добавляет
Забавно, что такая аватарка — у недавно пошедшего войной чуть ли не на весь интернет сооснователя Wordpress.
В общем, если вы не осилили нормализацию изображений в моменте загрузки — пользуйтесь :)
Работает в Chrome 136 и далее и Safari 26 и далее. А пользователи Firefox пока страдают.
#css #hdr
Не так давно я выкладывал статью и пример, как вывести коллег в вашем любимом командном мессенджере, будь то слак, тимс, маттермост и прочие поделки от разных остальных компаний.
Всего-то достаточно загрузить свою аватарку или реакцию в HDR и начать выжигать глаза всем обладателям макбуков и вообще ноутбуков с экранами, поддерживающими расширенный динамический диапазон цвета. Вот: https://t.me/htmlshit/3594
И от этого, кстати, очень страдают соцсети, например, пресловутый твиттер, aka X. Стоит одному умнику загрузить свою аватарку в HDR — всё, вся страница сереет, а он один сверкает.
Но, как оказалось, на это есть решение! В CSS есть правило, которое позволяет в том числе нормализовать динамический диапазон:
dynamic-range-limit: standard;
...X ещё добавляет
filter: brightness(1);.
Забавно, что такая аватарка — у недавно пошедшего войной чуть ли не на весь интернет сооснователя Wordpress.
В общем, если вы не осилили нормализацию изображений в моменте загрузки — пользуйтесь :)
Работает в Chrome 136 и далее и Safari 26 и далее. А пользователи Firefox пока страдают.
#css #hdr
👍12❤6
#заметка дня
Вам всем наверняка знакома раскладка 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 #бородач
❤9👍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👍12
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
❤17
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
👍4
#статья дня
Ну что же, пора просыпаться от зимней спячки, котаны! Салаты съедены, сериалы отсмотрены. Плавно готовимся к неизбежному.
В моей предыдущей компании были очень популярны турниры по настольному футболу, 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
❤4