Search
Write a publication
Pull to refresh
83
0
Павел Ловцевич @lautsevich

CTO

Send message

Автоматизируем клиентскую оптимизацию

Reading time12 min
Views5.5K

Предыстория

Как известно, перед тем, как выложить сайт в нет, мы его разрабатываем. И делаем мы это, как ни странно, на машине разработчика. И давно замечено, что javascript, а в некоторых случаях и css удобнее при разработке держать в нескольких файлах.Проблема в том, что, согласно принципам, описанным в статье Best Practices for Speeding Up Your Web Site (перевод доступен на сайте webo.in), для ускорения загрузки сайта нам нужно произвести следующие манипуляции над javascript и css файлами:
  1. Слить весь javascript в один файл, причем, желательно так, чтобы сохранился нужный порядок — т.е., скажем, библиотека jQuery — была ближе к началу, а функции и объекты, которые ее используют — после нее.
  2. Слить весь css в один файл
  3. Сжать эти большие файлы с помощью какой-нибудь утилиты вроде yui-compressor (за исключением css-файлов, название которых начинается, скажем, с префикса ie_, которые содержат data:URL, и поэтому критично относятся к переходам со строки на строку, так что их для собственного спокойствия лучше не сжимать)
  4. Расположить их в таком порядке — css-файл как можно ближе к открывающему тэгу head, а js-файл — как можно ближе к закрывающему тэгу body.
  5. Выставить HTTP-заголовок expires на подольше, чтобы браузер пользователя их закешировал. Ну а для того, чтобы при следующем билде у пользователя обновился js и css надо этим файлам дать какое-нибудь уникальное имя.
  6. Перед отдачей файлов клиенту сжимать их с помощью gzip

К чему это я?

Пункты 5 и 6 уже подробно расписаны в других местах.
Я же хочу рассмотреть в этой статье вопрос автоматизации пунктов 1,2,3,4. А точнее, я хочу предложить инструмент, с помощью которого одним (ну, максимум — двумя-тремя :) нажатием кнопки можно выполнить пункты 1, 2, 3, 4 настоящего списка и получить готовые к заливке на сервер javascript и css файлы.
Интересно?

Сброс стилей с помощью CSS Reset

Reading time6 min
Views349K
Данная статья — первая из цикла на тему укрощения CSS. Сегодня мы рассмотрим технологию CSS Reset.

Зачем это нужно?


Каждый браузер устанавливает свои значения стилей по умолчанию для различных HTML-элементов. С помощью CSS Reset мы можем нивелировать эту разницу для обеспечения кроссбраузерности стилей.

Например, вы используете элемент a в вашем документе. Большинство браузеров, как Internet Explorer и Firefox, добавляют ссылке синий цвет и подчёркивание. Однако представьте, что через пять лет кто-то решил создать новый браузер (назовём его UltraBrowser). Разработчикам браузера не нравился синий цвет и раздражало подчёркивание, поэтому они решили выделять ссылки красным цветом и полужирным шрифтом. Именно исходя из этого, если вы установите базовое значение стилей для элемента a, то он гарантированно будет таким, каким вы хотите его видеть, а не как предпочитают его отображать разработчики UltraBrowser.

Читать дальше →

Паттерны дизайна веб-форм: формы подписки

Reading time9 min
Views7.2K
Это перевод довольно новой статьи, которая вышла 4 июля 2008 года. Если вы уже читали ее, то навряд ли найдете что-то новое, но для тех, кто не знаком с оригиналом в статье найдется масса интересного. Сначала я хотел перевести и подписи к картинкам, но позже понял, что не стоит этого делать, так как статья ориентирована на грамотного читателя, который способен сам определить простейшие фразы.

UPD: Опубликована вторая часть статьи habrahabr.ru/blogs/ui_design_and_usability/45680


Когда вы хотите увеличить доход вашего сервиса вы должны увеличить количество заполнений ваших веб-форм. Даже, если, на первый взгляд, у вас есть какие-то революционные идеи для того чтобы удивить посетителей, недостаточно просто добавить возможность регистрации на вашем сайте. Для того, чтобы сервис достиг максимальных посещений мы, дизайнеры, должны предоставить пользователю хорошие решения (good user experience). Мы должны завлечь их, описать им, как работает сервис, объяснить им, почему стоит заполнить форму и описать выгоду, которую они от этого получат. И, конечно, мы должны сделать их участие максимально простым.

Тем не менее, разработка дизайна веб-форм — это не простое дело. И здесь есть одна простая причина: никто не любит заполнять формы — ни в оффлайне ни в онлайне. Следовательно, как дизайнеры, мы обязаны найти дизайнерские решения, чтобы сделать заполнение форм делом простым, интуитивным и безболезненным.

Но как на самом деле мы находим такие решения? Где в разметке должна располагаться ссылка на форму? Какой у нее должен быть дизайн? Как мы должны выделить подписи, и какое выравнивание у них должно быть? Какие паттерны дизайна применяются в современных веб-сайтах? Это именно те вопросы, которые мы задавали себе. И чтобы получить ответы мы провели наше обозрение.

