HTML объединяющий язык World Wide Web, с помощью его простых тегов человечество создало фантастически разнообразную сеть, от крупнейших Amazon, eBay и Wikipedia до личных блогов и сайтов, посвященных котам похожим на Гитлера.

Как и сам веб, HyperText Markup Language детище Тима Бернерс-Ли. В 1991 году он создал документ названный «HTML Tags», в котором предложил около двух дюжин элементов для создания веб-страниц.

Идея использовать теги, заключенные между угловыми скобками, не его, такие теги уже были в формате SGML (Standard Generalized Markup Language). Тим понимал, что создавать новые стандарты нужно на базе существующих, а разработчики HTML5 и сейчас в полной мере следуют этому принципу.

От IETF до W3C: Путь к HTML 4

Стандарта HTML 1 никогда не было, первой официальной спецификацией стал HTML 2.0, опубликованный IETF (Internet Engineering Task Force). Многие элементы в этой спецификации были заимствованы из существующих реализаций, например, тег <img> уже поддерживался, лидировавшим тогда браузером Mosaic.

Позже на смену IETF пришел W3C (World Wide Web Consortium) и следующие версии стандарта HTML публиковались на www.w3c.org. Во второй половине девяностых HTML претерпел множество изменений и ревизий, последней в череде которых стала спецификация HTML 4.01.

В начале двухтысячных HTML ожидала первая серьезная реформа.

XHTML 1: HTML как XML

Следующая после HTML 4.01, версия языка стал XHTML 1.0, X значит eXtensible (расширяемый).

Содержание спецификации XHTML 1.0 не сильно отличалось от HTML 4.01. Не было добавлено ни одного нового элемента или атрибута. Но отличался синтаксис языка. HTML дает авторам значительную свободу в написании элементов и атрибутов, XHTML требует следовать правилам XML, более строгого языка разметки, на котором основаны многие технологии W3C.

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

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

Следующий версией стандарта разметки стал XHTML 1.1.

XHTML 1.0 был простым HTML переформулированным на XML, XHTML 1.1 стал настоящим XML, он больше не мог подаваться клиенту как text/html. Но если разработчик использует для документа медиа тип XML, то самый популярный веб-браузер, Internet Explorer, не сможет отобразить документ.

Стало заметно, что W3C теряет связь с современной реальностью веб.

XHTML 2: О, мы не будем это терпеть!

В W3C решили, что историю HTML нужно закончить на четвертой версии и начали работу над XHTML 2, стандартом призванным вести нас в новое будущее основанное на XML.

Несмотря на то, что название стандарта XHTML 2 не сильно отличается от XHTML 1, они совершенно не похожи. В отличии от XHTML 1, в XHTML 2 нет обратной совместимости с существующим веб-контентом и предыдущими версиями HTML, это должен был быть чистый язык, не обремененный нестройной историей предыдущих спецификаций.

Это была катастрофа.

Раскол: WHATWG TF?

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

Ситуация достигла апогея на рабочей встрече в 2004 году. Ян Хиксон, работавший тогда в Opera Software, предложил расширить возможности HTML в области создания веб-приложений. Предложение было отвергнуто.

Недовольные такой политикой Opera, Apple и Mozilla сформировали свою собственную рабочую группу WHATWG (Web Hypertext Application Technology Working Group).

От Web Apps 1.0 до HTML5

Работа WHATWG, отличается от работы W3C. W3C использует подход основанный на консенсусе: вопрос поднимается, обсуждается и проводится голосование. В WHATWG вопрос также поднимается и обсуждается, но окончательное решение остается за редактором. Редактор Ян Хиксон.

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

С самого начала WHATWG начал работу над двумя расширениями HTML: Web Forms 2.0 и Web Apps 1.0, позже они были объединены в одну спецификацию названную HTML5.

Воссоединение

В то время как WHATWG начала разработку HTML5, W3C продолжал работу на XHTML 2. Нельзя сказать, что работа шла не достаточно быстро, она шла очень очень медленно.

В октябре 2006, Тим Бернерс-Ли признал в своем блоге, что попытка перевести веб с HTML на XML не удалась. Через несколько месяцев была создана новая рабочая группа по HTML, вместо того чтобы начать с нуля решили использовать наработки WHATWG как базу будущей версии HTML.

Все эти начала и окончания разработки сильно запутали ситуацию. W3C работает одновременно над двумя различными, несовместимыми типами разметки XHTML 2 и HTML 5 (обратите внимание на пробел перед цифрой пять). В то же время отдельная организация WHATWG, работает над спецификацией HTML5 (без пробела) которая используется как базис одной из спецификаций W3C.

XHTML мертв: да здравствует XHTML синтаксис

Ситуация начала проясняться в 2009 году, W3C объявило, что работа над XHTML 2 не будет продолжена. На самом деле формат уже давно был мертв, и это заявление только официально подтвердило факт смерти.

Смерть XHTML 2 не прошла незамеченной, XML скептики использовали этот факт как возможность лишний раз высмеять тех кто использовал XHTML 1, несмотря на то, что XHTML 1 и XHTML 2 не имеют между собой ничего общего.

В то же время, разработчики, которым XHTML 1 нравился за более строгий стиль кодирования, опасались, что HTML5 приведет к возвращению небрежного кода.

На самом деле это не обязательно, HTML5 может быть строгим или свободным настолько, насколько этого хочет разработчик.

