Все потоки
Поиск
Написать публикацию
Обновить
226.86

JavaScript *

Прототипно-ориентированный язык программирования

Сначала показывать
Порог рейтинга
Уровень сложности

Работаем с API вконтакте из расширения для Google Chrome

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

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

Использование событий в jQuery плагинах

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

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

Создаем автарки в браузере с помощью вебкамеры

Время на прочтение4 мин
Количество просмотров9.1K

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

Читать дальше →

Миграция на Grunt v0.4

Время на прочтение5 мин
Количество просмотров9.1K

Предисловие


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

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

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


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

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

CoffeeScript 1.5.0 позволяет писать комментарии в формате Markdown

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

Instant PlanningPoker на socket.io

Время на прочтение3 мин
Количество просмотров5.5K

Мотиватция


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

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

Читать дальше →

От JQuery до Backbone

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

Полезные советы в работе с Meteor

Время на прочтение2 мин
Количество просмотров14K


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

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

Кроссбраузерная кастомизация системного скроллбара

Время на прочтение8 мин
Количество просмотров146K


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

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

Jasmine — дополнительные возможности

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

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


Читать дальше →

Файловый менеджер (Silex + Kendo UI) — Tutorial

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

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

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

vPass 2 — простой и удобный генератор безопасных паролей на Javascript

Время на прочтение3 мин
Количество просмотров17K
Привет,

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

image

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

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

Вот 30-секундный демо-ролик...

Наследование без Prototype

Время на прочтение2 мин
Количество просмотров4.6K
В 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;
}

Читать дальше →

Ближайшие события

Мини-игра с отслеживанием положения головы или как я встретил headtrackr.js

Время на прочтение6 мин
Количество просмотров25K

11.02.2013 г. Хабраюзер omfg опубликовал статью, с которой началось мое знакомство с headtrackr.js.
В этом топике я расскажу, как средствами браузера с поддержкой getUserMedia получить координаты и угол наклона головы пользователя перед монитором, как учесть дефекты изображения, принимаемого с веб-камеры и отфильтровать их, и как использовать данную технологию в своих проектах, задействовав лишь html + JavaScript.

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

NodeSmarty новый шаблонизатор для node.js (3.beta)

Время на прочтение3 мин
Количество просмотров6.1K
image Наверно каждый веб-разработчик слышал о шаблонизаторе Smarty (php). Но так как я частенько увлекаюсь JavaScript'ом, то решено было найти подобный шаблонизатор для этого языка, но серверного (node.js, ага). Первые ссылки в поисковике выдают такие шаблонизаторы, как: ECT, JUST, Mu. Все они, естественно, не подходили для меня, т.к. слишком далеко были от синтаксиса Smarty.

Чтож, раз хочется, а решений нет — то сделай. Выискивая время на работе и иногда получая по «шапке», родился проект NodeSmarty, который, в будущем, будет частично копировать синтаксис Smarty.

Читать дальше →

Отзывчивый дизайн с помощью камеры

Время на прочтение1 мин
Количество просмотров29K
Боитесь, что пользователь не сможет прочитать текст на вашем сайте издалека? Не вопрос, посмотрите на это (необходима камера и поддержка WebM).

При помощи WebM и библиотеки для распознования лиц HeadTrackr можно легко сделать дизайн, который будет подстраиваться под пользователя в зависимости от его отдаленности от монитора. Это ли не будущее?

Замена стандартных селектов в браузере

Время на прочтение2 мин
Количество просмотров13K
Selectimus


На текущем проекте некоторое время назад стала задача по унификации селектов во всех браузерах. Нужно было изменить их так, чтобы при одинаковом отображении они внешне оставались близкими к стандартным но при этом имели возможность гибкой настройки средствами CSS. Поискав готовые библиотеки, на тот момент ничего подходящего не нашел и решил сделать свой. Взял за отправную точку дизайн близкий к стандартному, плюс замена скроллбара, со стандартного системного на свой, также одинаковый во всех браузерах. Реализован скрипт в виде jQuery плагина. Требуемая версия jQuery – 1.5+.
Читать дальше →

Вышел Bootstrap 2.3

Время на прочтение3 мин
Количество просмотров41K
Это заняло много времени, друзья. Прошло около трех месяцев с последнего обновления, но не волнуйтесь, сегодня ожиданию наступил конец.
После многочисленных задержек, в том числе и на борьбу с гриппом, мы рады представить вам Bootstrap 2.3.
И что нового?

Облака на CSS3 3D Transformations

Время на прочтение6 мин
Количество просмотров27K

Пример, как нарисовать красивые 3D облака используя CSS 3D Transformations



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

Для нетерпеливых: То, что получится в итоге

Вступление


В этой статье, автор попытаеся рассказать и показать как создать красивые 3D облака используя CSS3 Transformations. Автор так-же считает, что иметь базовое понятие о том, как работают эти самые CSS 3 Transformations не будет лишним. Ссылка на туториал здесь

Данный туториал разбит на несколько простых шагов. Каждый шаг основан на коде из предыдущего и содержит ссылки на примеры.

Сделай сам!

  • Создаем мир и камеру
  • Добавляем объекты в мир
  • Добавляем спрайты к облакам
  • Магия
  • Пролог


Поооеехааали!

Читать дальше →

Egghead.io — видео курс по AngularJS

Время на прочтение2 мин
Количество просмотров29K
Egghead.io — проект, созданный Джоном Линдвистом (John Lindquist), цель которого создание видео курсов. Как утверждает автор, он никогда не был доволен существующими реализациями сайтов с видео уроками. Поэтому главной его задачей стало применение лучших практик для организации и подачи обучающих видео материалов в сети.
Пока сам ресурс находится в стадии доработки и нуждается в качественном дизайне. Но уже сейчас доступен первый курс видео туториалов по AngularJS.
Проект получил множество хороших отзывов сообщества, также был упомянут в рассылке javascript weekly и на странице javascript в google+.
Читать дальше →

Вклад авторов