Site Helper(SH) – тулза для помощи верстальщикам, а также хороший инструмент для общения верстальщик-программер-руководитель, а так же руководитель-клиент «не отходя от сайта» незаметно для обычных пользователей и в реальном режиме времени.

Наверное, каждый, кто хотя бы разверстал пиксель в пиксель под каждый браузер, сталкивался с ситуацией, когда что-то едет, не совпадают высоты ширины блоков… ситуация знакомая.
Тут может спасти PixelPerfect или сетка разметки на js или SH ;)

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

В этом посте я постарался собрать все известные мне хаки для css. Многие могут усомниться в их надобности для нормальных современных браузеров, потому как большинство хаков всегда применялись только для IE, но этот пост скорее для любознательных :), в верстке хаки вообще лучше не использовать. Но так или иначе, раз они есть, грех о них не знать.

В отличие от многих хаков для той же Opera, которые также будут обработаны и Safari, я немного изменил код и Opera 9.2, Opera 9.5 и Safari 3 увидят каждый свой css.

Недавно, в Dojo появилась возможность производить cross site POST запросы, т.е. отправка POST запросов на другие сайты, с другими доменными именами. Это событие осталось незамеченным в нашем сообществе JavaScript разработчиков. По крайней мере, никто и слова про это не сказал. А зря…

В один прекрасный момент

Для начала. Что же такое скриптлет?

Скриптлет — яваскрипт, помещеный в закладку и выполняемый на открытой странице при нажатии на ту самую закладку.

С помощбю скриптлетов можно видоизменять страницу, редактировать или отлаживать дизайн, искать ошибки в своих скриптах и еще очень много чего…

В связи с приездом на российский iCamp, представители компании Opera Software выкроили время для встречи с пользователями браузера Opera (да вообще с пользователями любых браузеров — будет о чём поспорить ;) ). Встречу планируется провести 30 июля, вечером. От компании будут Дэвид Стори (ведущий веб-евангелист компании, менеджер по разработке ядра Opera и Dragonfly), Алексей Фельдгендлер (разработчик десктопной версии) и я. Нужно только уточнить место и время — данную информацию жду от москвичей ;)

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

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

UPDATE
habrahabr.ru/blog/opera/47854.html

Представляю обществественности свой проектик — онлайн-игру Гонки на клавиатуре. Это игра на яваскрипте, клавиатурный тренажер, скрещенный с автогонками. Цель проста — набирать текст быстрее соперников. Можно играть в одиночку, можно с другими посетителями сайта, можно создать отдельную игру для себя и своих друзей.

По сути, это русскоязычный клон аналогичной игры typeracer.com, но с рядом своих фишек.

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

Проект инициирован и идет полным ходом.
Некая проектная документация для него уже составлена и подходит время для отрисовки дизайна. Менеджер ставит дизайнеру задачу, а через неделю забирает 10 прекрасно нарисованных макетов страниц. Дизайнер старался как мог и потому каждый пиксель в данном дизайне продуман и поставлен на нужное место.
Дизайн передается к верстальщику, который погружаясь в код старается заверстать великолепный дизайн дизайнера с точностью до пикселя. На выходе он по документации выдает 20 заверстанных страниц.
После чего дизайн поступает программистам. Которые собирают проект и теперь это уже не просто статичный дизайн — это работающий интернет-сайт.

Казалось бы просто, но.
Когда через несколько недель после начала сборки проекта до проекта добираются тестировщики, они хватаются за голову. В верстке обнаруживается десятки несоответствий дизайну. Баги сыплются на головы программистов и верстальщика. Следя за сборкой, дизайнер погружается в грусть все глубже и глубже, его состояние на границе отчаяния, а дизайн в забвении (как можно положить “это” в портфолио?!). Верстальщик не прекращает попыток фиксить баги, но они появляются быстрее, чем он успевает их читать.

Для начала стоит понять, как происходит валидация.

Во-первых, не бывает html-валидации. Бывает валидация SGML. SGML — это средство описания формального синтаксиса языков разметки. При валидации документ пытается соблюсти DTD, который представляет собой формализованное описание синтаксиса.