Перспективы HTML5

Сегодняшнее положение HTML5 не столь запутано как раньше, но все еще не простое.

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

Похоже намечается консенсус и по вопросу «С пробелом или без?» (это HTML5 без пробела, если вам интересно).

Возможно самый неясный вопрос для разработчиков желающих использовать HTML5 «Когда он будет готов?»

В одном из интервью, Ян Хиксон сказал, что HTML5 может получить статус «proposed recommendation» к 2022 году. Это вызвало волну недовольства среди веб-разработчиков, не понимающих, что значит «proposed recommendation», но знающих, что им не хватит пальцев на руках, чтобы посчитать сколько лет пройдет до 2022 года.

Это возмущение не обосновано. Статус «proposed recommendation» предполагает наличие двух полных реализаций HTML5 и, учитывая объем спецификации, эта дата выглядит даже оптимистичной. В конце концов, и сейчас браузеры не могут похвастаться безупречной поддержкой существующих стандартов. Разработчикам Internet Explorer потребовалось почти десять лет только для того чтобы добавить поддержку элемента abbr.

Действительно важной датой для HTML5 можно считать 2012 год, к этому времени он должен получить статус «candidate recommendation».

Но даже эта дата не особенно важна для веб-разработчиков, самое большое значение имеет то, когда браузеры начнут поддерживать новые возможности. Мы начинали использовать части стандарта CSS 2.1 как только браузеры начинали их поддерживать, если бы мы ждали пока все браузеры будут полностью поддерживать CSS 2.1, мы бы все еще ждали. То же самое с HTML5, не будет такой даты, чтобы можно было сказать, да сегодня язык готов к использованию. Мы можем начинать использовать части спецификации как только появиться их поддержка в браузерах.

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

Translated with the permission of A List Apart Magazine⁷ and the author[s].

Похожие статьи

• HTML5, XHTML2, и будущее Web

Жму на ссылку и... Ошибка 404. Страница не найдена.

Жму вторую... 404.

Гомерический хохот. Они потеряли даже страницу поиска отправлений — это уже политика компании.

Ну политика, политикой, а письмо искать нужно, иду на главную, а куда еще все остальные ссылки на 404-й ведут на 404-ю.

Главная страница Почты России радует морем полезной информации:
атмосферное давление и температура в Москве и Санкт-Петербурге, курс доллара и евро, индекс ММВБ, индекс РТС и отраслевые индексы РТС, ссылки на Аэрофлот, РЖД, Внешэкономбанк, Мин связи, различные почтовые союзы, как раз то, что нужно людям на почтовом сайте. [как это выглядело]

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

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

Прочие достоинства

Микрополе поиска.

Потерявшиеся сертификаты соответствия системы менеджмента качества требованиям стандарта ИСО 9001:2000, выглядят просто символично. Кстати, кликабельные, ведут на 404-ю.

В фотогалерее есть обои рабочего стола. Им тут самое место.

Отличные примеры, демонстрирующие почему не нужно использовать justify.

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

Термин MVC давно стал привычным в контексте разработки бэкэнда с использованием фреймворков, таких как Struts, Ruby on Rails, и CakePHP — истоки MVC лежат в области структурирования клиентских приложений. Давайте посмотрим, что такое MVC, как мы можем использовать его, и какие есть готовые MVC фреймворки.

Что такое MVC?

Если вы не знаете, что это такое, то после четырех упоминаний этого акронима вам наверняка не терпится узнать. MVC (сокращение от  Model-View-Controller) — это шаблон проектирования, который разделяет приложение на три части: данные (Model), представление этих данных пользователю (View) и действие выполняемые в ответ на активность пользователя (Controller).

В 1978 году в исследовательском центре Xerox, Trygve Reenskau сформулировал основы концепции MVC (PDF):

Объект, играющий роль модели, это компьютерное внутреннее представление этой информации. Компьютер отображает различные аспекты этой информации с помощью объекта View, несколько объектов View ассоциированных с одной и той же моделью могут быть видимы одновременно. Объект Controller транслирует команды пользователя в сообщения для объектов View и Model.

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

Что же это разделение может дать веб-разработчику.

Истоки

Статический документ это основа веб-страницы. Такая страница отображает состояние информации на сервере в момент ее создания.

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

Прорыв

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

На современном уровне сложности JavaScript приложений мы приходим к необходимости разделять компоненты приложения в стиле MVC. Конечно, такое разделение необходимо не всегда — иногда оно делает код излишне объемным. Но когда приложение становиться достаточно сложным, требующим взаимодействия с различными частями сайта, использование паттерна MVC, позволяет создавать более модульный и пригодный к повторному использованию код.

Структурирование кода

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

Выглядит это примерно так:

function validateForm(){
   var errorMessage = 'The following errors were found:<br>';
   if (document.getElementById('email').value.length == 0) {
      errorMessage += 'You must supply an email address<br>';
   }
   document.getElementById('message').innerHTML = errorMessage;
}

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

Вперед к модульности

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

<input type="text" class="required email">

Теперь скрипт может перебрать все поля формы и в зависимости от атрибутов, сохраненных в классе, проверить поле подходящим способом. Еще один плюс таких классов в том, что их можно использовать в CSS.

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

<input type="checkbox" name="other"> Other
<textarea class="dependson-other"></textarea>

В предыдущем примере префикс dependson указывает на то, что обязательность textarea зависит от заполненности поля other. Чтобы исключить такие конструкции, давайте попробуем определить всю бизнес логику в JavaScript.

