JavaScript *

Немного пятничного веселья.
Поля ввода, Textarea, которые молчат, когда с ними ничего не делают, на самом деле хотят расти. Когда объём вводимых текстов превышает их размеры, их тайное желание не всегда слышится дизайнерами и верстальщиками, потому что они уже далеко и думают о новых горизонтах. Оно есть, если прислушаться к кончикам пальцев пользователя, досадливо двигающих скролл мыши.

Иногда об этом удаётся забыть, если размер поля ввода предоставлен в основном удовлетворительный. В 3 браузерах из 5 есть даже место для изменения размеров, которое верстальщик, оглушённый указанием свыше, иногда отключает (textarea{resize: none}). Есть и другие способы затруднить жизнь пользователю. И тогда он уходит берётся за скрипты и стили.

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

Здесь приводится маленький неисчерпывающий список кода, который заставляет IE6 упасть.

Всё же после таких мучений для разработчиков разве не можем мы иметь право отомстить?

Начнем с самого длинного:

Вы когда-нибудь думали, как было бы здорово, если бы слитый в один файл и минифицированный яваскрипт код в production-окружении можно было удобно читать и даже отлаживать без ущерба производительности? Теперь это возможно, если использовать штуку под названием source maps.

Если коротко, то это способ связать минифицированный/объединённый файл с файлами, из которых он получился. Во время сборки для боевого окружения помимо минификации и объединения файлов также генерируется файл-маппер, который содержит информацию об исходных файлах. Когда производится обращение к конкретному месту в минифицированном файле, то производится поиск в маппере, по которому вычисляется строка и символ в исходном файле. Developer Tools (WebKit nightly builds или Google Chrome Canary) умеет парсить этот файл автоматически и прозрачно подменять файлы, как будто ведётся работа с исходными файлами. На момент написания (оригинальной статьи — прим. перев.) Firefox заблокировал развитие поддержки Source Map. Подробнее — на MozillaWiki Source Map.

Здравствуйте, в этой маленькой заметке расскажу немного про ООП в JS, объект XMLHttpRequest, паттерн прокси, и дружелюбие джаваскрипта в этом плане.

Была у меня сегодня такая задача — есть проект, который довольно активно использует ajax-запросы, но вот проблема — бекенд у нас так устроен, что разаутентифицирует пользователя, если тот не активен в течение, скажем, получаса. В итоге случалось такое, что пользователь, пытаясь совершить какое-то действие, которое использует аякс, не мог его совершить (уж извините за тавтологию), нужно было решить эту проблему.

Привет, Хабр!
В этой статье я коротко расскажу о библиотеке Editable for Bootstrap, позволяющей вводить данные на страницу методом edit-in-place и основанной на компонентах Bootstrap. Я использую ее в админ-части проектов, либо когда нужно оперативно сделать интерфейс с возможностью пользовательского ввода.
Подробности под катом.

В этой статье я детально исследую примеси в JavaScript, и покажу менее общепринятую, но, на мой взгляд, более естественную стратегию «примешивания», которую, надеюсь, вы найдете полезной. Закончу я матрицей результатов профилирования, подводящей итог влиянию на производительность каждой техники. (Большое спасибо блистательному @kitcambridge за ревью и улучшение кода, на котором основан этот пост!)

Повторное использование функций

В JavaScript каждый объект ссылается на объект-прототип, из которого он может наследовать свойства. Прототипы — отличные инструменты для повторного использования кода: один экземпляр прототипа может определять свойства бесконечного числа зависимых сущностей. Прототипы могут так же наследоваться от других прототипов, формируя, таким образом, цепочки прототипов, которые более-менее повторяют иерархии наследования «классовых» языков типа Java and C++. Многоэтажные иерархии наследования иногда бывают полезны при описании природного порядка вещей, но, если первичным мотивом служит повторное использование кода, такие иерархии могут быстро стать искривленными лабиринтами бессмысленных субклассов, утомительных избыточностей и неуправлямой логики («кнопка — это прямоугольник или контрол? Вот что, давайте унаследуем Button от Rectangle, а Rectangle может наследоваться от Control… так, стоп…»).

