jPutty для вёрстки, плагин под jQuery

[@creage]

Название, как мне кажется, заблуждающее.

[@szubkov]

Тоже думал об этом, но положился на первую букву — jPutty.

[@gvozd1989]

Что-то мне кажется, что будет очень сложно вносить правки в эти формулы, скажем, спустя пару месяцев после написания.

[@szubkov]

Кстати, формулы и написаны мной пару месяцев назад. Сейчас вносить в них любые правки я в состоянии. Может быть, это мои личные заморочки, может быть, дело вкуса, но таки несравненно легче, чем вносить такие же правки в html+css вёрстку через пару месяцев.

[@hermit931]

Подробные комментарии для каждого из расчетов устранят этот недочет

[@Wave]

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

Зы: что там за музыка? Написанная строго под этот сайт, или что?

[@szubkov]

А какой браузер? Должна быть одинокая надпись на чёрном фоне:

Ваш браузер не поддерживает JavaScript.
Jean Jacques Brissot

Музыка — да. Что-то вроде изюминки, или как её назвать.

[@Wave]

FF22 (т.е. крайний релиз), NoScript, 1280, чёрный лист с вертикальным скроллом. Попытка выделить всё (чтобы увидеть чёрный на чёрном или белый на белом) ничего не даёт.

«Ваш браузер не поддерживает JavaScript» — ненавижу эту надпись. Сейчас браузеров, не поддерживающих JS, наверное вообще не осталось. Особенно раздражает, когда вслед за этой фразой предлагают установить «современный браузер» (фф, хром). А у меня JS ВЫКЛЮЧЕН. Ну это так, личные тараканы.

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

P.s. Понял, в чём проблема. Давно уже сделал и забыл — у меня включено «скрывать содержимое noscript». Ничего умного там обычно нет, только требование обновить браузер, причём, очень часто на сайтах, которые и без скриптов прекрасно обходятся.

[@szubkov]

Соглашусь насчёт формулировки надписи. Если у меня лет через надцать будут концерты, я вас обязательно приглашу, чего бы вам этого не стоило :)

[@szubkov]

Я извиняюсь за оффтопик. А как узнать, кто подарил мне инвайт? Должен же я знать своих героев!

[@PopeyetheSailor]

Зарегистрирован: 10 мая 2013 в 00:55 по приглашению НЛО

Сам хабр призвал тебя.

[@AgaFonOff]

Вынесите $(window) как параметр в вызов — процентов 10 сэкономите на минифицированном файле и работать быстрее будет.

[@szubkov]

Спасибо, очень ценно.

[@KonstRuctor]

Смотрю в chrome под ipad, все мелькает почему-то и верстка съехала (по сравнению с вашей картинкой в топике)… В Safari для ipad та же картина.

[@neJa]

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

[@szubkov]

А в чужих css-стилях тебе всё понятно?
Мне в css ничего не понятно. Обожаю размещать блок, средствами css, на несколько десятков пикселей левее центра, например. Ещё люблю прижимать футер к низу окна браузера… особенно вот это вот — отрицательные отступы margin.

И ладно бы задачи были впечатляющими! А вот нет. Это всего лишь блок чуть левее центра, и футер внизу.

P.S. Как ты относишься к LESS?

[@neJa]

Если испытываете такие проблемы с CSS, тогда зачем вообще браться за него? Отдайте нормальному верстальщику — пусть сделает, в чем проблема? А городить такие костыли… ну я уже в общем написал.

[@szubkov]

Вопрос только в том, какой подход эффективнее. Я говорю о том, что те же результаты достигаются проще.

[@ilyaerin]

Ужас конечно. Для каких-то отдельных элементов сайта, со сложным позиционирование или сложной адаптивной вертской, это применимо, да и используется уже давно, но делать так всю страницу. Больше проблем от этого, чем пользы, собственно основные уже перечислили выше:
— поддержка / отладка / доработка — скорее все будет сведена к переделываю всего на нормальную верстку стилями
— мобильники/планшеты, возможно новые версии браузеров, сюда же пользователи у которых отключен js
— лишняя нагрузка на браузер, да она небольшая, но явно лишняя
— есть еще такой косяк, пока грузится сайт и js не сработали — пользователь видит какашку. а если, скажем, используется мобильный интернет, который пока, к сожалению, не очень стабилен.

[@IhorL]

Если уж пошли делать все попиксельно, да еще без scale насколько я увидел, то возьмите лучше фотошоп или fireworks и т.д. и создайте красивую страницу которая одинаково до пикселя будет везде., и без этого страшного изобретения 21 века. Или уже если идти в ногу со временем, CreateJS и подобные аля Canvas, тотже редактор от Adobe и тоже получите одинаково на всех девайсах до единого пикселя. А такой вариант надеюсь больше не встречу в живую.

[@Gromo]

Существуют элементы, которые изменяют свой размер в зависимости от клика браузера, происходит какая-то анимация, которая влияет на положение других элементов — всё это прописывать с помощью JavaScript?

[@hermit931]

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

[@Anonym]

Извините конечно, но так делают те, кто не умеет верстать. Всё это прекрасно делается без JS.

