JavaScript *

Предисловие

Пришла мне в голову смелая мысль, взяться за написание туториала по разработке на node.js (что-то наподобие ruby.railstutorial.org). Так как я первый раз берусь за подобный труд то для для меня очень важен любой фидбэк. Нужно это — не нужно. Что стоит убрать а на чем остановиться подробнее, в общем любая конструктивная критика. Надеюсь что дело пойдет и вам понравится, в этом случае по мере написания буду выкладывать главы на хабр.

Вступление

Приветствую, перед вами небольшой учебник по практической разработке на node.js, с использованием фреймворка express. Я с большим энтузиазмом отношусь к node и сопутствующим технологиям. Node.js в первую очередь привлекает свежестью в подходах к разработке, смелостью и драйвом.

О том, что такое node.js вы можете прочитать на http://nodejs.org/, если коротко — то это серверная платформа, для выполнения javascript. Так же мы будем использовать express, web-фреймворк построеный на концепции middleware (о том, что это такое, поговорим поподробнее чуть позже)

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

Хочется отметить, что очень большое влияние на меня оказал railstutorial, это лучшее пособие по web-разработке, которое я встречал, и мне очень хотелось бы создать нечто подобное для node.js.

Ребята из Official.fm Labs задумали совершить настоящую звуковую революцию в вебе: две недели назад они выпустили FLAC.js — декодер аудиофайлов формата FLAC (Free Lossless Audio Codec), а также Aurora.js — фреймворк на CoffeeScript для простого подключения декодеров и создания веб-приложений, работающих со звуком. Таким образом, через Web Audio API теперь можно слушать музыку в идеальном качестве, и все веб-приложения могут обращаться к звуковой карте стандартным образом.

Демо

JavaScript уже так могуч, что браузер декодирует звук, потребляя менее 5% ресурсов CPU. Можно представить, какие крутые звуковые редакторы, миксеры и прочие аудиоприложения появятся в вебе в ближайшее время.

Американский веб-разработчик Мэтт Даймонд (Matt Diamond) написал библиотеку JavaScript под названием FuckItJS. Если вставить в код метод FuckIt, то он заставит исполняться самый плохой скрипт, «нравится это компилятору или нет».

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

На конференции Google I/O 2012 во второй части своего выступления Paul Irish представил проект yeoman.io. Главной целью которого является собрать для разработчика лучшие библиотеки и фреймворки в одном месте и создать идеальную среду для разработки за кратчайшее время.

Всем привет! Хочу предложить вниманию сообщества технический механизм, позволяющий без лишних усилий сделать iframe-подобное приложение, работающее на ajax. В качестве основы использованы jQuery и easyXDM.

Техническое описание, прототип, предположения о возможных вариантах использования и сомнения под катом.

В этой статье я расскажу как можно организовать процесс сборки фронтэнда «от и до».

Советую начать со вводной статьи, если кто не читал.

Там я рассказывал про TeaCSS как про надмножество CSS, и это была неправда. Точнее – полуправда. И таким он был во времена своего создания (откуда и название).

Сейчас – это декларативный метаязык для генерации контента, во многом черпающий вдохновение из QML, Lisp, Clojure, Nemerle.

Цитата из Google JavaScript style guide:

Возможность создавать замыкания — похоже, самая полезная и часто остающаяся без внимания особенность JS.

Однако, одну вещь нужно иметь виду: замыкание хранит указатель на замыкаемый им контекст. В результате, прикрепление замыкания к элементу DOM может породить циклическую зависимость и, следовательно, утечку памяти. Например, в следующем куске кода:

function foo(element, a, b) {
  element.onclick = function() { /* использует a и b */ };
}

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

На днях встала задача: во что бы то ни стало, нужно было отличить iPad1 от iPad2 в браузере. iPad3 можно отличить с помощью window.devicePixelRatio, а вот с первыми двумя проблема. Детальное изучение всего объекта window результатов не дало. Появилась мысль попытаться отличить их по видеокарте с помощью WebGL, но WebGL заблокирован.

На днях побывал в одной из забегаловок, подключился к интернету через Beeline Wi-Fi, посидел, ушел.
Потом дома уже обнаружил, что, оказывается, когда Билайн хотел от меня нажатия на кнопку «Войти в интернет», он…

Очень часто можно столкнуться с тем, что картинки в топике не грузятся и в комментариях пользователи возмущаются, что «надо бы перезалить картинки на HabraStorage». Но не все готовы устанавливать какой-то Adobe FlashPlayer, чтобы пользоваться этим сервисом.

Поэтому я написал небольшой userscript для себя и готов поделиться им со всеми.

• Проект на GitHub
• Прямая ссылка на .js

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

Очередным редактором HTML, CSS и JavaScript, написанным на HTML, CSS и JavaScript сейчас никого не удивишь. Однако есть несколько причин, по которым стоит обратить внимание на пока ещё совсем зелёный и молодой проект Adobe Brackets. Во-первых, его делает Adobe. Поддержка такой крупной корпорации значит очень много. Во-вторых, Open Source бывает разный. В случае с Brackets это правильный, настоящий Open Source — уровень открытости весьма и весьма высок. Проект был опубликован на Github в начале мая этого года, несмотря на то, что он ещё в совершенно младенческом состоянии. Бэклог проекта тоже открыт для всех — разработка ведётся по методологии scrum спринтами по 2.5 недели. В-третьих — дизайн и архитектура этого IDE заслуживают более подробного рассказа.

