Илья Бирман вчера написал:

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

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

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

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

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

Однако стоит отметить, что аргумент с «тупняком» тоже правильный. И я советую делать плавное проявление с минимально возможным временем анимации. Например, 0.1−0.2 секунды.

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

Twitter API 1.1

Twitter закрыл первую версию своего API. Все запросы к старой версии будут возвращать статус HTTP 410 Gone. Главное изменение заключается в авторизации. Теперь работает только OAuth авторизация. Ну что же, давайте переделаем нашу трансляцию.

Я не хочу ничего переделывать, я хочу смотреть демонстрацию.

Twitter Streaming API

Для начала, выделим код работы с Twitter Streaming API в отдельную функцию.

http = require 'request'

module.exports = (track, oauth, fn) ->
  params =
    url: 'https://stream.twitter.com/1.1/statuses/filter.json'
    oauth: oauth
    form:
      include_entities: true
      track: track

  request = http.post params, (error) ->
    fn error, false if error

  request.on 'data', (buffer) ->
    try
      tweet = JSON.parse buffer.toString()
    catch error
      tweet = false

    if tweet
      data =
        id: tweet.id_str
        link: "http://twitter.com/#{tweet.user.screen_name}"
        avatar: tweet.user.profile_image_url
        login: tweet.user.screen_name
        name: tweet.user.name or tweet.user.screen_name
        text: tweet.text

      fn null, data

Как видите, я решил использовать request модуль. С ним будет проще проходить OAuth авторизацию и разбирать ответ сервера. Вызов функции будет выглядеть так.

oauth =
  consumer_key: 'consumer key'
  consumer_secret: 'consumer secret'
  token: 'oauth token'
  token_secret: 'token secret'
 
filter = require './twitter/filter'
filter 'html5,css3', oauth, (error, tweet) ->
  console.log tweet unless error

Остаётся только передавать все новые сообщения клиентам. Например, это можно сделать с помощью socket.io.

clients = []

io = require('socket.io').listen(8080)
io.sockets.on 'connection', (socket) ->
  clients.push socket

oauth =
  consumer_key: 'consumer key'
  consumer_secret: 'consumer secret'
  token: 'oauth token'
  token_secret: 'token secret'

send = (tweet) ->
  client.send JSON.stringify tweet for client in clients

filter = require './twitter/filter'
filter 'html5,css3', oauth, (error, tweet) ->
  send tweet unless error

OAuth авторизация для Twitter API

Осталось получить OAuth ключи и можно запускать. Я думал, что этот процесс достаточно простой, но вчера увидел сообщение от @miripiruni и решил подробнее остановиться на этой задаче. Так как трансляция будет работать на серверной стороне, то нам будет достаточно девелоперских ключей.

Итак, у нас есть все четыре ключа: «consumer key», «consumer secret», «access token» и «access token secret».

Вывод через socket.io

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

(function(window, document) {
  'use strict';

  var socket = window.io.connect('http://127.0.0.1:8080'),

  // Получаем шаблон
  template = document.getElementById('twitter-template').innerHTML,

  // Контейнер со всеми сообщениями
  container = document.getElementById('twitter-feed'),

  messages = [];

  // Все новые сообщения добавляем в массив messages
  socket.on('connect', function() {
    socket.on('message', function(result) {
      messages.push(JSON.parse(result));
    });
  });

  // Каждые 2 секунды берём первое сообщение из массива и показываем
  window.setInterval(function() {
    if (messages.length > 0) {
      var message = messages.shift(),

      // Получаем все сообщения в ленте
      tweets = container.querySelectorAll('section'),
      length = tweets.length,

      section = document.createElement('section');

      // Создаём HTML шаблон для нового сообщения
      section.innerHTML = mustache(template, message);

      if (length > 0) {
        container.insertBefore(section, tweets[0]);
      } else {
        container.appendChild(section);
      }

      // Если в ленте больше 20 сообщений, удаляем самое старое
      if (length > 20) {
        container.removeChild(tweets[length-1]);
      }
    }
  }, 2000);
})(window, document);

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

Пульс твиттера о веб-разработке

Для демонстрации я решил подготовить немного улучшенный вариант. Он транслирует большинство сообщений о веб-разработке на русском и английском языке. Как правильно заметил @nesterov_vit — очень похоже на телевизор.

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