[@Bagow]

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

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

[@szubkov]

Можно. Например, в вашем блоге, если захотеть переместить правую колонку «Рубрики — Свежие записи — твиты» за пределы wrapper-a. Скажем, обрезать верхнее чёрное меню справа, и на его место пододвинуть вверх до упора правую колонку, то надо переделывать же всю вёрстку… Колонку уже надо выносить за пределы wrapper и container, или wrapper и container делать на всё окно, а обрезанное меню поместить как-нибудь поверх него. Ну в общем, задачка конечно выполнимая. А в моём примере фон менюшки сливался с фоном страницы :) то есть там было не видно, что блок на самом деле хотят на «невидимое» меню пододвинуть.

[@Bagow]

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

Кстати jPutty прекрасная вещь и я использовал бы его например на своем блоге, или на другом своем личном проекте, которым никто кроме меня заниматься не будет. Но на клиентском сайте я бы его не использовал ни в коем случае, так как клиент потом будет иметь дополнительные проблемы.

[@szubkov]

Полностью согласен с первым абзацем.
Спасибо за отзыв.

[@Anonym]

А в чем проблема?

У меня на это ушло 10 минут. Адаптивные стили не сломались. Ничего никуда не переносил, только CSS.

[@szubkov]

А покажите тогда и код.

[@Anonym]

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

[@Bagow]

Это не сложно вам, вы наверно достаточно часто верстку практикуете. Мне например понадобилось минут 25 что бы разобраться, а для клиента который думает(как я понял по посту), что блоки сайта передвигаются аналогично блокам в PS, полчаса неоправданно много.

[@Anonym]

Может стоить изучить то, с чем работаете, а не изобретать велосипеды? Сантехник поменяет смеситель в ванной за полчаса, мне для этого понадобится достаточно много времени, однако, я не буду крепить его на клей «потому что так быстрее и удобнее».

[@szubkov]

Anonym, вот вы так говорите, будто использовать js в вёрстке будет легче только тому, кто не разбирался с css. Я же говорю, что я разбирался и в css, и всё равно использовать js легче объективно! Настолько легче, что если вам добавить ещё 100 лет опыта работы с css, всё равно вы будете передвигать блоки с помощью css дольше, чем люди без опыта с помощью js. Вот об этом я готов разговаривать, об этом моя статья.

А оценивать ваши познания css, сравнивать ваш опыт вёрстки со своим, мне допустим незачем.

[@Anonym]

Да не принимайте вы так близко к сердцу. Ваше решение имеет право на жизнь.

[@Bagow]

Может стоить изучить то, с чем работаете

Это утверждение неоспоримо.

а не изобретать велосипеды

А без этого не было бы того с чем вы работаете.

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

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

[@szubkov]

Подождите, давайте по порядку и по существу. Насчёт вопроса, какой код легче поддерживать, я же не против: давайте просто возьмём примеры и сравним!

Я предлагаю пример простой до ужаса: обычный резиновый шаблон, колонка слева, колонка справа, и блок контента между ними. Высота колонок и контента одинаковая, футер прижат к низу. У кого нет с этим проблем? Есть здесь профессиональные верстальщики?

на jPutty это выглядит вот так: data.brissot.biz/jputty/1/
на css я вам помогу. Мы можем прижать футер к низу: data.brissot.biz/css/11/, можем эмулировать одинаковую высоту колонок: data.brissot.biz/css/12/. Можем использовать табличную вёрстку. Ещё варианты?

А теперь сравните сложность кода!

[@devote]

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

[@szubkov]

Не очень понял про событие ресайза, которое жрёт. Пользователь постоянно ресайзит окно на телефоне, и от этого у него быстро садится батарея?

[@devote]

конечно, а ты не в курсе такого понятия как смена ориентации экрана, повернул телефон/планшет горизонтально (произошло событие), повернул вертикально (произошло событие). Конечно если сайт какой нибудь фуфлыжный, то юзер посмотрит его с одной ориентацией и закроет… А если сайт на котором он постоянно. То и событие буде постоянно работать при действиях (положил в карман, вынул из кармана и т.д.) Не хуже меня это должен знать.

[@szubkov]

А когда браузер обрабатывает css-вёрстку, он при смене ориентации экрана батарею не жрёт?

[@devote]

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

[@devote]

Я вообще не понимаю ради чего ты слепил подобный плагин? да еще и в виде плагина для jQuery который явно для мобильных сайтов не катит. Слишком много весит. Либо пиши на нативном JS, либо (а лучше) верстай средствами CSS ибо уже давно все браузеры умеют делать подобную верстку что ты привел в пример без огромных усилий, за исключением IE7 и более старых версий, хотя кому щас нужен ИЕ7? Советую вместо написания подобных плагинов, изучить CSS, поверь он довольно мощный и многое умеет.

[@szubkov]

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

[@devote]

Не катит потому что слишком громоздкий, а не потому что он в нем не работает… А трафик в мобильных устройствах, это деньги пользователя. Конечно если тебе все равно на пользователей, то естественно никто не запрещает юзать jQuery, но я предпочитаю на мобильных сайтах не использовать jQuery.