JavaScript *

Что будем писать

В прошлой статье мы писали простенький эмулятор терминала на PHP. Я думаю, теперь время написать что-нибудь более серьезное, на вебсокетах. Какой язык использовать для работы с вебсокетами..? Питон..? Руби..? JavaScript..? Нет! Раз уж зарелизился Go 1, давайте на нём и напишем ;). Я постараюсь не повторяться и не писать сюда целиком код. Я приведу лишь интересные, на моей взгляд, фрагменты.

Демо

Спасибо пользователю Aleks_ja за возможность посмотреть эмулятор терминала в действии (нужен браузер с последней версией вебсокетов — например это Firefox 11 или последний Chrome). С первого раза оно может не подключиться, если демон не успеет стартовать за 100 мс — попробуйте сначала обновить страницу.



Исходный код веб-терминала доступен на гитхабе. Компилировать вебсокет-демон необходимо самостоятельно (командой go build) — это небольшая мера защиты от тех, кто любит «повзламывать» хостеров ;).

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

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

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

В этот раз мне пришла такая идея: заменить эту картинку кодом. Здесь видится несколько вариантов. Первый — это dom-анимация. Второй — это canvas-анимация.

25 марта на Гитхабе в репозиториях компании LearnBoost, широко известной в сообществе Node.js благодаря проектам Socket.io, mongoose, cluster, появился небольшой модуль console-trace. Это маленькое, но полезное дополнение функции console.log(), которое раньше было доступно только в консолях браузеров — вывод имени файла и номера строки, из которой вызвана console.log().

Привет!

Откровенно говоря, я не знаю, один ли я в своей беде, но за долгое время использования Google Reader в качестве RSS-читалки, мне изрядно надоела непропорциональная ширина кнопки «Подписаться» и всплывающего по её нажатии блока. Казалось бы, всё это фигня, но глаз мозолит очень сильно.

А что ещё прискорбнее, этот баг из старой версии ридера, переехал в новую. Да и вообще, у меня закрадываются подозрения, что я один кто с ним столкнулся…

Короче говоря, вот она, проблема:

Добрый день, уважаемые хабраЛеди и хабраДжемпельмены. Сегодня я поведаю Вам о создании API для вашего сайта. Знаю, тема в какой-то своей части достаточно обсосанная, но я наткнулся на недостаток определенной информации при разработке API для одного из проектов.
Речь пойдет о JSONP, SMD и компоненте Dojo dojox.rpc.Service.
Интересно? — Прошу под кат.

Здравствуйте!



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

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

Теория

В андроид-маркете лежит замечательная программа IpWebCam, которая позволяет превратить свой телефон в полноценную веб-камеру. Кроме того у нее есть api для получения фотографий с автофокусом. При запуске IpWebCam, на телефоне поднимается web-сервер, который позволяет с локальной машины по wi-fi получать текущий кадр с телефона по адресу вида 192.168.0.14:8080/shot.jpg

Идея была следующая:

1. Вставить в форму <img> с адресом фотографии со смартфона
2. Создать canvas и в него скопировать содержимое <img>
3. Сохранить данные при помощи canvas.toDataURL()
4. Отправить данные на сервер при помощи ajax

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

Здравствуйте!

Недавно появилась необходимость сделать простое иерархическое дерево для web страницы (структура организации). Блоки получились неплохие, но когда пришло время соединить все стрелками, возник вопрос – как? Решение было два: рисовать стрелки в .png или же использовать спецсимволы.

Но хотелось чего-то более быстрого, удобного, современного – т.е. просто указать: стрелка от блока А к блоку Б. Уже к вечеру была написана небольшая библиотека, позволяющая реализовывать задуманное…

В этой статье я кратко в примерах объясню что такое свойства __proto__, prototype и работу оператора new в JavaScript.

Свойство __proto__

Абсолютно любой объект в JavaScript имеет свойство __proto__. Это скрытое системное свойство, и не во всех реализациях языка оно доступно пользователю.
При обращении к любому свойству объекта, оно в первую очередь ищется в самом объекте:

var obj = {ownProperty: 1};
console.log(obj.ownProperty);// 1

Но если его там нет, поиск происходит в свойстве __proto__:

obj.__proto__ = {propertyOfProto: 2};
console.log(obj.propertyOfProto);// 2

Если его нет и там, оно ищется дальше по цепочке:

obj.__proto__.__proto__ = {propertyOfProtosProto: 3};
console.log(obj.propertyOfProtosProto);// 3

Эта цепочка называется цепочкой прототипов (prototype chain).

Здравствуйте, уважаемые хабражители. Постов про пользовательские скрипты (userscripts) было на хабре немало, тем не менее, они только показывали, как ими пользоваться. А в работе юзерскриптов достаточно много кроссбраузерных несовместимостей (как и в любой области браузерного js). Естественно, можно установить различные дополнения для разных браузеров, однако, в случае написание скрипта для конечного пользователя, придётся сопровождать его огромным readme по установке компонент для обеспечения нормальной его работы. Что лично меня, да и вас, полагаю, тоже, не очень-то устраивает.

В данной статье речь будет вестись о трёх браузерах: Mozilla Firefox (с установленным GreaseMonkey), Google Chrome, Opera. Целью статьи является «заготовка», которая позволит пользовательскому скрипту работать одинаковым образом во всех перечисленных браузерах. Реализация GM API рассматриваться не будет, т.к. таковых уже сотни. Предполагается, что читатель уже знаком с общими правилами написания юзерскриптов (в случае, если нет, рекомендую сначала прочитать другую статью).

