Tilonorrinco

http://jsbin.com/zimavo

Тут дело не в отсутствии мыши, а в удобстве. Обычно опытные пользователи совмещают мышь и клавиатуру для быстрой навигации по сайтам. но это оффтопик, конечно, тема о поиске работы.

Не совсем понял: речь идет о верстке или о дизайне? Зачем верстальщику рисовать макет? Дизайнеры обычно ориентируются на стандартную сетку и рисуют макет шириной где-то в 1200пх. Я использую пиксели и не парюсь. В идеале дизайнер рисует отдельный макет для каждой точки останова. Вне этих точек макет -- резиновый. Обычно просто уменьшаешь размер окна и отлавливаешь момент, где элементы не влезают и делаешь на этом месте брейкпоинт. Лучше брейкпоинты вывести в переменную, чтобы они были унифицированы. Да, имхо, это самый подходящий вариант. Картинки -- либо в свг, либо увеличенные в несколько раз. Скачать нужные браузеры и тестировать в них. Сейчас различия в отображении сайта встречаются редко. Сафари тестировать проблематично. Решение: хакинтош, купить оригинальный девайс от эпл либо browserstack.com Лучше пользоваться готовыми наборами брейкпоинтов (не больше 4х точек). Если коряво -- попробовать перестроить сетку по-другому, уменьшить шрифт или отступы на последнем брейкпоинте и т.п. Глупости. Можно добавлять. Нужно использовать. Так делать не нужно. Чем меньше селекторы завязаны на структуру проекта, тем лучше. Есть много подходов к архитектуре стилей. Общий принцип такой: отдельные стили инклудятся в main.scss и его сжатая версия после компиляции подключается в html. А уж по каким папкам и по какому критерию разграничивать стили -- каждый решает для себя. Единственного верного решения здесь нет. Курсы по верстке от htmlacademy, имхо, самое лучшее что есть. Верстка довольно хорошая. На все вопросы, которые были заданы есть ответ в курсах. Советую обратить внимание на продвинутый интенсив.

Например, добавить кнопке толстую границу в цвет фона. Или вложить кнопку в контейнер с серым фоном.

С кодом в песочнице было бы гораздо проще отследить ошибку. Навскидку, var switch_ = svgDoc.getElementById("switch"); svg лежит внутри iframe? svgDoc == document ? какую ошибку кидает в консоль?

breca, есть еще более простой способ решения: не переписывать значение исходного массива. http://jsbin.com/cetopo/edit?js,console,output

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

Тэг fb:app_id нестандартный, завязан только на фейсбук и нужен, как я понял, для интеграции приложений с open graph. https://stackoverflow.com/questions/10836135/when-do-i-need-a-fbapp-id-or-fbadmins Можно его проигнорить.

Если что-то не работает, можно протестировать в онлайн-сервисах (точно есть у фейсбука и твиттера, обычно если в них все норм, то и на других сайтах тоже). Там обычно все довольно подробно расписано. Вот ссылка на дебаггер фейсбука: https://developers.facebook.com/tools/debug/sharing На фейсбуке погружается картинка с Мэрилин, ссылка на которую возвращает 404 страницу. Поэтому изображение не отображается. В телеге все работает норм и подгружает фотографию. У некоторых сервисов есть своя специфика: где-то есть ограничения по минимальному размеру изображения, где-то требуются только абсолютные пути в ссылках, определенные расширения и т.п. Можно конечно все это гуглить, но самый простой вариант -- взять сайт, где все работает норм, типа habrahabr и скопировать все теги оттуда, подправив содержание и ссылки по-аналогии. Если подгружается старая картинка, можно очистить кэш (на сайте дебаггера для каждой соцсети) или подождать.

Почему не изменилось? Появился псевдоэлемент с картинкой. Осталось только поработать с изображением в редакторе.

Нужно просто создать псевдоэлемент с параметрами картинки и разместить его в левом верхнем углу поверх фона. Попробуй добавить к стилям вот такой кусок: body { position: relative; } body:after { content: ''; position: absolute; left: 0; top: 0; width: ШИРИНА КАРТИНКИ пх height: ВЫСОТА КАРТИНКИ background-image: url('ССЫЛКА НА КАРТИНКУ'); background-repeat: no-repeat; } Такую простыню кода без разметки (да и с разметкой тоже) вряд ли кто-то читать будет, лучше давать ссылку на сайт.

Пропиши opengraph атрибуты в meta-тэгах. За картинку отвечает тэг og:image Примеры в листингах по ссылке. http://ogp.me/ Подробнее по-русски: https://yandex.ru/support/webmaster/open-graph/intro-open-graph.xml

