Стабильное меню на новом сайте У меня на сайте текущий пункт меню выделяется жирным. Обычно при таком дизайне возникают прыжки: жирное слово ведь чуть шире обычного, так что при переходах между разделами более правые пункты немного сдвигаются влево-вправо. Бывают редкие «униширинные» шрифты, где разные начертания имеют одинаковую ширину, но не ограничивать же выбор ими. Когда я открыл новый сайт на прошлой неделе, меню у меня прыгало, потому что я не успел докрутить, а открываться уже было пора. Но надо было решить эту проблему. Идея решения простая: каждый пункт меню должен всегда занимать столько места, сколько занимал бы, будь он жирным, даже когда на самом деле он не жирный. Но как это сделать? Можно написать скрипт, который бы как-то незаметно временно рисовал пункты жирными, измерял бы их, а потом жёстко расставлял бы пункты по стабильным позициям. При этом пришлось бы ещё отслеживать адаптивное изменение размеров шрифта при разных ширинах окна и перемерять. Напрограммировать такое с Кодексом — дело минутное, но это тяжеловесно и неэлегантно. Хочется без скрипта. Можно положить внутрь каждого пункта невидимую жирную копию текста, распорку. Это лишний элемент в разметке, тоже не идеально, но смириться можно. Я не нашёл решения совсем без изменения разметки, но зато нашёл, как обойтись атрибутом, без лишних элементов: слово, жирность которого нужно мерить, ставится в атрибут, а потом в ЦССе делается псевдоэлемент, контент которого берётся из этого атрибута. Так уже неплохо. Есть и ещё одна есть сложность: у меня же при наведении под пунктом изменяется цвет подчёркивания, и мне надо, чтобы это подчёркивание было ровно по длине пункта. Если же элемент с текстом растянется до ширины его жирной версии, подчёркивание станет торчать правее видимого конца самого текста, что коряво. Соответственно надо как-то так сверстать, чтобы подчёркнутая часть осталась по ширине видимого текста, а вокруг неё уже была обёртка по ширине жирного текста, которая бы влияла только на лейаут меню. При этом ради Фиттса область нажатия пункта меню у меня дотянута до середины отступа с соседним пунктом. То есть сама ссылка на самом деле больше и чем её обычный текст, и чем её жирный текст. И да, все эти отступы ещё и адаптивятся по-всякому. С адаптивом есть ещё и такой момент. Когда меню не влезает целиком, важно, чтобы ты хотя бы видел, что какие-то пункты ещё есть за пределами экрана. На сайте Бюро для этого давно работает фокус: если меню не влезает полностью, то расстояния между пунктами подкручиваются так, чтобы последний пункт гарантированно обрезался краем экрана, и тем намекал на продолжение. Это я тоже к запуску сделать не успел, но хотел: https://ilyabirman.ru/meanwhile/all/bureau-school-lecture-layout/ В общем, теперь всё распутал: атрибут, используемый ЦССом для измерения жирного текста, стоит у обёртки, а сам текст пункта меню стоит у элемента внутри. Любой пункт можно делать и жирным, и обычным, и подчёркивание при наведении всегда остаётся ровно под буквами. Кликать можно в отступ между пунктами, и ничего никуда не прыгает при переключении. Жирность как бы переезжает с пункта на пункт при переключении, но каждый из них остаётся на своём месте. И расстояние между пунктами растягивается так, чтобы всегда было видно, что есть ещё пункты за краем. Красота!

Вниманию фронтендеров и вайбкодеров. В очередной рассылке попалось несколько наборов для построения вашего UI. Не знаю, насколько в наше время это актуально, но делюсь. 🔹Sharl UI - более 90 компонентов на все случаи жизни. Минималистично-аккуратно. Репозиторий. 🔹Vuzeno - дизайн-система на основе Ark UI (это headless-платформа, независимая от фреймворка). TypeScript, всё как положено. Репозиторий. 🔹Kibo UI - набор компонентов для использования с shadcn/ui, от color-пикера до почти диаграммы Гантта. Репозиторий. 🔹Jelly UI - тоже набор стандартнызх компонентов, но с такой игривой, "желейной" визуализацией. 🔹NeonBlade UI - в целом нестандартный подход, для любителей кибер-панка, всякие компоненты в неоновом стиле, ну и вспомогательные, типа Матрицы. #ui #frontend

