Ксдыщь!

Вебдев и всякая фигня

Файл-менеджер для Ubuntu

March 31st, 2007 · Ubuntu

Хардкорные линуксоиды освистали бы меня уже за сам сабж, но я, как дитя Микрософта, пока не готов производить 100% действий в консоли. Поэтому и отправился на поиски двухоконного файл-менеджера а-ля Total Commander. Собственно условий, помимо очевидных, было три:

  • работа с FTP с поддержкой менеджера соединений
  • возможность выбора файлов/папок с клавиатуры путем полного/частичного набора их имени (я ещё называю это «быстропоиском»)
  • поддержка cp-1251

Изначально я пытался жить с Nautilus и mc. Первый просто ни разу не двухоконный, а mc… В общем, если вы в свое время предпочли TC FAR’у, то всё поймёте сами.

Старшие товарищи послали меня в сторону Krusader, gnome-commander и Tux Commander.

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

Так что пришлось попробовать что-то ещё. В роли спасителя человечества выступил Tux Commander. Полное соответствие моим трём условиями, привычные с Total’а сочетания клавиш, та же система дисков и вкладок. Недостатков пока было выявлено только два — нет механизма закрепления вкладок, и быстропоиск работает только после активации его хоткеем. Но это всё мелочи, мой полный домашний переезд на Ubuntu завершён, благо с css-вёрсткой я пока завязал и фотошоп с IE7 меня не волнуют :)

→ 15 CommentsTags:···

6 субъективных критериев эстетики кода

March 28th, 2007 · Веб-разработка

Любят буржуи-блоггеры составлять всяческие списки. 10-каких-то-там-охуенных-фиговин или типа того.

Вот и я для разнообразия решил попробовать. Работы мозга — ноль, а людям нравится. Хеппи-енд, все дела. На 10 меня, правда, не хватило. Весна, знаете ли, не распологает. Я лучше вибрейки поднастрою, чем еще четыре пункта буду вымучивать.

Флудить будем про эстетику кода. Кто сказал, что мы не романтеги?

Семантика

Некрасиво:
span.motto {
    display:block;
    }
Красиво:
div.motto {}

Здравый смысл

Некрасиво:
div.motto {
    width:100%;
    }
Красиво:
div.motto {}

Оформление вложенности

Некрасиво:
.block {
    padding:10px;
    }
.block em {
    color:#F00;
    }
Красиво:
.block {
    padding:10px;
    }
    .block em {
        color:#F00;
        }

Сокращенная запись

Некрасиво:
.block {
    padding-left:5px;
    padding-top:10px;
    padding-bottom:2em;
    padding-right:5px;
    }
Красиво:
.block {
    padding:10px 5px 2em;
    }

Значения по умолчанию

Некрасиво:
.block {
    background:#000 url(/img/button.gif) repeat 0 0;
    }
Красиво:
.block {
    background:#000 url(/img/button.gif);
    }

Переопределения

Некрасиво:
.block {
    background:#000 url(/img/button.gif) repeat-x;
    }
.block-red {
    background:#F00 url(/img/button.gif) repeat-x;
    }
Красиво:
.block {
    background:#000 url(/img/button.gif) repeat-x;
    }
    .block.red {
        background-color:#F00;
        }

Похоливорим в комментах?

→ 21 CommentsTags:·

Посторонним выход запрещен

January 17th, 2007 · Веб-разработка

Все чаще стал добавлять в ie.css богомерзкое в своей невалидности (по текущей спеке) правило:

#content {overflow-x:hidden;}

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

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

Не всесильно, use with caution.

→ 11 CommentsTags:··

Яндекс, стандарты и кипящий моск

December 7th, 2006 · Веб-разработка

Я слегка погорячился с тем, что обозвал два якобы «невалидных» пунктика в CSS «Яндекс.Открыток» ошибками.

Дело в том, что по умолчанию CSS-валидатор проводит проверку по спеке версии 2.0.
И по ней приведенная ниже строка считается некорректной:

border-bottom:1px solid transparent;

border-bottom transparent is not a color value

Однако если валидировать по спеке версии 2.1, которая всеми нормально мыслящими людьми считается текущей, то данная строка уже не является ошибкой.

Давайте заглянем в спеку. В CSS 2.1:

The ‘border-color’ property sets the color of the four borders. Values have the following meanings:

color

Specifies a color value.

transparent

The border is transparent (though it may have width).