Серверная часть

Во-первых, хотелось убрать нежелательные сообщения из трансляции. Для этого я подготовил несколько правил:

1. сообщения только на русском и английском языке;
2. сообщения от пользователей с нестандартными аватарами;
3. игнорировать ретвиты и ответы;
4. игнорировать заданный список аккаунтов;
5. игнорировать заданные слова в сообщении;
6. игнорировать сообщения с переизбытком хештегов.

Все эти правила я выделил в отдельную функцию.

twitter = require 'twitter-text'

options =
  # список нежелательных аккаунтов (для тролей)
  mute: ['']
  # список стоп-слов (для спама)
  spam: ['купить javascript без смс']

module.exports = (tweet) ->
  return false if not tweet or not tweet.user or not tweet.text

  # Разрешены сообщения только на русском и английском
  if tweet.lang?
    return false if tweet.lang not in ['en', 'ru']
  else if tweet.user.lang?
    return false if tweet.user.lang not in ['en', 'ru']

  # Пропускаем нежелательные аккаунты
  if options.mute.length > 0
    account = "#{tweet.user.screen_name}".toLowerCase()
    return false for mute in options.mute when account is mute

  # Пропускаем пользователей с аватаром по-умолчанию ^_^
  if tweet.user.profile_image_url.indexOf('default_profile_images') > -1
    return false

  text = "#{tweet.text}"

  # Пропускаем старые ретвиты и ответы на сообщения
  if text.indexOf('RT ') is 0 or text.indexOf('@') is 0 or text.indexOf('.@') is 0
    return false

  if options.spam.length > 0
    # Преобразуем сжатые ссылки в полный вид
    if tweet.entities.urls? and tweet.entities.urls.length > 0
      for entity in tweet.entities.urls
        text = text.replace entity.url, entity.expanded_url

    text = text.toLowerCase()

    # Пропускаем твиты содержащие в себе стоп-слова
    return false for spam in options.spam when text.indexOf(spam) isnt -1

  # Пропускаем твиты содержащие переизбыток хештегов ^_^
  hashtags = twitter.extractHashtagsWithIndices text
  return false if hashtags and hashtags.length > 4

  return true

Во-вторых, можно поработать над текстом сообщений. Вот, что мы с ними сделаем:

1. все сжатые ссылки преобразуем в нормальные;
2. все ссылки на картинки преобразуем в изображения;
3. заменим размер аватаров на максимально возможный.

Опять же, этим будет заниматься отдельная функция.

twitter = require 'twitter-text'

module.exports = (tweet) ->
  # Преобразуем только ссылки, хештеги и аккаунты оставляем текстом
  text = twitter.autoLinkUrlsCustom tweet.text, target: '_blank'

  # Заменяем сжатые ссылки на нормальные
  if tweet.entities.urls? and tweet.entities.urls.length > 0
    for entity in tweet.entities.urls
      text = text.replace entity.url, entity.expanded_url
      text = text.replace entity.url, entity.display_url

  # Заменяем ссылки на картинки на сами изображения
  tweet.media = false
  if tweet.entities.media? and tweet.entities.media.length > 0
    for entity in tweet.entities.media
      text = text.replace entity.url, entity.expanded_url
      text = text.replace entity.url, entity.display_url

      tweet.media =
        url: entity.media_url
        w: entity.sizes.small.w
        h: entity.sizes.small.h

  tweet.text = text

  # Заменяем размеры аватаров на максимальные
  image = tweet.user.profile_image_url
  pos = image.lastIndexOf '_'
  tweet.user.profile_image_url = image.substring(0, pos) + '_bigger' + image.substring(pos + 7)

  tweet

Клиентская часть

В этой части я постарался сконцентрироваться на удобстве.

Во-первых, я добавил статус подключения к серверу. Страница может быть открыта продолжительное время, и не всем будет понятно, работает трансляция или нет.

Во-вторых, из-за того, что Twitter Streaming API возвращает только текущие сообщения, то может произойти так, что новый пользователь долгое время ничего не увидит. Чтобы этого избежать, сразу показываю 5-10 сообщений из поиска. Для этого я использую Twitter REST API. При этом новые сообщения из Streaming API будут поступать в очередь сразу за старыми.

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

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

