<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
<channel>
	<title>Хабрахабр / JavaScript / Захабренные</title>
	<link>http://habrahabr.ru/rss/blog/javascript/</link>
	<description><![CDATA[Захабренные посты из блога «JavaScript» на Хабрахабре]]></description>
	<language>ru</language>
	<managingEditor>editor@habrahabr.ru</managingEditor>
	<generator>habrahabr.ru</generator>
	<pubDate>Fri, 10 Feb 2012 18:44:17 GMT</pubDate>
	<lastBuildDate></lastBuildDate>
	<image>
		<link>http://habrahabr.ru/</link>
		<url>http://habrahabr.ru/i/logo.gif</url>
		<title>Хабрахабр</title>
	</image>
	
		
		
	<item>		
		<title><![CDATA[JavaScript / JavaScript|HTML Preprocessor]]></title>
		<guid isPermaLink="true">http://habrahabr.ru/blogs/javascript/137870/</guid>
		<link>http://habrahabr.ru/blogs/javascript/137870/</link>			
		<description><![CDATA[<h4>Здравствуйте, дорогие друзья!<br/>
</h4><br/>
В один чудесный день в один чудесный час возникла острейшая необходимость в JS|HTML препроцессоре и как обычно поиск готового решения не увенчался успехом, везде чего-то не хватало (не было глобальных переменных, вставки строк, замены строк, импорта и т.п.). Ну и поскольку я суровый якутский парень, то выход был один — сделать все самому. Ну? что ж, результат моего труда я решил выложить на мнение комьюнити.<br/>
<div class="habracut"> <a class="habracut" href="http://habrahabr.ru/blogs/javascript/137870/#habracut">Читать дальше &rarr;</a> </div>]]></description>
		
		<pubDate>Thu, 09 Feb 2012 06:12:31 GMT</pubDate>
		<author>Ganesh</author>
		<category>JavaScript</category><category>HTML</category><category>Preprocessor</category>
	</item>
	
	
	
	
	
	

		
	<item>		
		<title><![CDATA[JavaScript / Обновление информации в фоне]]></title>
		<guid isPermaLink="true">http://habrahabr.ru/blogs/javascript/137863/</guid>
		<link>http://habrahabr.ru/blogs/javascript/137863/</link>			
		<description><![CDATA[Всем добрый день.<br/>
<br/>
Раздумывая над вопросом фонового обновления информации, мне пришла в голову одна идея. <br/>
<br/>
Суть задачи — мы находимся на странице списка новостей. Необходимо обновлять список по мере поступления новых новостей. Серверный язык PHP<div class="habracut"> <a class="habracut" href="http://habrahabr.ru/blogs/javascript/137863/#habracut">Читать дальше &rarr;</a> </div>]]></description>
		
		<pubDate>Wed, 08 Feb 2012 19:09:56 GMT</pubDate>
		<author>zim32</author>
		<category>javascript</category><category>cache</category><category>polling</category>
	</item>
	
	
	
	
	
	

		
	<item>		
		<title><![CDATA[JavaScript / Simplify.js — JavaScript-библиотека для упрощения ломаных линий]]></title>
		<guid isPermaLink="true">http://habrahabr.ru/blogs/javascript/137852/</guid>
		<link>http://habrahabr.ru/blogs/javascript/137852/</link>			
		<description><![CDATA[Рад представить вашему вниманию еще одну крохотную, но полезную open-source-утилиту своего авторства — <a href="http://mourner.github.com/simplify-js/">Simplify.js</a>.<br/>
<br/>
<img src="http://mourner.github.com/simplify-js/website/images/screenshot.png"/><br/>
<br/>
<a href="http://mourner.github.com/simplify-js/">Simplify.js</a> — очень быстрая реализация упрощения ломаных линий на JavaScript. Изначально написав ее для <a href="http://leaflet.cloudmade.com">Leaflet</a> (библиотеки для интерактивных карт), после небольшого эксперимента по оптимизации захотелось выпустить ее в качестве отдельной библиотеки без зависимостей, которую можно использовать как в браузере, так и на серверных платформах, таких, как Node.js, и применять и для 2D, и для 3D-точек.<br/>
<br/>
Подобное упрощение позволяет на несколько порядков уменьшить количество точек в ломаной линии (например, представляющей длинный маршрут на карте или график), при этом максимально сохранив ее очертания (с заданной точностью). Соответственно резко уменьшается занимаемый линией размер памяти и время, требуемое для ее обработки. <br/>
<br/>
<div class="habracut"> <a class="habracut" href="http://habrahabr.ru/blogs/javascript/137852/#habracut">Читать дальше &rarr;</a> </div>]]></description>
		
		<pubDate>Wed, 08 Feb 2012 14:27:24 GMT</pubDate>
		<author>Mourner</author>
		<category>javascript</category><category>библиотека</category><category>математика</category><category>геометрия</category><category>упрощение</category><category>кривые</category><category>линии</category><category>open source</category>
	</item>
	
	
	
	
	
	

		
	<item>		
		<title><![CDATA[JavaScript / «Лапша» из callback-ов — будьте проще]]></title>
		<guid isPermaLink="true">http://habrahabr.ru/blogs/javascript/137818/</guid>
		<link>http://habrahabr.ru/blogs/javascript/137818/</link>			
		<description><![CDATA[<em>По следам недавних топиков, а также постоянных рассказов в стиле «мой стартап не взлетел, потому что его зохавала лапша из callback-ов».</em><br/>
<br/>
Как раз недавно я закончил небольшой проект (ссылку не даю, чтобы не заподозрили — кому надо см. профиль), полностью и на всех этапах написанном только на JS, и притом полностью асинхронный. Разумеется, я столкнулся с пресловутой проблемой «лапши». И, вы не поверите, совершенно спокойно решил её без всяких там фреймворков и хитрых приемов.<br/>
<br/>
Итак, допустим, у нас есть задача: асинхронно выбрать из базы количество книг, потом асинхронно же выбрать из базы нужную пачку книг, потом асинхронно же выбрать из базы метаданные по книгам, а потом свести всё это в один dataset и отрендерить шаблон. Как это обычно выглядит?<br/>
<br/>
<div class="habracut"> <a class="habracut" href="http://habrahabr.ru/blogs/javascript/137818/#habracut">Читать дальше &rarr;</a> </div>]]></description>
		
		<pubDate>Wed, 08 Feb 2012 05:18:47 GMT</pubDate>
		<author>forgotten</author>
		<category>javascript</category><category>node.js</category><category>лапша</category><category>нет велосипедам</category>
	</item>
	
	
	
	
	
	

		
	<item>		
		<title><![CDATA[JavaScript / Видео: Антон Кекс. Асинхронное программирование с Node.js]]></title>
		<guid isPermaLink="true">http://habrahabr.ru/blogs/javascript/137812/</guid>
		<link>http://habrahabr.ru/blogs/javascript/137812/</link>			
		<description><![CDATA[<a href="http://nodejs.org/">Node.js</a> – платформа для построения быстрых масштабируемых server-side приложений на JavaScript. Вопреки распространённому отношению к JavaScript как к “несерьёзному” языку, Node.js позволяет писать вполне серьёзные вещи. Node.js – это разруливамая событиями, не блокирующая I/O модель, что делает её легковесной и эффективной. Идеально подходит для приложений, нагруженных данными.<br/>
<br/>
О Node.js <a href="http://habrahabr.ru/blogs/nodejs/132745/">уже писали</a> на хабре, а в этом видео Антон Кекс рассказывает о Node.js, попутно рассказывая про опыт использования в некоторых реальных проектах.<br/>
<br/>
<a href="http://www.devclub.eu/2012/02/03/anton-keks-nodejs/">www.devclub.eu/2012/02/03/anton-keks-nodejs/</a>]]></description>
		
		<pubDate>Tue, 07 Feb 2012 23:07:51 GMT</pubDate>
		<author>asolntsev</author>
		<category>node.js</category><category>javascript</category><category>devclub</category>
	</item>
	
	
	
	
	
	

		
	<item>		
		<title><![CDATA[JavaScript / Спагетти в последовательном вызове асинхронных функций. Теория и практика]]></title>
		<guid isPermaLink="true">http://habrahabr.ru/blogs/javascript/137778/</guid>
		<link>http://habrahabr.ru/blogs/javascript/137778/</link>			
		<description><![CDATA[В продолжение статьи <a href="http://habrahabr.ru/blogs/javascript/134823/">Последовательный вызов асинхронных функций</a>.<br/>
<br/>
<h4>Часть 1. Теория</h4><br/>
Большинство традиционных, не-веб языков программирования являются синхронными (блокирующими).<br/>
Как можно определить, синхронный или же асинхронный данный язык? Например, по наличию/отсутствию функции sleep (может называться также delay, pause и т.д.), когда программа полностью останавливается на определённое количество времени.<br/>
<br/>
В JavaScript, как вы знаете, такой функции нет. Есть, например <div class="habracut"> <a class="habracut" href="http://habrahabr.ru/blogs/javascript/137778/#habracut">Читать весь текст</a> </div>]]></description>
		
		<pubDate>Tue, 07 Feb 2012 12:40:33 GMT</pubDate>
		<author>ilyakharlamov</author>
		<category>javascript</category><category>ajax</category><category>jquery</category><category>коллбек</category><category>колбек</category><category>теория</category><category>event loop</category><category>асинхронная загрузка</category><category>асинхронное программирование</category><category>события</category>
	</item>
	
	
	
	
	
	

	
		
	<item>		
		<title><![CDATA[JavaScript / [Из песочницы] Префиксные деревья в Javascript]]></title>
		<guid isPermaLink="true">http://habrahabr.ru/blogs/javascript/137682/</guid>
		<link>http://habrahabr.ru/blogs/javascript/137682/</link>			
		<description><![CDATA[<h5>Как это писалось</h5><br/>
Одним долгим зимним вечером моя жена играла в <a href="http://store.steampowered.com/app/3470">Bookworm adventures</a>, и периодически пинала меня по поводу составления слов подлиннее из имеющихся букв. Быстрый поиск по интернету страничек, позволяющих составлять слова из набора букв дал кучу сайтов, которые пытаются делать это на серверной стороне, и один, который делает это на клиентской ява-апплетом. Те, которые составляют слова мощностями сервера либо имеют ограничение на размер набора букв (обычно, почему-то в 8), либо глубоко задумываются, если им послать набор «abcdefghijklmnopqrstuvwxyz». Ява-апплет же имел ограничение в 12 букв, работал шустро и почти подходил (в игре предлагаются 16 букв для составления слов).<br/>
<div class="habracut"> <a class="habracut" href="http://habrahabr.ru/blogs/javascript/137682/#habracut">Читать дальше &rarr;</a> </div>]]></description>
		
		<pubDate>Mon, 06 Feb 2012 10:44:57 GMT</pubDate>
		<author>andreishe</author>
		<category>javascript</category><category>префиксные деревья</category>
	</item>
	
	
	
	
	

	
		
	<item>		
		<title><![CDATA[JavaScript / [Из песочницы] Javascript. Сортировка таблицы]]></title>
		<guid isPermaLink="true">http://habrahabr.ru/blogs/javascript/137426/</guid>
		<link>http://habrahabr.ru/blogs/javascript/137426/</link>			
		<description><![CDATA[Доброго времени суток, Хабровчане.<br/>
<br/>
Может для большинства здешних обитателей моя статья покажется слишком скучной и «и так понятно», но думаю новичкам будет в чем-то полезной.<br/>
Стояла передо мной как-то задача сделать сортировку таблицы по разным колонкам. Данный брались из базы, каждый раз их вытаскивать — накладно, решил задействовать JavaScript.<br/>
Были небольшие трудности из-за использования различной стилистики строк в таблице, а именно был разный цвет фона, в зависимости от данных самой таблицы.<br/>
Стилистику нарушать было нельзя. Кого заинтересовало, прошу под кат.<br/>
<div class="habracut"> <a class="habracut" href="http://habrahabr.ru/blogs/javascript/137426/#habracut">Читать дальше &rarr;</a> </div>]]></description>
		
		<pubDate>Wed, 01 Feb 2012 14:22:03 GMT</pubDate>
		<author>iLexx_13</author>
		<category>javascript</category><category>сортировка таблицы</category>
	</item>
	
	
	
	
	

		
	<item>		
		<title><![CDATA[JavaScript / Парсер PSD файлов на CoffeeScript]]></title>
		<guid isPermaLink="true">http://habrahabr.ru/blogs/javascript/137379/</guid>
		<link>http://habrahabr.ru/blogs/javascript/137379/</link>			
		<description><![CDATA[<img src="http://habrastorage.org/storage2/d95/102/be6/d95102be6f7acaf758f865089b114a84.png" align="right"/><br/>
Автор скрипта psd.js — Райан Лефевр. Скрипт, как вы уже догадались, умеет открывать photoshop документы, как в браузере, так и на стороне Node.js.<br/>
<br/>
<a href="http://meltingice.github.com/psd.js/">Демонстрация возможностей</a> (ранняя beta, не удивляйтесь, что некоторые файлы не откроются. На github странице проекта многие жалуются на это).<br/>
<br/>
Пример вывода информации на Node.js:<br/>
<pre><code class="javascript">{PSD} = require 'psd.js'
 
psd = PSD.fromFile './path/to/file.psd'
psd.parse()
 
for layer in psd.layerMask.layers
console.log &quot;Layer: #{layer.name}&quot;
console.log &quot;Size: width=#{layer.cols}, height=#{layer.rows}&quot;
console.log &quot;Position: top=#{layer.top}, left=#{layer.left}&quot;
</code></pre><br/>
<div class="habracut"> <a class="habracut" href="http://habrahabr.ru/blogs/javascript/137379/#habracut">Читать дальше &rarr;</a> </div>]]></description>
		
		<pubDate>Tue, 31 Jan 2012 17:54:15 GMT</pubDate>
		<author>omfg</author>
		<category>javascript</category><category>node.js</category><category>psd</category><category>photoshop</category>
	</item>
	
	
	
	
	
	

	
		
	<item>		
		<title><![CDATA[JavaScript / [Из песочницы] Смена изображений]]></title>
		<guid isPermaLink="true">http://habrahabr.ru/blogs/javascript/137343/</guid>
		<link>http://habrahabr.ru/blogs/javascript/137343/</link>			
		<description><![CDATA[Как то раз на просторах интернета наткнулся на одну замечательную галерею — адрес забыл, но идея ее осталась в памяти. И вот на один из сайтов понадобилась какая то нестандартная смена картинок (затухание и сьезжание уже приелись) И вот я вспомнил про нее. <br/>
<br/>
<img src="http://habrastorage.org/storage2/492/eed/a4c/492eeda4cd837c9c0676d509a3ed0df7.jpg"/><br/>
<br/>
Суть в чем? Чтобы изображение открывалось по частям (квадратам, полосам итп.) при чем не просто появлялось а чтоб все это было напичкано эффектами. <br/>
<br/>
Ну чтож, приступим.<br/>
<div class="habracut"> <a class="habracut" href="http://habrahabr.ru/blogs/javascript/137343/#habracut">Читать дальше &rarr;</a> </div>]]></description>
		
		<pubDate>Tue, 31 Jan 2012 10:09:14 GMT</pubDate>
		<author>DOC_tr</author>
		<category>jquery галерея</category>
	</item>
	
	
	
	
	

	
	
	
		
	<item>		
		<title><![CDATA[JavaScript / [Перевод] Почему WAT]]></title>
		<guid isPermaLink="true">http://habrahabr.ru/blogs/javascript/137188/</guid>
		<link>http://habrahabr.ru/blogs/javascript/137188/</link>
		<description><![CDATA[Недавний <a href="https://www.destroyallsoftware.com/talks/wat">доклад Гарри Бернхардта на CodeMash</a> оказался довольно популярен (прим. пер.: в том числе и на <a href="http://habrahabr.ru/blogs/personal/136577/">хабре</a>). В докладе он шутит по поводу некоторых особенностей поведения ruby и javascript.<br/>
Вряд ли я смогу вас убедить, что есть какой-то смысл в том, на что жалуется Гарри. Тем не менее, надеюсь, я смогу вам объяснить, почему javascript ведёт себя именно так.<br/>
<div class="habracut"> <a class="habracut" href="http://habrahabr.ru/blogs/javascript/137188/#habracut">Читать дальше &rarr;</a> </div>]]></description>
		
		<pubDate>Sat, 28 Jan 2012 10:43:24 GMT</pubDate>
		<author>Li0liQ</author>
		<category>javascript</category><category>wat</category>
	</item>
	
	
	

		
	<item>		
		<title><![CDATA[JavaScript / KnockoutJS: сказ о том, как легко принимать или отклонять изменения]]></title>
		<guid isPermaLink="true">http://habrahabr.ru/blogs/javascript/136782/</guid>
		<link>http://habrahabr.ru/blogs/javascript/136782/</link>			
		<description><![CDATA[Довольно часто в пользовательском интерфейсе есть кнопки «Сохранить» и «Отмена». Особенно часто эти кнопки используются в формах. Несмотря на то, что в современном мире всё идёт к упрощению интерфейса, но на эти кнопки всё равно есть спрос.<br/>
<br/>
Сегодня я предлагаю разобраться как с помощью KnockoutJS принимать и откатывать изменения для индивидуальных observables так и целых view models.<br/>
<br/>
Знакомые с KnockoutJS сразу могут выдать две ссылки на лучший блог о сабже<br/>
<ul>
<li><a href="http://www.knockmeout.net/2011/05/creating-smart-dirty-flag-in-knockoutjs.html">Creating smart dirty flag in KnockoutKS</a></li>
<li><a href="http://www.knockmeout.net/2011/03/guard-your-model-accept-or-cancel-edits.html">Guard your model accept or cancel edits</a></li>
</ul><br/>
У этих методов есть как плюсы, так и вполне существенные недостатки, от которых нужно избавлятся. Недостатки с функциональной точки зрения<br/>
<ul>
<li>Dirty flag — не позволяет сохранять изменения, а только сбросить их в начальное состояние.</li>
<li>protectedObservable — никто не видит изменений observable до тех пор, пока не произойдёт commit. Это ограничение сильно удручает при использовании dependent observables, к примеру.</li>
</ul><br/>
Ну и к тому же, они нацелены на индивидуальные observable'ы, а хотелось бы работать с несколькими полями сразу.<br/>
<br/>
Под катом детально разберём процесс создания простого механизма, который сделает работу с принятием и отменой изменений простой и прозрачной.<br/>
<br/>
<div class="habracut"> <a class="habracut" href="http://habrahabr.ru/blogs/javascript/136782/#habracut">Читать дальше &rarr;</a> </div>]]></description>
		
		<pubDate>Wed, 25 Jan 2012 08:48:41 GMT</pubDate>
		<author>Romanych</author>
		<category>knockoutjs</category><category>protectedObservable</category><category>isDirty</category><category>beginEdit</category><category>commit</category><category>rollback</category>
	</item>
	
	
	
	
	
	

		
	<item>		
		<title><![CDATA[JavaScript / Три подхода к методологии построения сложного клиентского приложения]]></title>
		<guid isPermaLink="true">http://habrahabr.ru/blogs/javascript/136886/</guid>
		<link>http://habrahabr.ru/blogs/javascript/136886/</link>			
		<description><![CDATA[Наверно, не существует единого рецепта, который бы всех устроил. Это касается любой проблемы. Для разработчиков этот тезис самоочевиден, и вовлеченность в использование и проектирование отдельных инструментов определяется, главным образом, лишь профессионализмом. Изобретение велосипедов романтично и неизбежно. <br/>
<br/>
Особо вероятно изобретение велосипеда, когда рост сложности приложения происходит постепенно и в некотором смысле незаметно. Сложное приложение обычно является богатым приложением (rich), его элементы и особенности специфицированы W3C <a href="http://www.w3.org/TR/backplane/">www.w3.org/TR/backplane/</a>. Известный JavaScript-евангелист Addy Osmani так дополнительно определяет сложное приложение: “По-моему, крупное JavaScript приложение есть нетривиальное приложение, требующее значительных усилий разработчика для поддержки, причем наиболее сложное оперирование обработкой и отображением данных ложится на браузер” (http://addyosmani.com/largescalejavascript/).<br/>
<div class="habracut"> <a class="habracut" href="http://habrahabr.ru/blogs/javascript/136886/#habracut">Читать дальше &rarr;</a> </div>]]></description>
		
		<pubDate>Tue, 24 Jan 2012 08:05:02 GMT</pubDate>
		<author>ivnC</author>
		<category>javascript</category><category>mvc</category><category>mvvm</category><category>zakas</category><category>разработка приложений</category>
	</item>
	
	
	
	
	
	

	
	
	
		
	<item>		
		<title><![CDATA[JavaScript / [Перевод] Открытое письмо лидерам JS касательно точек с запятой]]></title>
		<guid isPermaLink="true">http://habrahabr.ru/blogs/javascript/136860/</guid>
		<link>http://habrahabr.ru/blogs/javascript/136860/</link>
		<description><![CDATA[Такое письмо я получил от Шона Сильвы прошлой ночью:<br/>
<blockquote>Я просматривал ваш код для проекта npm.js (в частности, вот этот файл: <a href="https://github.com/isaacs/npm/blob/master/lib/npm.js">https://github.com/isaacs/npm/blob/master/lib/npm.js</a>), и заметил, что вы выравниваете запятые под ‘r’ в выражениях var, и под [ и { в литералах массивов/объектов. Мне очень нравится такой способ форматирования, но я не решаюсь его использовать, так как большинство ресурсов о js насаждают страх перед хаосом, который воцарится в коде из-за автоматической расстановки точек с запятой, если вы не будете заканчивать строки чем-нибудь, что предполагает продолжение.<br/>
Безопасно ли располагать запятые таким образом в «браузерном» коде, или это только в node возможно?</blockquote><br/>
Я написал несколько абзацев, и решил сократить их до следующего ответа:<br/>
<blockquote>Да, это полностью безопасно, и это совершенно валидный JS, понимаемый каждым браузером. Closure compiler, yuicompressor, packer, и jsmin — все могут правильно минифицировать его. Производительность нигде не просядет.<br/>
Мне жаль, что вместо того, чтобы обучать вас, лидеры сообщества этого языка прививали вам ложь и страхи. Это позор. Я рекомендую изучить, как на самом деле терминируются инструкции в JS (и в каких случаях они нетерминируемы) — и вы сможете писать код, который сочтете прекрасным.</blockquote><br/>
<div class="habracut"> <a class="habracut" href="http://habrahabr.ru/blogs/javascript/136860/#habracut">Читать дальше &rarr;</a> </div>]]></description>
		
		<pubDate>Mon, 23 Jan 2012 20:01:15 GMT</pubDate>
		<author>k12th</author>
		<category>javascript</category><category>точка с запятой</category>
	</item>
	
	
	

	
		
	<item>		
		<title><![CDATA[JavaScript / [Из песочницы] Kinetic ScrollBar]]></title>
		<guid isPermaLink="true">http://habrahabr.ru/blogs/javascript/136374/</guid>
		<link>http://habrahabr.ru/blogs/javascript/136374/</link>			
		<description><![CDATA[Эффект кинетической прокрутки сейчас можно встретить практически везде. Это действительно удобно при управлении пальцами или стилусом и довольно забавно при прокрутке мышкой.<br/>
<br/>
В вебе такой эффект пока только приживается. Да и не так уж просто придумать, где он будет удобен… В голову приходят пожалуй лишь scroll bar’ы, которые используются для прокрутки некоторого контента, в основном картинок, внутри страницы. Для примера, можно посмотреть реализацию галереи практически на любом сайте. Согласитесь, было бы значительно интереснее, если бы ползунок не останавливался сразу, как только отпустили кнопку мыши, а продолжал бы двигаться дальше по инерции, постепенно останавливаясь…<br/>
Я попытаюсь рассмотреть процесс создания такого эффекта «кинетического» scroll bar’a. Что получилось в итоге можно посмотреть <a href="http://jsfiddle.net/SomeTest/vU7W2/">здесь</a><br/>
<div class="habracut"> <a class="habracut" href="http://habrahabr.ru/blogs/javascript/136374/#habracut">Читать дальше &rarr;</a> </div>]]></description>
		
		<pubDate>Mon, 16 Jan 2012 16:54:02 GMT</pubDate>
		<author>Nodlik</author>
		<category>javascript</category><category>scrollbar</category><category>jquery</category>
	</item>
	
	
	
	
	

		
	<item>		
		<title><![CDATA[JavaScript / Оптимизация JavaScript для ускорения загрузки веб-страниц]]></title>
		<guid isPermaLink="true">http://habrahabr.ru/blogs/javascript/136360/</guid>
		<link>http://habrahabr.ru/blogs/javascript/136360/</link>			
		<description><![CDATA[Инженер из компании Google, автор трёх книг по веб-производительности и оптимизации, Стив Содерс (Steve Souders) опубликовал презентацию <a href="http://www.stevesouders.com/blog/2012/01/13/javascript-performance/">&quot;JavaScript Perfomance&quot;</a> о том, какие методы нужно применять, чтобы скрипты меньше тормозили загрузку страниц.<br/>
<br/>
По статистике <a href="http://www.webpagetest.org/">WebPagetest</a>, блокировка загрузки файлов .js на сайтах из Alexa Top 100 снижает среднее по медиане время загрузки страницы c <a href="http://www.webpagetest.org/result/120111_GR_2TW90/">3,65 с</a> до <a href="http://www.webpagetest.org/result/120111_0P_2TW4Q/">2,487 с</a>, то есть на 31%. Если вы видите медленную загрузку веб-страниц и хотите улучшить этот показатель, то, по мнению Стива Содерса, первым делом нужно посмотреть на JavaScript.<br/>
<div class="habracut"> <a class="habracut" href="http://habrahabr.ru/blogs/javascript/136360/#habracut">Читать дальше &rarr;</a> </div>]]></description>
		
		<pubDate>Mon, 16 Jan 2012 14:55:04 GMT</pubDate>
		<author>alizar</author>
		<category>производительность JavaScript</category><category>время загрузки страницы</category><category>асинхронный скрипт</category><category>insertBefore</category><category>ControlJS</category>
	</item>
	
	
	
	
	
	

		
	<item>		
		<title><![CDATA[JavaScript / Фильтрация текстов по списку регулярных выражений]]></title>
		<guid isPermaLink="true">http://habrahabr.ru/blogs/javascript/136301/</guid>
		<link>http://habrahabr.ru/blogs/javascript/136301/</link>			
		<description><![CDATA[В сборнике скриптов для сайта <a href="http://userscripts.org/scripts/show/121690">HabrAjax</a> 0.79 появилась возможность сворачивания аннотаций в ленте для указанных читателем авторов и по совпадению указанных строк (можно назвать, сворачивающих строк). Например, если читатель хочет выделить произведения некоторого автора, показывая только название статьи в любой ленте (главная, избранное, поиск), он вносит имя автора в специальный список и включает настройку сворачивания. Или — сворачивать аннотации, если в названии или в тексте аннотации встречается некоторая последовательность символов (не слов, а символов). Второй фильтр работает на регулярных выражениях, поэтому читатель фактически задаёт не строки, разделённые запятыми, а тела регулярных выражений, с игнорированием размера букв, но с учётом всех символов и пробелов.<br/>
<div class="habracut"> <a class="habracut" href="http://habrahabr.ru/blogs/javascript/136301/#habracut">Читать дальше &rarr;</a> </div>]]></description>
		
		<pubDate>Mon, 16 Jan 2012 04:15:47 GMT</pubDate>
		<author>spmbt</author>
		<category>регулярные выражения</category><category>фильтр интересов</category><category>habrajax</category>
	</item>
	
	
	
	
	
	

		
	<item>		
		<title><![CDATA[JavaScript / PhantomJS + JSCoverage + QUnit или консольные JS юнит-тесты с подсчетом покрытия]]></title>
		<guid isPermaLink="true">http://habrahabr.ru/blogs/javascript/135979/</guid>
		<link>http://habrahabr.ru/blogs/javascript/135979/</link>			
		<description><![CDATA[Поговорим о случае, когда нужно автоматизировать запуск тестов и сбор статистики покрытия, к примеру, для гипотетической клиентской JS библиотеки. Задача не совсем тривиальна, поскольку для нормальной работы библиотеки требуется полноценный браузер — библиотека является визуальной оберткой над стандартными компонентами формы. Библиотека должна быть написана так, чтобы все взаимодействие с ее объектами можно было производить с помощью методов, которые они предоставляют, а не только через непосредственные манипуляции с DOM (т.е. любое действие юзера может быть запущено не только событием, допустим, клика по чему-то, но и руками через метод). Но тем не менее, надо этот DOM иметь, чтобы результаты работы методов помимо изменения внутреннего состояния объектов также отображались и в DOM. В целом напоминает приложения на Sencha (ExtJS).<br/>
<br/>
Для достижения поставленных целей нужен некий контролируемый браузер, фреймворк для запуска тестов и утилита, которая позволит посчитать покрытие кода тестами, а также некоторый код, который соединит все компоненты.<div class="habracut"> <a class="habracut" href="http://habrahabr.ru/blogs/javascript/135979/#habracut">Читать дальше &rarr;</a> </div>]]></description>
		
		<pubDate>Wed, 11 Jan 2012 15:04:41 GMT</pubDate>
		<author>dfuse</author>
		<category>javascript</category><category>qunit</category><category>jscoverage</category><category>phantomjs</category><category>coverage</category><category>code coverage</category><category>unit testing</category>
	</item>
	
	
	
	
	
	

		
	<item>		
		<title><![CDATA[JavaScript / Backbone Boilerplate]]></title>
		<guid isPermaLink="true">http://habrahabr.ru/blogs/javascript/136027/</guid>
		<link>http://habrahabr.ru/blogs/javascript/136027/</link>			
		<description><![CDATA[Американская компания Bocoup, как и многие другие веб-разработчики, постоянно использует в работе известный «пуленепробиваемый» шаблон для создания HTML5-сайтов <a href="http://html5boilerplate.com/">HTML5 Boilerplate</a>. Однако, сотрудники Bocoup решили не только пользоваться, но внести свой вклад в общее дело и выкатили для всеобщего пользования не менее концептуальную вещь — <a href="https://github.com/tbranyen/backbone-boilerplate">Backbone Boilerplate</a>, набор лучших средств и приёмов для создания приложений Backbone.js.<br/>
<br/>
Прямо из коробки мы получаем:<br/>
<ul>
<li>Backbone, Underscore и jQuery, всё это на базе HTML5 Boilerplate.</li>
<li>Инструмент Windows/Mac/Linux для прекомпиляции шаблонов, связывания и минификации всех библиотек, кода приложения и CSS.</li>
<li>Лёгкий веб-сервер node.js.</li>
<li>Многочисленные сниппеты кода для Backbone, облегчающие жизнь.</li>
</ul>В Backbone Boilerplate логичная и элегантная файловая система (отдельно код, вспомогательные файлы, тесты, билды) и есть возможность создавать собственные классы Models/Collections/Views/Routers внутри модулей. <br/>
<br/>
Разработчики говорят, что проект появился в результате их долгих попыток работать с другими шаблонами: оказалось, что в одних нет процесса сборки, другие налагают излишние ограничения. Новый Backbone Boilerplate призван исправить ситуацию и вполне может стать каноническим, каким стал тот же HTML5 Boilerplate.]]></description>
		
		<pubDate>Wed, 11 Jan 2012 12:55:22 GMT</pubDate>
		<author>alizar</author>
		<category>Backbone Boilerplate</category><category>HTML5 Boilerplate</category><category>backbone.js</category>
	</item>
	
	
	
	
	
	

		
	<item>		
		<title><![CDATA[JavaScript / Простая минималистская реализация сложных JavaScript приложений]]></title>
		<guid isPermaLink="true">http://habrahabr.ru/blogs/javascript/135919/</guid>
		<link>http://habrahabr.ru/blogs/javascript/135919/</link>			
		<description><![CDATA[Я хочу описать простой минималистский подход к разработке сложных JavaScript приложений. Из внешних библиотек будут использоваться только jQuery и мой js-шаблонизатор, причём из jQuery используются только <code>$.ready()</code>, <code>$.ajax()</code> и <code>$.proxy()</code> — т.е. суть не в библиотеках (их тривиально заменить на предпочитаемые вами), а в самом подходе.<br/>
<br/>
В основе подхода лежат две идеи:<br/>
<ol>
<li>JavaScript виджеты — небольшие модули, каждый из которых «владеет» определённой частью веб-странички (т.е. всё управление этой частью странички происходит исключительно через методы этого модуля, а не через прямую модификацию DOM — <b>инкапсуляция</b>). Виджет отвечает исключительно за функциональность, но не за внешний вид; поэтому прямая модификация части DOM, которым «владеет» виджет, снаружи виджета <i>допускается</i> — но только для чисто дизайнерских задач (для архитектуры и общей сложности приложения нет принципиальной разницы между коррекцией внешнего вида через CSS или jQuery).</li>
<li>Глобальный диспетчер событий. Взаимодействие между виджетами осуществляется путём посылки сообщений глобальному диспетчеру (<b>слабая связанность</b>, паттерн <b>Mediator/Посредник</b>), а уже он принимает решение что с этим сообщением делать — создать/удалить виджеты, дёрнуть методы других виджетов, выполнить дизайнерский код, etc. В отличие от динамического подхода к обработке событий (когда обработчики конкретного события добавляются/удаляются в процессе работы) статический диспетчер сильно упрощает понимание и отладку кода. Безусловно, есть задачи, для которых нужны именно динамические обработчики событий, но в большинстве случаев это избыточное усложнение, поэтому всё, что можно, делается статическими обработчиками.</li>
</ol><br/>
<div class="habracut"> <a class="habracut" href="http://habrahabr.ru/blogs/javascript/135919/#habracut">Читать дальше &rarr;</a> </div>]]></description>
		
		<pubDate>Mon, 09 Jan 2012 19:17:58 GMT</pubDate>
		<author>powerman</author>
		<category>javascript</category><category>architecture</category><category>minimalism</category><category>simple</category><category>module</category><category>widget</category><category>application</category><category>large</category><category>scalable</category>
	</item>
	
	
	
	
	
	

	

	
	
	
	
	
</channel>
</rss>

