Предисловие

Пришла мне в голову смелая мысль, взяться за написание туториала по разработке на 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.

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

Продолжая тему предыдущего поста Несколько полезных сервисов, хочу поделиться новыми ссылками.

Экспорт контента

• rss-script.ru – сервис для вставки содержимого RSS-ленты на сайт. Для его работы необходимо лишь сгенерировать скрипт на сайте и вставить его себе. Есть несколько настроек, позволяющих изменить вид содержимого
• twitterfeed.com позволяет постить содержимое RSS-ленты в Twitter, Facebook и LinkedIn. Достаточно простой сервис, нет дополнительных настроек, но есть счётчик кликов
• ifttt.com – многофункциональный сервис, позволяющий связывать различные аккаунты (описание)

Песочницы
К уже названным ранее cssdesk.com и jsfiddle.net можно добавить dabblet.com, jsbin.com (добавил Jekyll). Также есть песочница для SQL – www.sqlfiddle.com (добавил volinrok).

Шаринг фрагментами текста/кода
Для того, чтобы поделиться фрагментом текста или кода, можно использовать всем известный pastebin.com, а можно воспользоваться его альтернативами:

• gist.github.com
• pastecode.com
• tinypaste.com
• paste.ubuntu.com

Мне больше всех нравится Gist на GitHub. Во-первых, все текстовые фрагменты привязываются к вашему аккаунту; во-вторых, можно создавать несколько связанных Gist'ов; и в третьих, есть возможность комментирования.

Для начала, что есть «правильная настройка». Если вы хотя бы раз были в магазине электроники, то наверняка замечали, что все выставленные телевизоры показывают по-разному. С чем это связано? Какой из них лучше? Давайте разберемся.

Я думаю, вы согласитесь, что телевизор должен не просто показывать какую-то картинку, но и вносить как можно меньше искажений в исходный контент. Сам контент всегда создается с оглядкой на стандарты и рекомендации индустрии, и главная цель любого телевизора — донести до вас именно то изображение, которое вам хотели показать. Тут важно всё: и оттенок кожи у актера, и цвет неба на закате, и какие детали изображения должны быть видны, а какие спрятаны. Существуют международные стандарты, описывающие каким должно быть изображение на экране вашего телевизора. Все вы, наверняка, встречали аббревиатуры PAL, NTSC, или HDTV, вот за этими буквами и скрываются свойства видеосигнала и различные параметры изображения. С приходом HDTV в нашу жизнь, большая часть стандартов сразу же устарела, и, фактически, наиболее актуальным сейчас является стандарт REC709, который используется в телевидении высокой четкости (HD) и в Blu-Ray видео.

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

Многоколоночная верстка контента (не путать с задачей общей многоколоночной верстки страницы, которая скорее ближе к проблеме расположения блоков по сетке) долго пробивала себе дорогу в мире веб-стандартов и, наконец-то, не просто достигла статуса Candidate Recommendation в виде соответствующего модуля CSS3 Multi-column Layout, но и получила достаточно широкую поддержку в браузерах: где-то с префиксами (-moz- или -webkit-) и где-то в актуальных (Opera 11.1+) и планируемых версиях (IE10+), причем сразу без префиксов.

А давайте это будет такой пост, где каждый из нас рекомендует одно полезное расширение для Chrome?
Вот и славно! Я начну.

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



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

Взаимодействие с браузерами никогда не было работой для слабонервных: около полудюжины различных API, различные механизмы IPC, и разные возможности у разных поставщиков. Такие проекты, как WebDriver, пытаются абстрагироваться от этой сложности, к тому же в Сети можно найти десятки других «безголовых» драйверов, использующих WebKit или иные движки. В настоящее время в работе даже находится спецификация W3C на WebDriver.

Инструментирование Google Chrome

Тем не менее, в то время, как создание общего решения является сложной задачей, оказалось, что инструментирование Chrome очень просто, — как я недавно обнаружил при исследовании некоторых вопросов, связанных с сетевыми задержками. Начиная с 18 версии, Chrome теперь поддерживает протокол удалённой отладки v1.0, который предоставляет все возможности браузера с помощью обычного WebSocket!