Несколько месяцев назад на Гитхабе появилась очень неплохая коллекция паттернов и антипаттернов JavaScript и jQuery на все случаи жизни. Автор проекта Shi Chuan проделал отличную работу, собрав десятки примеров кода из книг и других источников. Репозиторий уже набрал почти полторы тысячи подписчиков и активно пополняется. Всё очень удобно разложено по категориям и откомментировано. Наслаждайтесь!

BrowserQuest от Mozilla — это дань классическим многопользовательским играм. Вы играете за молодого воина, который ищет приключения на свою пятую точку. Тут не нужно спасать красавицу-принцессу, но это вам с лихвой окупится опасным миром, наполненным сокровищами и корованами. И главное, все это сделано с помощью HTML5 и JavaScript!

Проект с открытым исходным кодом и хостится на GitHub!

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

Периодически я вспоминал об этой идее, но беглый взгляд в гугл не давал ничего интересного. До недавнего времени.

Когда в январе мне снова захотелось посмотреть, а не появилось ли чего интересного на эту тему, я нашел прекрасный букмарклет Visual Event 2, написанный Allan Jardine. Букмарклет работал как часы, но нашлась и пара ложек дегтя, маленьких, но неприятных.

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

Поэтому было решено оформить букмарклет в виде расширения для браузера Opera. К тому же я давно хотел познакомиться с Opera Extension API. Вот ссылка на страницу расширения для самых нетерпеливых. Остальных же прошу под кат, где описаны все этапы конвертации букмарклета в расширение для Оперы, проблемы, с которыми я столкнулся и методы их решения.

В мире IT в последнее время наметилась тенденция к стремлению максимально уменьшить количество исходного кода, не теряя при этом функциональность. Так вот некий товарищ Alokmenghrajani со своими друзьями задался целью написать игру с минимальным количеством кода. Задумка была написать игру по фильму Tron, и в итоге у них получилось 219 байт, что весьма неплохо.

Эта картинка, если на первый взгляд, выглядит фотографией реального облака в реальных небесах:



Тем не менее на сайте «CSS3D Clouds» объёмное облако вращается, реагируя на движения мыши, и может быть заново (иначе) сгенерировано в любой момент. Ведь на деле оно является итогом применения JavaScript и трёхмерных CSS-преобразований к нескольким копиям одной и той же картинки облака: из них, как из вокселей, формируется более крупное облако.

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

Как известно, CoffeeScriptпредлагает несколько иной набор управляющих конструкций, нежели JavaScript.

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

Компания MajorSecurity опубликовала описание уязвимости в браузере Safari Mobile под iOS 5.1. C помощью этой уязвимости можно подделать адрес в адресной строке.

Проблема связана с некорректной обработкой вызова javascript's window.open() в JavaScript. Баг позволяет отобразить в адресной строке URL чужого сайта, тем самым жертву можно ввести в заблуждение.

Чтобы продемонстрировать уязвимость на практике, специалисты сделали специальную тестовую страничку. Можете зайти на неё браузером Safari из-под iOS 5.1 — и нажать кнопку Demo.

http://majorsecurity.net/html5/ios51-demo.html



После того как вы нажали кнопку Demo браузер Safari откроет новое окно, где в адресной строке указано www.apple.com, но на самом деле сайт apple.com открывается во фрейме на хосте majorsecurity.net, то есть фактически пользователь не покинул сайт majorsecurity.net.

Здравствуйте, хабравчане-маководы!

Сегодня мы с вами попробуем разобраться в азах создания виджета для Dashboard в Mac OS X. Нам понадобится программа Dashcode, предназначенная как раз для этого.

Для начала немного теории. Виджет в Dashboard — это специально сформировання веб-страничка, упакованная в бандл вместе со всем ресурсами. Ну, и немного служебной информации в довесок. Соответственно, используемый язык программирования — JavaScript. Если Вы уже знакомы с ним, а так же с HTML/CSS (хотя это вряд ли понадобится), то Вы уже способны написать простенький виджет. Если же нет, то не стоит расстраиваться, этот язык очень прост и интуитивно понятен, разобраться с ним можно достаточно быстро. Далее я буду считать, что с JS читатель более-менее знаком. Сама же статья рассчитана на новичков, так что прошу не ругать за «слишком простое изложение и детальное разжёвывание элементарных вещей». Кроме того, за дизайн тоже прошу не пинать — ну не дизайнер я, не дизайнер! Если кто хочет помочь с этим делом — welcome =)

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

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

Такой виджет (ну, очень похожий) уже был создан хабратоварищем neoromantic аж в 2007 году, но ссылки на скачивание не рабочие, а кроме того, та статья не содержала практического руководства по созданию подобных виджетов.

Для некоторых юзерскриптов начинает иметь значение, каким способом пользователь установит его в браузер Оперу. Если сделать установку, не разрешив доступ к некоторым доменам, работа будет неполноценной, а при установке кроссдоменного скрипта, да ещё использующего защищённый протокол (HTTPS), такое запросто может случиться. Например, для юзерскрипта HabrAjax, кроме основного сайта Хабра, используется доступ к кнопкам Google Plus на plusone.google.com и проверяются обновления скрипта на домене userscripts.org. Всё это требует дополнительных настроек, которые были описаны прямо в юзерскрипте (ссылка в настройках "примеч.для Оперы"), но сделаны довольно кратко и с одной иллюстрацией. Здесь посмотрим на вопрос шире, чтобы пользователи Оперы и разработчики юзерскриптов для неё имели инструкции под рукой и полностью понимали широту вопроса. Заодно, описаны места установки юзерстилей. Для тех, кто всё это знает, полезно будет посмотреть абзац выводов с 2 замечаниями в самом низу.