Будни разработчика

Здравствуйте, товарищи! Для начала, пара слов о себе. Валентин Ульянов - разраб, в 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 инструмент тоже может быть продуктом!

#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! */
  }
}
{}
    

Да, понятие контейнер было мной упомянуто не просто так — эта красота теперь часть контейнерных запросов. И с этим меня познакомила прекрасная статья от Брехта де Рёйте: 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, можно скрыть/показать индикаторы возможности скролла вообще. Кстати, есть и статья на MDN. Да, очень грустно, что Safari и Firefox пока не шевелятся, но это в принципе можно решить полифиллами. Главное, что направление задано. Но бомбить от недоделанности новых фишек пока не перестало. #css #scroll #state

#статья дня Прекрасный материал от Ван Дамма. Брамуса. Того самого, который нам много рассказывает про CSS Scroll Timeline API. Те, кто в вёрстке давно, могут помнить баталии на тему что же такое календарь: список или таблица? Я был приверженцем второго варианта, потому что привычный календарь – он ходит как таблица, ест как таблица и крякает как таблица (надеюсь, отсылку вы поймёте 🧐) Так вот, Брамус заявляет: “Календарь – это сетка!”. Семантически календарь это список дней, но для представления максимально логично использовать возможности CSS Grid. https://www.bram.us/2020/12/08/a-calendar-in-three-lines-of-css/ На всё про всё буквально три значащих строчки. Хочется, чтобы неделя начиналась с воскресенья? Нет проблем, сдвигаем начало сетки! В общем, на этом войне календарей должен быть положен конец. #css #grid #calendar #бородач

#папка дня В IT и кибербезе информации всегда больше, чем времени её читать. Новые уязвимости, инструменты, подходы — поток не останавливается. При этом действительно полезных авторских каналов меньше, чем кажется. Где не пересказывают ленты новостей и не копируют документацию, а делятся опытом из реальной работы. Собрали подборку блогов от специалистов, которые давно в индустрии: пишут код, ищут баги, разбирают кейсы и объясняют, как всё работает на практике. Если хочется читать осмысленно — вот хорошее место начать. 👉 Подборка здесь

#заметка дня Тут в нашем чатике 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);
});
{}
    

Но это было бы скучно и недостаточно для поста, не правда ли? И тут я вспомнил, что в 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 #бородач

#статья дня Тут 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

Техдиректор AI Center Tinkoff (ex Yandex Go Senior EM) ведёт канал «Архитектура стартапа» - про то, как проектировать и масштабировать продукты, где в проде уже есть LLM/агенты, RAG, наблюдаемость, безопасность и стоимость инфраструктуры.🎯Без «воды» и хайпа: разборы архитектурных решений, практики платформы, грабли роста и что реально работает в больших системах.🧠Подписаться: 'https://t.me/+ANAWfA9PtHZmMDBi?erid=2W5zFJJ4Ki8' rel='nofollow'>https://t.me/+ANAWfA9PtHZmMDBi?erid=2W5zFJJ4Ki8

#фишка дня Использование 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 #бородач

Вас добавили в чат «Первые шаги в JavaScript» 💯 Прокачайте навыки в веб-разработке на бесплатном курсе Академия Selectel выпустила новый курс по JavaScript. Если вы хотите освоить синтаксис и базовые конструкции языка — первые три модуля для вас. После обучения вы сможете: 🔹 работать с переменными let, var и const, 🔹 создавать простые функции и работать с DOM, 🔹 писать логические конструкции и тернарные операторы if/else. Получите промокод на бесплатную работу с сервисами Selectel, а после финального теста — сертификат о прохождении. Изучите основы JavaScript и создайте свой первый пет-проект → Реклама. АО "Селектел". erid:2W5zFJ4GZwW

#игра дня Давненько не было чего-то необычного. Впрочем, если вы не фанат Dwarf Fortress, конечно. Untrusted — это игра, в которой вам предлагают не просто пройти уровень, а сначала починить его. Или, если точнее, подправить JavaScript-код, который за него отвечает. Персонаж — профессор Эвал — застрял в виртуальной реальности, и единственный способ выбраться оттуда — лезть в исходники и аккуратно, а иногда и не очень, их переписывать. Каждый уровень — это кусок JS-кода, который можно и нужно менять: отключить ловушку, переписать поведение врагов, добавить себе проход в стене — пожалуйста. Главное — чтобы заработало. Игру сложно назвать обучающей, но если вы когда-то писали на JavaScript и у вас осталась эта мышечная память for (var i = 0; i < ...), будет ощущение, что вы просто продолжаете работу, только теперь в компании ASCII-графики и странного профессора. 🎮 https://untrustedgame.com/ 📂 https://github.com/AlexNisnevich/untrusted #game #js #бородач