Заметки за август 2013 года

Аргументы функции

Узнать, сколько функция принимает аргументов, можно в её свойстве length.

var l = (function (a, b, c) {}).length; // == 3

Узнать, сколько в неё было передано аргументов, можно в свойстве length объекта arguments.

(function (a, b, c) {
  var l = arguments.length; // == 2
})(100, 200);

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

var args = Array.prototype.slice.call(arguments);
Комментарии к заметке: 4

Больше семантики для логотипа

Уже долгое время не утихают споры о том как «правильно» разметить логотип. О некоторых интересных доводах можно, например, прочесть в статье «Ваш логотип — всё еще изображение … как и мой!». Независимо от того какими именно тегами размечен ваш логотип, логотип компании или продукта, этой разметке всегда можно добавить семантики.

В словаре Schema.org у объекта Organization есть поле logo, которое указывает на картинку с логотипом.

<div itemscope itemtype="http://schema.org/Organization">
  <a href="http://www.apple.com/" itemprop="url">
    <span itemprop="name">Apple</span>
    <img itemprop="logo" alt="Apple Logo"
      src="http://www.apple.com/apple-logo.png">
  </a>
</div>

У Product, Person и Organization есть другое поле — brand. Оно, в свою очередь, может ссылаться на Organization или Brand, в котором уже есть поле logo.

<!-- разметка продукта -->
<div itemscope itemtype="http://schema.org/Product" itemref="_brandApple">
  <a href="http://www.apple.com/pr/products/iphone/iphone.html" itemprop="url">
    <span itemprop="name">iPhone</span>
    <img itemprop="image" alt="iPhone 5 Black"
      src="http://images.apple.com/products/iPhone_5_Black.jpg">
  </a>
</div>

<!-- разметка логотипа -->
<div itemscope itemtype="http://schema.org/Brand" itemprop="brand" id="_brandApple">
  <a href="http://www.apple.com/" itemprop="url">
    <span itemprop="name">Apple</span>
    <img itemprop="logo" alt="Apple Logo"
      src="http://www.apple.com/apple-logo.png">
  </a>
</div>

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

Комментарии к заметке: 5

Эффективное использование name и url в микроразметке

Каждый значимый объект микроразметки должен иметь свойства name и url. Эти свойства наследуются всеми объектами от Thing. Хоть форматом и не накладывается жестких ограничений на их обязательное присутствие, но фактически, чтобы получить максимальную пользу от микроразметки, они просто необходимы.

Свойство name

Отвечает за название объекта. Оно, скорее всего, будет использоваться для отображения пользователю.

<div itemscope itemtype="http://schema.org/Event">
  <span itemprop="name">Собрание рыцарей круглого стола</span>
  <time datetime="2013-08-23T12:00:00+06:00"
      itemprop="startDate">23 августа 2013 в 12:00</time>
</div>

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

Если подходящего слова или словосочетания не нашлось, то явно укажем его в теге <meta>.

<div itemscope itemtype="http://schema.org/Event">
  <span itemprop="name">Собрание рыцарей
    <span itemscope itemtype="http://schema.org/Product">
      круглого стола
      <meta itemprop="name" content="круглый стол">
    </span>
  </span>
  <time datetime="2013-08-23T12:00:00+06:00"
      itemprop="startDate">23 августа 2013 в 12:00</time>
</div>

Эта разметка будет разобрана на два объекта:

event
  itemType = http://schema.org/Event
  name = Собрание рыцарей круглого стола
  startdate = 2013-08-23T12:00:00+06:00

product
  itemType = http://schema.org/Product
  name = круглый стол

Свойство url

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

<div itemscope itemtype="http://schema.org/Event">
  <a href="/meetups/2013-08-23/" itemprop="url name">Собрание
      рыцарей круглого стола</a>
  <time datetime="2013-08-23T12:00:00+06:00"
      itemprop="startDate">23 августа 2013 в 12:00</time>
</div>

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

Распространённой ошибкой при указании значения url является банальная подстановка текущего URL страницы, на которой располагается объект. Это допустимо только, если на этой странице размещена только одна сущность. Когда сущностей несколько (например, список событий) или, что хуже, появляются сущности разного типа, то указать один и тот же URL для них нельзя.

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

The fragment is an optional part separated from the front parts by a hash («#»). It holds additional identifying information that provides direction to a secondary resource, e.g., a section heading (in an article) identified by the remainder of the URI. When the primary resource is an HTML document, the fragment is often an id attribute of a specific element and web browsers will make sure this element is visible.

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

<div itemscope itemtype="http://schema.org/Event" id="meetup-2013-08-23">
  <a href="#meetup-2013-08-23" itemprop="url name">Собрание
      рыцарей круглого стола</a>
  <time datetime="2013-08-23T12:00:00+06:00"
      itemprop="startDate">23 августа 2013 в 12:00</time>
</div>

Когда на странице оказывается несколько объектов разных типов, URL страницы рекомендуется назначать какому-то основному из них (например, статье), а остальным указывать URL страницы с разными фрагментами. Разумеется, что соответствующие идентификаторы должны быть доступны на ней.

И в заключении хочу обратить внимание, что значение атрибута id может начинаться только с латинской буквы или символа _. Любые другие символы могут встречаться только начиная со второй позиции в строке.

Оставте свой комментарий

Встреча FrontTalks 20 апреля 2013 года

На сайте FrontTalks появились видео докладов со второй встречи фронт-энд разработчиков.

Я там выступал с рассказом о полиморфизме в Backbone.js приложении. Слайды презентации на Гитхабе. Описание того, как работает фабрика фабрик, можно прочитать в статье «Коллекция разнотипных объектов в Backbone.js».

Другие примеры, которые я готовил для этой встречи, можно посмотреть в репозитоии — https://github.com/mistakster/fronttalks-bb

O мероприятии:

Вторая встреча FrontTalks
Докладчики: Владимир Кузнецов, Алексей Охрименко, Олег Мохов, Михаил Давыдов
Участие бесплатно
Комментарии к заметке: 3

Изящная деградация для SVG картинок

Алексей Тен на своём сайте опубликовал интересную технику подмены SVG изображения на растровый вариант для браузеров, без поддержки SVG.

<svg width="96" height="96">
  <image xlink:href="svg.svg" src="svg.png" width="96" height="96"/>
</svg>

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

Замечу лишь, что деградация слегка агрессивная по отношению с старым версиям Safari (включая iOS), Opera Mobile и Opera Mini. Эти браузеры не распознают inline SVG, но прекрасно отображают SVG в виде внешнего файла, подключаемого через тег <img>.

PS: Крис Койер в свой статье сообщает, что в IE 9, 10 и 11 всё же есть дополнительный запрос альтернативной картинки, а так же приводит ещё несколько техник.

Оставте свой комментарий