Показаны сообщения с ярлыком Firefox. Показать все сообщения
Показаны сообщения с ярлыком Firefox. Показать все сообщения

пятница, 2 ноября 2007 г.

Stylish

Сегодня я хотел бы поделиться с вами своей очередной находкой. Находка касается очередного расширения для Mozilla Firefox - Stylish.
А все началось с того, что сегодня мне окончательно надоело куча лишних рекламных (и не только) колонок на computerra (в результате сама статья становится до ужаса узкой). Обычные вырезалки нежелательного контента мне не подходили, т.к. они, конечно, что то вырезают, но не факт, что остальной контент после этого встанет на место вырезанного (т.е. займет освободившуюся часть)...
Для начала (когда я еще не знал про Stylish) я решил просто проверить, на сколько можно изменить внешний вид computerra подручными средствами. Подручным средством оказался firebug (по моему скоро это расширение станет одним из моих самых любимых). С его помощью я довольно быстро разобрался, что мне надо отключать, какие стили править и т.д. Подытожив я понял что сия махинация возможна, осталось только все это автоматизировать.
Дальше начались долгие поиски. Через некоторое время я уже совсем отчаялся и решил, что изучу наконец - как же пишутся эти самые расширения для Firefox (я же все таки программист как ни как). Но, тем не менее лень меня победила (я же все таки программист как ни как) и закончилось все тем, что я нашел уже готовое расширение для Firefox :D Стоит сказать, что изучение устройства расширений лишним тоже не оказалось;)
Найденным расширением, как несложно догадаться, стало Stylish. После небольшого изучения я приступил к реализации, а именно выбрал создание нового стиля для cumputerra в котором для начала: скрыл верхний баннер, самую правую колонку (это там, где "сегодня в номере" и т.д., в общем, только место зря занимает), третью рекламную колонку а так же начало рекламы от бегуна (пока не придумал как убрать ее конец). В итоге получился следующий код:
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("www.computerra.ru") {
#tophban {display: none !important }
#terralab {display: none !important }
#skyright {display: none !important }
#begunRoot {display: none !important }
}
Теперь на странице не отображается ничего лишнего (ну лишнего для меня), но, тем не менее остается куча свободного места, которое можно заполнить основным конентом (ради которого я и посещаю этот сайт). А все дело в том, что в коде заданы жесткие размеры - ничего, сейчас поправим;). Для этого ставим ширину шапки и страницы в 100%, а не 770px, как было:
#top {width: 100% !important }
#page {width: 100% !important }
После этого замечаем, что контент всеравно имеет слишком большой отступ от правого края - этот отступ предназначался для размещения в нем рекламы, но ее то у нас уже нет;) так что уменьшаем отступ:
.content {margin-right: 20px !important }
Ну и на последок я решил просто выравнивать текст в абзацах по ширине (уж не знаю почему мне так больше нравится):
p {text-align: justify !important }
Ну и две картинки, что бы можно было сравнить "до" и "после":

Стоит сказать, что Stylish еще поддерживает и публикацию ваших стилей в общую базу, а так же поиск стилей других пользователей для данного сайта. Т.е. если вы хотите подставить для сайта свой стиль для чего либо, то, сначала посмотрите, нет ли уже аналогичных стилей других пользователей (зачем изобретать велосипед). Сделать это можно вызвав команду Stylish - "Find Styles for this Page". Для computerra уже был один стиль, но он не делал то, что было нужно мне.
P.S. Кстати, когда выравнивал текст по ширине, обнаружил небольшой баг в firebug (ну или в firefox). Дело в том, что материал находится в div с id="article" и я сначала прописал у него text-align: justify !important; тем не менее тег p внутри него не принял этот атрибут, точнее он не заменил свой text-align: left; (который определен для всех p на странице, но выше по иерархии) не смотря на то, что по мнению firebug он это должен был сделать.

воскресенье, 12 августа 2007 г.

Домашняя страничка в вашем браузере

