В последнее время участилось использование мной как подгрузки содержания ajax'ом в админке, так и использование спрятанных блоков, которые показываются в зависимости от нажатий пользователя на всякие табы и кнопки. Возникает проблема что с обновлением страницы открытое содержание пропадёт. Проблема наглядно решается при помощи якорей в gmail.

Например так можно открыть слайд сделанный на jQuery со спрятанным содержанием (например в FAQ)

    var URL = document.location.toString();
    if (URL.match('#')) {
        var anchor = '#' + URL.split('#')[1];
        if (anchor) $(anchor).parent().click();
    }

А для простых смертных без jQuery, так можно получить ID редактируемого элемента и передать на рекурсивное открытие дерева до нужного элемента

   var anchor;
    var URL = document.location.toString().split('#');
    if(URL.length > 1) {
        anchor= URL[1].split('/');
        var intNode=1*anchor[1];
        if (intNode>0) MenuTree.editDeepChild(intNode);
    }

Для записи в URL не обязательно иметь anchor-элемент, можно вполне javascript'ом менять якорь через window.location

Читайте также:

• Anchor based navigation
  

Очень часто в web-проектах надо использовать визуальный редактор кода (richtext code editor), похожий на существующие IDE, с номерами строк и подсветкой кода. Наиболее часто он используется в редактировании исходного кода статьи или шаблонов в админке. В этой статье я перечислю существующие скрипты по аналогии со списком WYSIWYG-редакторов.

Практически все существующие визуальные редакторы создают iframe и генерируют внутри страницу в соответсвии с данными javascript-объекта, занимающимся всеми задачами по генерации кода и обработке клавиш.

Основанные на iframe:

• EditArea — наиболее популярный редактор благодаря табуляции, gzip, совместимость пространства имён с другими библиотеками
• CodePress — парсит SQL, Perl, C#, XSL, ASP, VBscript. Отдельные движки для разных браузеров (gecko=firefox, ie, opera). Создаётся iframe со внутренним CodePress'объектом с обращением через contentWindow. Сразу внутри скрипта идёт поиск textarea-элементов по классу, так что с динамическими ajax-редакторами прийдётся изменять скрипт. Кроме того нумерация (до 1500) строк сделана при помощи одной картинки
  
• CodeMirror — парсит JS, HTML, CSS

Напомню что iframe не соответсвует XHTML спецификации, а с использовать предложенный тэг object с не сильно получится, из-за ограничения на доступ внутренних dom-элементов (поправьте если я неправ).

Основанные на div'ах

• Simple CodeArea 0.1b - очень простой но помоему самый логичный подход использовать подсветку синтаксиса благодаря полупрозрачной textarea и div-элементу с форматированным текстом под ней. Единственная проблема - запаздывание при скролле, но в будующем я думаю это перспективный продукт
• MDK-editor — относительно навороченный редактор, есть контекстное меню. В минусы можно отнести некрасивый скин, небольшую тормознутость, неизвестную лицензию на использование, перезапись window.onload, размер кода свыше 100 кб. Достаточно много классов и обычных функций, просто так не разобраться, тем более без документации.
  
• Helene — вместо iframe используется фоновый div и динамически позиционируемая textarea поверх. Поскольку изменяется только один ряд, то невозможно выделить нескольких строк сразу
• 9ne — похож на консоль, но нет возможности выделения всей строки Shift+End. Эмулирует каретку мигающим div'ом.

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

Читайте также

• Implementing a syntax-higlighting JavaScript editor in JavaScript от создателя CodeMirror
  

jQuery - библиотека о которой в последнее время говорит практически каждый web-разработчик, верстальщик и дизайнер. Написанная с учётом CSS, она упрощает доступ к одному или нескольким DOM-элементам. Если вы ещё используете prototype, то можно использовать режим совместимости (правда не факт что у вас будут работать плагины). Стандартно доступ происходит благодаря функции $ или JQuery. Элементу можно добавить (.addClass) или отнять (.removeClass) CSS-класс. Если это input-элемент, то запись и чтение происходит в аттрибуты элемента (.attr) и напрямую к значению (.val) . Внутренние элементы можно задать как через (.html). Ajax очень просто вызывается функцией $.post (url, val, callback)

Кроме минимализма, ускоренности и CSS-селекторов библиотека мало чем по функциональности отличается от prototype, mootools. Она не расширяет родные JS-объекты, как это делает protype и существует в своём пространстве переменных, поэтому не конфликтует с другими библиотеками.

Столкнулся с проблемой в своём календарике - есть два элемента, один из которых позиционируется абсолютно на весь экран, полупрозрачная затемняющая занавеска а второй - форма. Вы наверняка видели такие решения при показе картинок в lightbox или аутидентификации на habrahabr'е..

<div id='form_bg' onclick="$('form_bg').hide();$('form').hide();"> <div id='form'></div> </div>

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

Как известно blog берёт своё название от "weblog" то есть лента новостей. Но как вы вероятно замечали, люди по разному поняли что значит вести блог. Я сам начинал с того что писал о чём угодно в ЖЖ, в совершенно литературно неправильной форме, активно культивируя сленг. Но после перехода в standalone-режим, когда я начал ценить своих читателей и писать полезную информацию, то и формат содержания -статей, иллюстраций изменился, увеличивая тем самым и время.

Микроблоггинг создан именно для неформального извещения о событиях и мыслях. Первыми и популярнейшими сервисами стали twitter, jaiku и pownce. Микроблоги имеют и свои rss-ленты, API. Достаточно удобно оповещать и событиях с телефона. Интегрировать же свой standalone блог и twitter достаточно просто..