Фронтенд-лайфхак - ссылка на весь элемент

[@AleksanderLamkov]

📌 Друзья, в телеграмме у нас есть канал и отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь: 💬 Чат: @friendlyFrontendChat ℹ Основной канал: @friendlyFrontend Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂

[@Someone9379992]

Не делайте так, я вас прошу. Ваша верстка должна быть очевидна не только вам, но и людям после вас. Так и вижу как кто-то инспектирует карточку, видит div (или что там у вас), видит переход по клике и начинает чесать голову и разбираться. Если карточка простая (как на примере) - то он разберется быстро. Если там сложная структура - он потратит время. Просто оберните в a

[@DubinArtur]

Здравое замечание

[@AleksanderLamkov]

И … не смутит? Лучше «неочевидная», чем невалидная верстка.

[@soulwind7577]

​​@@AleksanderLamkovни разу не смутит т.к на button просто click.prevent вешается и все. Хотя как по мне я бы оба варианта не стал делать

[@AleksanderLamkov]

SEOШник с тобой бы не согласился. Почитай про влияние невалидной разметки на показатели в поисковой выдаче.

[@Someone9379992]

@@AleksanderLamkov какой баттон внутри ссылки? Что он делает, баттон этот? В каком сценарии мы будем использовать баттон внутри ссылки, вешать на него превент.дефаулт и использовать ради декораций? Есть масса вариантов как сохранить разметку валидной и не использовать неочевидные псевдоэлементы

[@КонстантинБелобородов]

Когда вся карточка кликабельная, это как современные машины с сенсорными экранами.

[@tomitomion1179]

Частая задача, но ужасная в плане UX, от такого надо отказываться или пытаться переубедить заказчика. Кликабельная карточка может быть только если внутри нет других ссылок/кнопок которые выполняют другие действия.

[@biscvie]

Спасибо!

[@palach_666]

Кайфы всегда так делал)

[@MrFrage-kv7zo]

а чем решение с оберткой в тег ссылки не нравится?

[@AleksanderLamkov]

В комментах обсудили это уже не раз. Ни заголовок, ни кнопку в ссылку вставить не получится.

[@aivondavil9691]

Очень круто

[@vkav3598]

Здравствуйте! Небольшой вопрос, был на что-то вроде собесе, спросили про стиль версики. Позже посмотрел что это и... Показалось что как будто странная фигня, просто смотришьна какие блоки делиться сайт и такие блоки и создаешь, такие правила css и используешь. На сколько стили верстки сейчас нужно знать/придерживаться?

[@AleksanderLamkov]

Ты спрашиваешь, нужно ли фронтенд-разработчику знать верстку? Да, нужно обязательно, это ведь основа профессии. Недавно видос на эту тему увидел: kzbin.info/www/bejne/kJCbpGqei5x6oqssi=qOFPPt1QdFrcOdQ6 Посмотри, если считаешь, что глубокие знания HTML и CSS не нужны.

[@vkav3598]

@@AleksanderLamkov Нет конечно) Имею ввиду про именно стили верстки. В плане есть ли какие-то идеологии в вёрстке? Нужно ли их знать? Или когда верстаешь не запариваться и просто в уме понимать что где лучше вставится

[@xOceanSpirit]

​@@vkav3598 есть методология БЭМ, её стоит знать. Что за "стили верстки" - вообще хз, впервые слышу 😂

[@CoralLynx]

@@vkav3598 есть современные способы верстки через гриды и флексы, есть различные виды позиционирования (фиксированное, абсолютное, относительное, стики) - ну вот во всех этих темах нужно разбираться, набивать руку на реальной практике. В плане «подходов» в верстке можно выделить деление на компоненты и нейминг по БЭМ методологии.

[@ichestor509]

​@@vkav3598ты не сможешь сверстать как то криво, тут всегда будет последовательность

[@LosevPeter]

решение классное.

[@onuris97]

Прикольная тема! Хоть я и не фронтендер даже, но всё равно было интересно 😄

[@Gloosx1488]

решение таки костыльней и сложней чем просто оборот всей карточки в кнопку?

[@AleksanderLamkov]

Нет. В кнопку оборачивать не стоит.

[@gr1nko823]

@@AleksanderLamkov почему?

[@AleksanderLamkov]

@@gr1nko823 как минимум потому, что в нельзя помещать , , : caninclude.glitch.me/caninclude?child=div&parent=button caninclude.glitch.me/caninclude?child=h3&parent=button caninclude.glitch.me/caninclude?child=p&parent=button

