И снова колонки одинаковой высоты

Необычное, даже, наверное, странное решение извечной проблемы нескольких div'ов  одинаковой высоты без таблиц. Не особо кроссбраузерное (к сожалению, только IE8+), тем не менее, во многих случаях очень полезное.

Колонки на самом деле получаются разной высоты, но при помощи отрицательного margin-bottom и блока-обертки с overflow: hidden; это искусно скрывается и создается впечатление, что они одинаковой высоты.

scrollTwo — jQuery-плагин для плавной прокрутки


На основе решения для плавной прокрутки соорудился маленький jquery-плагинчик, код которого вот:
// Непосредственно сам плагин
(function($){
      $.fn.scrollTwo = function(speed) {
        return $(this).on("click",function(){
         var top_offset = $($(this).attr("href")).offset().top;
         $('html,body').animate({scrollTop: top_offset}, speed || 500);  
         return false;       
        });
      };
})(jQuery);

// Применение
$(".scrolltwo").scrollTwo(200);


Может принимать параметр speed — это скорость прокрутки в миллисекундах. Значение параметра по умолчанию: 500 мс. Умеет прокручивать только по нажатию на якорь, то есть отрабатывает только, если внутристраничная ссылка указывает на id какого-либо элемента на странице.

А вот  плагинчик в работе:

Решение для плавной прокрутки при нажатии на ссылке

Небольшой jquery-снипет, реализующий плавную прокрутку при нажатии на якорь  <a href="#id">якорь</a> к элементу указанному в атрибуте якоря. В общем уплавнение стандартного внутристраничного якоря.

Интересные CSS решения

Собралось тут немного интересных решений различных ситуаций на css и не только.

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



Стандартное прибивание футера к низу страницы.




Простенький jquery-плагинчик для табов с примером разметки и стилей:




Плавающие блоки разной высоты, например, для списка товаров в интернет-магазине:




Вертикальное выравнивание блока или блок по центру страницы (ie6+):




Очень классное решение стилизации флажков (checkbox) и радиокнопок (radio) без javascript.
Но к сожалению основан на использовании псевдоклассов из css3-спецификации, поэтому не работает в старых браузерах.



И замечательный пример использования псевдокласса :checked для изменения содержимого тега label на лету без javascript

Angrybirds в браузере (без android)

Только что обнаружил, что в приложениях для Google Chrome появилась нашумевшая и популярная игра AngryBirds


Ссылка на Angrybirds в Chrome https://chrome.google.com/webstore/detail/aknpkdffaafgjchaibgeefbgmgeghloj?hl=ru#

Прямая ссылка на AngryBirds http://chrome.angrybirds.com/

Играем в AngryBirds прямо в браузере на компьютере, товарищи.

#3 Одновременно вы можете запомнить только 3-4 вещи (из серии "100 вещей, которые следует знать о людях")


“What makes them click” на русском или “Что заставляет их кликать”
Перевод цикла статей Сюзан Вайншенк (Susan Weinschenk)
100 вещей, которые следует знать о людях (100 Things You Should Know about People)


Статья переведена ранее Виктором Малым в блоге usemenot.com.ua. Для полноты серии переводов привожу здесь ссылку на его перевод.





#2 Вы быстрее читаете длинные строки, но больше любите короткие (из серии "100 вещей, которые следует знать о людях")


“What makes them click” на русском или “Что заставляет их кликать”
Перевод цикла статей Сюзан Вайншенк (Susan Weinschenk)
100 вещей, которые следует знать о людях (100 Things You Should Know about People)

#2 Вы быстрее читаете длинные строки, но больше любите 
короткие (оригинал статьи на английском)

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



Исследования показывают, что оптимальной длиной строки для быстрого чтения с экрана является длина в 100 символов, но такая длина строки не устраивает большинство людей. Пользователи быстрее читают длинные строки (100 символов), но предпочитают - короткие или средние (45 - 72 символа). В качестве примера выше приведена страница из New York Times Reader, длина строки в колонке которого 39 символов.
Исследования так же показывают, что люди могут читать одну широкую колонку текста быстрее чем несколько узких, но предпочитают они именно несколько узких колонок.


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


Так вот в чем, собственно вопрос: предоставлять пользователям то, что их больше устраивает или идти против их предпочтений и интуиции, зная, что они смогут прочитать быстрее более длинные строки текста в одной широкой колонке?


Что бы сделали вы?


(оригинал статьи на английском)

#1 У вас слепота по невнимательности (из серии "100 вещей, которые следует знать о людях")


“What makes them click” на русском или “Что заставляет их кликать”
Перевод цикла статей Сюзан Вайншенк (Susan Weinschenk)
100 вещей, которые следует знать о людях (100 Things You Should Know about People)


