Вчера задался себе таким вопросом: как можно обезопасить мой профиль в Google Chrome и вообще все данные, которые в нем хранятся? Немножко погуглив, я нашел ссылки на кучу расширений (типа этого), которые позволяют устанавливать пароль как на браузер так и на отдельные его профиле (это логично, если знать как работает Chrome в режиме мультипрофильности). Я начал их устанавливать и сразу тесты на баги. И как оказалось ни один из них не хочет адекватно работать в режиме мультипрофильности. Не очень-то долго думая я решил написать собственное расширение и заодно разобраться в Google Chrome API.

В текущем проекте возникла необходимость выполнить последовательную серию ajax запросов и, по завершении — что-то сделать со всеми их результатами.
Довольно типовая задача, паттерн ее решения обычно называют waterfall (водопад). Реализации этого паттерна есть для node.js, хотя некоторые работают и в браузере — async.
Но включать целый модуль ради одного метода не хотелось. Copy/paste тоже не стал делать, но по соображениям скорее эстетическим. В async в метод передается функция обратного вызова, у нас же везде используется jQuery.Deferred. Разницы, конечно, никакой, но «ломать» стиль проекта мое «чувство прекрасного» мне не позволило :)
В результате написал небольшую утилитку по аналогии с jQuery.when

TryGit — интерактивный обучающий курс по Github в стиле Codecademy. Курс состоит из 25 мини-уроков, которые знакомят пользователя с базовыми понятиями и основными командами git, при этом ученик своими руками вводит команды в консоль, смотрит результат и читает сопровождающие надписи с объяснением происходящего.



Вот таким в будущем должно стать обучение в школах!

Конечно, 15-минутное введение не заменит полноценного учебника. Для обучения можно рекомендовать бесплатную книгу Pro Git и видеокурс Getting Git.

В этом уроке мы будем создавать видео плеер, для этого будем использовать CSS3 для моделирования и библиотеку «MediaElement.js» для функциональности. MediaElement.js это HTML5 аудио и видео плеер, который работает в старых браузерах имитируя MediaElement HTML5 API с помощью Flash и Silverlight.

Демонстрационный вариант
Исходные файлы

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

Несколько лет назад произошло весьма значимое событие в истории кинематографа и движения за свободное распространение информации — Hanna Sköld сняла первый в мире полнометражный фильм, распространяющийся на условиях лицензии CC-BY-NC-SA («вирусная» лицензия Creative Commons, запрещающая коммерческое использование) — Nasty Old People.

Тот фильм был снят на частный кредит на сумму 10 000 евро, взятый в банке. Кредит уже удалось отдать — 7500 евро было получено от шведского телевидения (это меньше, чем этот канал обычно платит за шведские фильмы, но всё равно приличная сумма), и примерно столько же дали пожертвования.

Но на этот раз у Ханны более серьёзные планы — она снимает ещё более масштабный фильм. Он называется «Granny’s Dancing on the Table» и на него требуется 50 тысяч долларов. Деньги она собирает с помощью Kickstarter. Попросту говоря, это означает, что если 1 июня нужная сумма будет собрана, то она будет списана с тех, кто вложился. Если будет собрано меньше, чем нужная сумма — то финансирование проекта отменяется (то есть никто не потеряет деньги, если не наберётся достаточно). На данный момент вложено $6 688.

Ханна планирует выпустить фильм одновременно в кинотеатрах и бесплатно, для свободного скачивания, в Интернете.

Любителям шрифта Cuprum настала пора сугубо возрадоваться: его автор, даровитый и плодовитый дизайнер-шрифтовик Иван Гладких, более известный как Джованни Лемонад (Jovanny Lemonad), сегодня выпустил переработанную и существенно дополненную версию своего детища. Вместо одного прежнего начертания Cuprum теперь наделён четырьмя!

Мы начали наблюдать много экспериментов над CSS3 анимацией и статьи о ней в 2011-м, но тогда поддержка этой анимации была ограничена браузерами на вебките. В середине 2011-го Firefox 5 тоже получил эту поддержку, а также мы можем ожидать ее в следующей реинкарнации Internet Explorer (10), поэтому сейчас идеальное время, чтобы разобраться с синтаксисом @keyframes (покадровой анимации). Этот пост предлагает краткий обзор 10-ти статей, в которых объясняется, как использовать это клевое CSS3 свойство, с примерами и демками.