А что у нас в CSS 2?:

The ‘border-color’ property sets the color of the four borders. Values have the following meanings:

color

Specifies a color value.

transparent

The border is transparent (though it may have width).

То же самое. Вот вам и идеальный валидатор, невалидирующий (причем в частном случае валидации по спеке версии 2) корректную конструкцию.

Пройдем чуть дальше. Опять-таки результаты валидации многострадальных «Открыток» по спеке 2.1:

Invalid number : line-height Parse Error – [empty string]

Речь идет о следующем правиле:

line-height:0;

Открываем соответствующий раздел спецификации:

number

The computed value of the property is this number multiplied by the element’s font size. Negative values are illegal. However, the number, not the computed value, is inherited.

Я сам типичный гуманитарий, но что-то не припомню, чтобы ноль был отрицательным числом.

В итоге хотелось бы заметить, что валидатор не должен быть богом разработчика. Иногда полезнее открыть спецификацию и в процессе включить голову. “Берегите себя, играйте в футбол”.

→ 4 CommentsTags:··

Четвертый проект Яндекса, соответствующий стандартам

December 6th, 2006 · Веб-разработка

Вслед за «Музыкой», «Цитатами» и «Погодой» вышел в свет четвертый валидный проект Яндекса — «Открытки».

Для кодирования макета вполне обоснованно в минимальном количестве использованы таблицы (фанатики могут идти лесом). В CSS две ошибки, связанные с необходимыми (лично проверял) хаками.

Сайт отлично работает во всех современных браузерах. Отсутствие резины до 800*600 недостатком счесть так и не смог, хотя старался.

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

→ 35 CommentsTags:·

Opera 7 Float Bug

November 17th, 2006 · Веб-разработка

Думаю, большинство разработчиков уже успели столкнуться с багом при обработке вложенных float’ов в седьмой Опере.

Наиболее часто это всплывает при работе с горизонтальными списками:

ul {
    float:left;
    }
    li {
        float:left;
        }

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

Чип и Дейл спешат на помощь, собственно. Небольшая js-функция, которая возвращает все на свои места (для определения версии браузера используется Browser detect от PPK).

function fixOpera () {
    if (BrowserDetect.version < 8) {
        var listWidth = 0;
        var list = document.getElementById('test');
        var listItems = list.getElementsByTagName('li');
        for (var i = 0; i < listItems.length; i ++) {
            listWidth += listItems[i].offsetWidth;
        }
        list.style.width = listWidth;
    }
}

По необходимости меняем теги на нужные.

Рабочий пример. Для заценки необходима седьмая Опера, разумеется.

→ 10 CommentsTags:··

Одной строкой

November 7th, 2006 · Веб-разработка

Сайт Российского Футбольного Союза — для любителей извращенной семантики.

Какой футбол, такая и бестабличная верстка ;)

→ 16 CommentsTags:

IE 7, conditional comments и хаки

November 2nd, 2006 · Веб-разработка

В свете особенностей нового IE приходится править старые методы использования хаков.

Оптимальным вариантом для меня является подключение специфичного листа стилей для всех IE через conditional comments.

<!--[if IE]>...<![endif]-->

И использование классического сочетания «star html hack» и метода экранирования для старых IE, а также варианта без хаков для седьмого.

В результате в ie.css используются конструкции примерно следующего вида:

#element {
    zoom:1; /* IE 7 */
    }
    * HTML #element {
        height:auto; /* IE 5 */
        he\ight:1%; /* IE 6 */
        }

А у нас в квартире газ А какими методами пользуетесь Вы?

P.S. Пример с height:auto имеет абстрактный характер, height:1% для self clearing вполне достаточно.

→ 24 CommentsTags:····

Вертикальное выравнивание картинок

September 18th, 2006 · Веб-разработка

Очень странно до сих пор наблюдать картинки, выравненные при помощи относительного позиционирования.

Не открою Америку, сказав, что для вертикального выравнивания картинки внутри, скажем, строки текста, существует известное всем css-свойство vertical-align.

Все гениальное просто:

img {
    vertical-align:middle;
    }

Строго говоря, у vertical-align есть весьма интересные значения. Не поленитесь заглянуть в спецификацию и попробовать на практике.

→ 9 CommentsTags:

Старые версии браузеров

September 11th, 2006 · Веб-разработка

Self note, как говорится.

→ 3 CommentsTags: