В связи с тем, что на Хабрахабре не нашёл я описания данного простого и в то же время удобного способа создания простых «тултипов» — всплывающих подсказок, я решил о нём написать.
В данном методе не будет использоваться JS, мы довольствуемся лишь CSS3 и HTML5.

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

Пожалуйста, обратите внимание, что эти примеры будут корректно работать только в современных браузерах, которые поддерживают свойства CSS3.

Поисковый гигант сегодня в рамках Google Initiative представил новый инструмент Go Mo, назначение которого — проанализировать «дружелюбность» (friendly) сайта для отображения на мобильных устройствах.

Разработчики сервиса утверждают, что около 60% пользователей не вернутся на сайт, который по тем или иным причинам отображается неправильно на экране смартфона или планшета, а учитывая распространение этих устройств в мире, то лишать себя хотя бы части этой аудитории будет, как минимум, неосмотрительно.

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

Также есть возможность оценить примеры «хороших» сайтов, которые авторы GoMo поcчитали удовлетворяющими выдвинутым требованиям.

Видео для оценки возможностей Go Mo:



[Источник]

Мы снова приветствуем вас на волнах Changelog FM, и сегодня у нас в студии — Ajenti 0.6.0.

Привет всем. Сегодняшний пост будет коротким, но, думается мне, полезным.
Часто приходится слышать о том, как сделать «затухание» текста к низу, верху и т.д.
Есть варианты на js, есть варианты с картинкой и просто css-градиентом наложенными поверх текста.
Сегодня в голову пришел несколько другой подход к решению этой проблемы.
Его реализация проста как три копейки

Доброго времени суток, Хабр!

Хотел бы рассказать Вам, каким образом я добился плавной смены цветов иконок при наведении на них курсора. Подобная проблема часто встречается на Facebook. Если иконка представляет собой синий силуэт на белом фоне, то при наведении курсора оба цвета меняются местами, причём происходит это мгновенно и выглядит немного резко. Мои эстетические чувства были задеты, и я разработал своё решение.

Не встретив на просторах Интернета чего-либо подобного, я взял на себя ответственность назвать этот метод SITH (Soft Image Transition on :Hover) — плавный переход изображения при наведении.



Под хабракатом Вы найдёте полное описание техники, весь код, несколько скриншотов и ссылку на демонстрационную версию.

Так уж получилось, что на работе для получения полноценного интернета без ограничений, мне приходиться использовать нетбук и 3g-модем. Недавно, купив iPod Touch, я очень захотел его подключить к интернету. Если смартфон еще мог вылезти в интернет самостоятельно, то вот с плеером несколько труднее.

Один из вариантов — это подключение с помощью кабеля синхронизации. Вариант не очень удобный, так как носить с собой постоянно кабель желания совершенно нет, да и iTunes ставить тоже не хочеться. Второй вариант, тот который и описывается в данной статье — это подключение через WiFi. На Хабрахабре уже упоминалась похожая задача и её решение, но для Linux. Наша задача настроить тоже самое под Windows.

Итак, что мы имеем

— Нетбук, ASUS 1215B
— Интернет через USB 3g-модем
— Плеер и смартфон с наличием WiFi

Задача

— Получить на всех устройствах интернет

Итак, у вас есть чистая Ubuntu, в консоли открыто ssh-соединение с сервером и консоль вас заманчиво приглашает — «root@my-awesome-host:~#» — и больше ничего нет. А хочется запустить и показать всему миру какое-то рельсовое приложение. Поехали от супа до орехов.

При использовании свойств box-shadow или border-radius непосредственно на изображении, браузеры могут некорректно отображать заданные нами CSS стили, из-за чего внешний вид блока будет существенно отличаться от задуманного. Однако если использовать изображение в качестве фона, то этой проблемы можно запросто избежать. Из статьи вы узнаете, как с помощью jQuery сделать идеально закругленные углы у изображений, а так же какие еще способы оформления возможны с помощью таких свойств как box-shadow, border-radius и transition.

С ходом времени автор понял, что ниженаписанное — полная глупость

Для тех, кому не хочется читать

Страничка, на которой всё нижепроделанное в примере (включайте alert).
Онлайн плеер, который и заставил меня дойти до этого топика.

Введение