Используем JavaScript для описания сущностей

Несмотря на то, что мы можем внедрить некоторую семантику и метаданные в HTML, в конце концов, нам придется, как то представлять эту информацию на уровне JavaScript.

Например:

var fields = {
   'other': { 
       required:true 
       },
   'additional': {
       'required': {
           'other':{checked:true},
           'total':{between:[1,5]}
           },
       'only-show-if': {
           'other': {checked:true}
           }
       }
};

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

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

Давайте посмотрим, как мы можем структурировать код с помощью паттерна MVC, а потом вернемся к нашему примеру с проверкой данных формы.

Модель

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

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

Давайте посмотрим на другой пример, у нас есть календарь событий, данные каждого события сохранены в отдельном объекте. Методы объекта предоставляют абстрактный способ взаимодействия с данными. Часто эти методы называют CRUD tasks (create, read, update, delete).

var Events = {
  get: function (id) {
    return this.data[id];
  },
  del: function (id) {
    delete this.data[id];
    AjaxRequest.send('/events/delete/' + id);
  },
  data:{
   '112': { 'name': 'Party time!', 'date': '2009-10-31' },
   '113': { 'name': 'Pressies!', 'date': '2009-12-25' }
  }
  metadata: {
    'name': { 'type':'text', 'maxlength':20 },
    'date': { 'type':'date', 'between':['2008-01-01','2009-01-01'] }
  }
}

Модель содержит метаданные, определяющие допустимые значений полей события.

Кроме того CRUD методы сохраняют состояние объекта на сервере, например, функция delete удаляет запись локально и отсылает запрос на удаление записи на сервер.

Вид

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

View.EventsDialog = function(CalendarEvent) {
   var html = '<div><h2>{name}</h2>' +
              '<div class="date">{date}</div></div>';
   html = html.replace(/\{[^\}]*\}/g, function(key){
        return CalendarEvent[key.slice(1,-1)] || '';
        });
   var el = document.getElementById('eventshell');
   el.innerHTML = html;
}

Events.data = {
   '112': { 'name': 'Party time!', 'date': '2009-10-31' },
   '113': { 'name': 'Pressies!', 'date': '2009-12-25' }
  }

View.EventsDialog(Events.data['112']); // edits item 112

Чтобы контроллер мог управлять видом, не беспокоясь о его внутренней реализации, добавим методы open и close.

View.EventsDialog = function(CalendarEvent){ ... }
View.EventsDialog.prototype.open = function(){
   document.getElementById('eventshell').style.display = 'block';
}
View.EventsDialog.prototype.close = function(){ 
   document.getElementById('eventshell').style.display = 'none';
}

var dialog = new View.EventsDialog(eventObject);
dialog.open();
dialog.close(); 

Обобщение Вида

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

View.Dialog = function(data) {
   var html = '<h2>' + data.name + '</h2>';
   delete data.name;
   for(var key in data) {
      html += '<div>' + data[key] + '</div>';
   }
   var el = document.getElementById('eventshell');
   el.innerHTML = html;
}

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

Многие JavaScript фреймворки разработаны с учетом независимости от данных. YUI controls, jQuery UI, ExtJS, и Dojo Dijit создавались с минимальными предположениями о данных, с которыми им придется работать. В результате эти контрольные элементы можно легко использовать в любых приложениях.

Работа с методами вида

Главное правило: вид не должен вызывать свои методы, например, диалог не должен открывать или закрывать себя, это работа контроллера.

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

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

Контроллер

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

Controllers.EventsEdit = function(event) {
   /* здесь event это событие js, а не календарное событие */
   // event.target.id, содержит идентификатор соответствующего календарного события
   var id = event.target.id.replace(/[^d]/g, '');
   var dialog = new View.Dialog( Events.get(id) );
   dialog.open();
}

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

Controller.EventsDelete = function(event) {
   var id = event.target.id.replace(/[^d]/g, '');
   View.Calendar.remove(id);
   Events.del(id);
   dialog.close();
}

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

Внедряем MVC на примере проверки данных формы

Теперь, когда мы знаем как разделить код на составные части, вернемся к примеру проверки полей формы с которого начинали. Как мы можем сделать его максимально гибким с помощью паттерна MVC?

Проверка данных модели

Модель определяет, корректны данные или нет, не беспокоясь о том, как это будет представлено, ей просто нужно определить какие поля не соответствуют требованиям.

У нас уже есть переменная fields содержащая некоторые метаданные Модели. Теперь мы добавим к этому объекту метод, который может понимать и проверять передаваемые ему данные. Метод validate перебирает поля переданного ему объекта данных и проверяет соответствуют ли он требованиям определенным внутренними метаданными.

var MyModel = {
   validate: function(data) {
      var invalidFields = [];
      for (var key in data) {
         if (this.metadata[key].required && !data[key]) {
             invalidFields[invalidFields.length] = {
                field: key, 
                message: key + ' is required.'
             };
         }
      }
      return invalidFields;
   },
   metadata: {
      'other': {required: true}
   }
}

Для проверки мы передаем массив пар ключ/значение, где ключ это имя поля, а значение то, что пользователь ввел в поле.

var data = { 'other': false };

var invalid = MyModel.validate(data);

Теперь переменная invalid содержит список полей, которые не прошли проверку, эти данные можно передать в вид для отображения сообщения об ошибках.

