14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#видео дня
Когда я стал работать в нормальной компании, а не в веб-студии, я внезапно узнал, что оценка задачи происходит в баллах. «Стори поинтах», story points.
И стори поинты это не часы. Это некая условная оценка сложности. И выражается, как правило, в числах Фибоначчи: 1, 2, 3, 5, 8… Близко к экспоненциальной зависимости.
Если кому интересно, статей на эту тему много. Но дальше происходит самое интересное.
Оценка сложности не нужна :) Не в том смысле, что все задачи одинаковы, нет. А в том смысле, что не имеет особого смысла их делить.
Очень часто возникает ситуация, в которой все задачи на спринт оцениваются в 3. Или даже, что чаще, в 5. Ну просто потому что. Потому что так команде удобнее.
И вот, например, доклад именно на тему оценки сложности: https://m.youtube.com/watch?v=QVBlnCTu9Ms
Стоит посмотреть. Много здравых мыслей. Как минимум, вы решите для себя: более усердно относиться к оценке или же просто ограничить число задач на спринт.
Не болейте.
#agile #teamlead #scrum #бородач
☁️ ITENTIS CLOUD: топ-технологии без переплаты за логотип
ITENTIS CLOUD — это тот же класс технологий, что у крупных облаков: VPC, Kubernetes, S3, снимки, автомасштабирование, Tier III дата-центры. Без переплаты за логотип.
📣 Самое главное — вы как разработчик, администратор или сотрудник компании можете зарабатывать сами! Подключаете своего клиента или компанию, в которой работаете, — и с каждой его оплаты регулярно получаете свой процент.
🔥 Никаких странных наценок, скрытых опций и сюрпризов в конце месяца.
📞 Ещё один стальной аргумент — поддержка.
Не бот и не первая линия, которая ничего не решает, а живой инженер 24/7.
Нужно настроить Kubernetes, собрать нетиповую схему? Доведем до результата🦾
💥 Перенесите проекты в ITENTIS CLOUD и убедитесь в стабильности работы в течение бесплатного 14-дневного периода.
sales@itentis.ru
Бот — @itentis_bot
#фишка дня
Не так давно мы на работе обсуждали, как показывать и обрезать разного рода id, файловые пути и названия файлов вообще.
Ведь очень часто получается так, что значащая информация — она в самом начале и самом конце (корневой каталог и название файла), а text-overflow: ellipsis просто обрезает концовку.
Так вот, эта тема на самом деле сейчас весьма в тренде. Многие сталкиваются с похожей задачей и приходят к различным решениям. Не все, правда, делятся. Вот иллюстрацию к посту я взял у пользователя X — azlandotgg. Но кодом он не поделился!
Зато uixmat кодом поделился. Точнее, как, поделился... дал ссылку на чат v0 🙈
И хотя там довольно интересно посмотреть ход мыслей, давайте всё же повторим это в Codepen: https://codepen.io/alinaki/pen/azZPPad?editors=1100
Итак, суть идеи:
1. Дублируем строку в атрибуты контейнера и элемента
2. При помощи контейнерных запросов и RTL-направления текста, просто включаем псевдоэлементы с контентом из атрибутов в нужный момент
3. Ну, собственно, всё :)
Другим вариантом может стать флексбокс на трёх элементах. Но мне было лениво выгребать код из видео разного рода инфлюенсеров, оставлю на потом.
Не знаю, лучше ли это простого подсчёта символов, или нет, но весьма забавно.
#css #truncate #middle #cq
#тред дня
Давно я не пользовал этот тег. Что мы делаем с тредами дня из 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
Здравствуйте, товарищи!
Для начала, пара слов о себе. Валентин Ульянов - разраб, в 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 инструмент тоже может быть продуктом!
#статья дня
Прекрасный материал от Ван Дамма. Брамуса. Того самого, который нам много рассказывает про CSS Scroll Timeline API.
Те, кто в вёрстке давно, могут помнить баталии на тему что же такое календарь: список или таблица? Я был приверженцем второго варианта, потому что привычный календарь – он ходит как таблица, ест как таблица и крякает как таблица (надеюсь, отсылку вы поймёте 🧐)
Так вот, Брамус заявляет: “Календарь – это сетка!”.
Семантически календарь это список дней, но для представления максимально логично использовать возможности CSS Grid.
https://www.bram.us/2020/12/08/a-calendar-in-three-lines-of-css/
На всё про всё буквально три значащих строчки. Хочется, чтобы неделя начиналась с воскресенья? Нет проблем, сдвигаем начало сетки!
В общем, на этом войне календарей должен быть положен конец.
#css #grid #calendar #бородач
#заметка дня
Тут в нашем чатике aka @htmlshitchat человек задал вопрос: «Как заставить событие произойти только после долгого нажатия на кнопку?»
И, вроде, очевидный ответ: ставь таймаут да отменяй его:
Осторожно, псевдокод jQuery
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);
});
function forward() {
tween.stop().to({
value: 2000
}, 3000).startFromCurrentValues();
}
function reverse() {
tween.stop().to({
value: 1000
}, 3000).startFromCurrentValues();
}
#статья дня
Тут 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
Вас добавили в чат «Первые шаги в JavaScript»
💯 Прокачайте навыки в веб-разработке на бесплатном курсе
Академия Selectel выпустила новый курс по JavaScript. Если вы хотите освоить синтаксис и базовые конструкции языка — первые три модуля для вас.
После обучения вы сможете:
🔹 работать с переменными let, var и const,
🔹 создавать простые функции и работать с DOM,
🔹 писать логические конструкции и тернарные операторы if/else.
Получите промокод на бесплатную работу с сервисами Selectel, а после финального теста — сертификат о прохождении.
Изучите основы JavaScript и создайте свой первый пет-проект →
Реклама. АО "Селектел". erid:2W5zFJ4GZwW
Проект от подписчика!
Напоминаю, что я выкачу любую статью или проект от вас, не стесняйтесь писать.
Презентация? Выступили на митапе? Хотите поделиться интересной статьёй — добро пожаловать!
Привет! Меня зовут Игорь
Хочу поделиться расширением, которое я изначально сделал для себя, а потом решил выложить публично - AI Chat Messages Toolkit. Еще сделал лендинг для продвижения и связи с будущими пользователями
Мой юзкейс
Часто использую AI-чаты для ресерча: в транспорте, перед сном, просто накидать идеи.
Проходит время - и я уже не помню, *где именно* задавал нужный вопрос. Начинается бесконечный скролл длинного чата
Я решил это упростить
Что делает расширение
• Парсит DOM страницы чата локально
• Находит мои сообщения
• Показывает их списком в боковой панели
• Клик по сообщению > чат скроллится к нужному месту
• работает в ChatGPT, Claude, Perplexity, Gemini и Copilot
Важно
Никакие данные не собираются, не сохраняются и никуда не отправляются - всё происходит прямо в браузере на открытой странице
Дальше думаю про Pro-версию. Например, шаринг полезных Q&A-пар в Notion или куда-нибудь еще
Если вы тоже используете AI-чаты для ресерча - буду рад фидбеку, идеям и юзкейсам в комментариях
14 февраля Яндекс проводит свою главную фронтенд-конференцию — «Я 💛 Фронтенд».
Это большой ивент для тех, кто делает современные интерфейсы и хочет понимать, куда движется фронтенд.
В программе много тем про ИИ, и лично для меня самая интересная — про безопасное использование LLM в разработке. Сейчас LLM уже используют почти все, но чаще всего это выглядит как «прикрутили — и поехали». А вот разговор про безопасность, ограничения и реальные сценарии применения — это как раз то, чего сильно не хватает в публичных обсуждениях. Тема важная, потому что от этого напрямую зависит, не превратится ли ИИ в источник техдолга и странных багов через полгода.
Ещё будут доклады про влияние локального ИИ на архитектуру веб-приложений, контекстно-ориентированную адаптивность и практическое применение веб-компонентов — без абстракций, с прицелом на продакшен.
Отдельно упомяну Code in the Dark. Это тот самый формат, где нужно верстать без превью, инспектора и подсказок — только редактор, HTML и CSS. Хорошая штука и для участников, и для зрителей — сразу видно, кто правда чувствует вёрстку.
Кроме докладов будут и другие активности: CSS арт-челлендж, сборка TravelTech-приложения, разбор практических кейсов и другие интерактивы от команд Яндекса. Можно не только послушать, но и руками попробовать.
Участвовать можно онлайн или офлайн в Москве. Программа и регистрация — по ссылке.
#видео дня
Решил сохранить эту нестареющую классику прямо на канале. Где-то доступен и оригинал на ютубе, но я чот не смог его найти...
В общем, доклад с коротким названием Wat был представлен аж в 2012 году и язвительно проходится по фишкам разных языков и интерпретаторов. Там четыре минуты, время точно найдёте.
Поменялось ли что-то с тех пор?
Ну, нет.
Есть и не менее легендарные доклады, но я тут подумал, что было бы приятно получить от вас примеры в комментариях, котаны. Валяйте.
P. S. в докладе есть не только описания неопределённого поведения, но и хрестоматийные примеры. Это теперь они хрестоматийные, конечно.
#заметка дня
Вот то самое откровение, которое я обещал в новости о 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
#молния дня
А пока вы читали сообщение выше, оказалось, что вышел jQuery 4.0: https://blog.jquery.com/2026/01/17/jquery-4-0-0/
Кто-нибудь ещё использует jQuery для новых проектов? Или по-инерции?
С другой стороны, эта инерция всё ещё драйвит 70% веб-сайтов в мире... есть у меня интересная инфа на тему, попозже сегодня выкачу 🙂
#статья дня
Зачем писать код, если можно сгенерировать, правда? Такие нынче правила игры. Но нужно идти дальше.
Зачем писать код, если можно украсть? Особенно, когда сам в руки идёт. Ведь если даже генерировать что-то, нужно, как минимум, учитывать требования по работе, дизайну... никто не отменял понимание сути задачи.
Так вот, сегодня на поветске дня — как украсть любой 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
#фишка дня
Если ты увлёкся добавлением pointer-events: none к элементам: может чтобы люди не копировали, а может, чтобы UX был получше, — есть вероятность, что дебаг в девтулзах превратится в мучение.
Вот как выделить объект, который не слушается мыши?
Все очень просто, зажми Shift и выделяй. Работает в Chrome, Edge и Firefox.
#devtools #tips #chrome #firefox #бородач
#ссылка дня
Apple славится не только тем, что достаточно медленно развивает Safari в угоду (?) производительности на ватт и безопасности, но и тем, что добавляет в движок очень много фишек, делающих интеграцию WebView в приложения на macOS и iOS проще. Часть, казалось бы, нативных Apple Music, Apple Maps и так далее — это WebView, а вы и не догадывались.
И вот одной из таких фишек стало добавление атрибута switch к обычным чекбоксам. Очевидно, превращающим галочки в переключатели. Да, семантика выходит иная.
Поспольку остальные браузеры не спешат это добавлять (как раз по причине того, что это, ну, разные же элементы, атрибут выглядит странно), Томас Стайнер реализовал полифилл: https://blog.tomayac.com/2026/01/12/a-polyfill-for-the-html-switch-element/
Демонстрацию можно посмотреть там же.
Ссылка на репо: https://github.com/whatwg/html/pull/9546
Как считаете, пора делать переключатели базовыми инструментами форм, или нет?
#css #switch #safari
Хотите в IT, но пугают ценники на курсы и риск не найти работу? ✋
А вы знали, что сейчас есть платформы, которые настолько уверены в своем обучении, что берут оплату только после того, как вы найдете работу?
Речь про Erida — ребята готовят Системных аналитиков с полного нуля. Если вы думаете о смене профессии, но боитесь бросать всё в никуда, это ваш идеальный «безопасный вход».
Коротко о главном:
— Опыт в IT не требуется. Совсем.
— Обучение занимает 3 месяца (интенсивно, но это вполне реально).
— Гарантия трудоустройства: компания заинтересована в вашем успехе, потому что оплату вы вносите только после получения первой зарплаты.
— Если первая работа «не зайдет», Erida поможет найти другой вариант.
На сайте уже есть отзывы студентов, которые рискнули и не прогадали. Посмотрите сами.
👉 Сделать первый шаг в IT здесь: http://erida-it.ru
#баг дня
Как вы думаете, что обозначает тип {}?
Ну, буквально:
type b = {};
TemplateQueryDetails = Omit<
z.infer<typeof QueryDetails>, 'metadata'
>;
TemplateQueryDetails = Omit<
z.infer<typeof QueryDetails>, 'metadata'
> & {};
#cтатья дня
Почти три года назад у меня неплохо так бомбануло на тему недоделанности фишек в современном вебе.
Да, мне не очень нравятся статьи и посты на тему того, как скоро всем будет хорошо, надо лишь немножечко подождать. В итоге, нет, не немножечко. Ну, может, на срезе 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! */
}
}
scrolled, да-да, с указанием направления!
/* If the last scroll was UP, show the header */
@container scroll-state(scrolled: top) {
.main-header {
transform: translateY(0);
}
}
inline или block, можно скрыть/показать индикаторы возможности скролла вообще. То же касается и индивидуальных направлений.
#папка дня
В IT и кибербезе информации всегда больше, чем времени её читать. Новые уязвимости, инструменты, подходы — поток не останавливается.
При этом действительно полезных авторских каналов меньше, чем кажется. Где не пересказывают ленты новостей и не копируют документацию, а делятся опытом из реальной работы.
Собрали подборку блогов от специалистов, которые давно в индустрии: пишут код, ищут баги, разбирают кейсы и объясняют, как всё работает на практике.
Если хочется читать осмысленно — вот хорошее место начать.
👉 Подборка здесь
#инструмент дня
Монорепозитории имеют неприятное свойство разрастаться. Сюрприз-сюрприз.
Со временем файловая структура перестаёт что-то говорить: папок много, вложенность глубокая, понять где живой код, а где мёртвый — сложно.
Git Truck решает эту проблему через визуализацию репозитория. Он строит интерактивную «карту» проекта на основе git-истории: видно размеры файлов и директорий, активность изменений, вклад разных авторов, а также как структура менялась со временем.
Инструмент запускается локально, без облаков и интеграций, и просто открывает браузер с наглядным представлением репо. Полезная штука, когда нужно быстро разобраться в большом монорепозитории или посмотреть на кодовую базу целиком, а не по папкам.
https://github.com/standardgalactic/git-truck
#git #dev #tool
#фишка дня
Использование 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 можно складывать, получая интересную математику в итоге :)
#игра дня
Давненько не было чего-то необычного.
Впрочем, если вы не фанат Dwarf Fortress, конечно.
Untrusted — это игра, в которой вам предлагают не просто пройти уровень, а сначала починить его. Или, если точнее, подправить JavaScript-код, который за него отвечает. Персонаж — профессор Эвал — застрял в виртуальной реальности, и единственный способ выбраться оттуда — лезть в исходники и аккуратно, а иногда и не очень, их переписывать.
Каждый уровень — это кусок JS-кода, который можно и нужно менять: отключить ловушку, переписать поведение врагов, добавить себе проход в стене — пожалуйста. Главное — чтобы заработало.
Игру сложно назвать обучающей, но если вы когда-то писали на JavaScript и у вас осталась эта мышечная память for (var i = 0; i < ...), будет ощущение, что вы просто продолжаете работу, только теперь в компании ASCII-графики и странного профессора.
🎮 https://untrustedgame.com/
📂 https://github.com/AlexNisnevich/untrusted
#game #js #бородач
#ссылка дня
Вчера — впервые за шесть лет — побывал на местном 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
#такое дня
Я уже как-то участвовал в нескольких спорах на тему того, что TUI — text-based ui interface — это не больше чем фишечка, такой себе ретрофутуризм.
Ведь каждому очень хочется себя почувствовать хакером из фильмов, если уж до интерфейсов Джарвиса из Железного Человека мы пока не доросли.
Впрочем, как мне справедливо заметили: «А минусы будут?», — да может и нет их...
Но что бы вы думали, взорвавший популярность TUI в последние пару лет Claude Code будет написан на условном C или Python?
Наверное, как сорок лет назад Vim, Emacs и среды Borland Turbo? Ну или ncurses на худой конец там, ведь проблема вывода текста кажется давно решённой?
Нет, там React :) Они рендерят сцену целиком, а потом процессят вьюхи чтобы вывести их текстом, предварительно сравнивая с предыдущим рендера.
Зачем? Да никто не знает, захотелось парням, кто мы такие, чтобы их судить.
Просто экран клода так и будет продолжать мерцать. Обещают, что чуть поменьше, чем раньше. Ведь 16ms на фрейм им теперь хватает с трудом.
Выводов не будет, нет никаких сил. Просто по ссылкам в посте пройдите, там достаточно интересно.
#claude #react
#такое дня
А вот вам и пример, почему важно знать и понимать наследие веба. Написал я, понимаете ли, пост про тег <plaintext> — /channel/htmlshit/3955 — и он сломал вёрстку на агрегаторе каналов Telemetr. В комментариях написали, спасибо :)
Сейчас это просто plaintext, а завтра — XSS? 😱
Не надо так, котаны.
P. S. пофиксили по моей просьбе.
Изучаете программирование? Хотите стать классным айтишником с высокой ЗП?
Пока все в спячке после Нового Года, вы можете стремительно войти в сферу IT при помощи сборки "IT в деле" которую мы составили.
Что внутри сборки:
- Каналы о программировании и разработке: Python, C++, C#, Java
- GameDev каналы, создание игр, подсказки для ваших проектов и реальный опыт в создании игр 💍
- Аналитика и базы данных, всё по теме работы с данными от А до Я, авторские лайфхаки и простые заметки с проектов 🔤
- Каналы о QA-тестировании, опытные тестировщики делятся с вами знаниями и помогают в комментариях 👨💻
Для каждого здесь что-то найдётся! Выберите интересные вам каналы и подпишитесь на сборку. Найдите то, что нужно вам для следующего шага в IT
#статья дня
Если вы не читали адвент-календарь HTMHell, то могли и пропустить интересности!
Во втором дне календаря 2025 года речь идёт о теге <plaintext>. Это устаревший элемент, который запрещён стандартами, но до сих пор поддерживается браузерами.
Штука гениальная: как только браузер встречает <plaintext>, он прекращает разбор HTML. Всё, что идёт дальше, воспринимается как обычный текст, независимо от того, что там написано.
<body>
<h1>Заголовок</h1>
<plaintext>
<div>Этот div не станет элементом</div>
<script>alert('xss')</script>
</body>
<div>, и <script> будут выведены как текст. DOM на этом месте обрывается, ошибок в консоли нет, с точки зрения браузера всё произошло корректно.<plaintext> ведёт себя при санитайзинге HTML. Разные санитайзеры обрабатывают его по-разному: кто-то удаляет, кто-то экранирует, кто-то оставляет в форме, которая всё равно влияет на парсинг. В результате один и тот же входной HTML после «очистки» может либо работать нормально, либо полностью ломать страницу.