Ниже мы представляем результаты обзора по текущим паттернам дизайна веб-форм — результат анализа ста популярных веб-сайтов, в которых веб-формы (должны бы) многое значат. Мы решили начать с форм регистрации. Ниже мы представляем первую часть наших исследований, вторая часть результатов обозрения будет опубликована на следующей неделе [прим. перев. — перевод второй части будет позже].
Читать дальше →

Готовим макет для клиента. Часть II: Если гладить, то как?

Reading time8 min
Views11K

Готовим макет для клиента. Часть II: Если гладить, то как?


Часть I: Гладить или нет?
Часть II: Если гладить, то как?

Итак, в первой части мы рассмотрели доводы «за» и «против» экранного сглаживания. Теперь давайте обратимся к практическим примерам и поговорим о некоторых тонкостях подготовки макета для демонстрации заказчику.

Читать дальше →

Консервация объектов в Python

Reading time2 min
Views45K
В определенный момент любому Питон-программисту понадобится запаковать какой-то объект и спрятать его до лучших времен. Скажем, в config-файл. Или передать через сокет. Как это сделать? Разумеется, можно написать небольшой класс, который будет генерировать и парсить XML-код (кстати, следующая статья как раз будет об этом), но это — слишком большая морока.

Нет! Наш выбор — Pickle!
Но что это?

Готовим макет для клиента. Часть I: Гладить или нет?

Reading time10 min
Views12K

Готовим макет для клиента. Часть I: Гладить или нет?


Часть I: Гладить или нет?
Часть II: Если гладить, то как?

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

Многие дизайнеры достаточно неплохо освоили фотошоп, и научились использовать разнообразные трюки и хитрости для производства ярких и сочных картинок. Глянец и «карамельность» захватили умы многих. На сегодняшний день принято считать, что такой «вылизанный» техдизайн — наиболее дорогостоящий и модный. Хорошо это или не очень — в данном случае не суть важно.

Важно другое. Верхняя половина с шапкой из нереально синего неба, чрезмерно зелёной травки, блестящих хромированных небоскрёбов и пластмассовых людей с приклеенными улыбками — всё это очень нравится клиентам, и сами дизайнеры пузырятся от гордости, показывая подобные коллажики своим коллегам. А вот нижняя половина… Тут, в большинстве случаев, как раз всё очень и очень уныло.

Мне бы хотелось в рамках нескольких статей поговорить на тему подготовки макетов для показа клиентам, а также о том, какие трудности поджидают дизайнера на пути утверждения макета.
Читать дальше →

ТЗ: макеты или текст?

Reading time3 min
Views11K
В заметке ТЗ для web-разработчика автор пишет:
считаю что одно из самых правильных способов подачи информации есть графический, т.е. лучше один раз увидеть, чем сто раз услышать.

Никак не комментируя заметку в целом, хотелось бы сделать несколько замечаний по поводу разных способов представления информации в ТЗ и не только в нём.

Читать дальше →

Свершилось — Jevix 1.0

Reading time2 min
Views2.6K

Jevix — система автоматического применения правил набора текстов (типографика) разработанная в ТМ™ для собственных проектов (Хабр, Кадабра, Дрибблер), с открытым исходным кодом, наделённая способностью унифицировать разметку HTML/XML документов, контролировать перечень допустимых тегов и атрибутов и предотвращать возможные XSS-атаки в коде документов.

В связи с катастрофической нехваткой времени, не смотря на мои обещания, код версии 1.0 выложен только сегодня. Но зато он всё же вышел! Причём вместе с исправлением вчерашнего хабрабага с перечёркиванием текста.

Теперь Jevix доступен на google code. Я не поссорился с Juks — автором perl-версии (если кто что подумал) — просто с google code мне работать проще.
Читать дальше →

Верстаем, верстаем!

Reading time1 min
Views3.8K
После того, как я опубликовал давече тему о создании макета страницы, нам с тов. CurlyBrace пришла в голову одна интересная мысль: а не сделать ли того, что мы умеем делать лучше всего?

Да, вы правы! Денис любезно сверстал данный макет валидным и семантичным XHTML. Он — молодец, а я ему немного в этом подсобил, доделав небольшую деталь. Он большое внимание уделил размеру страницы и её исходного кода.

Come on, user


Внимание: топик не содержит WYSIWYG!

Tip по использованию Git под Windows

Reading time1 min
Views13K
Продолжая статьи о Git, распределенной системе контроля версий, с помощью которой ведется разработка таких проектов как Linux и Ruby on Rails, хотелось бы сказать и несколько слов о работе с ним под Windows.

Официального порта Git под Windows нет, есть mingw+msys порт по адресу code.google.com/p/msysgit/downloads/list