Ну что, посмотрим демонстрацию?

Анализ сообщений

Было бы здорово к этому прикрутить анализ сообщений. И пытаться выявить наиболее интересные темы за день. Но это, видимо, не мой уровень. Может кто-то из Яндекса придёт и скажет, как это сделать, а?

Выступление Эрика Бидельмана о веб-компонентах. Рассказывает о Templates, Shadow DOM и Observers.

Слайды презентации.

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

В маркетинговом блоге «Ловим Сетью» я уже рассказывал, как сделать описание для Facebook и Twitter. Но как оказалось, этого не достаточно. Я подготовил небольшой конструктор, который должен помочь в решении этой проблемы.

Посмотреть конструктор.

С его помощью, вы легко сможете подготовить описание для своей страницы. Такой сниппет будет работать во всех популярных социальных сетях: Facebook, Twitter, ВКонтакте и Google+. Дополнительно я постарался ответить на часто задаваемые вопросы о социальных сниппетах.

Подведу итоги работы блога за 2012 год. Год был очень насыщенным. Я выделил пять наиболее ярких и захвативших меня тем в прошедшем году. Но перед этим я хотел бы показать статистику блога. На графике сравнение 2011 (оранжевая линия) с 2012 (синяя линяя) годом по версии Google Analytics. Этот рост мотивирует к дальнейшему развитию сайта.

Конференция по маркетингу Digitale

За 2012 год мы с партнёрами организовали две больших конференции по маркетингу в Санкт-Петербурге. Это, конечно, был сумасшедший опыт. Мы старались делать конференции на очень высоком уровне: как само мероприятие, так и сайт конференции. Для разработки этого сайта я использовал Node.js и MongoDB и остался ими очень доволен. Также было интересно организовать twitter трансляцию во время проведения мероприятия. Именно с её помощью мы дважды вывели хэштег #dconf в тренды.

Интеграция социальных сервисов

В этому году было очень много проектов с интеграцией в разные социальные сервисы, в том числе и в рамках проведения конференции Digitale. Это были совершенно разные виды интеграций: сайт с социальной сетью, социальная сеть с сайтом; работа с API на стороне клиента и сервера. Пришлось изучить всё вдоль и поперёк. Этот опыт дал мне возможность чувствовать себя экспертом в этой области. Даже написал несколько коротких статей для блога «Ловим сетью» (за эту возможность спасибо Павлу Калугину).

• Как подготовить сайт, чтобы ссылки на него в Facebook выглядели красиво
• Twitter Cards: как добавить описание и изображение к ссылкам на ваш сайт в Twitter

Попробовал поработать с виджетами для Facebook. В результате на этом сайте появился Facebook Reader.

Этот виджет автоматически публикует информацию о прочтении статьи в ваш профиль. Разумеется, с рядом настроек и возможностью отключить это безобразие. Я даже думал описать как делать подобные вещи, но со временем правила отображения таких активностей в Facebook изменились и моё желание поутихло. Если вам всё равно интересно почитать об этом, напишите в комментариях «пиши про facebook reader» — сделаю.

В итоге у меня есть экспертиза в направлении социальных интеграций. Если у вас есть вопросы по этой теме, можете выловить меня и задать их. Особенно, что касается социальных сетей: Facebook, Twitter, Google+, ВКонтакте, Instagram, Foursquare, Tumblr.

Выступления и обучение

Ещё 2012 год можно назвать годом первых публичных выступлений. Причём это был очень широкий спектр. Вместе с Serenity мы проводили семинары по интернет-маркетингу, где я больше рассказывал про автоматизацию. Были совместные семинары агентств Serenity и Nimax, в которых я уже скорее вдохновлял использовать Facebook для работы над брендом. А самым странным выступлением была презентация про викиномику. Часть презентаций с этих выступлений можно посмотреть на Speaker Deck.

Вместе с этим я стал помогать в обучении студентов. Периодически у меня бывают лекции в ИТМО по технологиям разработки сайтов. Например, я читал лекцию об адаптивном веб-дизайне и рассказывал о Node.js. Надеюсь, в следующем году эта инициатива будет развиваться, так как компетенции преподавателей ВУЗов, к сожалению, не хватает. А ведь нам с вами нужны квалифицированные сотрудники.

