• HTML Map generator - удобный Онлайн сервис для создания тегов USEMAP и AREA

    HTML Map generator - удобный онлайн сервис для создания тегов USEMAP и AREAПредставляю Вашему вниманию небольшой онлайн сервис для создания тегов USEMAP и AREA  HTML Map generator

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

  • JavaScript сниппеты

    JavaScript  image.onload срабатывает не всегда

    Из-за кеша событие image.onload срабатывает не всегда. Поэтому после обычной практики назначения обработчика события загрузки, нередко добавляют еще проверку на загруженность фото.

  • php htmlspecialchars эквивалент на javascript

     Самая простая и удобная

    function htmlspecialchars( html){
      var div =  document.createElement('div');
      div.innerText = html;
      return div.innerHTML;
    }
    

    но это работа с дом. Медленно.

    Другой вариант.

    function htmlspecialchars(str) {
     if (typeof(str) == "string") {
      str = str.replace(/&/g, "&"); /* must do & first */
      str = str.replace(/"/g, """);
      str = str.replace(/'/g, "'");
      str = str.replace(/</g, "<");
      str = str.replace(/>/g, ">");
      }
     return str;
     }

    далее

  • Делаем красивый combobox с умным поиском на jQuery

    Сегодня сделаем функциональный combobox с умным поиском. На выходе получим нечто такое

    Умный combobox делаем на jquery

    Одной из главных фич, будет то, что поиск будет вестись не исключением, а сортировкой. При этом, сортировать будем по умному, а не простым сравнением. 

    Обычно, при создании подобных плагинов, делают проверку на совпадение подстрок и тогда возвращают результат. У нас будет плагин, который на слово kazam, вернет в первой строчке KAZAN. 

    Приступим. 

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

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

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

  • Дружим JSLint с Notepad++

    У Notepad++ есть плагин JSLint. Его можно установить из менеджера плагинов (Плагины  -> Plugin Manager ->
    Show Plugin Manager -> JSLint -> Install
    ). Когда я первый раз его установил то не мог нарадоваться. Он позволил мне писать очень красивый код по канонам. Но, радость моя была недолгой. Через пару обновлений NPP, плагин перестал работать. Его автор быстро написал фикс обновление. Я его установил (из плагин менеджера оно недоступно). Но теперь плагин стал глюканатом натрия в кубе. Никакие настройки не позволяли убрать некоторые ошибки. Пример: я исторически привык использовать tab вместо пробелов. Однако сообщество по известной причине (http://www.jslint.com/help.html#new) отвергает табы и использует 4-е пробела. Это их право, вопросов нет. Но я использую табы. И вот этот плагин мне говорит, что я должен использовать пробелы место табов. Это поведение отключается директивой white: true, но эта же директива отвечает и за то, чтобы не было лишних пробелов, к примеру перед переносом строки. Раньше онон мне говорило, что там намешаны пробелы с табами. Теперь либо то либо это. Это к плагину NPP никакого отношения не имеет. Проблема плагина в том, что он очень не чутко реагирует на изменение настроек. Иногда практически не реагирует. Поэтому, вот нашел решение, которое использует связку NodeJS  и JSLint модуль через NppExec плагин.

  • Как обернуть html элемент div блоком на js

    Когда нет надобности подключать jquery к странице, она весит как минимум на 90 кб меньше. Это может быть критично для мобильных версий сайтов.

    Однако, с развитием 3G сетей, это не такая большая проблема. Гораздо серьезнее дела обстоят с производительностью. jQuery - это библиотека для десктопных браузеров, в ней столько кода и всяческих кроссбраузерных проверок и хаков, что любой "чих" будь то поиск элемента, или установка фокуса, вызывает бесконечную плеяду калбяков/проверок/кейсов.

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

    Поэтому там, где нет такой необходимости я рекомендую использовать нативный js

    В этом посте я расскажу, как обернуть любой html элемент на странице в собственный блок используя только js.

  • Как получить выделенную часть HTML кода в ckeditor

    При написании плагинов для ckeditor'а, часто возникает задача: необходимо получить выделенную пользователем информацию, а в некоторых случая произвести манипуляцию с ней. Если необходим просто выделенный текст, то тут все просто. У объекта editor есть метод getSelection(), он возвращает объект, который помимо полной информации о выделенном тексте содержит еще метод getSelectedText(). В простейшем случае в плагине это бы выглядело так:

    CKEDITOR.plugins.add('pluginname',{
        init: function(editor){
    	alert(editor.getSelection().getSelectedText())
        }
    });

    Надеюсь Вам понятно, что плагин работать не будет. Это псевдокод. При инициализации плагина, никакой текст не выделен.

    А как же насчет html кода,  для работы необходим именно он.

  • как проверить пересекаются ли два прямоугольника

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

    варианты пересечений двух прямоугольников

  • Как сделать autosize textarea - или автоматическое изменение высоты многострочных инпутов

    Автосайз textarea​Казалось бы тривиальная задача: поле, которое бы автоматически меняло свою высоту в зависимости от внутреннего текста. Нечто подобное есть в редакторе, в котором я сейчас пишу этот текст ckeditor. Называется оно здесь autogrow и реализуется отдельным плагином. 

    Да, разумеется и для нативных инпутов есть множество jQuery плагинов, которые выполняют возложенную на них функцию. 

    Так сложилось, что мой блог - это не набор простых решений, типа берете такой плагин, подключаете и у Вас все работает. Нет. Я из тех людей, которых результаты запроса в гугле: "Как объединить два массива в, вызывают по меньшей мере негодование. 

    Плеяда статей и вопросов на stackoverflow, с ответом: $.extend

    У большинства сегодняшних web-developerov, нет ни тени сомнения, что jQuery подключен к любому проекту.

    Я не из таких программистов. Есть такие области, в которых нет и не будет jQuery. К примеру, написание плагинов на другие библиотеки или программы. К примеру плагин на ckeditor, допускает использование лишь API самого редактора, потому, как само оно вести порядка 0.5Mb и библиотека в 0.09Mb будет излишней нагрузкой.

    В таких ситуациях есть два пути: первый, написать все на API библиотеки, и второй сделать все на vanila.js 

    При втором варианте, наш код будет легко портировать на любую другую библиотеку. Все заработает даже вовсе без нее.

    Собственно ради чего это отступление - не стоит использовать плагин там, где все и так пишется в несколько строк кода.

    Теперь к делу

  • Кросс доменная ajax загрузка файла на сервер

    Я пытаюсь создать cross domain AJAX форму загрузки и решить несколько вопросов. Я буду использовать Ajax Upload - наиболее удобный ajax загрузчик. Этот загрузчик прекрасно работает на одном домене и очень прост в настройке.

    Примечание переводчика: Статья незавершенная, готового решения в ней нет, решил перевести ее потому-что часть кода использованного в ней мне помогло, однако повторюсь, что это не урок.

  • Про строки и массивы в JavaScript

    При собеседовании в одной весьма и весьма крупной российской IT компании, интервьюеры задавали мне каверзные вопросы по JavaScript. Если на алгоритмические вопросы я отвечал без проблем, то на вопросах, связанных с нативными методами в JavaScript троках ответить я не смог. Просто потому, что привык везде и всегда гуглить необходимую информацию. и если мне понадобилось разбить в JavaScript строку на части, то я сразу гуглю

    Разбить строку в JS

    Возможно вы знаете ответ, как это делать, но лишней, информация, которую я изложу ниже точно не будет. Как работать со строками, как работать с массивами, как объединять строки и массивы?

  • Работа с settimeout и cleartimeout для оптимизации JavaScript кода

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

    Для начала обычный код, который Вы, я уверен, видели ни раз.

    $('input').keyup(function(){
    	$.post('autocomplite.php',{str:this.value},function(data){
    		complite(data);
    	});
    })

     По мере набора текста, значение из поля ввода отправляется на сервер. Такой код часто используется в поиске по сайту, или для автокомплита.  

    Что в этом коде не так, как Вы считаете?

  • Работа с файлами в JavaScript, Часть 2: FileReader

    В моем предыдущем посте, я затронул тему использования файлов в JavaScript, с особым акцентом на том, как получить доступ к объектам File. Эти объекты, содержащие блок метаданных, можно получить только тогда, когда пользователь либо собирается загрузить файл через контрол формы или перетаскивает его методом Drag&Drop на веб-страницу. Итак у Вас есть эти метаданные, следующим шагом является чтение данных из них.

    Тип FileReader

    FileReader  имеет одно назначение: чтение данных из файла и сохранение их в переменной JavaScript. API намеренно разработан так, чтобы быть похожим на XMLHttpRequest, так как оба, по сути являются методом загрузки данных из внешних (вне браузера) ресурсов.Чтение осуществляется асинхронно, чтобы не блокировать браузер.

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

    readAsText()  – возвращает содержимое файла как plain text
    readAsBinaryString() – возвращает содержимое файла в виде строки закодированных двоичных данных (устарело – вместо него используйте readAsArrayBuffer() )
    readAsArrayBuffer() – возвращает содержимое файла как ArrayBuffer (хорошо для двоичных данных, например, изображения)
    readAsDataURL() – возвращает содержимое файла как data URL

  • Рисуем JavaScript с помощью Raphaël

    Рисования в JavaScript при  помощи RaphaelНа днях довелось мне делать один весьма интересный проект. Нужно было сделать онлайн графический редактор. Он должен был уметь рисовать графические примитивы: круги, прямоугольники, линии между ними и полигоны. Кроме того содержимое должно было легко экспортироваться в png. Долго тему рисования изучать не стал. Инструментов в сети предостаточно. Давно слышал про такую библиотеку как Raphaël, и все не было повода познакомится с ней поближе. Повод появился и я приступил. Далее приведу лишь несколько примеров и принцип работы.

  • Сообщаем пользователю о том, что пока его не было, что-то произошло

    yandex emailsЗамечали ли вы, когда в соседней вкладке открыта Яндекс почта и приходит письмо, JS проигрывает короткий звук, а favicon вкладки меняется на цифру. Это очень удобно и позволяет быть достаточно оперативным, не используя сомнительный почтовый софт (привет тумберберд).

    Похожая ситуация с Контактом. Когда вы не просматриваете страницу или вообще когда свернули браузер. 

    Как это работает?

    Раньше, мы использовали хитрости вроде 

    $(window).on('mousemove', function () {})

    Если мышка над вкладкой то все ок. Если нет то выдаем сообщение. Это работает, но с известной долей ошибок. 

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

  • Улучшаем навыки работы с Google Chrome Developer Tools

    google chrome developer toolsКак часто вы используете отладчик браузера при разработке? Я использую его ежедневно/ежечасно/ежеминутно. Не только в разработке, но и в повседневной жизни. Посмотреть размер фото, размер шрифта, шрифт, отладить CSS, найти ошибку в JS, найти причину медленной работы скрипта, узнать какая из картинок не грузится - все это и многое другое, позволяет отладчик браузера. Я использую Google Chrome. На мой взгляд в нем  самый удобный отладчик из всех Developer Tools. Это целая система разработки с подсветкой синтаксиса и отладчиком кода. Как более эффективно работать с Developer Tools читайте ниже. Собрал все в одном месте, чтобы и самому не забыть и вам, уверен пригодится. 

  • Улучшаем юзабилити textarea с помощью ace.js

    Улучшаем юзабилити textarea с помощью ace.jsУлучшаем юзабилити textarea. Подключаем к нему xedit.js и получаем более или менее сносный редактор. Что если, хочется большего. К примеру подсветки синтаксиса в textarea 
    Всем известно, что textarea в плане редактирования текста очень неудобен. Нет ни табов, ни подсветки синтаксиса, ни показа ошибок. Нет ничего, к чему мы привыкли в современных редакторах типа notepad++

  • Установка собственных userscript в Opera и Google Chrome

    Установка собственных userscript в Opera и Google Chrome   В браузере Opera подключить собственные скрипты весьма просто. Создаем папку, закидываем туда свои .js файлы. Затем на вкладке нужного сайта кликаем правой кнопкой мыши, выбираем пункт меню настройки для сайта и  выбираем вкладку скрипты. В пункте Папка пользовательских скриптов JavaScript находим созданную папку. Вот и все. Скрипты автоматически будут загружены для соответствующем сайте. Единственное, что нужно помнить - это порядок их загрузки. Опыт показывает, что скрипты загружаются в алфавитном порядке. К примеру jquery.js будет загружен раньше чем user.js. Это нужно помнить, когда подключаете jQuery, если его еще нет (да, Вы не поверите, но есть еще сайты без jQuery). Еще один тонкий момент: скрипты будут загружены для всех страниц сайта, в том числе и для всех фреймов. И соответственно будут выполняться для всех фреймов. Чтобы скрипт выполнялся только в главном фрейме, я делаю так

    if(  !self.parent.frames.length ){
    // тут код
    }
  • Установка фокуса в поле ввода input/textarea на javascript

    По тем или иным причинам не всегда есть возможность подключить к странице jquery Тогда многие привычные вещи приходится делать руками. 

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

    Эта короткая заметка из той же серии: как установить фокус на поле ввода используя только javascript