Не так давно Gunger представил вариант раскрашивания элементов ввода текста на форме. Мне этот вариант, несмотря на критику некоторых юзеров, очень понравился и я решил что со временем сделаю свою реализацию.

Время пришло и я рад представить свой вариант реализации написанный в виде JQuery-плагина. Я назвал плагин semaphore, по моему вполне удачное название. Плагин работает с регулярными выражениями для проверки валидности ввода.

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

Да, вы правы! Денис любезно сверстал данный макет валидным и семантичным XHTML. Он — молодец, а я ему немного в этом подсобил, доделав небольшую деталь. Он большое внимание уделил размеру страницы и её исходного кода.

Внимание: топик не содержит WYSIWYG!

В этом посте я постарался собрать все известные мне хаки для css. Многие могут усомниться в их надобности для нормальных современных браузеров, потому как большинство хаков всегда применялись только для IE, но этот пост скорее для любознательных :), в верстке хаки вообще лучше не использовать. Но так или иначе, раз они есть, грех о них не знать.

В отличие от многих хаков для той же Opera, которые также будут обработаны и Safari, я немного изменил код и Opera 9.2, Opera 9.5 и Safari 3 увидят каждый свой css.

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

Для случаев без кодоизврата (а их большинство) можно использовать такой код:

code = code
// ключевые слова (список неполон, написал, что в голову пришло)
.replace(/(var|function|typeof|new|return|if|for|in|while|break|do|continue|switch|case)([^a-z0-9\$_])/gi,
'<span class="kwrd">$1</span>$2')
// всякие скобочки
.replace(/(\{|\}|\]|\[|\|)/gi,'<span class="kwrd">$1</span>')
// однострочные комментарии
.replace(/(\/\/[^\n\r]*(\n|\r\n))/g,'<span class="comm">$1</span>')
// строки
.replace(/('.*?')/g,'<span class="str">$1</span>')
// функции (когда после идентификатора идет скобка)
.replace(/([a-z\_\$][a-z0-9_]*)\(/gi,'<span class="func">$1</span>(')
// не люблю восьмизначные табы, пусть лучше будет 4 пробела
.replace(/\t/g,'    ');

Вы наверняка не раз видели javascript-реализации контекстных меню на базе популярных библиотек, таких как jQuery и prototype. А значит обязательно сталкивались с основными их недостатками: неудобностью API, большим количеством кода, требовательностью к ресурсам, любовью к генерации огромного количества html кода. В один прекрасный момент эти проблемы пересилили мою лень и я решил бороться с ними, поставив следующие задачи:

• Минимум html кода, генерируемого для меню (зачем нам засорять ДОМ)
• Лаконичность js кода для создания меню (API вызова без копипасты)
• Оптимум гибкости при работе (многоуровневые, динамически модифицируемые меню)
• Как можно меньше кода в реализации библиотеки (6302 байта в несжатом виде)
• Минимальное количество jQuery-вызовов (чтобы можно было легко от них отказаться тем, кто jQuery не использует)
• Inline-события где это возможно вместо биндов (меньше ресурсов сожрет)

UPD: разместил проект в google code, пользуйтесь, развивайте:
svn checkout js-cmenu.googlecode.com/svn/trunk js-cmenu-read-only

CSS tooltips очень популярны в современном веб дизайне, и вопреки широко распространенному мнению их довольно легко создать, особенно с помощью различных популярных javascript-framework-ов.

Вы, конечно, можете использовать стандартный плагин, но чтобы сделать простой tooltips, Вам достаточно написать всего 10 строк кода jQuery и CSS.

Итак, приступим. Прежде всего обратите внимание на структуру этого tooltips: это обыкновенная ссылка, которая будет выглядеть примерно так:

Нет ничего лучше пассивного дохода, все это знают!

Разработка сайта — проект, это одно. Бюджет относительно высокий, но и трудозатраты значительные. Намного интересенее после завершения разработки сайта оказывать услуги по так называеммой «поддержки сайта».

Стоимость поддержки может быть символическая, к примеру $50 в месяц, но это ежемесячный стабильный доход. Как правило поддержка сводится к обновлению контента, или настройки почтовых ящиков.
Как вариант это может быть продвижение сайта, поисковая оптимизация или еще что-то, но сумма платежа соответственно увеличивается.

Основной вопрос с которым может сталкнуться студия и в частности менеджеры, обслуживающие клиента это необходимость регулярно напоминать о себе и «создавать видимость» работы. Несмотря на то, что вы четно исполняете свои обязательства, обновляете контент, управляете почтой или что-то еще… когда вопрос доходит до платежа очень часто говорят «Ну а за что єто я плачу? Работі же не видно, да и как-то дорого!»

Если бы своевременно менеджер (раз в неделю), хотя бы писал письмо о том, что мы сделали тото и тото. «Пришлите нам свежие новости!», «как ваши дела?» ситуаций таких было бы меньше и колличество проектов на поддержку только увеличивалось.

Предлагаю составить список работ, таких как 1. обновление контента или 2. управление почтой которые на самом деле не составляют большого труда, но дают «плюс» к общей картине.

Буду рад хорошим комментам. Спасибо!

Шрифты в Em/% хороши всем — возможностью пользователей IE увеличивать кегль, заботой о пользователях, что предпочитают увеличивать размер шрифта браузера по-умолчанию, чтоб лучше видеть текст, да и просто являются нормой для профессиональных верстальщиков.

Минусы: … их вроде как нет, но!
А что если у пользователя разрешение экрана выставлено не в стандартное 96 dpi, а в 120?
Сайт с увеличенными шрифтами смотрится уже не так красиво, как нарисовал дизайнер — ведь масштабируются только шрифты, а не весь сайт! А разрешение 120dpi становится всё популярней, особенно на ноутбуках! Что же делать? Возвращаться к px?

Нет!

При проектировании интерфейсов пользователя когда-нибудь обязательно встанет задача использования таймеров, и в этой статье я хочу рассказать о замечательном плагине jQuery Timers, который значительно облегчит работу по созданию и применению таймеров в Ваших приложениях.
jQuery Timers — это высокоуровневая абстракция методов setTimeout и setInterval. Используя jQuery Timers, Вы сможете «прикреплять» таймеры к элементам непосредственно в Вашем коде и использовать еще некоторые возможности.
Как обычно, сначала посмотрим пример, а потом разберем исходный код.

Пример и исходный код скачать можно здесь

Представляю Вам третью статью из серии jQuery для начинающих. В этот раз я постараюсь рассказать о реализации AJAX запросов...

Чего-то сегодня не спится совершенно… Возможно это тот самый знак, которого я так долго ждал? А знак мне нужен был, что бы решиться начать серию статей на основе реальной разработки проекта средних масштабов. Но не просто разработке в общем смысле этого слова, и даже не о разработке на основе Zend Framework, Doctrine ORM и пр. и пр., а о разработке начиная с постановки задачи, анализа и проектирования (с необходимой степенью глубины), поиска решений и реализации.
И раз уж первый абзац уже набран, то смысла останавливаться не вижу :) Приглашаю всех поучаствовать в процессе, который будет проходить на основе UP.

