JavaScript *

Итак, после обновления Firefox до 19 версии, полностью отвалилось горячо любимое расширение Яндекс.Бар. Не забуду напомнить, что Яндекс.Бар был заменен Яндекс.Элементами, которые понравились чуть больше, чем никому, поэтому и получили свои заслуженные 2 бала из 5ти.

Почему не понравились? Заменили адресную строку, стало неудобно просматривать почту, заменили закладки и убрали корректор адресной строки (под предлогом установки Punto Switcher, который может и хорош для обычного работника, но никак не для программиста. Поэтому и был удален почти сразу же, как установлен. Да и если можно было бы настроить, то всё равно желание пропало).

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

Прежде всего отметём возможное недоразумение: сегодня речь у нас пойдёт не о том движке, который известен старожилам джаваскриптового программирования под названием JSDB и до сих пор располагается по адресу JSDB.org. Тот движок, основанный на мозилловском SpiderMonkey, хотя и обладал богатыми возможностями для доступа к базам данных, к электронной почте и к Интернету, но после появления гораздо более резвого «конкурента» (Node.js) постепенно впал в совершеннейшее забвение, так что и сказать о нём мне сегодня нечего.

Вместо него я намерен вдругорядь привлечь ваше внимание к той базе данных о библиотеках джаваскриптов, которая появилась в нынешнем (2013 года) феврале по адресу JSDB.io и открыта для пополнения читателями. (Пишу «вдругорядь» оттого, что на JSDB у вас и ранее была некоторая возможность обратить внимание: сперва mourner упомянул её во твиттере у своей библиотеки Leaflet, а затем alexzfort упомянул её в дайджесте новинок прошлой недели.)

Чем JSDB радует? Продуманностью интерфейса и широким употреблением AJAX для внесения изменений в страницы без перезагрузки. (В итоге интерфейс получается, например, куда более интерактивным и удобным, нежели у тематически сходной вики jswiki или у порождённого этой вики сайта «JavaScript Territory».) Сперва перечисление библиотек с открытым исходным кодом кажется на JSDB простым списком. Однако, так как в JSDB принимаются библиотеки с открытым исходным кодом, на Гитхабе лежащем, то у JSDB есть приятная возможность отреагировать на жмяк мышóю по заглавию той или иной джаваскриптовой библиотеки, автоматически открыв информационную панель с кратким описанием библиотеки, с подсчётом её форков и звёзд и участников её разработки на Гитхабе. (Эта панель развёртывается на месте жмякнутого пункта, раздвигая остальные пункты списка.) Ещё сильнее обрадует обстоятельного читателя вкладка «Readme», позволяющая для справки целиком подкачать с Гитхаба текст Readme-файла выбранной библиотеки, никуда с JSDB не уходя для этого.

А которую пользу сайт JSDB приносит? А вот такую: его содержимое служит расширителем кругозора. Как не следи за развитием современного открытого исходного кода, а всё же упустишь появление пары-тройки-другой библиотек (или отметёшь их в зародыше как бесперспективняк, ан они со временем разовьются в нечто необыкновенно удобное), так что полезно встретить их на JSDB и познакомиться с их продуктивными возможностями.

Понятно, что у каждого из читателей такой список из пары-тройки-другой библиотек, на JSDB с интересом обнаруженных, будет своим. О вкусах и не спорят. Для сведения читателей я счёл, однако, не лишним перечислить и полдесятка моих находок.

В Островке при разработке сайта используется модульная структура. Логические элементы состоят из разметки, стилей и javascript-файлов.

После перехода на такую структуру, пару месяцев все было хорошо. Потом в IE начали пропадать стили из разных блоков, и мы осознали, что столкнулись с проблемой всех крупных проектов – в IE9 и младше не грузится больше 31го css файла разом.

Предупрежу заранее, что я совершенно не считаю себя экспертом HTML/CSS/JS. Но, как архитектору, мне всегда была интересна организация и систематизация кода в самых разных его проявлениях, в том числе и представленных в виде CSS. Особенно сильно этот интерес был подогрет БЭМом, при первом знакомстве с которым подсознание отреагировало когнитивным дискомфортом. А поскольку БЭМ-стиль в проектах у меня стал появляться все чаще, я почувствовал острую необходимость осмыслить, наконец, свое отношение к организации стилей. Таким образом и появился данный топик-размышление, топик-дискуссия. Я понимаю, что взялся за пограничную задачу, поскольку далеко не всем верстальщикам знакомы тонкости объектно-ориентированного дизайна, а большинство архитекторов не написали ни одного CSS-стиля. И, как результат, мне пришлось неуклюже балансировать, чтобы было понятно всем. Но 'этот риск еще больше подогрел мой интерес к теме :)

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