/Applications/Path To/Google Chrome --remote-debugging-port=9222 # OSX
$> curl localhost:9222/json

[ {
   "devtoolsFrontendUrl": "/devtools/devtools.html?host=localhost:9222&page=1",
   "faviconUrl": "",
   "thumbnailUrl": "/thumb/chrome://newtab/",
   "title": "New Tab",
   "url": "chrome://newtab/",
   "webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/1"
} ]

Автор блога Digital Inspirations Амид Агарвал (Amit Agarwal) опубликовал скрипт для Google Docs, который опрашивает статус сайта и заносит ответ в ячейку таблицы. Таким образом, можно сделать сервис мониторинга своими руками. Google Docs позволяет запускать скрипт с минутным интервалом и получать уведомления на email.

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

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

На первый взгляд ничего сложного.
Но сделав несколько попыток, столкнулся с задачей поддержки страниц созданных через views, выборок анонсов на страницах терминов таксономии и переводов, привязанных к нодам модулем «Content translation». Так же полезным, оказалось, задуматься о том, что у вышеупомянутых страниц (node) и терминов таксономии существуют алиасы.

К моему удивлению Google не дал ожидаемых результатов, а советов по перепиливанию ядра drupal я категорически не воспринимаю (для этого существует API и немного фантазии).

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

Я знаю про Backbone.js и про Knockout.js
Просто иногда хочется чего-то значительно меньшего.

1. Введение. О чем речь, какова предметная область. Какая существует проблема.

О чем речь: есть JavaScript, «сферический, в вакууме».
Предметная область: объекты и их свойства, то, что задается приведенными ниже способами.

var obj = new Object();
var obj = {};

где свойства, соответственно:

obj.prop = 111;
obj = {
   "prop1" : "value1"
   "prop2" : 2
}

Какая существует проблема:

1. Есть вот такие вот объекты, у них есть эти самые свойства.
2. Хочется узнать, когда свойство было изменено ( часть MVVM pattern )
3. И, соответственно, подписаться на это изменение.

UPD 1 — Пример в работе, спасибо alist, за очень, по моему мнению, важный комментарий ниже.

Многие разработчики при создании сайтов забывают про очень полезный заголовок Last-Modified, благодаря которому можно оптимизировать загрузку web-страниц и облегчить работу поисковым роботам. Далее я постараюсь восполнить этот досадный пробел.

В данной статье я хотел рассказать о том, как создавать приложения при помощи Eclipse RCP (Rich Client Platform). Поводом для написания послужил тот факт, что на Хабре абсолютно отсутствуют статьи, описывающие данную платформу. В качестве примера мы создадим пользовательскую форму ввода; корректность данных будет проверяться при помощи JFace Data Binding framework. Для затравки приведу ниже скриншот с тем, что у нас должно получиться.

UPD: Продолжение статьи с примером техзадания

Не так давно на хабре были две статьи (Согласно техническому заданию и А зачем мне ТЗ? Я и так знаю!) посвященные техническим заданиям. У меня обе статьи вызвали, мягко говоря, недоумение, в особенности статья «Согласно техническому заданию». На мой взгляд, это вообще вредная статья, которая приводит к неверному понимаю сути ТЗ. В связи с этим хочу выразить свой взгляд на этот вопрос. Не буду говорить обо всех тех. заданиях, слишком широка тема, но думаю смогу рассказать о ТЗ на сайт.

То описание технического задания, о котором речь пойдет ниже, не является пересказом ГОСТа, но скорее является его творческой переработкой, хорошо сдобренной горьким опытом. Описанный ниже подход к ТЗ не охватывает все аспекты сайтостроения, но задает общее направление.

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

1. Обоснование необходимости ТЗ

А зачем вообще нужно ТЗ на сайт? Заказчик говорит: «Нужен следующий сайт: каталог товаров, корзина, форма заказа, доставка, мы на карте, о нас, обратная связь». Что не ясно? Ничего необычного, всё обыденно и рутинно.

