jQuery *

В последнее время стало модно говорить о доступности при разработке сайтов, писать rel, alt, делать версию для слабовидящих и так далее, однако почему бы сначала не подумать о нормальных пользователях. Подключая jQuery из CDN:

<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>

… многие забывают очень важную деталь.

В продолжении части 1, мы решили написать статью, как вышли на «новый уровень» по созданию веб-продукта. Хочу сразу уточнить, что это не совсем хелпдеск, который основан на создании заявок клиентами (хоть такая возможность и присутствует), а больше рассчитан на внутреннюю работу организации или IT-департамента. Так же хочу напомнить, что система создавалась конкретно под наши требования, поэтому она не лучше других, но и не хуже. Она просто «другая», у которой есть свои функции под конкретные задачи и возможно займёт достойное место в общем мире продуктов, делающих IT-мир лучше.

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

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

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

MantisBT — это открытое серверное веб-приложение для управления проектами и задачами аля Redmine. В прошлой своей статье я рассмотрел актуальную для этого проекта проблему — отсутствие шаблонов и угрюмость интерфейса. Вот линк на предыдущий пост. После всех обсуждений я решил развивать тему, и написал плагин для MantisBT, с помощью которого можно применять пользовательские шаблоны оформления. Собственно представляю вам этот плагин — Templater v1.0.

Всё больше и больше веб-мастера задаются вопросом, как же обойти блокировку баннера и вывести из строя расширение AdBlock Plus и Adguard?
Оказывается, осуществить обход блокировки баннеров можно при помощи JavaScript и HTML, используя альтернативные теги, например, DIV.

Итак, что же нам потребуется?

• Базовые знания JavaScript;
• Базовые знания HTML.

Привет, Хабр!

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

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

Плагин использует функционал jQuery, дополняя его следующими возможностями:

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

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

Я расскажу о том, как в несколько строк реализовать распознавание любого количества лиц на любой фотографии или видео в браузере с помощью JavaScript и JQuery плагина FaceDetection.

Кому интересно, прошу под кат.

Это довольно вольный перевод статьи, которая попалась мне на просторах интернета. Её автор — TJ VanToll. Он уже много лет занимает веб-разработкой и, в частности, оптимизацией сайтов для большей производительности на мобильных телефонах. Под катом рассмотрены несколько способов оптимизации, а так же приведены результаты тестирования на различных устройствах.

Буквально на днях столкнулся с новым (*?) вариантом спам-вируса для веб-сайтов. Гугл определяет его как «Внедрение через URL».

Описание

На вашем сайте появляются ссылки которых не было и быть не могло — вы, например, четко знаете структуру сайта и оригинальный вид URL, который отличается от «левых» URL. В частности, в индексе поисковиков появляются ссылки вида:

www.site.ru/?jn=xxxxxxxx

Поиск и устранение

Яндекс-Вебмастер пока не реагирует на них, а вот в инструментах Гугла для вебмастеров выдается предупреждение о возможном взломе сайта. Там же даны рекомендации по поиску. К сожалению они довольно общие и конкретный поиск проблемы занимает время. Антивирусы и он-лайн анализаторы сайтов — результата не дают. Только ручками.

Вариант А: Код не обфусцирован

1. Ищем в исходниках кто и как у нас пользует переменную $_GET['jn']
2. Далее по коду смотрим кто где гадит (например: \js\swfupload\plugins\jquery\)

Вариант Б: Код обфусцирован

1. Ищем каталог с файлами, названия которых идут после "?jn="
2. Ищем подозрительные исполняемые файлы типа images/c0nfv.php
3. Можно сделать поиск путей где могут быть файлы а-ля "/img/icon/thumb/jquery.php"
4. Проверить дату изменения конфигов CMS
5. Рекомендуется проверить на наличие (корректность) файлов base.php — это само тело вируса, код обфусцирован
6. Проверяем дату jquery.php и сравниваем ее с датой обнаружения вируса по мониторингу инструментов вебмастеров Гугла.

Встречается