#1 У вас слепота по невнимательности. (оригинал на английском)

Я решил перевести на русский язык цикл статей Сюзан Вайншенк под названием “100 вещей, которые следует знать о людях”. Это сотня вещей, которые следует знать, если вы решили разработать дизайн эффективного внушающего доверие сайта, веб-приложения или программного обеспечения. Или просто 100 вещей, которые каждый должен знать о людях!

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

И так, статья #1 - Слепота по невнимательности

"Сперва предлагаю вам пройти небольшой тест, посмотрев следующее видео


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


Что же все это значит для тех, кто занимается, например, дизайном сайтов? А значит это, что  нельзя быть уверенным в том, что люди действительно видят, то что изображено на экране. Особенно это касается моментов, когда вы обновляете страницу отличающуюся от предыдущей только на одну деталь. Люди могут даже не осознать, что они смотрят уже на другую страницу. Запомните, человек не всегда осознает, что в его поле зрения что-то изменилось или произошло."

оригинал статьи на английском

Список видящих (невидящих) в Скайпе | Invisible (visible) list in Skype

В Скайпе таки можно стать невидимым для некоторых (не всех сразу) контактов из контакт-листа.

It is actually possible to become invisible for some (not for all at once) contacts from the contact-list in Skype.

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



To do so it is enough to click with the right mouse button to the contact who is not supposed to see you, and to choose point “Block This Person”. 



А в появившемся окне, не устанавливая никаких галочек, нажать кнопку "Блокировать".



And in the pop-up window to press “Block” button without setting any checkboxes.



И в дальнейшем возле заблокированного контакта будет отображаться красная перечеркнутая иконка.

And further on a red crossed icon will be displayed near the blocked person.



Пользователь, которого вы заблокировали, НЕ УЗНАЕТ о том что его заблокировали, если только вы сами ему об этом не скажете. Единственное отличие этого способа в Скайпе от стандартного понятия списка невидящих - вы не получите сообщения, которые пользователь будет отправлять вам в "оффлайн".

The person you blocked WILL NOT FIND OUT that he was blocked if only you don’t tell him about that. The only difference of this method in Skype from the standard invisible list is that you won’t receive any messages, which the contact will be sending you “offline”.

Инджой.

Enjoy.

Быстрый просмотр (предпросмотр) писем Gmail (Gmail quick view)

В Gmail есть одна очень замечательная функция - предпросмотр (быстрый просмотр) писем.
Ее нужно предварительно включить в "Настройки -> Экспериментальные функции -> Предварительный просмотр сообщения"



И потом оказывается, можно кликнуть по заголовку письма правой кнопкой мыши и откроется всплывающее окно с содержанием письма и функциональными кнопками. (Работает во всех браузерах)

Gmail has one amazing feature – preview of the letters (mail preview). It turns out, you may click on the letter heading with the right mouse button and popup with letter content and functional buttons will open. (It works in all browsers).



TortoiseSVN исчез (пропал) из контекстного меню после обновления

Совсем недавно попытался установить новую версию TortoiseSVN. Скачал установщик, установил, перезагрузился — и не обнаружил иконок TortoiseSVN в контекстном меню.

Оказалось, что такая проблема возникает при установке новой версии поверх старой. И чтобы вернуть иконки на место, необходимо запустить установщик новой версии еще раз и выбрать в диалоговом окне "Repair". Тогда после перезагрузки иконки вернутся на свои места.

TortoiseSVN has gone from context menu after upgrade to new version. To resolve this problem you have to start *.msi installer again and choose "Repair" mode. Reboot windows. 

Удаленная загрузка торрентов и потоковый просмотр видео-торрентов (Remote torrent downloading and streaming torrent-video)

Оказывается для удаленной загрузки торрентов можно использовать не только dropbox, как уже описывалось в предыдущих статьях. Появилась новая версия uTorrent'a (3.0 alpha) - в ней появился новый (старый тоже остался) веб-интерфейс с помощью которого можно из любого места, удаленно (через интернет) управлять своим uTorrent-клиентом установленным на "домашнем" компьютере.

It turns out that for remote torrents downloading you can use not only dropbox, as it has been described in the previous articles. A new version of uTorrent (3.0 alpha) came out – it has a new web-interface (it has the old one as well), which can help you to control your uTorrent-client, installed at your home PC, from any place distantly (through the Internet).



Сам клиент на компьютере работает вроде бы без глюков, в веб интерфейсе-же встречаются всякие кривости иногда, но работать с ним уже вполне можно.
Для этого достаточно зарегистрироваться в настройках uTorrent'а на вкладке "Web".


