Новый код выглядит вот так:

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);

(function() {
 var ga = document.createElement('script');
 ga.src = ('https:' == document.location.protocol ? 'https://ssl' :
   'http://www') + '.google-analytics.com/ga.js';
 ga.setAttribute('async', 'true');
 document.documentElement.firstChild.appendChild(ga);
})();

Это значит, что гугл.аналитикс больше не замедлит загрузку вашего сайта :)
UPD: То есть, он скачивал свой 24кб ga.js во время загрузки страницы, теперь он это может делать после…
Но после первой загрузки, он обычно закэширован и на всех остальных сайтах используется один и тот же :)

Материалы по теме:

• UserGide
• Как переехать со старого кода

15 примеров хорошего мобильного веб-сайта

Мы отобрали 15 примеров правильных веб-сайтов для мобильных устройств. Число пользователей мобильных устройств превышает число пользователей, подключающихся со своих компьютеров, и ясно, что будущее за мобильностью.

Интересный сервис ninite.com позволяет с легкостью создавать пакетный инсталлятор для ваших приложений. Сервис подойдет тем, кто не хочет бродить по сайтам в поисках множества повседневных программ, допустим, после переустановки системы, а так же кто не хочет заморачиваться со сложными приложениями для создания пакетных инсталяторов.
Надеюсь многим пригодится. Подробности под катом.

Преамбула

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

Сегодня, вместо того чтобы в очередной раз написать о том, как и что написать (каламбур), предлагаю поговорить о том в чем писать и какие утилиты использовать, а именно софт, который делает нашу работу легче.
У каждого есть свои предпочтения и привычки в использовании софта, я начну со своих, условно поделив их на несколько категорий, а вы продолжите. Всегда интересно посмотреть кто с чем работает. Начнем.

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

Недостатки:
   1) (основной) развёрнутый на полный экран флеш-ролик фильма (или анимации) сворачивается при потере фокуса окном. Например, стоит заглянуть в ICQ, Скайп на другом мониторе, в другое окно браузера, запустить или перейти в другую программу — развёрнутый флеш беспощадно сворачивается в прежние размеры;
   2) (тоже неприятное свойство) при разворачивании в полное окно флеш-ролик с упорством робота повторяет одну и ту же фразу в течение 3-4 секунд, мешая просмотру: «Press Esc to exit full screen mode», забывая, что у пользователей тоже есть память.
   Результат приведён в виде нескольких правил для ручного патча и в виде архива пропатченных файлов библиотеки флеш-плеера текущей версии 10.1.85.3.
   Даже если у вас один монитор, второй патч и в этом случае будет полезен.

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

Load average может представлять собой непростой для понимания показатель производительности сервера. В этой статье мы попытаемся дать некоторое представление о том, что означают те величины, которые можно найти в выводе команды «top» и в других linux-командах. В статье, также объясняются параметры специфичные для виртуального хостинга, которые обычно не отображается в стандартном выводе команды top.

Существует несколько JavaScript-хаков, которыми постоянно пользуются опытные программисты. Они не совсем очевидны, особенно для новичков. Эти хаки используют возможности языка, имеющие некоторые побочные эффекты. В этой статье я объясню, как работают 5 таких распространённых хаков.

19 сентября в Екатеринбурге прошла конференция сообщества фронтенд-разработчиков.

Ниже представлены видео-записи докладов.

Как сделать Инстаграм в браузере (Дмитрий Дудин, xbSoftware)

• достоинства и недостатки Canvas, WebGl, SVG и CSS-фильтров и шейдеров;
• неизведанный мир SVG-фильтров, его продуманные до мелочей устои, синтаксис и правила;
• возможности обработки изображений — от простых чёрно-белых картинок до нелинейных искажений и градиентных карт.

Всем привет! Меня зовут Сергей Татаринцев. В Яндексе я работаю в группе разработки общих интерфейсов. Наша группа занимается созданием интерфейсных библиотек, используемых во многих сервисах, — в том числе в Поиске. Мы поддерживаем четыре библиотеки, которые в общей сложности включают в себя 62 блока.

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



