WebMarkupMin: Минимизация представлений KnockoutJS и AngularJS

Начиная с версия 0.9.0 в WebMarkupMin поддерживается минимизация представлений KnockoutJS (далее просто Knockout) и AngularJS (далее просто Angular). Многие из вас могут задать вопрос: «Почему Knockout и Angular, а не Mustache или Underscore?». Этот выбор был сделан по следующим причинам:

1. Шаблоны на основе DOM. Шаблонизаторы, встроенные в Knockout и Angular, базируются на DOM-шаблонах (DOM-based templates), а не на строковых шаблонах (string-based templates) как Mustache и Underscore. Код таких шаблонов не содержит программных вставок (например, {{…}} или <%…%>) за пределами текстового содержимого элементов (тегов) и значений атрибутов, что позволяет минимизировать его как обычный HTML.
2. Популярность среди .NET-разработчиков. Knockout изначально создавался для .NET-разработчиков, чтобы позволить им перенести свой опыт разработки MVVM-приложений из WPF и Silverlight в обычный веб. Что же касается Angular, то он вообще не нуждается в представлении и его популярность среди веб-разработчиков в целом бьет все возможные рекорды. Помимо этого популярности этих библиотек среди .NET-разработчиков способствовало огромное количество статей евангелиста Microsoft Джона Папы.
3. Высокая эффективность сжатия выражений привязки. Выражения привязки в Knockout и Angular фактически являются простым JavaScript-кодом или объектами в формате JSON, которые можно сжать JS-минимизатором.

HTML-минимизация в Web Essentials 2013: Что изменилось за год?

С момента публикации предыдущей статьи прошел почти год и приведенный в ней пример минимизации HTML-фрагмента уже неактуален (команда Web Essentials ► Minify selection больше недоступна в контекстном меню при редактировании HTML-файлов). Серьезные изменения в данном функционале произошли еще в декабре прошлого года, когда вышла версия 1.5, но в тот момент у меня не было времени, чтобы написать об этом статью. Поскольку за это время никто не описывал данный функционал на русском языке (на английском языке есть статья Дэвида Пакетта «Minifying your HTML»), то я постараюсь наверстать упущенное.

HTML-минимизация в Web Essentials 2013

Одним из наиболее существенных нововведений для веб-разработчиков в Visual Studio 2013 стал новый HTML-редактор. В отличие от старого редактора, который представлял из себя смесь из управляемого и неуправляемого кода (и даже использовал некоторые компоненты FrontPage), новый редактор был полностью переписан на управляемом коде (в качестве основы использовался HTML-редактор из WebMatrix).

Стоит отметить, что для ASP.NET Web Forms (файлы с расширениями .aspx, .ascx и .master) по-прежнему используется старый редактор.

Помимо улучшенных средств для работы с HTML-кодом, в новом редакторе также реализована поддержка синтаксиса представлений KnockoutJS, AngularJS и Handlebars, и IntelliSense для специальных префиксов и META-тегов (Facebook, Twitter, Open Graph, Windows Phone, iOS и др.).

К сожалению, не каждая новинка из мира веб-разработки может попасть в Visual Studio в силу следующих причин:

1. Многие современные веб-технологии и библиотеки являются Open Source-проектами (например, компиляторы LESS и CoffeeScript, верификатор JSHint и т.д.), и некоторые из этих проектов имеют лицензии, которые не позволяют включать их в состав коммерческих продуктов.
2. Сейчас веб-технологии развиваются настолько быстро, что их поддержка средствами разработки может стать неактуальной в течение одной недели. Поэтому ни частые релизы Visual Studio (сейчас период между релизами сократился с двух лет до одного года), ни периодические обновления не позволяют поддерживать Visual Studio в полностью актуальном состоянии.

Для того, чтобы решить перечисленные выше проблемы сотрудником компании Microsoft Мэдсом Кристенсеном было создано VS-расширение Web Essentials. Исходный код Web Essentials опубликован на GitHub (доступны 2 версии: 2012 и 2013).

Ниже перечислены дополнительные возможности HTML-редактора из Visual Studio 2013, которые становятся доступными после установки Web Essentials 2013:

1. Поддержка Zen Coding (более подробную информацию об использовании Zen Coding в Web Essentials можно прочитать в статье Джона Папа «Zen Coding in Visual Studio 2012») и генератор текста-«рыбы» Lorem Ipsum (например, если ввести lorem10 и нажать клавишу TAB, то в код будут вставлены 10 слов из трактата Цицерона «О пределах добра и зла»).
2. Команда Go To Definition для тегов <a>, <style> и <script>.
3. HTML-минимизация выделенного фрагмента кода.
4. Поддержка HTML-регионов (например, <!--#region main--> Какой-то код… <!--#endregion-->).

Поскольку HTML-минимизация в Web Essentials 2013 была реализована средствами библиотеки WebMarkupMin, автором которой я являюсь, то в этой статье мы рассмотрим данную возможность более подробно.

Адаптивный веб-дизайн vs. Отзывчивый веб-дизайн, в чем разница? (Перевод)

С тех пор, как вышли книги «Adaptive Web Design» Аарона Густафсона и «Responsive Web Design» Итана Маркотта (русское издание называется «Отзывчивый веб-дизайн»), в сообществе веб-дизайнеров и разработчиков ведутся споры о том, чем отличаются эти 2 подхода. Одни считают, что эти 2 понятия являются синонимами, а другие, что это совершенно разные понятия. Но, как известно, истина всегда где-то посередине, поэтому предлагаю вашему вниманию перевод статьи финского веб-дизайнера и разработчика Вильями Салминена (Viljami Salminen) «Adaptive vs. Responsive, what’s the difference?»:

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

Книга Итана Маркотта «Отзывчивый веб-дизайн»

Возможно, многие из вас уже читали книгу Итана Маркотта «Responsive Web Design» в оригинале. Для тех, кто еще этого не сделал, у меня есть хорошая новость – весной этого года издательство «Манн, Иванов и Фербер» выпустило данную книгу на русском языке под названием «Отзывчивый веб-дизайн».

Почему стоит прочитать эту книгу?

Во-первых, эта тоненькая книга (всего 176 страниц) содержит описание технологии, которая уже стала революционной. Если оценивать влияние, которое оказала данная книга на Сеть и процесс веб-разработки, то ее можно поставить в один ряд с такими инновационными книгами прошлых лет, как: «WEB-дизайн по стандартам» Джеффри Зельдмана и «AJAX в действии».

Во-вторых, данная книга была написана Итаном Маркоттом (Ethan Marcotte) — человеком, который придумал само понятие отзывчивый веб-дизайн.

В-третьих, в ноябре 2011 года «Отзывчивый веб-дизайн» был признан журналом .net magazine одной из 25 лучших книг для веб-дизайнеров и разработчиков.

Справочная информация о поддержке HTML5 основными мобильными броузерами

На сайте Mobile HTML5 можно найти таблицы совместимости мобильных броузеров с HTML5, CSS3, SVG и новыми JavaScript API. Доступна информация по следующим броузерам: Safari для iOS, Android Browser, BlackBerry Browser, Internet Explorer 9.0 для Windows Phone 7, Opera Mobile и Mini, Firefox для Android, webOS Browser и Symbian Browser.

Сертификация по клиентским веб-технологиям от W3Schools. Будьте осторожны!

Недавно я сдал три экзамена по системе Prometric и получил статус MCPD ASP.NET Developer 3.5. Это очень авторитетная и признаваемая во всем мире система тестирования, т.к. она позволяет практически полностью исключить жульничество со стороны экзаменуемого благодаря следующим мерам:

1. Перед экзаменом экзаменуемый сдает свои вещи на хранение в специальную ячейку
2. Во время экзамена можно пользоваться только черновиком, выданным администратором учебного центра. По окончанию экзамена черновик сдается администратору.
3. Экзамен проходит в виде компьютерного теста
4. Процедура сдачи экзамена фиксируется на камеру

Т.е. любой человек, который хочет сертифицироваться по технологиям Microsoft должен сдавать их по системе Prometric.

После успешной сертификации по веб-технологиям Microsoft, мне захотелось сертифицироваться по jQuery и я начал интересоваться тем, где можно пройти такую сертификацию. Мой коллега веб-дизайнер рассказал мне, как его знакомый получил статус Certified jQuery Developer, сдав онлайн-тест на сайте W3Schools. Мой коллега также отметил, что сайт www.w3schools.com является авторитетным источником по веб-стандартам и связан с W3C (Консорциумом Всемирной паутины).

Презентация по материалам конференции HTML5 Camp

Вчера (5 марта) я выступил перед своими коллегами с докладом, основанном на материале докладов с конференции HTML5 Camp. По окончанию доклада многие высказали идею о том, что было бы неплохо выложить данную презентацию в Интернет.

Архив с презентацией в формате PowerPoint 2007/2010 и примерами к ней расположен по следующей ссылке.

Краткий курс по HTML5 на русском языке

Посетив конференцию HTML5 Camp, я начал искать в сети актуальную информацию о HTML5. И мне попался на глаза хороший краткий курс по HTML5 на русском языке.