DivMan, нет, это слишком просто В задании нужно решить три проблемы: 1) сделать манкипатчинг расширить встроеннный объект (действительно, добавить метод в прототип массива) 2) сослаться на массив, не передавая ссылку на него аргументом 3) для дублирования нужно использовать деструктивный метод (массив после применения метода должен измениться) Сигизмунд, этот аспект задачи направлен в первую очередь не на пропагандирование спорных практик (расширения встроенных объектов), а на понимание наследования и техники расширения методов объектов (как встроенных, так и собственных). А в расширении методов своих объектов ничего плохого нет, это очень хорошо

Прикольная задача мне попадалась на просторах интернета: Что нужно сделать, чтобы при вызове [1,2,3,4].duplicate() возвращался измененный продублированный исходный массив? Т.е. должно работать вот так: var arr = [1,2,3,4,5]; arr.duplicate(); console.log(arr) //-> [1,2,3,4,5,1,2,3,4,5] А вообще, есть сайты типа codewars.com / codefights.com -- там есть и задачи, и тесты, и различные варианты выполнения. По-моему, это самый подходящий вариант.

Может быть не совсем правильно понял вопрос, но что мешает добавить метку внутри label? Просто в виде текстового узла, или в виде отдельного тэга. http://jsbin.com/hevohar/edit?html,css,output

http://jsfiddle.net/6dhjb2vn/10/ Вот я и говорю, костыльный метод Я не туда вставил проверку на ссылку.

Иван, костыльный, потому что написан ad hoc, т.е. не учитывает дальнейшую судьбу сайта и все возможные ситуации, в которых этот скрипт может работать некорректно. Как мне кажется, лучше конфигурировать уже написанный скрипт под свои нужды, чем изобретать велосипед. Дополнительный плагин для меню не будет существенно замедлять сайт.

Иван, если я Вас правильно понял, нужно просто прописать это условие в обработчик клика. http://jsfiddle.net/6dhjb2vn/9/ Теперь меню не работает, если ширина вьюпорта более 767пх. Заодно исправил недочет со сворачиванием меню по клике на ссылке. ПС Скорее всего есть готовый плагин, который реализует подобный функционал, т.к. наше решение получилось немного костыльным с т.з. архитектуры.

http://jsfiddle.net/6dhjb2vn/7/

AlexZaw, а фон, на котором находится элемент -- однотонный и неизменяемый? Если да, то можно просто поверх обычного загругленного дива с градиентом псевдоэлементом положить что-то типа маски. Верхняя часть маски -- однотонная (под цвет фона), а нижняя -- прозрачная (чтобы было видно градиент). Не знаю, удалось ли понятно объяснить

Классическая проблема синицы и журавля Однозначно правильного ответа тут нет. Все зависит от личных качеств, профессионализма, коммуникабельности, уровня спроса на рынке труда, готовности уйти во фриланс в случае чего и еще кучи факторов... Если бы у меня была такая ситуация, я бы уволился с работы только в том случае, если бы у меня уже был надежный вариант для трудоустройства (а лучше несколько). Потому что очень велик шанс того, что уволившись с текущей работы не найдешь работу получше и после нескольких проведенных месяцев саморазвития в лучшем случае вернешься назад, а в худшем устроишься на птичьих правах еще менее перспективную контору. Я бы на твоем месте, cyklop77, не торопился и прощупал почву: посмотрел доступные вакансии, походил на собеседования, оценил запросы работодаталей, необходимое время для саморазвития, другими словами, устранил бы максимально возможное количество неизвестных.

Crystal-3, принцип существенно не меняется. http://jsbin.com/kapopef/edit?output Т.к. фоновое изображение не является частью контента, алгоритм можно упростить, и убрать список изображений из разметки. Ссылки на изображения и превьюшки передаются в отдельных массивах. Изображения и их уменьшенные копии (в примере уменьшенных копий нет из-за специфики сервиса dummy-изображений) загружаются заранее и после загрузки выполняется скрипт. Скрипт загружает все изображения по ссылкам в массиве, поэтому если изображений в галерее будет очень много, нужно будет написать какой-нибудь lazy-loader, при каждом клике подгружающий только несколько соседних изображений.

Самый очевидный вариант: background-image и псевдоэлементы. Желтую пирамиду можно обратить через трансформации, чтобы не грузить две идентичных картинки.

Скорее всего уже не актуально, но вдруг: обычно телефоны масштабируют страницу, увеличивая искусственно плотность пикселей. Поэтому адаптивные параметры у вас не применяются. Вам нужно явно указать, что масштабировать страницу не нужно, чтобы при уменьшении вьюпорта медиазапросы начали работать. Для этого в head прописывают специальный мета--тэг: <meta name="viewport" content="width=device-width, initial-scale=1">

Вам, скорее всего, нужен какой-нибудь готовый плагин, то, что вы описываете -- довольно стандартная штука. Либо, если нужно что-то простое -- можно написать самостоятельно что-то вроде этого (нужно нажать run with js, чтобы включились скрипты): http://jsbin.com/fofaxom/edit?js,output