HTML Academy

Я стараюсь не говорить о будущих проектах, но про HTML Academy хочется сказать пару слов. Александр Першин реализовал потрясающую идею обучения HTML/CSS в интерактивных курсах. Сейчас проект ещё очень сырой. Однако те отзывы, которые мы получаем по этому проекту, очень вдохновляют. Пользователям нравится и они c нетерпением ждут новых заданий.

На момент написания статьи в академии участвует 261 пользователь, при этом регистрация для прохождения курсов не обязательна. Они выполнили 7 810 заданий, при этом 907 заданий за последнюю неделю.

На конференциях Digitale нам с Александром очень понравилось выступление Игоря М. Намаконова об игроизации контента (gamification). А раз уж мы играем в World of Warcraft то решили, что достижениям в академии быть. Такой подход к прохождению курсов сильно увеличил мотивацию пользователей. Уже 1 268 достижений выполнено, при этом 117 достижений за последнюю неделю. Статистику по достижениям всегда можно посмотреть на сайте.

В проекте участвует два с половиной человека и главная сложность на этот момент — контент. Мы рады любой помощи. А если у вас есть знакомый инвестор (или вы — он), всегда можно помочь материально.

Обновление сайта

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

В любом случае, главное это читатели. Спасибо вам за поддержку в 2012 году.

Часто меня спрашивают студенты: «Какой элемент сайта самый важный?», на что я им отвечаю — формы. Ведь с помощью форм пользователи совершают почти все конверсионные действия. Именно с этим элементом связано больше всего проблем. В этой статье я постараюсь рассказать, что можно улучшить при взаимодействии с формами. А заодно описать новые возможности работы с ними в браузерах.

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

Александр Першин подробно рассказывал об этом подходе в своей статье Progressive Enhancement. Если вы до сих пор не сталкивались с ним, то я вам крайне рекомендую прочитать.

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

Браузерная статистика рунета

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

Все приёмы в этой статье оценят 56,8% пользователей. В этой статистике присутствуют браузеры: IE 10, Firefox 11-17, Chrome 4-24, Safari 6, Opera 12.

Часть приёмов оценят 80,1% пользователей. Сюда дополнительно включил поддержку: IE 8-9, Safari 4-5, Opera 10-11.

Мобильные браузеры в статистику не включал, хотя они бы дали ещё больший процент поддержки. Информацию брал из LiveInternet со срезом по России. В расчёт попал средний трафик за 3 месяца (октябрь-декабрь) 2012 года.

Новые атрибуты форм в HTML5

Внимание: примеры в этой статье не содержат jQuery кода. Весь JavaScript написан с помощью фреймворка Vanilla JS.

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

• required — обязательное поле для заполнения;
• autofocus — установка фокуса на поле при загрузке страницы;
• placeholder — описание поля.

Поддержка новых атрибутов форм.

Вместе с этим появилось много новых типов полей: date, email, number, range и другие. Однако, самое безобидное из них (email), до сих пор используется с опаской. А ведь для того, чтобы оно заработало специальных действий не нужно. Браузеры, которые не знают этот тип полей, будут считать его текстовым.

Также появились дополнительные селекторы в CSS: E:valid, E:invalid, E:required — с помощью которых можно описывать стилевое оформление полей в разных ситуациях.

Демонстрация работы новых атрибутов полей и их оформления.

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

Запись данных формы по мере ввода

Поддержка localStorage.

Одна из частых проблем заполнения форм — введённые данные теряются. Это может произойти по разным причинам: ошибка сайта, переход по ссылке, в конце концов, может отключиться интернет. Решить эту проблему можно по-разному, например, записывать данные в localStorage по мере ввода.

if (window.localStorage) {
  var elements = document.querySelectorAll('[name]');

  for (var i = 0, length = elements.length; i < length; i++) {
    (function(element) {
      var name = element.getAttribute('name');

      element.value = localStorage.getItem(name) || '';

      element.onkeyup = function() {
        localStorage.setItem(name, element.value);
      };
    })(elements[i]);
  }
}

Валидация формы и отправка данных аяксом

