Архив за Март 2009

  • Знакомство с Ant

    3 марта 2009

    Краткое введение по автоматизации рутинных задач в IDE. Тут обсуждают статью и задают вопросы.

    Метки: ,
    12 комментариев

  • SVG вместо Canvas

    3 марта 2009

    По наводке товарища Bolk решил проверить, насколько сложно генерировать графику в SVG и использовать ее в качестве фона у элемента. Оказалось, совсем не сложно (смотреть надо в Опере и Сафари): создаем строчку, содержащую код SVG, кодируем на лету алгоритмом base64 и вставляем как background у элемента. Код кодировщика совсем небольшой, взял его отсюда и вынес в отдельный namespace. У Firefox есть встроенные методы: window.atob() и window.btoa(), но они вроде как сломаны во второй версии браузера.

    Какия я вижу плюсы и минусы при использовании SVG и Canvas:

    • У сanvas есть метод toDataURL(), который позволяет получить нарисованную картинку в формате data: URL. Этот метод не работает в Safari.
    • С другой стороны, Firefox упорно требует перевести документ в XHTML-режим для отображения SVG (для справки: переключение в XHTML-режим выполняется не доктайпом, а заголовком Content-Type: application/xhtml+xml, который должен послать сервер). Я пока не готов это делать — и так проблем с браузерами хватает, не хочу создавать новые.
    • У SVG объективно больше возможностей. Хотя бы работа с текстом.
    • Некоторые вещи гораздо проще нарисовать/стереть в canvas.
    • В SVG гораздо проще модифицировать уже «нарисованные» объекты.
    • Safari оказался довольно чувствительным к сгенерированной SVG-картинке в качестве фона у элемента: если этому элементу добавить border, то SVG не отобразится.
    • Вопрос о производительности и потребляемых ресурсах пока остается открытым.

    Хочу найти универсальный способ рисования графики, работающий во всех (кроме IE) браузерах и внедрить в rocon. Это нужно потому, что встроенные в Safari и Firefox методы рисования далеки от идеала, иногда нужно и вручную нарисовать уголки. Например, ни один из браузеров не добавляет скругленные уголки картинкам, Safari сносит башню от бордюров разной толщины, да и рисует он не совсем корректно.

    Метки:
    8 комментариев

  • Трудности разработки

    3 марта 2009

    Есть такой браузер (не будем тыкать пальцем), который при работе над проектом постоянно старается испортить тебе жизнь. В случае с проектом rocon таким браузером оказалась Opera.

    Сначала она упорно не хотела показывать половину созданных уголков, прочухивалась только тогда, когда я переключался между окнами либо скроллил документ (ау, Опера! такие баги тянутся еще с 7 версии). Чтобы исправить это, нужно было вызвать repaint всего документа. Самым безобидным оказалось такое решение:

    document.documentElement.style.outline = 'none';

    Но, как оказалось, это было только началом эпической ебли с браузером. Решил проверить работу библиотеки на существующем проекте: добавил где-то 50 блоков на один из своих сайтов. Во всех браузерах уголки создавались где-то за 0,6 секунды. Проверил в Опере — 23 секунды. Около часа понадобилось чтобы найти проблемное место: оказалось, что на скорость повлияло свойство overflow: auto у одного из родительских элементов. Когда я его убрал время создания снизилось в 2—3 раза (не помню точно, на сколько именно, но прирост в скорости был существенным). На тот момент я немного подзабил на rocon, так как было много важных дел. Сегодня решил продолжить работу и начал с попытки воссоздать ту ситуацию с overflow, чтобы найти решение проблемы. У меня ничего не вышло: обычный родительский блок с overflow: auto давал ту же скорость, что и блок без него. Вероятно, проблема в макете сайта «дополнялась» другими элементами и стилями, разбираться в которых было лень (там HTML и CSS-кода килов на 200).

    До истинной (как мне кажется) сути проблемы допер совершенно случайно, потратив еще минут 30 драгоценного времени. Я уже знал, что узким местом в rocon являлось получение текущего значения CSS-свойств элемента через getComputedStyle(). Проблема оказалась в следующем: тормозит одновременная модификация дерева документа (создание новых элементов) и получения стиля. То есть если разбить один цикл на два — сначала создаем все элементы, потом получаем их свойства — все работает замечательно. Для любопытствующих выложил пример.

    И эти люди обвиняют Майкрософт в том, что IE тормозит развитие интернета.

    Метки:
    20 комментариев

новое →