Где найти примеры исходного кода HTML5 CSS3 сеньерского уровня?

Question

[Matvey]

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

Answer 1

[Максим Федоров]

www.kaerus.de/ebay
обратите внимания -- переключение фото товаров без единого символа на js (вообще ничего на странице нет на js)
переключение размера и цвета -- все на голом HTML, увеличение фото по кклику
и при этом слайдер адаптивный еще в добавок, чистый html

также посмотрите на работы Артемия Лебедева -- там с версткой у них вышка

Comments

[Kovalsky]

Кто-нибудь вообще сайт смотрел?

У меня было такое лицо, когда я увидел что личный сайт web maniac Lea Verou каким-то образом оказался рядом с kaerus.de/ebay/. Вы чего, это же чей-то сделанный на скорую руку учебный проект наверное.

1. "слайдер адаптивный" - при ширине окна <= 767px слайдер не только перестаёт быть адаптивным, но и зачем-то ещё начинает демонстрировать края предыдущего слайда. Также, он никак не контролируется,
2. Инфа о товаре это вообще праздник. Например, превью в лейблы вставлены в натуральном размере, то есть Chrome Canary в списке картинок мне показывает одноцветные квадратики (иногда с пуговицами). А когда я нажал на картинку чтобы она увеличилась, мужик на картинке вдруг похудел. А другой мужик при увеличении вдруг наоборот поправился. Илон Маск сквозь слёзы кричит нам: эй, пора бы уже другие планеты колонизировать, а вы там до сих пор не знаете, как банально пропорции изображений соблюдать!
4. Если бы я хотел персонифицировать IE, то в данном случае я бы представил его в образе Траволты, потому что даже Edge вообще не представляет что происходит: картинки как-то бессистемно растягиваются в блоке с зумом, в превью лейблах появляется скроллбар который вроде как скрыт, при клике с целью зума некоторые картинки выравниваются по правому краю. Да, IE часто ведёт себя как дурачок, но если такое происходит, значит вы придумали какую-то прям совсем кривую структуру и с этой некромантией надо срочно завязывать,
5. Человек который верстал это просто хотел подразнить нас - в большинстве случаев flex используется без всякой нужды и даже в комбинации с элементами предшествовавших ему способов (например кнопки buy now и add to cart),
6. Если слайдер и картинки с зумом свёрстаны по сути только для широких экранов, то с разделом FAQ всё наоборот - он выглядит прилично только при ширине окна <= 1120px,
7. По коду видно, что он хоть и с любовью, но всё же был отформатирован криво вручную. Это конечно очень трогательно, но даже Sublime Text (не говоря уже о других) ненавязчиво предлагает юзеру отформатировать всё за него,
8. Много-много очков гриффиндору за вручную расставленные идентификаторы, два из которых повторяются.
9. Потыкайте на все эти слайдеры, табы и тому подобное. Некоторые из них не функционируют дальше третьего элемента. Конечно в данном случае это потому что верстальщику просто надоело копировать ID, создавать связанные лейблы, пихать копии элементов управления в каждый экземпляр, потом добавлять новые ID в CSS и т.д., но суть конечно не в том, что просто нужен терпеливый верстальщик, а в том что это критически неправильный подход. Мне кажется тут даже и аргументировать не надо особенно, но всё же чтобы не быть голословным я попробовал для случайного компонента (внезапно - вёрстка разделена на компоненты) удалить лишний код, то есть тот который отвечает только за функционал - стили и дубли элементов управления, оригиналы остались. Беру например компонент product. Из CSS удаляю всё что имеет отношение к инпутам, а из HTML удаляю все дубли (.popup, .popup-bg, .flex-inputs-radio-item). Результат: CSS похудел на ~4000 символов, а разметка, которая сначала состояла из ~26000(!) символов, похудела на ~17800 символов. Да, речь о маленькой учебной страничке. Да, речь только об одном компоненте. И да, не забывайте что в изначальной разметке присутствовали нерабочие элементы управления, то есть на самом деле для сохранения функционала кода должно было быть существенно больше, думаю раза в полтора, если не в два.

Все эти "крутые" штуки на "голом" HTML (одетым в CSS) это конечно мило, можно даже с мечтательной улыбкой посмотреть на горизонт и про себя подумать о том, какое в связи с этим светлое будущее ждёт нас и наших внуков, но это всё никак не связано ни с хорошей вёрсткой, ни с хорошей организацией веб-приложений в принципе (как и сама страница kaerus.de/ebay/). Весь этот функционал даже я - юнлинг - могу реализовать в 2-10 строк JS на каждый компонент.

ЗЫ: +1 за упоминание о Татьяныче, у него и правда всё очень круто!

[ой всё]

да чет вы опозорились с примером крутизны :)

[Максим Федоров]

ой всё, прямо позорился? Ой, ну ладно... мои навыки больше никому не помогут, они же уже не навыки :)

[ой всё]

Максим Федоров, да че ладно-то?
даже в ширину экрана не влазит

[Максим Федоров]

ой всё,
Зачем после ответа содержательного по пунктам писать ваш?
Это дополнение? Чем оно поможет мне и др участникам сообщества?

Давайте уже пишите лучше предыдущего комментатора или целостней дополняйте...
Опозорился... и что с того? первый раз что-ли? нормальное дело на этой планете
И совсем не опозорился, вполне полезный ответ, да -- комментарий в 100 раз полезней (один из комментариев)... все вместе = польза

опозорился я... идите лесом!

[ой всё]

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

[Максим Федоров]

ой всё, чем заслуженное? если удалю -- пропадет очень ценный комментарий (не ваш)

[ой всё]

Максим Федоров, тогда держите себя в руках

[Johny Smith]

ой всё, человек старался

[ой всё]

Olek1, а

[Aleksey Muskos]

А это вообще стоит того, чтобы такой выбор стоимости делать? некоторые вещи на мой взгляд таки стоит отдать на js?

Answer 2

[sim3x]

https://github.com/akella
https://github.com/pepelsbey

Answer 3

[Negwereth]

lea.verou.me

Answer 4

[FullStack Alex]

https://www.awwwards.com

Answer 5

[Александр Решетняк]

на codepen.io у профи