До поры до времени я не придавал никакого внимания сервисам в интернете да и стартовым страницам тоже. В то время я знал такие стартовые страницы как rambler, yandex и т.п. Речи о web 2.0. тогда и не шло. В итоге я сначала привык что стартовой страницей у меня нет, потом у меня появилась облегченная версия поисковика yandex, ну а потом был поставлен google, т.к. этот поисковик мне нравился больше и он был тоже легким. Со временем у меня появился firefox и стартовая страница опять оказалась под вопросом, т.к. этот браузер уже имел строку поиска:)
Некоторое время назад появился iGoogle, который мне очень понравился, со временем я проникся и к новостным лентам, блогам и т.п. В итоге на стартовой странице у меня сейчас красуется iGoogle с довольно маленьким но очень удобным набором виджетов - читалка gmail, погода, блокнот и GoogleReader (который мне очень, кстати, понравился, да к тому же заменил 3-ку других виджетов, добавив еще к себе и сообщения блогов друзей). Так же меня радовала тема начальной страницы, которая меняется в течении дня, ну и конечно же любимая мной строчка поиска от google:) Это уже не говоря о ссылках вверху на свой профиль и историю поиска. Единственное, что я пока не добавил из того, что бы мне хотелось - это googleTalk, т.к. флешовый виджет меня пока немного не устраивает в отношении аси (сообщения принимаются и отсылаются, но все аськины контакты всегда как бы находятся в оффлайн).
Стоит сказать, что iGoogle на английском демонстрирует чуть большую интеграцию со службами google - Самую малость;)
Не смотря на то, что главной страницей мне пользоваться очень понравилось, мне всеравно чего то не хватало - наверное, это в натуре человека - эму все время охота больше:) В частности мне иногда казалось, что было бы лучше, если бы вот этот виджет был не в одну колонку, а в две, и вообще, почему колонок три, а не, скажем две? И мне бы было лучше, если бы уголки виджетов были скругленными... ну или еще что нибудь:) Конечно, все это мелочи, который абсолютно не мешали мне получать полное удовольствие от всего в одном месте:)
Что бы иметь чуть большее представление о других домашних страничек (не одним же google мы живем) я в свое время посмотрел аналоги iGoogle у Yahoo и Microsoft. Было довольно мило, но мне, почему то, не очень понравилось м я решил все оставить по прежнему.
Сегодня же, я узнал и вскользь посмотрел сайт netvibes, который предназначен исключительно для создания своей домашней страничке. В итоге, я был очень приятно удивлен. Всплывающие подсказки, возможность разместить практически те же виджеты плюс гораздо лучшие возможности по настройке внешнего вида странички. Там есть и выбор количества колонок на каждой вкладке, и возможность задать каждой колонке определенную ширину, и возможность выбрать одну тему, а задний фон сделать другим. Так же мне понравилось то, что каждому виджету можно задать свой внутренний цвет (6 на выбор, вроде). Ну и иконки для каждой вкладке - в общем все очень даже мило, так что, советую посмотреть;)
P.S. Переходить на нее, я все же пока не буду, т.к. достойной замены GoogleReader я там пока не нашел, да и строки поиска на привычном месте там нет, вместо нее заголовок вашей домашней странички (лично у меня фантазии больше чем на "Домашняя страничка" не хватило).

четверг, 2 августа 2007 г.

Google - История веб-поиска

Совсем недавно в "Вопросы и ответы" от google читал вопрос - есть ли у google что то наподобие функции яндекса, которая показывает последние 20 запросов. Тогда ответили, что нет... Сегодня же, воспользовавшись в очередной раз поиском в google заметил сверху справа приглашение к созданию моей истории поиска ;) На сколько я успел понять, она не просто смотрит те запросы, которые Вы делали в поисковик, но и просматривает всю историю путешествия... делается это за счет PageRank в панели инструментов (в моем случае я использую firefox). Конечно в отличии от яндексовской функции она смотрит только Вашу историю.
Все таки приятно видеть такую хорошую интеграцию сервисов от google.
И еще немного относительно "Истории веб-поиска" - пользовался ей, конечно, пока что мало, но радуют уже некоторые фишки структуры сохранения этой истории. Например если вы ввели строчку поиска в google и потом воспользовались одним (или не одним) результатом поиска, то в истории это отобразится в виде дерева - в корне будет строка поиска, а потом идет список страниц, на которые в результате перешли... В общем, интересно будет посмотреть ;)

суббота, 30 июня 2007 г.

Знакомство с JavaScript

