Не так давно из лекции Дугласа Крокфорда я узнал об очень интересной технике «шаблонизирования» в JavaScript. Основная цель техники заключается в том, что мы получаем с сервера JSON и потом как-то формируем из этого HTML. Во многих ситуациях этот процесс оставляет желать лучшего потому, что формирование HTML происходит или с помощью конкатенации строк или ряда операций createElement, appendChild и т.п. Возможно многие уже знают об этом решении, но для тех кто не знал надеюсь будет полезно.
Дмитрий Левашов @dio
User
jQuery template engine
2 min
11KНачалось все с прочтения вот этого поста.
Идея мне очень понравилась, и я, недолго думая, начал искать в интернете готовые решения «шаблонизаторов» для jQuery.
Идея мне очень понравилась, и я, недолго думая, начал искать в интернете готовые решения «шаблонизаторов» для jQuery.
+25
Скринкаст по data mapping
1 min
2.7KЗаписал скринкаст по теме data mapping. Скринкаст ориентирован на .Net но будет полезен и другим разработчикам, т.к. покрывает весьма универсальную задачу в разработке корпоративных систем. В скринкасте объяснено что такое data mapping, какими средствами оно реализовано, показаны примеры с использованием Altova MapForce.
Слайды для данного скринкаста можно найти тут, примеры кода находятся тут. Согласно опросу на Хабре, этот и последующие скринкасты я буду производить в формате 720p. Спасибо всем, кто проголосовал!
Слайды для данного скринкаста можно найти тут, примеры кода находятся тут. Согласно опросу на Хабре, этот и последующие скринкасты я буду производить в формате 720p. Спасибо всем, кто проголосовал!
+17
eBay без заморочек
5 min
32KПривет, друзья!
С вами снова EbayToday.
В первой статье мы рассказали о нашем сервисе, коснулись вкратце своих преимуществ и постарались не забыть о недостатках. Когда число комментариев к статье перевалило за вторую сотню, мы решили не останавливаться на написанном и двинуться дальше.
В этой статье мы глубже коснемся преимуществ сервиса и расскажем о том, как нам удалось сделать сервис, покупать через который удобнее и не намного дороже, чем через сам eBay.
С вами снова EbayToday.
В первой статье мы рассказали о нашем сервисе, коснулись вкратце своих преимуществ и постарались не забыть о недостатках. Когда число комментариев к статье перевалило за вторую сотню, мы решили не останавливаться на написанном и двинуться дальше.
В этой статье мы глубже коснемся преимуществ сервиса и расскажем о том, как нам удалось сделать сервис, покупать через который удобнее и не намного дороже, чем через сам eBay.
+35
Как создавалась Айчиталка. Часть 1: движок
10 min
28KСовсем недавно мы выпустили в свет первую бета-версию нашей онлайн-читалки, с которой можно ознакомиться, почитав книгу Михаила Лермонтова «Герой нашего времени». Эта читалка — результат почти семимесячной работы, пять из которых ушло только на разработку движка. Казалось бы, в интернете уже есть бесплатные и открытые JavaScript-движки для чтения электронных книг и такой долгий срок может вызвать сомнения в профпригодности разработчика (то есть меня). Но есть одно большое и жирное «НО». Мы поставили перед собой слишком амбициозную и трудновыполнимую задачу: мы хотели использовать один и тот же движок на разных устройствах, в том числе маломощных, таких как айфон или электронная читалка.
В чём же заключается трудновыполнимость задачи? В первую очередь — в очень низкой скорости работы веб-приложений на айфоне. Например, мобильный Сафари по моим прикидкам работает раз в 100 медленнее своего десктопного собрата. Если на декстопе одна и та же операция выполняется 10 мс и совершенно незаметна для пользователя, то на айфоне она может выполняться больше секунды. Для сравнения: первая версия движка разбивала небольшую главу на страницы примерно за 15 секунд. Сейчас, спустя полгода, он делает то же самое менее, чем за секунду и вполне сносно работает в нашем приложении booq.
В этой статье я не буду заострять внимание на том, как сделать свою читалку, но поделюсь опытом оптимизации веб-приложения под айфон. Статья будет интересна не только разработчикам под мобильные устройства, но и обычным веб-технологам. Ведь если ваше приложение/сайт будет быстро работать на мобильном устройстве, то представьте, с какой скоростью оно будет работать на десктопе.
В чём же заключается трудновыполнимость задачи? В первую очередь — в очень низкой скорости работы веб-приложений на айфоне. Например, мобильный Сафари по моим прикидкам работает раз в 100 медленнее своего десктопного собрата. Если на декстопе одна и та же операция выполняется 10 мс и совершенно незаметна для пользователя, то на айфоне она может выполняться больше секунды. Для сравнения: первая версия движка разбивала небольшую главу на страницы примерно за 15 секунд. Сейчас, спустя полгода, он делает то же самое менее, чем за секунду и вполне сносно работает в нашем приложении booq.
В этой статье я не буду заострять внимание на том, как сделать свою читалку, но поделюсь опытом оптимизации веб-приложения под айфон. Статья будет интересна не только разработчикам под мобильные устройства, но и обычным веб-технологам. Ведь если ваше приложение/сайт будет быстро работать на мобильном устройстве, то представьте, с какой скоростью оно будет работать на десктопе.
+137
Html и Skype используем в своих приложениях
2 min
71KSkype уже наступает повсеместно. Особенно в череде последних событий с групповыми видеозвонками. Даже в нашем захудалом городке, у половины пользователей локальной сети стоит Skype. Почему бы не использовать его как дополнительную возможность для общения с клиентами? Он с легкостью обгонит и перегонит пользу от тех же ICQ или Jabber. Ну а про стоимость звонков, я вообще молчу, опсосы на своих роумингах иногда за минуту разговора снимали баснословные деньги. Так дайте же юзерам общаться через Skype, повысьте свой сервис.
+52
Javascript виджет авторизации OpenID
3 min
7KГде то полгода назад я сильно увлекся OpenID и всем что с ним связанно. Моим главным занятием в это время стало — неспешное чтение спецификаций, форумов, блогов и хабрапостов OpenID тематики.
Все знания, которые мной были получены за это время, я «материализовал» в проекте компании, в которой собственно я работаю.
Изучая спецификацию OpenID и прочих его расширениях (SREG, AX) и надстройках, мне пришла идея разработать JavaScript виджет со своим API-прослойкой, в помощь другим разработчикам нежелающим «коротать» дни и ночи изучая спеки различных способов авторизации и их расширений.
Собственно об этом далее.
Все знания, которые мной были получены за это время, я «материализовал» в проекте компании, в которой собственно я работаю.
Изучая спецификацию OpenID и прочих его расширениях (SREG, AX) и надстройках, мне пришла идея разработать JavaScript виджет со своим API-прослойкой, в помощь другим разработчикам нежелающим «коротать» дни и ночи изучая спеки различных способов авторизации и их расширений.
Собственно об этом далее.
+85
Предложение по добавлению связывания данных
4 min
1.9KTranslation
Привет всем!
Я разработчик из команды Microsoft ASP.NET. Наша команда выдвигает предложение по поддержке связывания данных (data linking) в jQuery и мы хотели бы услышать ваши отзывы.
Ниже я расскажу про связывание в общем плане, более подробное объяснение вы можете найти на специальной wiki-странице:
http://github.com/nje/jquery-datalink/wikis/jquery-data-linking-proposal
Мы создали прототип связывания данных и опубликовали его на github:
http://github.com/nje/jquery-datalink
Репозиторий включает в себя demo-contacts.html, который показывает использование связывание данных на практике и который так же использует ранее предложенную нами библиотеку шаблонов jQuery (jQuery templating library). Я предлагаю вам попробовать демонстрацию, так как примеры опубликованные в wiki и в этой статье всего лишь показывают работу с API и не передают всей полезности плагина так, как это делает демонстрация.
Термин “связывание данных” (data linking) используемый в статье означает: “автоматическое связывание поля одного объекта с полем другого объекта”. Это означает, что когда два объекта связаны, при изменении значения одного из объектов (источника) автоматически изменяется значение другого объекта (цели). Связывание может происходить между любыми двумя объектами, такими как простые объекты (plain objects), массивы, элементы DOM или плагины браузера.
Я разработчик из команды Microsoft ASP.NET. Наша команда выдвигает предложение по поддержке связывания данных (data linking) в jQuery и мы хотели бы услышать ваши отзывы.
Ниже я расскажу про связывание в общем плане, более подробное объяснение вы можете найти на специальной wiki-странице:
http://github.com/nje/jquery-datalink/wikis/jquery-data-linking-proposal
Мы создали прототип связывания данных и опубликовали его на github:
http://github.com/nje/jquery-datalink
Репозиторий включает в себя demo-contacts.html, который показывает использование связывание данных на практике и который так же использует ранее предложенную нами библиотеку шаблонов jQuery (jQuery templating library). Я предлагаю вам попробовать демонстрацию, так как примеры опубликованные в wiki и в этой статье всего лишь показывают работу с API и не передают всей полезности плагина так, как это делает демонстрация.
Термин “связывание данных” (data linking) используемый в статье означает: “автоматическое связывание поля одного объекта с полем другого объекта”. Это означает, что когда два объекта связаны, при изменении значения одного из объектов (источника) автоматически изменяется значение другого объекта (цели). Связывание может происходить между любыми двумя объектами, такими как простые объекты (plain objects), массивы, элементы DOM или плагины браузера.
+32
Finder component: найдите ваши файлы
5 min
3.8KTranslation
Дня два назад на github появился новый компонент для Symfony 2 под названием Finder. И вот сегодня в твиттере Фабьена я увидел ссылку на новый пост в его блоге об этом компоненте. Ну что ж, давайте разбираться. Под катом перевод поста Find your Files. Итак начнем.
+13
К вопросу о кроссбраузерных Data URI
8 min
9.8KВ погоне за оптимизацией сайтов захотел уменьшить количество запросов, не в ущерб размерам оптимизированных файлов.
Цель — передавать в одном файле изображения разных форматов, с разными настройками оптимизации.
Как средство, выбрал data uri и gzip'нутый css файл. Однако IE с data uri работают из рук вон плохо. Но в них есть mhtml. Существовавшая реализация не отвечала моим требованиям, т.к. приходилось 1 файл передавать два раза — раз для IE, в mhtml, и второй для всех остальных, в data uri. В поисках решения наткнулся на статью bolk'а, где описывалось решение для формата jpeg и некоторые теоретические выкладки для gif и png. После почти трехнедельного раскуривания манов мне удалось реализовать решение для gif и png и автоматизировать процесс для всех трех форматов.
Цель — передавать в одном файле изображения разных форматов, с разными настройками оптимизации.
Как средство, выбрал data uri и gzip'нутый css файл. Однако IE с data uri работают из рук вон плохо. Но в них есть mhtml. Существовавшая реализация не отвечала моим требованиям, т.к. приходилось 1 файл передавать два раза — раз для IE, в mhtml, и второй для всех остальных, в data uri. В поисках решения наткнулся на статью bolk'а, где описывалось решение для формата jpeg и некоторые теоретические выкладки для gif и png. После почти трехнедельного раскуривания манов мне удалось реализовать решение для gif и png и автоматизировать процесс для всех трех форматов.
+63
«LibCanvas» — фреймворк для работы с Javascript Canvas
7 min
14KЗдравствуй, Хабр! Думаю, люди, которые следят за моим творчеством, заметили, что я очень увлекся рисованием на Canvas в JavaScript. Возможно это немного излишне, но ничего не могу с собой поделать, уж очень нравится эта технология. Так нравится, что я аж буду выступать на конференции с докладом о ней (Пономаренко Павел).
Но это сейчас неважно, потому что я хочу презентовать фреймворк, который, хотя, только родился и еще не оброс функциональностью, но уже сейчас выглядит вполне завершенным, интересным и, главное, удобным.
Но это сейчас неважно, потому что я хочу презентовать фреймворк, который, хотя, только родился и еще не оброс функциональностью, но уже сейчас выглядит вполне завершенным, интересным и, главное, удобным.
+62
Верстка повторяющихся блоков
3 min
14KДовольно часто при верстке сайта возникает необходимость размещать блоки одинаковой ширины, но разной высоты в контейнере с переменной шириной (читай резиновом). Плюс на этот список может применяться фильтр, который JS-ом скрывает или показывает элементы списка, при этом он не должен разрушать «строки», верстку, или образовывать дыры, поэтому решения на таблицах не катят сразу. Простейший пример — каталог товаров:
+81
10+ удобных онлайн-редакторов для программистов
3 min
153KTranslation
Как у разработчика, очевидно, что ваш основной рабочий инструмент, который позволит вам быстро идею превратить в код: текстовый редактор. Время идёт, и теперь нам доступно множество онлайновых текстовых редакторов, которые могут помочь вам создавать свой код с любого компьютера, имеющего доступ в интернет. В этой статье рассмотрим более 10 таких редакторов.
Созданый в 2007 Петром Кронторадом (Petr Krontorad), Amy Editor продвинутый редактор с интерфейсом в стиле Mac. Amy Editor имеет в наличие кучу полезных опций, такие как нумерация строк, подсветка синтаксиса, сниппеты для более чем 20 языков, совместное использование и прочее.
» http://www.amyeditor.com
Amy Editor
Созданый в 2007 Петром Кронторадом (Petr Krontorad), Amy Editor продвинутый редактор с интерфейсом в стиле Mac. Amy Editor имеет в наличие кучу полезных опций, такие как нумерация строк, подсветка синтаксиса, сниппеты для более чем 20 языков, совместное использование и прочее.
» http://www.amyeditor.com
+94
QUnit. Тестирование javascript кода
5 min
64K Наткнулся вчера на этот инструмент и не смог пройти мимо, провел ночь за написанием тестов, а теперь хочу поделиться находкой. QUnit — это библиотека от разработчиков jQuery, позволяющая писать unit-тесты для кода на javascript. Удобна в использовании, ничего лишнего, осваивается за 20 минут, выгода от применения — колоссальная.
Самым нетерпеливым сразу ссылки:
Официальная документация на сайте jquery: docs.jquery.com/QUnit
Реальные примеры тестов (для модулей jquery): view.jquery.com/trunk/jquery/test/unit
Руководство для начинающих (англ): www.swift-lizard.com/2009/11/24/test-driven-development-with-jquery-qunit
Система распределенного тестирования (гениально и просто): testswarm.com
Под катом информация о преимуществах юнит-тестирования применительно к js и разбор возможностей библиотеки на примерах.
Самым нетерпеливым сразу ссылки:
Официальная документация на сайте jquery: docs.jquery.com/QUnit
Реальные примеры тестов (для модулей jquery): view.jquery.com/trunk/jquery/test/unit
Руководство для начинающих (англ): www.swift-lizard.com/2009/11/24/test-driven-development-with-jquery-qunit
Система распределенного тестирования (гениально и просто): testswarm.com
Под катом информация о преимуществах юнит-тестирования применительно к js и разбор возможностей библиотеки на примерах.
+65
Information
- Rating
- Does not participate
- Location
- Малаховка, Москва и Московская обл., Россия
- Registered
- Activity