• Как MooTools jQuery заборол, или детектив в стиле Коломбо

      Стек вызовов jQuery/MooTools По долгу работы в Айри я иногда разбираю ошибки функционирования сайта на сетевом уровне / уровне браузерного взаимодействия. Обычно это сводится к простому анализу заголовков запроса-ответа и воспроизведению тривиальных условий. Но иногда бывают интересные случаи.

      Все начиналось холодным февральским вечером. Клиент написал о странной проблеме при ускорении сайта: слайд-шоу множилось и блокировало поведение сайта, страницы были недоступны. Через два дня после выяснения всех подробностей я узнал, почему Mootools и jQuery категорически нельзя использовать совместно. И подтвердился в мысли, что и «алкоголь — зло», и «eval — зло».

      Но обо всем по порядку.
      Читать дальше →
    • Релиз MooTools 1.5

        image

        Mootools долгое время был неотъемлемой составляющей клиентского JavaScript на Habrahabr. Печально было наблюдать за угасанием творения Valerio Proietti. С мая 2013 года записи на блоге практически не добавлялись…

        Но сегодня утром команда mootools выдала очередной релиз и добавила нотки оптимизма в сердца ценителей этого фреймворка.
        Что же нового в mootools 1.5
        • +15
        • 7,8k
        • 2
      • Moobile — основанный на MooTools фреймворк для мобильных устройств


          Давненько ничего на хабре не слышно новостей о JS фреймворке MooTools. Между тем, он продолжает своё развитие. На данный момент последняя версия ядра — 1.4.5.

          Однако сейчас разговор о другом. Ещё 20 апреля в своём твиттере разработчики сообщили, что с использованием ядра библиотеки начата разработка фреймворка для мобильных устройств.
          Upd.1 — разрабатывают его не создатели MooTools, спасибо magmoro заметил неточность.

          Итак moobilejs.com.
          Читать дальше →
        • MUX.Dialog плагин для красивых диалогов в вашем проекте

            Этот плагин позволит вам легко и элегантно выводить сообщения и небольшие формы в ваших веб-проектах, построенных на Mootools.

            Основные характеристики


            1. Полнофунциональные диалоги. А значит из коробки работают модальность, многооконность, закрытие по Esc, перетаскивание, растягивание (опционально), удобный механизм добавления кнопок и другие вкусности. При этом все очень ненавязчиво.
            2. Простой API для кастомизации и манипуляции диалогами.
            3. Стилизация через CSS, что означает что многие, если не все свойства связанные с внешним видом и даже некоторые связаные с поведением можно переопределить в своих CSS файлах, а значит вы легко впишете диалоги в стиль своего проекта (см. примеры).
            4. События позволят вам перехватывать ключевые моменты поведения диалогов и дополнять их собственным поведением.
            5. Работает из коробки с MUX.Loaders, но не требует их если вы не хотите их использовать. Просто подключите файл лоадеров до диалогов и все — анимация сама запустится перед событием submit и остановится при закрытии.
            6. Полная документация и примеры.

            Проект на github https://github.com/lavmax/MUX.Dialog.

            Тестировалось на IE7+, FF3+, Chrome, Safari, Opera последних версий.

            Некоторые примеры использования и кастомизации

            Читать дальше →
          • Mootools плагин для анимации AJAX-запросов без gif'ов

            Захотелось как-то сделать анимацию выполнения ajax-запросов на чистом html+css и совсем без gif'ов. И сделал плагин для Mootools, который позволяет при добавлении одного файла Javascript получить различные по размеру, фону и типу анимированные иконки.

            Плюсы:
            • Легкие. Отдельно взятый элемент весит не больше gif'а, а использовать его можно многократно стилизируя под разные фрагменты сайта/приложения.
            • Легко подключаются (см. пример ниже)
            • Кроссбраузерные. В отличие от суперкрасивых но CSS3 подобных элементов эти тестировались на IE 7+, Firefos 3+, Opera 11, Safari, Chrome, Mobile Safari 4+ и Android 2.2. Скорее всего будут работать и на IE6, Opera 10 и старших версиях Safari и Chrome, но не тестировалось.
            • Один файл для всех анимированных иконок сайта, а не отдельный gif на каждую ситуацию.
            • Базовый класс можно расширять дописывая свои анимации.
            • Это не связанно непосредственно с технологией, но тоже редко встречал, поэтому добавлю — некоторые анимации имеют режим in и out, что удобно для визуализации POST и GET запросов соответственно.
            • Я почему-то с детства не люблю анимированные gif'ы

            И минусы:
            • В IE 9 элементы все равно оставлены квадратными. Хоть border-radius в нем и поддерживается, но имеет место баг (или фича) связанный с заливкой, который сходу обойти не удалось. Может кто подскажет как это можно сделать.
            • Теоретически может притормаживать на слабых машинах на старом браузере под нагрузкой. В тестах это не проявилось, но жизнь, как известно, от тестов отличается. Тестировалось на слабеньком нетбуке в IE 8 в режиме IE 7 и на моей виртуальной машине — слабее ничего не нашлось для тестов.
            • Наверняка в комментариях еще наберется...

            А все остальное, как говорится, лучше один раз увидеть.
            Смотреть
          • Мутулз теперь немножко роднее

            • Перевод

            Йохохо, ребята! Наконец-то свершилось то, чего все так ждали! MooTools стал ближе ко всем людям, плохо знающим английский! Авторы локализовали его на множество языков и вы можете использовать любой из них, который вам ближе.

            Уверен, это великий шаг в будущее. Порог вхождения в JavaScript-программирование существенно снизился.

            Теперь можно писать на итальянском:

            Element.impostaStile('colore', 'rosso');
            


            Использовать британский английский вместо американского (а вы путались, как писать — 'colour' или 'color'? по-моему, это совершенно уберет неразбериху)

            Element.setStyle('colour', 'red');
            


            И, что самое главное, я теперь могу программировать на рідній мові!

            Element.встановитиСтиль('колір', 'червоний')
            


            Ниже есть расширенные примеры, а по ссылке вы обнаружите, что они работают просто прекрасно и это действительно то, чего мы так долго ждали. Просто нажмите play:

            Читать дальше →
          • AdBlock похитил этот баннер, но баннеры не зубы — отрастут

            Подробнее
            Реклама
          • MooTools 1.3

              image
              image
              Вот и вышел долгожданный релиз MooTools 1.3. Расскажу немного об изменениях в самом фреймворке, и в его «окружении». Между версиями 1.2 и 1.3 довольно много различий, но обо всем по порядку.
              Читать дальше →
            • Яндекс.Виджет + adjustIFrameHeight + MooTools

                image
                Многие знают о такой клёвой штуке как Яндекс.Виджет.
                Сделать свой функциональный виджет проще простого, достаточно написать серверный виджет и подключить его к Яндекс.Виджет через iframe.

                Для управления виджетом Яндекс предоставляет API в виде JS объекта widget, в частности с помощью него можно изменять высоту фрейма под динамический контент (adjustIFrameHeight), это позволяет избавиться от вертикальной полосы прокрутки. Но у этого API есть существенный минус — он написан с использованием jQuery, что лишает разработчиков виджетов на MooTools использовать Widget API.

                Ниже я покажу, как довольно просто можно в обход Widget API управлять высотой фрейма, используя MooTools на стороне виджета.
                Читать дальше →
              • Русская документация по mootools 1.2

                  Русская документация по MooTools По данным летнего опроса на habrahabr, на mootools програмируют около 8% разработчиков. Понятно, что чем популярнее фреймворк, тем быстрее и качественнее он развивается, тем больше плагинов под него появляется в сети. Можем ли мы как либо влиять на эту цифру? Я думаю, можем!

                  Основой любого хорошего фреймворка, является конечно же его функционал. Но есть другие важные факторы влияющие на популярность: размер кода, скорость работы фреймворка и, как не парадоксально, документация! Если функционал не описан, только единицы смогут поковыряться в исходниках и найти заветный метод или плагин.

                  Разработчики MooTools неплохо поработали над документацией, но в сети она доступна только на английском. Ну вот я и решил исправить ситуацию. Сейчас полностью переведена только секция Core, остальные секции пока что находятся в процессе перевода. Вот я и решил обратиться к Вам, уважаемые разработчики, принять участие в переводе (кого заинтересовало мое предложение пишите мне на oleg точка cherniy at Гмейл.ком).

                  Полезные ссылки:
                • Закладки для демонстрации исходников с подсветкой на вашей странице


                    Вы нашли немного времени для создания полезной программы/плагина/виджета/css-файла/html-кода, но на оформление (как всегда) времени осталось минимум?

                    Тогда предлагаю воспользоваться моим плагином, c помощью которого вы потратите минимум времени на презентабельную демонстрацию ваших исходников прямо у себя на Web-странице. Вот как это выглядит.

                    Поддерживается C-подобный синтаксис, Java, Python, Bash, SQL, HTML, XML, CSS, Javascript и Makefiles. С помощью расширений можно включить поддержку LISP, Haskell, LUA, OCAML, SML, F#, Visual Basic, SQL, Protocol Buffers и WikiText.

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

                    Полезные ссылки




                    UPD: PHP тоже подсвечивает, пример тут (последняя закладка)
                    • +24
                    • 1,3k
                    • 8
                  Самое читаемое