• Скорость интернета равна скорости света…даже больше (оптоволокно с несколькими модами)
• Доступность интернета стремится к 100% во всех 4х измерениях – в любой точке в любое время
• Количество мобильных устройств почти превысило популяцию homo sapiens…

Так что же можно сделать имея такие предпосылки?

Ни для кого не секрет, что печатные книги уходят в прошлое. Им на смену приходит новое поколение устройств (а вместе с ними и программ), которые позволяют не только прочитать материал, подобно книге, но и разнообразить чтение интерактивными вставками. Это может быть как и некий динамически изменяющийся материал (лента твиттера и т.п.), так и некое интерактивное содержание (анимация работы конденсатора и т.п.)
Компания Apple выпустило приложение IBOOK Author, которое позволяет делать интерактивные книги для приложения IBOOKS устройств IPAD. Сегодня я предлагаю познакомиться с тем, как же создавать HTML-виджеты для данного приложения на примере виджета твиттера.
Для создания виджетов существует множество программ, стоимость которых варьируется от 0 (Dashcode) до 60 (Tumult Hype).
Создавать же свой виджет мы будем «вручную», без использования специализированных программ.
Теперь предлагаю перейти от слов к делу.

Все jQuery UI виджеты создаются на простой основе — Фабрике Виджетов. Она обеспечивает гибкую основу для создания сложных, структурированных плагинов с совместимым API. С её помощью можно создавать не только плагины jQuery UI, но и любые объектно-ориентированные компоненты, не изобретая велосипедов. Она не зависит от других компонентов jQuery UI, наоборот, большая часть компонентов UI зависит от неё.

Что это?

Фабрика виджетов это метод глобального объекта jQuery —

В этом топике я постараюсь рассказать о работе с API вконтакте из расширения для Google Chrome.

По сути, самая сложная часть это получение токена для доступа к API вконтакте, но обо всём по порядку. Для пущей наглядности я приведу пример минимально полезного расширения (что бы оно хоть что-то полезное делало, а вообще оно было сделано для удобного рехостинга гифок). И так расширение будет простое, но рабочее.

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

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

Здравствуйте. Не так давно на одном из веб-проектов, мне понадобилась возможность получить фото с веб-камеры. Через некоторое время, на другом проекте, появилась такая же необходимость, и опять же замаячил на горизонте третий проект, с похожей функциональностью. Дабы не ходить каждый раз на html5 Rocks, и смотреть, «как там и чего», решил написать плагин.
Собственно, в данной статье я хочу представить результат своего труда: html5-webcam-avatar — jquery плагин для создания аватарок с веб-камеры.

Предисловие

18 февраля вышел релиз Grunt v0.4.0, с чем всех и поздравляю. Если вы еще не знакомы с Грантом — прошу пройти на официальный сайт или почитать ознакомительную статью на Хабре. Вкратце, Грант позволяет автоматизировать склеивание и минификацию js-файлов, запуск тестов, проверку кода с помощью JSHint и многое другое.

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

Зачем я использую Grunt

Как любому ленивому frontend-разработчику, мне нужен был инструмент, который автоматизирует рутинные задачи, позволяя сосредоточиться непосредственно на разработке. Так я нашел Грант, который делал за меня следующее:

• компиляция stylus в css;
• склеивание js-файлов;
• проверка JavaScript линтером;
• минификация склеенных js-файлов;
• запуск unit-тестов (qUnit);
• отслеживание изменений исходных файлов и автоматический перезапуск вышеперечисленных задач.

Сегодня, 25 февраля, вышла версия 1.5.0 языка CoffeeScript. В ней впервые появилась базовая поддержка так называемого «грамотного» или «литературного» программирования (literate programming). Концепцию грамотного программирования придумал Дональд Кнут в 1981 году при разработке системы TeX. В отличие от исходного кода на обычном языке программирования, который включает в себя небольшие вкрапления комментариев, грамотное программирование подразумевает написание текстового документа на естественном языке с вкраплениями кода. Многие существующие системы грамотного программирования вообще не зависят от конкретного машинного языка.

Мотиватция

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

Итак идея — сделать сервис удаленного планирования, посредством техники Planning Poker, так популярной в agile мире. А также чуть лучше разобраться с тем как работает socket.io и сопутствующие технологии.

В данной статье будет показано как можно реорганизовывать код написанный в «простом» JQuery стиле в код на Backbone, с использованием представлений, моделей, коллекций и событий. Реорганизация будет постепенной, так чтобы этот процесс дал четкое понимание основных абстракций в Backbone. Статья рассчитана на тех кто использует JQuery и хотел бы познакомится со схемой MVC для клиентского кода.