The client itself at the PC seems to works without bugs, web-interface occasionally has different bugs, but you can quite well work with it. 
For it it is enough to register in the uTorrent settings at the "Web" tab.



И затем (уже с удаленного компьютера) пройти по адресу http://web.utorrent.com/ и ввести там свои логин и пароль. И вы получите доступ к своему торрент-клиенту, который естественно должен быть запущен на "домашнем" компьютере, который в свою очередь должен быть включен.

And then (from a remote PC) to follow the link http://web.utorrent.com/ and to enter your login and password there. And you will get access to your torrent-client, which must be launched naturally at the “home” PC, which in its turn must be switched on.  


Но это еще не все. В новой версии uTorrent есть еще одно значительное нововведение: теперь можно просматривать скачивающиеся (еще не скачанные) видеофайлы. Т. е. реализован потоковый просмотр torrent-файлов. Это значит, что вы можете поставить на закачку новый фильм и не дожидаясь пока он скачается начать его просматривать.
Делается это следующим образом: после того как вы поставили фильм на закачку, необходимо кликнуть по строке с закачивающимся фильмом, и вы увидите кнопку "Prepare stream" прямо в этой строке (в столбце "Playback").


But that is not the end. The new uTorrent version has one more significant introduction: now you can watch the files which are being downloaded (not yet downloaded). And that means that you can start downloading a new movie and start watching it till it has been completely downloaded. 
It is done in the following way: after you started downloading the movie, it is necessary to click at the line with the downloading movie, and you will see the button "Prepare stream" at this very line (in the column "Playback").





Нажимаете эту кнопку и ждете некоторое время (Press this button and wait for a while.)
... до тех пор, пока на ней не будет написано "Stream" (... till it is written "Stream" on it)

После нажатия на эту кнопку запускается установленный в настройках плеер - вроде бы должен подойти любой, но рекомендован VLC-player - и начинается проигрывание видео.

After you press this button the player installed in the settings is launched – any should do, but VLC-player is recommended – and video is being played.




Выбор плеера осуществляется в "Настройки -> Streaming".
You can choose player at "Settings -> Streaming".


Приятного просмотра! Enjoy!

Удаленная загрузка торрентов с помощью Dropbox

Часто случается так, что сидишь на работе - работаешь себе - и тут вдруг заходит разговор о каком нибудь классном новом фильме, который уже вышел. Естественно его хочется посмотреть, причем уже сегодня же вечером. Для этого всего лишь нужно найти торрент с этим фильмом на любимом трекере и поставить удаленно на домашнем компе на закачку.
Оказывается это довольно легко реализовать имея дома включенный компьютер с dropbox-ом и специально настроенным uTorrent-ом. (Читайте также "Удаленная загрузка торрентов без Dropbox")
Давайте по-шагово  произведем настройку всего вместе.

Шаг первый естественно скачиваем и устанавливаем dropbox и регистрируем себе аккаунт если еще не зарегистрировали (а между прочим давно пора).



Шаг два. Естественно качаем uTorrent (говорят что в других торрент-менеджерах тоже есть необходимая нам функция - но я пользовался только uTorrent-ом, посему ничего про другие сказать не могу).



Шаг 3. После стандартных процедур установки, регистрации и настройки скачанных приложений заходим в папку Dropbox-а на компьютере и создаем в ней папку с "говорящим" названием, ну например, "torrents".



Шаг 4. Настройка uTorrenta. Запускаем uTorrent, проходим в "Настройки -> Конфигурация (Ctrl+P) -> Папки" и в самом нижнем поле указываем путь к только что созданной нами папке "torrents" в dropbox-е.


Шаг 5. Теперь все готово. Осталось только найти необходимый фильм, скачать его *.torrent файл и положить его (а вот это уже можно делать удаленно с другого компьютера, или даже телефона подключенного к интернету) через обычный проводник (если на другом компьютере установлен dropbox) или через веб-интерфейс (если "Чужой компьютер") в папочку "torrents" и uTorrent, запущенный на удаленном, предусмотрительно оставленном включенным, компьютере автоматически начнет загрузку вашего фильма. И все как раз скачается к вашему приходу.




Удачи.

Google Tasks iPhone Touch Edition (Chrome Extention)

Extention for Google Chrome. Google Tasks with iPhonetouch-style interface. Very uzfull and good looking.
Расширение для Google Chrome - Задачи Google в iPhone-стиле


Хостинг сайта на собственном компьютере с помощью Dropbox

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