Отображение полей с ошибками

Теперь нам нужно отобразить ошибки. Отображение это работа для Вида, а данные об ошибках он должен получить от Контроллера.

View.Message = function(messageData, type){
    var el = document.getElementById('message');
    el.className = type;
    var message = '<h2>We have something to bring to your attention</h2>' +
    			  '<ul>';
    for (var i=0; i < messageData.length; i++) {
       message += '<li>' + messageData[i] + '</li>';
    }
    message += '</ul>';
    el.innerHTML = message;
}
View.Message.prototype.show() {
	/* provide a slide-in animation */
}

Дополнительный параметр type позволяет указать класс элемента, чтобы применить к нему нужные стили.

Связываем все вместе с помощью контроллера

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

addEvent(document.getElementById('myform'), 'submit', MyController.validateForm);

Метод контроллера, получает данные, проверяет их корректность и отображает ошибки.

MyController.validateForm = function(event){
    var data = [];
    data['other'] = document.getElementById('other').checked;
    var invalidFields = MyModel.validate(data);

    if (invalid.length) {
       event.preventDefault();
       // создает вид и отображает сообщение
       var message = new View.Message(invalidFields, 'error');
       message.show();
    }
}

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

Готово! Теперь у нас есть пригодные к повторному использованию Вид и методы проверки данных Модели.

Прогрессивное улучшение

В нашем примере, MVC отлично сочетается с прогрессивным улучшением. JavaScript просто дополняет страницу. Благодаря разделению, меньшему числу компонентов нужно понимать, что происходит на странице, а это упрощает использование прогрессивного улучшения.

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

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

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

Фреймворки

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

Вот несколько примеров таких фреймворков:

• JavaScriptMVC
• SproutCore
• TrimJunction

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

В заключение

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

Alax.Info NTFS Links

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

К сожалению, использовать символические ссылки в Win XP не очень безопасно, так как при удалении ссылки Explorer удалит и содержимое папки, в Vista такой проблемы нет.

KeePass

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

Taskbar Shuffle

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

Tray It

Может свернуть в трей любое приложение, это полезно для постоянно запущенных приложений в которых такой режим не предусмотрен, например, для виртуальной машины с тестовым сервером.

WinDirStat

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

Обнаружен забытый бекап виртуальной машины.

caps-min.exe

Переключает раскладку при нажатии CapsLock.

Немного погуглив, я нашел способ обойтись только настройками в реестре [Remap keys, Switch input language by Caps Lock], но пока не проверял работает ли это и нет ли каких нибудь недостатков, если кто-то попробует, отпишитесь в комментариях о результатах.

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

Похожие статьи

• 5 программ для веб-разработчика

1. Прозрачный фон до загрузки картинки

Пример тут не самый подходящий, но специально искать не хотелось.

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

Решение: проверяйте отображение сайта при отключенных изображениях, текст должен оставаться читабельным.

2. Подмена кнопки в плеере youtube

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

Решение: избегайте неожиданных перемещений элементов интерфейса и появления новых элементов на месте старых.

3. Не исчезающие пояснения в полях

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

http://onegadget.ru/

http://zt9.ru/

http://coolidea.ru/

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

4. Загрузка программ с сайта Adobe

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

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

Решение: не решайте проблемы которых нет, конечно, это касается не только загрузки файлов, но и таких популярных в прошлом элементов как кнопка «Добавить в избранное», «Сделать стартовой», переопределения горячих клавиш, например, Ctrl+Home для перехода на главную (проблема в том, что многие привыкли использовать это сочетание чтобы перематывать документ к началу).

5. Ввод даты рождения в LiveJournal

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

Решение: при локализации приложений нужно помнить не только о переводе текста, но и о локальных форматах.

Похожие статьи

• Юзабилити: Правила, психология, термины

Кеширование

Кеширование результатов выборки заложено в типовую конструкцию применения jQuery.

Цепочка вызовов:

$('#id-of-element').attr('data-value', 'data-for-element')
                   .css('color', 'red')
                   .html('<p>html code</p>');

эквивалентна, следующему коду:

var element = $('#id-of-element');
element.attr('data-value', 'data-for-element');
element.css('color', 'red');
element.html('<p>html code</p>');

Уже здесь на одну выборку приходится несколько вызовов методов, и нам остается только расширить эту практику дальше одной цепочки, например, для выноса выборки за пределы цикла:

var el = $('#el-999-9');

for (var i = 0; i < runCount; i++) {
    el.addClass('el-class')
      .css('background-color', 'blue')
      .html(i);
}

или обработчика события:

var el = $('#el-999-9');

$('#button').click(function(){
    el.empty()
      .html('html code');
});

Кеширование эффективно даже на примере самого быстрого селектора #id:

Код тестов:

var runCount = 100;

function testIdLoopNoCache()
{
    for (var i = 0; i < runCount; i++)
    {
        $('#el-999-9').html(i);
    }
}

function testIdLoopCache()
{
    var el = $('#el-999-9');

    for (var i = 0; i < runCount; i++)
    {
        el.html(i);
    }
}

Хороший результат, но давайте проверим селектор посложнее, например, .class1 .class2:

Разница в производительности браузеров настолько велика, что трудно показать их результаты на одном графике, поэтому выделим еще один график для самых быстрых (по крайней мере в этом тесте):

