JavaScript *

Невероятный успех продемонстрировал стартап Codecademy, который обучает новичков программированию на JavaScript с помощью бесплатных интерактивных уроков. Уроки осуществляются в приложении с простым и интуитивно понятным интерфейсом. Ещё одна особенность проекта — регистрация на сайте не требуется, пока вы не закончите парочку первых уроков.

В первые три дня сайт привлёк 200+ тыс. активных пользователей (считаются те, кто зашёл на сайт и запустил приложение), количество законченных уроков составило ≈2,1 млн, пишет TechCrunch.

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

Здравствуйте, Друзья.

Всё новое — хорошо забытое старое!
Речь пойдёт НЕ О HTML/JavaScript, а только о JavaScript!
Искал эту тему на Хабре, но не нашёл…

Работаю системным администратором в своей компании (домен windows) и поэтому часто приходится писать различные скрипты. За время работы была сделана библиотека функций (от .prototype, до WMI), которые вечно приходилось таскать за собою из файла в файл, что очень напрягает и утяжеляет код. Очень неприятно, когда начинаются модификации библиотечных функций (так же написанных на JavaScript). Вот тогда приходится искать где эта функция уже использовалась? Процесс поиска — утомительный, да ещё и отладкой нескольких файлов попахивает. Вот тогда и всплыло в моей памяти, что несколько лет назад читал где-то на форуме (уже за давностью лет и забылось на каком), что есть возможность делать такие «include»

Эти маленькие куски кода я насобирал за весь свой стаж JavaScript-программирования. Они должны серьезно облегчить жизнь Web-разработчика, и научить решать проблемы проще, не прикручивая тяжеловесные JavaScript-библиотеки. Не спорю, иногда они могут оказаться весьма полезными, но подгружать JQuery для создания таймера — это, по-моему, дикость…

Wacom Javascript API позволяет приложению получить разные интересные параметры текущего состояния планшета. Например, силу нажатия или координаты ручки относительно планшета. А так же статические данные, такие как версия плагина или модель планшета.

В данном Хабратопике я покажу, как работает данный API, на примере HTML5 Canvas «рисовалки».

Вступление

Привет хабровчане,

Вашему вниманию хотел бы предоставить небольшую, но полезную функцию которая:

• Сделает работу верстальщика немного проще и чище
• Упростит выборку элементов на странице через популярные платформы, аля jQuery

Смысл функции в том, что бы вместе с загрузкой страницы/после неё определить важные параметры клиента, такие как:
Браузер, версия браузера, О.С, движек браузера и.т.п
И разместить их в html тэг вашей страницы.

Дальше — больше. Читаем?

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

   <div id="block_outer">
      <div id="block_inner"></div>
   </div>

А теперь представьте, что к блоку #block_outer привязано событие onClickOuter, а к блоку #block_inner, соответственно, событие onClickInner. И ответьте на вопрос, как сделать так, чтобы при клике на блок #block_inner, событие onClickOuter не вызывалось? И будет ли оно вообще вызвано? И если будет, то в каком порядке события будут вызываться? И знаете ли вы, как работает метод jQuery.live или подобные в других библиотеках (events delegation в ExtJS, например)?

На Google Code появился ещё один порт известного физического движка Box2D на JS — box2dweb (по ссылке есть демо). Автор говорит, что уже существует портированная версия Box2dJs, но она давно не обновлялась, так что приходится импортировать большое количество JS-библиотек в каждый проект.

Кроме двух упомянутых, на сегодня список библиотек физики на JavaScript выглядит так:

github.com/thinkpixellab/box2d — обработанный компилятором Closure Compiler порт Box2D на JS
code.google.com/p/bulletjs — порт фрагментов Java-библиотеки JBullet (http://jbullet.advel.cz/)
github.com/supereggbert/JigLibJS — порт JigLib на JS
github.com/hapticdata/toxiclibsjs — порт Toxiclibs VerletPhysics на JS
github.com/kripken/ammo.js — порт Bullet на JS

В первой части руководства по SproutCore рассказывалось о создании простого приложения.
Пришло время углубить знания и разобраться с Моделями в SproutCore.

После прочтения данного руководства вы сможете:

• Описывать модели с помощью SC.Record.
• Управлять моделями с помощью SC.Store.
• Загружать начальные данные в хранилище.
• Посылать запросы к хранилищу с помощью SC.Query.

Page Visibility API — новое API в JavaScript, которое позволяет узнать, видит ли пользователь ваш сайт или же он, например, открыл другой таб.

Каким образом это API может сделать наш Веб дружелюбнее и уютнее? Ну самое очевидное:

• Сделать сайт более дружелюбным к пользователю, «поднять юзабилити». Например, отключать слайдшоу или ставить видео на паузу, когда вы переключаетесь в другой таб (например, вы смотрите видео на YouTube и вам приходит срочное эл. письмо).
• Не потреблять лишних ресурсов. Выключать лишнюю логику, когда она не нужна, так как пользователь не видит сайт. Например, в фоновом табе отключать сложные JS-рассчёты или реже проверять новые сообщения по AJAX.
• Считать более точную статистику. Например, не засчитывать пользователей, которые открыли ваш сайт в новом табе и закрыли его не просматривая.
• Поддерживать новую технологию пререндеринга из Google Chrome, когда браузеру заранее загружает и рендерит указанную страницу, чтобы открыть её мгновенно. Например, в поиске Google первый результат выдачи будет отмечен на прередеринг.
• Сделать эмулятор кота Шрёдингера (на иллюстрации), который отобразит живого или мёртвого кота только тогда, когда пользователь откроет загруженный в фоне таб.

Чтобы сделать работу с Page Visibility API более удобной, я (во славу Злых марсиан) разработал библиотеку Visibility.js. Она позволяет забыть о вендорных префиксах и добавляет «сахара» высокоуровневых функций, чтобы писать короткий чистый код (например, Visibility.every — аналог setInterval, но работает только, если сайт в открытом табе).

Милый пример видео-проигрывателя, который останавливает видео, когда страница становится невидимой (открывать в Google Chrome 13).

В последнее время появилось много статей о JavaScript MVC фреймворках. Видимо есть потребность в подобных инструментах. Мое внимание привлек продукт под названием SproutCore. Обнаружив на скудное наличие информации на русском языке я решил перевести для себя ряд руководств с официального сайта фреймворка. Поделюсь с сообществом первым из них.

После прочтения этого руководства, вы сможете:

• Использовать шаблоны SproutCore, для описания внешнего вида приложения;
• Обрабатывать события внутри представления;
• Использовать привязки(bindings) для обновления представления, после изменения состояния модели.

Вы узнаете все это во время создания приложения Todo-лист.

Исходный код этого приложения доступен на Github. Также есть скринкаст.

Прим.: Обычно не занимаюсь переводами, но новость проскочила интересная.

В сегодняшней браузерной экосистеме веб-приложения полностью изолированы друг от друга, и для того, чтобы, к примеру, отправить комментарий в твиттер через сторонний сервис со своего сайта, необходимо использование сложных (Прим.: ну я бы просто сказал «разнообразных») API. А что если бы мы могли дать сайтам возможность использовать подобные сервисы не зная, какой конкретно сервис мы будем использовать, а зная лишь о том, что он предоставляет некий функционал.

В Android OS эта проблема решается при помощи Intents^[1] — архитектуры, позволяющей взаимодействовать компонентам одного или нескольких различных приложений. По этой схеме, клиенсткое приложение создает запрос (к примеру, разослать что-нибудь) и задает параметры, которые будут переданы другому приложению-сервису. После этого пользователю предоставляется список приложений, которые регистрировали свою возможность обрабатывать данный тип intent-запроса. Затем выбранное пользователем приложение запускается в новом контексте, и ему передаются параметры, переданные клиентом в некоем, заранее определенном для конкретного типа intent, формате.

На данный момент мы прилагаем большие усилия для создания аналогичной системы для шеЬ: Web Intents. Эта система предоставит те же удобства, что и Intents для Android, но будет адаптирована для web-приложений.

В последнее время на Хабре все больше упоминаний о KnockoutJS, и я не останусь в стороне от этого тренда.
Сегодня я расскажу о том как сделать своими руками Ajax Grid View с фильтрацией и переходом по страницам написав, при этом, совсем немного кода.
Начиная писать эту статью я чувствовал себя несколько неловко, да и сейчас ощущение не ушло. Все дело в том, что сама библиотека простая, паттерн MVVM простой, и рассказывать я буду простые вещи. Я уверен, что в ближайшее время Knockout получит достаточно большое распространение. А неловко мне от того, что уже через год-дугой кто-то наткнувшись на эту статью будет обескуражен простотой изложенного материала. Примерно так, как любой из вас сейчас, открывший статью о jQuery от 2007 года.

Кто не испугался предполагаемого баяна, милости прошу под хабракат.

В данном посте я расскажу о своем опыте использования Google Maps JS API и его внедрение в мобильную версию сайта с весьма крупной посещаемостью.

Soundex — один из алгоритмов сравнения двух строк по их звучанию. Был разработан чуть менее 100 лет назад Робертом Расселом и Маргарет Оделл. Активно используется в США при диктовке фамилий.

Я давно интересовался применением этого алгоритма и нашёл ему место для фильтрации данных на клиенте, а точнее, для поиска отеля по названию в проекте Островок.ru.

Задача

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

Пост в продолжение недели^W месяца JavaScript на Хабре.

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

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

Напомню, что ICanHaz — это простой способ чуть-чуть организовать шаблоны Mustache, используемые javascript'ом в браузере. Рендеринг шаблонов с помощью этой библиотеки сводится к простому вызову функции. Ещё она избавляет от необходимости экранировать половину шаблона, т.к. его текст можно писать прямо в HTML-теге <script>

В своей статье о фильтрации списков на Knockout я упоминал, что читал доклад о MVVM и KnockoutJS на .NET Saturday в Днепропетровске.

Совсем недавно подоспело видео и я спешу им поделиться. Хочу заранее немного оправдаться — поначалу я немного тараторил, но потом вошёл в ритм и вроде как всё было достойно.

Сам доклад разделён на 2 части:

1. рассказ о MVVM с разбором практического примера, как сей паттерн может облегчить жизнь при разработке UI
2. написание простенького приложения на Knockout в live-режиме. Эта часть доклада всем понравилась больше чем первая, но за несколько моих «затупов» я до сих пор краснею :-)