Во-вторых, валидатор всего лишь указывает вам на ошибки и несоответствия описанному формальному синтаксису. Это необходимо для того, чтобы документ был валидным — это даёт бОльшие шансы того, что данный документ будет корректно воспринят большинством браузеров нынешнего и будушего поколений.

Посмотрите на эту страницу. Синим цветом выделены 4 плавающих блока с шириной равной 25% у каждого, которые находятся в контейнере с шириной 50px. Теперь вопрос: Какова ширина каждого блока?

Ширина эта должна быть равна 12.5px, но т.к. мы можем использовать только целые значения, то приходится округлять значения. И тут же возникает вопрос: В какую сторону округлять? В большую, в меньшую или в обе? Результаты думаю вас удивят, как и меня.


В итоге мы имеем три абсолютно разных лагеря.

— Округление в меньшую сторону — И Opera и Safari округлили значение ширины до 12px. В результате чего образовался 2-x пиксельный пробел (помечен зеленым цветом) справа от блоков. Если вы когда-либо озадачивались, почему ваша красивая навигация не заполняет все пространство контейнера, теперь вы знаете ответ.
— Округление в большую сторону — 6-й и 7-й Internet Explorer увеличивают ширину до 13px, что приводит к «поломке» структуры сайта.
— Округление в обе стороны — Firefox 2 и 3 сочетают оба подхода, округляя ширину одних блоков в меньшую сторону, а других в большую. Побочный эффект заключается в том, что ширина блоков теперь имеет разное значение, несмотря на то, что в CSS задано одно значение. К тому же, если получить значение ширины с помощью Javascript, то оно будет равно 12.5px, не давая понять в какую сторону было произведено округление. Есть и еще один неприятный момент. В Firefox 3 меняется порядок округления.

David Baron, один из разработчиков Mozilla, разъяснил ситуацию:

— Мы стараемся соблюдать все нижеописанные правила, которые, однако же, не могут быть удовлетворены одновременно:

1. 4 смежных объекта шириной/высотой 25% (например), начинающиеся у одного края внешнего контейнера, должны заканчиваться у другого. Не должно появляться никаких свободных или лишних пикселей.
2. Объекты, которые являются логически смежными, всегда должны визуально касаться друг друга. Не должно быть никаких пустых пробелов или наложений, возникающих из-за ошибки округления.
3. Объекты с одинаковой шириной должны занимать такое количество пикселей, которое было задано.
4. Границы объектов не должны быть размыты.

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

Вот до чего иногда доводят безобидные развлечения. 2 месяца назад я неожиданно увлекся игрой в сапера. Особенно мне было интересно побить рекорд не по времени, а по количеству мин на поле. На уровне игры «новичок» дается поле 9x9 и 10 мин. Разумеется, это было очень просто, и я стал наращивать количество мин. 12, 15, 20 штук, это была простая разминка. Затем прошел 25 после большого числа попыток. Игра с 27-ю минами (каждая 3-я клетка заминирована) отняла у меня несколько часов. Не остановившись на достигнутом, я выставил сразу 30 штук. Выиграл спустя полторы недели, играя по часу в день.

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

Сделал для себя в Опере небольшой твик — панель закладок del.icio.us.
Решил поделиться с вами :)


Есть, правда, и недостатки. Например, там не может быть больше 100 ссылок — я пожертвовал этим ради скорости работы скрипта.

Как добавить такую панель в Opera

Нажмите Shift+F12, вкладка «Панели» («Panels»), «Добавить веб-панель» («Add web panel»).
В появившемся окне введите:
Имя: любое. Например, «del.icio.us».
Адрес: ion.1.vg/delicious
Адрес №2: ion.1.vg/delnew
(снято ограничение в 100 ссылок; отображаются do not share ссылки; нужен пароль для входа. BETA)
Остальное заполняется по желанию. Сохраняете и любуетесь панелью, появляющейся и исчезающей по нажатию F4.

upd: Сервис помер за невозможностью оплачивать сервер, извините. Буду рад, если кто поддержит (не меня в финансовом плане, а скрипт на своем сервере :))). Исходники могу выслать, обращайтесь в комментарии либо на e-mail.

Примечание: ниже представлен официальный перевод статьи «On having Layout» на русский язык. Статья не является окончательной. Этот перевод отражает 9 версию от 23.10.2007.

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