Search
Write a publication
Pull to refresh
5
0
Виталий @orloff

Пользователь

Send message

Многоуровневое дерево с маркерами (только HTML, CSS, без Javascript)

Reading time5 min
Views24K
Многоуровневое дерево с маркерами (только HTML, CSS)До того как заняться верской гитарных аккордов (статьи 1,2,3) я столкнулся с необходимостью сделать человеку на сайте меню-дерево. Рисовать не хотелось вообще, поэтому я взял старый добрый HTML с CSS и начал делать это дерево, начал с простого одноуровневого, а позже сделал многоуровневое с маркерами, которое и представлю.

Позже это дерево дало мне плоды в виде habrahabr.ru/blogs/css/53792
Читать дальше →

10 отличных приемов с .htaccess для WordPress

Reading time4 min
Views33K
Внимание!
Перед изменением файла .htaccess не забудьте сделать его резервную копию.


1 — Перенаправляем WordPress RSS поток на feedburner с использованием .htaccess
Почему некоторые вебмастера не используют feedburner? Ведь это такой замечательный инструмент для контроля за подписками на RSS. Проблема в том, что приходится руками исправлять файлы шаблонов. Этот прием поможет сохранить Ваше время.
И не забудьте исправить в строке 6 на Ваш код

<IfModule mod_rewrite.c>
 RewriteEngine on
 RewriteCond %{HTTP_USER_AGENT} !FeedBurner    [NC]
 RewriteCond %{HTTP_USER_AGENT} !FeedValidator [NC]
 RewriteRule ^feed/?([_0-9a-z-]+)?/?$ httр://feeds2.feedburner.com/wordpress[R=302,NC,L]
</IfModule>


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

Масштабируемая картинка на фоне сайта

Reading time4 min
Views20K
Задача:
Дизайнер нарисовал макет страницы, на заднем фоне которой была картинка. Я сначала было решил, что это фон который увеличивается по ширине в зависимости о разрешения монитора.
Но не тут то было. Дизайнер настаивал на то, что это масштабируемая картинка, которая сужается / растягивается при изменение окна приложения и по ширине и по высоте.
Заранее предупредив заказчика – что картинка будет грузиться 1 и в максимальном разрешении – его определили как 1600, приступил к работе.
Смотрим что получилось ...

8 отличных хитростей jQuery

Reading time4 min
Views28K
imageКому не нравится jQuery? Это быстрая и простая javascript-библиотека стала очень популярной в 2008 году. В этой статье я собрал список восьми очень полезных jQuery-техник, советов и хитростей.
Читать дальше →

PHP Speedy — наше все

Reading time2 min
Views1K
PHP SpeedyЧто такое PHP Speedy? Это набор php-скриптов, которые позволяют объединять и сжимать CSS- и JS-файлы для веб-сайта, написанного на PHP. Изначально разрабатывался как приложение к Wordpress, но сейчас получил более широкое распространение.

PHP Speedy был выбран в качестве основы для начала разработки Web Optimizer — веб-приложения, автоматизирующего клиентскую оптимизацию. Предполагается, что такое приложение можно будет максимально быстро и максимально легко развернуть на любой платформе, а оно уже само позаботится о всех действиях, связанных со скоростью загрузки страницы.

Как показала практика, клиентская оптимизация интересует большой круг людей. Но очень многих останавливает то, что нужны специальные знания для освоения этой области. Web Optimizer создается как раз, чтобы убрать этот барьер (и как наш ответ Чемберлену www.getrpo.com :).
Читать дальше →

Полный AJAX. Теория и Примеры. Фишки и Фичи

Reading time8 min
Views34K
По многочисленным просьбам начинающих (и не только) AJAX разработчиков, решил выделить часть своего времени для описания некоторых хитростей и приемов, которыми пользуюсь при построении сложных, динамических веб-приложений. Статья представляет из себя смесь теоретических выкладок и практических примеров.

Наибольшие трудности при построении сайтов c применением AJAX возникают при реализации механизма AHAH (Asynchronous HTML and HTTP). Особенно выполнение на лету подгружаемых Javascript-ов. Также есть куча дополнительного «гемороя» при разработке AJAX сайтов и веб-приложений. Вы можете ознакомится с детальным описанием некоторых существующих проблем. Из-за указанных сложностей, многие разработчики отказываются от более насыщенного внедрения AJAX.

Однако, мало кто знает, что перечисленные проблемы можно решить.
Читать дальше →

Архитектура CMS. Модель данных. Часть 1

Reading time8 min
Views6.5K
Система управления содержимым (CMS) обязана предоставить гибкие всеохватывающие функциональные возможности для управления содержимым сайта, облегчить работу администратора-конфигуратора и способствовать созданию удобного в использовании сайта. Содержимым сайта можно назвать новости, размещенные на нём, а также статьи, комментарии, фотографии. Содержимым также являются целые структуры информации: новостные ленты, каталоги, форумы, блоги. Обобщенно: содержимое – это данные, размещенные на сайте.

