СергейРусков

13 минуты назад, klierik сказал:

Не понимаю в чем проблема отобразить точки полочками симулирую скроллбар? А профит использования одного плагина в том что надо подключать меньше ресурсов.

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

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

Правильно ли я понимаю, что оба слайдера сделаны с использованием javascript и только методами css их не реализовать?

Ой, чего только нельзя сделать на css, вот пример http://codepen.io/YozhEzhi/pen/fvzlp, я думаю, что глубоко теоретически это возможно, но поддержка браузеров будет плачевна и надо понимать, что это решения из разряда: "Смотрите как я умею", в жизни так не делают.

 

это же и есть flexbox модель

она самая. А во флексбоксе, как известно, элементы местами переставляются очень легко.

Так что вот вам решение на бутстрапе простое и красивое.

 

Вы слишком буквально меня поняли У меня тоже решение на флексбоксе, тут разговор шел, что можно решить все float'aми Но спасибо, это интересно.

блоки идут у вас один за другим в контейнере.На мобайлах хайдите лишние просто, и все.

А как это поможет с перестановкой блоков местами? 

В бутстрапе, говорите, грид на флоатах? Это зависит только от вашего желания. Смотрим здесь кое-что интересное: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_grid.scss#L47, https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss%23L27, https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss%23L48

 

И если этим правильно воспользоваться, то порядком крутить уже можно как угодно

Так это же и есть flexbox модель.

Можно флоатами. Посмотреть тот же бутстрап, там грид весь на флоатах был реализован.

Я уж не знаю как еще от вас какой-то конкретики добиться, о чем конкретно вы тут говорите? Как это может помочь в реализации конкретно этого грида?

Что в вашем понимании является хаотично?

Ну например блок  index-content__27 который на мобильной версии становится после index-content__32 в мобильной версии. Таких примеров вагон, поресайзите и посмотрите если есть желание. В моем понимание хаотично - это беспорядочно, то есть у передвижения блоком нет закономерности (в техническом смысли, продукт менеджеры в этом конечно видят логику).

А где у вас элементы-то на сайте перемещаются из строки в строку? По-моему у вас тупо лишние хайдятся, о чем я уже говорил. При чем все поголовно, если я ничего не пропустил. 

Вы потеряли контекст, я говорил о вашем совете про использование бутстрапа, и спрашивал как конкретно вы видите его реализацию.

кстати, а зачем на каждую строку row? Можно же один на всё. А внутри уже колдовать всякими offset-pull-push

Я сейчас рискну нести полную чушь, так как давно не имел практики с бутсрапом. Вроде как col-**-offset это тупо margin-left, а col-**-push это смещение влево с помощью position:relative и left, то есть если в случае с margin-left блок еще перескакивать на следующую строку в одном контейнере, то в случае с position: relative и left блок вывалится за пределы контейнера, поэтому изменения возможны только в рамках одной строки. Надеюсь я правильно разобрался.

 

 

3. SMACCS - давным давно пробовал, там вроде про размещение файлов, не?

Эм, нет. Там скорее про разделение css на несколько основных независимых частей, типа Base, Layout, Modules, State, Theme. Интересная штука, на мой взгляд более логичная, нежели БЭМ. Ознакомьтесь, если интересно. Ну, структура накладывает отпечаток на файловую структуру - это, конечно, тоже

 

 

 

3. Тут важна конкретика, как именно вы хотите добиться такого же результата? float: right, left? Это невозможно, блоки перемещаются абсолютно хаотично. Position: absolute - дичь. JS - это вариант, но более медленный и труднореализуемый. Может я что-то упускаю?

По поводу этого - да. Можно флоатами. Посмотреть тот же бутстрап, там грид весь на флоатах был реализован. Также есть замечательное значение свойства display - inline-block. Мне больше он нравится тем, что элементы не выпадают из потока. 

 

 

 

