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

При обращению к гуглу выдаёт много статей по загрузке файлов через iframe. Алгоритм в общем сводится к:
1) Создаём скрытый фрейм (обычно просто обнуляется ширина и высота через HTML и CSS свойства)
2) Устанавливаем action формы в имя фрейма.
3) Отправляем файл. Радуемся.

Для удобства использования отдельная кнопка «Начать загрузку» не создавалась, а был повешен обработчик onChange для файлового input'a.

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

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

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

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

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

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

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

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

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

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

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

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

В продолжение темы о красивой и удобной JS визуализации (http://habrahabr.ru/blogs/javascript/124899/) хочу рассказать вам о WYSIWYG редакторе, на который сегодня случайно наткнулся.

Вы наверное часто используете различные WYSIWYG редакторы в ваших проектах. Я их тоже часто использую, так уж получается, что они очень нравятся секретаршам и т.д. нашим пользователям.

Таких редакторов существуют десятки, но все они мне почему-то не нравилисись: то выглядит уж очень топорно, то работает совершенно криво. В конце концов я остановился на TinyMCE. Он хоть и ужасен на вид, но рабоет стабильно.

И вот сегодня я совершенно случано наткнулся на редактор, который мне полностью подходит:

• работает стабильно
• выглядит очень стильно
• написан на jQuery

Имя этому чуду – Imperavi.
Попробуйте сами и думаю, что вам понравится.

Скриншот:


UPD
Более новая версия редактора: http://imperavi.ru/redactor/.

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

Именованные шаблоны

Многие «проблемы» XSLT связаны с тем, что мы слишком часто пытаемся писать на нём в процедурном стиле. Мы постоянно пытаемся сделать из него Smarty, но упираемся в один простой факт — XSLT является декларативным языком, как бы необычно это для нас не выглядело.
Например, мы пытаемся использовать именованные шаблоны, воспринимая их как процедуры, выводящие данные в определённом формате:

<xsl:template name="CreateItemLink">
    <xsl:param name="item"/>
    <a href="/item/?id={$item/id}">
        <xsl:value-of select="$item/name"/>
    </a><br/>
</xsl:template>

* This source code was highlighted with Source Code Highlighter.

Наверное, многие программисты именно так написали свой первый шаблон. И он неплохо решает свою задачу. Декларативный XSLT предлагает немного другой подход:

<xsl:template match="item">
    <a href="/item/?id={id}">
        <xsl:value-of select="name"/>
    </a><br/>
</xsl:template>

* This source code was highlighted with Source Code Highlighter.

Разница совсем не велика. Дело вкуса и стиля программирования. Давайте посмотрим, как шаблон будет использоваться в дальнейшем.

Плагин Chosen создан для оформления красивых и удобных выпадающих списков с помощью jQuery и Prototype. Для установки плагина достаточно просто скачать файлы и прописать одну строчку:

$(".chzn-select").chosen()

(версия для jQuery)

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

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

Некоторые форки:
Chosen для MooTools
Модуль Chosen для Drupal 7

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

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

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

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

Сообщество JavaScript в курсе этого, особенно сообщество Node.JS, так как Node.JS ставит акцент на асинхронном коде.

Один из первых вопросов, которым я задался после знакомства с азами технологии MVC3, это способ выделения и повторного использования функционала в нескольких веб-проектах.
В WPF или WinForms все просто и понятно — обособленный функционал изолируется в модуль, модуль компилируется в библиотеку, библиотека — подключается к проекту и повторно используется. Нужно лишь грамотно изолировать модули и всё будет хорошо.

В MVC, если «обособленный функционал» — это набор контроллеров и вьюшек, реализующих, допустим, гостевую книгу, их можно обособить в виде «области» — area. Однако просто так вынести эту область в отдельный модуль нельзя — MVC просто не найдет ваши контроллеры/вьюшки в соседних библиотеках.

Однако решение, конечно, есть, и его нам предлагает небезызвестная библиотека MvcContrib — open-source проект, неаффилированный Майкрософтом.

Более месяца назад в статье FAQ по JavaScript: задавайте вопросы был задан вопрос «Подскажите примеры хорошего подхода организации JS кода к сайту на достаточно высоком уровне. Как можно узнать подробнее практики реализации например gmail?».

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

Эта статья о том, как сделать крупное веб-приложение расширяемым и поддерживаемым: архитектура, подходы, правила.

Наступает пора отпусков, в это время хабр порой не читается неделями. Интересный же контент пропускать не хочется, поэтому при возвращении из заграницы, от обилия нового контента кружится голова. Чтобы сгладить пик, тексты интересных статей, которые нет пока времени/желания вдумчиво читать, я посылаю себе же на gmail, в папку Read later. Чтобы затем в любом месте: метро/очередь/дача/самолет/заграница почитать что-то интересное или нужное, но многобуквенное.

Хотелось бы получить кнопку «читать позже», которая вышлет HTML письмо с названием текущей статьи в сабжекте, полным текстом и ссылкой на комментарии в боди. Это разгрузит «избранное», в котором сейчас как «не потерять», так и «почитать потом» (а фактически — неразгребаемая свалка), позволит чаще вспоминать о хабре в удаленных от интернета местах, ну и конечно откроет еще один способ чтения хабра, кому-то может единственно удобный.

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

Спасибо за внимание, развитие и заботу :)

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

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

