JavaScript *

Фреймворк Angular.js видится весьма перспективным, но, к сожалению, материалов на русском по нему почти нет. Чтобы поспособствовать формированию русскоязычного сообщества, начал перевод руководства разработчика. Подключайтесь angular.ru

Добавка

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

Схема работы следующая — на страницу требуется добавить JS-библиотеку:



и кнопку для включения работы TowTruck примерно так:.

Start TowTruck

Благодарю всех кто прочитал, отозвался и оценил первый пост!

Для демонстрации как работает идеология Jiant — реализовал ToDoMVC, проект, созданный для оценки различных MVC фреймворков. Jiant не MVC фреймворк, а скорее подход к разработке с набором вспомогательных инструментов. На разработку у меня ушло порядка 8 часов с учетом чтения и понимания спецификации, изучения референтной реализации, localStorage, с которым не имел дела (очень простая штука) ну и всего прочего. Не знаю много это или мало, но вот столько. Результаты лежат по адресу: github.com/vecnas/todomvc-jiant. В Chrome и Firefox работает прямо с файловой системы, в IE — с сервера.

Здравствуйте всем, этот пост о библиотеке, а вернее философии разработки приложений на Javascript которую изобрел пару месяцев назад. Постоянно использую сам, раздал всем друзьям. Отзывы положительные, поэтому решил рискнуть открыть более широкому сообществу.
Сама библиотека работает как подстройка к jQuery. Практически зависимость от jQuery условна и ее можно разделить с самой библиотекой, пока не было необходимости.
Jiant позволяет создавать клиентские приложения любой сложности, значительно упрощая их поддержку и развитие.

Хабровчане! С днем космонавтики!



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

Всем привет!

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

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

Наслаждайтесь: rnikitin.github.io/bootstrap

Список изменений приводить не буду, он очень большой, посмотрите сами.
Что думаете о новом бутстрапе?

Вместо вступления

Я хочу рассказать вам о некоторых трудностях, с которыми мы столкнулись при разработке встраиваемого JavaScript приложения, виджета комментариев "Комментатр".
В этой статье я опишу некоторые проблемы и тонкости разработки подобных приложений, а также предложу варианты их решения.
В качестве backend–решения мы используем приложение на Ruby on Rails, поэтому некоторые фрагменты этой статьи будут специфичны для Rails–окружения.

Комментатр состоит из двух проектов: API и виджета, который устанавливается на сайт клиента. Речь пойдет об их взаимодействии между собой и виджета с сайтом клиента. В основном общение виджета и API происходит посредством JSONP, который, как известно, поддерживает только GET–запросы. В связи с этим возникает первая сложность.

По своей сути это time-lapse, с использованием в качестве изображения Google Street View.

Ребята из Tehan+Lax Labs реализовали Hyperlapse.js на основе Google Street View. Так же сделана демка, с использованием собственно Hyperlapse.js, Three.js (r57), модифицированная версия GSVPano.js, и Google Maps API v3.

Исходники доступны на github.

Можете посмотреть сразу работу этой штуки, в Киеве, например.

Сейчас стало модным трендом использовать twitter bootstrap и всевозможные форки с различными темами. Есть даже уже биржи с готовыми шаблонами для сайтов на основе бустрапа. Хипсторы вовсю купаются в тренде закосов под старину. Так вот специально для хипстеров предлагается олдскульная типографика со всеми вытекающими. Вам надоел вебдваноль? Тогда этот форк

divshot.github.io/geo-bootstrap
(ссылка на гитхаб github.com/divshot/geo-bootstrap)

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

Не так давно на хабре обсуждалась новая инициатива от W3С — Encrypted Media Extensions или просто EME. Попробуем же разобраться на практике, что нового и интересного нам предлагают.

Knockout.JS — хорошая библиотека для создания сложных веб-приложений. Долгое время мне в ней не хватало асинхронного механизма шаблонов. Реализовать его не получалось, пока я не узнал что window.setTimeout вызывает свой callback не раньше окончания работы текущего контекста. Т.е. в коде

setTimeout("console.log(window.Value)",0),(function (){while (Math.random() < 0.9999999);window.Value = 1;})()

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

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

В статье будет рассказано о базовых подходах к возврату асинхронных результатов, функциях обратного вызова, объектах deferred и их возможностях. Будут приведены примеры на языке JavaScript, а также произведён разбор типового объекта deferred. Статья будет полезна программистам, начинающим постигать асинхронное программирование, а также знакомым с ним, но не владеющим объектом deferred.

Вашему вниманию представляется небольшая история появления расширения Link Properties Plus и описание того, как работает его основная часть.
Расширение позволяет узнать размер, дату последнего изменения и некоторые другие свойства файла по ссылке (в том числе прямую ссылку после всех перенаправлений) без скачивания всего файла целиком. Если, конечно, все это сообщает сервер.