Недавно, в моей практике, случилось мне писать небольшой сайтик... Писал я его на ASP.NET, но это не важно... т.к. проблемы начались, когда дело дошло до JavaScript...
Перво наперво, пришлось долго искать описание объектной модели документа, благо в MSDN она описана... Ух ты, как хорошо все написано... было подумал я... и быстренько набросал метод (еще и при дополнительной помощи моего знакомого), суть которого заключалась в следующем: есть табличка, в этой табличке есть строчки, в каждой строчке есть несколько столбцов, в одном из которых есть поле ввода textarea, а в другом есть checkbox... А надо сделать следующее: если в textarea набрали текст длинее 5 символов, то соответствующая строчка начинает подсвечиваться желтеньким цветом, а на checkbox ставится галочка, если меньше 5 символом, то подсвечивается другим цветом, и галочка на checkbox снимается...
В итоге получилось, что то вроде:

if (obj.innerText.length < 5)
{
obj.parentNode.parentNode.parentNode.
style.backgroundColor = 'AliceBlue';
obj.parentNode.parentNode.parentNode.
childNodes[2].childNodes[0].childNodes[0].chaecked = false;
}
else
{
obj.parentNode.parentNode.parentNode.
style.backgroundColor = 'LemonChiffon';
obj.parentNode.parentNode.parentNode.
childNodes[2].childNodes[0].childNodes[0].chaecked = true;
}

Где obj - это наш textarea, obj.parentNode.parentNode.parentNode - это наша строчка, ну а obj.parentNode.parentNode.parentNode. childNodes[2].childNodes[0].childNodes[0] - это наш checkbox..., который на самом деле находится просто в span, а до этого еще и во второй колонке. Запускаем, все работает, отлично! Запускаем в Firefox... не работает... На помощь приходит плагин firebug... Ставим, начинаем дебажить... Перво наперво, выясняется, что textarea в firefox java не содержит поля innerText, зато у него есть поле value, которого нет в IE... дык... надо найти что то общее... обращаем внимание на поле textLength, которое сразу же указывает нам на длину текста... есть ли оно в IE? Наверное нам это было уже не интересно, главное, что не value... Переправили, запускаем... работает, но не полностью, цвет меняет, а галочку не ставит... Почему?... дебажим...
obj.parentNode.parentNode.parentNode.childNodes[2] - колонка, так и должно быть... а obj.parentNode.parentNode.parentNode. childNodes[2].childNodes[0] это не span... странно... ага, индексы в firefox почему то другие... и их больше:) Ах, так она еще и переводы строки считает... Подгоняем индексы, что бы проверить - будет ли вообще это работать? Получаем:

obj.parentNode.parentNode.parentNode.
childNodes[3].childNodes[1].childNodes[0]

заместо

obj.parentNode.parentNode.parentNode.
childNodes[2].childNodes[0].childNodes[0]

самое плачевное... что где то индексы совпадают, а где то нет... Но! Русские не сдаются:)
Было решено писать супер пупер мега метод, который в потомках рекурсивно будет искать определенный объект, в нашем случае это input с типом checkbox, благо во всей строчке он такой один (почему именно этот путь? Ну что первое в голову пришло...)
В итоге получаем метод:

function GetCheck(Obj)
{
for (i=0;i < Obj.childNodes.length; i++)
{
if (Obj.childNodes[i].tagName == 'INPUT' &&
Obj.childNodes[i].type == 'checkbox')
return Obj.childNodes[i];
else
{
Res = GetCheck(Obj.childNodes[i]);
if (Res != null)
return Res;
}
}
}

Круто! Запускаем... зациклились... Рекурсия - смотри рекурсия... Почему это функция бегает все время по одним и тем же нодам... нам понять удалось не сразу... по всей видимости сказалось то, что перейти на javascript сразу после кода на C# не так легко... а ведь ошибка крылась в какой то переменой, коей оказалась i... Ну да... локальные, глобальные... в общем, она была одна на все рекурсивные функции... проблема была решена добавлением следующей строчки:
var i = 0;

Круто! Запускаем, работает... галку мы нашли... теперь осталось ее проставить или убрать, в итоге получаем следующий метод:


function TextChange(obj)
{
var SranaGalka;
function GetCheck(Obj)
{
var i = 0;
for (;i < Obj.childNodes.length; i++)
{
if (Obj.childNodes[i].tagName == 'INPUT' &&
Obj.childNodes[i].type == 'checkbox')
return Obj.childNodes[i];
else
{
Res = GetCheck(Obj.childNodes[i]);
if (Res != null)
return Res;
}
}
}
SranaGalka = GetCheck(obj.parentNode.parentNode.parentNode);
if (obj.textLength < 5)
{
obj.parentNode.parentNode.parentNode.
style.backgroundColor = 'AliceBlue';
SranaGalka.checked=false;
}
else
{
obj.parentNode.parentNode.parentNode.
style.backgroundColor = 'LemonChiffon';
SranaGalka.checked=true;
}
}