• CMS: Joomla, WordPress, DLE, PrestaShop, HostCMS
• Plugins: ImageZoomer, SWFupload, BlockCategories
• Велика вероятность появления практически во всех плагинах, которые используют JQuery и в тех местах, где у админов ручки не дошли до настройки.

Полный код (необфусцированного) зловредного кода под катом.

Рад представить вашему вниманию js-фреймворк под названием ErgoJS для создания «насыщенных» веб-приложений. И да, я люблю велосипеды.

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

Не знаю, то ли я плохо искал (на plugins.jqueri.com есть только один подобный — KitKatClock, но он несколько «недоработан»), то ли искать не хотел, то ли и в правду до такого элемента никому дела нет. В общем, поскольку часть интерфейса, которую я разрабатывал, была ориентирована на заполнение полей пальцем (целевая аудитория устройств — инфокиоски) или, реже, мышкой, а полей для ввода времени было предостаточно, я решил родить еще один никому не нужный jquery-плагин.

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

Один из лучших способов это сделать — семантическое версионирование (semver). В практическом плане, для разработчиков и инструментов разработки, SemVer дает представление о рисках, связанных с переходом на новую версию программного обеспечения. Номера версий представлены в формате MAJOR.MINOR.PATCH, где каждый из трёх компонентов – целое число. Согласно SemVer, если меняется номер MAJOR, это указывает на существенные изменения API, с которыми разработчикам нужно быть очень осторожными.

Эта концепция версионирования обрастает нюансами, если говорить о jQuery, ведь совместимость с браузерами может быть так же важна, как совместимость API. В попытке создать более изящную jQuery, команда выпустила две версии в 2013 году. Первая осталась в линейке 1.* (сегодня это 1.11.1) и обеспечивает совместимость с максимальным количеством браузеров. Вторая версия, начиная с 2.0.0 и до сегодняшней 2.1.1, исключает поддержку ряда браузеров типа IE8 и ниже, чтобы оптимизировать код. Как 1.*, так и 2.* версии jQuery имеют одинаковый публичный API, хотя в их внутренней реализации есть некоторые различия.

Наши будущие релизы будут использовать другую номенклатуру. Как прежде, речь идет о двух разных пакетах. Преемником сегодняшней версии 1.11.1 будет jQuery Compat 3.0. Преемником jQuery 2.1.1 станет jQuery 3.0. Речь идет о двух разных пакетах на npm и Bower, но при этом они будут иметь одинаковую версию, чтобы обозначить тот факт, что их API одинаков.

Node 0.11.14

Увидел свет Node 0.11.14, несущий в себе обновления для uv, http_parser, npm, openssl, и v8.

Равно как у каждой девушки должно быть «маленькое черное платьице», у каждого front-end разработчика должен быть «маленький черный плагинчик»… как-то не очень звучит, пусть будет «маленький функциональный плагинчик», так о чем это я, я это о том, что хочу одним таким поделиться.

Представленный плагин позволяет определять положение какого-либо элемента/набора элементов, относительно области просмотра. Функционально, он расширяет набор псевдо-селекторов, а так же добавляет трекер элементов.

Так же, под катом, я расскажу о процессе написания плагина, с какими трудностями столкнулся и т.д., если я Вас заинтересовал — милости прошу под кат.

Уже довольно давно большинство сайтов перестало быть набором HTML/PHP/CSS/JS-файлов, которые достаточно просто загрузить на сервер. Bower, Grunt, Component.js, AMD, Require.js, CoffeeScript, Clojure, Composer, npm, LESS и ещё 100500 инструментов — всё это сегодня применяется для сборки проектов, обновления компонентов, загрузки зависимостей, сжатия кода, компиляции из одного JavaScript в другой, подтасовки карт, прополки огорода и даже готовки яичницы.

Многих людей это вдохновляет. Да что там — 95% моих знакомых в один голос твердят, как подключив всего пару-тройку библиотек с особой, уличной магией можно забабахать сайт на over-9000 зелёных австралийских долларов — и всего за один вечер, с перерывом на кофе и бублики.

