• Arctext.js - Искривления текста с CSS3 и JQuery

    При помощи CSS3 Вы можете вращать вокруг своей оси отдельные буквы, однако довольно сложно будет выстроить каждую букву по некой криволинейной траектории. Arctext.js является JQuery плагином, который делает именно это. Основанный на Lettering.js, он вычисляет угол вращения каждой буквы и распределяет буквы одинаково по всей мнимой дуге заданного радиуса.

    Arctext.js - искривления текста с CSS3 и JQuery

  • CKEditor в Joomla

    Всем хороша Joomla. Ее структура лично у меня вызывает как восхищение, так и негодование. Изучив ее, я на ура воспринял идею плагинов и создал у себя в Xdan CMS их аналог. Но есть в Joomla и минусы. К примеру, стандартный редактор TinyMCE. Он не имеет своего файлбраузера. Код получается не валидный. Но есть и бытовые составляющие его непригодности.

    Во-первых, релизы CMS случаются реже, чем развиваются современные WYSIWYG редакторы. Новые версии TinyMCE и ckEditor похожи больше на MSWord, нежели на online редактор текста. CMS, разумеется, за ними не успевает и обычно из-под коробки идет с устаревшим редактором. 

    Но за CMS вступается уже упомянутая  плагинная система. Разработчики CMS Joomla делают ее более удобной, быстрой и надежной, разработчики WYSIWYG редакторов делают то же самое, но больше уделяют внимание кроссбраузерности. А соединяют эти две разработки разработчики плагинов. 

    Собственно сабж. Нужно поменять стандартный TinyMCE на такой же стандартный ckEditor. Да ckEditor тоже бывает из-под коробки в joomla. Но как я уже писал выше, он уже сильно устарел. Не беда. Есть куча плагинов, которые установят в систему его новую версию.

    Я остановил свое внимание на плагине с неброским названием - CKEditor. Скачать его можно на официальном сайте. На момент написания статьи  версия была 2.1. Хотя zip файл, который вы скачиваете с офсайта, называется CKEditor.2.0.zip =)

     

  • ckeditor событие on select

    При разработке плагина для wysiwyg редактора ckeditor столкнулся с такой проблемой, что в нем нет события выделения текста onselect. Реализуем его сами.

    плагин ckeditor реализующий событие onselect

  • JQLite альтернатива jQuery для мобильных устройств

    jquery liteУ Web-программистов сложилась добрая традиция - в любую даже самую простейшую страницу по дефолту  подключать jquery. Я ничего не имею против этой библиотеки. Она шикарна. Она лучшая в своем роде, и продвинула и продвигает современный web далеко вперед. Повсеместный переход сайтов на ajax также связываю с этой библиотекой.

    Однако тут есть одно НО. В простейших проектах: небольшая анимация, баннеры, или любую другую логику, где не требуется работа с DOM или ajax, надобность в лишних 90кб скриптов отпадает. Особенно критично это для мобильных устройств. И дело не столько в лишних килобайтах, а в том, что такие скрипты напрасно грузят и без того занятый процессор.

    Сперва я хотел написать все на vanila.js, но кросплатфоменность в среде мобильных приложений та еще головная боль, поэтому решено было выбрать легковесный аналог jquery - jQLite.

  • Автосохранение материала в Joomla по CTRL+S

    CTRL+SWeb-программистам часто приходится иметь дело с текстовыми файлами. Горячие клавиши CTRL+S мы нажимаем автоматом еще с университета, когда пару раз пришлось писать проект с нуля, только потому что не соблюдали первую заповедь программиста: "Сохраняйся, сохраняйся и еще раз сохраняйся". Но в вебе эта комбинация клавиш используется редко. Особенно досадно, когда пишешь длинную статью и забываешь ее сохранить и происходит «сбой матрицы» типа BSOD или чего еще. Даже банальная перезагрузка страницы, может похоронить результаты нескольких часов работы.

    При нажатии ctrl+s браузер выдает окно сохранения html файла, что в принципе логично, когда нам нужно сохранить чужую страницу на диск. Но почему бы не научить редактор сайта, сохранять статью по нажатию этих клавиш. Все новые браузеры давно умеют перехватывать это сочетание клавиш. Поэтому был написан плагин для Joomla, который обрабатываем нажатие этих двух клавиш и отправляет содержание материала, его название и все заполненные поля по AJAX на сервер. В целях обратной связи, он показывает полосу загрузки запроса и в конце выдает сообщение, удалось ли сохранить материал или нет. Ничего настраивать не нужно, плагин работает, как с редактором WYSIWYG  так и без него

    Небольшое демонстрационное видео

  • Апгрейдим ckeditor и делаем из него удобный редактор текста

    Всем привет! Этот текст я пишу в редакторе ckeditor. На мой взгляд он лучший среди всех wysiwyg эдиторов. Но в нем много чего не хватает. Я уже много писал, как устранить в нем различные баги, пришла пора немного его улучшить по средствам плагинов. 

  • Добавляем в jQuery $.browser

    jQuery Browser  В jQuery плагин $.browser устарел, и его удалили. Разработчикам советуют использовать для этих целей специальные инструменты типа Modernizr. Беда в том, что браузеров становится очень и очень много. Следить за всеми ними уже не так важно, новые версии jQuery не поддерживают ie6-7, что правильно. 

      По факту - все проекты, где была обновлена библиотека если они использовали этот модуль перестают работать. Можно начать переписывать весь код, под новую версию, а можно поступить иначе: подключить этот плагин вручную, и тогда старый код не придется менять. Просто подключаем к странице файл с плагином и все работает, как прежде. 

  • Документация плагина jSpeedUp - Joomla Speed Up

    Joomla CMS - вопреки распространенному убеждению, очень быстрая система. Медленной ее делают сторонние расширения, качество которых варьируется от профессиональных до дилетантских. Отдельную нагрузку на сервер дает плохо сверстанный или просто тяжелый шаблон. Десятки скриптов, сотни иконок, десятки файлов со стилями - все это грузит ваш браузер, в момент когда вы заходите на сайт. Если вы используете виртуальный хостинг за 150 рублей, то вероятно хостер дает вам очень низкий пропускной канал и все это грузится десятки секунд. У пользователя создается ощущение "тормознутости" сайта, и он уходит. дело тут не в размерах самих файлов, а в их количестве. Давно известно, что браузер быстрее скачивает с сервера один файл на 500кб, чем 10 файлов по 50кб. 

    Или попробуйте взять 100 файлов, заархивировать их в zip архив без сжатия, зайти на сервер по FTP, и в одном коне заливать эти 100 файлов, а в другом один архив. Вес файлов будет одним и тем же, но архив закачается заметно быстрее. Каждый отдельный файл - это новое соединение с сервером, новый запрос, новая отправка заголовков. 

    По этой причине существуют специальные скрипты, которые сжимают все файлы стилей и скриптов в один файл (по одному для стилей и скриптов). Для Joomla существует достаточное число таких решений, но большинству из них не хватает функционала.

    Плагин Joomla Speed Up - JSpeedUp

    Скачать плагин JSpeedUp

    Настройки плагина

  • Как зарегистрировать свой jQuery плагин на jquery.plugins.com

    В далеком 2006-м, Джон Резиг, создавая очередную JavaScript библиотеку jQuery, возможно и не предполагал, что она станет настолько популярна. Одной из ее "килл-фич" была система плагинов. Трюк, который прокатил с Мозилой и прокатывает с Хромом: делаем средний продукт, но с отличным API для создания расширений для него.

    Идея не нова, до этого в 2005-м, мир узнал Prototype Сэма Стефенсона. Параллельно с jQuery развивался Mootools  Валерио Проетти. К слову второй зародился, как плагин для первого.

    Да сам JavaScript со своим своеобразным ООП реализует наследование, по идеологии плагинов, а не родителей. Пишем класс, создаем его экземпляр, подключаем к prototype полю другого объекта, и вот оно - наследование. Второй объект использует все плюшки первого.

    Качественным отличием jQuery на этом фоне стало удобство. Сравните код создания расширения для Prototype, Mootools и jQuery (код для первых двух взят из Википедии).

    Prototype

    var FirstClass = Class.create( {
        initialize: function () {
            this.data = "Hello World";
        }
    });

     Mootools

    var Animal = new Class({
        initialize: function(name) {
            this.name = name;
        }
    });
     
    var Cat = new Class({
        Extends: Animal,
        talk: function() {
            return 'Meow!';
        }
    });

    Vanila JavaScript

    var a = function(){
    	this.hi = function( name ) {
    		alert('Hello World and '+name)
    	}
    }
    var b = function(){};
    b.prototype = new a;
    (new b).hi('Valeriy');

    И jQuery

    $.fn.hi = function( ){
     alert( this[0].tagName )
    }
    $('body').hi();// BODY

    Удобство наглядное и бесспорное. Первые два фреймворка заставляют окунуться в дебри ООП и требуют от программиста определенной квалификации. jQuery же "порог вхождения" понизила до уровня школьного Бейсика.

    Результат не заставил себя ждать. Плагины плодились тысячами. Их уровень варьировался от плохих до очень плохих. Все это дело оседало на plugins.jquery.com

    Залить туда плагин мог любой желающий. Никаких модераторов. Демократия. Стоит ли говорить, через ни так много времени сайт превратился в свалку. Мой первый плагин тоже там побывал. 

    У ребят из команды jQuery руки растут оттуда, откуда надо. Они эту лавочку прикрыли. Включили режим "Только чтение" и приступили к созданию нового ресурса.

    13 Декабря 2011 на свет появился новый сайт. С иной системой публикации. Плагины не заливаются непосредственно на ресурс. Делать на самом plugins.jquery.com вообще ничего не надо ( Вот это поворот=) ). Вместо этого дело сводится к колдовству с git репозиторием и его хостингом.

  • Как написать Joomla плагин для xmap

    Пишем плагин для joomla  xmapРанее на страницах блока была серия статей о написании своего компонента для популярной среди непрофессиональных разработчиков системы Joomla. Времени прошло достаточно, и вот ваш компонент уже оброс данными. Данных много, ведь помимо прочего мы еще подключили к компонентe парсер, для быстрого наполнения сайта. Однако поисковики очень не охотно индексируют ваш контент.

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

    Для таких случаев придумали sitemap. Это такая xml в которой описаны все ссылки сайта, которые необходимо проиндексировать, и у каждой есть поле, в котором написано, когда контент по этой ссылке последний раз обновлялся.

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

    Среди joomla компонентов, которые создают sitemap, одним из лидеров дефакто является xmap. Сам xmap выводит в sitemap только ссылки размещенные в меню. Это не совсем удобно, когда мы хотим, чтобы в sitemap появились ссылки из нашего компонента. На помощь приходят плагины xmap. У этого компонента в загашнике есть несколько плагинов для популярных компонентов (k2,weblinks и т.д.) есть плагин и для стандартных материалов joomla.