Задался я как-то целью слепить свою собственную вебовую табличку аккордов с целью рассказать человеку, с чем эти самые аккорды едят.
Да не простую мне хотелось табличку, а фичастую, чтобы она умела:
И вот как я это сделал…
Читать полностью »
На Хабре уже проскальзывали обзоры плагинов для стилизации селекта (раз и два)
Возможно буду заброшен помидорами за изобретение очередного велосипеда, но все текущие реализации меня не устраивали. Да, отличный плагин chosen, но в нем чрезмерное количество ненужного мне функционала. ikSelect, да, почти то что надо, но мне не понравилась генерируемая разметка.
Итак, задача — сделать плагин с блэкджеком и ш… для стилизации селекта, который по максимуму повторяет поведение стандартного. А это навигация с клавиатуры, автоподгонка ширины дропдауна, поддержка optgroup, автокоплит и самое главное полная кастомизация, включая скроллбар*.
Читать полностью »
(По общему совету ShpuntiK, обратил внимание на статью специалиста по фронтенду и особенно, по медиаформатам, разработчика из нескольких опенсорсных проектов и happyworm.com. Статья написана в мае 2012 и отражает современное состояние дел с поддержкой браузерами новых медиатегов и форматов. --прим. перев.)
Это продолжение моей (автора, Марка Боаса --прим. перев.) статьи 2009 года "Native Audio in the browser" (англ., и дополненной в октябре 2010 --прим. перев.), которая объясняет основы работы аудио в HTML5. Возможно, стоит почитать сначала её, если вы хотите почувствовать работу тега <audio> и связанного с ним API.
Теперь, через 2.5 года, пришло время посмотреть, как идут дела. При том, что многие продвинутые аудио API активно разрабатываются, улучшается воодушевляющая нас нативная браузерная поддержка звука — самое время вернуться в увлекательный мир тега <audio>.
Читать полностью »
Grunt — это инструмент для сборки javascript проектов из командной строки с использованием задач. Релиз вышел совсем недавно, автор Ben «Cowboy» Alman, проект есть на gitnub. В этой статье я рассмотрю основы Grunt, его установку и использование.
Читать полностью »
Когда я работал над сервисом заметок jotsky.com, надо было сделать ввод телефонного номера из двух инпутов. Примерно такой:
Я сделал навигацию с помощью стрелочек. Сделал, чтобы по мере заполнения фокус переключался к следующем инпуту. А вот сделать правильную вставку из буфера обмена у меня никак не получалось.
Читать полностью »
Когда я работал над сервисом заметок jotsky.com, надо было сделать ввод телефонного номера из двух инпутов. Примерно такой:
Я сделал навигацию с помощью стрелочек. Сделал, чтобы по мере заполнения фокус переключался к следующем инпуту. А вот сделать правильную вставку из буфера обмена у меня никак не получалось.
Читать полностью »
На днях появилась надобность в таймере для сайта, но как всегда простая задача превратилась в весёлые часы работы.
Конечно, существует уже множество всяких разных таймеров с кучей настроек и плюшек. Но, на мой взгляд, быстрее решить такую достаточно простую задачу самому, чем искать, затем настраивать и разбираться в чужом решении. Так родился simpleTimer.
Читать полностью »
Кажется, что Js — это «просто скриптовый язык» на котором я по-быстрому добавлю нужные фичи на странице, не сильно заботясь о качестве кода. Когда-то это было верным. Даже текущие стандарты Js и Html в целом располагают к этой философии.
Но времена изменились! Теперь на Js создают сложные и запутанные веб-приложения, которые просто не могут не столкнуться с проблемами своих «старших братьев» (серверных приложениях написанных на Java, C# и т.д.). А значит, чтобы не погрязнуть в тысячах строк «спагетти-кода», требуется отказаться от философии «просто скрипт». Нужно воспринимать Js как инструмент, с которым требуется создать сложную, модульную и масштабируемую систему.
В рамках новой философии «серьезного языка, для серьезных задач» я хочу начать цикл небольших статей о мире Js со стороны Java разработчика. Начнем с инструментов и различных шаблонов разработки.
От переводчика: Это перевод заметки товарища по имени Steve Souders, который очень плотно занимается вопросами производительности веб-сайтов и даже написал пару неплохих книг на эту тему.
Вчера я проводил семинар в Google Ventures для некоторых из инвестируемых ими компаний. Я не знал насколько подготовленной в вопросах производительности будет аудитория, так что я сделал обзор вопросов, связанных с производительностью, начиная с первых моих выступлений в 2007 году. Уже несколько лет я не рассказывал о методах улчшения производительности, описаных в моем блоге "High Performance Web Sites". Я прошелся по таким вещам, как Меньше HTTP-запросов, Добавление заголовка Expires и Gzip.
Но мне надо было вернуться еще дальше. Думая о тех временах, когда еще не существовало конференции Velocity и самого понятия WPO, я решил, что должен пояснить почему я занялся именно клиентской оптимизацией. Я нашел слайды, поясняющие «Золотое правило производительности»: 80-90% времени ожидания пользователем занимает работа браузера.
На слайдах были данные по времени отработки сервера и клиента для популярных сайтов, но данные были устаревшими и ограниченными, так что я решил обновить их. Вот, что получилось.
Немного пятничного веселья.
Поля ввода, Textarea, которые молчат, когда с ними ничего не делают, на самом деле хотят расти. Когда объём вводимых текстов превышает их размеры, их тайное желание не всегда слышится дизайнерами и верстальщиками, потому что они уже далеко и думают о новых горизонтах. Оно есть, если прислушаться к кончикам пальцев пользователя, досадливо двигающих скролл мыши.
Иногда об этом удаётся забыть, если размер поля ввода предоставлен в основном удовлетворительный. В 3 браузерах из 5 есть даже место для изменения размеров, которое верстальщик, оглушённый указанием свыше, иногда отключает (textarea{resize: none}). Есть и другие способы затруднить жизнь пользователю. И тогда он уходит берётся за скрипты и стили.
Читать полностью »