CMS может просто передавать данные по запросу клиентскому приложению, например сетевой программе, flash-клипу или AJAX-приложению. Но чаще всего, CMS предоставляет клиенту уже подготовленные для отображения данные в HTML формате. В этом случаи, для обеспечения доступности, легкости восприятия и удобства пользования содержимым, выполняется стилизация и объединение его с элементами оформления (темы, шаблоны), навигации (меню, ссылки) и управления (формы и ссылки тоже), и всем этим тоже нужно управлять.

Идея


Окружающий мир воспринимается нами объектным, мы мыслим «объектами», в наших умах выстраивается объектная модель мира. Поэтому нам не составит труда создать объектную модель содержимого сайта и управлять ею. Новости, товар в каталоге, сообщения на форуме и сами форумы, и все другое можно представить в виде объектов. Устанавливая связи между объектами, можно создавать структуры данных любой сложности, от добавления комментариев к статьям до создания социальных сетей и более.

Объекты, классы и связи данных – это информация, которую нужно уметь создавать, хранить, использовать, изменять и удалять. В нашем распоряжении реляционная база данных для хранения информации. Действия же совершаемые с информацией – часть логики функционирования CMS, которая в большей части будет реализована модулем данных Data.
Читать дальше →

Обслуживание тысяч запросов в секунду на примере XBT Tracker

Reading time5 min
Views8.2K
Недавно проводили тест, результаты которого показали, что одно приложение обрабатывает 2000 запросов в секунду на скромном сервере, где это было не единственной нагрузкой. При этом результат каждого запроса записывается в 3-5 таблиц в MySQL. Честно говоря, меня такой результат удивил, поэтому решил поделиться с хабрасообществом описанием архитектуры этого приложения. Подобный подход применим от баннерных показов до чатов и микроблогов, надеюсь кому-нибудь покажется интересным.

Во-первых, это приложение однопоточное. Всё делается одним процессом, работа с сокетами — неблокирующими epoll/select, никаких ожидающих ввода/вывода потоков (threads). С развитием HTTP, сначала появлением Keep-Alive, затем AJAX и набирающим популярность COMET, количество постоянных соединений с веб-сервером растёт, на нагруженных проектах измеряется тысячами и даже десятками тысяч, и если для каждого создавать свой поток (thread) со своим стеком и постоянно переключаться между ними — ресурсов сервера очень быстро не хватит.

Второй ключевой момент — что один SELECT… WHERE pk in (k1, k2, ..., kN) выполняется быстрее, чем несколько SELECT… WHERE pk=… Выполняя работу с базой данных большими пачками можно уменьшить не только число запросов в секунду, но и общую нагрузку.
Читать дальше →

Кропотливая оптимизация PHP-приложений (рассматриваю PHP5, но большинство справедливо и для 4-й ветки)

Reading time9 min
Views8.9K

Когда во сне снится «ой а если сервера не хватит...»


Для начала, Доброй Ночи. Пишу что-то полезное вроде впервые (если не считать разного рода полу-тестов в моём блоге). Человек я допытливый до жути, неожиданно в голову пришло, что могу помочь сэкономить кому-то много времени ;).


танцуем с бубном

Закрепляем jQuery — 25 отличных советов

Reading time19 min
Views168K
Перевод отличной статейки. Думаю, будет полезна как новичкам, которые только приступили к использованию jQuery, так и тем, кто уже какое-то время с ним работает. А кого-то, возможно, заставит глянуть эту чудесную библиотечку. Многие советы имеют отношение не только к jQuery, но и к JavaScript в целом. Лично для меня была весьма и весьма познавательной, посему и захотелось донести это «до масс». Перевод не дословный, но передающий смысл и максимально адаптированный к русскому языку.

Далее все написано от имени автора оригинальной статьи.

Введение


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

Я не эксперт в jQuery. И даже не претендую, поэтому, если встретите ошибки, смело поправляйте меня и вносите предложения по улучшению (поправлять и присылать поправки нужно автору статьи, а не перевода — зам. пер.).

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

