Работа получить работу

[seemax]

Прошу придирчиво посмотреть мою работу http://magneto.skepton.ru/

От её качества зависит получение постоянной работы. IE11 озадачил сильно, впечатление отключеного JS. Т есть, пропала респонсив галлерея, ссылка "Share it" на большом экране не активна. Но, если бы JS был отключен, слайд-шоу для экрана телефона тоже бы не работало...

[Tilonorrinco]

seemax, у вас очень необычная реализация адаптивности.

Дублирование элементов и их отображение/сокрытие на разных ширинах (картинки в галерее, заголовок в первом блоке дублируется 2 раза!) -- это костыль. Если есть возможность так не делать -- лучше так не делать. Обычно без проблем удается перестроить макет через свойства order, либо через абсолютное позиционирование, либо через js (от лучшего к худшему). Макет должен складываться и раскладываться, как оригами.

Ваш макет довольно непростой для верстки, т.к. сетка перестраивается слишком сильно, дочерние элементы выходят за пределы родителя и т.п. Но даже в таком макете часть большую часть задач можно решить без дублирования, через свойства order и position:absolute. В идеале, единственный элемент, который в главном блоке может скрываться -- это ссылка на социальные иконки (скрывается в мобильной и планшетной версии).

Вот пример верстки сетки первого блока (большой карточки с товаром):

http://jsbin.com/gojeyex/edit?css,output

Про остальное напишу завтра.

 

 

Edited October 8, 2017 by Tilonorrinco

[seemax]

Спасибо, у меня было ощущение, что от дублирования и скрытия элементов на разных экранах надо уходить, но я не разработал/нашёл простой этому алгоритм. 

Пожалуйста, обратите внимание/подскажите, что происодит с "Share it" и респонсив картинками в IE?

Как правильно обозначить id формы конкретного юнита товара? Ведь их может быть тысячи артикулов на ресурсе. Нужно ли ввести Item #: 701642853695 и .price-holder в <form>?

Задачу мне, вообще то, ставили от IE8, без jQuery в анимациях, без CSS гридов. Могу отказаться от Flex, Susy, Bootstrap. Остальное, тени, псевдоэлементы нереально. caniuse.com в упор не видит IE старше 11 версии! Корректна ли такая задача на исходе  2017, по вашему мнению?

[Tilonorrinco]

seemax,

1) в HTML5 в тэгах link, script, атрибут type необязателен

2) Дублируются заголовки в главной карточке товара

3) <span class="red"> -- плохое название класса, т.к. описывает внешний вид, а не сущность. Лучше <span class="sale"> или что-то в этом духе

4) нет необходимости прописывать элементу button атрибут form, т.к. эта кнопка и так уже располагается внутри формы.

5) я бы написал текст в ссылках на социальных кнопках (потом можно скрыть Indent'ом, или просто прописав font-size) 

6) Дублируются изображения в галерее

7) Зачем нужен пустой footer в разметке? 

По-мелочи:

1) тяжело ориентироваться по стилям:

  - используется несколько нотаций: snake case (.to_list), kebab case (.l-out). Нужно придерживаться одной нотации

  - стили не информативны (можно ли сказать, не глядя в разметку, за что отвечает класс .like?)

  - не всегда сущности делятся корректно: тот же самый заголовок с классом like относится к галерее (т.к. это заголовок галереи). Однако в разметке галерея и ее заголовок -- это две равноправных сущности.

Обратите внимание на БЭМ, сразу решите все эти проблемы.

2) в стилях элемент классу лучше не прописывать тэг (вместо ul.social лучше просто .social)

 

Цитата

Как правильно обозначить id формы конкретного юнита товара? Ведь их может быть тысячи артикулов на ресурсе. Нужно ли ввести Item #: 701642853695 и .price-holder в <form>?

То, что вы верстаете, будет использовано как шаблон, в который добавят отправленные сервером данные. А уж как они будут добавляться и куда -- решает не верстальщик. В любом случае, переписать разметку под конкретное решение не так сложно. Мне кажется так. Аналогичным образом, прописывать артикул товара в id формы -- лишнее.

В форму я бы добавил только  инпуты с выбором размера и кнопку. 

Цитата

Задачу мне, вообще то, ставили от IE8, без jQuery в анимациях, без CSS гридов. Могу отказаться от Flex, Susy, Bootstrap. Остальное, тени, псевдоэлементы нереально. caniuse.com в упор не видит IE старше 11 версии! Корректна ли такая задача на исходе  2017, по вашему мнению?

Если нужно поддерживать старые браузеры, то либо делается graceful-degradation (т.е. тени, например, просто не отображаются), либо эффекты эмулируются костыльным образом (типа вставки картинок с тенями вместо css-теней).

Верстать под IE8 (Windows XP) это перебор, имхо, но заказчику виднее. Я никогда под него не верстал.

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

Edited October 11, 2017 by Tilonorrinco

[seemax]

Спасибо большое, очень развёрнуто.

IE11 имеет проблемы с JS под Win7, это обсуждается в сети. Может кому пригодится избежать моих волнений...

[andrey7287]

В 09.10.2017 в 09:25, seemax сказал:

Корректна ли такая задача на исходе  2017, по вашему мнению?

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

В моей компании, например,  это ~2000 визитов в год . Фигня в общем на которую мы кладём болт. А в сбербанке думаю эта цифра в 10ки раз выше и IE8 они поддерживают по сей день.

ЗЫ Я бы на твоём месте лучше подумал, стоит ли выполнять такую объёмную работу за шанс трудоустроиться . Я подобных "нанимателей" просил оплачивать такие вещи. Но большинство таки не ценит свое время и многие компании наглеют на этом фоне.

Edited October 11, 2017 by andrey7287

[seemax]

Спасибо, Андрей. Тут дело такое, кому нужней. Однажды мне заплатили за разработку нескольких довольно сложных страниц. Ответ сразил наповал:"Сейчас такие вещи делаются автоматически за несколько секунд." Типа, загружаешь PSD и получаешь валидный, многостраничный статический сайт...