Javascript без марафонов

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

К тому времени я уже успел начитаться манов и даже попробовал посмотреть видео-уроки, но каждый раз выполнять банальнейшие задачки для закрепления знаний быстро надоело. Нужно было что-то написать на чистом javascript и желательно, чтобы оно хотя бы мне было полезным. Тут же подумал о вытягивании оригиналов изображений альбомов с вконтакте, но там есть API и после нескольких часов решил, что изобретать велосипед с костылями вместо спиц — отчаянная затея. Да и изучение затянулось бы, не говоря уже о забитой ненужными вещами голове.
Утро обычно начинается с чтения Хабра и по доброй традиции была открыта интересная статья с обилием ответов к комментариям и дурацкими картинками для привлечения внимания. Небольшой хаос в комментах сразу же предложил идею группировки ответов с отображением их количества (ответов). А КДПВ с рекламными блоками очень хотелось убрать, так как они мешали чтению.
Первым делом представил себе логику работу своей хотелки и разделил ее на функциональные блоки. Определил сложность блоков после того, как для каждого определил его задачи. Также определил общий для всех блоков функционал — создание кнопки-триггера и объявление свойств в css для требуемых элементов. Решено было начать с того, что проще и поможет лучше усвоить знакомые вещи — парсинг DOM-а и работа со стилями для уничтожения картинок с рекламными блоками. Не буду лукавить — это было довольно легко.
Дальше настал период небольшого хардкора — как научиться корректно работать с дочерними элементами и соблюдать условия. Был гугл и пара глупых вопросов на stackoverflow (за один мне до сих пор стыдно, лучше бы ночью не писал ничего). А потом разбор — почему именно так и можно ли сделать лучше. А в итоге — научился скрывать ответы к каждому комментарию, учитывать комментарии без ответов и показывать число ответов для каждого комментария.
Создание расширения для хрома и сафари — довольная тривиальная задача и отлично описана в официальной документации, поэтому на этом внимание акцентировать не буду.
А вот с сайтом была интересная ситуация — хотелось определять user-agent и при загрузке отдавать пользователю расширение именно для его браузера. В итоге был выбран такой костыль на jquery:

var userAgent = navigator.userAgent.toLowerCase(); 
$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase()); 

// Это Chrome?
if($.browser.chrome){
  userAgent = userAgent.substring(userAgent.indexOf('chrome/') +7);
  userAgent = userAgent.substring(0,userAgent.indexOf('.'));
  $.browser.version = userAgent;
  // Если да, то jquery все еще думает, что это сафари и мы должны явно указать
  $.browser.safari = false;
  var downloadUrl = "http://some.url/download.crx";
  setTimeout("window.location.assign('" + downloadUrl + "');", 1000);
}

// Это Safari?
if($.browser.safari){
  userAgent = userAgent.substring(userAgent.indexOf('version/') +8);
  userAgent = userAgent.substring(0,userAgent.indexOf('.'));
  $.browser.version = userAgent;
  var downloadUrl = "http://some.url/download.safariextz";
  setTimeout("window.location.assign('" + downloadUrl + "');", 1000);
}

Что в сухом остатке:

• сразу перешел к той части, которая меня интересовала больше, оказалась сложнее и позволила закрепить ранее полученные знания;
• продолжил изучение javascript, упорядочивая фрагментированность новых открытий изучением их зависимостей;
• сделал полезную штуку и, надеюсь, не только для себя.

Все изложенное не означает, что я бросил обучение привычными способами. Лишь решил сделать процесс увлекательным и чем-то полезным.
Критика и помощь в развитии плагина очень приветствуются, а за остальным вэлкам на http://lite.glebcha.ru ^[1] :)

ПС: мопед не мой, по этому все лучи добра посылать в сторону glebcha ^[2]

Автор: KorP

Источник ^[3]