[@РусланОсманов-с7й]

Спасибо

[@alexles5003]

Ок. Если абстрагироваться от карточки, то при такой вёрстке получается весь блок это ссылка, а если в блоке есть еще какая-нибудь ссылка д ругим адресом, то ссылка останется рабочей, а HTML валидным?

[@AleksanderLamkov]

Нет. При такой верстке карточка останется article. Лишь внутренняя ссылка растянется на всю карточку. Разметка останется валидной.

[@alexles5003]

@@AleksanderLamkov у меня была ситация. Вестал карточку товара. По тз должна быть ссылкой. А в ней была ссылка толи на гост толи на артикул. Так вот она должна была быть рабочей и вести куда-то. Я тогда решил с помощью JS. А при таком способе сработали бы такие ссылки

[@TIMONIX]

Все равно лучше обернуть в так как в таком случае не придется махаться со всем остальным. Текст можно будет выделять, взаимодействовать с кнопками и тд

[@AleksanderLamkov]

Но такая разметка будет невалидной. Кнопку в ссылку помещать нельзя.

[@TIMONIX]

@@AleksanderLamkov тогда лучше вообще не делать кнопку на покупку, если этот линк ведет на товар где уже потом будет кнопка «купить»

[@TIMONIX]

@@AleksanderLamkov и я не помню, но вроде как в реактовский … можно кнопки вставлять

[@AleksanderLamkov]

Ну почему же «лучше»? Это кажется удобным: смотришь список товаров, что-то сразу добавляешь в корзину, а что-то хочешь посмотреть детальнее, для этого жмакаешь в любое место карточки товара, кроме самой кнопки «добавить в корзину».

[@CzarOfScripts]

@@TIMONIX и потом посмотри в консоль.

[@aleksej6489]

а с з-идексами косяков не будет при таком построении?

[@AleksanderLamkov]

Нет, они там в принципе не используются.

[@tin-strange]

будет таких ссылок 50 на странице))) и будет оно лагать как не в себя)

[@AleksanderLamkov]

Да почему же? Обычный CSS, никаких сложных свойств 🙂

[@xpoftik]

Я сначала подумал, что это поправившийся Саша Лукин, секунд 10 пытался понять он ли это или не он ))

[@AleksanderLamkov]

Хочется ответить мемом с ревущим котом **да не жирный я** 🥲

[@alxsiberian]

В каких случаях это более выгодно, чем просто весь компонент как ссылка?

[@AleksanderLamkov]

Например когда у тебя есть внутри кнопка.

[@reiben7328]

@@AleksanderLamkov а какой есть способ, кроме этого, если внутри кнопка? stopPropagation?

[@AleksanderLamkov]

Да, можно так, вызвать этот метод в функции обработчике события click по кнопке. Других решений не приходит в голову.

[@АльбертАрсланов-щ4и]

в и нельзя включать другие блочные элементы, верстка будет невалидной

[@ProGamerru]

Первый раз такое увидел у Яндекса лет 10 назад

[@KonstantinTarasov-q7q]

Все новое - хорошо забытое старое

[@nepcz]

Сделал так на работе. Начальник увидел и спросил накуя? А я тоже не понял чем плохо то)

[@AleksanderLamkov]

Ну, как минимум тапать с мобилки будет проще… Не нужно целиться в картинку и не дай бог в только название товара, написанное мелким шрифтом 😅

[@nepcz]

​@@AleksanderLamkovа в чем минус полностью в якорь обернуть?

[@AleksanderLamkov]

Если внутри будет или даже банальный , то разметка будет считаться не валидной. Да и «кнопка в ссылке» само по себе звучит страшно.

[@ahmadjonyusupov5553]

​​@@nepczесли что боты гугла и Яндекса не любят нарушения правил хтмл, по типу внутр строчного элемента нельзя засунуть блочного А метод описание в видео как-раз таки помогает избежать такого нарушения

[@DualDen]

​@@AleksanderLamkovа что мешает не использовать h3,а просто ссылку стилизовать?

[@exelione2229]

Реф тут не вариант сделать?

[@AleksanderLamkov]

Не понял тебя. Раскрой подробнее свою идею, пожалуйста :)

[@exelione2229]

@@AleksanderLamkov useRef - это хук, который позволяет создать ссылку на элемент DOM или другую переменную, которая сохраняется между рендерами компонента.

[@AleksanderLamkov]