7. Не могу найти статью, частично про это говорится тут http://stackoverflow...nsive-slideshow. Если вкратце, то при position: absolute элемент выпадает из общего потока, и браузеру проще (меньше ресурсов потребляется) перемещать слайды, так как они не зависят от других элементов.

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

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

В-третьих, вы задаете высоту жестко слайдеру. А если высота картинки изменится? Если контента больше забьется? В общем, задавать высоту в css - это последнее, что стоит делать. Впрочем, как и использовать абсолют.

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

 

 

 

На скорость работы кода БЭМ не сказывается, вся фишка БЕМа в его поддержке и реиспользовании кода, это будет большой проект, поэтому смысл есть.

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

 

 

 

4. http://ruhighload.co...nernoy-reklamy/, если вкратце блоки с display: none загружаются после тех которые видны, так что в принципе страница начинает грузиться быстрее.

Тут вы меня не поняли, наверное. Страница, как ни крути, грузится быстрее не станет https://toster.ru/q/98637. Отрисовываться - да. Но грузится - нет. Все равно вы грузите те же байты текста и ходите запросами на сервер за картинками, когда встречается урл.

 

 

Не люблю ввязываться в перепалки, но интересно докопаться до истины.

По мелочи, коротко:

По поводу загрузки, я понял правильно, и попытался показать взгляд на него с другой стороны.

Position: absolute - замарачиваться стоит, у меня в хроме на работе тормозит (слабоват компьютер). Все остальные замечания по этому вопросу немного не по теме.

И главное:

Я неплохо знаю бутстрап, сверстал пару сайтов на нем давным давно. Как именно перебрасывать элементы из одного row в другой (я еще раз повторю перемещения происходят хаотично)? Лично я знаю 1 способ, прячешь элемент в одном row на определенных разрешениях и показываешь их на другом, это не допустимо, даже лень перечислять причины(seo, нагрузка на пользователя и тд). Вероятно я что-то не знаю о бутстрап? Буду благодарен если объясните. Скажу, что этот вопрос у нас в компании достаточен болезнен, большинство проектов пришло к JS, я решил попробовать что-то новое.

Вас интересует именно вёрстка или общее впечатление, подача?

Именно верстка конечно, впечатления это к дизайнерам

Добавлю ложку дегтя, с Вашего позволения, которая, надеюсь, поможет Вам в проффессиональном росте

1. Возможно, ИЕ у меня неправильный, конечно, какой-то, но вот такая ситуация: http://joxi.ru/823pxaOF6agqdA. При чем это 11й.

2. Плюс, добавил бы немного интерактива по ховеру, это хороший тон в верстке, даже если не отображено в дизайне: http://joxi.ru/1A5px3bFKzpyX2. А так не понятно, кликабельно оно, или просто для прикола.

3. Не очень понимаю суть флексбокса тут. Зачем делать флекс, и получать в ие9 вот такую картину http://joxi.ru/1A5px3bFKzpyX2(пускай его и нет в требованиях), если можно сделать все без него, достигнув такого же результата, но при этом все будет более отказоустойчивым? Так и стили попроще станут, и действительно не надо будет писать такие классы для каждого блока индивидуальные, типа index_content--1 .... index_content--over-dofiga. 

4. Также я не приветствую практику hide--phone классов. Хотя, тут скорее к дизайнеру вашему претензия. Html грузится все равно на мобайлах и от того, что вы его просто захайдите, быстрее страница грузится не станет. Ладно еще, если это какие-то декоративные блоки, или якобы отрывок с другой страницы, куда можно перейти и увидеть полную картину предположительно, как тут http://joxi.ru/xAe0DnGfYbLKP2. Но прятать контентые блоки не есть хорошо, я думаю. Получается, вы обделяете своих мобильных пользователей при той же скорости загрузки.

5. По поводу хорошо БЭМ или плохо. Думаю, если вы 100% понимаете зачем он Вам тут, и чем он вам поможет, то хорошо. Если нет, думаю, лучше не использовать. Иначе получите раздутый, громоздкий, медлительный код, который плохо поддерживается.