Почему люди любят Wordpress? Потому что с ним просто работать. В нём нет гибкости большущих CMS вроде Joomla и Drupal, — а значит, не запутаешься. И ещё он очень популярен — а значит, можно найти плагины на все случаи жизни.

Неспроста несмотря на осуждение со стороны Lurkmore.ru, Wordpress-ом пользуются и Герб Саттер, и Марк Шаттлворт, и много кто ещё. Например, я.

В своих записях я очень часто ссылаюсь на чужие блоги. И мне пришла идея — а почему бы не показывать рядом с ником человека, на которого я ссылаюсь, ещё и значок его сервиса? Например, птичку из твиттера или букву B из блогспота? Похожий функционал есть, например, в Википедии, да и многие блогохостинги это позволяют (например, Dreamwidth).

Так и родился плагин для Wordpress Rikki's WP Social Icons. Позволяет за один клик мышкой добавить ссылку на эккаунт в каком-нибудь сервисе, от социальной сети до GitHub.

I. Зачем

Есть несколько способов просматривать торрент-файлы: в торрент-клиенте, в BEncode Editor, в файловых менеджерах с плагинами, возможно в сетевых сервисах (но это немножко стрёмно).

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

— узнать содержимое раздачи;
— узнать количество файлов в раздаче;
— узнать информацию о файлах (некоторые трекеры очень снисходительны к неполноте описаний, а в торрент-файлах появляется всё больше информации о файлах — например, разрешение, видео- и аудиокодеки, продолжительность фильмов и т. д.);
— узнать информацию о самом торрент-файле (время создания, трекеры, флаг приватности и т. д.);
— иметь возможность текстового поиска по всей информации.

Есть сейчас такая тенденция — делать в сайтах поддержку планшетов iPad и других устройств на iOS: iPhone, iPod. Но если для сайтов это достаточно просто, при хорошей верстке, можно добавить пару тегов в head и готово, то для веб-приложений, где есть сессии с использованием Cookies, все обстоит сложнее и есть подводные камни. Итак, возможно, еще не все знают, что в мобильном Safari можно нажать кнопку меню (со стрелкой, как на рисунке) и выбрать там «Добавить в Домой» / «Add to Home Screen», тогда для сайта появится иконка на рабочем столе. Но иконка будет просто запускать Safari с этим сайтом, а вот если добавить пару известных тегов (см. ниже), то все элементы управления Safar будут скрыты и приложение будет работать на полный экран, как обычные нативные приложения iOS. Так вот основная выявленная проблема в том, что в этом режиме сессия все время сбрасывается. Стоит переключится на другое приложение или рабочий стол, даже просто перейти по ссылке, и опять вернуться в веб-приложение, как страница перегрузится и сессионной Cookie уже не будет, нужно логиниться заново. Эту проблему то мы и решим.

В настоящее время все большую популярность приобретают WYSIWYG редакторы. Популярны они в силу своей простоты использования для обычных пользователей. Но по большей части, большинство этих редакторов волне хорошо справляется с созданием HTML содержимого и лишь малая часть из них умеет создавать содержимое c BBcode разметкой. А если и умеют, то настроить эти редакторы под свои нужды задача весьма и весьма тяжелая.

Так как на одном из проектов, так же использовался формат разметки BBCode, то я начал свою работу над удобным WYSIWYG редактором BBCode. В результате получился продукт под названием WysiBB.

Доброго времени суток, Хабрасообщество.
Хочу рассказать о способе чтения Wikipedia, который нашел мой друг — хабраюзер porqz, но так как он очень занят, то не смог опубликовать его самостоятельно.

Добрый день, коллеги!