А при чем тут проблемы и ререндеры реакта? В видео речь про UX и сохранение валидной семантичной доступной разметки.

[@exelione2229]

Ты безусловно прав. Но если мы в реакте хук useRef вместе с обработчиком события onClick повесим на карточку, мы в принципе добьемся того же самого?

[@D.Bakunin]

Круто!

[@leandrmiklashevich297]

кайфец!

[@kreison420]

Зачем?

[@AleksanderLamkov]

Когда тебя на работе ПМ попросит так сделать, задашь ему этот вопрос 🙃

[@zuxel6]

БЕМ - пережиток прошлого, не надо так

[@AleksanderLamkov]

А как надо? Какие альтернативы?

[@zuxel6]

@@AleksanderLamkov бем задумывался как изоляция стилей и разбивка ксс на компоненты на уровне нейминга. но, современный нормальный веб - реакт, вью и прочие уже итак используют компонентный подход на уровне кода и подключаемые стили уже изолированы. То есть, бем не нужен, есть css-modules/styled-components или scoped scss во вью

[@AleksanderLamkov]

Это не взаимозаменяемые подходы, они для разных целей. Декомпозиция кода на уровне разметки по БЭМу полезна как минимум для удобства дальнейшего анализа разметки по девтулз вкладке Elements, а как максимум - для проектов НЕ SPA этот подход остается единственным способом не закопаться в самоповтор компонентов и вечное дублирование кода.

[@zuxel6]

​@@AleksanderLamkov именно что взаимозаменяемые. вернее БЕМ сейчас вообще бесполезен. Воротить БЕМ ради анализа во вкладке? Серьезно? При этом разметка на уровне компонента в том же реакте должна быть минималистичной. а компоненты должны быть конфигурируемые, а не представлены кучей вариаций. Для неСПА, да, БЕМ остался. Только вот, сам неСПА остался в истории. как и БЕМ. Сейчас БЕМ мертв.

[@AleksanderLamkov]

Громкое заявление... Не хочу никого переубеждать, но скажу, что для себя из диалога я пользы не вынес. Не услышал ни одного рационального аргумента против БЭМа, лишь эмоциональные порывы. Мы в работе используем и БЭМ и модульные стили. У каждого подхода свои плюсы и минусы и совершенно разное назначение. Для UI-библиотеки используем модульные, а для других проектов для построения лейаута вокруг используемых компонентов UI-библиотеки как раз пишем по БЭМу. P. S. На недавней FrontendConf 2024 была дискуссия "BEM vs Tailwind", там так довольно много интересных мыслей озвучили ведущие, но по итогу все равно сошлись во мнении, что БЭМ не умрет никогда, как писали на нем, так и будут писать. Не знаю когда появится в паблике видеозапись с конфы, но советую глянуть, если появится возможность.

[@gmriten1336]

Имба ❤

[@chikenmacnugget]

Цэ плохая практика. Осуждаю

[@AleksanderLamkov]

А если «ну надо, сделай, а» от проджект-менеджера? 😅

[@chikenmacnugget]

@@AleksanderLamkov в любом случае. Нужно развивать навык переубеждать манагеров

[@AleksanderLamkov]

Полностью с тобой согласен. Очевидное и явное всегда лучше, чем противоположное :)

[@d-droll]

Это единственно верная семантически практика реализации ссылки на всю карточку, другого способа просто не существует. Если делаешь как-то иначе ты недоспец и твой собес в нормальную компанию, следящую за семантикой и доступностью (и, как следствие, местом в поисковой выдаче), закончится на этом вопросе)

[@chikenmacnugget]

@@d-droll да ты, дружок не способен тред прочитать полностью, либо спроцессировать полученную информацию. Соболезную окружающим…

[@ИльяКорнеев-ю8ш]

Можно .card > *, чтобы не перечислять все классы

[@AleksanderLamkov]

Но в таком случае и ссылка, к которой цепляется псевдоэлемент, получит ненужный z-index 🥲

[@ИльяКорнеев-ю8ш]

@@AleksanderLamkov ну а ей уже задать напрямую z-index. Это же по сути селектор-исключение, вот и поступать нужно с ним как с исключением. Ну это я по крайней мере по такому принципу делаю, стараюсь не перечислять то, что является правилом, а не исключением.

[@AleksanderLamkov]

Ну окей, так согласен!)

[@osad4enko]

а потом получаем пздюлей от аналитиков которые пытаются навешать GTM на элементы карточки

[@AleksanderLamkov]

Уж кто как не аналитик должен знать о таких нюансах UX на проекте…

[@d-droll]

Нука, просвети, как такой подход мешает что-то развесить?

[@un_defined]

не знал спасибо

[@cuudieieijejdjjcifu7388]

А зачеммм?

[@AleksanderLamkov]

Ну надо.

[@seryozhamangushev9638]

Выглядит как костыль.

[@AleksanderLamkov]

Он и есть! Предложишь решение лучше? Про «обернуть все в ссылку» - не надо, в комментариях ниже сто раз уже ответил, почему это плохая идея 🙃

[@EvilVentrue]

​@@AleksanderLamkovв последний раз при проблеме с взамдействием с обернутыми в линк элементами мне помогал e.stopPropagation в js. Я не знаю, насколько это костыль, но везде в похожих обсуждениях звучал именно этот способ.

[@AleksanderLamkov]

Действительно костыль. Но сам так делал раньше.

[@d-droll]

@@EvilVentrue это костыль, как минимум потому, что ты используешь js вместо чистого css решения

[@grenadier4702]

@@AleksanderLamkov костылем это является только лишь по той причине, что ивент не всплывает. Можно сделать так, тем самым убрав костыльность: outerA.onclick = e => e.defautPrevented && e.preventDefault() innerButton.onclick = e => e.preventDefault()

[@ReturnMeVoid]

костыль же

[@AleksanderLamkov]

Здесь должен быть мем с Дрейком 😅**Костыль? Нее…** **Лайфхак!** А если серьезно, то иногда от ПМов фронтенд-разработчики могут получить такую задачу и не знают, как её решить, втупую оборачивают карточку в ссылку, а затем от SEO прилетает по шапке, т. к. показатели условного Lighthouse упали из-за невалидной разметки.

[@ReturnMeVoid]

@@AleksanderLamkov если в ключе валидности, то да

[@talantasanov4973]

а че так можно было😂 я на саму карточку вешал онклик для перехода на детальную страницу товара. потом приходилось писать stopPropogation чтобы при клике на добавить корзину не открывалась страница товара

[@AleksanderLamkov]

Можно и так, но лучше не делать имитацию ссылки через JS. Ни тебе открытия через ПКМ и контекстное меню, ни превью адреса страницы в браузерной подсказке слева снизу страницы…

[@grenadier4702]

@@AleksanderLamkov и a11y страдает, если не добавить дополнительные атрибуты

[@SGG-ux8rp]

Это не фронтенд, это вёрстка 2010х годов...

[@AleksanderLamkov]

Да, а вёрстка - вовсе не часть фронтенда. Фронтенд ведь не про интерфейсы вовсе.

[@SGG-ux8rp]

@@AleksanderLamkov Так то оно так, но менеджить переходы ссылками в 24м году не надо :) Я уж не говорю про использование логической прослойки в виде фреймворка

[@AleksanderLamkov]

Да как же? Ссылки никто в вебе не отменял. Буквально пару недель назад делал в своем рабочем проекте на реакте подобную вещь, которую показал в видео. Бигтех, синьорский грейд, большая зарплата - и всё равно иногда надо «делать верстку», писать изящные и не очень костыли для решения вопросов UX.

[@d-droll]

Любой фронт - верстальщик, но не любой верстальщик - фронт. Для фронта не знать верстку, я даже не знаю, с чем сравнить, как для бека на знать консольные команды. Это базовый навык. Если что-то можно реализовать без ЖС, оно должно быть без ЖС

[@qerakl]

​@@d-droll хотел бы спросить, сколько у вас заняло времени что-бы стать фронт енд разработчиком, мне 17 и я сам учусь этому, интересно просто

[@EvgenyIvchenko]

Вааааау

[@strateg_usa]

🎉

[@egemon3341]

чет у меня не срабатывает

[@AleksanderLamkov]

Значит что-то делаешь не так. Надо смотреть что в разметке и стилях… Можешь сюда написать, помогут разобраться: t.me/friendlyFrontendChat

[@batbug16]

как? - понятно. но... накуя???

[@AleksanderLamkov]

Задай этот вопрос каждому моему проджект-менеджеру, с которыми я работал последние 4 года. Это буквально дефолтная практика - делать «кликабельными» карточки целиком.

[@xeleos]

@@AleksanderLamkov и эти люди запрещали оборачивать в тег ? зачем кстати нужен ::after? что он меняет в данном случае?

[@AleksanderLamkov]