6. По поводу импортов в цсс. Тут писали. Не знаю, где они были, не нашел, возможно, автор уже исправил. Но если использовать лесс, то общепринятой практикой является компиляция всех лесс в 1 цсс. Импорты соответственно должны прописываться в лесс, а на выходе будет один монолитный цсс и никаких импортов (это уже скорее просто совет).

7. Еще не понял сути вот этого: http://joxi.ru/n2Y5aQ8Ij7wK12. Зачем абсолют-то тут? По карусели: owl не плох, но советую попробовать также slick.

Думаю, хватит о плохом, поговорим о хорошем

1. Порадовали приятные анимации.

2. Использование и внедрение новых технологий типа флекс похвально. Однако, ИМХО, лучше делать это точечно, а не строить на нем лейаут сайта.

3. Также похвально пробовать методологии типа БЭМ. Но советую посмотреть и на другие, типа SMACSS.

Наверное, достаточно

Спасибо за потраченное время!

1. Продолб, спасибо поправил.

2. Ну на кликабельность намекает пальчик, а остальное еще не уточнил дизайнер, я думаю не надо бежать впереди паровоза.

3. Тут важна конкретика, как именно вы хотите добиться такого же результата? float: right, left? Это невозможно, блоки перемещаются абсолютно хаотично. Position: absolute - дичь. JS - это вариант, но более медленный и труднореализуемый. Может я что-то упускаю?

4. http://ruhighload.com/index.php/2009/12/16/optimizaciya-banernoy-reklamy/, если вкратце блоки с display: none загружаются после тех которые видны, так что в принципе страница начинает грузиться быстрее.

5. На скорость работы кода БЭМ не сказывается, вся фишка БЕМа в его поддержке и реиспользовании кода, это будет большой проект, поэтому смысл есть.

6. О импортах разговор шел в разрезе fonts, тут делать так или иначе большой разницы нет, почему - я написал несколькими сообщениями выше.

7. Не могу найти статью, частично про это говорится тут http://stackoverflow.com/questions/11367709/css3-slider-absolute-positioning-inside-relative-div-for-responsive-slideshow. Если вкратце, то при position: absolute элемент выпадает из общего потока, и браузеру проще (меньше ресурсов потребляется) перемещать слайды, так как они не зависят от других элементов.

3. SMACCS - давным давно пробовал, там вроде про размещение файлов, не?

Хорошо конечно получилось!

Только один вопрос возник - где искать смысл написания <header><div class="header"></div></header>?

Ошибся при рефакторинге, спасибо.

VIVA, on 12 Jan 2016 - 6:34 PM, said:

Симпачитный сайт, но есть несколько реальных проблем:

1) При уменьшении масштаба задний фон (монетки) уплывает (скрин http://prntscr.com/9p716t)

2) Зашел через Safari 5.1 (в IE10 та же проблема) сайт вообще ломается, а на середине сайта перестает срабатывать тач-скрин.

2) Поддержка с 11IE, в сафари не работает потому что они поддерживают flexbox с версии 6.1

1000 час. Хотя может и делевле, надо глянуть насколько рутинна или наоборот сложна задача.

Это в корне неправильный подход. Вы же попытались использовать тот же БЭМ, надо обо всем думать заранее.

Давай-то конкретнее, я хоть и не до конца понял ваш план со строками, но я на 100% уверен, что я данными перекидыванием блоков(из середины в центр и тд), это не возможно сделать универсально, путем задания единообразных классов, готов даже спорить на деньги. По поводу "когда будет тогда и разберемся" имеется ввиду, что я не стал реагировать на утрированный пример, так как я отлично знаю, что так никогда не будет, это раз, два я знаю, что делать когда будет больше блоков(об этом я написал, float, margin и тд).

так как много лишних стилей. Очень много.

Да откуда их много то, очень много? margin-top? order? 

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

На счет margin-top, сейчас через запятую (extend) укажу блоки в которых оно повторяется, спасибо abrahadabra за наводку.

 

 

 

