(от 27 июля 2012)
При написании нативного веб-приложения легко начать чувствовать себя богом, способным работать просто с библиотекой работы с DOM (такой как jQuery) и горсткой сервисных плагинов. Вскоре возникает проблема в виде груды вложенных возвратных функций jQuery и разбросанных DOM-элементов без всякой структуры вместо приложения.

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

■ Что такое MVC или, лучше сказать, MV*?

Эти современные библиотеки дают разработчикам простой путь к организации кода, используя вариации паттерна проектирования, известного как MVC (Model-View-Controller). MVC разделяет задачи в приложении на 3 части:

(Статья специалиста по фронтенду и медиатегам Марка Боаса (Mark Boas) от 8 мая 2012. Перевод заключительной части. Начало дало понять, что придётся попотеть, прежде чем освоить всю кухню, а ведь это ещё развивается… Не ждите коротких рецептов.)

Содержание первой части:
■ Типы MIME
  ● Серверная часть
  ● Клиентская часть
■ Заранее узнать тип аудио поможет .canPlayType (наверное)
■ Текущая поддержка кодеков в браузерах
■ Форматы контейнеров и расширения файлов
■ Мы имеем тег <audio> и не боимся его использовать!
■ Буферизация, поиск и интервалы воспроизведения
  ● Атрибут buffered
  ● Объект TimeRanges
    ● Атрибуты seeking и seekable

(Опубликовано на сайте разработчиков 9 августа 2012)
Август стал немного жарче из-за того что зарелизилась библиотека jQuery 1.8! Вы можете брать код из CDN на сайте jQuery:

  code.jquery.com/jquery-1.8.0.min.js (минфицированный и сжатый код — для рабочих версий сайтов)
  code.jquery.com/jquery-1.8.0.js (несжатая библиотека, для отладки)

Как обычно, Google и Microsoft CDNs будут тоже раздавать эти файлы (не спрашивайте нас, когда — мы не знаем!). Если очень хочется, воспользуйтесь нашей копией из jQuery CDN.

Мы не ждем от вас сообщения об ошибках в релиз-версии, так как было несколько бета-версий и релиз-кандидат; у вас было много возможностей для тщательного тестирования (ха-ха, шутка). Мы знаем, что слишком многие из вас ждали финального релиза. Так что теперь нет никаких оснований ждать, и вы можете узнать, нет ли ошибок, о которых сообщалось ранее в багрепортах.
UPD 31.08.2012: jQuery 1.8.1.

Зайдя на домашнюю страницу браузера Firefox about:home (автономная, в самом браузере), обнаружил там неплохую реализацию пылающего огня, сделанную на не очень тяжёлых анимированных спрайтах, под лицензией LGPL (по крайней мере, в стартовом about-home-Fx.js). Не каждый день встретишь качественный огонь на скриптах в браузере. При ближайшем рассмотрении оказалось, что это даже не скрипты, а целиком анимированный CSS. Небольшой скрипт используется только для старта и останова. Используя эту идею и формат, дизайнеры смогут создать свою реализацию огня, дыма или текущей воды.

Поиск по ключевым словам из кода в интернете результата не дал, поэтому, как и с машиной Тьюринга (Гитхаб), тут же возникло желание освободить скрипт и стили от оков случайности и таинственности. То есть, положить его в читаемом и рабочем виде в открытый стабильный источник. Иначе, закончится Олимпиада — и будут все шансы исчезнуть ему из поля зрения. И вот результат:
github.com/spmbt/flame-animate-css-mozilla

(Написано в мае 2012 специалистом по фронтенду и особенно, по медиаформатам, разработчиком нескольких опенсорсных проектов и happyworm.com и отражает современное состояние дел с поддержкой браузерами новых медиатегов и форматов. --прим. перев.)

Это продолжение моей (автора, Марка Боаса) статьи 2009 года "Native Audio in the browser" (англ., и дополненной в октябре 2010 --прим. перев.), которая объясняет основы работы аудио в HTML5. Возможно, стоит почитать сначала её, если вы хотите почувствовать работу тега <audio> и связанного с ним API. (Есть русский перевод, но в варианте от 2009 года.)

Теперь, через 2.5 года, пришло время посмотреть, как идут дела. При том, что многие продвинутые аудио API активно разрабатываются, улучшается воодушевляющая нас нативная браузерная поддержка звука — самое время вернуться в увлекательный мир тега <audio>.

 

