В данной статье я хочу поделиться с вами некоторыми экспериментами по созданию анимированных кнопок при помощи CSS3. Идея заключается в создании анимированных ссылок с разными стилями, hover-эффектами и пр.

В данных примерах используются иконки с webiconset.com, а также шрифт от Just Be Nice.

Мы рассмотрим каждый пример и разберем как выглядит их HTML-структура и стили для разных состояний кнопок.

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

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

Я разрабатываю проект на модульной системе, написанной одним питерским програмистом. Достаточное время уже стоит вопрос о рейтинговой системе для этой CMS. Универсальной, ориентированной не только на блоги, но и на другие типы сайтов, где основной контент — не обязательно записи блога (а, например, фото-сайты или сообщества и т.д.). Речь пойдёт о накрутках, виртуалах, потенциальных социальных уязвимостях рейтинговых систем. Суть проблемы описана под катом.

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

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

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

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

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



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

Если вы запускаете новый сайт и заканчиваете его оформление, то есть смысл посмотреть коллекцию Subtle Patterns: отлично оформленную коллекцию фоновых текстур (паттернов) под лицензией Creative Commons Attribution 3.0 Unported. Их можно использовать без ограничений.



Сайт привлекает удобным предварительным просмотром: каждую текстуру можно мгновенно применить на всей странице в качестве фона. Сейчас там 93 работы, коллекция еженедельно пополняется отличными новинками.

Все текстуры на сайте Subtle Patterns являются повторяющимися, то есть склеиваются в бесшовную заливку.

Неспособность рассуждать о коде

«Рассуждать о коде» значит понимать порядок исполнения инструкций («исполнять программу в голове»), зная, каково предназначение кода.

Симптомы

• Наличие «волшебного», «вуду» кода или кода, который не имеет никакого отношения к целям программы, но всё равно тщательно поддерживается (например, инициализация переменных, которые никогда не используются, вызов функций, не имеющих отношения к цели, создание выходных данных, которые не используются, и т.д.).
• Многократные вызовы идемпотентных функций (например, вызов save() по нескольку раз, «чтобы уж точно»).
• Исправление ошибок написанием избыточного кода, который замещает данные, полученные при исполнении неисправного кода.
• «Йо-йо код», который конвертирует значения в различные представления, а потом конвертирует их обратно ровно в то же представление, с которого начинали (например, преобразование десятичного числа в строку, а потом обратно в десятичное число, или padding строчки с последующим trim'ом).
• «Бульдозерный код», который создает впечатление рефакторинга посредством разбития кусков кода на процедуры, которые, правда, затем невозможно использовать где-либо еще (высокая когезия).

Введение

В жизни любого крупного веб-проекта, особенно на PHP, но, в целом, это касается любого серверного ЯП, пригодного для веб-разработки, обычно наступает понимание, что «так дальше жить нельзя», и что настал момент, когда нужно провести оптимизацию работы сайта, чтобы он перестал тормозить (хотя бы на production).

Интересно, что, как правило, даже тяжелые фреймворки (вроде Symfony или RoR) на «медленных» языках, в production-окружении работают достаточно сносно по скорости, а основные «тормоза» вызываются SQL-запросами и неграмотным кешированием (к примеру, инициализация достаточно сложной и большой конфигурации проекта на Symfony занимает около 80 мс, а времена исполнения страницы, при этом, иногда достигают секунды и более).

Если вы смогли определить, что это — ваш случай, и ваш проект на MySQL, то эта статья может вам помочь принять конкретные меры и исправлению ситуации с закреплением результата и предотвращением возникновения откровенных проблем с СУБД впоследствии.

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

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

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

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

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

Недавно я наткнулся на замечательную технику, позволяющую устранить эту проблему, ею я и хочу с вами любезно поделиться.

При реализации одного из проектов на Yii framework у меня возникла задача сделать регистрацию и авторизацию пользователей через сторонние сервисы (Google, Facebook, Twitter, etc).

У данной задачи есть два пути решения:

• Использовать сервис авторизации, например Loginza;
• Реализовывать функции авторизации самостоятельно для каждого сервиса.

UPDATE: Актуальная версия и инструкция по настройке доступны на github.com. Инструкция в данной статье подходит для EAuth версии <= 1.1.3.

Всё. На этом можно было бы статью закончить, так как эта аксиома повторяется из года в год на форумах и конференциях и кочует из текста в текст на всех технических ресурсах. Однако это ёмкое «Всё» не поясняет деталей. Ведь существует достаточно широкая прослойка программистов, движки и проекты которых справляются с задачей без мемкеша и шардинга. Но момент нагрузки приходит, и приходится разбираться.
Для таких людей я и разобрал на запчасти это универсальный ответ высоконагруженных проектов.
Ограничимся изучением системы для веба. Попросту говоря, на привычном обычном сайте. Используете ли вы готовую CMS, или уже выросли до каркаса, или написали «с нуля» код для нестандартного проекта – основными элементами процесса приёма-отдачи данных всегда будут одни и те же узлы. Я их рассмотрю с точки зрения «Где что можно закешировать».

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

Вступление окончено, переходим к советам!

Этот материал продолжает серию ежемесячных обзоров свежих статей по теме интерфейсов, новых инструментов и коллекций паттернов, интересных кейсов и исторических рассказов. Из лент нескольких сотен тематических подписок отбирается примерно 5% стоящих публикаций, которыми интересно поделиться. Предыдущие материалы: апрель 2010-июль 2011.

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

Почти год назад, в ноябре 2010, у меня появилось желание сделать обучающее видео по созданию сайта на MODx Evolution. Не прошло и полугода, как прошел год и я с удовольствием могу показать вам свое творение. Так как длинное видео это не формат Хабра, я сделал короткий тизер под названием «Сайт на MODx за 5 минут», а под катом полное видео.



Специально для тех, кто заинтересовался или не успевает так быстро усваивать информацию — под катом полное видео (30 минут) о том, как установить и настроить MODx, подготовить шаблон к интеграции в MODx, интегрировать и получить готовый сайт. И все это я подробно объясняю.

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

Созданый Райаном Далем в 2009 году, Node.js — относительно новая технология, завоевавшая в последнее время большую популярность среди веб-разработчиков. Однако, до сих пор не каждый знает, что на самом деле Node.js это серверная JavaScript среда, использующая асинхронную событийную модель. Что это означает? Все просто: это среда, которая предназначена для написания масштабируемых, высокопроизводительных приложений. Почти как Ruby’s Event Machine или Python’s Twisted, но гораздо глубже — JavaScript реализовывает цикл событий, на уровне самого языка, а не как отдельная библиотека.



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

1. Верстка, аутсорсинг и технические задания

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

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

Приветствую уважаемое хабросообщество!

В предыдущей публикации я рассказывал о своем бесплатном видеокурсе по Kohana 3 для начинающих, где опубликовал первые 15 видеоуроков.

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

Основываясь на знаниях, полученных из видеокурса, слушатель сможет самостоятельно запрограммировать функционал довольно сложного интернет-проекта.

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