Раз уж мы используем атрибуты required, то можно и валидацию сделать по-новому. В спецификации HTML5 для элемента формы добавлен метод checkValidity(). Он возвращает true или false. Стратегия работы формы будет очень простой: если проверка валидации даёт отрицательный результат — мы блокируем отправку формы, в обратном случае — разрешаем отправку.

submit.disabled = !form.checkValidity();

Поддержка FormData из XHR2.

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

form.onsubmit = function(event) {
  if (window.FormData) {
    event.preventDefault();

    var data = new FormData(form);
    var xhr = new XMLHttpRequest();
    var url = form.getAttribute('action') + '?time=' + (new Date()).getTime();

    xhr.open('post', url);
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && xhr.status == 200) {
        // server response: xhr.responseText
      }
    };
    xhr.send(data);
  }
};

При работе с асинхронными запросами следует помнить, что некоторые браузеры кэшируют результат. Например, это делает Internet Explorer, Mobile Safari (iOS 6) и другие. Чтобы избежать эту проблему, можно добавлять к адресу запроса текущее время.

Сейчас ответ от сервера мы получаем в текстовом виде (xhr.responseText), но со временем это изменится. Например, если мы точно знаем, что ответом будет JSON, мы можем получить JavaScript объект сразу.

var xhr = new XMLHttpRequest();

xhr.open(method, url);
xhr.responseType = 'json';

xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    // server response: xhr.response
  }
};

xhr.send();

Обратите внимание, что ответ сервера будет в свойстве xhr.response. А свойство xhr.responseType может принимать и другие значения, например: arraybuffer, blob, document.

Демонстрация сохранения данных формы и отправки их с помощью XMLHttpRequest.

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

Предварительный просмотр закачиваемых фотографий

Плавно переходим на работу с файлами в формах. До недавнего времени почти никаких средств для работы с файлами не было. Но всё меняется. Начнём с простого — новые атрибуты для полей загрузки файлов.

• multiple — позволяет выбирать несколько файлов;
• accept — даёт возможность указывать, какие файлы выбирать.

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

<input type="file" name="image" accept="image/*" multiple>

Хочу напомнить: поле с такими атрибутами будет работать в старых браузерах. Ограничением будет:

1. Только один файл;
2. Валидация файлов производится на серверной стороне.

Поддержка FileReader из File API.

Попробуем улучшить опыт взаимодействия с файлами. Раз мы ожидаем от пользователей добавления фотографий, логично сделать возможным предварительный просмотр. Для этого мы будем использовать объект FileReader из спецификации File API.

document.querySelector('[type=file]').addEventListener('change', function() {
  [].forEach.call(this.files, function(file) {
    if (file.type.match(/image.*/)) {
      var reader = new FileReader();

      reader.onload = function(event) {
        var img = document.createElement('img');
        img.src = event.target.result;

        div.appendChild(img);

        queue.push({file: file, element: img});
      };

      reader.readAsDataURL(file);
    }
  });
}, false);

Таким образом, все выбранные фотографии мы сразу же отображаем на сайте.

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

var data = new FormData(form);

queue.forEach(function(element) {
  data.append('image', element.file);
});

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

Демонстрация предварительного просмотра фотографий и отправки их с помощью аякс.

Drag and drop файлов

Поддержка drag and drop файлов.

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

function previewImages(files) {
  [].forEach.call(files, function(file) {
    if (file.type.match(/image.*/)) {
      var reader = new FileReader();

      reader.onload = function(event) {
        var img = document.createElement('img');
        img.src = event.target.result;

        div.appendChild(img);

        queue.push({file: file, element: img});
      };

      reader.readAsDataURL(file);
    }
  });
}

Допустим, зоной для перемещения файлов будет блок с классом wrapper. Добавим события для него.

var file = document.querySelector('[type=file]');
var dropzone = document.querySelector('.wrapper');

file.addEventListener('change', function() {
  previewImages(this.files);
  this.value = '';
}, false);

dropzone.addEventListener('dragover', function(event) {
  event.preventDefault();

  dropzone.classList.add('active');
  event.dataTransfer.dropEffect = 'copy';
}, false);

dropzone.addEventListener('drop', function(event) {
  event.preventDefault();

  dropzone.classList.remove('active');
  previewImages(event.dataTransfer.files);
}, false);

