MooTools *

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

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

Но обо всем по порядку.

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

Но сегодня утром команда mootools выдала очередной релиз и добавила нотки оптимизма в сердца ценителей этого фреймворка.

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

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

Итак moobilejs.com.

Этот плагин позволит вам легко и элегантно выводить сообщения и небольшие формы в ваших веб-проектах, построенных на 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 последних версий.

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

Захотелось как-то сделать анимацию выполнения 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:

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

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

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

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

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

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

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

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

• Текущий вариант перевода документации по MooTools
• Обсуждение перевода на тематической google-группе
• Исходный код, а также инстукция по установке доки на свой компьютер

Вы нашли немного времени для создания полезной программы/плагина/виджета/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).

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

• Документация по подключению RIA SourceTabs
• Скачать RIA SourceTabs с примером
• Библиотека для подсветки кода Prettify

UPD: PHP тоже подсвечивает, пример тут (последняя закладка)

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

В данном топике я собираюсь свести все свои знания об анимации в MooTools воедино и рассмотреть темы, более углубленные, чем просто примеры использования плагинов. Теоретическая информация справедлива не только для MooTools, но и для других фреймворков. Начинающим будет интересно ознакомиться с возможностями фреймворка, а продолжающим — понять, как все это работает :). В статье приведено много примеров, есть довольно оригинальные, вот некоторые из них: 1, 2, 3. Приятного вам чтения.

Этим топиком я продолжаю цикл статей о написании всяких вкусностей для MooTools. Сегодня мы на чистом JavaScript сделаем вращательный регулятор — контрол, который часто используют в работающих со звуком программах для регулировки громкости или баланса. Вот примерно такой:

Иногда бывает нужно заменить стандартный HTML элемент select своим.
Обычно это необходимо, если фантазия дизайнера разыгралась и он нарисовал «кастомизированный» select и настаивает, чтобы было реализовано как он того захотел. Ну что ж, надо — сделаем.

Небольшая предыстория.

Однажды мне было необходимо кастомизировать select. Я использую mootools, поэтому, сразу пошел искать плагинчик для замены select'a — вдруг кто-то уже написал? Действительно, нашел несколько. Стал разбираться. Все просмотренные мною плагины оказались полной ерундой — они вели себя не как стандартный select. Выкинул их в помойку и решил написать свой плагин, который бы полностью повторял поведение стандартного select'a.

Ниже перевод сегодняшнего поста одного из разработчиков MooTools в google groups.

Я пишу этот пост в списке рассылки чтобы рассказать сообществу MooTools о том, что разработчики делали в эти дни, и что будет с фреймворком. Мы все устали от ответов на одни и те же вопросы снова и снова, поэтому я надеюсь, что этот пост сделает кое-что более ясным, и мы перестанем видеть одно и тоже, снова и снова в списке рассылки.

В обсуждении недавнего топика хабрасообщество заинтересовалось подробностями написания классов для MooTools и, в частности, мутаторами. В связи с этим мне захотелось что-нибудь написать на эту тему, пока не наткнулся на статью одного из разработчиков MooTools. В этом топике привожу перевод статьи, в которой Jan Kassens описывает пример использования классовых мутаторов.

Создать свой класс в MooTools очень просто:

//Example 1
var someClass=new Class({

   initialize: function(){
      alert('Hello, world!');
   }

});* This source code was highlighted with Source Code Highlighter.

Доброго времени суток.
Это мой первый серьезный пост на Хабре, так что критика приветствуется.
Сегодня я расскажу о написании плагина для JavaScript-библиотеки MooTools на примере модального всплывающего окна.

Пока для JavaScript-фреймворка MooTools представлено мало качественных дополнений, а некоторые и вовсе не хотят работать с новой версией(1.2) последнего. Одним из таких дополнений является адаптация(ссылка 1, ссылка 2) библиотеки Plotr, позволяющей создавать линейные/круговые/столбчатые диаграммы.

JavaScript framework MooTools официально объявил о релизе версии 1.2 — она довольно долго была в разработке и, буквально этой ночью, официальный сайт пролил свет (в прямом смысле — дизайн главной страницы заметно изменился, сменив черный и темно-синие цветы на белые и светло-серые тона) и объявил о релизе.

На данный момент работает только главная страница проекта, но ведь cкачать-то можно уже сейчас. (с) надпись там же.

Хотя на главной странице ссылка на документацию по версии 1.2 не появилась, но сама документация находится тут (и, кстати, доступна).

Поздравляю команду MooTools, ну и всех кто этот фреймворк использует (себя в том числе). Доброе утро, Хабр!