Мы решили, что дальше так жить нельзя и решили процесс тестирования как-то автоматизировать. Начали мы с инструментов статического анализа. Для проверки стиля кода у нас используется инструмент jscs, написанный нашим коллегой Маратом Дулиным. Для статического анализа кода применяется всем известный JSHint. А для отлова регрессий в JS мы пишем юнит-тесты. Это в какой-то мере помогло справиться с проблемой: анализаторы отлавливали совсем уж глупые ошибки, а тесты позволили проверять функциональность блока. А вот с регрессиями в CSS был пробел. Тестирование внешнего вида по-прежнему проводилось руками и глазами тестировщика. Мы стали искать инструменты, которые помогали бы нам в автоматизации.

Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости

Эта заметка навеяна мелькавшими последнее время на хабре постами двух тематик — «интересные команды unix» и «как я подбирал программиста». И описываемые там команды, конечно, местами интересные, но редко практически полезные, а выясняется, что реально полезным инструментарием мы пользоваться и не умеем.
Небольшое лирическое отступление:
Года три назад меня попросили провести собеседование с претендентами на должность unix-сисадмина. На двух крупнейших на тот момент фриланс-биржах на вакансию откликнулись восемь претендентов, двое из которых входили в ТОП-5 рейтинга этих бирж. Я никогда не требую от админов знания наизусть конфигов и считаю, что нужный софт всегда освоится, если есть желание читать, логика в действиях и умение правильно пользоваться инструментарием системы. Посему для начала претендентам были даны две задачки, примерно такого плана:
— поместить задание в крон, которое будет выполняться в каждый чётный час и в 3 часа;
— распечатать из файла /var/run/dmesg.boot информацию о процессоре.

К моему удивлению никто из претендентов с обоими вопросами не справился. Двое, в принципе, не знали о существовании grep.



Поэтому… Лето… Пятница… Перед шашлыками немного поговорим о grep.

Недавно рынок e-commerce CMS пополнился новым продуктом от ReadyScript lab. Система обладает рядом уникальных особенностей, о которых мы расскажем в этом посте.

Недавно на Coursera произошло примечательное событие — вышла дублированная версия курса «Финансовые Рынки» (Financial Markets) о самых азах финансов.



И примечательно оно потому как раньше дублированных курсов на платформе не существовало, а первый появился именно на русском языке. Во-вторых, сделано это было на частное пожертвование. И в-третьих, курс прочитал профессор Йельского университета, нобелевский лауреат по экономике 2013 года – Роберт Шиллер.

Привет Хабр!