Как видите, мы добавили события начала (dragover) и конца (drop) перемещения файлов. Все перемещённые файлы мы передаём функции previewImages. Таким образом, наша форма работает одинаково с файлами выбранными через сайт и перемещёнными с компьютера.

Процесс загрузки файлов (progress bar)

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

var xhr = new XMLHttpRequest();

xhr.upload.addEventListener('progress', function(event) {
  if (event.lengthComputable) {
    progress.value = Math.round((event.loaded * 100) / event.total);
  }
}, false);

Демонстрация drag & drop и прогресса загрузки файлов.

В итоге

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

1. Валидация происходит в момент ввода;
2. Введённые данные запоминаются пока не будут отправлены;
3. Контактные данные сохраняются для повторной работы;
4. Предварительный просмотр фотографий;
5. Процесс загрузки файлов.

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

• в IE 6-7 и других старых браузерах,
• с отключённым JavaScript,
• на мобильных устройствах.

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

Хочется нам того или нет, но классы в ECMAScript 6 всё-таки будут. Мнения по поводу самой концепции классов в JavaScript всегда были весьма противоречивыми. Одним бесклассовая природа JavaScript нравится — это делает язык отличным от других. Другие же просто ненавидят JavaScript по тем же причинам. Отсутствие классов является одной из основных психологических сложностей, с которыми сталкиваются разработчики при переходе с C++ или Java на JavaScript. Некоторые разработчики говорили мне, что именно по причине отсутствия классов они либо не любят JavaScript, либо вообще отказались его изучать.

В JavaScript изначально не было формального определения классов, что и внесло путаницу с самого начала его использования. Во многих книгах и статьях, посвящённых JavaScript, о классах говорится так, как если бы они реально существовали. Но то, что они называют классами, по сути своей является всего лишь пользовательскими конструкторами, которые используются для определения пользовательских типов данных. Такой способ – это наиболее близкое описание классов в JavaScript. Общий формат выглядит достаточно знакомым большинству разработчиков, вот, например, так:

function MyCustomType(value) {
  this.property = value;
}

MyCustomType.prototype.method = function() {
  return this.property;
};

Довольно часто такой код называется объявлением класса MyCustomType. На самом же деле здесь всего лишь объявляется функция MyCustomType, которая в дальнейшем будет вызываться с помощью new для создания экземпляра MyCustomType. Но в этой функции нет ничего особенного, равно как и нет в ней ничего, что указывало бы на её отличие от какой-либо другой функции, не используемой для создания нового объекта. Именно такой способ использования функции и делает её конструктором.

Этот код даже не похож на объявление какого-либо класса. По сути, сложно уловить какую-либо взаимосвязь между объявлением конструктора и методом в прототипе. Начинающим разработчикам JavaScript этот код вообще может показаться невзаимосвязанным. Однако же связь между ними существует, хотя она и близко не похожа на объявление класса, принятого в других языках.

Ещё более непонятным выглядит обсуждение вопроса наследования. Разработчики смело бросаются такими понятиями как «подклассы» и «суперклассы», хотя эти термины имеют смысл лишь при условии реального существования классов. И, конечно же, синтаксис для наследования выглядит довольно путанным и громоздким:

function Animal(name) {
  this.name = name;
}

Animal.prototype.sayName = function() {
  console.log(this.name);
};

function Dog(name) {
  Animal.call(this, name);
}

Dog.prototype = new Animal(null);
Dog.prototype.bark = function() {
  console.log('Woof!');
};

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

В первом издании книги «Professional JavaScript for Web Developers» я использовал только понятие «класс». Из полученных отзывов я понял, что очень многих это сбивало с толку, и поэтому во втором издании я заменил «класс» на «тип». С тех пор я пользуюсь только этой терминологией, что часто помогает мне избежать непонимания.

Но проблема всё равно остаётся довольно острой. Синтаксис для определения пользовательских типов данных действительно путанный и громоздкий. Наследование между двумя типами – процесс многошаговый. Не существует простого способа вызвать метод родительского класса. Общий итог таков: создание и управление пользовательскими типами данных в JavaScript – это одна сплошная головная боль. Если не верится в то, что проблема действительно серьёзная, то достаточно взглянуть на количество библиотек, предлагающих свой способ объявления пользовательских типов данных или наследования, или того и другого вместе взятых.

