Выполнение SQL-подобных запросов над данными — как в браузере, так и на сервере
1 мин
Читать дальше →
Притча о потерянном состоянии
5 мин
— Здра…
— А-а-а!
— Ну ты чего?
— Я вас боюсь!
— Чего это?
— Вы вечно меня унижаете…
— Хех, ну ладно, больше не буду.
— Правда?
— Доо, хочешь конфетку с аяксом?
— Конечно!
— Тада давай, лети к нам в Питер. Вот список авиарейсов на которые есть билеты отсортированный по цене: rasp.yandex.ru/search?cityFrom=Санкт-Петербург&cityTo=Москва
— Эм… что-то вы наврали дяденька — там вообще все рейсы из Москвы в Питер, отсортированные по времени отправления.
— Гм… действительно, не хорошо получилось… а значешь почему?
— Нэ?
— Потому что состояние приложения не отражается на uri. Поэтому каждый раз заходя на эту страницу из закладок, тебе придётся заново устанавливать фильтрацию и сортировку.
— Блоо, как же быть?
— А-а-а!
— Ну ты чего?
— Я вас боюсь!
— Чего это?
— Вы вечно меня унижаете…
— Хех, ну ладно, больше не буду.
— Правда?
— Доо, хочешь конфетку с аяксом?
— Конечно!
— Тада давай, лети к нам в Питер. Вот список авиарейсов на которые есть билеты отсортированный по цене: rasp.yandex.ru/search?cityFrom=Санкт-Петербург&cityTo=Москва
— Эм… что-то вы наврали дяденька — там вообще все рейсы из Москвы в Питер, отсортированные по времени отправления.
— Гм… действительно, не хорошо получилось… а значешь почему?
— Нэ?
— Потому что состояние приложения не отражается на uri. Поэтому каждый раз заходя на эту страницу из закладок, тебе придётся заново устанавливать фильтрацию и сортировку.
— Блоо, как же быть?
Привязка модели данных к представлению на javascript
7 мин
Я думаю многие пользуются DataBinding`ом в .NET, она же привязка данных. Она позволяет, при выделенной модели данных и независимом визуальном представлении, забыть о синхронизации данных с формой. Привязав один раз properties модели к элементам представления, мы избавляемся от десятков обработчиков onChange и подобных для изменения полей модели, а в случае изменения поля вне gui-интерфейса (например синхронизация модели с базой), мы не будем мешать уровни абстрации, чтобы обновить textBox.text. Давайте данные будут отдельно, gui отдельно. Плюс мы получаем наглядный, легко переносимый код на asp.net или даже на другой язык/платформу.
Синхронизация может быть как в двух направлениях, так и в одном, причем в любую сторону.
С развитием уровня web-ориентированных приложений, появилась возможность реализации подобного решения и на JavaScript. Ну думаю преимущества разделения данных от представления уже много где рассматривались и не раз приводили к холивару, так что упустим этот момент.
Синхронизация может быть как в двух направлениях, так и в одном, причем в любую сторону.
С развитием уровня web-ориентированных приложений, появилась возможность реализации подобного решения и на JavaScript. Ну думаю преимущества разделения данных от представления уже много где рассматривались и не раз приводили к холивару, так что упустим этот момент.
Притча об автоматическом менеджменте виджетов
8 мин
— Здравствуй…
— А-а-а! Памагите! Убивают! \(0_0)/
— Дружок, спокойно, я свой :-\
— Свои незаметно сзади не подкрадываются! \(@_@)/
— А я динамически добавился В-]
— Э-э-э \(~_~)/
— Ясно, не знаешь, как реагировать на такие ситуации? XD
— Ну… как бы… есть мысли… \(=_=)/
— Покажи-ка свой исходник %-)
— Я… эта… стесняюсь… \(._.)/
— Давай, не боись, я же свой ;-)
— Лаааадно \(-_-)/
— А-а-а! Памагите! Убивают! \(0_0)/
— Дружок, спокойно, я свой :-\
— Свои незаметно сзади не подкрадываются! \(@_@)/
— А я динамически добавился В-]
— Э-э-э \(~_~)/
— Ясно, не знаешь, как реагировать на такие ситуации? XD
— Ну… как бы… есть мысли… \(=_=)/
— Покажи-ка свой исходник %-)
— Я… эта… стесняюсь… \(._.)/
— Давай, не боись, я же свой ;-)
— Лаааадно \(-_-)/
<body><br> <script><br> $(function(){<br> $('.c-example').wrapInner( '<span class="wrapper" />' )<br> })<br> </script><br> <div class="c-example">epic</div><br></body>
Вызов метода Javascript без его вызова фактически
2 мин
Перевод
Иногда мы бываем просто ленивыми. Особенно, когда доходит дело до написания кода. И хоть круглые скобки в вызове функции не приводят к избыточности, иногда все же они могут утомлять, особенно когда javascript-метод не нуждается в передаваемых ему аргументах. Иногда это просто надоедает.
CanVG: отрисовка SVG-файлов в canvas
1 мин
C помощью библиотеки CanVG, в тэг можно отрисовывать SVG файлы. Посмотреть на различные SVG-шки и даже вставить свою можно на тестовой страничке.
Надо сказать, что сложные изображения довольно сильно нагружают браузер, к примеру, world
via Ajaxian
Особенности кроссдоменного скриптинга на субдоменах с XML в Opera и некоторых других
5 мин
Недавно проделана работа по написанию пользовательского скрипта (браузеры Firefox, Chrome и Opera), в котором понадобилось обращаться к документу XML, находящемуся в старшем домене 2-го уровня из домена 3-го уровня. Работа открыла взгляд на некоторые особенности поведения браузеров, особенно, Оперы, причины которых до конца не выяснены. Но, так как такой скриптинг (чтение и запись в документы XML в наддомене) иногда необходим, хотел бы поделиться практическими результатами и показать открытые вопросы.
Мастер-классы по javascript в Москве и Санкт-Петербурге
1 мин
Предлагаю вашему вниманию мастер-классы по Javascript.
В апреле-мае пройдут мастер-классы по javascript в Москве и Санкт-Петербурге.
Даты — 24 и 25 апреля для Москвы, 29 и 30 мая для Санкт-Петербурга.
Все мастер-классы веду я, Илья Кантор ( javascript.ru, algolist.manual.ru, еще пара слов на странице мастер-классов).
Темы мастер-классов:
На мастер-классы приходят как начинающие, но желающие вырасти побыстрее, так и ведущие специалисты серьезных компаний.
Все говорят спасибо. Это не шутка, материала много и он интересный.
Мероприятие платное, но цена очень доступная.
Даже можно сказать, символическая.
Приходите, узнаете много нового.
Регистрация открыта на javascript.ru/mk, там же больше информации о мастер-классах.
В апреле-мае пройдут мастер-классы по javascript в Москве и Санкт-Петербурге.
Даты — 24 и 25 апреля для Москвы, 29 и 30 мая для Санкт-Петербурга.
Все мастер-классы веду я, Илья Кантор ( javascript.ru, algolist.manual.ru, еще пара слов на странице мастер-классов).
Темы мастер-классов:
- Профессиональное javascript-программирование.
- Сложный AJAX и COMET: тонкости Web 2.0.
- Мастер-класс по клиентской оптимизации.
- Секреты jQuery.
На мастер-классы приходят как начинающие, но желающие вырасти побыстрее, так и ведущие специалисты серьезных компаний.
Все говорят спасибо. Это не шутка, материала много и он интересный.
Мероприятие платное, но цена очень доступная.
Даже можно сказать, символическая.
Приходите, узнаете много нового.
Регистрация открыта на javascript.ru/mk, там же больше информации о мастер-классах.
Турнирная таблица на SVG
3 мин
Решил сделать интерактивную турнирную таблицу-график для футболного чемпионата России. Вот такую:
Выбор инструментов был прост:
В итоге выбор естественным образом пал на связку SVG+JavaScript (что, правда, исключило IE из списка поддерживаемых браузеров).
Выбор инструментов был прост:
- табличка для браузера — значит, что-нибудь из вэб-технологий;
- нужна векторная графика;
- никаких закрытых либо сложных приложений при создании — я все-таки не вэб-дизайнер.
В итоге выбор естественным образом пал на связку SVG+JavaScript (что, правда, исключило IE из списка поддерживаемых браузеров).
Использование URI-Fragment адресации в RIA приложениях на основе ExtJS и Mootools
7 мин
URI-fragments (они же fragment identifiers, hash, закладки, якоря) в последнее время стали активно использоваться в интерактивных веб-приложениях как удобное средство для указания прямых ссылок на различные элементы интерфейса и состояния приложения. Наиболее ярким примером использования fragment-адресации является GMail. Как Вы могли заметить, папки Входящие, Отправленные, Черновики имеют ссылки, оканчиващиеся на #inbox, #sent, #drafts. Переход между ними не приводит к перезагрузке всей страницы (обновляется только список писем), но в то же время при открытии каждой из них в отдельном окне/вкладке мы сразу же попадаем на искомую страницу.
Реализации такого удобного механизма навигации средствами JavaScript посвящена данная статья
Реализации такого удобного механизма навигации средствами JavaScript посвящена данная статья
Functions are almost objects
1 мин
I was impressed! Вроде бы все понятно и давно известно, но в голову не приходило.
Взято из Secrets of JavaScript ninja by John Resig
var store = {
id: 1,
cache: {},
add: function( fn ) {
if ( !fn.uuid ) {
fn.uuid = store.id++;
return !!(store.cache[fn.uuid] = fn);
}
}
};
function ninja(){}
assert( store.add( ninja ), "Function was safely added." );
assert( !store.add( ninja ), "But it was only added once." );
Взято из Secrets of JavaScript ninja by John Resig
Притча о пропавшем Стэке
3 мин
— Здравствуй, дружок…
— Дяденька, вы снова расскажете мне сказку?
— Конечно! Какой умненький мальчик!
— А про что?
— М… сегодня я расскажу тебе о том, куда пропадают чересчур самостоятельные мальчики вроде тебя…
— Э! Что значит пропадают?
— Вот то и значит… На, держи огнелиса *протянул, держа за хвост, пылающее пламенем животное* Только осторожно — он горячий!
— Ай-ай-ай! Он брыкается!
— Посади на него огненного жука — мигом успокоится.
— Класс! Действует!
— Ато! Теперь скажи ему:
— Дяденька, вы снова расскажете мне сказку?
— Конечно! Какой умненький мальчик!
— А про что?
— М… сегодня я расскажу тебе о том, куда пропадают чересчур самостоятельные мальчики вроде тебя…
— Э! Что значит пропадают?
— Вот то и значит… На, держи огнелиса *протянул, держа за хвост, пылающее пламенем животное* Только осторожно — он горячий!
— Ай-ай-ай! Он брыкается!
— Посади на него огненного жука — мигом успокоится.
— Класс! Действует!
— Ато! Теперь скажи ему:
function throwException( ){
(void 0)()
}
throwException()
Притча о перехвате ошибок
4 мин
— Здравствуй, дружок. Хочешь, я расскажу тебе сказку? }:-]
— Конечно, дяденька, а какую? *_*
— Я расскажу тебе как делают детей ^_^'
— ого, как интересно! @_@
— Так вот, слушай. Дети появляются вследствие долгого и изнуряющего процесса разной степени нецензурности. Сейчас я поведаю тебе как появился на свет мой сын %-)
— А вы меня с ним познакомите? *о*
— Не торопи события. Обо всём по порядку. Однажды я наваял такой код:
— Конечно, дяденька, а какую? *_*
— Я расскажу тебе как делают детей ^_^'
— ого, как интересно! @_@
— Так вот, слушай. Дети появляются вследствие долгого и изнуряющего процесса разной степени нецензурности. Сейчас я поведаю тебе как появился на свет мой сын %-)
— А вы меня с ним познакомите? *о*
— Не торопи события. Обо всём по порядку. Однажды я наваял такой код:
- try {
- throw new Error
- } catch( e ){
- if( e != false ) throw e
- }
Ближайшие события
Javascript для Notepad++
4 мин
Здравствуй Храбрачеловек,
сегодня я решил поделиться с тобой Plugin'ом для Notepad++, который позволит тебе спомощью JavaScript автоматизировать некоторые действия над текстом
сегодня я решил поделиться с тобой Plugin'ом для Notepad++, который позволит тебе спомощью JavaScript автоматизировать некоторые действия над текстом
Перегрузка функций в JS
4 мин
Как известно, в JavaScript нельзя создать несколько функций, различающихся только списком параметров: последняя созданная перезапишет предыдущие. Про различие на уровне типов параметров говорить не приходится вообще. Обычно, если программист хочет создать функцию с множественным интерфейсом, он пишет что-то вроде такого:
Пока пример выглядит не очень страшно, однако интерфейсов может со временем стать заметно больше, тогда функция станет плохочитаема. Посмотрим, что можно с этим сделать.
- // getRectangleArea(x1, y1, x2, y2) или
- // getRectangleArea(width, height)
- function getRectangleArea(x1, y1, x2, y2) {
- if(arguments.length==2) return x1*y1;
- return (x2-x1)*(y2-y1);
- }
* This source code was highlighted with Source Code Highlighter.Пока пример выглядит не очень страшно, однако интерфейсов может со временем стать заметно больше, тогда функция станет плохочитаема. Посмотрим, что можно с этим сделать.
Практический опыт создания Dojo виджетов. Оптимизация производительности Javascript кода
6 мин
Доброго времени суток, хабрасообщество.
Хочу поделиться с вами некоторой полезной, на мой взгляд, информацией, которой будет интересна тем, кто разрабатывает или планирует начать разрабатывать свои Dojo виджеты. Хочу сразу предупредить, что в данной статье я не буду рассказывать как поэтапно создать свой виджет Dojo (однако, если сообществу будет интересна и эта тема, я надеюсь изложить ее в отдельной статье). Вместо этого я хочу остановиться на основных моментах и принципах, которые следует знать и учитывать каждому, кто занимается разработкой Dojo виджетов или имеет какое-либо отношение к этой теме.
Хочу поделиться с вами некоторой полезной, на мой взгляд, информацией, которой будет интересна тем, кто разрабатывает или планирует начать разрабатывать свои Dojo виджеты. Хочу сразу предупредить, что в данной статье я не буду рассказывать как поэтапно создать свой виджет Dojo (однако, если сообществу будет интересна и эта тема, я надеюсь изложить ее в отдельной статье). Вместо этого я хочу остановиться на основных моментах и принципах, которые следует знать и учитывать каждому, кто занимается разработкой Dojo виджетов или имеет какое-либо отношение к этой теме.
dynaTrace AJAX — мощный профайлер JS
3 мин
Недавно в обсуждении статьи шкала браузерности разговор зашел о том, что IE не так уж убог и его должен иметь на своем компьютере каждый уважающий себя веб-разработчик не только для того, чтобы смотреть не съехала ли там верстка, но и потому что для IE созданы, я считаю, лучшие на данные момент средства для дебага и профилирования JS.
Одно из таких средств — это dynaTrace Ajax, скачать который можно здесь.
Одно из таких средств — это dynaTrace Ajax, скачать который можно здесь.
Оптимизация JSON датасетов (массивов записей)
11 мин
Под датасетом будем понимать массив записей JavaScript:
Это обычное JavaScript представление некоторой части таблицы (или выборки) из реляционной базы данных: имена свойств соответствуют именам столбцов, значения свойств — значениям полей записи.
var dataset = [
{ foo: 'xxx', bar: xxx' },
{ foo: 'yyy', bar: 'yyy' },
...
{ foo: 'zzz', bar: 'zzz' }
];
Это обычное JavaScript представление некоторой части таблицы (или выборки) из реляционной базы данных: имена свойств соответствуют именам столбцов, значения свойств — значениям полей записи.
Google Code Playground — инструмент для совместного тестирования примеров на Javascript
5 мин
Если знание начинают использовать
не по назначению —
это общественно полезное знание.
Прошёл год после открывания публике инструмента Google Code Playground. Времени прошло много, используется он мало. На самом же деле, у него есть всё, чтобы эффективно использоваться не по назначению.
Инструмент предназначен для демонстрации и онлайновой отладки примеров Гугл-кода (JS+HTML+CSS) в браузере. Старательно выложены сотни примеров и написана документация к ним. Сейчас нам всё это будет не нужно, кроме использования самого движка, позволяющего редактировать, тестировать и сохранять не чьи-нибудь, а свои примеры кода.
не по назначению —
это общественно полезное знание.
Прошёл год после открывания публике инструмента Google Code Playground. Времени прошло много, используется он мало. На самом же деле, у него есть всё, чтобы эффективно использоваться не по назначению.
Инструмент предназначен для демонстрации и онлайновой отладки примеров Гугл-кода (JS+HTML+CSS) в браузере. Старательно выложены сотни примеров и написана документация к ним. Сейчас нам всё это будет не нужно, кроме использования самого движка, позволяющего редактировать, тестировать и сохранять не чьи-нибудь, а свои примеры кода.
Асинхронное программирование: Примитивы высокого уровня
2 мин
После появления асинхронного каркаса Twisted концепция отложенного результата (continuable) стала очень популярной.
Прежде всего рекомендую прочитать статьи: Асинхронное программирование: концепция Deferred, Deffered для JavaScript.
Но пользоваться отложенными результатами не очень удобно без абстракций более высокого уровня. И теперь у нас есть каркас Do.
Прежде всего рекомендую прочитать статьи: Асинхронное программирование: концепция Deferred, Deffered для JavaScript.
Но пользоваться отложенными результатами не очень удобно без абстракций более высокого уровня. И теперь у нас есть каркас Do.