В одном из проектов мне потребовалось сохранять выбранные пользователем настройки (сделанные в виде чекбоксов). Поскольку предполагалось, что настройки будут изменяться нечасто — я решил передавать настройки не все сразу, а в виде последовательности изменений. Детали реализации под катом.

Доброго времени суток!
Этот небольшой обзор, я бы хотел посвятить насущной для некоторых разработчиков проблеме по работе с jabber сервером через long polling соединение по протоколу BOSH.

Книга первая: Создание Open Source проекта

Продолжу тему описанную в статье «14 Способов сделать вклад в открытое программное обеспечение, не будучи Гениальным Программистом или Рок-Звездой» habrahabr.ru/post/147220, но немного в другом ключе!

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

На сегодняшний день эффекты при скроллинге набрали достаточно большую популярность (так называемый параллакс). Но, к сожалению, эти эффекты нейтивно не поддерживаются мобильными устройствами. Не так давно Mark Dalgleish предложил свой вариант решения этой проблемы:

Похоже, что тяга Google к оптимизации затрат и закрытию непрофильных сервисов добралась и до GWT. Компания, занимавшаяся развитием тулкита с 2006 года, передала проект в руки некоего «управляющего комитета», состоящего из разработчиков, заинтересованных в дальнейшем развитии проекта.

В список компаний, помимо неназванных разработчиков из сообщества, входят представители Sencha, Red Hat, Vaadin и некоторые другие. К слову, разработчики Google в этом списке пока тоже присутствуют.

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

Mousetrap — маленькая библиотека (1.4 KB) для обработки клавиатурных нажатий.

// single keys
Mousetrap.bind('4', function() { highlight(2); });
Mousetrap.bind("$", function() { highlight(3); }, 'keydown');
Mousetrap.bind('x', function() { highlight(4); }, 'keyup');

// combinations
Mousetrap.bind('command+shift+K', function() { highlight(7); });
Mousetrap.bind(['command+k', 'ctrl+k'], function() { highlight(8); });

// gmail style sequences
Mousetrap.bind('g i', function() { highlight(11); });
Mousetrap.bind('* a', function() { highlight(12)});

// konami code!
Mousetrap.bind('up up down down left right left right b a enter', function() {
    highlight([15, 16, 17]);
});

Как видно, поддерживаются как одиночные нажатия, так и сочетания и клавиатурные комбо.

Работает в Internet Explorer 6+, Safari, Firefox, Chrome (с включенным Vimium не работает).

Пробуйте — craig.is/killing/mice

Несмотря на то, что главным моим хобби так и остаются роботы, я трачу немало усилий, чтобы оставаться в трендах своей основной стези – программирования. Волей судьбы недавно удалось познакомиться с Node.js, я узнал о его web фреймворке express, подружился с новым для себя template engine Jade и в довершение ко всему связал все это с папкой в Dropbox.

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

В JavaScript по умолчанию есть один тип чисел — Number. Хотя он конечно делится на Int и Float, хотя выражается это в немногом (например, в функциях parseInt — parseFloat).
При этом большие числа (и Int и Float) укорачиваются, а дроби приводятся к десятичным и округляются. И то и другое не всегда хорошо, так что появились библиотеки, которые предлагают новые классы для необычных чисел.

Я знаю что в сети много подобных скриптов на разный вкус и цвет. Но мне захотелось написать свой с нуля и первое что я сделал полез в Гугл искать алгоритм создания(сolor picker). В итоге я был разочарован так как не нашел нечего кроме готовых скриптов, наверно поэтому после того как я разобрался и написал свой color picker, я решил поделится своим опытом в его написание.

Так как я пишу на чистом js без библиотек (не считая той которую я пишу сам:)) в данном посте будет только хардкор чистый javascript.
Что нужно знать что бы написать cp (сокращенно color picker):

• Основы Drag'n'Drop
• Немного разбираться в Canvas (на нем будет рисоваться шкала оттенков Hue)