Совсем недавно мне на глаза попался очень амбициозный проект Meteor. Меня подкупила его простота и скорость разработки приложений на нем. В этой статье будут показаны некоторые «хитрости» и полезные советы такие как: установка кастомных пакетов, добавление в проект плагинов jquery, развертывание проекта на боевом сервере и прочее.

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

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

Под катом можно узнать, как в ближайшее время будет работать скролл в 2ГИС Онлайн.

Данная статья является продолжением первой части «Введение в Jasmine». Здесь рассматриваются дополнительные возможности тестового фреймворка Jasmine, а именно:

• Spy — эмуляция функций/объектов
• Clock — синхронизация вызовов при использовании setTimeout/setInterval
• Runner и Reporter — запуск тестов и оформление отчета

Внезапная история из прошлого! Дело было так. Несмотря на то, что я программист «немного другого толку», обратились ко мне со стандартной просьбой – сделать сайт. Обычно я не берусь за подобные дела, но в этот раз решил немного подзаработать, тем более что это был не сайт-визитка или интернет-магазин, а нормальный сайт с базой некоторых объектов, объекты добавляются-редактируются-удаляются (аля CRUD) и с ними необходимо выполнять некоторые операции. О! подумалось мне, да это идеальная задача для (название фреймворка скрыто) и после всяческой бухгалтерии я незамедлительно приступил к делу.

Собственно дальше ничего интересного и необычного так и не произошло. Спустя какое-то время заказчику был продемонстрирован сайт. И… он остался доволен. Очень неожиданное завершение истории.

Правда, появилась небольшая как бы просьба. Файловый менеджер, тот, с помощью которого на сайт в статью можно вставить картинку, ему не понравился. Вот хотелось ему чтобы всё как-то проще было. А тут и кнопок целых 20! Да и действий много. А нужно-то всего-навсего загрузить картинку на сервер и вставить на страничку. Ну ладно, подумал я, их же целый интернет, да и сам я много раз делал подобные решения. Но один страшен, как чёрт, другой по одному файлу загружает за раз, а вот третий ничё так вроде, но платен. В общем, история завершилась быстро, созданием простенького файлового менеджера с нуля. Но как-то сиделось мне, да и взгрустнулось. И выпил я (сока с мякотью, конечно). И открыл IDE и понеслось…

Привет,

я потихоньку сделал версию 2 своего «потустороннего» проекта — vPass. Если интересно, вот тут в комментах интересное обсуждение первой версии.



Вкратце, зачем это все?

• Для каждого сайта нужно придумывать свой уникальный пароль.
• Запомнить по-настоящему уникальные пароли невозможно.
• Проблему решают менеджеры паролей, но они, как правило, только под одну платформу.

vPass берет Ваш мастер-пароль (например, `my_password`) и, как правило, домен текушего сайта (например, `http://accounts.google.com` становится `google`) и создает набор из 12 букв, цифр и символов (например, `0EQu$MwEm?Qt`).

В JavaScript наследование сделано через Prototype. Почему же не сделать наследование не через него, нигде не написано. Программисту, который больше всего пишет на PHP или любом другом языке, где «Прототип», это порождающий шаблон проектирования, а не способ наследования в JavaScript, очень трудно взять и начать писать классы, поэтому их почти никто собственно и не пишет на своих сайтах, а только в каких либо изощренных задачах или в специальных библиотеках.

Большая часть сайтов обходится без классов. Максимум на что можно рассчитывать, это использование какого-либо JavaScript фреймворка, где можно надеется, что это присутствует.

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

Что такое класс? Тип объекта. А задать тип объекта можно без prototype. Как сделать ссылки на родителей? Первое, что пришло в голову, это скопировать все его методы и переменные. Наверняка пострадает производительность.

function Class(name, b, c) {

	window[name] = function(){
		/* Добавляем члены класса */
		for(var v in c) {
			if (!c.hasOwnProperty(v)) this[v] = c[v];
		}

		
		/* Делаем наследование */
		this.__bases = [];
		for(var i = 0; i < b.length; i++) {
			this.__bases.push([]);
			for (var v in b[i].__dict)	{
				if (!c.hasOwnProperty(v) && v != 'construct') {
					this[v] = b[i].__dict[v];
                                }
				else
				{
					this.__bases[i][v] = function(obj, f) {
						if (typeof f == 'function') {
							return function() {							
								f.apply(obj, arguments)
							};
                                                } else {
							return f;
						}
					}(this, b[i].__dict[v]);	
				}
                        }			
		}

		/* Вызываем конструктор */
		if (c.hasOwnProperty('construct')) {
			c['construct'].apply(this, arguments);
		}
		else
		{
			for(var i = 0; i < b.length; i++) {
				if (b[i].__dict.hasOwnProperty('construct')) {
					b[i].__dict['construct'].apply(this, arguments);
				}
		        }
		}
	};

        window[name].__dict = c;
}