Live and recent posts from across the Fediverse tagged #верстка, aggregated by home.social.
SVG: почему иконка получает не тот размер
После экспорта из Figma иконка 24×24 может оказаться в браузере крошечной, огромной или размытой. Обычно файл при этом исправен — просто разные части цепочки смотрят на разные параметры. Разбираем систему координат, viewBox, контракты и ловушки в React.
https://habr.com/ru/articles/1074956/
#SVG #React #верстка #viewBox #фронтенд #дизайнсистема #SVG_в_React #Figma
Частые ошибки в вёрстке, которые встречаются даже на крупных проектах
Привет, Хабр! Я во фронтенде уже пятнадцать лет и всегда видел разные примеры кода «с душком». То, что десять лет назад считалось нормальной практикой, сегодня вызывает улыбку. Современная вёрстка не стала исключением. Мне нравится наблюдать за тем, как меняются подходы к ней. Это не история о том, что раньше всё было плохо, а сейчас хорошо, или наоборот. Просто одни ошибки уходят, а на их место приходят другие. В этой статье я собрал несколько распространённых ошибок в современной вёрстке, связанных с доступностью интерфейсов. Постарался быть максимально объективным, но окончательные выводы, как всегда, остаются за вами. Давайте посмотрим, что я вам подготовил.
Помогаю новичкам найти ошибки в вёрстке ChatGPT
Привет, Хабр! Мне кажется, что сегодня начинающие фронтендеры уже не пишут код сами. Они отдают всё на откуп искусственному интеллекту. Хорошо это или плохо — судить не буду. Я хочу помочь вам найти плохие решения в вёрстке, которые ChatGPT вам предлагает. Для этого я собрал наиболее популярные примеры, которые очень просто исправить. Я вам всё покажу. Только, пожалуйста, не судите меня строго. Я не очень хорошо умею пользоваться ChatGPT. Но примеры взяты из реальных приложений. Так что о них в любом случае стоит знать. Давайте посмотрим, что я вам подготовил.
https://habr.com/ru/companies/ruvds/articles/1032940/
#html #верстка #accessibility #доступность_сайтов #бэм #ruvds_статьи
Верстальщики в 2026 году. Я был неправ в 2016-м?
Кто сказал, что верстальщики умерли в 2016-м? В 2026-м они востребованы как никогда. Кто же знал, что мои же слова вернутся ко мне спустя десять лет. В 2016 году, работая наставником в html academy , я регулярно говорил студентам: «Учите JavaScript и фреймворки, чистых верстальщиков скоро не будет». Спустя 10 лет я до сих пор провожу собеседования на позицию HTML/CSS Developer (да, именно так называется роль даже в 2026 году). Узнать больше о боли автора
https://habr.com/ru/articles/1033558/
#html #html5 #верстальщик #верстка #работа #работа_за_границей #работа_в_it
Запустил open source проект на 3 площадках для стартапов. Вот что получилось
Здравствуйте, товарищи! Продолжаю писать о своих приключениях в мире open source. Сегодня речь пойдет о маркетинге, а точнее: про один из каналов - площадки для стартапов, типа Product Hunt. Расскажу про свой опыт запуска open source проекта на трех таких площадках. Как готовился, что вышло, и стоила ли игра свеч. Рассказ пойдет в хронологическом порядке, но больше информации будет про одну из площадок, которая нам казалась важнее и с которой мы получили больше профита. Ну, рассказывай!
https://habr.com/ru/articles/1017604/
#open_source #mlut #atomic_css #верстка #стартап #tailwind #css #product_hunt #интернетмаркетинг
Как я сократила время разработки на 50% одним решением
В статье показан практический подход, который помогает сократить время на вёрстку, убрать лишние вопросы и сделать дизайн понятным без дополнительных объяснений. Если вы сталкивались с ситуациями, когда разработчик «не так понял макет», сроки вёрстки дизайна часто переносятся, коммуникация отделов дизайна и разработки хромает — этот материал для вас. Читать
https://habr.com/ru/articles/1014944/
#дизайн #дизайнсистема #оптимизация_кода #оптимизация_рабочего_времени #библиотеки_компонентов #UI #продуктивность #продуктивность_команд #верстка #разработка_приложений
[Перевод] Настройка отображения материалов в Joomla
Это перевод статьи Брайана Тимана ( Brian Teeman ) о переопределении макета материала Joomla, с разделением блока вводного текста и полного текста материала. С примером возможного оформления.
Tailwind CSS v4 против MUI, Ant Design и Styled Components: архитектурный разбор
В 2026 году выбор инструмента для стилизации — это не вопрос вкуса, а вопрос архитектуры. Мы разберём, где Tailwind CSS v4 выигрывает у признанных лидеров: компонентных библиотек (MUI, Ant Design) и CSS-in-JS решений (Styled Components).
https://habr.com/ru/articles/1006248/
#Tailwind_CSS #CSS #Frontend #Design_System #React #Styled_Components #Верстка #Архитектура #Микрофронтенды #Figma
[Перевод] Как совместить утилиты и рукописный CSS в атомарном подходе?
Всем здравствуйте, дорогие читатели! Меня зовут Рамазан, я Frontend-разработчик, энтузиаст и я люблю исследовать грани возможностей современных Web-технологий. В этой статье мы поговорим о том, нормально ли применять в рамках Atomic CSS подхода рукописный CSS. Бытуют разные мнения по этому поводу. Кто-то считает, что в атомарном подходе нужно использовать только утилиты, а кто-то допускает и произвольные сочетания рукописных CSS классов с ними. Я постараюсь разобраться в этом, аргументируя свою позицию.
https://habr.com/ru/articles/990428/
#atomic_css #mlut #tailwindcss #css #cssфреймворк #cssанимации #верстка #sass #utilityfirst
Atomic CSS: верстка и легкость бытия
Здравствуйте, товарищи! Меня зовут Валентин, и сегодня мы снова поговорим про Atomic CSS! Обсудим имеющиеся проблемы в верстке и посмотрим, как атомарный подход их решает (или не решает). Разберем основные мифы, посмотрим на хорошие практики этого подхода и сделаем некоторые выводы. Эту статью можно отчасти считать продолжением моей предыдущей по данной теме. Но если там был хардкор и технические детали, то здесь уже разберем прикладные вопросы: как верстать в Atomic CSS, чтобы получить заявленный эффект.
https://habr.com/ru/articles/981714/
#atomic_css #mlut #tailwind #css #бэм #верстка #html #sass #javascript #utilityfirst
Я нанял джуна в свой open source проект. Вот что получилось
Здравствуйте, товарищи! Сегодня у нас будет не техническая статья. Я расскажу об одном нестандартном кейсе из своей практики, суть которого отражена в заголовке. В первой части будет описание моего опыта, а далее обсудим, как можно его перенять. И не просто перенять, а использовать для решения сразу двух проблем в IT-индустрии! Как обычно: все имена вымышлены, а совпадения случайны... Ну давай, расскажи мне!
https://habr.com/ru/articles/962468/
#карьера_в_it #open_source #mlut #верстка #atomic_css #tailwind #html #sass #css
Изнутри жюри: как мы выбирали лучшую работу на чемпионате по html верстке
Всем привет, с вами Артем Леванов, Front Lead в WebRise. Когда тебе, как члену жюри, приходится выбирать лучшую работу среди сильных участников, на первый план выходят не только pixel-perfect, но и детали, которые создают ощущение качественного продукта. В чем была наша задача на чемпионате по верстке от HTML Academy, с какими работами мы столкнулись и какие решения заслуживают отдельного внимания — разбираю на реальных примерах финалистов.
https://habr.com/ru/articles/956710/
#верстка #верстальщик #htmlверстка #html #css #css_animation
[Перевод] CSS, который все ненавидят: sin() и cos()
Команда JavaScript for Devs подготовила перевод статьи о том, почему тригонометрические функции стали «most hated» возможностью CSS и как их можно использовать с пользой. Мы разберёмся, что делают sin() и cos() , и посмотрим на практические примеры: от круговых раскладок до затухающих анимаций.
https://habr.com/ru/articles/949004/
#css #sin #cos #тригонометрия #верстка #анимация #transform #layout #frontend #web
...Когда гуманитарии лезут в технарские дела 🤣
Первая пикча относится к вопросу:
Какой вариант представления инфы лучше, левый или правый? Без учёта занимаемой площади. Левый мне нравится больше.
Вторая пикча — это вариант Арт‑директора и соавтора курса «Пользовательский интерфейс и представление информации» с аргументацией
Если строк реально всего две, то я бы единицы измерения перенёс в само тело таблицы. Если хочется сверстать более квадратно, можно из номеров контактов сделать подзаголовки
Испытать #ИспанскийСтыд можно здесь 😂
Как я полюбил LESS, избавился от копипасты в CSS-коде, сделал его безопаснее, а разметку семантической (часть 2)
В первой части я рассказывал об основах LESS: переменных, миксинах, и некоторых приёмах. А сегодня мы поговорим о вещах, оставшихся в прошлый раз нераскрытыми...
https://habr.com/ru/companies/timeweb/articles/930900/
#css #less #верстка #ui #ux #препроцессоры #javascript #вебдизайн #webразработка #timeweb_статьи
Попробовал сегодня скормить #Deepseek HTML-код, сгенерированный #Lovable с задачей оптимизировать HTML-код (Lovable генерирует слишком много тегов-обёрток, а также использует Tailwind, который я терпеть не могу). Увы, результаты оказались весьма неудовлетворительные: оптимизированная страница сильно отличалась от исходной. Так что с этой задачей #LLM пока не справляются, придётся делать всё по-старинке вручную. #ai #html #верстка
Как я полюбил LESS и с его помощью избавился от копипасты в своём CSS-коде, а разметку сделал семантической
В силу личной специфики (я чаще работаю не над веб-страницами, а над интерфейсами для десктопных и мобильных приложений, которые пишу на HTML/CSS), я долго избегал рабочие процессы сложнее, чем «отредактировал CSS-файл и сохранил его», и открыл для себя CSS-препроцессинг довольно поздно, но… В наши дни он, в общем-то, ничуть не устарел, и актуален не меньше, чем раньше. Так что, если вы пишете CSS (а не генерируете его) для чего угодно (SPA, приложения, лендинги, веб-аппы и т.д.), но до сих пор не пользуетесь LESS или SASS — приглашаю под кат, где я, стараясь не опускаться до уровня «очередной-пересказ-учебника», немного расскажу о принципах LESS, инструментах, его текущем состоянии и поделюсь своими техниками и приёмами (с примерами). А если вы не пишете CSS, но знакомы с традиционными языками программирования, всё равно добро пожаловать: я провожу параллели между ними и LESS, а заодно рассказываю об очень полезных принципах проектирования от Алана Кея.
БЭМ + Tailwind: прагматичный гибрид для современного фронтенда
Устали от бесконечных споров о CSS-методологиях? В этой статье я рассказываю, как объединил БЭМ и Tailwind в мощный гибридный подход, который спас мой проект и нервную систему. Узнайте, как избавиться от мучительного нейминга, решить проблему с отступами и ускорить разработку в два раза. Никакого догматизма — только практический опыт и реальные примеры использования лучших сторон обоих подходов. Чекнуть габеллу.
https://habr.com/ru/articles/924826/
#tailwindcss #бэмметодология #css #скалирование #верстка #боль #frontendразработка #новый_подход #гибридные_приложения #экономия_времени
Как фронтендеру сделать интерфейс дружелюбнее к пользователю. Коллекция HTML/CSS лайфхаков
Привет, Хабр. Мне всегда нравились красивые и удобные интерфейсы. Желая сделать лучше для пользователя, я потратил не один день. Так я начал коллекционировать HTML и CSS лайфхаки, которые улучшают впечатление пользователя от интерфейса. В итоге у меня получился внушительный список. Сегодня хочу поделиться с вами некоторыми практиками из него. Я постарался собрать наиболее простые, чтобы вы могли быстро и безболезненно внедрить их. Давайте посмотрим, что я вам подготовил.
Адаптивная вёрстка с учётом размера шрифта пользователя и брейкпоинты
На эту статью меня вдохновил вопрос из раздела Q&A « Как выбрать «опорные точки» перехода ширины экрана для стилей страниц сайта? ». Занимаясь в последнее время адаптивной вёрсткой, я пришёл к нескольким выводам, которыми и хочу с вами здесь поделиться. Заодно разберём некоторые полезные (и не очень) техники для адаптивной вёрстки, и пересоберём Bootstrap с их учётом.
https://habr.com/ru/companies/timeweb/articles/874486/
#timeweb_статьи #css #верстка #адаптивная_верстка #breakpoint #ui #usability
Интернет мельчает. К чему привели тенденции Web дизайна
За время своего существования сайты в интернете пережили не одну революцию, превратившись из простых страничек (и даже таблиц) в многофункциональных монстров в виде веб приложений. Сначала пользователей надо было удерживать на страницах, так в моду вошли пестрые цвета, анимации и flash player. Развился JS, веб перешел на HTML5, что подарило сообществу огромный функционал в плане технических возможностей и параметров кастомизации сайтов. Интернет быстро перестал быть местом для гиков, в интернет пришли серьезные дяди с серьезными бизнесами, которым нужно было солидно выглядеть на фоне конкурентов и продавать свои услуги. Начались огромные исследования, составление тенденций и рекомендаций, куча материалов от дизайнеров как надо делать сайты, это все переосмысливалось и обновлялось. Появились готовые библиотеки по работе со стилями, сильно упростившие процесс разработки. Со временем, интернет в большей степени стал приятен глазу, ушли в историю сайты, переполненные баннерами и аляпистым сочетанием цветов, появилась стандартная сетка с колонками и отступами, все дизайнеры приняли за правило использование пустого пространства, так называемого «воздуха», а большинство сайтов стало похоже друг на друга по структуре и расположению блоков. А потом оказалось, что кругом очень много мобильного трафика, да настолько много, что количество таких пользователей стало превышать количество десктопных. И дизайн стали переделывать под них, как основную аудиторию, отказавшись от поддержки отдельных мобильных версий. У нас же теперь адаптивный дизайн, вот и будем адаптировать под разные размеры экрана. К чему это привело?
Верстка для ленивых: как перестать бояться CSS и начать верстать как супергерой
Развалившийся макет, сломанные кнопки и тестировщик, отправляющий бесконечные баг-репорты... Знакомая боль? Вёрстка может быть не кошмаром, а крепостью, если подойти к ней с умом. В этом гайде — проверенные принципы, которые помогут вам делать гибкую и устойчивую вёрстку, способную пережить любые изменения контента и дизайна.
https://habr.com/ru/articles/889960/
#CSS #верстка #frontend #адаптивность #семантика #оптимизация #анимации #доступность #производительность #ui_ux
Ошибки в вёрстке: как мы избавились от них с помощью чек-листа
Мы в Точке делаем эквайринг, онлайн-бухгалтерию и много других полезных продуктов для бизнеса. Все они постоянно дорабатываются, поэтому нам нужно непрерывно работать с дизайном и выпускать новые фичи. Недавно мы заметили, что каждый раз исправляем в вёрстке одни и те же ошибки. Решили оптимизировать процесс дизайн-ревью и ввели чек-листы, благодаря которым количество правок сократилось в три раза. Меня зовут Евгений Ерёмин, я продуктовый дизайнер в Точке уже более пяти лет. Расскажу подробнее о процессе оптимизации дизайн-ревью в этой статье.
https://habr.com/ru/companies/tochka/articles/886736/
#figma #дизайнревью #верстка #чеклист #оптимизация_процессов
7 хаков HTML: нестандартные решения в истории гипертекстовой разметки
Привет, Хабр! Сегодня мы решили вспомнить, как раньше веб-мастера обходили ограничения разметки. История веб-разработки полна креативных находок — технологии не всегда успевали за фантазией пользователей. На заре девяностых, чтобы выделиться на фоне конкурентов, веб-разработчики искали творческие решения. Собрали подборку из 7 популярных приемов и подходов, которые использовали веб-мастера, чтобы выйти за пределы ограничений HTML.
https://habr.com/ru/companies/spaceweb/articles/882574/
#html #вебразработа #вебмастера #история_интернета #гипертекстовый #ностальжи #ностальгии_пост #90ые #верстка #frontend
Гибкие макеты: Решаем проблему на корню
При создании гибких макетов главный фактор, который мы должны учитывать, — это ширина корневого элемента. Мы можем получить процентное измерение ширины, с помощью такой единицы как vw . Не все знают, что можно менять размер шрифта в настройках браузера, и тем более не многие этим пользуются. Но если мы хотим обеспечить отзывчивость, мы должны учитывать и этот фактор. Во всех браузерах размер шрифта по умолчанию равен 16px; если это значение будет изменено, будет изменен и размер одного rem . Поэтому все размеры связанные с типографикой и не только лучше задавать в этих единицах. Таким образом, мы хотим, чтобы при изменении ширины страницы или размера шрифта в настройках браузера автоматически менялись и размеры элементов, отступов и шрифтов. Важно отметить, что изменение всех размеров нас интересует только в пределах минимальной и максимальной ширины макета. ▎ Проблема Например мы хотим задать размер для заголовка первого уровня. При минимальной ширине макета (320px), размер шрифта должен быть 28px. При максимальной ширине (1440px), размер шрифта должен быть 40px. Для решения этой задачи мы можем использовать специальный онлайн калькулятор: Min-Max-Value Interpolation Для наших значений мы получим такой код: clamp(1.75rem, 1.536rem + 1.07vw, 2.5rem)
https://habr.com/ru/articles/874716/
#frontend #frontendразработка #frontend_development #верстка #вебдизайн #css #адаптивность #адаптивная_вёрстка #адаптивный_дизайн #резиновая_верстка
Алло! Реализуем дисковый телефон с помощью Jetpack Compose
Привет, Хабр! Меня зовут Артем, я автор и ведущий YouTube и Telegram каналов Android Insights. Данная статья - идейный продолжатель моей предыдущей статьи Создание Custom Layout в Jetpack Compose Сегодня мы создадим настоящий дисковый телефон с помощью Jetpack Compose! Вы узнаете, как реализовать жесты, анимации и механику вращения диска, чтобы получить максимально аутентичный опыт взаимодействия со старым добрым телефоном в современном Android приложении.
https://habr.com/ru/articles/871956/
#kotlin #android #jetpack #compose #jetpack_compose #обучение #телефон #диск #верстка #жесты
CSS Grid Layout: Асимметричная адаптивная сетка
В веб-дизайны сетки, как в Pinterest уже давно не являются чем-то новым. Но что, если нужно сделать блоки различной высоты, при этом сохранив адаптивность. Оказывается, это можно сделать, используя только стандартные возможности CSS Grid Layout.
Создание Custom Layout в Jetpack Compose
Привет, Хабр! Меня зовут Артем и я автор и ведущий YouTube канала Android Insights Сегодня я расскажу о том, как создавать Custom Layout в Jetpack Compose, а также мы решим одну связанную с данной темой практическую задачку. Создание Custom Layout может показаться чем-то сложным на первый взгляд, но я постараюсь все объяснить максимально понятно и подробно. Итак, приступим!
https://habr.com/ru/articles/867822/
#kotlin #android #jetpack #compose #jetpack_compose #custom_view #custom_layout #верстка #обучение #мобильные_приложения
#kb #DTP #полиграфия #дизигн #верстка #юмор
Titivillus
Это демон, известный как "патрон демонов письма" или "демон опечаток". Он появился в средневековой английской фольклоре и стал символом ошибок, возникающих в процессе написания и копирования текстов.
Описание и функции
Происхождение: Первое упоминание о Titivillus датируется около 1285 года в трактате "Tractatus de Penitentia". Он был создан, чтобы объяснить ошибки, которые допускали писцы, и стал фигурой, объясняющей опечатки и недочеты в рукописях[7][9].
Роль: Titivillus собирает "ошибки и небрежности" в словах и текстах, которые происходят во время чтения и пения в церкви. Он приносит эти ошибки в ад, чтобы использовать их против людей после их смерти. Таким образом, он служит своего рода обвинителем, фиксируя все неверные слова и опечатки[1][2][6].
Внешний вид: В своем демоническом обличье Titivillus изображается как гуманоидное существо с зеленовато-синим мехом, ушами осла и глазами совы. В человеческом обличье он выглядит как пожилой человек в деловом костюме[1].
Культурное значение
Titivillus стал популярным персонажем в средневековом искусстве, его изображали на церковных стенах и в резьбе на мизерикордах. Он также стал объектом комедийных сцен в средневековых представлениях, что подчеркивало человеческие слабости и недостатки[3][4][9].
Таким образом, Titivillus представляет собой интересный пример того, как мифология и фольклор могут объяснять и интерпретировать человеческие ошибки и недостатки, особенно в контексте письменности и религиозной практики.
#generated by #felo
...Так что, когда падает или зависает InDesign, я буду знать, что это не баги Adobe, а происки нечистого! 🤣
[1] https://gods-and-demons.fandom.com/wiki/Titivillus
[2] https://the-demonic-paradise.fandom.com/wiki/Titivillus
[3] https://gallimaufry.typepad.com/blog/2011/03/tutivillus.html
[4] https://anzcn.org/titivillus/
[5] https://arteofthebooke.com/collections/calligraphy-artwork/products/copy-of-here-be-dragons-fine-art-print-st-george-and-the-dragon
[6] https://medium.com/the-cellar-door/6-great-typos-of-history-657c8c63226e
[7] https://en.wikipedia.org/wiki/Titivillus
[8] https://hmcgill.art/2021/12/10/ode-to-titivillus-patron-demon-of-typos/
[9] https://medievalstudies.princeton.edu/event/the-devil-of-details-titivillus-from-yesterdays-monks-to-todays-dungeons-dragons/
[10] https://www.preces-latinae.org/thesaurus/Introductio/Titivillus.html
[11] https://blog.lostartpress.com/2021/01/17/my-old-nemesis-titivillus/
[12] https://www.reddit.com/r/wikipedia/comments/ssey4n/titivillus_a_demon_said_to_work_on_behalf_of/
[13] https://laudatortemporisacti.blogspot.com/2020/12/titivillus.html
[14] https://ivanov-petrov.livejournal.com/1344545.html
Глассморфизм и SVG
Всем привет. Я Андрей Осипов, фронтендер из Контура. Почти три года назад, когда у компании был еще старый фирменный стиль, мы столкнулись с проблемой экспорта из фигмы изображений в формате SVG. Сложность была с изображениями, где был эффект глассморфизма, он же эффект матового стекла (frosted glass). Недавно чисто из любопытства я решил проверить, починили ли в Figma эту проблему. Проблема осталась. Плагинов так и нет, а гугл не предлагает хороших решений. Поэтому решил выложить эту статью сюда, может, кому пригодится.
https://habr.com/ru/companies/skbkontur/articles/853128/
#svg #верстка #глассморфизм #векторная_графика #css #htmlверстка
Бесплатные кириллические шрифты от Шрифтотеки 2.0. Лицензии разные (как минимум — бесплатно для личного использования).
#fonts #шрифты #design #дизайн #дизигн #верстка #полиграфия #DTP #OpenSource #кириллица @[email protected] @[email protected] @[email protected] @[email protected] @[email protected]
Выкачал с Fontesk 685 акцидентных/заголовочных #шрифтов с поддержкой кириллицы.
Все шрифты свободные/бесплатные.
В комплекте скрипт для #PowerShell, которым можно воспользоваться, чтобы упорядочить архив чуть лучше, нежели он выглядит сейчас (по желанию).
#fonts #шрифты #design #дизайн #дизигн #верстка #полиграфия #DTP #OpenSource #кириллица @[email protected] @[email protected] @[email protected] @[email protected] @[email protected]