13 июля, одновременно с выходом новой версии Firefox, было объявлено о новой версии Firebug (установить) — наиболее продвинутого и признанного отладчика фронтенда. Вместе с тимлидом разработки Jan 'Honza' Odvarko (его блог и прочие статьи о Firebug, где немало интересного) рассмотрим его новые возможности. Это тем более интересно, потому что сам браузер потихоньку набирает силы в отладке, и куда деваться — конкурент Хром подгоняет и обгоняет, и теперь даже вполне достаточно штатных средств отладки — показ и хождение по DOM, например, в 10-й версии уже такое, что для исследования багов аддон Firebug ставить не обязательно, а в 15-й версии обещается отладчик JS, быстрый и не влияющий на производительность страницы, со средствами удалённой отладки (важно для мобильных устройств). По тому же пути идёт Опера. (--прим. перев.).

Позвольте рассказать о новых возможностях вышедшего релиза Firebug 1.10.

В первую очередь, уточним, к каким версиям Firefox относятся последние версии Firebug:
Firefox 5.0 – 13.0 работает с Firebug 1.9,
Firefox 13.0 – 16.0 работает с Firebug 1.10.

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

Иногда об этом удаётся забыть, если размер поля ввода предоставлен в основном удовлетворительный. В 3 браузерах из 5 есть даже место для изменения размеров, которое верстальщик, оглушённый указанием свыше, иногда отключает (textarea{resize: none}). Есть и другие способы затруднить жизнь пользователю. И тогда он уходит берётся за скрипты и стили.

День назад праздновали день рождения Тьюринга, и на сайте Гугла был дудл с джаваскриптовой машинкой Тьюринга. Уже не первый раз поисковик показывает нетривиальные и интересные скрипты, которые потом, после дня празднования, исчезают в небытие. Странно, что на странице всех дудлов о них есть немного слов, но нет работающих моделей, как, например, по рассматриваемому дудлу машины Тьюринга (UPD4 (26.06.2012, 5:20) — по этой ссылке появился живой скрипт, можно играть; но обфусцированный ещё сильнее, чем был на странице). Возможно, они где-то есть, но поиск в интернете не привёл к результату. Такое своевольное поведение стихии интернета начало надоедать, поэтому вчера я без особого напряжения и старания, но решил извлечь работающий код и попытаться им управлять.

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

У нас и в США 23 июня 2012 года ещё не наступило, но Гугл знает будущее, поэтому в Австралии на странице Гугла уже начал работать дудл с анимированной джаваскриптовой машинкой Тьюринга по случаю 100-летия со дня рождения её изобретателя — Алана Тьюринга.



Говорят, лучше 1 раз увидеть, но ещё лучше — 1 раз попользоваться. Для этого посетим австралийский сайт Гугла. У нас 20 часов вечера (MSK, = +4h GMT), а в Австралии, в Мельбурне-Сиднее даты приходят на 6 часов раньше — 2 часа ночи следующего дня. Следовательно, по полному праву там уже вовсю отмечается юбилей и натужно трудятся машины Тьюринга.

Вперёд, в будущее на +6 часов!, www.google.ru, www.google.ca
Видео "How to solve the ALAN TURING Google Doodle"

Решение рассматривается (пока) только для одного сайта — того, на котором мы находимся. Идея появилась в результате того, что один пользователь сделал юзерскрипт, который переадресует страницу на кеш Гугла, если вместо статьи видим «Доступ к публикации закрыт». Понятно, что это решение будет работать лишь частично, но полного решения пока не существует. Можно повысить вероятность нахождения копии выбором результата из нескольких сервисов. Этим стал заниматься скрипт HabrAjax (наряду с 3 десятками других функций). Теперь (с версии 0.859), если пользователь увидел полупустую страницу, с которой можно перейти лишь на главную, в личную страницу автора (если повезёт) и назад, юзерскрипт предоставляет несколько альтернативных ссылок, в которых можно попытаться найти потерю. И тут начинается самое интересное, потому что ни один сервис не заточен на качественное архивирование одного сайта.

Периодически мы обозреваем разные расширения (аддоны) к браузерам. Есть стиль обзора — рассмотреть всё (*), есть стиль — задать тон комментаторам (*), есть обзоры с рассмотрением аддонов для веб-разработки (*), (*). Чтобы не распыляться на всё, рассмотрим только те аддоны, которые управляют внешним видом и интерфейсом браузера. Несмотря на ограничение, это — нужная для всех и весьма обширная группа аддонов. Её легко расклассифицировать по областям действия. Каждый элемент интерфейса требует тщательной разработки и сопровождения, поэтому нет единого аддона, включающего в себя всё, что может захотеться (но и этим пытаются заниматься создатели Тем). Каждый разработчик аддона занимается частью интерфейса, а выбрав несколько аддонов, мы получаем настроенную «под себя» конфигурацию окна. В конце статьи — один из вариантов получившегося вида браузера, а в середине — ссылка на подборку из 15 аддонов, расположенную на сайте Мозиллы, с помощью которых подобное получается.

