#статья дня
Ну что же, пора просыпаться от зимней спячки, котаны! Салаты съедены, сериалы отсмотрены. Плавно готовимся к неизбежному.
В моей предыдущей компании были очень популярны турниры по настольному футболу, 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
👍19
#статья дня
Если вы не читали адвент-календарь 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
❤15
#молния дня
А пока вы читали сообщение выше, оказалось, что вышел 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
❤11👍6🤩2
#заметка дня
Вот то самое откровение, которое я обещал в новости о jQuery 4.0.
В Chrome 145 будет изменено поведение 100vw. Браузер будет учитывать ширину скроллбара, исключая горизонтальную прокрутку.
Ссылка: https://www.bram.us/2026/01/15/100vw-horizontal-overflow-no-more/
И да, это будет ломающее изменение.
Хотя, если честно, я не очень понимаю людей, которым вообще нужно было значение 100vw, это же дефолт блочных структур.
Старое поведение по факту годами создавало баг, с которым разработчики либо мирились, либо прятали его костылями — через
Самый показательный момент — реальные цифры.
Через HTTP Archive было проанализировано 12 089 606 корневых страниц. Из них 324 866 сайтов, то есть примерно 2.7%, в принципе использовали
Вот комментарий в PR спеки: https://github.com/w3c/csswg-drafts/issues/6026#issuecomment-1919428550
Это хорошо показывает реальную картину: подавляющее большинство разработчиков никогда не «считали скроллбар». Они либо избегали 100vw, либо жили с лишним горизонтальным скроллом, либо просто добавляли overflow-x: hidden. То есть проблема была массовой, а осознанно решали её — доли процента.
Именно поэтому браузеры и пошли на ломающее изменение. Старое поведение не было полезной фичей, это была историческая особенность, которая порождала баги чаще, чем решала реальные задачи. В итоге решили сломать редкие кейсы ради того, чтобы 100vw наконец означал то, что от него ожидают почти все.
Хороший пример того, сколько инженерной работы уходит на полировку вещей, которые пользователи, возможно, и не заметят напрямую, но которые годами раздражали фронтендеров.
И хороший вопрос, какой процент разработчиков морочится с чем-то менее видным, если даже на возможные скроллбары всем пофигу...
#css #scroll
Вот то самое откровение, которое я обещал в новости о jQuery 4.0.
В Chrome 145 будет изменено поведение 100vw. Браузер будет учитывать ширину скроллбара, исключая горизонтальную прокрутку.
Ссылка: https://www.bram.us/2026/01/15/100vw-horizontal-overflow-no-more/
И да, это будет ломающее изменение.
Хотя, если честно, я не очень понимаю людей, которым вообще нужно было значение 100vw, это же дефолт блочных структур.
Старое поведение по факту годами создавало баг, с которым разработчики либо мирились, либо прятали его костылями — через
calc. Самый показательный момент — реальные цифры.
Через HTTP Archive было проанализировано 12 089 606 корневых страниц. Из них 324 866 сайтов, то есть примерно 2.7%, в принципе использовали
calc() рядом с 100vw. При этом явные попытки компенсировать ширину скроллбара встречаются крайне редко: порядка 4 000 сайтов принудительно задают overflow: scroll на <html>, и всего несколько десятков страниц используют calc(100vw - …) именно для учёта скроллбара.Вот комментарий в PR спеки: https://github.com/w3c/csswg-drafts/issues/6026#issuecomment-1919428550
Это хорошо показывает реальную картину: подавляющее большинство разработчиков никогда не «считали скроллбар». Они либо избегали 100vw, либо жили с лишним горизонтальным скроллом, либо просто добавляли overflow-x: hidden. То есть проблема была массовой, а осознанно решали её — доли процента.
Именно поэтому браузеры и пошли на ломающее изменение. Старое поведение не было полезной фичей, это была историческая особенность, которая порождала баги чаще, чем решала реальные задачи. В итоге решили сломать редкие кейсы ради того, чтобы 100vw наконец означал то, что от него ожидают почти все.
Хороший пример того, сколько инженерной работы уходит на полировку вещей, которые пользователи, возможно, и не заметят напрямую, но которые годами раздражали фронтендеров.
И хороший вопрос, какой процент разработчиков морочится с чем-то менее видным, если даже на возможные скроллбары всем пофигу...
#css #scroll
👍17❤6
#такое дня
А вот вам и пример, почему важно знать и понимать наследие веба. Написал я, понимаете ли, пост про тег
Сейчас это просто plaintext, а завтра — XSS? 😱
Не надо так, котаны.
P. S. пофиксили по моей просьбе.
А вот вам и пример, почему важно знать и понимать наследие веба. Написал я, понимаете ли, пост про тег
<plaintext> — https://t.me/htmlshit/3955 — и он сломал вёрстку на агрегаторе каналов Telemetr. В комментариях написали, спасибо :)Сейчас это просто plaintext, а завтра — XSS? 😱
Не надо так, котаны.
P. S. пофиксили по моей просьбе.
1🤩17👍7
This media is not supported in your browser
VIEW IN TELEGRAM
#видео дня
Решил сохранить эту нестареющую классику прямо на канале. Где-то доступен и оригинал на ютубе, но я чот не смог его найти...
В общем, доклад с коротким названием Wat был представлен аж в 2012 году и язвительно проходится по фишкам разных языков и интерпретаторов. Там четыре минуты, время точно найдёте.
Поменялось ли что-то с тех пор?
Ну, нет.
Есть и не менее легендарные доклады, но я тут подумал, что было бы приятно получить от вас примеры в комментариях, котаны. Валяйте.
P. S. в докладе есть не только описания неопределённого поведения, но и хрестоматийные примеры. Это теперь они хрестоматийные, конечно.
Решил сохранить эту нестареющую классику прямо на канале. Где-то доступен и оригинал на ютубе, но я чот не смог его найти...
В общем, доклад с коротким названием Wat был представлен аж в 2012 году и язвительно проходится по фишкам разных языков и интерпретаторов. Там четыре минуты, время точно найдёте.
Поменялось ли что-то с тех пор?
Ну, нет.
Есть и не менее легендарные доклады, но я тут подумал, что было бы приятно получить от вас примеры в комментариях, котаны. Валяйте.
P. S. в докладе есть не только описания неопределённого поведения, но и хрестоматийные примеры. Это теперь они хрестоматийные, конечно.
❤12
#такое дня
Я уже как-то участвовал в нескольких спорах на тему того, что TUI — text-based ui interface — это не больше чем фишечка, такой себе ретрофутуризм.
Ведь каждому очень хочется себя почувствовать хакером из фильмов, если уж до интерфейсов Джарвиса из Железного Человека мы пока не доросли.
Впрочем, как мне справедливо заметили: «А минусы будут?», — да может и нет их...
Но что бы вы думали, взорвавший популярность TUI в последние пару лет Claude Code будет написан на условном C или Python?
Наверное, как сорок лет назад Vim, Emacs и среды Borland Turbo? Ну или ncurses на худой конец там, ведь проблема вывода текста кажется давно решённой?
Нет, там React :) Они рендерят сцену целиком, а потом процессят вьюхи чтобы вывести их текстом, предварительно сравнивая с предыдущим рендера.
Зачем? Да никто не знает, захотелось парням, кто мы такие, чтобы их судить.
Просто экран клода так и будет продолжать мерцать. Обещают, что чуть поменьше, чем раньше. Ведь 16ms на фрейм им теперь хватает с трудом.
Выводов не будет, нет никаких сил. Просто по ссылкам в посте пройдите, там достаточно интересно.
#claude #react
Я уже как-то участвовал в нескольких спорах на тему того, что TUI — text-based ui interface — это не больше чем фишечка, такой себе ретрофутуризм.
Ведь каждому очень хочется себя почувствовать хакером из фильмов, если уж до интерфейсов Джарвиса из Железного Человека мы пока не доросли.
Впрочем, как мне справедливо заметили: «А минусы будут?», — да может и нет их...
Но что бы вы думали, взорвавший популярность TUI в последние пару лет Claude Code будет написан на условном C или Python?
Наверное, как сорок лет назад Vim, Emacs и среды Borland Turbo? Ну или ncurses на худой конец там, ведь проблема вывода текста кажется давно решённой?
Нет, там React :) Они рендерят сцену целиком, а потом процессят вьюхи чтобы вывести их текстом, предварительно сравнивая с предыдущим рендера.
Зачем? Да никто не знает, захотелось парням, кто мы такие, чтобы их судить.
Просто экран клода так и будет продолжать мерцать. Обещают, что чуть поменьше, чем раньше. Ведь 16ms на фрейм им теперь хватает с трудом.
Выводов не будет, нет никаких сил. Просто по ссылкам в посте пройдите, там достаточно интересно.
#claude #react
🤡13❤2👍2
#ссылка дня
Вчера — впервые за шесть лет — побывал на местном JS-митапе, aka HelsinkiJS.
Не надо на меня так смотреть, я не ходок по митапам. Но на нескольких конференциях, впрочем, был.
И как-то так получилось, что помимо пива и пиццы были и доклады. И вот один из них — «Как нарисовать карту?» — был весьма интересен и его результат прекрасно подходит под формат канала.
Автор — Скотт Стрит — постарался объяснить и показать, как работают библиотеки отрисовки карт. Какие форматы, какие решения. Ну и, собственно, шаг за шагом рассказал и показал процесс конвертации мировых координат в координаты элементов сетки и отрисовки их в SVG.
Например, как из описания линии формата MapLibre (там protobuf, но в виде текста как-то так):
Путем прямого чтения команд:
...получается описание кривых в SVG. Тут надо понимать, что сами плитки — тайлы — кодируются как квадрат 4096*4096, а, стало быть, координаты — относительно тайла.
К сожалению, слайдов доклада в наличии нет, но есть, собственно демо и репозиторий.
Конечно, там сейчас всё достаточно минималистично — дороги, парки, дома — но если вам было интересно, как это всё работает — подойдёт прекрасно.
#svg #maplibre #map
Вчера — впервые за шесть лет — побывал на местном JS-митапе, aka HelsinkiJS.
Не надо на меня так смотреть, я не ходок по митапам. Но на нескольких конференциях, впрочем, был.
И как-то так получилось, что помимо пива и пиццы были и доклады. И вот один из них — «Как нарисовать карту?» — был весьма интересен и его результат прекрасно подходит под формат канала.
Автор — Скотт Стрит — постарался объяснить и показать, как работают библиотеки отрисовки карт. Какие форматы, какие решения. Ну и, собственно, шаг за шагом рассказал и показал процесс конвертации мировых координат в координаты элементов сетки и отрисовки их в SVG.
Например, как из описания линии формата MapLibre (там protobuf, но в виде текста как-то так):
{
"layers": [
{
"version": 2,
"name": "roads",
"extent": 4096,
"features": [
{
"id": 42,
"type": "LINESTRING",
"tags": [0, 0],
"geometry": [
9,
1024, 2048,
26,
2048, 0,
1024, 1024,
2048, 0
]
}
],
"keys": ["class"],
"values": [
{ "string_value": "primary" }
]
}
]
}
Путем прямого чтения команд:
9 → MoveTo, count=1
1024, 2048 → dx, dy
26 → LineTo, count=3
2048, 0 → dx, dy
1024, 1024 → dx, dy
2048, 0 → dx, dy
...получается описание кривых в SVG. Тут надо понимать, что сами плитки — тайлы — кодируются как квадрат 4096*4096, а, стало быть, координаты — относительно тайла.
К сожалению, слайдов доклада в наличии нет, но есть, собственно демо и репозиторий.
Конечно, там сейчас всё достаточно минималистично — дороги, парки, дома — но если вам было интересно, как это всё работает — подойдёт прекрасно.
#svg #maplibre #map
❤7👍4🤩1
Media is too big
VIEW IN TELEGRAM
Проект от подписчика!
Напоминаю, что я выкачу любую статью или проект от вас, не стесняйтесь писать.
Презентация? Выступили на митапе? Хотите поделиться интересной статьёй — добро пожаловать!
Привет! Меня зовут Игорь
Хочу поделиться расширением, которое я изначально сделал для себя, а потом решил выложить публично - AI Chat Messages Toolkit. Еще сделал лендинг для продвижения и связи с будущими пользователями
Мой юзкейс
Часто использую AI-чаты для ресерча: в транспорте, перед сном, просто накидать идеи.
Проходит время - и я уже не помню, *где именно* задавал нужный вопрос. Начинается бесконечный скролл длинного чата
Я решил это упростить
Что делает расширение
• Парсит DOM страницы чата локально
• Находит мои сообщения
• Показывает их списком в боковой панели
• Клик по сообщению > чат скроллится к нужному месту
• работает в ChatGPT, Claude, Perplexity, Gemini и Copilot
Важно
Никакие данные не собираются, не сохраняются и никуда не отправляются - всё происходит прямо в браузере на открытой странице
Дальше думаю про Pro-версию. Например, шаринг полезных Q&A-пар в Notion или куда-нибудь еще
Если вы тоже используете AI-чаты для ресерча - буду рад фидбеку, идеям и юзкейсам в комментариях
Напоминаю, что я выкачу любую статью или проект от вас, не стесняйтесь писать.
Презентация? Выступили на митапе? Хотите поделиться интересной статьёй — добро пожаловать!
Привет! Меня зовут Игорь
Хочу поделиться расширением, которое я изначально сделал для себя, а потом решил выложить публично - AI Chat Messages Toolkit. Еще сделал лендинг для продвижения и связи с будущими пользователями
Мой юзкейс
Часто использую AI-чаты для ресерча: в транспорте, перед сном, просто накидать идеи.
Проходит время - и я уже не помню, *где именно* задавал нужный вопрос. Начинается бесконечный скролл длинного чата
Я решил это упростить
Что делает расширение
• Парсит DOM страницы чата локально
• Находит мои сообщения
• Показывает их списком в боковой панели
• Клик по сообщению > чат скроллится к нужному месту
• работает в ChatGPT, Claude, Perplexity, Gemini и Copilot
Важно
Никакие данные не собираются, не сохраняются и никуда не отправляются - всё происходит прямо в браузере на открытой странице
Дальше думаю про Pro-версию. Например, шаринг полезных Q&A-пар в Notion или куда-нибудь еще
Если вы тоже используете AI-чаты для ресерча - буду рад фидбеку, идеям и юзкейсам в комментариях
❤23👍2
#игра дня
Давненько не было чего-то необычного.
Впрочем, если вы не фанат Dwarf Fortress, конечно.
Untrusted — это игра, в которой вам предлагают не просто пройти уровень, а сначала починить его. Или, если точнее, подправить JavaScript-код, который за него отвечает. Персонаж — профессор Эвал — застрял в виртуальной реальности, и единственный способ выбраться оттуда — лезть в исходники и аккуратно, а иногда и не очень, их переписывать.
Каждый уровень — это кусок JS-кода, который можно и нужно менять: отключить ловушку, переписать поведение врагов, добавить себе проход в стене — пожалуйста. Главное — чтобы заработало.
Игру сложно назвать обучающей, но если вы когда-то писали на JavaScript и у вас осталась эта мышечная память
🎮 https://untrustedgame.com/
📂 https://github.com/AlexNisnevich/untrusted
#game #js #бородач
Давненько не было чего-то необычного.
Впрочем, если вы не фанат Dwarf Fortress, конечно.
Untrusted — это игра, в которой вам предлагают не просто пройти уровень, а сначала починить его. Или, если точнее, подправить JavaScript-код, который за него отвечает. Персонаж — профессор Эвал — застрял в виртуальной реальности, и единственный способ выбраться оттуда — лезть в исходники и аккуратно, а иногда и не очень, их переписывать.
Каждый уровень — это кусок JS-кода, который можно и нужно менять: отключить ловушку, переписать поведение врагов, добавить себе проход в стене — пожалуйста. Главное — чтобы заработало.
Игру сложно назвать обучающей, но если вы когда-то писали на JavaScript и у вас осталась эта мышечная память
for (var i = 0; i < ...), будет ощущение, что вы просто продолжаете работу, только теперь в компании ASCII-графики и странного профессора.🎮 https://untrustedgame.com/
📂 https://github.com/AlexNisnevich/untrusted
#game #js #бородач
🤩3🫡3
Media is too big
VIEW IN TELEGRAM
#фишка дня
Использование
А что если можно было бы обращаться к элементам прилипшего родителя и что-то странное с ними вытворять?
Так можно! Для этого у нас буквально не так давно появились скролл-запросы, как часть контейнерных запросов. Так и называются: Container scroll-state queries.
Например, хотите сделать картинку в картинке? Ну, чтобы, например, не блокировать чтение статьи?
Или, наоборот, не прерывать просмотр рекламы? :)
Запросто: https://codepen.io/alinaki/pen/WbvMOPB
Обратите внимание,
А для браузеров, которые в скролл-запросы пока не умеют, всегда можно написать короткий IntersectionObserver (он, кстати, есть в примере).
#css #scroll #state #бородач
Использование
position: sticky уже так-то стало обыденностью.А что если можно было бы обращаться к элементам прилипшего родителя и что-то странное с ними вытворять?
Так можно! Для этого у нас буквально не так давно появились скролл-запросы, как часть контейнерных запросов. Так и называются: Container scroll-state queries.
Например, хотите сделать картинку в картинке? Ну, чтобы, например, не блокировать чтение статьи?
Или, наоборот, не прерывать просмотр рекламы? :)
Запросто: https://codepen.io/alinaki/pen/WbvMOPB
@container scroll-state(stuck: top) {
.pip {
width: 200px;
transform: translate(-50%, 0%)
translate(calc(50vw - (50% + 1rem)), calc(100vh - (100% + 1rem)));
}
}
Обратите внимание,
translate можно складывать, получая интересную математику в итоге :)А для браузеров, которые в скролл-запросы пока не умеют, всегда можно написать короткий IntersectionObserver (он, кстати, есть в примере).
#css #scroll #state #бородач
❤16👍7🤩5
#статья дня
Тут Google недавно внедрил в Chrome насколько давно напрашивающийся, настолько же пока что неудобно реализованный режим разделённого просмотра. Split view, если по-русски.
Если добавят оверлейные кнопки — станет, конечно, чуть удобнее.
И всё бы ничего, но вот вскрыл он одну интересную проблему. И проблему эту в своей новой статье Ахмад Шадид обозначил как ранний брейкпоинт.
Статья вот: https://ishadeed.com/article/too-early-breakpoint/
И суть-то проблемы довольно ясна: мобильная вёрстка — очевидно, будучи удобной не только для мобильных устройств, не должна вставать между пользователем и контентом. В качестве примера — журнал Time.
Заняли половину экрана сайтом — и уже непонятно, что и почему происходит.
Ну и, конечно, это всё не имело бы смысла, не приведи Шадид несколько чуть более разумных примеров адаптивности.
P. S. Кто-то использует Notepad++? Их сервер был атакован и пребывал скомпрометированным до декабря 2025. Разработчик теперь заверяет в том, что проблема устранена, и призывает обновиться до последней версии. Будьте внимательны!
https://notepad-plus-plus.org/news/hijacked-incident-info-update/
#css #media #adaptive
Тут Google недавно внедрил в Chrome насколько давно напрашивающийся, настолько же пока что неудобно реализованный режим разделённого просмотра. Split view, если по-русски.
Если добавят оверлейные кнопки — станет, конечно, чуть удобнее.
И всё бы ничего, но вот вскрыл он одну интересную проблему. И проблему эту в своей новой статье Ахмад Шадид обозначил как ранний брейкпоинт.
Статья вот: https://ishadeed.com/article/too-early-breakpoint/
И суть-то проблемы довольно ясна: мобильная вёрстка — очевидно, будучи удобной не только для мобильных устройств, не должна вставать между пользователем и контентом. В качестве примера — журнал Time.
Заняли половину экрана сайтом — и уже непонятно, что и почему происходит.
Ну и, конечно, это всё не имело бы смысла, не приведи Шадид несколько чуть более разумных примеров адаптивности.
P. S. Кто-то использует Notepad++? Их сервер был атакован и пребывал скомпрометированным до декабря 2025. Разработчик теперь заверяет в том, что проблема устранена, и призывает обновиться до последней версии. Будьте внимательны!
https://notepad-plus-plus.org/news/hijacked-incident-info-update/
#css #media #adaptive
👍8❤3
#инструмент дня
Монорепозитории имеют неприятное свойство разрастаться. Сюрприз-сюрприз.
Со временем файловая структура перестаёт что-то говорить: папок много, вложенность глубокая, понять где живой код, а где мёртвый — сложно.
Git Truck решает эту проблему через визуализацию репозитория. Он строит интерактивную «карту» проекта на основе git-истории: видно размеры файлов и директорий, активность изменений, вклад разных авторов, а также как структура менялась со временем.
Инструмент запускается локально, без облаков и интеграций, и просто открывает браузер с наглядным представлением репо. Полезная штука, когда нужно быстро разобраться в большом монорепозитории или посмотреть на кодовую базу целиком, а не по папкам.
https://github.com/standardgalactic/git-truck
#git #dev #tool
Монорепозитории имеют неприятное свойство разрастаться. Сюрприз-сюрприз.
Со временем файловая структура перестаёт что-то говорить: папок много, вложенность глубокая, понять где живой код, а где мёртвый — сложно.
Git Truck решает эту проблему через визуализацию репозитория. Он строит интерактивную «карту» проекта на основе git-истории: видно размеры файлов и директорий, активность изменений, вклад разных авторов, а также как структура менялась со временем.
Инструмент запускается локально, без облаков и интеграций, и просто открывает браузер с наглядным представлением репо. Полезная штука, когда нужно быстро разобраться в большом монорепозитории или посмотреть на кодовую базу целиком, а не по папкам.
https://github.com/standardgalactic/git-truck
#git #dev #tool
❤15👍7
Media is too big
VIEW IN TELEGRAM
#заметка дня
Тут в нашем чатике aka @htmlshitchat человек задал вопрос: «Как заставить событие произойти только после долгого нажатия на кнопку?»
И, вроде, очевидный ответ: ставь таймаут да отменяй его:
Осторожно,псевдокод jQuery
Но это было бы скучно и недостаточно для поста, не правда ли?
И тут я вспомнил, что в 2017 году уже делал нечто подобное. Тогда не обошлось без погружения в Three.js и математику шестиугольников. Я об этом уже рассказывал: https://t.me/htmlshit/2639
Немного покопавшись в вебархиве, я нашёл тот проект. Итак, что же мы делали?
А вот на видео видно.
Анимация была оформлена на Tween.js, который всё ещё очень и очень популярен. Правда, название их последнего релиза ну прям удручает. End of the end — серьёзно?
С 2017 года API их, конечно же, поменялся. Мне хотелось одновременно и последний вариант API вам показать, и сетку заставить работать... как хорошо, что мы в вебе, где можно вообще всё!
Итак, кодпен: https://codepen.io/alinaki/pen/KwPwVPr?editors=1100
Весь современный код упихан в секцию с HTML, в script type="module", где импортированы нужные модули и константы из ESM-версии Tween.js, он же является нашим скоупом.
Это вообще очень удобный паттерн чтобы быстро накидать пример без бандлинга.
По зажатию кнопки мыши запускаем анимацию forward, по отпусканию кнопки — запускаем reverse. Из breaking changes — раньше можно было просто вызвать start(), а теперь нужно вызывать startFromCurrentValues(), иначе красоты не получится.
Достаточно просто и эффектно.
#js #animation #tween #бородач
Тут в нашем чатике aka @htmlshitchat человек задал вопрос: «Как заставить событие произойти только после долгого нажатия на кнопку?»
И, вроде, очевидный ответ: ставь таймаут да отменяй его:
Осторожно,
let r = null;
$button.on("mousedown", function(e) {
e.preventDefault();
e.stopPropagation();
r = window.setTimeout(function() {
$button.html('Clicked');
}, 3000);
});
$button.on("mouseup", function() {
$button.html('Hold me');
window.clearTimeout(r);
});
Но это было бы скучно и недостаточно для поста, не правда ли?
И тут я вспомнил, что в 2017 году уже делал нечто подобное. Тогда не обошлось без погружения в Three.js и математику шестиугольников. Я об этом уже рассказывал: https://t.me/htmlshit/2639
Немного покопавшись в вебархиве, я нашёл тот проект. Итак, что же мы делали?
А вот на видео видно.
Анимация была оформлена на Tween.js, который всё ещё очень и очень популярен. Правда, название их последнего релиза ну прям удручает. End of the end — серьёзно?
С 2017 года API их, конечно же, поменялся. Мне хотелось одновременно и последний вариант API вам показать, и сетку заставить работать... как хорошо, что мы в вебе, где можно вообще всё!
Итак, кодпен: https://codepen.io/alinaki/pen/KwPwVPr?editors=1100
Весь современный код упихан в секцию с HTML, в script type="module", где импортированы нужные модули и константы из ESM-версии Tween.js, он же является нашим скоупом.
Это вообще очень удобный паттерн чтобы быстро накидать пример без бандлинга.
По зажатию кнопки мыши запускаем анимацию forward, по отпусканию кнопки — запускаем reverse. Из breaking changes — раньше можно было просто вызвать start(), а теперь нужно вызывать startFromCurrentValues(), иначе красоты не получится.
function forward() {
tween.stop().to({
value: 2000
}, 3000).startFromCurrentValues();
}
function reverse() {
tween.stop().to({
value: 1000
}, 3000).startFromCurrentValues();
}
Достаточно просто и эффектно.
#js #animation #tween #бородач
❤4👍2🤩1
#статья дня
Прекрасный материал от Ван Дамма. Брамуса. Того самого, который нам много рассказывает про CSS Scroll Timeline API.
Те, кто в вёрстке давно, могут помнить баталии на тему что же такое календарь: список или таблица? Я был приверженцем второго варианта, потому что привычный календарь – он ходит как таблица, ест как таблица и крякает как таблица (надеюсь, отсылку вы поймёте 🧐)
Так вот, Брамус заявляет: “Календарь – это сетка!”.
Семантически календарь это список дней, но для представления максимально логично использовать возможности CSS Grid.
https://www.bram.us/2020/12/08/a-calendar-in-three-lines-of-css/
На всё про всё буквально три значащих строчки. Хочется, чтобы неделя начиналась с воскресенья? Нет проблем, сдвигаем начало сетки!
В общем, на этом войне календарей должен быть положен конец.
#css #grid #calendar #бородач
Прекрасный материал от Ван Дамма. Брамуса. Того самого, который нам много рассказывает про CSS Scroll Timeline API.
Те, кто в вёрстке давно, могут помнить баталии на тему что же такое календарь: список или таблица? Я был приверженцем второго варианта, потому что привычный календарь – он ходит как таблица, ест как таблица и крякает как таблица (надеюсь, отсылку вы поймёте 🧐)
Так вот, Брамус заявляет: “Календарь – это сетка!”.
Семантически календарь это список дней, но для представления максимально логично использовать возможности CSS Grid.
https://www.bram.us/2020/12/08/a-calendar-in-three-lines-of-css/
На всё про всё буквально три значащих строчки. Хочется, чтобы неделя начиналась с воскресенья? Нет проблем, сдвигаем начало сетки!
В общем, на этом войне календарей должен быть положен конец.
#css #grid #calendar #бородач
Bram.us
A Calendar in Three Lines of CSS
Here’s a little CSS Grid use case where a list of days is transformed into a calendar: See the Pen Simple Calendar With CSS Grid by Calendar Tricks (@calendartricks) on CodePen. My choice for this CSS calendar tutorial is a list. Why? Because it’s the easiest…
👍16
#cтатья дня
Почти три года назад у меня неплохо так бомбануло на тему недоделанности фишек в современном вебе.
Да, мне не очень нравятся статьи и посты на тему того, как скоро всем будет хорошо, надо лишь немножечко подождать. В итоге, нет, не немножечко. Ну, может, на срезе 20 лет... (спойлер: тоже не факт).
Ладно, сегодня я конкретно хочу поговорить о состоянии
Я тут немного пропустил, но в Chrome 133 состояние
Да, понятие контейнер было мной упомянуто не просто так — эта красота теперь часть контейнерных запросов. И с этим меня познакомила прекрасная статья от Брехта де Рёйте: https://utilitybend.com/blog/is-it-scrolled-is-it-not-lets-find-out-with-css-container-scroll-state-queries/
Так вот, суть-то в том, что в свежем Chrome 144 появилась и поддержка состояния
Ну это ли не чудо? А если указать
Кстати, есть и статья на MDN.
Да, очень грустно, что Safari и Firefox пока не шевелятся, но это в принципе можно решить полифиллами. Главное, что направление задано.
Но бомбить от недоделанности новых фишек пока не перестало.
#css #scroll #state
Почти три года назад у меня неплохо так бомбануло на тему недоделанности фишек в современном вебе.
Да, мне не очень нравятся статьи и посты на тему того, как скоро всем будет хорошо, надо лишь немножечко подождать. В итоге, нет, не немножечко. Ну, может, на срезе 20 лет... (спойлер: тоже не факт).
Ладно, сегодня я конкретно хочу поговорить о состоянии
scrolled и stuck для контейнеров. Очевидно, scrolled — это когда мы прокрутили в какую-то сторону, а stuck — это когда при использовании position: sticky мы можем определить, закрепился элемент, или нет.Я тут немного пропустил, но в Chrome 133 состояние
stuck таки появилось:
.scroll-ancestor {
container-type: scroll-state;
}
@container scroll-state(stuck: top) {
.child-of-scroll-parent {
/* Magic happens here! */
}
}
Да, понятие контейнер было мной упомянуто не просто так — эта красота теперь часть контейнерных запросов. И с этим меня познакомила прекрасная статья от Брехта де Рёйте: https://utilitybend.com/blog/is-it-scrolled-is-it-not-lets-find-out-with-css-container-scroll-state-queries/
Так вот, суть-то в том, что в свежем Chrome 144 появилась и поддержка состояния
scrolled, да-да, с указанием направления!
/* If the last scroll was UP, show the header */
@container scroll-state(scrolled: top) {
.main-header {
transform: translateY(0);
}
}
Ну это ли не чудо? А если указать
inline или block, можно скрыть/показать индикаторы возможности скролла вообще. То же касается и индивидуальных направлений.Кстати, есть и статья на MDN.
Да, очень грустно, что Safari и Firefox пока не шевелятся, но это в принципе можно решить полифиллами. Главное, что направление задано.
Но бомбить от недоделанности новых фишек пока не перестало.
#css #scroll #state
1❤8🤩2👍1
Здравствуйте, товарищи!
Для начала, пара слов о себе. Валентин Ульянов - разраб, в IT 10+ лет. Последние годы занимался разработкой инструментов и делал редакторы документов, типа Word и Excel. Еще делаю свой open source проект. Выступаю на конференциях и веду IT-сообщество в Питере на 1000+ человек. Мечтаю стать спецом мирового класса в компьютерных науках! А дальше как раз пойдет речь о моем проекте
mlut (читается как "млат") - это CSS-фреймворк для кастомных сайтов и креативов. Он помогает верстать проекты с индивидуальным и нешаблонным дизайном, где не подходят фреймворки старой школы и плохо справляются LLM. mlut похож на Tailwind, поскольку основан на подходе Atomic CSS, но по некоторым параметрам превосходит все популярные аналоги.
Atomic CSS - это методология верстки, в которой мы используем маленькие атомарные классы, каждый из которых делает одно действие. Эти классы называют утилитами. Обычно они применяет одно CSS-свойство (например, цвет текста), но не обязательно одно. Выглядят они примерно так: D-ib, Bgc-blue_h.
Преимущества такого подхода
1. Тратим меньше мыслетоплива: не думаем о нейминге сущностей, структуре каталогов
2. Меньше CSS на клиенте: реиспользуем одни и те же утилиты, а новые стили почти перестают добавляться
3. Быстрее пишем стили: короткие классы, нет переключения файлов
4. Можно применять на любом стеке: JS SPA, PHP, Clojure, etc
Ключевые особенности mlut
1. Краткий и строгий нейминг. Сокращения основаны на популярности свойств CSS и составлены по единому алгоритму. Если вы знаете CSS, то вы почти знаете mlut
2. Богатый и нативный синтаксис. Это как Vim для CSS. Удобно создавать сложные стили с помощью мощного синтаксиса, концептуально близкого к CSS
3. Написан на Sass. Используйте всю мощь препроцессора для связи рукописного CSS и утилит
Что реализовано на сегодня
- генератор утилит почти любой сложности
- JIT-движок, который умеет генерировать утилиты из HTML/JSX/etc
- CLI с минификацией и автопрефиксером
- плагины для сборщиков фронтенда: Webpack, Vite и Rollup
- онлайн-песочница
Также есть обширная документация. Совместно с HTML Academy готовится интерактивный мини-курс по инструменту. Первый урок уже вышел. Это open source проект - результат глубокого ресерча и 1200+ часов труда. Больше технических деталей есть в расшифровке доклада с HolyJS.
Планы по развитию
- добавить больше возможностей CSS для сложной верстки: множественные градиенты, псевдоселекторы с аргументами, типа :has(), etc
- сделать интеграции для вайб-кодинга
- сделать плагины к IDE для автокомплита и подсказок
А недавно мы запустили проект на ProductRadar. Бодаемся там со стартапами за топ-3 продуктов этой недели. Будем благодарны за поддержку лайком на этой площадке и любой фидбек. Давайте покажем всем, что open source инструмент тоже может быть продуктом!
Для начала, пара слов о себе. Валентин Ульянов - разраб, в IT 10+ лет. Последние годы занимался разработкой инструментов и делал редакторы документов, типа Word и Excel. Еще делаю свой open source проект. Выступаю на конференциях и веду IT-сообщество в Питере на 1000+ человек. Мечтаю стать спецом мирового класса в компьютерных науках! А дальше как раз пойдет речь о моем проекте
mlut (читается как "млат") - это CSS-фреймворк для кастомных сайтов и креативов. Он помогает верстать проекты с индивидуальным и нешаблонным дизайном, где не подходят фреймворки старой школы и плохо справляются LLM. mlut похож на Tailwind, поскольку основан на подходе Atomic CSS, но по некоторым параметрам превосходит все популярные аналоги.
Atomic CSS - это методология верстки, в которой мы используем маленькие атомарные классы, каждый из которых делает одно действие. Эти классы называют утилитами. Обычно они применяет одно CSS-свойство (например, цвет текста), но не обязательно одно. Выглядят они примерно так: D-ib, Bgc-blue_h.
Преимущества такого подхода
1. Тратим меньше мыслетоплива: не думаем о нейминге сущностей, структуре каталогов
2. Меньше CSS на клиенте: реиспользуем одни и те же утилиты, а новые стили почти перестают добавляться
3. Быстрее пишем стили: короткие классы, нет переключения файлов
4. Можно применять на любом стеке: JS SPA, PHP, Clojure, etc
Ключевые особенности mlut
1. Краткий и строгий нейминг. Сокращения основаны на популярности свойств CSS и составлены по единому алгоритму. Если вы знаете CSS, то вы почти знаете mlut
2. Богатый и нативный синтаксис. Это как Vim для CSS. Удобно создавать сложные стили с помощью мощного синтаксиса, концептуально близкого к CSS
3. Написан на Sass. Используйте всю мощь препроцессора для связи рукописного CSS и утилит
Что реализовано на сегодня
- генератор утилит почти любой сложности
- JIT-движок, который умеет генерировать утилиты из HTML/JSX/etc
- CLI с минификацией и автопрефиксером
- плагины для сборщиков фронтенда: Webpack, Vite и Rollup
- онлайн-песочница
Также есть обширная документация. Совместно с HTML Academy готовится интерактивный мини-курс по инструменту. Первый урок уже вышел. Это open source проект - результат глубокого ресерча и 1200+ часов труда. Больше технических деталей есть в расшифровке доклада с HolyJS.
Планы по развитию
- добавить больше возможностей CSS для сложной верстки: множественные градиенты, псевдоселекторы с аргументами, типа :has(), etc
- сделать интеграции для вайб-кодинга
- сделать плагины к IDE для автокомплита и подсказок
А недавно мы запустили проект на ProductRadar. Бодаемся там со стартапами за топ-3 продуктов этой недели. Будем благодарны за поддержку лайком на этой площадке и любой фидбек. Давайте покажем всем, что open source инструмент тоже может быть продуктом!
👎16🤡9👍6❤3
#баг дня
Как вы думаете, что обозначает тип {}?
Ну, буквально:
Быть может, пустой объект? Да. А может, объект с любыми свойствами? Тоже да. А может, число или строка? И опять, да. А пустые? Да! А может, булево значение? Невероятно, но тоже да!
А может, null или undefined ? Нет. Вот тут — нет. Песочница.
Поэтому смысла в использовании типов {} или Object (второе лишь псевдоним к первому) довольно мало.
Если вам нужен пустой объект — так и пишите, Record<PropertyKey, never>.
Подробнее у Мэтта Покока: https://www.totaltypescript.com/the-empty-object-type-in-typescript.
В чём же баг, спросите вы?
А баг у нас на этот раз в реализации проверки типов в WebStorm/PhpStorm. У JetBrains, короче.
Мы выводим типы из схем Zod, но для целей создания шаблона, мне потребовалось исключить некоторые свойства из проверки:
И мощно получил в лицо: тип ресолвился за 3 минуты на MacBook Pro M2, вешая интерфейс PhpStorm напрочь. Каждый раз.
Решение пришло откуда не ждали:
Обратите внимание на пустой тип. Обнаружил я это случайно: в первом варианте я ещё и добавлял айди шаблона, но впоследствии — отказался.
По всей видимости, система типов IntelliJ построена таким способом, что рассчитвывает конъюнкцию типов как новый тип и кеширует на месте. Но это лишь предположение.
В VS Code, кстати, проблемы не наблюдается.
После обращения в поддержку, мне было рекомендовано включить настройку Use types from server, что буквально выключает встроенные средства и использует типы от LSP. Что, собственно, мне только в плюс.
А как ваши дни проходят? 🙂
#jetbrains #typescript #lsp #бородач
Как вы думаете, что обозначает тип {}?
Ну, буквально:
type b = {};
Быть может, пустой объект? Да. А может, объект с любыми свойствами? Тоже да. А может, число или строка? И опять, да. А пустые? Да! А может, булево значение? Невероятно, но тоже да!
А может, null или undefined ? Нет. Вот тут — нет. Песочница.
Поэтому смысла в использовании типов {} или Object (второе лишь псевдоним к первому) довольно мало.
Если вам нужен пустой объект — так и пишите, Record<PropertyKey, never>.
Подробнее у Мэтта Покока: https://www.totaltypescript.com/the-empty-object-type-in-typescript.
В чём же баг, спросите вы?
А баг у нас на этот раз в реализации проверки типов в WebStorm/PhpStorm. У JetBrains, короче.
Мы выводим типы из схем Zod, но для целей создания шаблона, мне потребовалось исключить некоторые свойства из проверки:
TemplateQueryDetails = Omit<
z.infer<typeof QueryDetails>, 'metadata'
>;
И мощно получил в лицо: тип ресолвился за 3 минуты на MacBook Pro M2, вешая интерфейс PhpStorm напрочь. Каждый раз.
Решение пришло откуда не ждали:
TemplateQueryDetails = Omit<
z.infer<typeof QueryDetails>, 'metadata'
> & {};
Обратите внимание на пустой тип. Обнаружил я это случайно: в первом варианте я ещё и добавлял айди шаблона, но впоследствии — отказался.
По всей видимости, система типов IntelliJ построена таким способом, что рассчитвывает конъюнкцию типов как новый тип и кеширует на месте. Но это лишь предположение.
В VS Code, кстати, проблемы не наблюдается.
После обращения в поддержку, мне было рекомендовано включить настройку Use types from server, что буквально выключает встроенные средства и использует типы от LSP. Что, собственно, мне только в плюс.
А как ваши дни проходят? 🙂
#jetbrains #typescript #lsp #бородач
👍6🤩1
#тред дня
Давно я не пользовал этот тег. Что мы делаем с тредами дня из X/Твиттера (Мастодона и так далее)? Правильно, воруем!
В этот раз воруем тред Антона C++ про компилятор, который был написан ИИ. Ссылку тоже прилагаем.
На прошлой неделе показали компилятор Си, собирающий ядро linux, ffmpeg и много другое + проходящий 99% GCC тестов, а сам компилятор написан полностью ИИ.
Оператор этой мультиагентной системы только задавал направление. За 2 недели сожгли 20к$ и получили вот такой результат.
ИИ-инфлюенсеры и позитивисты высрались в очередной раз, что скоро будет эпоха одиночек, корпорации и команды не нужны, через 2 года все программисты пойдут искать работу в ноготочках или где там ещё машина не заменит человека. Почитайте
@platoff в качестве такого примера.
В этом плане они совершенно правы, мир меняется и скоро изменится ещё сильнее. Если вы уже сейчас не изучаете, или, что ещё лучше, не ищите подходы к разработке с помощью/через ИИ, то скоро вы будете профнепригодны.
ИИ это новый git и IDE, некоторые уже спрашивают на собеседованиях, но через 3 года уже будет стыдно не уметь, а через 5 стыдно спрашивать (git и IDE на это потребовалось лет 10-15).
А теперь самое важное, на что ИИ позитивисты закрывают глаза, но что полностью и подчистую разматывает их позицию о том, что программисты останутся без работы: компилятор Си на нейрослопе - неоптимизирующий.
Да, он производит код, способный работать на парочке платформ, но даже при прохождении 99% тестов это не 1% того, что требуется от компилятора. От компилятора требуется не производить код, но производить эффективный код.
И эффективный код нужен для сотен разных чипов, со своими наборами расширений, десятка операционных систем и ещё вороха стандартов, каждый из которых хочет решить свою проблему. И всё это работа инженеров и программистов, которая длится 40 лет.
Машина может написать код, но не может найти и описать проблему реального мира. Если вы активно пользуетесь ИИ, то вы знаете, что дать описание проблемы не значит получить решение, скорее всего вы получите нейрослоп, который удовлетворит поверхностное любопытство, но не более.
Плохие новости в том, что если найти правильный подход к использованию ИИ, мы и правда будем лучше и эффективнее как программисты, а значит нам придётся это сделать.
Машины отбирают наше любимое занятие - писать код, но с другой стороны, может быть, они дадут нам расти дальше, куда нам не давала расти постоянная необходимость писать код.
Жаль, конечно, что нас не спросили, но что уже теперь поделать, будущее яркое и нам всё ещё есть в нём место, но только мы в этом будущем уже не будем прежними.
То есть ничего нового не произошло, осталось только это принять.
/thread
А теперь от автора канала: если хотите здорово посмеяться, вот вам ссылка на issues это компилятора, где у людей не собирается Hello World: https://github.com/anthropics/claudes-c-compiler/issues/1
Дивный новый мир.
#ai #llm #future
Давно я не пользовал этот тег. Что мы делаем с тредами дня из X/Твиттера (Мастодона и так далее)? Правильно, воруем!
В этот раз воруем тред Антона C++ про компилятор, который был написан ИИ. Ссылку тоже прилагаем.
На прошлой неделе показали компилятор Си, собирающий ядро linux, ffmpeg и много другое + проходящий 99% GCC тестов, а сам компилятор написан полностью ИИ.
Оператор этой мультиагентной системы только задавал направление. За 2 недели сожгли 20к$ и получили вот такой результат.
ИИ-инфлюенсеры и позитивисты высрались в очередной раз, что скоро будет эпоха одиночек, корпорации и команды не нужны, через 2 года все программисты пойдут искать работу в ноготочках или где там ещё машина не заменит человека. Почитайте
@platoff в качестве такого примера.
В этом плане они совершенно правы, мир меняется и скоро изменится ещё сильнее. Если вы уже сейчас не изучаете, или, что ещё лучше, не ищите подходы к разработке с помощью/через ИИ, то скоро вы будете профнепригодны.
ИИ это новый git и IDE, некоторые уже спрашивают на собеседованиях, но через 3 года уже будет стыдно не уметь, а через 5 стыдно спрашивать (git и IDE на это потребовалось лет 10-15).
А теперь самое важное, на что ИИ позитивисты закрывают глаза, но что полностью и подчистую разматывает их позицию о том, что программисты останутся без работы: компилятор Си на нейрослопе - неоптимизирующий.
Да, он производит код, способный работать на парочке платформ, но даже при прохождении 99% тестов это не 1% того, что требуется от компилятора. От компилятора требуется не производить код, но производить эффективный код.
И эффективный код нужен для сотен разных чипов, со своими наборами расширений, десятка операционных систем и ещё вороха стандартов, каждый из которых хочет решить свою проблему. И всё это работа инженеров и программистов, которая длится 40 лет.
Машина может написать код, но не может найти и описать проблему реального мира. Если вы активно пользуетесь ИИ, то вы знаете, что дать описание проблемы не значит получить решение, скорее всего вы получите нейрослоп, который удовлетворит поверхностное любопытство, но не более.
Плохие новости в том, что если найти правильный подход к использованию ИИ, мы и правда будем лучше и эффективнее как программисты, а значит нам придётся это сделать.
Машины отбирают наше любимое занятие - писать код, но с другой стороны, может быть, они дадут нам расти дальше, куда нам не давала расти постоянная необходимость писать код.
Жаль, конечно, что нас не спросили, но что уже теперь поделать, будущее яркое и нам всё ещё есть в нём место, но только мы в этом будущем уже не будем прежними.
То есть ничего нового не произошло, осталось только это принять.
/thread
А теперь от автора канала: если хотите здорово посмеяться, вот вам ссылка на issues это компилятора, где у людей не собирается Hello World: https://github.com/anthropics/claudes-c-compiler/issues/1
Дивный новый мир.
#ai #llm #future
❤6👍2🤩1