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

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



Картинка кликабельна.

PS: Оригинал на английском здесь. Переводил на русский — не я.

Update: Часть сведений в данной статье устарели. Рекомендую свежие материалы на css-live.ru.

Введение

Модуль CSS3 Grid Layout — это один из самых интересных, на мой взгляд, модулей в семействе CSS3. Официальная история модуля в виде черновика спецификации насчитывает сегодня чуть менее года. О предварительном анонсе еще с названием CSS Grid Alignment на TPAC 2010 Владимир Юнев писал еще в декабре 2010. Надо также отметить, что с чуть другим названием и несколько отличным синтаксисом, но с той же сутью, он был заявлен в качестве WD еще в 2007г. Сегодня работы по доводке модуля идут полным ходом, предварительная реализация уже есть в Internet Explorer 10 и есть надежда, что поддержка новых возможностей также появится в будущих версиях других популярных браузеров.

Зачем нужен Grid Layout?

Задача, которую решает модель CSS3 Grid Layout, очень проста и понятна любому веб-верстальщику (да и не только ему): предоставить удобный механизм расположения контента по виртуальной сетке.

В отличие от старых табличных подходов, основанных на использовании table, здесь не замусоривается семантика документа и представление четко отделено от содержания. В отличие от различных вариаций блочной верстки со становящимися при сколь-нибудь сложной структуре безумными и многоэтажными float'ами в сочетании с вручную просчитанными отступами, здесь описание стилей становится тривиально простым и прозрачным. В отличии от абсолютного позиционирования с привязкой к координатам, здесь сохраняется гибкость. В отличие от популярных сегодня css/js-библиотек для разметки по сетке путем указания соответствующих классов (взять хоть те же bootstrap или yui css grids), здесь не замусоривается привязка классов.

Сплошное удовольствие! Осталось только дождаться широкой поддержки :) Впрочем, если вы планируете делать приложения в стиле Metro для Windows 8 на html/js, ключевые возможности, описываемые в модуле CSS3 Grid Layout, уже работают — и можно двигаться вперед, используя удобные и практичные механизмы.

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

Выбор софта был осложнён тем, что требовалось решение с возможностью установки на локальный сервер и именно под Linux. Наконец после долгого поиска мною был установлен и опробован TeamPass — Collaborative Password Manager. Данный продукт полностью удовлетворил мои потребности в централизованном хранения паролей. Я не буду описывать установку. Она довольно простая и достаточно подробно описана тут. Моей целью было рассказать про решение которое я долго искал. Авось кому-нибудь тоже пригодится.

Статья рассчитана на пользователей только начинающих работать с jQuery UI и желающих на практике познакомиться с этой библиотекой.
Данный оконный интерфейс предполагает такие основные свойства как — наличие окон, возможность их перетаскивания, возможность изменения размера окон, их свертывания/развертывания и т.д. Вот что должно получиться в итоге.
Итак, имеем желание создать пример интерактивного оконного веб-интерфейса и возможности использовать для этой цели jQuery UI – тогда, добро пожаловать под кат.

Недавно наткнулся на jQuery Transit, плагин для плавных трансформаций и переходов. Вместо работы с таймерами, плагин использует CSS3 трансформации.

Работает с тем же синтаксисом, что и animate, но вместо этого стоит использовать метод transition.

С более старыми браузерами новые эффекты не работают, а стандартные CSS будут меняться, хотя и без какой-либо анимации. Для того, чтобы откатиться обратно на animate, достаточно использовать следующее:

if (!$.support.transition)
    $.fn.transition = $.fn.animate;

Всего 2КБ.

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

Все советы автономны и их порядок не имеет значения.

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

В справочнике jquery.page2page.ru появилась документация jQuery UI. Помимо подробного описания каждого плагина, она содержит статьи о фабрике виджетов, с помощью которой можно создавать собственные подобные плагины, правилах темизации (оформления) виджетов UI, собственной системе позиционирования UI, а так же о расширенных анимационных эффектах, доступных при подключении jQuery UI к сайту. Ну и конечно же есть вводная статья с которой можно начать изучение jQuery UI.

Кроме этого, обновлена карта функций, в которую были добавлены методы с двух последних обновлений jQuery, а так же все плагины jQuery UI.

Tinyicon это небольшая библиотека для манипуляции с favicon сайта для передачи информации о новых событиях. Для браузеров не поддерживающих canvas счетчик отображается в title страницы.