Который, кстати, работает в Firefox! Запускаем Opera... не работает, даже цвет не меняет... обидно... ладно, отдебажить в опере нечем, переходим к IE - запускаем... цвет меняется, галка ставится... но когда надо снять выделение... цвет не меняется, галка не ставится... неужели код, который в else не работает?? он же такой же... вроде как... дебажим, уже в студии (кстати, отдельная история)... obj.textLength - undefined... а как ни странно, но undefined > 5 равно истине... да... но зато мы знаем, что в IE точно работает obj.innerText.length, который не работает в firefox - как быть? Как, как... танцевать с бубном и придумывать следующую строчку:


Length = obj.textLength==null?
obj.innerText.length : obj.textLength;

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

function TextChange(obj)
{
var SranaGalka;
function GetCheck(Obj)
{
var i = 0;
for (;i < Obj.childNodes.length; i++)
{
if (Obj.childNodes[i].tagName == 'INPUT' &&
Obj.childNodes[i].type == 'checkbox')
return Obj.childNodes[i];
else
{
Res = GetCheck(Obj.childNodes[i]);
if (Res != null)
return Res;
}
}
}
SranaGalka = GetCheck(obj.parentNode.parentNode.parentNode);
Length = obj.textLength==null?
obj.innerText.length:obj.textLength;
if (Length < 5)
{
obj.parentNode.parentNode.parentNode.
style.backgroundColor = 'AliceBlue';
SranaGalka.checked=false;
}
else
{
obj.parentNode.parentNode.parentNode.
style.backgroundColor = 'LemonChiffon';
SranaGalka.checked=true;
}
}

Запускаем... IE - работает... Firefox - работает... осталось самое страшное - Opera, ведь в ней мы никак не сможем отдебажить... но... о чудо! и там работает:) По всей видимости, в Opera null не может сравниваться с числом, в связи с чем скрипт просто переставал выполняться.... Ну да ладно, самое главное, что все работает, и на все это ушло всего навсего часа 4 с небольшим... Зато какой супер пупер мега метод то получился, и никакая SranaGalka нам теперь не помеха:) И даже не напоминайте нам про Safari и что то другое;)
P.S. Да, быть может, можно легче... но уже проехали;)

суббота, 23 июня 2007 г.

Ддввооййнныыее ррууссккииее ббууккввыы

Недавно обнаружился странный глюк в любимой мной лесичке (Firefox aka FF)... Странность его заключалось в неожиданности появления (может появиться через 2 часа работы), а так же в его непостоянстве. Ну а заключался он в том, что при наборе русского текста, каждая набранная буква повторялась дважды (английским как всегда по барабану)... иногда проблеме помогал перезапуск браузера... не иногда не помогал :(
После недолгих поисков выяснилось, что сие чудо случается далеко не у всех, но если начинает появляться... то делает это внезапно! и непредсказуемо, а самое главное, после появления не уходит... Суппорт любимого браузера разводит руками и с сожалением говорит, что как он ни старается, никак не может повторить этот забавный глюк на своих машинах...
Тем временем похожие симптомы начинают проявляться и в других приложениях пользователей... Например, некоторые пользователи ноутбуков жалуются на то, что в их Open Office так же иногда проявляется симптом двойных русских букв... Позже к ним присоединились и пользователи обычных ПК ;)
Есть ли связь между этими событиями, или это разные глюки в разных программах?... Единственным нюансом во всей этой истории оказалось то, что страдают от этого только пользователи ОС Windows... В подозрение попал сам Билл Гейтс :-x
Тем не менее, некоторые пользователи начали находить решение из сложившейся ситуации... Пользователи Open Office дружно переустанавливали драйвера на свою клавиатуру... жаль это помогало не всем... в том числе это не помогало пользователям FF...
Но, как выяснилось позже, пользователи FF обладают большим потенциалом в решении проблемы, ведь их любимый FF поддерживает плагины... Если быть точнее, то спасением для них оказался плагин "IETab" (опять чувствуется причастность мелкомягких)... После установки этого плагина, симптомы двойных русских букв могли исчезнуть... если же глюк пытался проявиться снова, то достаточно было открыть еще одну вкладку, но в режиме IETab... "Суппорт" FF в недоумении разводит руками, и до сих пор считает, что пользователи сами выдумали проблему...