Для этого нужно создать в Dropboxe в папочке Public (только в этой папке можно скопировать Public Link) любую папку например с названием вашего сайта. Или с именем "dropbox" (это я что бы запутать вас слегка, а то уже слишком все просто).
И скопировать в нее все файлы вашего сайта.


А затем нажимаем на главном файле вашего сайта (index.html) правой мышкой и выбираем Dropbox >> Copy Public Link


Все! Теперь смело можно открывать аську, скайп или что там еще и нажимать заветную комбинацию клавиш CTRL+V , чтобы вставить только что полученную ссылку в окно чата и разослать ее всем-всем-всем.

Вот кстати моя: http://dl.dropbox.com/u/8262960/dropbox/index.html

Ссылка конечно не очень красивая, но ее во-первых можно сократить в какой-нибудь сокращалке ссылок, а во-вторых, ну не фэйсбук же мы хостить собрались на домашнем компе. Правильно?

Набор веб-разработчика "5 плюсов". FF + FB + XR + N++ (Zc)


Или "Web-dev Kit FivePlus with Zen-coding" (Набор веб-разработчика "Пять плюсов")
Очень удобная связка программ для верстальщика веб-сайтов (веб-мастера): FireFox, Notepad++ (Zen Coding include), FireBug, XRefrsher.
В этой статье пойдет речь о том как собрать и настроить эту связку для удобной работы.







Как и следует из второй "иллюстрации" редактирование кода в Notepad++ будет "налету" отображаться в Firefox.



То есть не нужно будет постоянно прыгать туда-сюда для обновления страницы и редактирования кода.
Понадобится нам для этого вот что: FireFox, Notepad++, FireBug, XRefrsher, Zen Coding 
Установка ФФ, я думаю, не должна вызвать особых вопросов.  
FireBug качаем по ссылке и устанавливаем как плагин к фаерфоксу, тоже ничего сложного. И уберем из виду "Панель меню" (Меню Вид > Панели Инструментов > [-] Панель меню). Вызвать ее в дальнейшем можно будет по нажатию "Alt".




Notepad++ аналогично скачиваем с официального сайта, устанавливаем и настраиваем под свои нужды. Настоятельно рекомендую установить плагин Zen Coding для Notepad++ разработанный известнейшими веб-разработчиками нашей необъятной: Сергеем Чикуенком, Вадимом Макеевым и Александром Макаровым. Только устанавливайте тот, что можно найти с помощью Plugin Manager из самого N++.
Делает этот плагин приблизительно следующее:


То есть значительно упрощает жизнь верстальщика. И на изображении показана лишь единственная функция, которой хорош плагин. Подробнее обо всех его свойствах и достоинствах ищите в интернетах, обязательно находите, изучайте — и жить станет легче. Разделение вкладок в N++ делается кликом "правой мышки" на вкладке и выбором пункта меню "В другое окно", подробнее об этом уже написано ранее. Также давайте уберем лишние панели: панель инструментов и панель меню, которую чуть-что можно вызвать по нажатию "Alt", в N++, поставив соответствующие галочки в "Опции > Настройки > Общие".



А теперь установим программу которая и свяжет всю скачено-установлено-настроенную ерунду воедино. Называется она XRefresh. Качать необходимо как плагин для Firefox так и XRefresh Window Monitor для Windows. Именно эта программа будет проверять наличие изменений в наших source-файлах и при их наличии обновлять страницу автоматически в фоне через аддон в браузере. Установка плагина к браузеру не должна вызвать затруднений. Разберемся только с его активизацией. После установки плагина и перезагрузки лисы необходимо открыть FireBug, перейти на вновь образовавшуюся вкладку XRefresh и включить панель используя ссылку.



Далее устанавливаем XRefresh Window Monitor для Windows и назначаем в настройках папку проекта (достаточно указать папку всего проекта, либо в которой лежат изменяемые .css и .html файлы).

Теперь осталось подогнать высоты Файерфокса Файербага и Ноутпада++ для комфортной работы. Я бы рекомендовал подогнать высоту Firebug равной высоте Notepad++, а само окно Firefox развернуть. По счастливому стечению обстоятельств у меня при нахождении Ноутпада++ в фокусе и при наведении мыши (без передачи фокуса) на Фаерфокс в Фаерфоксе работает скролл (прокрутка страницы), но за это на всех компьютерах не ручаюсь, возможно дело в дровах для тачпада.




Это был #web-dev.kit +*5 with zen-coding
Спасибо.

Синхронизация истории сообщений QIP (ICQ) с помощью DropBox

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