Посмотреть видео доклада

PS 1: слайды можно скачать тут: bit.ly/qX61m2
PS 2: если вдруг кому нужны исходники демо-проекта — я выложу. Но их как минимум причесать надо

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

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

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

Что же такое Sugar?
Это javascript-библиотека для работы со встроенными объектами javascript, которая:

• расширяет встроенные объекты языка, добавляя полезные и интуитивно-понятные методы;
• добавляет кросс-браузерную функциональность, где она сломана или ее нет;
• полностью покрыта тестами;
• легко взаимодействует с другими фреймоворками и сторонним кодом;
• проста в понимании и использовании

В качестве примера использования, автор приводит вот такой код:

getLatestTweets(function(t) {
    var users = t.map('user').unique();
    var total = users.sum('statuses_count').format();
    var top = users.max('followers_count').first();
    var count = top.followers_count.format();
    var since = Date.create(top.created_at);
    return users.length + ' users with a total of ' + total + ' tweets.\n' +
    top.screen_name + ' is the top with ' + count + ' followers\n' +
    'and started tweeting ' + since.relative() + '.';
});


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

Хорош console.log, а нахваливать дальше некуда. И поддерживается не везде, и многобуквием страдает. И появляется задача иметь несложную функцию, настолько же гибкую, как console.log (или более), но приспособленную к разным браузерам без переделок, чтобы вывести одно или несколько значений. В отладке часто нужны текстовые поясняющие заголовки в строке, поэтому оказалось удобным иметь метод, добавленный к строке (объект String) с именем Alert, выполняющий то же самое, что и console.log и выводящий контекст-строку впереди списка аргументов. (Строку в апострофах, потому что удобно затем копировать и искать по кодам, где такой заголовок написан.)

По мотивам топика Chosen: сделай выпадающие списки более дружественными.

Довольно симпатичный виджет, иногда даже может быть полезен (допустим когда есть определенные требования к дизайну). Но в данный момент виджет не позволят добавлять позиции динамически, что возмутило товарища alexsrdk, да и меня тоже :) Сейчас попробуем это дело исправить.