Иногда нужно реализовать отсчет времени для каждого посетителя в отдельности, на одностраничниках либо сайтах — без установки плагинов и подключения библиотек (например, jQuery). Для решения этой задачи я разработал счётчик на чистом JavaScript.
Данный счетчик работает следующим образом:

1. Активируется при загрузке страницы.
2. Проверяет наличие записи окончания отсчета в Cookie браузера посетителя.
3. Если запись есть — то считывает её. Если записи нету — то берёт время указанное в настройках скрипта, и делает запись в Cookie браузера посетителя.
4. Производятся преобразования времени в формат для более гибкой настройки оформления счетчика.
5. Выводится счетчик либо надпись о завершении отсчета (если время закончилось) в место вызова скрипта.

Рассмотрим вариант реализации связных списков через замыкания.

Для обозначения списков будем использовать нотацию, похожую на Haskell: x:xs, где x — начало списка (head), xs — продолжение (tail).



В качестве языка реализации я выбрал JavaScript.

Конструируем список

Введение

Dojo Toolkit это модульная JavaScript библиотека с открытым исходным кодом, предназначенная для облегчения быстрой разработки кросс-платформенных JavaScript/Ajax-ориентированных приложений и веб-сайтов, которая предоставляет некоторые действительно мощные возможности для пользовательского интерфейса. Компонент Dojo Tree обеспечивает полное, привычное, интуитивно понятное, развертываемое представление иерархических данных. Этот компонент поддерживает отложенную загрузку веток, что делает его хорошо масштабируемым для больших объемов данных. Dojo Tree отличный виджет для представления данных с отношениями «предок-потомок».

Эта статья показывает процесс создания дерева, поддерживающего «CRUD операции», «drag and drop (DnD)» и «отложенную загрузку». Чтобы создать такое дерево мы будем использовать Dojo Tree, Entity Framework, SQL Server и Asp .Net MVC.

Для начала, ликбез и несколько фактов:

• ECMAScript — это официальный стандарт языка JavaScript (Слово JavaScript не могло быть использовано, потому что слово Java являлось торговой маркой компании Sun) Т.е. JavaScript — это имплементация стандарта ECMAScript.
• TC39 — комитет, развивающий стандарт ECMAScript и принимающий решения по включению фич в него.
• ECMAScript стандартов много. Самый популярный из них — ECMA-262.
• ECMAScript 5 — последняя редакция стандарта ECMA-262 (утвержден в 2009 году).
• Предыдущие версии стандарта ECMA-262 были (совсем старые не упоминаю):
  
  • ECMAScript 3 — поддерживается большинством браузеров (утвержден в 1999 году).
  • ECMAScript 4 — не принят в виду слишком радикальных изменений в стандарте. Позднее в июле 2008 году в урезанном варианте (но все же намного богаче, чем ECMAScript 3) вылился в новый проект ECMAScript Harmony.
  
  
• ECMAScript 6 (кодовое имя ECMAScript.next) должен утвердиться до конца 2013 года.

Итак, что же нас ждет в новой версии JavaScript?

Речь пойдет о моем расширении Private Tab для Firefox и SeaMonkey: некоторые подробности реализации – и конкретно этого, и расширений, не требующих перезапуска (aka restartless), вообще.

Расширение добавляет приватные вкладки, для которых не будет сохраняться история и будет использоваться отдельный набор cookies.

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

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

В условиях когда клиентская часть веб-приложений становится все более толстой, бизнес-логика неумолимо переползает на клиент, а на суверенитет серверных технологий все более смело посягает node.js нельзя не задуматься о приемах проектирования архитектуры на javaScript. И в этом деле нам несомненно должны помочь паттерны проектирования — шаблонные приемы решения часто встречающихся задач. Паттерны помогают построить архитектуру, которая потребует от вас наименьших усилий при необходимости внести изменения. Но не стоит воспринимать их как панацею, т.е., грубо говоря, если качество кода «не фонтан», он кишит хардкодом и жесткой связью между логически независимыми модулями, то никакие паттерны его не спасут. Но если стоит задача спроектировать масштабируемую архитектуру, то паттерны могут стать хорошим подспорьем.
Но впрочем эта статья не о паттернах проектирования как таковых, а о их применении в javaScript. В первой части этой статьи я напишу о применении порождающих паттернах.

От переводчика: Не смотря на то что оригинал данной статьи датирован январем 2009 года, она не потеряла актуальности и теперь. Я надеюсь что даже те, кто используют JavaScript не первый год, почерпнут для себя что-то полезное.

1. Используйте === вместо ==

В JavaScript существует два разных типа операций сравния: === / !== и == / !=. Считается хорошим тоном всегда использовать первую пару для сравнения.

“Если два операнда одного типа и значения, то === вернет true, а !== false”
JavaScript: The Good Parts