Очевидно, что чем медлительней селектор тем эффективнее кеширование, особенно актуально кеширование выборок в браузерах, не поддерживающих querySelectorAll.

Минимизируйте работу с DOM

Работа с DOM по возможности должна сводиться к минимуму, например, при добавлении нескольких элементов нужно сначала объединить их код, а потом вставить одним вызовом html.

Начнем с тестов:

Код тестов:

function testAppendLi()
{
    $('#cnt').append('<ol id="list"></ol>');

    for (var i = 0; i < runCount; i++)
    {
        $('#list').append('<li>' + i + '</li>');
    }
}

function testAppendLiCacheSelection()
{
    $('#cnt').append('<ol id="list"></ol>');
    var list = $('#list');

    for (var i = 0; i < runCount; i++)
    {
        list.append('<li>' + i + '</li>');
    }
}

function testAppendAllLi()
{
    $('#cnt').append('<ol id="list"></ol>');

    var list = '';
    for (var i = 0; i < runCount; i++)
    {
        list += '<li>' + i + '</li>';
    }
    $('#list').append(list);
}

function testAppendAllUlLi()
{
    var list = '';
    for (var i = 0; i < runCount; i++)
    {
        list += '<li>' + i + '</li>';
    }
    $('#cnt').append('<ol id="list">' + list + '</ol>');
}