Изначально хотел назвать статью «HTML по ГОСТ`у», но потом выяснилось что у большинства программистов не было предмета «Метрология и стандартизация» и о «стандартизации», «сертификации», «унификации» не все слышали.

В i-Free я много занимаюсь разработкой веб-приложений. А поскольку их много, они разные и работают в разных условиях, то само собой приходится задумываться о стандартизации. Есть такой проект «Пуленепробиваемый HTML5» (http://html5boilerplate.com/), в котором разработчики решили создать идеальный шаблон странички. Он мне очень нравился, и все свои проекты я начинал именно с него. Но, исправляя баг за багом, делая все новые и новые приложения, я пришел к выводу, что многого в нем не хватает. В этой статье я хотел бы рассказать о том, что обычно пропускают при написание страничек и веб-приложений и показать, чем и зачем я прокачал свой шаблон пустой странички.

Недавно написал одно приложение для собственного удобства, и сначала не хотел о нем рассказывать. Потом подумал, что оно может пригодиться кому-то еще. По сути это сервис для планирования автомобильных маршрутов, собранный из готовых компонентов google maps api. Это — клон Google Maps Engine, однако без досадных ограничений последнего. Бесплатный, опенсурсный, чистый фронтэнд без сервера, код выложен на github.

Демо

Рады представить первый выпуск «Самого интересного из мира веб-дизайна». Мы постараемся делать такие выпуски регулярно. В сегодняшнем выпуске мы поговорим про дизайн как таковой: 1) Что должен знать дизайнер об отступах в заголовках; 2) Как иконка прелоадера влияет на наше отношение к сервису; 3) Азы адаптивного дизайна; 4) Использование «Photoshop Generator» для создания прототипов; 5) Руководство по стилю от Yelp. Расскажем о новых интересных и красивых сервисах: 1) Генератор случайных пользователей; 2) Сервис Peek. Видео-отзыв о сайте от реального человека; 3) Recordit.co. Сервис для записи скринкастов; 4) Peekcalendar. Карманный календарь. Покажем, что нового, у всем известных ребят: 1) Iconfinder. Версия 5.0; 2) Новый Ted.com 2.0

---

Что должен знать дизайнер об отступах в заголовках

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

http://artgorbunov.ru/bb/soviet/20140224/

Во время работы над последним проектом накопилось несколько интересных CSS-трюков, о которых хочу рассказать. Хотя, возможно, это уже придумано до нас и все об этом уже знают. В примерах используется LESS, а не чистый CSS.

Событие автоподстановки в инпут поля

Проблема: узнать, что пользователь воспользовался функцией автоподстановки. Задача была в том, чтобы подсвечивать кнопку Login, если в полях e-mail и password введено что-либо. Проблема в том, что если эти поля заполняются автоподстановкой из ключницы браузера, то событие change на инпутах не выстреливает.

Решение: использовать псевдокласс :valid. Он срабатывает у инпута, если в нем есть контент, который удовлетворяет типу инпута (text, e-mail) и если у этого инпута стоит атрибут required. Правда решение не работает в IE, но нам не требуется поддержка этого браузера.

<input required="required" class="email-input" type="email" />
<input required="required" class="password-input" type="password"/>
<div class="go">Login</div>

.email-input:valid ~  .password-input:valid ~ .go {
	//стили для активной кнопки Login
}

Ни для кого, думаю, не секрет, что touch-устройства обрабатывают «мышиные» события несколько иначе, не так, как это происходит на десктоп-браузерах…

Самый яркий для меня пример, это обработка псевдокласса :hover. Для начала iOS7, например, не будет реагировать на hover если только на элемент, или его родителя, не навешена обработка события click. Это хорошо видно вот на этом примере: jsfiddle.net/H8EmG — сколько не тыкай пальцем в текст — никаких подчеркиваний не увидишь. А в этом примере jsfiddle.net/H8EmG/1 «тычок» пальцем в текст будет приводить к его подчеркиванию. Интересный факт — пока не ткнем в другой элемент, текст так и будет сидеть под ховером…

Другой интересный пример, это обработка появления элементов «по-наведению»: jsfiddle.net/ASRm9/1 Попробуйте нажать на текст. Сперва вы увидите текст «HOVER!», появившийся внутри строки, а вот второе нажатие уже вызовет alert('click'). Это происходит потому, что iOS понимает что за :hover что-то скрыто, и старается не сломать поведение, заложенное автором сайта.

Но однажды мы столкнулись с такой багой, объяснить которую мы не смогли до сих пор, а на ее локализацию потребовался не один день отладки на iPad… Желающие подробностей, а также хитрого, как мне кажется, способа решения, наверное, всех проблем с :hover разом — прошу под кат…

Альтернативное название статьи – «почти :child-count(n)». Потому что именно так оно все и работает. На голом CSS и без каких-либо дата-атрибутов или чего-либо еще в верстке.

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

Конечно же, если у вас четыре элемента, а третий вы сделали во всю ширину – последний будет свешиваться в конце. Поэтому нужно применять такую красивую и бесполезную вещь только в том случае, если количество элементов кратно трем. А если их нечетное число(но не кратное трем) — нужно делать, например, последний элемент во всю шинину.
Вот так, например: