так основной смысл данного подхода из статьи как раз в спрайте и отсутствии повторных запросов по сети. Если вам это не нравится или не подходит, можно просто использовать img тег) ну или инклудить средствами сборщика\шаблонизатора свгшки
Я бы сказал, что результаты примерно идентичны и можно получить и обратные значения. На телефоне аналогично, иногда вариант symbol sprite срабатывает побыстрее чем предыдущий тест с inline svg. Спрайт будет выигрывать по общему весу страницы, а также за счет того, что иконка загружается по хуку connectionCallback т.е. уже после отображения первичного контента страницы, что в теории тоже на какие-то копейки улучшает FCP параметр. Но это все крохоборство в целом, хотя на тесте в 100000 иконок разница в пользу инлайна более ощутима, но таких кейсов в жизни на 100к иконок я не встречал
SVG иконки на проекте не являются какой-то проблемой, а также сами веб-компоненты вполне современный подход на который все больше обращают внимание крупные компании. Как раз в плюсах у компонента то, что он способен пережить множество версий фреймворков и уже это успешно делают. У одного только реакта за время существования веб-компонентов прошло десяток релизов, а этот веб-компонент в целом оставался бы неизменным последние 5 лет точно и спокойно переживал изменения сборщиков webpack > rollup > vite
Работает быстрее, только есть и минусы у подхода к инклудами
Вы привязаны к шаблонизатору и необходимо использовать доп. инструменты сборки
Время сборки проекта становится чуть медленее из-на инклудов
Общий вес страницы становится больше т.к. иконки не переиспользуются. На большом количестве иконок разница в размере страницы будет очень существенной
Не тот кейс, где можно как-то просесть в производительности, если только вы не пишите сайт сток для свг иконок
Так что можно добавить атрибут который указывает использовать спрайт или вставлять inline
Здравая идея, возможно обновлю контент немного позже.
Еще к минусам svg-спрайтов можно отнести, то что через css не получается цвета svg менять
Какое невежство таких вещей не знать, но все работает отлично. Попробуйте стиль в CSS применить svg-icon svg { fill: ff00ff; } и лично убедиться, что все работает и цвет меняется отлично.
Вижу ваш минус, надеюсь вы довольны и ваше графоманское эго немного остыло, но в целом приятно, что у меня теперь есть такой ярый подписчик и воздыхатель как вы, так жить интереснее.
Да, все верно, можем заменить img src=icon_name на svg-icon name=icon-name по поводу фишек - какие вы бы хотели видеть? пишите, я подумаю чем смогу помочь и можно ли это реализовать.
там вы путаетесь в аргументах своих и то частично признаете, то отрицаете, то пишите нет нарушений если писать через дефис, то в других тредах этой статьи показываете примеры написания тегов без использования дефиса. Крч не убедительные у вас аргументы, уровня `я обосрался, но все еще могу ходить` а за уровень ваших знаний легко очень судить т.к. кроме резюме то у вас ничего и не накопилось за такое большое время разработки, что в целом и не удивительно
Замете хамством я отвечал исключительно на Ваше хамство)
уровень быдла из Подольска
это как раз еще одна заметка про ваше ЧСВ, что вы считаете себя прям лучше и умнее видимо аж целого большого города в подмосковье) лишний раз убедился, что вы конченный графоман у которого кончились аргументы и осталось лишь просто плеваться и переходить на личности т.к. технических аргументов просто нету, а ответить необходимо т.к. в жопе зудит и обида горит, что какой-то пиздюк 30летний дает советы, а не хвалит дитяточку. В гневе человек показывает истинное лицо и я увидел ваше. Это первый и единственный тред, где я так долго пытался кого-то вразумить и пожертвовал кармой, чтобы немного поучить графомана)
Да не знаете вы его. Или пруфы в студию. Ваше резюме это лишь плод фантазий, я таких на собесах много видел, 40 лет и мозгов нету, зато ЧСВ и понты своим возрастом и стажем. Ваш вклад в опенсус разработку ровно 0, ни одной библиотеки набравшей хотябы сотню инсталлов в нпм и пяток звёздочек на Гите. Кичитесь знаниями кода, но хоть одну статью вы написали про веб фреймворки? Нет. Я же их написал с полсотни. Вёрстку можете а блоге глянуть, там и показатели lighthouse хорошие, попробуйте поискать в своих закромах что-то получше. Зазнавшийся олдфаг с заявкой на изменения стандартов хтмл как раз тут именно вы и такой уровень графоманства уже не лечится.
Сайт manytomany заброшен и доживает последний год оплаченного домена, им уже несколько лет никто не занимается и площадка мертва, хз зачем вы копались в этом)) видимо припекло жопу, но ничего бывает. Последние 7 лет я занимаю руководящие должности в командах веб/фронтенд разработки и имею слабое отношение к пхп) проекты которые мы поддерживаем и пишем используют десятки тысяч людей ежедневно, сотни людей это посещаемость моего полузабытого блога) Вам действительно стоит подучить фреймворки и вы мигом перестанете восхищаться возможностью писать всякую ересь в хтмл. Пока вы похожи на реакт макаку из многочисленных шуток про реакт)) к счастью у меня на jsx аллергия и я так не велосипедил, как это делают поклонники Фейсбук технологий) к вам это все придет с опытом, не расстраивайтесь. Я даже сохранил вам плюсовой рейтинг статьи, а так был бы совсем нолик у вас судя по рейтингу +1 так что вы серчаете зря, умейте принимать критику спокойнее, всё-таки возраст ближе к 40, невралгия дело опасное
В итоге имеем, что так писать можно, но все может развалится, список депрекейтед тегов надо помнить в вашем случае + нездоровая боязнь писать див элементы, восприятие кастом элементов только с точки зрения что можно писать слова которые нравятся, бойлерплейт в цсс, а также отсутствие навыков с веб фрейиворками в которых в таком стиле уже давно пишут и не тратят столько времени в пустую на такие глупые идеи. Веб практикует компонентный подход нравится вам или нет. Что нативные веб компоненты, что реакт/вью/ангуляр/свелти, вас осталось лишь подтянуться до современного уровня. Удачи вам.
Вам уже написал много технических аргументов, но вы в обиженку превратились просто и начали рассуждать уже про тон сообщений которым вы читаете мои комменты, про свой возраст, про ваше видение собеседований и тп.
Еще разок напихаю вам по пунктам
Вы отходите от стандарта т.к. все теги регламентированы по своей семантике и существуют соглашения о именовании тегов
Вы упираетесь в сугубо личное понятие лаконичности и читаемости в место того, чтобы соответствовать стандартам. Люди знающие стандарты HTML будут все равно с трудом читать вашу разметку и без ваших пояснений никак не обойтись
У вас будут проблемы с SEO
Ваша верстка не семантичная
У вас будут проблемы со скринридером
Вы не экономите количество символов т.к. для каждого элемента вновь приходится писать вам display:block
В итоге больше бойлерплейта пишите т.к. люди использующие классы в CSS переиспользуют куски стилей. Взгляните как пример на tailwind
Ваша разметка хуже сжимается алгоритмами сжатия
Вы можете напороться на то, что выйдет новый HTML6 тег, а он у вас уже в проекте под другим соусом и все сломается
Ваш подход допускает использование deprecated тегов которые выходят из обихода
Вы игнорируете доступные форматы микроразметки типа open graph мечтая о том, что когда-нибудь примут ваши теги (к счастью никогда не примут)
Игнорируете факт, что современные веб-фреймворки уже позволяют писать в таком стиле, о каком вы пишите, компилируя все в итоге в православный div элемент и позволяя избежать проблем из всех пунктов выше.
Поддержка устройств у вас получится на выходе тоже ограниченная.
Текстовый контент в RSS лентах будет некорректно оформлен при применении кастомной разметки
Кастомные элементы придумали не просто ради того, чтобы вы делали кучу разношерстных тегов которые все можно заменить дивом с классом. Кастомные элементы это про возможности инкапсуляции логики, шаблона, стилей в одном теге + такие фишки как shadow DOM, хуки жизненного цикла тега и т.п. Но вы просто игнорируете все замечания. Кастомные элементы как хороший пример это audio, video, canvas, details.
Также идет борьба с лишними тегами т.к. они устаревают, но благодаря таким как вы может внестись путаница с тегами типа - marquee, font, frame, param, plaintext
В вашем мире просто не будет существовать deprecated тегов
Предлагаю вернуться к тегам. Где это не работает?
Ой все, спорить с нарциссом с повышенным чувством ЧСВ невозможно. Вы не воспринимаете критику и засолились на уровне ананизма на себя любимого и своих лаконичных идей. Вы бы у меня собес тоже не прошли, хоть и старше и кодите дольше, толку только ноль. То что вы долго сидите на одном месте не делает вам чести и вы не становитесь опытнее со временем. Понтоваться своим возрастом и стажем - очень тупо. А в моем случае опускаться еще до вашего уровня глупо.
ну вот вы сами же и переходите на личности и то о чем просите не писать - пишите
мне 36 лет, вам полагаю около 32, и разработкой занимаюсь дольше.
Это ведь и есть личные оценочные суждения, мы с вами одинаково застали развитие интернета. Свой первый код на бейсике я писал еще в начальной школе, а первый сайт за деньги сделал где-то в 2006 итого 18 лет веб-разработки уже позади т.к. я этим занимаюсь до сих пор. Только эта информация далеко за темой треда текущего и вы сами к этому тред подводите. Фу таким быть. Я просто поделился с вами, что когда-то тоже радовался идее писать собственные теги на свое усмотрение.
Телеграм отлично парсит на основе open graph все уже придумали за вас. Боюсь представить, если каждый в место open graph будет просить свои и имена тегов вставлять, которые считают лаконичными.А вот чтобы миллионы разработчиков по всему миру согласовали непонятное количество имен тегов - утопия. Хотя в целом они и согласовали - div всем хватает. Вас никто не унижает и фраз про преподавание и учение тоже не было, вы слишком интимно воспринимаете данную дискуссию. Просто сама дискуссия уже потеряла технический смысл и напоминает обмен упреками, что мне не интересно. Цели как-то унизить вас или оскорбить у меня нету. Извините, если чем-то вас задел. Ваш бы энтузиазм да в правильное русло направить, а пока вы напоминаете мне меня же 10 лет назад, когда я радовался в первом ангуляре что теперь могу писать теги какие хочу)
В принципе можно договориться что если тег из нескольких частей через чёрточки - то веб-компонент, а если всё слитно - то просто тег.
На наших проектах так и есть, часть веб компонентов смешана с vue.js в моем профиле есть публикация на тему веб-компонента одного из, а в блоге можно найти еще пяток статей на тему веб-компонентов. У нас есть wc-wysiwyg, svg-icon, web-link и еще парочка внутренних. Так что для меня ничего нового и
Так что в целом ваш подъеб
А вот то что возможность языка которая в нем уже кучу лет для опытных разработчиков является чем-то новым не нормально
Не засчитан. Мы пользуемся кастомными элементами в HTML активно уже несколько лет точно. А то что вы как якобы опытный разработчик не ушли дальше переименования HTML тегов - выглядит очень печально и уныло, низкий уровень развития и приводит к таким вот статьям. В современных проектах в большинстве своем теги с дефисом и являются кастомными веб-компонентами. Погуглите web-component naming convention и почитатйе.
Т.к. ваши комментарии перешли в плоскость попыток поплеваться слюной и перейти на личности, не вижу уже смысла далее вам отвечать и разжевывать очевидные вещи для опытных разработчиков.
И не называйте HTML лаконичным кодом - это просто язык разметки, который вам еще предстоит осилить, если хотите вменяемо конкурировать на рынке с другими опытными фронтенд специалистами
"так сложилось что я привык по другому и лень переучиваться"
Так сложились стандарты разработки и я придерживаюсь, вы не придумали ничего нового, никакого ноу-хау или технологического прорыва, вы решили в один момент, что писать велосипеды с выдуманными тегами это круто. Нет не круто, вам куча народа об этом сказала и рейтинг вашей статьи тоже намекет. Я тоже прошел путь от HTML4, jquery, backbone, knockout, angular1, polymer до vue 3 + web-components. React'a по жизни избегал и не писал на нем, хотя и приходилось некоторые проекты переводить с него на vue. Не вам мне рассказывать про "переучиваться". В вебе без этого никак.
А с инженерной точки зрения есть что сказать по поводу качества работы такого кода?
Вам я уже выше написал, что вы забили на семантику, на стандарты, на SEO, на скринридеры. Восхищяетесь своей идеей писать код "лаконично" а по сути велосипедить ведь вам тяжело понять смысл div.loader и вы пытаетесь сделать еще один XML
Начинаю считать этот тред бесполезным уже холиваром
Никак не учу, я работаю в диком ентерпрайзе. У нас на всех проектах есть дизайн системы и сторибуки для компонентов. Пишу тонны бойлерплейта для всяких хитро выдуманных админок и внутренних срм систем
Выходит что проще всегда писать как для сео и не изобретать велосипед. Иначе нужно практиковать два подхода одновременно, с учётом сео и скрин ридеров и без учёта их с фантазией над тегами. Я в статье правильное место ваше процитировал, вы пишите про h1 но причина для вас в бойлерплейте меньшем, а не в семантике и это принципиально важный момент. Вам там в комментариях уже подсказали, что используйте emmet и будет вам счастье. Я когда вижу див с классом лоадер, не проговариваю в уме несколько его смыслов. Блок со стилем лоадер - условно. Когда я вижу кастомный тег, я в первую очередь думаю про наличие веб-компонента и мог бы потратит время на поиски того, чего нет. С хожу найти сакральный смысл в том, что автор просто так считает писать лаконично - я не настолько экстрасенс. Попробуйте изучить реакт, вьюжс или ангуляр, там как раз можно писать в таком духе разметку как вам нравится, а на выходе получать семантичную с точки зрения вёрстку для сео и скринридеров.
на гитхаб же дал ссылку в статье, или вам нужна javascript версия?
так основной смысл данного подхода из статьи как раз в спрайте и отсутствии повторных запросов по сети. Если вам это не нравится или не подходит, можно просто использовать img тег) ну или инклудить средствами сборщика\шаблонизатора свгшки
Я бы сказал, что результаты примерно идентичны и можно получить и обратные значения. На телефоне аналогично, иногда вариант symbol sprite срабатывает побыстрее чем предыдущий тест с inline svg. Спрайт будет выигрывать по общему весу страницы, а также за счет того, что иконка загружается по хуку connectionCallback т.е. уже после отображения первичного контента страницы, что в теории тоже на какие-то копейки улучшает FCP параметр. Но это все крохоборство в целом, хотя на тесте в 100000 иконок разница в пользу инлайна более ощутима, но таких кейсов в жизни на 100к иконок я не встречал
SVG иконки на проекте не являются какой-то проблемой, а также сами веб-компоненты вполне современный подход на который все больше обращают внимание крупные компании. Как раз в плюсах у компонента то, что он способен пережить множество версий фреймворков и уже это успешно делают. У одного только реакта за время существования веб-компонентов прошло десяток релизов, а этот веб-компонент в целом оставался бы неизменным последние 5 лет точно и спокойно переживал изменения сборщиков webpack > rollup > vite
Работает быстрее, только есть и минусы у подхода к инклудами
Вы привязаны к шаблонизатору и необходимо использовать доп. инструменты сборки
Время сборки проекта становится чуть медленее из-на инклудов
Общий вес страницы становится больше т.к. иконки не переиспользуются. На большом количестве иконок разница в размере страницы будет очень существенной
Не тот кейс, где можно как-то просесть в производительности, если только вы не пишите сайт сток для свг иконок
Здравая идея, возможно обновлю контент немного позже.
Какое невежство таких вещей не знать, но все работает отлично. Попробуйте стиль в CSS применить
svg-icon svg { fill: ff00ff; }и лично убедиться, что все работает и цвет меняется отлично.Вижу ваш минус, надеюсь вы довольны и ваше графоманское эго немного остыло, но в целом приятно, что у меня теперь есть такой ярый подписчик и воздыхатель как вы, так жить интереснее.
Да, все верно, можем заменить
img src=icon_nameнаsvg-icon name=icon-nameпо поводу фишек - какие вы бы хотели видеть? пишите, я подумаю чем смогу помочь и можно ли это реализовать.там вы путаетесь в аргументах своих и то частично признаете, то отрицаете, то пишите нет нарушений если писать через дефис, то в других тредах этой статьи показываете примеры написания тегов без использования дефиса. Крч не убедительные у вас аргументы, уровня `я обосрался, но все еще могу ходить` а за уровень ваших знаний легко очень судить т.к. кроме резюме то у вас ничего и не накопилось за такое большое время разработки, что в целом и не удивительно
Замете хамством я отвечал исключительно на Ваше хамство)
это как раз еще одна заметка про ваше ЧСВ, что вы считаете себя прям лучше и умнее видимо аж целого большого города в подмосковье) лишний раз убедился, что вы конченный графоман у которого кончились аргументы и осталось лишь просто плеваться и переходить на личности т.к. технических аргументов просто нету, а ответить необходимо т.к. в жопе зудит и обида горит, что какой-то пиздюк 30летний дает советы, а не хвалит дитяточку. В гневе человек показывает истинное лицо и я увидел ваше. Это первый и единственный тред, где я так долго пытался кого-то вразумить и пожертвовал кармой, чтобы немного поучить графомана)
Да не знаете вы его. Или пруфы в студию. Ваше резюме это лишь плод фантазий, я таких на собесах много видел, 40 лет и мозгов нету, зато ЧСВ и понты своим возрастом и стажем. Ваш вклад в опенсус разработку ровно 0, ни одной библиотеки набравшей хотябы сотню инсталлов в нпм и пяток звёздочек на Гите. Кичитесь знаниями кода, но хоть одну статью вы написали про веб фреймворки? Нет. Я же их написал с полсотни. Вёрстку можете а блоге глянуть, там и показатели lighthouse хорошие, попробуйте поискать в своих закромах что-то получше. Зазнавшийся олдфаг с заявкой на изменения стандартов хтмл как раз тут именно вы и такой уровень графоманства уже не лечится.
Сайт manytomany заброшен и доживает последний год оплаченного домена, им уже несколько лет никто не занимается и площадка мертва, хз зачем вы копались в этом)) видимо припекло жопу, но ничего бывает. Последние 7 лет я занимаю руководящие должности в командах веб/фронтенд разработки и имею слабое отношение к пхп) проекты которые мы поддерживаем и пишем используют десятки тысяч людей ежедневно, сотни людей это посещаемость моего полузабытого блога) Вам действительно стоит подучить фреймворки и вы мигом перестанете восхищаться возможностью писать всякую ересь в хтмл. Пока вы похожи на реакт макаку из многочисленных шуток про реакт)) к счастью у меня на jsx аллергия и я так не велосипедил, как это делают поклонники Фейсбук технологий) к вам это все придет с опытом, не расстраивайтесь. Я даже сохранил вам плюсовой рейтинг статьи, а так был бы совсем нолик у вас судя по рейтингу +1 так что вы серчаете зря, умейте принимать критику спокойнее, всё-таки возраст ближе к 40, невралгия дело опасное
В итоге имеем, что так писать можно, но все может развалится, список депрекейтед тегов надо помнить в вашем случае + нездоровая боязнь писать див элементы, восприятие кастом элементов только с точки зрения что можно писать слова которые нравятся, бойлерплейт в цсс, а также отсутствие навыков с веб фрейиворками в которых в таком стиле уже давно пишут и не тратят столько времени в пустую на такие глупые идеи. Веб практикует компонентный подход нравится вам или нет. Что нативные веб компоненты, что реакт/вью/ангуляр/свелти, вас осталось лишь подтянуться до современного уровня. Удачи вам.
Вам уже написал много технических аргументов, но вы в обиженку превратились просто и начали рассуждать уже про тон сообщений которым вы читаете мои комменты, про свой возраст, про ваше видение собеседований и тп.
Еще разок напихаю вам по пунктам
Вы отходите от стандарта т.к. все теги регламентированы по своей семантике и существуют соглашения о именовании тегов
Вы упираетесь в сугубо личное понятие лаконичности и читаемости в место того, чтобы соответствовать стандартам. Люди знающие стандарты HTML будут все равно с трудом читать вашу разметку и без ваших пояснений никак не обойтись
У вас будут проблемы с SEO
Ваша верстка не семантичная
У вас будут проблемы со скринридером
Вы не экономите количество символов т.к. для каждого элемента вновь приходится писать вам display:block
В итоге больше бойлерплейта пишите т.к. люди использующие классы в CSS переиспользуют куски стилей. Взгляните как пример на tailwind
Ваша разметка хуже сжимается алгоритмами сжатия
Вы можете напороться на то, что выйдет новый HTML6 тег, а он у вас уже в проекте под другим соусом и все сломается
Ваш подход допускает использование deprecated тегов которые выходят из обихода
Вы игнорируете доступные форматы микроразметки типа open graph мечтая о том, что когда-нибудь примут ваши теги (к счастью никогда не примут)
Игнорируете факт, что современные веб-фреймворки уже позволяют писать в таком стиле, о каком вы пишите, компилируя все в итоге в православный div элемент и позволяя избежать проблем из всех пунктов выше.
Поддержка устройств у вас получится на выходе тоже ограниченная.
Текстовый контент в RSS лентах будет некорректно оформлен при применении кастомной разметки
Кастомные элементы придумали не просто ради того, чтобы вы делали кучу разношерстных тегов которые все можно заменить дивом с классом. Кастомные элементы это про возможности инкапсуляции логики, шаблона, стилей в одном теге + такие фишки как shadow DOM, хуки жизненного цикла тега и т.п. Но вы просто игнорируете все замечания. Кастомные элементы как хороший пример это audio, video, canvas, details.
Также идет борьба с лишними тегами т.к. они устаревают, но благодаря таким как вы может внестись путаница с тегами типа - marquee, font, frame, param, plaintext
В вашем мире просто не будет существовать deprecated тегов
Ой все, спорить с нарциссом с повышенным чувством ЧСВ невозможно. Вы не воспринимаете критику и засолились на уровне ананизма на себя любимого и своих лаконичных идей. Вы бы у меня собес тоже не прошли, хоть и старше и кодите дольше, толку только ноль. То что вы долго сидите на одном месте не делает вам чести и вы не становитесь опытнее со временем. Понтоваться своим возрастом и стажем - очень тупо. А в моем случае опускаться еще до вашего уровня глупо.
ну вот вы сами же и переходите на личности и то о чем просите не писать - пишите
Это ведь и есть личные оценочные суждения, мы с вами одинаково застали развитие интернета. Свой первый код на бейсике я писал еще в начальной школе, а первый сайт за деньги сделал где-то в 2006 итого 18 лет веб-разработки уже позади т.к. я этим занимаюсь до сих пор. Только эта информация далеко за темой треда текущего и вы сами к этому тред подводите. Фу таким быть. Я просто поделился с вами, что когда-то тоже радовался идее писать собственные теги на свое усмотрение.
Телеграм отлично парсит на основе open graph все уже придумали за вас. Боюсь представить, если каждый в место open graph будет просить свои и имена тегов вставлять, которые считают лаконичными.А вот чтобы миллионы разработчиков по всему миру согласовали непонятное количество имен тегов - утопия. Хотя в целом они и согласовали - div всем хватает. Вас никто не унижает и фраз про преподавание и учение тоже не было, вы слишком интимно воспринимаете данную дискуссию. Просто сама дискуссия уже потеряла технический смысл и напоминает обмен упреками, что мне не интересно. Цели как-то унизить вас или оскорбить у меня нету. Извините, если чем-то вас задел. Ваш бы энтузиазм да в правильное русло направить, а пока вы напоминаете мне меня же 10 лет назад, когда я радовался в первом ангуляре что теперь могу писать теги какие хочу)
На наших проектах так и есть, часть веб компонентов смешана с vue.js в моем профиле есть публикация на тему веб-компонента одного из, а в блоге можно найти еще пяток статей на тему веб-компонентов. У нас есть wc-wysiwyg, svg-icon, web-link и еще парочка внутренних. Так что для меня ничего нового и
Так что в целом ваш подъеб
Не засчитан. Мы пользуемся кастомными элементами в HTML активно уже несколько лет точно. А то что вы как якобы опытный разработчик не ушли дальше переименования HTML тегов - выглядит очень печально и уныло, низкий уровень развития и приводит к таким вот статьям. В современных проектах в большинстве своем теги с дефисом и являются кастомными веб-компонентами. Погуглите web-component naming convention и почитатйе.
Т.к. ваши комментарии перешли в плоскость попыток поплеваться слюной и перейти на личности, не вижу уже смысла далее вам отвечать и разжевывать очевидные вещи для опытных разработчиков.
И не называйте HTML лаконичным кодом - это просто язык разметки, который вам еще предстоит осилить, если хотите вменяемо конкурировать на рынке с другими опытными фронтенд специалистами
Так сложились стандарты разработки и я придерживаюсь, вы не придумали ничего нового, никакого ноу-хау или технологического прорыва, вы решили в один момент, что писать велосипеды с выдуманными тегами это круто. Нет не круто, вам куча народа об этом сказала и рейтинг вашей статьи тоже намекет. Я тоже прошел путь от HTML4, jquery, backbone, knockout, angular1, polymer до vue 3 + web-components. React'a по жизни избегал и не писал на нем, хотя и приходилось некоторые проекты переводить с него на vue. Не вам мне рассказывать про "переучиваться". В вебе без этого никак.
Вам я уже выше написал, что вы забили на семантику, на стандарты, на SEO, на скринридеры. Восхищяетесь своей идеей писать код "лаконично" а по сути велосипедить ведь вам тяжело понять смысл div.loader и вы пытаетесь сделать еще один XML
Начинаю считать этот тред бесполезным уже холиваром
Никак не учу, я работаю в диком ентерпрайзе. У нас на всех проектах есть дизайн системы и сторибуки для компонентов. Пишу тонны бойлерплейта для всяких хитро выдуманных админок и внутренних срм систем
Выходит что проще всегда писать как для сео и не изобретать велосипед. Иначе нужно практиковать два подхода одновременно, с учётом сео и скрин ридеров и без учёта их с фантазией над тегами. Я в статье правильное место ваше процитировал, вы пишите про h1 но причина для вас в бойлерплейте меньшем, а не в семантике и это принципиально важный момент. Вам там в комментариях уже подсказали, что используйте emmet и будет вам счастье. Я когда вижу див с классом лоадер, не проговариваю в уме несколько его смыслов. Блок со стилем лоадер - условно. Когда я вижу кастомный тег, я в первую очередь думаю про наличие веб-компонента и мог бы потратит время на поиски того, чего нет. С хожу найти сакральный смысл в том, что автор просто так считает писать лаконично - я не настолько экстрасенс. Попробуйте изучить реакт, вьюжс или ангуляр, там как раз можно писать в таком духе разметку как вам нравится, а на выходе получать семантичную с точки зрения вёрстку для сео и скринридеров.