«Класситус» и оптимизация
21.12.2010
На прошедшей 16 декабря встрече-конференции «Web Standards Days» Вадим Пацев рассказывал про общую идеологию вёрстки проектов в Яндексе. Идеология скрывается под дурацкой аббревиатурой БЭМ и обладает собственным клубом на Я.ру.
Один из ключевых моментов — отказ от селекторов элемента в пользу селектора классов, поскольку это существенно (когда счёт идёт на миллисекунды) ускоряет рендеринг страницы. То есть вместо p {} рекомендуется использовать .base {}, к примеру. Да, именно так, добавлять классы ко всем элементам, которые нужно стилизовать. Кроме того, это позволяет избежать переопределений и конфликтов наследования.
Разумный аргумент против — «ведь у нас много параграфов, добавление классов увеличит объём страницы!». Но намного ли? На главной странице kremlin.ru — 23 тега p. Добавив к каждому из них class=base мы увеличим объём страницы на 230 байт. При общем объёме страницы в 56 кб это просто ничтожно малая величина. Так что на этих спичках точно не стоит экономить, лучше удалить переносы строк и пробелы или оптимизировать картинки.
Остаётся только один-единственный аргумент против указания классов всему подряд: «Мне лень везде писать эти дурацкие классы». Но и тут можно найти решение, взяв на вооружение регекспы или zen coding.
Примечание: я специально не ставил кавычки вокруг имении класса для ровного счёта, в реальной жизни так делать нельзя.
При работе со скриншотами часто приходится масштабировать изображение целиком или отдельные его кусочки. Настройки масштабирования по умолчанию никуда не годятся, смотрите сами:
Причина замыливания — включённое сглаживание. Оно помогает при использовании Photoshop по прямому назначению, то есть для обработки фотографий. Но при работе с пиксельной графикой нужно всё взять и поменять.
Идём в настройки Photoshop (Edit > Preferences > General или Photoshop > Prefeneces > General) и устанавливаем параметр Image Interpolation в значение «Nearest Neighbor». Нажимаем Ok и с этого момента Photoshop перестанет пытаться сглаживать пикселы при любом масштабировании, в том числе и при Edit > Free Transform. Стоит помнить, что нормальный результат возможен только при изменении масштаба в целое число раз (200%, 300% и т.д.).
Ну и естественно, никакого jpg при сохранении результата. Только png или gif.
Не такое и низкое разрешение
03.11.2010
Сколько себя помню, экранная графика причислялась к графике с низким разрешением. Вот полиграфия — полиграфия это да, это триста дипиай и всё такое.
Однако мир не стоит на месте и в один дюйм матрицы помещается всё больше и больше пикселов, поэтому возник вопрос — а такое ли оно низкое, это экранное разрешение? В ходе расследования выяснил, что не гигантское, конечно, но и не маленькое.
Чуть в сторону теории: под разрешением я понимаю количество точек (пикселов) на дюйм, то есть то, что принято считать разрешением печатного оттиска. Разрешение монитора вида 1280×800 — это совсем другая история.
Как посчитать разрешение? Нужно взять общее количество пикселов по одной стороне монитора и поделить на длину стороны в дюймах. Здесь нам поможет теорема Пифагора и немного мозга.
Имеем на входе параметры матрицы в пикселах и диагональ матрицы в дюймах (здесь кроется причина погрешностей — я не уверен, что 15″-ая матрица будет иметь строго 15 физических дюймов по диагонали). Теорема Пифагора, для тех, кто не знал, да забыл: сумма квадратов катетов равна квадрату гипотенузы.
Квадрат гипотенузы – длина диагонали в квадрате. Нам же нужна длина одного из катетов. Составим пропорцию:
A²+(H/W×A)²=D²,
где A — ширина монитора в дюймах, H — высота матрицы в пикселах, W — ширина матрицы в пикселах, D — диагональ монитора в дюймах.
Всё, у нас уравнение с одним неизвестным, ловим восьмиклассника и заставляем решить его за мороженое.
Для тех, кому хочется сразу получить ответ (ppi — потому что считал pixel per inch, а не точки растра):
- Стандартный 15″ ноутбук (1280×800): 101 ppi;
- MacBook Pro (1440×900): 110ppi;
- MacBook Pro HiRes (1680×1050): 128ppi;
- Плохой 15″ ЭЛТ (800×600): 67ppi;
- Стандартный 19″ ЖК (1280×1024): 86ppi;
- iPhone 4 (3.5″, 960×640): 329ppi.
Получается, что для того, что бы получить стандартные 72dpi нужно очень сильно постараться поискать монитор похуже, да подешевле. Среднее значение примерно соответствует разрешению хорошей газеты. И это я даже не пытаюсь говорить про то, что в реальном оттиске большую роль играет линиатура и расстояние просмотра, а вовсе не разрешение. А экранное разрешение вовсе не низкое, а довольно-таки среднее.
Обязательные дополнения к Eclipse
30.10.2010
Я долгое время выбирал для себя удобную среду разработки. Перепробовал кучу всего, от Notepad++ до Dreamweaver и IntelliJ Idea, но остановился в итоге на Eclipse. Не потому что она самая лучшая – она и потормозить любит, и поглючить – а потому что работает везде, и дома под виндой, и под линуксом, и на MacOS.
Но «голая» Eclipse – вещь совершенно для меня бесполезная, нужно ставить расширения. За последние пару дней я решил обновить Eclipse на всех своих компьютерах до версии 3.6, а это потребовало переустановки расширений. Ну а что бы в следующий раз не вспоминать, что мне нужно – запишу тут единым списком.
Подключаем репозитории
Расширения хранятся в репозиториях. В свежую Eclipse они не включены, поэтому добавляем ручками:
Help > Install Software… нажимаем кнопку Add… и в поле Location вставляем http://download.eclipse.org/releases/helios – это основной репозиторий расширений Eclipse.
После добавления репозитория IDE получит список расширений и сгруппирует их по типам. В результате одно и тоже расширение может оказаться в нескольких местах.
Я сразу ставлю следующие:
- Collaboration:
- Eclipse EGit
- Eclipse JGit
- Subversive SVN Team Provider
- General Purpose Tools
- PHP Development Tools
- Remote System Explorer End-User runtime
- Remote System Explorer User Action
- Web, XML, and Java EE Development
- Eclipse Web Developer Tools
- Eclipse XML Editors and Tools
- Eclipse XSL Developer Tools
- Rich Ajax Platform (RAP) Tooling
- Web Page Editor (Optional)
Два раза нажимаем Next, подтверждаем согласие с лицензиями и Finish.
Если при установке выскакивает сообщение, что мы пытаемся поставить неподписаное расширение – придётся согласиться с этим, после установки Eclipse предложить перезапуститься или просто применить изменения. Раньше я экономил полминуты и нажимал Apply Changes, но сейчас соглашаюсь на перезапуск. После перезапуска получаем Eclipse с которой уже можно работать.
Кодировки из коробки
10.10.2010
Все проекты, с которыми я работал в последнее время, используют кодировку utf8, и всё было хорошо, пока файлы лежали на сервере. Но в какой-то момент мне надоело из-за любой мелкой правки ползать куда-то там по ssh, да и сетевые задержки иногда утомляли. Тогда я решил в очередной раз поднять локальный сервер.
Процедура установки LAMP-сервера на ubuntu не представляет собой никаких сложностей, всё ставится из репозитория. На Windows был установлен Denwer, который так же ставится буквально одной кнопкой. А вот дальше началось веселье.
Пингвин с вопросами
После поднятия проекта из svn-репозитория и импорта mysql-дампа открываю страницу в браузере и вижу смесь «французского с нижегородским»: где-то нормальная кириллица, а где-то вопросительные знаки. Это «где-то» оказалось результатами выборки из mysql. Многочисленные эксперименты по смене сопоставления ни к чему не привели и поэтому я полез читать интернет. Решение было найдено быстро:
- Открываем /etc/mysql/my.cnf
- Находим секцию [mysqld]
- Добавляем две строчки
skip-character-set-client-handshake
default-character-set=utf8
Первая заставляет mysql игнорировать кодировку, которая пришла от клиента и использовать кодировку по умолчанию. Кодировка по умолчанию как раз и выставляется вторым параметром.
Не забываем перезапустить mysql-сервер:
$ sudo service mysqld restart
Это не по-джентельменски
В джентельменском наборе веб-разработчика всё оказалось немного хуже. В этом во многом замечательный продукте везде гвоздями прибито использование кодировки windows-1251. Дескать на винде работаем, вот и кодировку берём от неё.
Для наставления Денвера на путь истинный нужно исправить конфигурационные файлы апача и mysql.
Настройки для веб-сервера apache ( %Denwer%/usr/local/apache/conf/httpd.conf, где %Denwer% – каталог, в который вы установили Denwer):
- Находим директиву
AddDefaultCharset windows-1251(примерно 484 строка файла) - Меняем на
AddDefaultCharset utf-8
Настройки для сервера mysql ( %Denwer%/usr/local/mysqld-5.1/my.cnf):
- Находим строки
default-character-set = cp1251
init-connect = "set names cp1251"
- Меняем на
default-character-set = utf8
init-connect = "set names utf8"
Перезапускаем Denwer и наслаждаемся нормальными русскими буквами.