По умолчанию в Google Analytics отслеживать взаимодействие посетителей с контентом сайта довольно просто. Используя стандартный код отслеживания, вы сможете получать различную информацию такую как: время проведённое посетителем на странице (time on site), показатель отказов (bounce rate) и количество просмотров (pageviews).

Но иногда этих данных может быть недостаточно. Например, для блогеров или сайтов, где статьи и различные публикации основной контент, этих метрик может не хватать.

Мы хотим получать более детальную информацию по каждому сообщению или статье. Читают ли люди комментарии или только сообщение, статью? Открывают ли они во вкладках несколько сообщений?
Каким способом лучше получать детальную информацию о том как посетители сайта взаимодействуют с каждой страницей?

Эта статья о том, как измерить степень взаимодействия с контентом при помощи кастомизированного кода отслеживания Google Analytics (далее GA).

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

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

Сегодня начал верстать очередной сайт и по привычке пошел на www.yaml.de, чтобы скачать самую свежую версию моего любимого CSS-фремворка и… не узнал внешний вид сайта.

Оказывается вышла новая версия, которая по прежнему осталась очень компактной (ядро 4.6 kB) и обеспечивает хорошую поддержку браузеров

09.01.2012 в «Smashing Magazine» была опубликована подборка бесплатных шрифтов.

В подборке представлены такие шрифты как: Homestead, Bree Serif, Levanderia, Valencia, Nomed Font, Carton.

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

P.S. Для того чтобы скачать шрифт установите 0 (ноль) в поле «Amount».

UPD: Smashing Magazine сново онлайн.

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

Обычно для того, чтобы разместить такой ротатор на своем сайте достаточно установить специальный javascript-код. Если разбираться глубже, то задачей этого javascript-а является встраивание на Вашу страницу специального iframe, который уже и загружает ротатор баннеров на Вашу страницу с сайта разработчика.

Все бы ничего, но у данного подхода есть несколько недостатков:

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

Не так давно я задался вопросом, как же можно сделать так, чтобы страницы загружались с помощью ajax скрипта, как вконтакте и при этом были проиндексированы поисковыми машинами.

Данный скрипт я сделал на основе JS фреймворка jQuery (перейти на сайт) и плагина HashChange (перейти на страницу плагина).

Первое, что я сделал это — подключил скрипты на странице и написал функцию которая будет отслеживать изменение хеша страницы:

Подключение скриптов:

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/hashchange.js"></script>

Функция:

	$jQuery = jQuery.noConflict();
	$jQuery(window).hashchange(function(){
		var link = window.location.hash.replace("#", "");
		get_page_by_hash(link);
	});

Знаете ли вы, что с помощью jQuery можно загружать не только контент страницы, но и выбранного контейнера на ней? Оказывается можно и делается это следующим образом:

$("#area").load("something.html #content");

Данный код найдет на странице something.html контейнер с id content, возьмет его содержимое и загрузит в контейнер с id area. Но есть одно но…

Судя по комментариям в этой статье, создание веб-приложений с возможностью аякс-навигации является интересной для сообщества темой и пока еще немногие сталкивались с подобной задачей. Я расскажу о ее решении с помощью небольшой библиотеки под названием jQuery-Pjax (либо моего форка ее).

Моя мотивация: в проекте нужно было реализовать mp3-плеер, играющий независимо от навигации на сайте. Далее потребовалось добавить поддержку браузеров без pushState — и я сделал форк библиотеки.

Основные особенности