@xeleos если в карточке есть кнопка, то оборачивать всю карточку в тег ссылки точно будет ошибкой. Ну а псевдоэлемент к уже имеющейся внутренней ссылке будет безотказным решением.

[@johny-joe]

@@AleksanderLamkov "Это буквально дефолтная практика - делать «кликабельными» карточки целиком." - тру стори

[@batbug16]

@@AleksanderLamkov a добавить onclick? или это харам?

[@chillside]

зачем оборачивать или псевдо-элемент? Можно же например сделать ссылку внутри и сделать ее absolute / inset: 0 - а кнопка relative + z-index?

[@AleksanderLamkov]

Можно, но придется заморачиваться с визуально скрытым текстовым контентом, чтобы соблюсти доступность. Ну а с псевдоэлементом к уже имеющейся ссылке (типа к заголовку) проблем таких не будет.

[@xOceanSpirit]

Внутри чего сделать? Просто пустую ссылку? Сео тебе руки оторвет за такое 😂

[@chillside]

@@xOceanSpirit внутри карточки разумеется, где же еще?) Можно пустую, можно что угодно там написать - ведь есть css и можно это все или скрыть или оформить в соответсвии с дизайном

[@AmirLT-x6y]

Wow❤

[@aqua-t6l]

ну и нахера, если можно просто сделать ссылкой...

[@AleksanderLamkov]

Чтобы разметка оставалась валидной.

[@aqua-t6l]

@@AleksanderLamkov кто сказал, w3c?😂

[@AleksanderLamkov]

В карточке будет кнопка, обернешь кнопку в ссылку?

[@aqua-t6l]

@@AleksanderLamkov во-первых, если так, то зачем там вообще кнопка?) Во-вторых, не вижу проблем сделать кнопку тегом span. В-третьих, если все таки в этом дизайне есть кнопка, то всю ссылку делать кликабельной как минимум странно.

[@AleksanderLamkov]

Глянь сайт додо пиццы, там вся карточка товара кликабельна (переход на детальную страницу), при этом в самой карточке товара есть кнопка добавления товара в корзину.

[@vladwolf444]

А потом в случае чего дебажь этот прикол

[@nizuli1347]

О боже, как же хорошо что я не фронтэндер, и не занимаюсь этой хуйной

[@qerakl]

Кто ты воин

[@nizuli1347]

​@@qerakl я - сениор вордпресс девелопер

[@mndtr0]

Этим всем сейчас ЧатГПТ занимается, но упражнение - разминка для головы, не больше - интересное...

[@KlausM-b5l]

😂

[@sergeybarabanov7540]

Можно повесить клик на карточку и получить код без мусора, который хорошо читается

[@AleksanderLamkov]

Ты про обработчик клика в JS? И прощай доступность…

[@nade3282]

доступность f + нельзя будет открывать ее в новом окне через колесико

[@АлександрКорнилов-м5щ]

@@AleksanderLamkov Так пример тут не про доступность, часто ли юзер будет использовать пкм на чем то, кроме изображения и заголовка? А вот использовать псевдоэлемент в не очевидном контексте - это большой вопрос с поддержкой.

[@AleksanderLamkov]

Если не ПКМ, то СКМ (средняя клавиша мыши, то есть нажатие на колесико). Я постоянно её использую при работе на ПК, когда просматриваю каталоги товаров на маркетплейсах. И жмакаю я, вроде как, не только на картинку товара или на название, обычно в рандомном месте в рамках карточки, хоть между картинкой и заголовком. При том ссылка все равно срабатывает как надо и все равно успешно открывается в новой вкладке детальная страница товара .

[@АлександрКорнилов-м5щ]

@@AleksanderLamkov Все это красивые, интересные идеи. Но если бы это было так полезно и без подводных камней - использовали бы это куда чаще. А так тут масса дискуссий в комментах по этому поводу )

[@ПавелФомин-ъ4с]

Прикольно! А нахера?

[@AleksanderLamkov]

Четыре года назад, когда только начинал коммерческую деятельность, я задал своему проджект-менеджеру тот же вопрос 😅 Сейчас такая механика отложилась в моей голове как «грамотный UX» (без сарказма, я правда теперь так считаю).

[@proKaps]

@@AleksanderLamkov сейчас прост один запрос в любимый ГПТ это решит

[@mrDefolt]

Кринж

[@_CogaR_]

Обернуть проще будет 😂

[@AleksanderLamkov]

Не всегда это возможно без последствий в виде невалидной разметки.