Search
Write a publication
Pull to refresh
22
0

User

Send message

Пишем аккордеон-плагин в 618 байт

Reading time5 min
Views5.4K
Очень часто приходится видеть варианты элемента управления «аккордеон» на различных сайтах. В этой заметке я хотел бы предложить свой вариант, который кроме того, что обладает некоторыми оригинальными свойствами, еще и весит в minified-виде всего 618 байт. Заодно, я покажу как быстро написать простейший плагин для jQuery.

Забегая в перед скажу, что плагин тестировался в Firefox 3.0.3, Internet Explorer 7 и 8b2, Opera 9.52 и Chrome 0.3.154.9. Во всех других браузерах работоспособность гарантируется настолько насколько в них работает jQuery.

Для любопытных приведу пример того, что будет в итоге (ссылки и кнопки в примере не работают).
Читать дальше →

Интервально-ассоциативный массив

Reading time2 min
Views4.8K
Замечательная вещь — ассоциативный массив. Самые разные задачи решаются с его помощью легко, приятно и быстро. А как быть когда значение должно принадлежать не одному ключу, а быть «размазанным» на некоторый интервал?
Представьте, что вам нужно сделать программу для составления расписания дежурства менеджеров интернет-магазина. Работа с ним должна была максимально простой, примерно так:
# легко назначить
>>> timetable['08:00' : '12:00'] = 'Иванов'
>>> timetable['12:00' : '16:00'] = 'Петров'

# как узнать кто дежурил в 13:51 ?
>>> print timetable['13:51']
Петров

# легко просмотреть поэлементо полный список
>>> for interval, person in timetable.items(): print interval, person
('08:00', '12:00') Иванов
('12:00', '16:00') Петров

# ...или одной строкой
>>> print timetable
{['08:00', '12:00'] => 'Иванов', ['12:00', '16:00'] => 'Петров'}


Дальше - больше!

Визуализируем данные на JavaScript

Reading time3 min
Views4.5K

Развитие компьютерной графики подталкивает нас к изобретению всё новых способов графического представления данных. Разрабатывались различные прикладные программы для визуализации данных на локальных компьютерах. Однако всё изменилось с развитием интернета: в нём содержатся колоссальные объёмы информации, которые нам постоянно хочется представить как-то удобнее, дружелюбнее, понятнее. Что же мы имеем на сегодняшний день?

Существует немалое число серверных библиотек и утилит, способных генерировать сложные графики. Однако я считаю, что такой подход не всегда оптимален. Если мы можем производить визуализацию на стороне клиента с помощью JavaScript, то почему бы нам не воспользоваться такой возможностью? Логика работы подобной связки проста: сервер генерирует данные, а клиент их визуализирует.

Разумеется, вы можете воспользоваться Flash, Silverlight или Java-апплетами, однако в этом обзоре я хотел бы вам показать библиотеки визуализации, написанные на чистом JavaScript.

Читать дальше →

Проблема одновременного перестроения кэшей

Reading time4 min
Views10K
Серия постов про “Web, кэширование и memcached” продолжается. Начало здесь: 1, 2 и 3.
В этих постах мы поговорили о memcached, его архитектуре, возможном применении, выборе ключа кэширования, кластеризации, атомарных операциях и реализации счетчиков в memcached.

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

Следующий пост будет посвящен тэгированию кэшей.
Читать дальше →

wysiwyg своими руками

Reading time3 min
Views24K
Существует куча платных\бесплатных визуальных редакторов на любой вкус и цвет. Но что, если они работают не во всех браузерах, Вас не устраивает дизайн или функциональность, или просто душа лежит к написанию своего собственного? Ответ на вопрос, как это сделать —
Читать дальше →

Подсветка текста в «TextArea»

Reading time4 min
Views20K
Эта статья покажет, как в современных браузерах можно сделать подсветку текста в поле редактирования (WYSIWYG).
Пример можно посмотреть, в google.docs или на некоторых продвинутых форумах.

Уверен, многим это будет интересно.

Атрибут contentEditable и параметр designMode


Именно contentEditable или designMode и делает для нас всю основную «грязную» работу.

Если этот атрибут поставить в тег, то всё, что внутри тега, становится автоматически редактируемым.

<html><head></head><body>
  <div contentEditable="true"><b>C</b>ontent<u>!!!</u></div>
</body></html>
работающий пример

Этот атрибут не поддерживается сейчас некоторыми старыми браузерами (например, FireFox 2.0). Но есть более «глобальный» параметр страницы, который сейчас поддерживают все браузеры, который нам может помочь —
designMode

Небольшое улучшение: видимый хабракат в предпросмотре

Reading time1 min
Views644
Когда я создаю пост, то всегда пользуюсь предпросмотром, так же как и многие другие.
Но в предпросмотре не видно, в каком месте поста установлен хабракат.

Поэтому предлагаю: в предпросмотре, в том месте, где установлен хабракат рисовать пунктирную линию с надписью «habracut». Это удобно, чтобы оценить, какое количество текста будет представлено как анонс поста (до хабраката). Да и просто — это хорошо)

У меня всё.

Контекстное меню на javascript: небольшое, но мощное

Reading time5 min
Views14K
Вы наверняка не раз видели 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

Читать дальше →

Подсветка синтаксиса несколькими строками javascript

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

Для случаев без кодоизврата (а их большинство) можно использовать такой код:
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,'    ');


под катом CSS, плагин jQuery, пример и некоторые пояснения-рассуждения

Создаем простой tooltips с помощью CSS и jQuery

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