Содержание


  1. Загружайте фреймворк с Google Code
  2. Используйте «шпаргалку» (cheat sheet)
  3. Соединяйте все ваши скрипты и уменьшайте размер файла
  4. Используйте возможности Firebug для ведения логов
  5. Минимизируйте операции выборки в пользу кэширования
  6. Сводите манипуляции с DOM-деревом к минимуму
  7. Оборачивайте все в единый элемент, когда речь идет о любой вставке в DOM
  8. Используйте «id» вместо классов, где это возможно
  9. Задайте контекст своим селекторам
  10. Используйте последовательности вызовов методов с умом
  11. Научитесь правильно использовать анимацию
  12. Научитесь назначать и делегировать события
  13. Используйте классы для сохранения состояния
  14. Еще лучше — используйте встроенный в jQuery метод data() для сохранения состояния
  15. Пишите собственные селекторы
  16. Подготавливайте HTML и модифицируйте его, когда страница загружена
  17. Используйте «отложенную загрузку» (lazy loading) для определенного контента для выигрыша в общей скорости и преимуществ для SEO
  18. Используйте служебные функции jQuery
  19. Используйте «noconflict» для переименования глобального объекта «jquery», когда используете его с другими фреймворками
  20. Как узнать что картинки загружены?
  21. Всегда используйте последнюю версию
  22. Как проверить, что элемент существует?
  23. Добавляйте класс «JS» в элемент «html»
  24. Возвращайте «false» для отмены поведения по-умолчанию
  25. Короткая запись для события готовности документа


Rock'n'Roll!

Укрощение iTunes с помощью XCode и scripting Bridge.

Reading time4 min
Views1.7K
Прошлым летом случилось страшное… Накрылся винт в моем МакБуке. Все важные данные были легко восстановлены. Слава Машине Времени! А вот музыкальной коллекции, которую я кропотливо взращивал годами, не повезло. Саму музыку восстановить не проблема, а вот рейтинги и количество прослушиваний, чья история уходит корнями в самое появление iTunes под Windows, ой как жалко. Пережила фонотека многое, в том числе перенос с Windows на Хакинтош, а затем и на МакБук.

Благо мадиатека была потеряна не вся — остались рожки да ножки, а точнее заветный файл "iTunes Library". На днях я решился его реанимировать.

Решение под Mac OS


imageОчевидное решение — использовать AppleScript. С помощью него практически любое приложение в Mac OS можно автоматизировать. Язык настолько близок к английскому и далек от других языков программирования, что ввел меня в ступор. Я не знал с какой стороны к нему подступиться.
Пришлось использовать XCode и немного знакомый Objective-C. Работа с XML не вызвала практически никаких проблем. NSXML… и MSXML оказались API очень похожими не только названием.

С общением с iTunes дела обстоят сложнее. Помимо собственно AppleScript, который можно использовать в проектах XCode, я нашел всего два способа. Оба по сути являются обертками для AppleScript.
Читать дальше →

20 «НЕ» для веб-дизайнеров

Reading time6 min
Views12K

У каждого дизайнера есть ряд правил, которыми он руководствуется в своей работе. И нередко памятки, составленные из таких правил от опытных дизайнеров служат хорошим подспорьем для начинающих. Некоторое количество таких правил у меня есть тоже. Правда, они касаются того, чего НЕ следует делать при изготовлении макета. Некоторые могут показаться банальными и очевидными, другие даже вызовут у кого-то недоумение. Но мне они очень помогают и, я надеюсь, какие-то из них так же будут полезны тем, кто занимается веб-дизайном или желает приобщиться к этой области разработки сайтов.
Читать дальше →

Сервис для создания CSS Layout

Reading time1 min
Views748
image
Пожалуй, представлю вам на суд недавно обнаруженный сервис, надеюсь, он успешно пройдёт тест на полезность и сразу же пригодится.

Первым делом, перед версткой, веб-мастер, понятное дело, должен определиться со структурой макета – то ли это будет стандартный шаблон с боковой колонкой справа, то ли это будет совсем уж уникальный макет не похожий по своей структуре ни на что. В первом случае, обычно, у опытных верстальщиков уже есть свои заготовки, что б ускорить процесс и не придумывать велосипед. Но не у всех же эти заготовочки есть, правда?
Читать дальше →

Проверка файла на наличие / существование

Reading time2 min
Views88K
Порой мы отображаем на сайтах контент с других ресурсов: картинки или фавиконы. Некоторе браузеры просто оставят пустое место (Firefox), другие же отобразят уродский прямоугольник, явно указывая, что чего-то не хватает (IE). Как же можно средствами PHP проверить существование файла.

Есть функция file_exists(), но она хороша только для файлов в пределах нашей файловой системы, а с удаленным сервером не пройдет.

Есть вариант открывать файл на чтение и в случие ошибки констатировать факт, что файла не существует:
<?
// файл, который мы проверяем
$url = "http://url.to/favicon.ico";

// пробуем открыть файл для чтения
if (@fopen($url, "r")) {
echo "Файл существует";
} else {
echo "Файл не найден";
}
?>


Однако такой прием занимает достаточно много времени.