Для начала нам необходимо скачать дропбокс. Дропбокс (Dropbox) — это довольно полезная и очень простая в обращении программа для синхронизации файлов на разных компьютерах через интеренет. Установив дропбокс на свой компьютер (например, на домашний) Вы получаете на нем (на компьютере) обычную, казалось бы, папку "My Dropbox", в которую можете положить любые файлы. И придя, например, на работу Вы можете установить дропбокс на рабочем компе, зайти под своим логином и паролем и взять из все той же папки "My Dropbox", только уже находящейся на Вашем рабочем компьютере, файлы, которые Вы положили в нее на домашнем. Эдакая общая папка для всех компьютеров на которых установлен дропбокс. Ну да что-то я разогнался, статья ведь не совсем о дропбоксе. Все нужное, важное и интересное можно прочитать на официальном сайте дропбокса, там же и скачать.

После установки дропбокса можно приступать непосредственно к "настройке". И так. Создаем в "My Dropbox" папочку, ну, например, по имени "icq", или "qip", или "history", или еще как душе угодно.



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



Теперь (не забудьте нажать "Ок") вся история Ваших сообщений из всех учетных записей вашего квипа (аська, gtalk, facebook, vkontakte и прочие твиттеры) будет сохраняться в этой папке.

Дальнейшие манипуляции мы будем проводить с другим компьютером, на котором требуется синхронизировать нашу историю (условно будем называть его "рабочий комп"). Скачиваем дропбокс на рабочем компе, устанавливаем и заходит под уже имеющимся логином и паролем. И после некоторого времени (дропбокс синхронизирует все через интернет) у Вас в папке "My Dropbox" на рабочем компе появится та самая заветная папка "icq", которую Вы создали еще на домашнем компе. Ну и теперь, не долго думая, настраиваем QIP аналогично тому как настроили его на домашнем компьютере. Вот собственно и все. Теперь квип хранит всю историю в папке которая синхронизируется автоматически, постоянно, и без особых усилий между двумя или более компами.
Для особо привередливых пользователей, то есть для тех кто не очень-то хочет оставлять на рабочем компьютере на всеобщее обозрение, свою, использующуюся для личных целей на домашнем компьютере, папку "My Dropbox", есть немного другой выход. Дропбокс на рабочем компе вы можете настроить на другой аккаунт (создать еще один), а с домашнего компьютера просто пригласить использовать папку "icq" своем уккаунту на рабочем компе. Делается это очень просто из веб-интерфейса вашего дропбокса.
В дополнение Вы можете настроить аналогичным образом и qip на телефоне (если конечно дропбокс имеется для Вашего телефона (к сожалению пока только для android-ов, iphone-ов и blackberry), что также можно узнать на официальном сайте, на странице dropbox for mobile).

Спасибо за внимание.

vkontakte.ru/ваше_имя

Оказывается во Вконтакте.ру можно изменить адрес своей собственной странички. И тогда будет отображаться не пресловутый http://vkontakte.ru/id64357829 а, например, вот так:



Это очень полезно для... для... для всех, кто любит социальные сети. И делается это следующим образом. Необходимо всего лишь перейти на страничку http://vkontakte.ru/settings.php (это настройки профиля) и найти там пункт "Адрес Вашей страницы"

 



тэг: под пивком

Плеер Яндекс.Музыка в Opera

Сегодня мы сделаем (громко сказано) из Яндекс.Музыки удобный плеер в браузере Opera в боковой панели.
Предварительно, естественно, лучше зарегистрироваться на http://music.yandex.ru

Значит так. Открываем http://music.yandex.ru в Opera



Открываем Панель в Opera (к сожалению под пивком не нашел как она называется) по "F4"



А потом просто-напросто берем и хватаем адрес из адресной строки браузера за иконку и тащим на Панель на свободное место и получаем что-то подобное (естественно, предварительно нажав получившуюся кнопку на Панели и подогнав ширину окошка под, непосредственно, плеер):



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

Аналогичным образом в эту панель можно добавить (как у меня) Gmail c iPhone-интерфейсом. Очень удобный, кстати, и выглядит довольно симпатично.



Такого же плана (с iPhone-интерфейсом) есть Задачи Гугл (google tasks)



Ну еще туда аналогичным образом можно запихнуть мобильную версию любого сайта например
http://mobile.twitter.com/



Тэг: Под пивком

Редактор HTML/CSS Удобная фича notepad++

Оказывается в самом лучшем html-css-редакоре Notepad++ можно очень удобно разместить окна редактируемых в данный момент HTML и CSS файлов.

  


Делается это очень просто. Открываются два файла, правой мышкой кликается по вкладке одного из файлов и выбирается пункт "В другое окно". Получается очень удобно и функционально. Переключение между окнами как и прежде осуществляется по CTRL + TAB.