Готовясь к конференции DevCon'12 и, помня о Тостере по JavaScript, который проходил буквально на следующий день, мы решили, что было бы очень здорово сделать что-то полезное информационное для веб-разработчиков.

Как результат, родился плакат по современным веб-стандартам, вернее, как это принято в мире веб-разработки, черновик плаката, в который мы включили, как нововведения в самой спецификации HTML5:

Давненько ничего на хабре не слышно новостей о JS фреймворке MooTools. Между тем, он продолжает своё развитие. На данный момент последняя версия ядра — 1.4.5.

Однако сейчас разговор о другом. Ещё 20 апреля в своём твиттере разработчики сообщили, что с использованием ядра библиотеки начата разработка фреймворка для мобильных устройств.
Upd.1 — разрабатывают его не создатели MooTools, спасибо magmoro заметил неточность.

Итак moobilejs.com.

Приветствую, дорогой читатель! В данной статье я хотел изложить одну проблему, с которой я столкнулся при разработке, а также способ ее решения. Решение конечно не самое безупречное, но имеет место быть. Если вам что-то не понравиться, или вы знаете решение лучше, прошу большими огурцами меня не бить, так как я еще мал и зелен. Бейте маленькими с комментариями и поучениями.

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

В ECMAScript пока отсутствует понятие «класс», в классическом понимании этого термина, однако, в CoffeeScript такое понятие есть, поэтому сегодня мы рассмотрим этот вопрос очень подробно.

Содержание:

1. Основные понятия
2. Члены класса
   2.1. Метод constructor
   2.2. Открытые члены класса
   2.3. Закрытые члены класса
   2.4. Защищенные члены класса
   2.5. Статические члены класса
   2.6. Оператор => (fat arrow)
3. Наследование
4. Дополнительная литература

День назад праздновали день рождения Тьюринга, и на сайте Гугла был дудл с джаваскриптовой машинкой Тьюринга. Уже не первый раз поисковик показывает нетривиальные и интересные скрипты, которые потом, после дня празднования, исчезают в небытие. Странно, что на странице всех дудлов о них есть немного слов, но нет работающих моделей, как, например, по рассматриваемому дудлу машины Тьюринга (UPD4 (26.06.2012, 5:20) — по этой ссылке появился живой скрипт, можно играть; но обфусцированный ещё сильнее, чем был на странице). Возможно, они где-то есть, но поиск в интернете не привёл к результату. Такое своевольное поведение стихии интернета начало надоедать, поэтому вчера я без особого напряжения и старания, но решил извлечь работающий код и попытаться им управлять.

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

Петербургские разработчики Андрей Мима (amima — ex-Яндекс, ex-ВКонтакте) и Даниил Гительсон (meta4) запустили сервис Qbaka, задачей которого является помощь программистам сайтов и приложений в отслеживании ошибок в коде JavaScript. Сервис пока находится в стадии бета-тестирования, однако уже открыт для всех желающих.

Сервис предельно прост в использовании: программист добавляет несколько строк JS-кода к своему веб-приложению — они асинхронно подгружают ядро «Кубаки», которое собирает ошибки (слушая window.onerror) и отправляет их на сервер.

Привет, друзья!

Дело было вечером, делать было нечего… Разбирая пример чата в Socket.IO, заинтересовала возможности без особых ухищрений сделать чат приватным. Идея не новая, и достаточна простая — выбираешь свой пол и возраст, указываешь желаемый пол и возраст собеседника, и, поехали! Своего рода рулетка.

Для тех кто не в курсе, Knockout.js — это популярная JavaScript библиотека, позволяющая реализовать Model-View-View Model (MVVM) паттерн на клиенте. На Хабре уже много писали про него (раз, два, три, четыре, пять, видео). Освоить Knockout.js можно очень быстро — ведь есть система интерактивного обучения, куча живых примеров (можно потыкать и посмотреть исходный код) и прекрасная документация.

Очень часто Knockout.js используют в связке с ASP.NET MVC — ведь библиотека существенно упрощает написание клиентской логики. Однако, возникает много типичных проблем для клиент-серверной разработки: основную модель и часть логики её обработки приходится описывать как на клиенте (JavaScript), так и на сервере (C#/VB). Кроме того, есть рутинная часть, связанная с обращением клиента к серверным методам и передачи им модели для обработки. Но не стоит печалиться! Теперь у нас есть Knockout MVC — это .NET оболочка для Knockout.js, которая генерирует весь нужный JavaScript-код за нас. Нам остаётся только описать нашу модель на C# и в MVVM-стиле указать для каждого нужного html-элемента к какому свойству модели нужно привязаться (а можно указать и целые выражения — они будут транслированы в js). Таким образом, можно получить полноценное кроссбраузерное клиентское веб-приложение без единой строчки JavaScript!