• YUI – предлагает Y.extend() для осуществления наследования. Также добавляет свойство superclass при использовании этого метода.
• Prototype – предлагает Class.create() и Object.extend() для работы с объектами и «классами».
• Dojo – предлагает dojo.declare() и dojo.extend().
• MooTools – имеет собственный тип данных под названием Class для определения и расширения классов.

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

По своей сути классы в ECMAScript 6 – это ни что иное, как синтаксический сахар для использования уже знакомых паттернов. Рассмотрим этот пример:

class MyCustomType {
  constructor(value) {
    this.property = value;
  }

  method() {
    return this.property;
  }
}

Это объявление класса в ECMAScript 6 легко сводится к предыдущему примеру. Объект, созданный с помощью такого определения класса, работает точно так же, как и объект, созданный с помощью определения конструктора в примере выше. Единственное отличие заключается в более компактном синтаксисе. А как на счёт наследования?

class Animal {
  constructor(name) {
    this.name = name;
  }

  sayName() {
    console.log(this.name);
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name);
  }

  bark() {
    console.log('Woof!');
  }
}

Этот пример легко сводится к предыдущему примеру наследования. В данном случае объявление класса выглядит более компактно, а тяжеловесный многошаговый паттерн наследования теперь заменяется простым ключевым словом extends. Ещё одним преимуществом является возможность использовать метод super() внутри определения класса, чтобы обращаться к классу родителю.

С точки зрения классов текущая версия ECMAScript 6 не предлагает ничего большего, чем новый синтаксис для уже знакомых паттернов из JavaScript. Наследование работает так же, как и раньше (связь прототипов плюс вызов конструктора у родителя), к прототипам добавляются методы, а свойства объявляются в конструкторе. Единственное реальное преимущество для разработчиков – меньше писанины. Определение классов по сути своей является определением типов, но с помощью другого синтаксиса.

И пока кто-то возмущается по поводу введения классов в ECMAScript 6, помните, что сама идея классов в данном случае весьма абстрактна. На самом деле ничего кардинально не меняется, и ничего нового не вводится. Классы – это лишь синтаксический сахар для пользовательских типов, которые и так уже давно существуют в этом языке. В данном случае просто решается давняя проблема JavaScript — путаницы при определении пользовательских типов. Лично мне очень бы хотелось использовать ключевое слово type вместо слова class, но, в конце концов, это всего лишь вопрос семантики.

Так нужны ли классы в JavaScript? Нет. Но в JavaScript определённо нужен более простой и понятный способ определения пользовательских классов. Просто случайно получилось так, что способ сделать это в ECMAScript 6 назвали «классом». И если это помогает разработчикам других языков проще переключиться на JavaScript, то почему бы и нет.

Это перевод статьи Nicholas C. Zakas — «Does JavaScript need classes?». Николас — фронтенд-консультант и автор хороших книг о JavaScript — «Maintainable JavaScript», «Professional JavaScript for Web Developers», «High Performance JavaScript» и «Professional Ajax».

Странно, но многие разработчики до сих пор не знают о таком замечательном CSS3 свойстве как box-sizing. Или знают, но почему-то не используют. А ведь используя это свойство, можно избежать вроде бы нелогичного поведения браузеров.

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

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

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

Или проблема с формами, например, разместить <textarea> на всю ширину блока.

Используем box-sizing

Такие проблемы можно решить с помощью CSS3 свойства box-sizing. Одно из значений этого свойства является border-box, которое позволяет не учитывать в размерах блока отступы и границы. Таким образом, указывая размеры блоку, вы указываете их всему блоку, а не содержимому.

Поддержка в браузерах

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

Зная это, я полностью согласен с Paul Irish. Не мучайте себя, укажите для всего документа box-sizing.

* {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

Кстати, на этом блоге именно такой способ и используется.

Какие могут быть проблемы

Проблема №1: свойство не поддерживается в IE 6-7.
Решение: подключить polyfill исправляющий поддержку свойства или использовать условные комментарии с отдельным стилевым файлом.

Проблема №2: ошибка работы min-height, max-height с box-sizing в Firefox.
Решение: помнить об этом и не использовать эти свойства с box-sizing или дождаться выхода Firefox 17 в котором этот баг (308801) уже исправлен.