• навигация по сайту и обработка форм без полной перезагрузки страниц
• чистые url, доступные для прямого доступа
• поддержка #!/hash для устаревших браузеров (добавлено в моей версии)
• работа с кнопками «назад» и вперед» для современных браузеров
• а теперь и для старых — благодаря benalman.com/projects/jquery-hashchange-plugin
• похоже, есть проблемы с ИЕ7 (спасибо Nc_Soft) (тем более, большое спасибо за участие Nc_Soft) и, возможно, opera 11.5 (пока не могу подтвердить, но нахожу крайне удивительным из-за dev.opera.com/articles/view/introducing-the-html5-history-api) — сообщение artishok — проверено и работает на сборке 1074 (not_ice)
• imsamurai (https://github.com/imsamurai) предложил улучшения библиотеки (и я радостью слил изменения): встроенная функция для отправки форм, улучшения работы с хешами и более развитая система триггеров. (у imsamurai, к сожалению, нет аккаунта на хабре — будем рады помощи)

Ссылки

• jQuery Pjax github.com/defunkt/jquery-pjax
• мой форк с поддержкой хеш-навигации github.com/ckald/jquery-pjax
• работа библиотеки на примере моего проекта amsterdamusic.com.ua
• пример от создателя pjax.heroku.com

Принцип работы Pjax

Лучший способ изучить иностранный язык — слушать тех, кто его хорошо знает. Так же и учиться программированию лучше всего, наблюдая за работой опытных профессионалов. В обоих случаях желательно погрузиться в учёбу с головой, на 24 часа в сутки. Такова идея будущего видеоканала CastingCode.tv. Тут будут постоянно транслировать скринкасты разработчиков в прямом эфире. Можно наблюдать, как они пишут код: какие программы, какие «горячие клавиши» используют, с какой скоростью печатают, как часто ищут совета в Google, как вообще у них организовано рабочее время и т.д. В общем, настоящее круглосуточное реалити-шоу для гиков.



К сожалению, проект ещё не начал работу, так что нельзя оценить его реальную пользу. Остаётся надеяться, что на CastingCode.tv будет больше свежих материалов, чем на ShowMeDo, а он не будет брать абонентскую плату, как PeepCode и Destroy All Software.

В некоторых случаях абсолютно бессмысленно и неоправданно нагружать как клиентскую часть веб-приложения, так и серверную. Чтобы не ходить долго вокруг да около, приведу пример из жизни. От разработчика мне достался один интернет-магазин, в котором работа с корзиной происходила следующим образом. При клике на кнопку добавления товара в cookie сохранялись ID товара и его количество. Соответственно, чтобы при посещении различных страниц пользователю показывалось, что находится в корзине, в каком количестве, сколько это добро стоит и прочие данные, серверному приложению приходилось выполнять следующие функции:

1. получение списка ID товаров из cookie;
2. запрос в БД, из которой возвращалось название товара, его стоимость и прочие необходимые данные;
3. использование шаблонизатора (Smarty) для генерирование блока корзины на ряду с генерацией остального содержимого.

Все вроде бы и ничего. Я думаю, многие с подобными схемами сталкивались и не раз. Но передо мной стояла задача оптимизации приложения, и я решил убрать среди прочего лишнюю нагрузку с сервера путем устранения как запросов в БД, так и генерацией блока корзины. Хотелось бы хранить все данные о выбранных товарах на стороне клиента. Причем, в идеале хотелось хранить не только массив выбранных товаров, но и уже готовый HTML-код блока корзины, кроме того, таблицу с товарами для страницы оформления заказа. Но как это сделать?

При наличии большого количества статистических данных, например таких, как котировки валют (и прочие данные, связанные с финансовой тематикой), потребление чего-либо (воды и т.д.), вообще говоря, любых данных, которые так или иначе можно представить в виде пары «дата — значение», бывает удобно представить их в графическом виде. Так как данные могут быть собраны за достаточно большой период времени, имеет смысле представлять их в виде пары графиков: «мастер»-график, на котором будут отображены все точки, и график «детали», где будут отображены точки за требуемый период. В данной статье я постараюсь рассказать, как построить график подобного типа при помощи стандартных средств библиотек HighCharts и jQuery UI.

Приведенное ниже решение, в принципе, является велосипедом, т.к. с появлением нового продукта от разработчиков HighCharts, который получил название HighStock, необходимость в реализации подобным способом отпадает. Впрочем, HighStock пока еще в состоянии beta.