Колбэк в прокрутчике

Теперь можно вешать свои обработчики на клик по дочернему элементу. Работает, если инициализировать вручную.

Например, вам нужно при клике вывести порядковый номер элемента. Вы инициализируете скрипт и дописываете функцию-обработчик, как значение параметра «onclick»:

<script type="text/javascript">
$(function(){
  $('.foobar-2').scroller({
    'onclick': function($element){
      console.log($element.index());
    }
  });
});
</script>

Ура, товарищи! :–)

Описание прокрутчика и ссылка на последнюю версию

Мобильная версия = облегчённая версия

Телефон всегда уступает компьютеру по мощности.

Чтобы сайт не тормозил, убирайте лишние эффекты с мобильных версий: параллаксы,  «гладкий» скролл, сложные анимации. Всё, что ест ресурсы выпиливайте, и будет вам счастье.

P.S. «Гладкий» скролл можно и с полной версии убрать, кстати.

Чего не хватает в ХТМЛ и ЦСС

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

Свойтва position:sticky.
Это когда какой-то блок скроллится вместе со страницей, а дойдя до верха окна, «прилипает». Это свойство можно использовать, только поддержка почти что никакая. Поэтому приходится эмулировать скриптами.

Свойства list-style-color.
Часто при форматировании маркированных списков нужно, чтобы маркеры были не того цвета, что и текст. Вместо танцев с бубном колдовства со спанами и цветом для двух элементов (строки и спана) можно было бы обойтись одним свойством, и разметка стала бы проще.

Флексбоксов.
Про флексбоксы не писал, по-моему, только ленивый :-)
И опять, поддержка есть, но если нужны 8-й и 9-й ие, то придётся обойтись инлайн-блоками. Да и синтаксис флексбоксов пока не унифицирован. (Кстати, статья на frontender.info и презентация Вадима Макеева об этих волшебных штуках.)

Cвойства text-decoration-color.
Чтобы цвет подчёркивания сделать чуть светлее. Сейчас же подчёркиванием служит нижний бордер, что не очень правильно и удобно. (Много о способах перекрасить подчёркивание говорили в советах на сайте Артёма Горбунова.)

Элемента <tel>.
Инлайновый элемент, типа спана, в котором содержится телефон. Устройства, с которых нельзя позвонить, отображали бы его как обычный текст, а с которых можно, — как ссылку. Тогда вместо <a href="tel:8 (800) 000-00-00">8 (800) 000-00-00</a> было бы достаточно написать <tel>8 (800) 000-00-00</tel>.

Это были самые частые (и досаждающие) штуки. Список, на самом деле, гораздо больше, но слёту больше ничего вспомнить не смог :-)

Книжная полка 2.0

Сделал динамическую подгрузку книг в книжной полке, чтобы не нагружать браузеры.
Теперь я показываю по 10 рядов (20 книг) за раз.

Использовал аякс. Пришлось повозиться с путями; ещё раз убедился что cms — зло, как и любой интерфейс.

Сделал так, чтобы наполнение книжек стало проще и быстрее.

Прокрутчик

Из эксперимента получился почти готовый продукт :-)

Отдельного сайта пока для прокрутчика нет, потому он лежит на поддомене.

И что это за штука такая?

Клавиатура

Скука до добра не доводит :-)

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

 

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

Посмотреть в отдельном окне.

Самая бесполезная работа на свете

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

Большинство из них считают верстальщиков то ли недопрогерами, то ли передизайнерами, но никак не специалистами с отдельной профессией. А между тем всё не так просто.

1. Качество будущего сайта.
Оно напрямую зависит от качества верстки. Конечно, оно ещё зависит и от дизайна, контента, программной составляющей, но связующее звено, которое позволяет донести до посетителя идею сайта — это все же вёрстка, что бы про неё ни говорили.

Вот понравилось бы вам проводить время на сайте, который очень долго загружается? Вряд ли. А понравился ли бы сайт, у которого всё «разъезжается», и непонятно, где верх, где низ? Не думаю, что вы стали бы искать на нём какую-то информацию — скорее, вы бы закрыли вкладку браузера и навсегда распрощались бы с таким сайтом.

2. Удобство программисту.
Какими бы гордыми и «независимыми» ни были программисты, а работать им приходится не только с базами данных, но ещё и с результатом нашей работы, то есть — вёрсткой. И (о, Боже) удивительное дело — чем качественнее вёрстка, тем больше времени экономит программист, тем быстрее идёт настройка «внутренностей» сайта, тем приятнее и легче работать с ним.

3. Хм... Нас не находят поисковые системы...
Действительно, с чего бы вдруг? Теперь взглянем на разметку... О, нет, здесь же нет никакой семантики! Как так?

Так, может, основы СЕО закладываются ещё на этапе вёрстки?

4. А мы вот ещё хотим, чтобы поисковые находили не только наш сайт, но и наши телефоны, адреса и т.п.
Что здесь сможет сделать дизайнер? Ничего. Его работа — привлечь внимание людей. Что сможет сделать программист? Тоже ничего. его работа — обеспечить кореектную работу сайта. Так что же, опять вся ответственность ложится на верстальщика? Да, потому что именно на этапе вёрстки (с помощью микроформатов) можно «подружить» поисковики с вашими контактными данными.

И если кто-то до сих пор считает, что легче взять psd-макет и с помощью программки на компьютере нарезать из него html-файл, то всё верно. Но скупой платит дважды.

О валидности

Конечно, как и каждый верстальщик, я стараюсь следовать стандартам w3c, тем паче, что обычно валидность прописывается в одном из пунктов технического задания, но (как, собственно, всегда) есть одно «но».

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

Моё мнение на этот счёт такое: если валидный код будет лаконичен, удобен и страница будет выглядеть так же как макет в фотошопе, то — да, обязательно нужно соблюдать стандарты (то есть, допускать разгильдяйства наподобие перекрёстного закрытия тегов нельзя), однако, если можно найти другие, более простые решения, то валидностью можно пренебречь (не полностью, конечно, только в некоторых местах). При том, обязательно это надо согласовать с ТЗ, ибо, если в нём прописано 100%-ное прохождение валидации, то будь добр — сделай.

Вообще, если говорить отстранённо, то валидность ради валидности — глупость, как мне кажется. Стандарты разрабатывались для того, чтобы код правильно интерпретировался всеми браузерами, однако в наше время 100% валидность не гарантирует полной кроссбраузерности (вспомним пресловутые ие6 и ие7, некоторые старые версии фф и оперы), то есть, получается, что валидность — это, в первую очередь, средство; а когда средство становится целью… ну вы сами помните.