Что делать, если разработка ТЗ не самого сложного проекта занимает пару месяцев? Какие шаги при разработке ТЗ могут уберечь от рисков и ошибок? В данной статье мы рассмотрим проблему не содержания документа, а методологию его разработки.

Как вы, наверняка, уже знаете, 29 февраля вышла Windows 8 Consumer Preview, а вместе с ней и 5-я platform preview версия Internet Explorer 10. В этой статье я расскажу о том, как подготовиться к новой версии IE. И хотя повествование будет вестись преимущественно вокруг IE10, многие из этих советов применимы и к другим браузерам, в том числе на других платформах.

1. Используете <!doctype html>

Первое, самое-самое-самое первое, с чего надо начать, — это убедиться, что все страницы вы отдаете с правильным doctype. В мире html5 это одна небольшая и очень простая строчка:

<!doctype html>

Это должна быть самая первая строчка, которую вы напишите. Если шаблон вашей страницы генерируется автоматически инструментами разработки и там нет этой строчки, поправьте шаблон. Если ваша CMS отдает страницы без doctype, обновите используемые шаблоны.

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

Немного об истории решения этого вопроса.

Самой первой популярной техникой была так называемая FIR (она же — Fahrner Image Replacement), которая появилась в 2003-м году. Она проста как пень, и многие начинающие верстальщики ее до сих пор используют:

При разработке веб-приложений существует одна общеизвестная проблема. Мы, программисты, пишем новый javascript-код, стили в css, меняем статику… И статика эта как правило кешируется браузером пользователя и может оставаться в кеше на довольно долгое время (и это на самом деле правильно, ибо может ускорить загрузку страниц в разы).

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

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

«Леди и джентльмены, заведите свои будильники!» — предупредили публику разработчики Raspberry Pi. Можно с большой долей уверенности предположить, что 29 февраля 2012 года в 6:00 GMT (10:00 по московскому времени) начнётся открытая продажа этого Linux-компьютера размером с кредитную карточку.

Бизнес в интернете сейчас очень сильно завязан не только на качество самого сайта, но и на его доступность и работоспособность в режиме 24/7/365. И хотя хостинг-провайдеры заявляют о достаточно большом аптайме площадок и серверов, не всегда этого бывает достаточно, чтобы быть уверенным в надежности сайта. Одним из помощников в этом является мониторинг как доступности, так и работоспособности основных подсистем сайта. Давайте посмотрим, как это можно делать сейчас.

Регулярная проверка

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

С появлением множества нововведений в технологиях вёрстки веб страниц, у разработчиков появилась возможность отчасти заменить JavaScript, применяя HTML/CSS для большей производительности и расширяемости интерфейса своих порталов.
Помимо проблем с кроссбраузерностью и разной реализаций новых свойств CSS, часто приходится встречаться с другими проблемами в местах, где казалось бы, давно всё устаканилось и везде работает одинаково. Именно с такой проблемой мне пришлось столкнутся, применяя CSS transitions вместе с псевдоклассом :active. Видимо из-за того, что в документации отсутствует описание поведения родителей элемента в состоянии :active, в разных браузерных движках это поведение реализовано по-разному.

Задача

Кроссбраузерно декорировать потомка активного элемента (родителя), с возможностью активировать родителя кликом на любого потомка (мой пример на jsfiddle, и на dabblet).

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

• unit тестирование,
• интеграционное тестирование,
• тестирование интерфейса,
• тестирование этих типов тестов на различных версиях Android и конфигурациях девайсов,
• рассылка по email в случае сломанного билда;
• таже не помешает автоматическая сборка релизов.

Здравствуй, дорогой хабрадруг! Сегодня существуют более тысячи способов создать кнопку; чтобы понять их сущность, вам нужно лишь потратить немного времени, просмотрев работы на сайте dribbble.com. Большинство из этих примеров очень похожи друг на друга, однако время от времени попадаются и такие кнопки, на создание которых потратили чуть больше внимания, времени и сил.



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

В этой статье вы узнаете, как можно отлаживать iframe приложение непосредственно внутри среды vk.com, то есть как белый человек. Разработка приложения непосредственно в среде не требует создания песочниц (эмуляции вконтакте), очень удобно работать непосредственно с API вконтакте, видя все переменные, которые передаются туда и обратно непосредственно в трейсе. Не претендую на оригинальность, я просто проверил, что такой статьи нету в тырнете и все, а идея очевидна и проста. Идею придумал за кружкой чая, ибо если бы я успел его допить, то начал бы гуглить.