Поначалу введение кнопок, заметно выпадающих из дизайна по своим размерам, встретила массу осуждений в топике, посвящённом обновлению сайта 22 мая. Представитель Хабра Boomburum вполне с этим согласен и предлагает дизайн кнопки отправлять ему на личное сообщение. Однако, красивость одного решения, которое созрело в течение дня, предлагаю оценить всем.

Картинка для привлечения внимания:

По следам предыдущей статьи, которая была чуть более месяца назад, о количестве скачиваний юзерскрипта для сайта habr.ru, появилось ещё одно интересное явление, которое заслуживает рассмотрения. Если предполагать, что никакой накрутки нет, то его можно объяснить только масс-эффектом — влиянием большого числа — показателя скачиваний на ещё более быстрый рост этого числа.

В ближайшие месяца три будет реализован следующий этап переформатирования сайта Хабра в более удобочитаемый вид, с учётом всех актуальных требований к работе с контентом. Первый этап был и есть — эксперименты со стилями ZenComment и скриптами HabrAjax. (Внимание, проект НЕ связан с администрацией Хабра или какой-либо её программой.) Опыт показал, что при условиях частой смены вёрстки и невозможности влиять на исходную вёрстку сайта, результаты будут привязаны к исходной вёрстке, переделка будет стоить больших усилий, а усилия будут обесцениваться частыми нововведениями.

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

Модуль — это независимый плагин, который может работать без основного скрипта. История данного Кармавьюера начинается с 23 марта 2010 — автор Atilla написал скрипт показа кармы по наведению мыши на имя пользователя. К этому времени существовали другие 2-3 реализации показа кармы и одна — даже с изменением без захода на страницу. Скачать кармавьюер.
HabrAjax

К вопросу о том, нужно ли вводить коэффициенты тематики статей, чтобы Хабр более соответствовал той идее, с которой он приобрёл популярность.

Сегодня, вечером пятницы (после которой будет ещё один рабочий день, поэтому не совсем пятница, но всё же) имеем такую картину популярности статей на Хабре, с комментариями по типу статей:
Лучшее за 24 часа (17:00 MSK)

• ВКонтакте ддосит antigate.com — скандальный факт
• Мегафон вмешивается в трафик до юзера — скандальный факт
• Раскрытие IP-адреса пользователя Skype — скандальный факт, но напрямую относящийся к информ. безопасности
• Пробовали набрать Zerg Rush в гугле? — развлечение, пятница
• Внутренности jQuery. Поиск кода, выполняемого по событию — наконец-то, первое тематическое сочинение

В Хроме и Хромиуме уже 2.5 года существует баг отсутствия кроссдоменного доступа к другому фрейму из контекстного скрипта (юзерскрипта). То, что нормально работает в скрипте обычной страницы, например, межсайтовая передача данных с помощью postMessage и что без проблем работает в других браузерах, в Хроме иногда считается «ограничением безопасности», но на самом деле это обычный и признанный баг, отмеченный с 4-й версии.

Обновление. Как известно, раньше потоки статей и вопросов-ответов существовали раздельно, а теперь авторизованные пользователи могут использовать вкладку «Всё» для просмотра смеси заголовков тех и других потоков. С юзерскриптом HabrAjax новой версии 0.85, от 25 апреля возможно смотреть не только заголовки, но и содержание без перезагрузки страниц. Достаточно кликнуть по заголовку или по кнопке ответов. Просмотрев статью, вопрос или комментарии к ним, по широкой кнопке «Свернуть» сворачиваем просмотренное.

Необходимые переделки затронули и ZenComment — юзерстили для Хабра.

В связи с дополнениями сайта, связанными с кнопкой «Гугл плюс», по которой читатель может опубликовать ссылку и комментарий статьи с Хабра на своём аккаунте Гугла, понадобилось дополнить логику показа кнопок в юзерскрипте. Он, как известно, до сих пор показывал кнопку лайков (Гугл-плюс-один).

Одновременно эти кнопки Гугла — лайк и шаринг — немного избыточны, хотя выполняют разные функции. По новой кнопке сайта читатель может быстро написать отзыв (поле ввода — высотой не более 7 строчек, рассчитано на небольшие комментарии), к которому прикреплены ссылка и 2 строчки начала статьи.