Modalbox — библиотека на prototype и script.aculo.us для создания диалоговых окон и мастеров, обьем ее кода всего 10кб. На мой взгляд это настоящий атрибут веб два нольности.

Flowplayer — Бесплатный видео-плеер для веба
FlowPlayer — это Flash медиа плеер. Вы можете использовать его нв ваших HTML страницах чтобы воспроизводить видео файлы. «Это ваш персональный YouTube».

markItUp! это «легкий» редактор для jQuery. Это не WYSIWYG редактор и никогда им не будет. Вся «соль» этого редактора в том, что можно настроить его для использования с любыми средствами подсветки. BBCode, Markdown, Wiki синтаксис, Textile и конечно же HTML.

Особенности:
— Легкая интеграция
— Поддержка «горячих» клавиш
— Панель управления легко настраивается
— Легко изменяется и настраивается
— Просмотр результатов через AJAX
— Настраиваемый внешний вид

Примеры использования
Домашняя страница

MoreCSS — небольшая библиотека JavaScript, весом всего 14кб, для решения повседневных задач, таких как создать всплывающие окна, сделать вкладки меню, таблицы и списки с оформлением «зебра»-стиль… и т.д. С помощью этой библиотеки Вы сможете это делать средствами обычного css.

В предыдущей статье мы разобрали основные аспекты построения шаблона с помощью XSLT. Однако, для полноценного шаблона нужно не только выводить меню сайта, но также и текстовый материал документа.

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

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

В сети доступно масса документации по языку XSL. Данный раздел не претендует на роль документации по языку, а лишь кратко, по шагам объясняет, как создать свой XSLT-шаблон.

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

Приветствую вас, уважаемые читатели! Возможно, несколько нескромно, но позволю себе обьявить, что далее будет самый первый в Рунете обзор и описание практического применения недавно открытого Google AJAX Language API для доступа с приложений на JavaScript к сервису переводов. Везде я видел пока только анонсы и попытки проанализировать, чем же это может обернутся для разработчиков и пользователей, но именно руководства по встраиванию в свой сайт или проект еще не читал, поэтому решил самостоятельно разобраться и написать.

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

API включает в себя функции автоматического определения языка исходного текста, и, собственно сам перевод. Поддерживается пока тринадцать разных языков и двадцать девять вариантов перевода. К сожалению, русский поддерживается только в виде пары Russian <> English, то есть, перевод с русского на английский и обратно, а самое большое число переводов конечно же, для английского. Впрочем, обещают в дальнейшем пополнять возможности переводов, так что не отчаивайтесь.

Вашему внимание предлагается достаточно большой отрывок статьи «Levels of HTML knowledge», написанной Роджером Йоханссеном 30 Мая 2006 года.

Прим. переводчика: Изначально я опубликовал этот пост в виде юмористических выдержек из трех статей, написанных тремя разными авторами и озаглавленных схожим образом: «Уровни владения HTML», «Уровни владения CSS» и «Уровни владения Javascript». Что, конечно же, было довольно глупой затеей. Осознание допущенной ошибки пришло через 5 минут и два минуса к посту и карме. Исправляюсь. Перевод «Уровней владения CSS» ждите завтра.

Суть проблемы

Возможность пользователя ввести оооочень длинное слово без пробелов, и тем самым «взорвать» layout — это старая проблема. Вот так она решается на Хабре.

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

Меня тут спросили: «Как вы мешаете лицам, указанным в договоре, представлять мнение завхоза и главного инженера как свое собственное». Мы не мешаем им. Но договор, тем не менее, сильно нам помогает. Поясню как.

Хочу еще раз поднять тему использования сессий для аутентификации пользователей. Надеюсь услышать критику приведенного в статье метода с высоты вашего опыта.

Поискал ссылки поиском по хабру, не нашел.

Итак, прежде чем изобретать велосипед, у разработчика часто возникает необходимость посмотреть, какие же продукты уже были реализованы.
Кто-то начинает гуглить — что же, наверное, это правильно.

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

Итак, вот они:
www.hotscripts.com
www.planet-source-code.com
php.resourceindex.com
cgi.resourceindex.com
www.scripts.com/php-scripts
www.phpclasses.org
mymans.org/category/php

У верстальщиков до сих пор возникает задача — подключить стили только для определённого браузера. Для IE проблема решаема — мало кто из верстальщиков не знает что такое conditional comments. Но исчезающе малое количество народу знает про per-site user stylesheet rules. Интересны они тем, что Mozilla FireFox поддерживет их через собственное правило — «@-moz-document».

Вообще, это правило позволяет подключать стили в зависимости от домена, URL или его префикса. Для нас важно, что эти правила увидит только FireFox.

Простой пример использования, из которого становится понятен общий принцип:

White in FireFox

У приведённого примера есть недостаток — такой CSS не пройдёт валидацию, что лично для меня определяющей целью не является, но для многих это как скаутский значок.

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

P.S. Если в статье что-то не так — подскажите. Это мой первый опыт.

Оригинал статьи опубликован в моём блоге.

Если вы занимаетесь разработкой интерфейсов, то наверняка сталкивались с необходимостью разместить на страницах вашего проекта график или диаграмму того или иного содержания и вида: в одном случае это мог быть график суточного отсева спам-сообщений, в другом – “живая” диаграмма, отображающая количество комментариев к вашей статье.

Одной из основных моих активностей на работе является оценка проектов. И в данной статье я постараюсь поделиться своим опытом в данной области.

Всем известно, что на маках замечательный рендеринг шрифтов ;) Но, к сожалению, на темном фоне при сглаживании «Medium» текст выглядит очень жирным, что меня, мягко говоря, раздражает. Вот, например, кусочек меню Smashing Magazine с рендером по-дефолту:



К счастью, я нашел обходной путь этой проблемы. Заключается он в следующем: если указать тень (параметр text-shadow), то для текста с тенью включается «фотошоповский» рендеринг без субпиксельного сглаживания (Standard в System Preferences/Appearance). И никто не мешает нам сделать нулевую тень :)

Прописываем в CSS элементам такой параметр: text-shadow: #000 0 0;. Смотрим:



Вуаля! Надеюсь, этот трюк поможет эстетствующим любителям шрифтов и Сафари :)

UPD: Если вас смущает ругающийся валидатор, то могу сказать, что это баг самого валидатора, который проверяет CSS2.1, т.к. параметр text-shadow является валидным и присутствует в спецификации CSS2 и CSS3. Решение проблемы — в More Options валидатора выбрать Profile: CSS version 2 или CSS version 3.

По просьбам пользователей после прочтения статьи Визуализация данных на CSS

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

GlassBox является компактной Javascript библиотекой, которая использует Prototype и Script.aculo.us для своих эффектов. В «GlassBox» вы можете построить прозрачные границы, цветные слои и т. п.