Но в таком случае не понимаю, почему вы его не использовали. В данном случае весьма уместен.

 

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

в-третьих, чем sass лучше less? Правильно, @extend

http://lesscss.org/features/#extend-feature вроде в лесс тоже есть.

ID для js не js не важно

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

Что если на главной будет не 41 блоков как сейчас а 141 или 1141 (например реализован будет добавление по прокрутке). Для всех 1141 писать margin-top: 1.25rem?

Когда будет тогда и разберемся, скорее всего вы говорите о том, что будет после того как нажать кнопку "показать еще",  там будет совсем другая история, там можно сделать один общий класс для всех, написать что-то типо float: left; margin столько то, и забить.

Дубликатов тех же margin и order дохрена получается же

Дубликат order? Это где? Если такое есть то укажите, это ошибка, каждый ордер на своем размере уникален, в этом и фишка.

так как иногда нужно чтобы пост имел свое уникальное id.

Ээ когда? Пока с этим не столкнулся, и не представляю зачем. Потом уже решу в зависимости от задачи.

В итоге я так понимаю, что не нравится margin-top который много раз повторяется? Я думал об этом, можно было бы решить проблему задав высоту блоку и дальше через flexbox, но подумал, что получится слишком захардкожено для PHP программиста. А если тупо сделать какой-то отдельный класс для margin-top, то будет тот же повтор, но в html.

И опять же если я вас правильно понял, вы предлагаете каскадность, что идет против методологии БЭМ, а если по сути, то потом переверстывать будет сложнее...

id принято использовать для js, во всяком случае у нас в фирме.

Что мы будем стилизовать специально для index-main_36 ?

Ну его позицию... наверное, тут какой-то подвох...

Про остальное не понял, но вроде там, что то о том чтобы вкладывать блоки в row(из бутстрапа). Так не получится, потому что многие из блоков переезжают по своему контейнеру куда ни попадя, один из многих примером, index-main__23 стоит по середине в desctop версии, в мобильной он оказывается под блоками index-main__28, index-main__25 ну и тд. Будь все это внутри каких-то строк(а 23 и 28 не запихнуть в 1 строку если учесть, что вроде как вы написали, что строка может быть на 4 элемента), то придется двигать еще и сами строки... сложно это все.

 

Или я в чем-то не прав?

Подключить через link. То, что запрос пойдет на гугловский сервер это не значит ничего. Например, зачем jquery подключать с cdn? Не ради того, что cdn будет работать быстрее чем Ваш сервер, а ради того, что пользователь который зашел на Ваш сайт наверняка уже имеет в кэше этот же jquery и не надо его заново качать.

 

Этот довод я видел часто, и ни разу не видел статистики слова "наверняка", а уже тем более для конкретного ресурса. Но окей, я обсужу это со своими. Спасибо.

Кстати, со шрифтами все будет еще грустнее, если jquery используется повсеместно, то данные шрифты, имеющую огромную специфичность (оцените get запрос, family=PT+Serif:400,400italic,700,700italic&subset=latin,cyrillic ) встретить второй такой же... ну короче сложно будет

Единственный довод за, для себя который я нашел, а почему бы и нет ?

Ругаю:

1. @import в css, одна из причин почему сайт грузиться долго.

2. html lang="en" но на деле все на русском.

3. Не знаю что скажут другие, но лично мне не нравятся вот такие классы

 

 

4. Валидатор ругает много

1. Да вы правы, но какая альтернатива? Как еще использовать гугл шрифты? Сам гугл предлагает 3 варианта, так как я использую, через link <link href='https://fonts.googleapis.com/css?family=Oswald'rel='stylesheet' type='text/css'> и js. Через font-face? А это законно? Но в целом ничего не изменится, все равно будет запрос на сервер (уже не на гугловский), вроде как бешеной прибавки скорости быть не должно. Или я в чем-то не прав?

2. Вот уж засада пал жертвой emmeta, стыд и позор

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

4. Ну что тут сказать, исправился