🤔 Как заставить кодинг-агента делать красивый и неоднотипный дизайн? На самом деле вам нужны всего три скилла и одно простое действие. И начнем со скилов 👇 Первый — Impeccable. Он чистит типичный нейросеточный дизайн от лишнего мусора и помогает собрать нормальную дизайн-систему под ваши предпочтения. Второй — Taste Design Frontend. По сути, добавляет агенту вкуса: элементы становятся современнее, дороже и просто приятнее визуально. Третий — Animate. Чтобы анимации были плавными и человеческими, а не с этими лютыми нейросеточными подергиваниями. 🤷‍♂️Но просто поставить эти три скилла недостаточно. Перед тем как что-то генерировать, найдите 3–5 референсов сайтов, которые вам реально нравятся. Потом запускаете Impeccable Init, скидываете туда референсы и собираете вместе дизайн-систему. Дальше подключаете Taste Design Frontend для визуала и Animate, если нужны анимации. Все. 😅 🚨 Главное не пропускайте шаг со сбором примеров. Потому что даже с лучшими скиллами но без примеров агент все равно будет делать довольно шаблонный дизайн. Свята место | 10МДК | YHub

Три CSS-задачи, которые казались нерешаемыми — пока кто-то не упёрся до конца Знакомое чувство: упёрся в проблему, а что-то внутри отказывается верить, что решения нет. И ты лезешь в спеки, в гитхаб-треды десятилетней давности, читаешь тех, кто уже прошёл этот путь. Часы скрежета извилин — и вот оно, на экране ровно то, чего ты хотел. Фронтендер из команды Taiga UI собрал три таких случая. Фиксированный блок внутри скролл-контейнера — через почти забытый после флексов float. Толщина линий в иконке, которую «никак не пробросить» в SVG, закодированная через соотношение сторон картинки. И shrink wrapping, одна из древнейших UI-задач, у которой раньше просто не было решения. Оно нашлось там, где не искали — через scroll-driven анимации, придуманные совсем для другого.

Как верстали 15 лет назад Верстальщику попалась книга по вёрстке 2004 года, и он решил вспомнить, из чего складывался рабочий день до флексбоксов и гридов. Картина выходит дикая. Чтобы отцентрировать элемент по вертикали, ему приходилось притворяться ячейкой таблицы. Свойство table-cell честно сообщало браузеру, что перед ним ячейка, и только после этого срабатывало выравнивание. И это ещё щадящий пример. Сетку городили на float, где один лишний пиксель сдвигал все блоки разом, а пятый элемент уезжал под четвёртый. Зазор между колонками лечили обнулением шрифта у родителя. Градиент вырезали полоской в Фотошопе и размножали картинкой по ширине. Посмотрим, какими ещё заклинаниями держалась вёрстка, пока инструменты не повзрослели.