Доброго времени суток! Не так давно затронул тему «Онлайн-плееров» и им подобных. Их много, очень я бы сказал. Я захотел сделать аналог, в первую очередь для себя. Захотел по стандарту — база vk.com, скробблинг last.fm (позже ласт), альбомы с него же, плейлисты, сердечки и так далее. Сразу вытекла проблема — мой хостинг очень плох для постоянных запросов на него. Ничего не оставалось, как перейти почти полностью на javascript (позже js). Итак, коль русского описания «Как работать с last.fm api javascript» я так и не нашёл, а потратил много нервов и времени на решение этой проблемы, то начнём, пожалуй.

Не так давно я задался вопросом, как же можно сделать так, чтобы страницы загружались с помощью 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);
	});

Приветствую.
Когда перед мной встал вопрос о переходе с phpmyadmin на любой другой клиент, поддерживающий ssh туннели, я перепробовал много что. Остановился на sqlyog`е. Помимо более менее понятного интерфейса, он умел синхронизировать структуры баз данных. И в общем мирился со всеми его странностями и неудобствами. Однако столкнувшись с тем, что для timestamp полей он ставит по дефолту не «DEFAULT CURRENT_TIMESTAMP», а «DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP» и при этом постоянно врёт, что это просто «DEFAULT CURRENT_TIMESTAMP» (т.е. визуально ON UPDATE нигде не отображает), моё терпение лопнуло. В поисках нового клиента, я открыл для себя гениальное, необычное, удобное и простое решение — HeidiSQL.

Много камней было брошено в адрес MySQL, ввиду отсутствия возможности трассировки сессий и снятия stats pack отчетов, показывающих какие именно события нагружают базу данных. Начиная с версии 5.5 MySQL наконец-то озадачился необходимостью решения данной проблемы и выставил прототип, который в будущем, возможно, приведет к созданию аналогичных инструментов в MySQL. Сегодняшний мой рассказ будет о таком мощном (к сожалению пока только для разработчиков MySQL) инструменте как PERFORMANCE_SCHEMA. Итак выставляем performance_schema=ON в конфигурационном файле my.cnf, и приступаем к изучению её ограниченных, но уже крайне интересных возможностей.

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

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

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

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

Уважаемые хабровчане, представляю вам вольный перевод статьи Avoiding common HTML5 mistakes. Здесь мы рассмотрим частые ошибки в HTML5 разметке с точки зрения семантики, и как их избежать.

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

С версии 0.8.46 в nginx появились опции, позволяющие легко и просто настроить прозрачное кэширование для анонимных пользователей.

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

В 2002 году Марк Ньюхаус (Mark Newhouse) опубликовал статью «Укрощение списков» ("Taming Lists"), довольно-таки интересную часть которой он посвятил объяснению того, как создавать собственные списки, украшенные псевдо-элементами. Почти десять лет спустя Николас Галлахер (Nicolas Gallagher) изобрел технику, которая использует псевдо-элементы из спрайтов, для создания фоновых изображений.
Сегондя, основываясь на опыте гигантов, мы постараемся развить эту тему. Мы обсудим, как можно украсить элементы без дополнительной разметки, используя только технику CSS-спрайтов. Результат будет работать также в Internet Explorer 6 и 7 версии.

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

Вступление

Proxmox Virtual Environment (Proxmox VE) — система виртуализации с открытым исходным кодом, основанная на Debian GNU/Linux. Разрабатывается австрийской фирмой Proxmox Server Solutions GmbH, спонсируемой Internet Foundation Austria.
В качестве гипервизоров использует KVM и OpenVZ. Соответственно, способна выполнять любые поддерживаемые KVM ОС (Linux, *BSD, Windows и другие) с минимальными потерями производительности и Linux без потерь.
Управление виртуальными машинами и администрирование самого сервера производятся через веб-интерфейс либо через стандартный интерфейс командной строки Linux.
Для создаваемых виртуальных машин доступно множество опций: используемый гипервизор, тип хранилища (файл образа или LVM), тип эмулируемой дисковой подсистемы (IDE, SCSI или VirtIO), тип эмулируемой сетевой карты, количество доступных процессоров и другие.
ru.wikipedia.org/wiki/Proxmox_Virtual_Environment