Введение

Плагин jQuery Templates – это «движок шаблонов», работающий на стороне клиента как расширение jQuery.

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

Разумеется, jQuery Templates – не единственный и не первый «движок шаблонов», но у него есть большое преимущество перед альтернативными вариантами – поддержка со стороны jQuery Team. Это позволяет нам не бояться того, что этот плагин окажется заброшенным, и различные проблемы, возникающие при выходе новых версий браузеров, придется решать своими силами.

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

31 января вышел релиз jQuery 1.5, одним из ключевых нововведений которого стал инструмент Deferred Object. Именно о нём я и хочу рассказать подробнее в этой статье.

Эта новая функциональность библиотеки направлена на упрощение работы с отложенными (deferred) вызовами обработчиков (callbacks). Deferred Object, аналогично объекту jQuery, «цепочный» (chainable), но имеет свой набор методов. Deferred Object способен регистрировать множество обработчиков в очередь, вызывать зарегистрированные в очереди обработчики и переключать состояние на «завершено» или «ошибка» для синхронных или асинхронных функций.

Хостинговая компания Infobox запускает новый сервис Backup it — для создания и онлайн-хранения резервных копий различных данных. Сервис предназначен как для домашнего использования (линейка планов Home), так и для корпоративных клиентов (линейка Pro).

Какие типы данных позволяет резервировать новый сервис и для кого он предназначен?

По своей работе я часто имею дело с почтой, размещенной у разных хостинг-компаний. Несмотря на то, что за хостинг платятся вполне приличные деньги, качество услуг в разы проигрывает «бесплатным» почтовым серверам. Мало того, что под почту дают мало места, так и доступность её чаще всего хромает. Но когда мне довелось с почтой, размещенной у Хостинг-центра РБК, количество проблем достигло такого уровня, что было принято решение перейти на какой-либо альтернативный сервис.

Выбор был невелик – «Почта Для Домена» Яндекса или «Gmail для предприятий».
После недолгих размышлений было принято решение в пользу Google, т.к.:

1. Это «Корпорация зла», а все бизнесмены – адепты зла :)
2. Почта располагается за рубежом, что немного усложняет получения доступа к почте третьих лиц.
3. Масса дополнительных сервисов, как стандартных (Docs, Calendar), так и дополнительных.
4. Возможность подключения дополнительных возможностей за деньги (больше места, маршрутизация почты и пр.).
5. Возможность создания нескольких администраторов для управления всем сервисом.
6. Известная стабильность и качество сервиса.
7. Всё таки, ПДД Яндекса – это клон Gmail для предприятий.

Tab Atkins, член рабочей группы CSS и команды Google Chrome, опубликовал слайды презентации, которую он проводил в прошлую среду.

Эта презентация демонстрирует четыре относительно новых концепта

audio.js — это javascript библиотека, позволяющая использовать HTML5 тэг повсюду. Что скрывается за словом «повсюду». Если есть возможность использовать тэг , то будет использоваться он, иначе будет подключен плеер на flash. В библиотеку так же входит и UI отображение для этого плеера, которое может быть видоизменено с помощью css.

style.css

.habr span
{
    display:block;
    overflow:hidden;
    white-space:nowrap;
    width:100%;
    -moz-binding:url("ellipsisxul.xml#ellipsis");
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
}

Брианна Брекке (Brianna Brekke), Старший стратег, Места на карте Google.

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

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

Как сообщить о проблеме

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

Как редактировать данные о компаниях прямо на Картах Google

• Вы можете обновить местоположение объекта прямо на Картах Google. После того, как вы проверите и сохраните свои правки, они появятся на картах в течение нескольких часов.
• Если вы – владелец компании и хотите, чтобы данные о ней присутствовали на наших картах, ознакомьтесь с приведенной ниже информацией о Местах на карте Google.

Как сообщить об ошибке в данных о компаниях

• Лучший способ сообщить об обнаруженных вами неточностях в информации о компаниях – это использовать инструмент Сообщить о проблеме.
• После проверки присланной пользователями информации, в течение нескольких недель произойдет обновление карт.

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

Как заявить права на свой бизнес на Картах Google

• Сообщите нам о том, что вы являетесь владельцем компании, на странице http://www.google.com/places или нажав на ссылку «Владелец бизнеса?» в описании вашей компании.
• Затем мы пришлем вам PIN-код, и вы подтвердите регистрацию своей компании по телефону или при помощи почтовой открытки. В течение часа после подтверждения вы увидите информацию о своей компании на карте, перейдя по ссылке «Просмотреть».
• Если информация о вашей компании некорректна, существует много разных способов сообщить нам об этом. Мы обязательно внесем все необходимые исправления.