Как-то понадобилось написать проект на ruby под Windows — возникла проблема с виндовым переносом строки, который вставлялся во все файлы автоматически, вследствие чего проект не работал вообще. Оказалось, что для исправления нужно подправить gitconfig, в котором разработчики msysgit предусмотрительно вставили автопостановку CRLF.

Отключается она элементарной правкой gitconfig (можно найти в папке C:\Program Files\Git\etc), меняем содержимое секции core на следующее:
[core]
autocrlf = false
symlinks = false

Надеюсь, совет окажется многим полезным :)

Сборник хаков

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

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

JavaScript библиотека «Raphaël» — SVG расцветает, SVG и iPhone

Reading time1 min
Views3.2K
Raphaël — это небольшая JavaScript библиотека с простым синтаксисом для работы с векторными форматами: SVG и VML (для IE). Впрочем, как я успел заметить у разработчика возникают проблемы с VML (когда многие вещи в SVG делаются очень просто в VML не всегда есть простая альтернатива)

часы
Читать дальше →

Статистика Google Analytics на вашем сайте

Reading time6 min
Views17K
Помню, как-то проскакивала пара записей (здесь и здесь) по поводу импортирования данных из Google Analytics для отображения сводных диаграмм на сайте, в общем, как на хабре. Прочитав вышеупомянутые топики и не обратив особого внимания тогда, я о них успешно «забыл» и пошел себе дальше. И вот сейчас, появилась необходимость реализовать нечто подобное на одном из своих проектов.

image

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

UPDATE:
Добавил еще одну версию, подробности и линк под катом.

Читать дальше →

Полномасштабная разработка проекта

Reading time2 min
Views1.6K
Чего-то сегодня не спится совершенно… Возможно это тот самый знак, которого я так долго ждал? А знак мне нужен был, что бы решиться начать серию статей на основе реальной разработки проекта средних масштабов. Но не просто разработке в общем смысле этого слова, и даже не о разработке на основе Zend Framework, Doctrine ORM и пр. и пр., а о разработке начиная с постановки задачи, анализа и проектирования (с необходимой степенью глубины), поиска решений и реализации.
И раз уж первый абзац уже набран, то смысла останавливаться не вижу :) Приглашаю всех поучаствовать в процессе, который будет проходить на основе UP.
Читать дальше →

Таблица значений отступов от букв до верха и низа строки

Reading time1 min
Views1.5K
Предлагаю вашему вниманию таблицу значений отступов от букв до верха и низа строки, для стандартного значения line-height.
Эта таблица нужна для точного определения padding или margin обрамляющего или близлежащих элементов.

Вот картинка-легенда, чтобы было понятно о чем речь:
легенда
Читать дальше →

jQuery для начинающих. Часть 2. JavaScript Меню.

Reading time8 min
Views46K


В первой части были рассмотрены базовые принципы работы селекторов и приведены несколько примеров, в данной статье я постараюсь акцентировать внимание на реализации JavaScript меню для Вашего сайта.

Если Вам готовый код наглядней документации, то переходим от слов к делу, т.е. на страницу с примерами.
Читать дальше →

jQuery in Action. Глава 2

Reading time9 min
Views23K
Как я и обещал, вторая глава из книги «jQuery in Action» (авторы Bear Bibeault и Yehuda Katz). Как и из первой главы, выбрал все самое вкусное и интересное ;-)

Напоминаю, что первую главу можно прочесть здесь.

Читать дальше →

jQuery in Action. Глава 1. Введение в jQuery.

Reading time3 min
Views21K
Как я уже писал, я начал читать книгу «jQuery in Action» (авторы Bear Bibeault и Yehuda Katz). В данной серии статей (а я планирую довести дело до конца) я буду выкладывать самые интересные моменты из каждой главы этой книги. Это будут основные идеи, примеры или и то и другое вместе :-)

Читать дальше →

jQuery для начинающих

Reading time9 min
Views515K
jQuery Logo

jQuery — это замечательный JavaScript Framework, который подкупает своей простотой в понимании и удобством в использовании. Но изучение надо с чего-то начинать, и лично моё мнение — лучше всего начинать с наглядных примеров, и они далее…

Читать дальше →

Как найти нужный шрифт, не зная его названия?

Reading time3 min
Views409K
Я уверен, что у любого дизайнера был такой момент, когда он видел где-то какой-то шрифт, который так мог бы пригодится в проекте, но… что за шрифт?.. Ответ на этот вопрос затаился в глубине Вашего сознания, либо в глубине Вашего «незнания» (что разумеется простительно).



В этой статье мы рассмотрим несколько ресурсов, которые могут помочь вам в идентификации понравившегося шрифта.

Конечно, нельзя рассчитывать, что эти источники дадут вам 100 процентную уверенность в том что вы найдете нужный шрифт, но что помогут, так это точно.
Читать дальше →

Information

Rating
Does not participate
Location
Poznan, Wielkopolskie, Польша
Date of birth
Registered
Activity