Так там вроде и в 3 boostrap был customizer, или я чего-то не понял?

Ну вот только что замерил, с 3g (good 3g в chrome mobile mode)  сайт грузится 6 секунд, в более менее вменяемом состоянии он через 3 секунды, я исследования на этот счет ни читал, но я готов ждать 6 секунд с мобилы.

Про более тяжелые случаи, 1 палка и тд, это уже дискуссионный вопрос.

А по поводу reset, мне просто удобнее без отступов у элементов, это же исключительно технологическая вещь и вкусовщина, ничего страшного в его использовании/не использовании вроде нет.

Спасибо, я очень старался normalize.css и reset.css использованы частично, я забрал из обоих то что мне нужно было, они в целом то про разное, normalize.css приводит очень много фишек к стандарту, а reset только сбрасывает margin, padding у элементов (и что-то там еще по мелочи, но не суть).

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

Обойдемся без лирики Покритикуйте или похвалите (а что, приятно) следующую работу

http://sergeyruskov.github.io/

Замечания:

Необходимая поддержка браузеров: IE 11 (hallelujah!)

Меню под бургером еще не нарисована

SEO не моя проблема, хотя если что системное заметите, будет интересно.

Это не продакшен версия, поэтому ни о каких минификациях речь пока не идет.

Не понимаю я этот бутстрап. Вот почему вы им пользуетесь? Быстро? Да. Но это для случая, когда не важно что там и как получится. А для реального проекта? Я вот когда каждую строчку руками написал мне как-то легче. Я знаю как там все устроено, имею свою коллекцию переиспользуемых классов. Зачем мне переписывать бутстраповские классы, если я напишу свои? Зачем мне тащить бутстраповский css который я все равно буду переписывать?

Так в чем соль этого бутстрапа?

Я думаю по этому вопросу и на этом форуме и вообще есть куча инфы Из того, что я прочитал, все делятся на 2 лагеря, первые - поддерживают Вашу позицию, вторые говорят, что им так быстрее, что они привыкли, что отцы уже все продумали, что это унификация и легкость поддержки при передачи проекта в другие руки и тд. Если Вы спрашиваете меня, это строчка в резюме которая must have

Угу уже разобрался, css почему такой большой получился, не удалось никакие отключить модули бутстраповские ?

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

Есть конечно вариант вылавливать через их сборщик но по мне как то муторно.

Короче мне тоже видимо пора сделать, вопрос только где время взять ?

Заходите в папку src/sass/bootstrap там открываете _index.scss, отключаете то, что Вам не надо, и удаляете сами файлы из папки. Я уже не помню точно, но кажется я достаточно много от туда поудалял.

 

 

Глянул, variables не переписали просто.

Я извиняюсь за резкость, но Вы меня, что троллите? У меня есть файл который называется variables (и да этот не тот variables, который идет с Bootstrap). Пожалуйста, будьте внимательнее.

 

Еле нашел, так в чем тогда проблема то ? Мне вот интересно.

 

Bootstrap заточен под mobile first, я начал наоборот, а это как кота против шерсти гладить.

Глянул, variables не переписали просто.

Я извиняюсь за резкость, но Вы меня, что троллите? У меня есть файл который называется variables (и да этот не тот variables, который идет с Bootstrap). Пожалуйста, будьте внимательнее.

По ТЗ надо было переписать стили бутстрапа а не перебить Important, Кстати ничего сложного я минут за 10 разобрался как бутстрап пересобрать.

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

 

Спасибо за отзыв, но он не несет почти никакой пользы, так как очень поверхностен, по пунктам.

Ну, поехали.

Спасибо, все четко и главное "не на отвали", чтож буду учиться, кое с чем не согласен, но сначала со всем подетальней разберусь - отпишусь.

Немножно оффтопа, я настроил gulp-webserver, так как Вы меня тут разнесли в пух и прах пока не планировал ничего заливать на GitHub, но если Вам интересно, могу залить, просто, с настроенным сервером.