Любовь к HTML5 продолжает вдохновлять Поля Айриша. Во-первых, он подарил нам Modernizr, а сейчас он объединился с Divya Manian для создания шаблона HTML5, который использует передовые техники, чтобы Вы могли начать использовать его в своей практике.

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

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

Что такое Vanilla?

Vanilla forums — это минималистичный форумный движок. Цель проекта — создать простой инструмент для онлайн-конференций с простой возможностью наращивания функционала. Нет, это не второй phpbb, это действительно очень упрощённый форум.

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

Несмотря на свою кажущуюся простоту этот движок «из коробки» даёт почти всё, что нужно большинству пользователей, как-то: разграничение прав, подфорумы и категории, html/bbcode/markdown.

Что нового?

Те, кто использовали первую версию этого движка, помнят, что он был совсем неприглядным, и для того, чтобы сделать из него «конфетку», пришлось бы очень сильно потрудиться. Со второй версией это уже в прошлом. Из коробки Vanilla имеет простой, но аккуратный дизнайн, которым вполне можно пользоваться. Более того, на официальном сайте в разделе дополнений есть ряд тем, подготовленных профессиональными дизайнерами. Так что, первое, что заметят те, кто пробовал первую версию — это безусловно то, что система стала привлекательнее, и ей даже можно пользоваться «из коробки».

Однажды на просторах Хабра встретил плагин FormNavigate (требующий у пользователя подтверждения на закрытие вкладки или переход по ссылке, когда данные в форме заполнены, а-ля gmail), а однажды потребовалось его даже применить.

Но тот вид в котором плагин был меня не устроил и я позволил себе немного его переписать.

Так, например, мне неудобно было выбирать те ссылки, на которых следует отлавливать подтверждения, а наоборот требовалось указывать ссылки на которые действие плагина не будет распространяться. Тут продвинутые разработчики начнут меня закидывать помидорами, что я не знаю правильную работу селекторов в jQuery. Но это не так, сами можете проверить как работает прошлая версия плагина, например, для: $('a:not([class~="ajax"])') (предложенный автором прошлого топика $('a:[class!="ajax"]') вообще вытворяла чудеса).

Не так давно из лекции Дугласа Крокфорда я узнал об очень интересной технике «шаблонизирования» в JavaScript. Основная цель техники заключается в том, что мы получаем с сервера JSON и потом как-то формируем из этого HTML. Во многих ситуациях этот процесс оставляет желать лучшего потому, что формирование HTML происходит или с помощью конкатенации строк или ряда операций createElement, appendChild и т.п. Возможно многие уже знают об этом решении, но для тех кто не знал надеюсь будет полезно.

Совсем недавно существенно обновился набор замечательных иконок Fugue Icons от Yusuke Kamiyamane. Теперь их 2,926 (16х16) + 210 (24х24) + 46 (32х32) = 3182 качественные иконки для вашего сайта. В архиве также имеется версия без теней.

Лицензия Creative Commons Attribution 3.0 позволяет использовать иконки в любых целях со ссылкой на автора.

Превью 3Mb
Архив 4.9Mb
Архив+исходники 24.8Mb

Оксана Команеску, Команда качества поиска

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


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

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

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

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

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

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

Уже неоднократно видел утверждение, что CSS необходимо комментировать, чтобы потом было проще сориентироваться себе или тому, кто также поддерживает или будет в дальнейшем поддерживать ваш код. Но почему-то никто не предлагает использовать какой-то универсальный формат комментариев, который был бы понятен всем, хотя в программировании такое используется повсеместно: JavaDoc, JSDoc, PHPDoc и т.п.

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

Элементы Android GUI и некоторые основные экраны в одном PSD-файле, версия 2.0.



Взялся за проектирование интерфейса приложения под Android и понял, что первой версии Android GUI PSD от Pavel Maček мне не хватает. Тогда и решил сделать свой набор, взяв за основу первую версию. В общей сложности на отрисовку элементов в vector path в Photoshop'e затратил около 3 дней. К PSD файлу прилагаются шрифты Droid Serif, Droid Sans, Droid Sans Mono, которые желательно установить.

Весь новосибирский транспорт (и маршрутки, и автобусы, и троллейбусы) оснастили средствами спутникового определения координат и их последующей трансляции. Теперь (как я узнал, читая один из LJ-блогов) любой владелец ноутбука или нетбука, имеющего выход в Интернет, может ведать о близости общественного транспорта невозбранно — при помощи специальной карты, работающей на движке Google Maps.

Слава Богу! Слава Новосибирску! Слава России!

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

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

A — A List Apart

A List Apart содержит лучшие советы и мнения от лидирующих умов индустрии.

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


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