Очень редко встречал перевод octopus как "воронка". Используется в горнодобывающей промышленности и т.д. В любом случае, действительно странно видеть подобные решение на сайте Амазон)
Очень интересно смотреть и слушать сравнение по структуре верстки сайтов, спасибо за вашу информацию. И хотелось бы увидеть сравнение кода разных виджетов, если это возможно, был бы благодарен.
@@itgid сравнение кода виджетов написанных на CSS или Java Script, вообще которые представит возможность, к примеру есть многообразие реализации адаптивного меню и некоторые бургер делают с использованием input-checkbox, а кто с помощью animation CSS или добавление товара в корзину на Java Script, на codepen видел примеры, но код некоторых непонятен возможно из-за использования препроцесоров Java Script, даже просто интересно видеть и слышать сравнение одной и той же реализации разными способами. Спасибо за информацию! :)
Нет смысла. Различные шаблоны WP используют и разные билдеры (в WP это визуальные конструкторы верстки страницы) которые в свою очередь используют свои виджеты + виджеты написанные "допиливателем" шаблона когда в нем нужен блок не предусмотренный шаблоном. Там будет адовая помойка вложений.
Видео классное. Все супер. Что на счёт интернет магазинов я хз. Ну типа заказчику важно чтобы были клиенты и товар покупали, а уже как сделан сайт, какой там код его не сильно парит
Я так понял вопрос адресован к Александру Лущенку. Тем не менее я верстаю с помощью БЭМа (не идеально, но как на примере товара от розетки), на практике очень хороший подход, других подходов не знаю :)
ну хз что тут сказать. наверное лучше стоило бы начать, сколько лет сайту амазон, а сколько розетке. амазон, делают тысячи человек, розетку скорее всего верстали пару человек. в амазон все больше сделано на генерацию страниц. в розетка все заведомом сверстано. мне кажется, если взять исходники амазона, с которыми работают их кодеры, они могут оказаться на много проще чем у розетки.Александр, вы программист с большим опытом. вы должны понимать, что крупны проект не верстают два человека! там иногда бывает так, что один специалист, все что делает, это верстает три строки как конвейер! большинство, даже не понимают для чего они это верстают.)) а вот такое как розетка, там может и один верстать целые огромные куски блоков или страницы. тоже и с jquery, там горы древнего кода, который скорее всего уже и не работает, но в верстке присутствует. jquery много где еще используют, и не потому что это супер круто. большинство на JS ничерта не умеет писать! они азы выучат, и дальше готовые решения прут. потом таких кодеров выкидывают на улицу, ибо они бесполезные, набирают новых таких-же чтоб меньше платить. мне часто рассказывали, как такие гиганты как ЕПАМ, выкидывает толпы людей на улицу и набирают новых. один знакомый, потом объяснил почему так. причину я выше написал.))) оттуда и все остальное идет.)) розетку, просто делали видно не большая студия, в человек 50-100. а амазон пилят тысячи людей! вот и разница.))) возможно я и не прав, и просто у них так принято. )))) про выброшенных, я не понимал, почему они не находят потом работу, в ЕПАМ же работали! потом столкнулся, что не берут тудаа опытных иногда, а берут вообще дубов... ну и потом мне рассказали причины. ну а те потом на заводы возвращаются, ибо реально ни кому не нужен специалист, который тупо готовое решение только умеет воткнуть... поэтому я сразу отказался от библиотек, и стал делать все сам, для опыта. да, получал из-за этого мало, но зато опыт получил хороший!)))
Ага, но в итоге розетку, если верстали несколько человек, у них вышло интереснее чем в амазоне, хотя там намного больше человек было, но это уже на вкус
Алекс, спасибо за видео! Хотел бы помочь, вместо ножницы можете использовать lightshot. PrtSc и делаете скриншот, рисовать можно и квадратом выделить. Просто рекомендация!
нет. У меня к нему не однозначное отношение. Да и сложно работать с технологией, когда ее каждый реализует со своим уклоном и считает подход самым верным.
у себя на работе делал огромный интернет магазин и там клиент хотел что бы по клику на любое место карточки товара случался редирект на страницу товара. пришлось оборачивать в компонент ссылки п.с. компонент т.к. у нас next.js и всякие хитрости с ssr, нужна кастомная логика редиректа
а мне пришло в голову что это своеобразный почерк первого верстальщика, он так сказать, на этом сайте оставил свою визитку, во время разработки, никнейм или типо того)) Ну а вдруг)
Для карты товара гораздо больше подходит семантический тэг , чем li. Но он требует обязательного наличия заголовка внутри, по спецификации. А заголовок нельзя вкладывать в ссылку (и ссылку в заголовок тоже), на что опять же есть причины в спецификации заголовков. В общем, там целая история и если делать строго по спецификации, то магазин будет ужасен, с точки зрения UX.
@@РоманСердюк-ч8э Видел и не раз, как в карточках заголовки h2 и внутри ссылка... и это топовые сайты в выдаче гугл.... дак почему нельзя, но так делают, статтей на эту тему не находил....если у Вас есть ссылка, хотел бы почитать...буду благодарен!!!
это не осьминог, а скорее всего имеется ввиду сеть, интернет, версия для ПК. я вообще ноль в инглыше, относительный ноль. тут скорее всего написано, что это версия для ПК. octopus - верстка, сетка тегов, ветвление как клешни осьминога. ну а РС, версия для ПК. octopus-pc-block - блок для ПК версии. у них как я понял, это скорее всего как ассоциация идет. осьминог имеет много щупалец. если взглянуть на верстку блока, то его части как щупальцы осьминога. вот откуда и название. мое предположение, в инглыше я слабоват.
Вся суть в том что нам кажется что программирование главное в продукте а на самом деле его значимость стоит уже далеко не на первом месте! Приоритет это бизнес а верстка только инструмент.Это самая богатая компания в мире) О чем речь?) Дивы в Спанах чисто по приколу )
Но это не мешает им быть популярными, работают и работают, обычные пользователи не будут лезть в код, чтобы посмотреть красиво это или нет, а только тогда покупать. Они просто заходят, и покупают, не думают про это), а смысл что-то менять, если и так всё работает, и приносит доход
Очевидно что Амазон писали намного раньше розетки , а как известно старый код ни кто не трогает если он нормально работает , поэтому там столько странных на сегодняшней день решений. При этом я не согласен, что можно писать так же как Амазон, современный программист должен стремится писать современно и только если он попал в легаси проект то писать как в легаси
Амазаон поддерживается в internet Explorer 8. Если отправлять всех на Амазон посмотреть и что-то доказать. Можно и на... с работы улететь. Так что это очень идея для видео, стоило остановится на Розетке.
не совсем понял ваш комментарий, но не вижу почему бы и не смотреть на amazon. Магазин успешный, значить верстка имеет право быть. Не стоит ставить код как основу всего. Код только одно из звеньев, инструмент один из многих для достижения цели.
@@itgid Написано это много лет назад, возможно еще когда некоторые решения вроде JS внутри HTML считались в порядке вещей. И если все работает, то зачем трогать? Но вот div'ы внутри span мне непонятны.
Dobavlu ot sebia, dumau chto eto vse perejitki proshlogo, a perepisivat nikto ne daet(na eto nujno dengi i cheloveko-resursi). U nachalstva takoi podxod, rabotaet i prinosit doxod. Ne trogai i muchaisa v starom kode. Perestal rabotat perepisivaem na sovremeni k tomu momentu podxod. Sam ne raz obrashalsa k nachalstvu s prosboi perepisat desctop app kotoromu 18 let, Skazali esli est jelanie v nerabochee vremia a tak na eto net deneg. Anologichni proekt perepisali t.k. ne tanul s tem kolichestvom dannix chto na segodnia nujno.
Обучалки это хорошо, но вот подобный контент бесценен. Действительно, новичку очень полезно увидеть, как проект выглядит в реальности
поддерживаю !
Один такой урок научил больше чем 100 других на ютуб
Давайте тоже самое но не по верстке а по скриптам JS. Так скажем покритикуем говнокоды, что бы будущие джуны знали как делать НЕ НАДО.
"Давайте сравним унитазы. А что, это тоже товар" ))
Лайк не глядя )
очень интересно и познавательно. Александр, продолжай в том же духе! не пропускаю ни одно твое видео!
Александр , шикарный контент. Спасибо . Откуда сил столько и времени на обучение , так ещё и видео новые постоянные. Шикарно👍
да все просто. Работаю много. Если в течении месяца я не смотрю на свой код и мне не становится противно, значить я не розвивался.
@@itgid 🤣
Я пока так и не стал програмистом но Ваши ролики смотрю время от времени с большим удовольствием. Так держать!
спасибо!
Молодцы, ещё бы такие обзоры ! Благодарю за работу
Да такого типа видео обзоры очень нужны, с вашими комментариями. Продолжайте пожалуйста
Очень редко встречал перевод octopus как "воронка". Используется в горнодобывающей промышленности и т.д. В любом случае, действительно странно видеть подобные решение на сайте Амазон)
спасибо. Никогда не встречал такого. Я уже думал над мистикой - осьминог, спрут, типа захватил весь рынок, опутал. Но это детские сказки....
Спасибо!
Очень интересно смотреть и слушать сравнение по структуре верстки сайтов, спасибо за вашу информацию. И хотелось бы увидеть сравнение кода разных виджетов, если это возможно, был бы благодарен.
каких именно?
@@itgid сравнение кода виджетов написанных на CSS или Java Script, вообще которые представит возможность, к примеру есть многообразие реализации адаптивного меню и некоторые бургер делают с использованием input-checkbox, а кто с помощью animation CSS или добавление товара в корзину на Java Script, на codepen видел примеры, но код некоторых непонятен возможно из-за использования препроцесоров Java Script, даже просто интересно видеть и слышать сравнение одной и той же реализации разными способами. Спасибо за информацию! :)
Да, Александр! Это бесценный видео-разбор! Ждём продолжения
P.S. А будет ли такой разбор сайтов, сделанных на WordPress?
Нет смысла. Различные шаблоны WP используют и разные билдеры (в WP это визуальные конструкторы верстки страницы) которые в свою очередь используют свои виджеты + виджеты написанные "допиливателем" шаблона когда в нем нужен блок не предусмотренный шаблоном. Там будет адовая помойка вложений.
то что нужно лайк
У Амазона скорее всего этот беспредел получился из за Legacy кода. Страшно преедставить как там на бэке.
увы этим страдает развивающийся и развившийся бизнес. А вот рефакторинг и поддержка кода - это уже боль программистов. И переписать махом уже нельзя.
Хотя у розетки переписать в какой-то момент вышло. Вовремя уловили.
Видео классное. Все супер. Что на счёт интернет магазинов я хз. Ну типа заказчику важно чтобы были клиенты и товар покупали, а уже как сделан сайт, какой там код его не сильно парит
из ряда, работает - не трогай )))
Нож в печень, жиквери вечен!)
Вы говорили, что код можно попросит в комментах))
Так вот, пожалуйста)
Подергать хочется, посмотреть как он будет от чего меняться
пишите в телеграмм сброшу.
почаще такие сравнения делайте с таким же обьяснением
Вопрос по БЭМ, хотелось бы узнать ваше мнение по поводу данной модели с практической точки зрения, а также сравние с другими моделями верстки
Я так понял вопрос адресован к Александру Лущенку. Тем не менее я верстаю с помощью БЭМа (не идеально, но как на примере товара от розетки), на практике очень хороший подход, других подходов не знаю :)
@@liubomyr-peteliuk и плодишь много папок с блоками ?
@@johnsnow6041 не понял вопрос.
@@liubomyr-peteliuk у тебя получается 1 css файл или много мелких?
@@johnsnow6041 делаю 1
почему то вспомнил Дзаняна из кремниевой долины. Он там октопус приложение делал с рецептами из осьминога)
Только посмотрел эту серию и увидел твой коммент🤣
ну хз что тут сказать. наверное лучше стоило бы начать, сколько лет сайту амазон, а сколько розетке. амазон, делают тысячи человек, розетку скорее всего верстали пару человек. в амазон все больше сделано на генерацию страниц. в розетка все заведомом сверстано. мне кажется, если взять исходники амазона, с которыми работают их кодеры, они могут оказаться на много проще чем у розетки.Александр, вы программист с большим опытом. вы должны понимать, что крупны проект не верстают два человека! там иногда бывает так, что один специалист, все что делает, это верстает три строки как конвейер! большинство, даже не понимают для чего они это верстают.)) а вот такое как розетка, там может и один верстать целые огромные куски блоков или страницы. тоже и с jquery, там горы древнего кода, который скорее всего уже и не работает, но в верстке присутствует. jquery много где еще используют, и не потому что это супер круто. большинство на JS ничерта не умеет писать! они азы выучат, и дальше готовые решения прут. потом таких кодеров выкидывают на улицу, ибо они бесполезные, набирают новых таких-же чтоб меньше платить. мне часто рассказывали, как такие гиганты как ЕПАМ, выкидывает толпы людей на улицу и набирают новых. один знакомый, потом объяснил почему так. причину я выше написал.))) оттуда и все остальное идет.)) розетку, просто делали видно не большая студия, в человек 50-100. а амазон пилят тысячи людей! вот и разница.))) возможно я и не прав, и просто у них так принято. ))))
про выброшенных, я не понимал, почему они не находят потом работу, в ЕПАМ же работали! потом столкнулся, что не берут тудаа опытных иногда, а берут вообще дубов... ну и потом мне рассказали причины. ну а те потом на заводы возвращаются, ибо реально ни кому не нужен специалист, который тупо готовое решение только умеет воткнуть... поэтому я сразу отказался от библиотек, и стал делать все сам, для опыта. да, получал из-за этого мало, но зато опыт получил хороший!)))
Ага, но в итоге розетку, если верстали несколько человек, у них вышло интереснее чем в амазоне, хотя там намного больше человек было, но это уже на вкус
Алекс, спасибо за видео! Хотел бы помочь, вместо ножницы можете использовать lightshot.
PrtSc и делаете скриншот, рисовать можно и квадратом выделить. Просто рекомендация!
спасибо! Попробую!
А еще лучше как по мне - Screenpic, там можно и блюрить.
Когда я вижу в span-не div, меня тоже вводит в ступор!) Ну видимо не сильно кто-то заморачиваеся!
я тоже. И читабельность падает.
ждем на канале видео про BEM )
нет. У меня к нему не однозначное отношение. Да и сложно работать с технологией, когда ее каждый реализует со своим уклоном и считает подход самым верным.
у себя на работе делал огромный интернет магазин и там клиент хотел что бы по клику на любое место карточки товара случался редирект на страницу товара. пришлось оборачивать в компонент ссылки
п.с. компонент т.к. у нас next.js и всякие хитрости с ssr, нужна кастомная логика редиректа
понимаю вашу боль, у меня раз клиент хотел изменение истории переходов по определенным страницам. Это была жесть.
Амазон это жесть.... Удивили!
а мне пришло в голову что это своеобразный почерк первого верстальщика, он так сказать, на этом сайте оставил свою визитку, во время разработки, никнейм или типо того)) Ну а вдруг)
Есть ли какие-то преимущества в верстке сетки товаров списком вместо просто дивов?
ну в принципе идеология ul li как раз вписывается в это - показывает сущности одной общности. Навигация например, список товаров...
Для карты товара гораздо больше подходит семантический тэг , чем li. Но он требует обязательного наличия заголовка внутри, по спецификации. А заголовок нельзя вкладывать в ссылку (и ссылку в заголовок тоже), на что опять же есть причины в спецификации заголовков. В общем, там целая история и если делать строго по спецификации, то магазин будет ужасен, с точки зрения UX.
@@РоманСердюк-ч8э Видел и не раз, как в карточках заголовки h2 и внутри ссылка... и это топовые сайты в выдаче гугл.... дак почему нельзя, но так делают, статтей на эту тему не находил....если у Вас есть ссылка, хотел бы почитать...буду благодарен!!!
@@mark_l1451 у меня в h1 заголовок товара :D
это не осьминог, а скорее всего имеется ввиду сеть, интернет, версия для ПК. я вообще ноль в инглыше, относительный ноль. тут скорее всего написано, что это версия для ПК. octopus - верстка, сетка тегов, ветвление как клешни осьминога. ну а РС, версия для ПК. octopus-pc-block - блок для ПК версии. у них как я понял, это скорее всего как ассоциация идет. осьминог имеет много щупалец. если взглянуть на верстку блока, то его части как щупальцы осьминога. вот откуда и название.
мое предположение, в инглыше я слабоват.
Подскажите с каких курсов лучше начать если ты 0 каков путь с и до ?
Пишите в чат на сайте разберёмся.
С курсов по английскому
Можно ещё Технодом и Сулпак ещё разобрать?)
Что это?
@@nikitak7846 NN
Вся суть в том что нам кажется что программирование главное в продукте а на самом деле его значимость стоит уже далеко не на первом месте! Приоритет это бизнес а верстка только инструмент.Это самая богатая компания в мире) О чем речь?) Дивы в Спанах чисто по приколу )
Это жесть конечно, styled-components намного удобнее)
"Советы в интернете настолько ужасны, что хочется убивать. Итак, поехали"
А нам выносят мозг на счёт семантической верстки
Ну верно, чтобы не было таких приколов, а ты думал это просто так делается?
Я не ожидала, что у действующих интернет-магазинов такие ужасные коды.
Но это не мешает им быть популярными, работают и работают, обычные пользователи не будут лезть в код, чтобы посмотреть красиво это или нет, а только тогда покупать. Они просто заходят, и покупают, не думают про это), а смысл что-то менять, если и так всё работает, и приносит доход
Очевидно что Амазон писали намного раньше розетки , а как известно старый код ни кто не трогает если он нормально работает , поэтому там столько странных на сегодняшней день решений. При этом я не согласен, что можно писать так же как Амазон, современный программист должен стремится писать современно и только если он попал в легаси проект то писать как в легаси
увы, легаси действительно боль.
блочные элементы в строчные помещать запрещено с точки зрения семантики кода
да, а они помещают.
Octopus ... LOL :D
А почему?
Загадка с осминогами не раскрыта
Этот октопус заговаривает пользователей больше денег оставить на сайте. В 8 раз больше, Карл!
Учим HTML, CSS, JS и Украинский с Алексеем (или Александром...) Лущенко )))
Александром. :)
Амазаон поддерживается в internet Explorer 8. Если отправлять всех на Амазон посмотреть и что-то доказать. Можно и на... с работы улететь. Так что это очень идея для видео, стоило остановится на Розетке.
не совсем понял ваш комментарий, но не вижу почему бы и не смотреть на amazon. Магазин успешный, значить верстка имеет право быть. Не стоит ставить код как основу всего. Код только одно из звеньев, инструмент один из многих для достижения цели.
@@itgid Написано это много лет назад, возможно еще когда некоторые решения вроде JS внутри HTML считались в порядке вещей. И если все работает, то зачем трогать? Но вот div'ы внутри span мне непонятны.
@@Bxz56Rvp8 так я об этом и говорю. А видеть - я же и говорю о том, что разные подходы. А про то что в компании говорить - ну сарказм
Dobavlu ot sebia, dumau chto eto vse perejitki proshlogo, a perepisivat nikto ne daet(na eto nujno dengi i cheloveko-resursi). U nachalstva takoi podxod, rabotaet i prinosit doxod. Ne trogai i muchaisa v starom kode. Perestal rabotat perepisivaem na sovremeni k tomu momentu podxod.
Sam ne raz obrashalsa k nachalstvu s prosboi perepisat desctop app kotoromu 18 let,
Skazali esli est jelanie v nerabochee vremia a tak na eto net deneg. Anologichni proekt perepisali t.k. ne tanul s tem kolichestvom dannix chto na segodnia nujno.
Причем тут ие8 и говнокод в разметке?Он настолько ужасный что может посоревноватся с бутстрапом и переписывать ЭТО не возьмется не кто вообще.
+
20:53 тут меня порвало
+