Одним из наиболее запутанных аспектов CSS является применение font-size атрибута для масштабирования текста. Используя CSS, вы можете изменить размер текста в браузере с помощью четырех разных единиц измерения. Какая из этих четырех единиц лучше всего подходит для веб? Это вопрос, который породил разнообразные дискуссии и критику. Поиск окончательного ответа затруднен, поскольку вопрос сам по себе сложный.

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



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

UPDATE:
Добавил еще одну версию, подробности и линк под катом.

Хотя наш обзор немного запоздал, оригинальный Dojo 1.2 вышел в релизной версии ещё 6-го октября, но сейчас мы наверстаем упущенное. И так, Dojo Toolkit — это самая мощная и гибкая ajax-библиотека из всех, что есть на рынке, она активно развивается и имеет большое комьюнити. Кстати, это самое комьюнити, совместно с компанией Sitepen, имеет ещё несколько проектов, среди которых и Cometd и некоторые другие, не менее интересные, о которых мы скоро вам расскажем. Сегодня же все внимание на флагманский продукт — Dojo 1.2.

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

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

После сравнительной заметки о CSS Sprites и data:URL все мои мысли были направлены на решение основной проблемы:

В общем случае [при использовании data:URL], загрузка страницы не ускорится, а даже может замедлиться, потому что фоновые картинки (включенные через data:URL) будут грузиться в один поток, а не в несколько при обычном использовании спрайтов. Если фоновых картинок достаточно много (несколько десятков Кб), то это окажется существенным.

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

Читать дальше на webo.in→

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

Максим Захаров отлично реализовал игру на JavaScript. Замечательная графика и очень даже хороший код.

Играем и рассматриваем

Raphaël — небольшая библиотека(20 килобайт) для построения векторной графики на веб-сайтах.

Она использует SVG и VML в качестве базы для создания графики. Учитывая то, что каждый созданный объект — DOM объект, то при помощи JavaScript обработчиков можно легко изменять их свойства и действия.

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

Для начала. Что же такое скриптлет?

Скриптлет — яваскрипт, помещеный в закладку и выполняемый на открытой странице при нажатии на ту самую закладку.

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