Вы, конечно, можете использовать стандартный плагин, но чтобы сделать простой tooltips, Вам достаточно написать всего 10 строк кода jQuery и CSS.
image
Итак, приступим. Прежде всего обратите внимание на структуру этого tooltips: это обыкновенная ссылка, которая будет выглядеть примерно так:
Читать дальше →

Постраничная навигация

Reading time1 min
Views1.4K
Я упустил тот момент, когда постраничная навигация по топикам из вида

[←][2075][2074][2073][2072][2071][→]

перетекла в вид

[←][1][2][3][4][5][→]

Главный недостаток — содержимое каждой из конкретных страниц постоянно меняется. Есть несколько неприятных следствий из этого:

Читать дальше →

Удобный дебаг с BlackBird

Reading time1 min
Views838
imageХочу представить вам одну библиотеку для яваскрипта, под названием BlackBird. Основное ее назначение, избавить разработчика от не нужного дебага при помощи alert(), о чем собственно и говорит слоган «Скажите привет BlackBird и скажите пока alert()» ( Say hello to Blackbird and 'goodbye' to alert() ).
Читать дальше →

Изображения, выходящие за границы поста на Хабре

Reading time1 min
Views699
Многие видели, что на Хабре изображения в постах иногда вылазят за границы поста.
Надо что-то делать. Это некрасиво и не удобно.

Решить это просто, нужно чтобы парсер автоматически обёртывал все изображения в контейнер с overflow: auto. Но лучше закодить JavaScript, который бы вычислял ширину контент-зоны, и все изображения в контент-зоне, которые шире её самой, оборачивал бы в DIV с overflow: auto.

Засим откланяюсь.

Уточнение комментариев

Reading time1 min
Views812
Как ни крути, а невозможность редактирования/удаления комментария угнетает. Есть, конечно, причины, по которым этого делать нельзя. Например, потому что ответы на комментарий после его изменения окажутся бессмысленными.

А если вносить изменения не в сам комментарий, а дополнять его или уточнять — вроде, ничего страшного не случится. Например, вот так:
Остановите тиранию животных!
В сопутствующей картинке, объясняющей суть наглядно, но не изменяющей смысл топика в сторону топиков про кармоизыскания, все имена изменены, а совпадения — случайны.

Ах да, некоторых это не угнетает, но все же.

CommentsFx

Reading time2 min
Views566


Приветствую всех читателей Хабрахабра.

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

Подробности

Jevix: опубликована php-версия 0.9 (beta)

Reading time1 min
Views1.3K


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

Jevix способен полностью взять на себя все возможные проблемы с обработкой пользовательского материала в формате простого текста или HTML.

Читать дальше →

Ограничения на названия логинов

Reading time1 min
Views7.7K
Добрый день. В этой заметке я хотел бы поговорить об ограничениях, которые выставляются в сервисах на логины.

Создавая очередной сервис, я исхожу из следующих соображений:
1. Логин не должен быть слишком короткий (у меня сейчас от 3 символов включительно, для более крупных систем, типа GMail, используется от 6).
2. Логин не должен быть слишком длинный, иначе в каком-нибудь интерфейсе он начнёт что-нибудь неправильно распирать. Я использую логины до 20 символов, но интересно выслушать ваши мнения по этому поводу.
3. Логин может использоваться в адресной строке, при интеграции с SMS и проч. Поэтому оставляем только латинские символы, цифры, подчёркивание, дефис и точку.
3а. Если логин может быть использован как имя поддомена, то эти условия сокращаются до символов латинского алфавита, цифр и дефиса (дефис не может быть первым и последним, он не может повторяться).
4. Иногда очень удобно использовать двойную навигацию: по логину и ID. Например, у нас на одном сервисе используется адрес domain.com/users/<login> для пользователей с логином и domain.com/users/<id> для тех, у кого нет логина (т. н. виртуальные профили, которые зарегистрированы администрацией или другими пользователями). Это приводит к тому, что логин не может состоять только из цифр, чтобы не путать его с идентификатором.
5. Слова-исключения: www, mail, ns1, ns2, ns3, ns4, admin, god, moderator, editor. Первые 6 являются исключениями для совместимости с поддоменами. А какие слова-исключения используете вы?

И основной вопрос к читателям: какие ограничения стоят у вас, и что я забыл?

Исходный код Habrahabr доступен и распространяется под GPL2?

Reading time1 min
Views725
Конечно, прямых свидетельств нет и наверное не будет, но есть множество косвенных признаков подтверждающих теорию о том, что код Хабра основан на Open Social Networks Constructor, открытом проекте распространяемым под лицензией GPL2.
Читать дальше →

Стэнфорд открыл учебные материалы по программированию и ИИ

Reading time1 min
Views6.1K
Стэнфордский университет выложил в открытый доступ под лицензией Creative Commons содержание десяти учебных курсов по программирование, искусственному интеллекту, линейным системам и оптимизации. Воспользоваться этими уникальными материалами могут преподаватели и студенты со всего мира.

Каждый курс содержит видеозаписи лекций, полные тексты и тезисы, а также практические задания и экзаменационные билеты. Материалы практически полностью совпадают с той программой, по которой учатся студенты-очники в Стэнфорде. Чтобы скачать материалы, не требуется никакой регистрации или специального запроса. Они просто выложены в открытый доступ в ZIP-архивах примерно по 300 МБ, а видеоролики ещё продублированы на YouTube.

Вот список открытых курсов:

Information

Rating
Does not participate
Location
Украина
Date of birth
Registered