Разработчик отчетливо представляет, что нужно сделать, а сделать, в его понимании нужно вот так:

Знакомство с javascript-фреймворком Backbone я, как и многие, начинал с todo-туториала, на базе которого строилось дальнейшее использование фреймворка в своих проектах.

Но туториалы заканчиваются, и начинаются рабочие будни.

В прошлой статье я начал рассказывать о своём опыте разработки экспериментального WEB-проекта «Что делать?» на Node.JS. Первая часть была обзорной, в ней я постарался раскрыть плюсы и минусы технологии, а также предупредить о проблемах, с которыми, возможно, придётся столкнуться в ходе разработки. В этой статье я подробнее остановлюсь на технических деталях.

Несколько слов о «хабраэффекте»

Привет, Хабр.

Сегодня я расскажу о своих достижениях в области моментального изменения страницы — динамической смене языка. Эта штука понадобилась мне совершенно недавно, а так как сторонним реализациям я не доверяю (даже как-то и не нашёл их), то пришлось написать свою. За время её использования (где-то около полугода) я исправил все самые заметные баги (но это не означает, что их там больше не осталось :) ), и теперь представляю рабочую версию.

Кто-то скажет, что осуществлять перевод на клиенте нецелесообразно, но у меня получилось как раз такая ситуация, что по-другому никак нельзя: для серверного перевода приходится принудительно закрывать веб-приложения на странице, чтобы не потерять данные; в случае же с динамическим изменением языка, просто заменятся тексты на элементах и работа продолжается. Думаю, не меня одного раздражало «Настройки будут применены при перезагрузке». Моя реализация хоть и сложновата, но решает эту проблему.

Для того чтобы не путаться, я определю для данной статьи следующий перечень терминов:
Словарь — хранилище ключей, по которым осуществляется доступ к локализации на данном языке. По сути дела представляет собой обычный JavaScript-объект, где свойства — ключи доступа, а их значения — переведенные строки.
Хэш — объект, который является результатом упорядоченного слияния словарей; общий словарь, из которого впоследствии ведётся выборка перевода.

Теперь более детально.

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

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

Сегодня этот вопрос решается элегантно — с помощью HTML5 с его локальным хранилищем (local storage), Ext JS 4 с возможностью прозрачно работать с этим хранилищем, и HTML5 кэшем приложений (Application Cache). Совокупность этих технологий позволяет реализовать следующую схему: при наличии сети статичные файлы (HTML/CSS/JS код и картинки) загружаются с сайта и мы работаем с серверной централизованной базой данных, при отсутствии сети статика загружается из Application Cache и мы работаем с локальным хранилищем, которое сохраняется в серверную БД при появлении доступа к Интернет. При этом без активного подключения по URL адресу страницы браузер отображает не ошибку доступа к сети, а функциональную систему, работающую с локальным хранилищем. Пояснения и рабочий пример (да не упадет мой vds под хаброэффектом) — под катом. Статья получилась немаленькая, но, надеюсь, весьма содержательная.

Проблема

Когда задача, требующая решения, небольшая, совсем не хочется писать для её решения отдельную утилиту, особенно, если ты — .NET-программист.
Скрипт? Однозначно, да, но ставить на боевую машину под управлением Windows сторонний интерпретатор совсем уж не по-христиански. Так почему бы не воспользоваться Windows Powershell? Готов сразу честно признаться: практически никакого опыта с ним не было, но уж больно заманчиво выглядел.
Скрипт, решающий задачу, был готов через 15 минут, если не учесть одно «но». Скриптом пока назвать это было сложно, потому что это был набор инструкций, непригодный для выполнения в виде скрипта. Непригодный, с точки зрения PowerShell.

flotr2 — это библиотека с открытым кодом для построения HTML5 графиков и диаграмм. Flotr2 — так как стала ответвлением от Flotr, но уже без привязки к Prototype JS и с множеством усовершенствований.