Тест testAppendLiCacheSelection попал на этот график с той лишь целью, чтобы показать эффект от кеширования (пусть даже очень быстрого селектора #id).

Собирайте в один элемент

Чтобы ускорить вставку большого количества элементов, их нужно обернуть в один элемент.

Обратите внимание, что тест testAppendAllUlLi работает быстрее, чем тест на чистом DOM и практически так же быстро как innerHTML, то же самое касается методов html, after и других методов с таким функционалом.

Значительное ускорение при обертывании кода в один элемент связано со способом которым jQuery внедряет html код в документ. После предварительной обработки кода, создается элемент div и код присваивается его свойству innerHTML, потом поэлементно клонируется в документ, обертывание в кода в один элемент позволяет минимизировать клонирования.

Функция $.each

Не используйте $.each там где важна скорость работы с массивом. $.each  — это вызов функции в контексте объекта и последующая проверка необходимости досрочного выхода из перебора (зависит от возвращаемого функцией значения), очевидно, что простой for без лишних вызвов функций и проверок значительно быстрее $.each. Результаты тестов это подтверждают:

Разница в производительности $.each и for in применительно к объектам не столь значительна, вероятно это связано с тем, что for in не столь быстр как for и дополнительные расходы на вызов функции и if на его фоне не столь заметны.

Не используйте for in для массивов

Ну и еще раз подтверждение известного факта о медлительности цикла for in в применении к массивам:

Конкатенация строк

Конкатенация не относится к jQuery, но это одна из часто используемых операций, причем с подводным камнем, она фантастически медленно выполняется в IE6 и IE7.

Если быстрая конкатенация нужна здесь и сейчас, можно использовать Array.push(string) и Array.join(''), но использовать их повсеместно не рекомендуется, так как конкатенация хорошо поддается оптимизации и быстрее join почти во всех современных браузерах (а если не быстрее, значит разработчики использовали не все возможности для ее оптимизации и она может ускориться в будущем).

Тот же самый график без IE6 и IE7:

Код тестов:

function testConcatenationOperator()
{
    var str = '';
    
    for (var i = 0; i < count; i++)
    {
        str += words[i];
    }
    
    // для оптимизации браузер может не собирать строку
    // пока она не потребуется в целом виде
    var forceConcat = str.toString();
}

function testJoin()
{
    var str = '';
    var tmpArray = [];
    
    for (var i = 0; i < count; i++)
    {
        tmpArray.push(words[i]);
    }
    
    var str = tmpArray.join('');
}

Проблема конкатенации в IE6/7 в том, что она выполняется тривиально, для каждых двух операндов создается буфер в который они последовательно копируются, рассмотрим пример:

var s = 'str1' + 'str12' + 'str123'

В IE6/7 при выполнении первой конкатенации выделяется память под временную строку и в нее копируются строки 'str1' и 'str12', при выполнении второй конкатенации выделяется память под еще одну строку и в нее копируется строки 'str1str12' и 'str123', и т.д. При каждой конкатенации происходит выделение памяти и копирование строк.

В эффективной реализации при выполнении первой конкатенация создается вспомогательный объект, содержащий ссылки на строки 'str1' и 'str12', при выполнении второй конкатенации добавляется ссылка на 'str123' и только когда потребуется значение строки, выделяется память в которую копируются строки 'str1', 'str12', 'str123'.

Подробнее об этом можно почитать в статьях:
Performance issues with "String Concatenation" in JScript
Insight into String Concatenation in JScript

Ускорение доступа к переменным

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

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

Код теста:

var runCount = 1000000;

var globalVariable = 1;

function testGlobalVariable()
{            
    for (var i = 0; i < runCount; i++)
    {
        globalVariable++;
    }
}

function testLocalVariable()
{
    var localVariable = 1;

    for (var i = 0; i < runCount; i++)
    {
        localVariable++;
    }
}

Пример использования оптимизации undefined в приближенных к реальным условиях:

function testArrayLocalUndefined()
{
    var array = globalArray; //массив в котором каждый 5-й элемент определен
    var summ = 0;
    
    var undefined; //ускоритель
    
    for (var i = 0, l = array.length; i < l; i++) {
        if (array[i] !== undefined) {
            summ += array[i];
        }
    }
}

jQuery использует эту технику для ускорения window и undefined.

Статьи

• Improve your jQuery - 25 excellent tips
• jQuery Performance Rules
• 10 Ways to Instantly Increase Your jQuery Performance
• Ускоряем селекторы в jQuery
• Закрепляем jQuery — 25 отличных советов
• jQuery Internals

Работает блог на собственном движке AlikPress, у которого есть две особенности: во-первых он написан на JavaScript (серверный JavaScript), а во-вторых генерирует хорошо отформатированный и полностью соответствующий стандарту XHTML Strict код, который приятно читать.

Достаточно активно используются достижения Semantic Web: есть RDF-описание в FOAF формате, все статьи снабжены метаданными Дублинского ядра, не забыты и микроформаты.

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

Вот несколько примеров статей из блога Алика:

• Закат веба?
  Отличная статья о настоящем и будущем веб, проблемах развития и причинах их возникновения, а также о новой надежде, на прорыв в технологиях создания веб-приложений. Статья написана год назад и сегодня можно уверенно сказать, что предсказанное сбывается. Появляются первые крупные проекты, использующие HTML5, достаточно сказать, то Google использует его в новой мобильной версии gMail и многообещающем проекте Google Wave.
• Десять приёмов программирования, разрушающих красоту кода
  Хорошая статья на актуальную тему красоты кода, будет полезна новичкам и послужит напоминанием профессионалам. Рассмотрены такие темы как объявление переменных, возврат результата функции через параметр, хранение размера массива в отдельной переменной, использование рекурсии, именованные параметры функций и некоторые другие.
  
  Статья породила много споров, но я хочу напомнить, что у любого правила есть свои границы применимости, и из их наличия отнюдь не следует ошибочность правила.
• Совершенный Ajax
  Новый подход к построению веб-приложений, при котором веб-сервер взаимодействует с внешним миром только посредством веб-служб, а клиентский интерфейс реализуется на основе клиентских HTML, CSS, JavaScript.
• Сравнение языков в стиле XML и языков в стиле YAML
  Кроме непосредственно сравнения XML и YAML, статья наводит на мысль о том, что нужно шире использовать Wiki разметку которая удобнее, чем HTML и BBCode, для конечного пользователя.
  Например

  * Пункт 1
  * Пункт 2
  * Пункт 3

  vs

  <ul>
    <li>Пункт 1</li>
    <li>Пункт 2</li>
    <li>Пункт 3</li>
  </ul>

  или

  [http://designformasters.info/ Design For Masters]

  vs

  <a href="http://designformasters.info/">Design For Masters</a>

Есть и интересные планы на будущие публикации:

• Мир JavaScript за пределами браузера, будет одной из ключевых тем блога.
  
  Алик считает, что JavaScript — удивительно мощный, гибкий и красивый язык, превосходящий в ряде случаев по гибкости и функциональным возможностям таких монстров, как Java или C#. Однако, многие особенности JavaScript, придающие ему мощь и гибкость такие как: ООП на основе прототипов, объекты-как-хеши, функциональное программирование или замыкания, оказались недопоняты разработчиками, привыкшими к классическим языкам, вроде C++, Java, Delphi или VB.
  
  Кроме привычного многим использования этого языка в веб, будут рассмотрены менее распространенные применения, такие как создание десктопных приложений (HTA, Air, XUL, Windows Sidebar gadgets и т.п.), сервер-сайд JS (ASP, Apache + mod_js и т.п.), скриптование (Adobe Creative Suite, PDF, OpenOffice, HD DVD), а также основные JS-движки и компиляторы (Mozilla Rhino, Google V8, MS ActiveScripting и др).
• Вторая часть статьи «Совершенный Ajax» посвященная деталям реализации.
• HTML — самый недооценённый язык построения интерфейсов в мире.
• Прототипно-ориентированная ORM — система объектно-реляционных отображений для прототипно-ориентированных (неклассовых) языков программирования (например, JavaScript).
• Три уровня семантики: семантическая вёрстка → микроформаты → Semantic Web.
• Механизмы функционирования сообществ: люди (Википедия) vs софт (Хабр).

Подписывайтесь на RSS:
Блог Алика Кирилловича

Приятным дополнением к печатной версии страницы могут стать сноски для ссылок, предложенные Аароном Густафносоном.

Примерно так выглядит распечатанная страница DFM.

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

Чтобы отбросить хотя бы эту часть сомнений, я переписал скрипт под jQuery с небольшим сокращением совсем уж редко используемого функционала, получилось на экран с комментариями, и 450 символов в сжатом виде.

/**
 * Создает концевые сноски для ссылок.
 * @param container  селектор элемента содержащего ссылки
 * @param target     селектор элемента в который нужно добавить список ссылок
 * @param title      заголовок списка ссылок
 * @param printClass класс элементов добавляемых функцией
 */
function footnoteLinks(container, target, title, printClass) {
    if(!printClass)
        printClass = 'printOnly';

    var linksArray = [];  // ссылки по порядку
    var linksHash = {};   // индексы по href, для поиска дубликатов
    
    // перебор всех ссылок с атрибутом href
    // в пределах контейнера
    $(container + ' a[href]').each(function(elementIndex) {
        var index = elementIndex;
        
        if(!linksHash[this.href]) {
            // ссылка встречается впервые
            linksHash[this.href] = index;
            linksArray.push(this);
        } else {
            // такая ссылка уже была и ей присвоен индекс
            index = linksHash[this.href];
        }
        
        // добавляем номер сноски после ссылки
        $(this).after('<sup class="' + printClass + '">' + (index + 1) + '</sup>');
    });

    // создание списка с концевыми сносками, если ссылки былы
    var linksFound = linksArray.length;
    if(linksFound > 0) {
        var links = '';

        for(var i = 0; i < linksFound; i++)
            links += '<li>' + linksArray[i].href + '</li>';

        links = '<h2 class="' + printClass + '">' + title + '</h2>' +
                '<ol class="' + printClass + '">' + links + '<ol>';

        $(target).append(links);
        
        // задаем класс для элемента html
        // может быть полезно при написании CSS для печати
        $(document.documentElement).addClass('print-footnote-links');
    }
}

// пример использования
$(document).ready(function() {
    footnoteLinks('.single .post-content', '.post-content', 'Ссылки');
});

Пример страницы (сноски не скрыты)

Теперь скроем сноски. Если стили для всех устройств в одном файле то можно использовать следующее правило:

// лишние устройства можно удалить
@media aural, braille, embossed, handheld, projection, tty, screen, tv {
    .printOnly { display: none; }
}

Если для каждого устройства подключается свой файл стилей, то все еще проще, добавьте .printOnly { display: none; } во все файлы кроме файла стилей для печати.

Чтобы посмотреть еще одни пример используйте «Предварительный просмотр...»

Похожие статьи

• Подготовка ссылок к печати
• 15 минут на подготовку к печати

Автор и оригинал поста

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

Работа с этими полями выделена в плагин dfmAuthorOriginal.php

Автора подменяем с помощью фильтра:

add_filter('the_author', 'dfm_author_filter');

function dfm_author_filter($author) {
    global $post;

    $custom_author = get_post_meta($post->ID, 'author', true);
    if($custom_author) {
        if(is_feed()) {
            $custom_author = strip_tags($custom_author);
        }
        return $custom_author;
    } else {
        return $author;
    }
}

Для оригинала вводим функцию dfm_original:

function dfm_original($before = '<p>', $after = '</p>') {
    global $post;

    $original = get_post_meta($post->ID, 'original', true);
    if($original) {
        echo $before . $original . $after;
    }
}

и вставляем ее в нужном месте шаблона:

<?php if(function_exists('dfm_original'))
    dfm_original('<p>Оригинал: ', '</p>'); ?>

Краткие заголовки постов

Для списка «Последние статьи» в сайдбаре используются краткие заголовки из поля short_title. В общем случае код должен выглядеть так:

function dfm_recent_posts($before='<li>', $after='</li>')
{
    $posts = get_posts(array('numberposts' => 10));
    echo dfm_posts_list($posts, $before, $after);
}

function dfm_posts_list($posts, $before='<li>', $after='</li>')
{
    $result = array();
    
    foreach($posts as $post) {
        $permalink = get_permalink($post);
        $title = get_post_meta($post->ID, 'short_title', true);
        $title = empty($title) ? $post->post_title : $title;
        
        $result[] = sprintf('%s<a href="%s" rel="bookmark">%s</a>%s',
                            $before, $permalink, $title, $after);
    }

    return implode("\n", $result);
}

К сожалению, get_posts это 4 запроса к БД и если таким способом выводить блоки «Последние статьи», «Лучшие статьи» и «Похожие статьи» то количество запросов на сборку страницы будет более чем удвоено (22 вместо 10), благодаря чему хостер отключит сайт как раз в тот момент, когда на него появиться ссылка на популярном ресурсе, поэтому я использую менее универсальный, но быстрый метод:

function dfm_recent_posts($before='<li>', $after='</li>')
{
    global $wpdb;
    
    $posts = $wpdb->get_results(
        "SELECT COALESCE({$wpdb->postmeta}.meta_value, post_title) AS post_title, post_name " .
        "FROM {$wpdb->posts} " .
        "LEFT JOIN {$wpdb->postmeta} ON post_id = ID AND {$wpdb->postmeta}.meta_key = 'short_title' " .
        "WHERE post_status='publish' ORDER BY post_date DESC LIMIT 10"
    );
    
    echo dfm_posts_list($posts, $before, $after);
}

function dfm_posts_list($posts, $before='<li>', $after='</li>')
{
    $siteurl = get_bloginfo('siteurl');
    $result = array();
    
    foreach($posts as $post) {
        $permalink = $siteurl . '/posts/' . $post->post_name;
        $result[] = sprintf('%s<a href="%s" rel="bookmark">%s</a>%s',
                            $before, $permalink, $post->post_title, $after);
    }
    
    return implode("\n", $result);
}

Функцию dfm_recent_posts вставляем в шаблоне sidebar.php:

<?php if(function_exists('dfm_recent_posts')) : ?>
<h3>Последние статьи</h3>
<ul class="favorite">
    <?php dfm_recent_posts(); ?>
</ul>
<?php endif; ?>

Похожие статьи

Для похожих статей используется поле related со списком идентификаторов похожих постов:

add_filter('the_content', 'dfm_related_articles_filter');

function dfm_related_articles_filter($content) {
    global $post, $wpdb;

    $result = '';
    
    if(is_single() || is_feed()) {
        $related_IDs = get_post_meta($post->ID, 'related', true);    
        if(!empty($related_IDs)) {
            $related_posts = $wpdb->get_results(
                "SELECT post_title,post_name FROM {$wpdb->posts} " .
                "WHERE post_status='publish' AND ID IN ($related_IDs) " .
                "ORDER BY post_date DESC;"
            );

            if(!empty($related_posts)) {
                $result = '<h2>Похожие статьи</h2><ul>';
                
                foreach($related_posts as $p) {
                    $href = get_bloginfo('siteurl') . '/posts/'. $p->post_name;
                    $result .= sprintf('<li><a href="%s">%s</a></li>',
                                       $href, $p->post_title);
                }
                $result .= '</ul>';
            }
        }
    }

    return $content . $result;
}

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

Форум Web 2.0 и блоггинг
Дружелюбный форум о создании сайтов и ведении блогов. Присоединяйтесь.

Код

• Тестирование на кроссбраузерность, сервисы и утилиты
  Кроссбраузерность одна из самых сложных проблем в веб-разработке, хоть следование веб-стандартам и дает достаточно высокий уровень совместимости, но не все браузеры совершенны, старые браузеры часто удивляют разработчиков своим творческим подходом к обработке (X)HTML/CSS кода.
• Внедрение Flash с помощью SWFObject 2
  SWFObject 2 позволяет внедрять Flash не только динамически, с помощью JavaScript, но и статически, с помощью стандартной разметки, а JavaScript только исправляет неразрешимые с помощью разметки проблемы.
• Искусство разметки
  Разметка это основа представления сайта, в той или иной степени она взаимосвязана с дизайном, контентом, аксессибилити, CSS и JavaScript, качество разметки влияет на качество связанного с ней кода, следуя советам этой статьи, вы сможете подняться на новый уровень мастерстве разметки.
• 70 идей экспертов для улучшения CSS кода
  Множество полезных советов по CSS.
• Микроформаты: Что это и как ими пользоваться?
  Обзор который даст вам представление о том, что такое микроформаты, какие они могут дать вам преимущества и как их использовать, чтобы сделать контент более заметным и понятным для поисковых машин.
• Свойство background
  Подробное описание свойства background и связанных с ним багов и различий в браузерах.
• Переключатель стилей
  Часто новички задают вопрос, как подключить разный css, для разного разрешения экрана, времени суток, времени года, фазы луны. На самом деле в 99% случаев, хватит одного css файла и использования техники описанной в этой статье. 
• Адаптивная разметка
  Отличный пример использования переключателя стилей и интересная идея адаптации разметки к возможностям устройства.
• CSS Float в теории и на практике
  Float одно из самых проблемоемких свойств CSS, в значительной степени благодаря браузерам.
• Псевдоколонки
  Один из простейших способов сделать колонки равной высоты.
• Визуализация данных на HTML и CSS
  Техника визуализации данных с помощью HTML и CSS позволяет тесно интегрировать визуализацию и навигацию на сайте.
• Создание гаджетов для Windows Sidebar
  Гаджет — это небольшая веб-страница, поэтому его создание не требует от веб-разработчика значительных усилий или освоения новых технологий.

Дизайн

• Юзабилити: Правила, психология, термины
  Профессиональный веб-разработчик должен быть адвокатом посетителя сайта, защищать его интересы и гарантировать, что независимо от сложности сайта, пользователь всегда сможет найти то, что ему нужно. Чтобы успешно выполнять эти задачи, вы должны уметь эффективно защищать свои идеи и решения в дискуссиях с клиентами и коллегами, ваша работа в том, чтобы корректировать плохие идеи и неверные концепции, а не слепо следовать им.
• Креативное использование полупрозрачных PNG в веб-дизайне
  С уходом со сцены IE6 полупрозрачные PNG будут все шире применяться в веб-дизайне, к сожалению времена когда можно будет использовать полупрозрачность и не беспокоиться о костыле для старичка IE6 наступят еще не скоро.
• Читабельность
  Если текст сайта будет удобочитаемым выиграют все, пользователям не придется щуриться, и они еще не раз к вам вернуться, вы будете рады растущей аудитории, а люди с пониженным зрением будут вам особенно благодарны.
• Оформление гиперссылок
  Чтобы посетители могли легко ориентироваться на сайте, ссылки должны хорошо выделяться, быть абсолютно ясными и информативными, несмотря на очевидность этих советов все еще можно встретить сайты с неудачным оформлением ссылок.
• Дизайн в стиле Web 2.0
  Некоторые элементы, распространенные в современном web дизайне, с объяснением, почему они работают, и как когда и где вы можете использовать эти элементы в ваших работах.
• 23 важных вывода из результатов eye-tracking исследований
  Eye-tracking исследования горячая тема в мире веб-дизайна, но у них есть одна проблема, не всегда очевидно как применить результаты при разработке реального сайта. В этой статье автор пытается дать несколько, основанных на результатах таких исследований, советов позволяющих увеличить эффективность вашего сайта.
• Юзабилити интернет приложений
  По мере усложнения интернет приложений все труднее сохранить простору взаимодействия с пользователей.
• Роль пространства в дизайне
  Когда вы научитесь, использовать пространство, вы упростите жизнь вашим читателям, сможете точнее позиционировать продукты, и, возможно, начнете видеть свои работы в новом свете.

SEO

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

На карте сайта можно посмотреть все опубликованные статьи.