🦄 Платформа для гайдов, о которой я давно мечтал Видение того, как должен выглядеть сайт с гайдами / курсами у меня сложилось довольно давно, и все эти годы продолжало эволюционировать. Но вот в чём проблема — видение то было, но возможности реализовать его не было, потому что: - Из меня ужасный дизайнер — я могу объяснить чего и как хочу, и сказать "красиво" или "не красиво, но сделать красиво самостоятельно не получается - Я далёк от фронтэнда — что-то знаю, но опыта мало. На полноценный проект уйдёт много времени, а результат будет плохой - Свободного времени было так мало, что лучше потратить его на что-то более приземлённое Нанять настоящего верстальщика и дизайнера я бы не потянул, т.к. все мои проекты строятся на чистом энтузиазме, и почти не монетизируются. Что ж, времени у меня теперь сильно больше, а дизайнера и верстальщика мне заменил Claude — с недавних пор он стал в этом невероятно хорош. Все блокеры сняты, наконец-то можно свободно творить. И я сотворил 👍 ———— Как должна выглядеть "платформа моей мечты", чего мне все эти годы не хватало: - 💅Дизайн строго по моему вкусу — я очень падок на визуал, и крутой дизайн очень меня мотивирует. Словами мне это сложно описать, чуть позже сами увидете. - Лёгкая сборка — статичный сайт, который собирается из md-файлов — в идеале, Hugo, конечно же. Сайты получаются очень лёгкие и их поддержка почти ничего не стоит. - Наличие интерактивных виджетов и пошаговой анимации. Часто бывает так, что какую-то концепцию проще "показать", а не описать словами и ли нарисовать. Дать читателю это "пощупать", поиграться. Это может заметно сократить размер статьи, и при этом сделать её понятней, интересней, наглядней. Мне этого очень не хватало, когда я писал статью про планировщик. - Удобная работа с "сериями" статей. Опять же, на Хабре и других платформах таких механизмов нет вовсе, и поэтому мне проще написать монолитную статью, чем делать из неё неудобный сериал. Но наличие такого механизма сильно упростило бы жизнь как мне, так и читателям. - Интерактивное содержание (TOC) — такое уже много где есть, но вот на Хабре, увы, нет. В случае больших статей без него вообще ни как. - Минимализм. Да, после всего вышеперечисленного кажется, что слово "минимализм" тут неуместно. Но я под этим подразумеваю, что на сайте должно быть только то что действительно улучшает пользовательский опыт, и ничего лишнего Это основные моменты. Кроме них, есть ещё множество мелочей, которые суммарно дают огромный вклад — удобный быстрый поиск по материалам, несколько цветовых тем на выбор (не всем удобно читать только на белой/черной теме), режим "фокусирования" (когда на экране нет ничего лишнего, кроме текста статьи) и др. ———— Что ж, на днях я полностью закончил разработку такой платформы, и сейчас активно наполняю её контентом. Для начала, я хочу перенести в неё мои имеющиеся материалы — разбор планировщика, написание grpc / rest api сервисов, а также разбор каналов и map (по ним статей ещё нет, только ролики — теперь будут). Все эти материалы я попутно актуализирую и дополняю — за годы я многому научился, есть что добавить. Кроме того, теперь мне не мешают "технические ограничения" других платформ. Короче, мои старые работы скоро получат "режиссёрскую версию" 👴 Релиз первой статьи будет примерно на днях, а пока можете полюбоваться красивой заглушкой 💅 #анонс

Как рос мой доход за последние 10 лет в Европе В Нидерланды я переехал обычным фронтенд-разработчиком. Получил оффер в Liberty Global на €55k. По местным меркам на 2015 год зп средняя. Работал я с фронтенди на реакте. В Амстердаме я начал ходить на айтишные конференции, а потом и сам их проводить. В Белоруси я часто выступал, да и английский у меня на хорошем уровне был еще со школы, поэтому я был в курсе куда движется рынок. И быть в тренде всегда помогало мне в работе. ⏳ Спустя год работы мне предложили постоянный контракт. Казалось бы, вот она, стабильность, но почти в тот же момент пришёл оффер из другой компании на €72k + бонусы. Это был 2016 год. Тогда я и купил свою квартиру 😁

Кстати она за 10 лет выросла в цене почти в 3 раза. И сейчас эта квартира, которую я покупал в 2016 за 215 тыс, сейчас бы стоила ориентировочно 550–650k€

После чего я работал консультантом на разных проектах. Где-то выбирал стек и переводил старый сайт на реакт, где-то делал R&D в банке, копался в блокчейне. Когда упал спрос на чистых фронтов я ушел в фуллстек. Дополнительно больше двух лет занимался инфраструктурой DevOps. Я просто шёл туда, где рынок платил, и не цеплялся за то, что уже умею. 📈 Так моя ЗП доросла до €100k Моя текущая ЗП примерно €120k. Недавно перешёл в новую компанию, делаем кредитный продукт. На прошлом месте я в основном сидел на инфраструктуре, а тут сразу и фронт, и бэк, и архитектура. Ответственности больше, потому и ЗП другая Самое интересное в том, что почти ни одну из этих прибавок мне не дали за то, что я просто хорошо работаю на своём месте. Каждый раз это был новый оффер или новая роль. Ну и личный совет: покупайте недвижимость, как показывает практика она растет в цене всегда 😅 — Напишите в комментарии сколько раз меняли работу за свою карьеру и свой опыт в IT. Интересно будет узнать. #карьера · yt · tg · ig