В этой части статьи я напишу о вертикальном маргине. О горизонтальном поговорим в следующей части.

Into

Под .NET существует две родных ORM, разрабатываемых и поддерживаемых Microsoft, — Entity Framework и Linq2Sql. Однако Entity Framework продолжает развиваться внушительными темпами, а про будущее Linq2Sql ничего толком неизвестно.

Entity Framework предлагает удобный дизайнер, огромное количество вариантов маппинга, автогенерацию классов-моделей, но на все это есть жирный минус – гигантские и раздутые сгенерированные классы, которые к тому же нельзя изменять вручную – ибо при каждом изменении модели в дизайнере, все будет пересоздано заново. Сравните это с чистыми классами, и добавленными к ним атрибутами, как в Linq2Sql, и вы поймете, почему такое количество людей заявляет о легковесности Linq2Sql и монструозности EF.

Конечно, каждая проблема имеет решение, и эта не исключение. Частичные классы позволят добавить нужный функционал, а специально созданные классы с правилами валидации, помеченные атрибутом [MetadataType], дадут возможность использовать атрибуты валидации для классов-моделей. Но вместе это получается не очень красиво – размазанные по проекту классы, увеличение их количества, и все та же сложность в поддержке.

Не стоит также забывать об условиях работы классов-моделей: они должны либо наследоваться от EntityObject или реализовывать интерфейсы EntityWithKey, IEntityWithChangeTracker и IEntityWithRelationships

Так что же делать тем, кто хочет получить максимально простые классы для работы внутри ORM?

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

Наш старый друг XMLHttpRequest сильно изменился, но не многие знают о его изменениях. XMLHttpRequest Level 2 включает в себя новые возможности, которые положат конец нашим безумным хакам и пляскам с бубном вокруг XMLHttpRequest: кросс-доменные запросы, процесс загрузки файлов, загрузка и отправка двоичных данных. Эти возможности позволяют AJAX уверенно работать без каких-либо хаков с новейшими технологиями HTML5: File System API, Web Audio API, и WebGL.

В этой статье будут освещены новые возможности XMLHttpRequest, особенно те, которые можно использовать при работе с файлами.

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

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

На этом этапе проект для нас — осязаемое, но все еще довольно бесформенное облако.

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

Речь пойдёт о точках повторной обработки (reparse points), идентификаторах объектов (object id) и о других типах данных, которые может содержать файл помимо своего основного содержимого.

В продолжении статьи о разработке для open-source CMS Orchard рассмотрим вывод контента на страницу, обновление модулей и концепцию виджетов. И закончим модуль, позволяющий добавить к сайту на Orchard список пунктов быстрого перехода для закрепленного сайта Internet Explorer 9.

Это продолжение второй части руководства “Как создать свой сайт с нуля с помощью Orchard CMS”. С первой частью руководства вы можете познакомиться здесь: начало и продолжение. Начало “Архитектура Orchard CMS. Основные понятия” можно найти и прочитать здесь и здесь.

Введение

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

Напомню, что автоматическая загрузка Orchard доступна из галереи приложений с помощью средства быстрого доступа к веб-инструментам Web Platform Installer (нажмите на эту ссылку, чтобы начать установку).

Концепции безопасности Orchard CMS

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

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

Вот размещённые в Викитеке переводы всех шести современных лицензий (всё это только простые переводы, не путать с дополнительной адаптацией лицензий к законам РФ):

• Creative Commons Attribution 3.0 Unported (сравнить с оригиналом)
• Creative Commons Attribution-ShareAlike 3.0 Unported (сравнить с оригиналом)
• Creative Commons Attribution-NoDerivs 3.0 Unported (сравнить с оригиналом)
• Creative Commons Attribution-NonCommercial 3.0 Unported (сравнить с оригиналом)
• Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported (сравнить с оригиналом)
• Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported (сравнить с оригиналом)

От переводчика: Я думаю многие читали статью Rey Bango — What to Read to Get Up to Speed in JavaScript, но до хабра обсуждение так и не докатилось. Предлагаю закрыть этот пробел и поговорить о хороших книгах, блогах, тренингах и конференциях, посвященных в первую очередь клиентскому JavaScript и клиентской веб-разработке. Чтобы не копипастить оформляю статью в виде перевода.

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

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

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