Есть вариант еще лучше — использовать функцию get_headers():
она делает запрос к файлу и получает все заголовки с ответом примерно в таком массиве
Array
(
[0] => HTTP/1.1 200 OK
[1] => Date: Sat, 29 May 2004 12:28:13 GMT
[2] => Server: Apache/1.3.27 (Unix) (Red-Hat/Linux)
[3] => Last-Modified: Wed, 08 Jan 2003 23:11:55 GMT
[4] => ETag: "3f80f-1b6-3e1cb03b"
[5] => Accept-Ranges: bytes
[6] => Content-Length: 438
[7] => Connection: close
[8] => Content-Type: text/html
)


Как мы видим, в нулевом элементе есть код ответа, 200 значит, что файл существует, и мы спокойно можем получить к нему доступ.
Вот код, который проверит существование файла.

<?
// файл, который мы проверяем
$url = "http://url.to/favicon.ico";
$Headers = @get_headers($url);
// проверяем ли ответ от сервера с кодом 200 - ОК
//if(preg_match("|200|", $Headers[0])) { // - немного дольше :)
if(strpos('200', $Headers[0])) {
echo "Файл существует";
} else {
echo "Файл не найден";
}
?>


Теперь сравним по времени два метода с существующей favicon и с несуществующей:
при несуществующем файле второй метод (get_headers) выигрывает на две сотые секунды.
при существующем файле оба метода показали примерно одинаковое время.

Firebug: Part 1 — console

Reading time2 min
Views7.9K
Данной статей я хочу начать серию, посвященную всеми любимому Add-on к Firefox под названием Firebug.

Весь цикл: Console, Commands, Debugging ,Profiling

Я постараюсь раскрыть известные и не очень его возможности, которые могут пригодиться любому Web-разработчику(а могут и не пригодиться, но это врядли).

Если у вас его еще нету, то можно скачать со страницы http://getfirebug.com.

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

FireScope новый девелоперский плагин для Firefox

Reading time1 min
Views712
image
Итак, SitePoint выпустили новый плагин, а точнее надстройку для Firebug.
Плагин предоставляет более продвинутый референс для каждого html элемента. Показывает уровень поддержки того или другого элемента в определенном браузере, также известные баги.
Читать дальше →

Пишем Referrer tracker: мал да удал, с хранимыми процедурами MySQL

Reading time4 min
Views3.6K
Часто возникает желание посмотреть отуда приходят люди на ваш сайт, дабы пойти туда почитать что про нас любимых пишут, и рьяно вступить в полемику не отходя от кассы. Казалось бы, такая популярная штука как Google Analitycs должна делать это, но есть одна проблема — в отчете отрезаются GET-параметры, и если вы видите что ссылка с огромного форума, то вам еще предстоит найти нужную тему, что отнимает время (стоит упомянуть, что Google Analitycs требует дополнительного JS кода на страницах, что также отнимает время и трафик).
Дальше кратко про альтернативы и вперед изобретать велосипед

Редактор для хабра

Reading time2 min
Views937

Хабра редактор.


Предыстория

Делал для своего блога online редактор контента. Причем я привык пользоваться обычным редактором типа notepad++. Я не сторонник WYSIWYG редакторов, поэтому сделал свой редактор на основе обычного textarea. Какие же преимущества у редактора?
  1. Удобная панель инструментов в стиле Office 2007 (на скока покажет практика)
  2. Поддержка горячих клавиш (почти на весь функционал)
  3. Tab ставит именно табуляцию, а не прыгает на следующий элемент (ставит 4 пробела)
  4. Shif+Tab удаляет табуляцию
  5. Умный Enter (при переносе вставляет табуляцию как у предыдущей строки для выравнивания)
  6. Shift + Enter вставляет перенос строки в стиле HTML тег

К чему это я клоню?

Мне показалось это удобно по этому я решил, поделиться этим счастьем с другими, и сделал сервис для написания статей для хабра. А так как на хабр пишут много кода, решил реализовать и подцветку кода используемую на моем блоге. А так как добрый хабр вырезает все не угодные ему теги, а я использую библиотеку GeSHi. Пришлось немного доработать напильником, и теперь у хабросообщества появилась возможность писать код в красках. А так как эта библиотека довольно популярна она может подсвечивать более 80 языков. Подцветка реализуется прямо в тексте статьи, надо просто указать класс для тега code вот так <code class="html"></code >.
Если не хотите чтобы подцвечивал, то не надо не чего указывать тогда он просто отформатирует отступы без подцветки.

Также был подключен типограф подробнее, что он может, можно посмотреть здесь*4.
Читать дальше

ajax загрузка нескольких файлов с php формой

Reading time2 min
Views36K
Как-то для личных целей мне понадобилось сделать ajax загрузку сразу нескольких файлов. Но хотелось сделать это красиво и удобно.
Для этой задачи я выбрал горячо мной любимый jquery и несколько плагинов к нему.
подробнее

Information

Rating
Does not participate
Location
Москва, Москва и Московская обл., Россия
Date of birth
Registered
Activity