А я — странный человек. Не люблю смешения языков, технологий, библиотек. Angular, Knockout, React — они все хороши, но каждая — по-своему сложна. А ведь есть и «гибриды», где сходится сразу несколько миров — как Ember и Knockout.Bootstrap. Вдобавок, многие построены на jQuery — впрочем, к ней даже у меня претензий нет; наверное, таким и должен был быть JavaScript.

Как бы то ни было, реальность беззастенчиво входит в контакт с мечтами и расставляет точки над «i». Мне так же приходится писать на «new & popular» — а когда пишешь, душа томится и просится создать очередной велосипед… а ей разве откажешь? Она ведь как дитя малое.

Велосипед был создан. Велосипед без фантиков. Такой же простой, как автомат Калашникова, и многогранный, как швейцарский нож, где вместо наследования — события, вместо моделей, коллекций и представлений — один класс, с неограниченной вложенностью и полной свободой действий, почти в два раза меньший Backbone.js, использующий Underscore.js и, необязательно, jQuery/Zepto.

Добро пожаловать в Sqimitive.

Social-feed

В настоящее время практически на каждом сайте есть социальный блок, где отображаются последние посты из twitter, последние фото из instagram или обновления из facebook. Зачастую эти социальные блоки работают на основе iframe, что не позволяет гармонично интегрировать обновления из социальных сетей с основным контентом сайта. В случае, если необходимо отображать обновления только из facebook или только из instagram, то существуют jQuery плагины с редактируемым внешним видом (этот, или этот). Если вам необходимо отображать обновления сразу из нескольких социальных сетей, то на помощь приходит Social-feed.

Рабочее название — TTT, или Тасующаяся Трансформация Текста. 
Разработан по спецзаказу digital-агенства Contorra.
Этот плагин позволяет сменить один текст на другой посредством событий «клика» или «наведения» на сам объект, либо любой другой, с эффектом трансформации каждого символа. Каждый символ текущего текста двигается по кратчайшему пути в массиве символов своего типа (заглавные, строчные буквы, цифры, знаки пунктуации и прочие) и останавливается при достижении конечного результата. В результате мы наблюдаем, как из хаоса вращающихся символов постепенно проявляется заданный текст.

Демо

Решал интересную задачу – сделать визуальный редактор-конфигуратор окон.

Подробностями процесса разработки я с вами, коллеги, и поделюсь.


UPD. Добавил скриншоты.
UPD2. Речь идет об окнах оффлайновых, застекленных, деревянных или пластиковых — через которые на улицу из дома смотрят

Спасибо за отклики!

Цель поста: поделиться с разработчиками решением использования кроссбраузерного «input type="number"» или узнать о лучших решениях. Основная проблема состоит в том, что данный тип input`a по-разному отображается в разных браузерах, и кастомизировать его, через css практически не возможно. Данное решение позволяет легко оформить стрелочки в соответствии с дизайном, а так же отобразить их в тех браузерах, в которых не поддерживается нативный «input type="number"».

На данный момент плагину передается только один параметр — это селектор, к которому применяется js код:

jQuery(function ($) {
	$('input[type=number]').iLightInputNumber();
});

Для примера возьмем три input`a с разными атрибутами:

<input type="number" id="input01" step="100" min="0" class="input1" placeholder="Your budget">
<input type="number" min="1" max="99" class="input2" placeholder="1">
<input type="number" min="1" class="input3 input4" value="1">

Рабочий пример.

Проверено: opera, chrome, ff, ie9+

BiMap

BiMap (GitHub: alethes/bimap, Лицензия: MIT, npm: bimap) от James Daab представляет собой двунаправленную реализацию такой структуры данных как отображение(map). Данная реализация позволяет вам получать доступ к значением через ключи и наоборот к ключам через значения:

bimap.push({
  a: {
    b: 1,
    c: {
      d: 2
    }
  }
});
bimap.key('a.b'); // => 1
bimap.val(2); // => "a.c.d"