Предположим, вам не нужен полноценный шаблонизатор для веб-проекта, но с другой стороны периодически встречаются места в коде, где хорошо бы отделить HTML от JavaScript-а. В таком случае, одним из решением может быть использование варианта самой простой шаблонизации на основе JavaScript.
Исходный код.
Демо
Рубрика «javascript» - 560
Импровизированный шаблонизатор на JavaScript
2012-05-13 в 12:39, admin, рубрики: javascript, quicktip, templates, Веб-разработкаDrag and drop изображений во Flash в браузере
2012-05-13 в 4:31, admin, рубрики: flash, javascript, Веб-разработка, Песочница, метки: drag and drop, flash, javascriptВ ходе тестирования своего сервиса собралось достаточное количество фидбека, что олдскульный способ загрузки файлов в приложение не уносит. Люди хотели drag and drop и пытались перетащить картинки прямо с рабочего стола. Приложение у нас занимает весь экран браузера и написано на флеше, так что прямого способа решить задачу не нашлось.
Поразмыслив и погуглив решили реализовать D&D хотя бы для хрома вот так:
Когда пользователь переключается с вкладки с приложением, т.е. она теряет фокус, поверх флешки накладывается div на который навешано событие отлова дропнутых файлов.
Затем через ExternalInterface изображение в виде ByteArray передается во flash, где оно декодируется и отображается.
Читать полностью »
Mobiscroll — кастомный select для мобильных сайтов и не только
2012-05-12 в 10:07, admin, рубрики: android, iOS, javascript, jquery plugins, jquery select, mobile development, метки: android, iOS, jquery plugins, jquery select 
К каждому, кто сталкивался с разработкой сайтов под iOS/Android/etc (или native-приложений через phonegap и иже с ним), рано или поздно наверняка приходило осознание того факта, что стандартные управляющие элементы форм не очень удобны для работы с touch-экранов.
И если input'ы и textarea вполне можно отрисовать с помощью css, то с селекторами ситуация гораздо более грустная — и не улучшить особо, и выбирать, например, дату, последовательным выбором трех выпадающих списков — занятие не из приятных.
Помогает в решении этой проблемы мультиплатформенный (обещают как минимум работу на iOS/Android, но с некоторыми помарками работает и на MeeGo — это из проверенного собственноручно) select-заменитель Mobiscroll, с некоторым трудом нагугленный мной пару недель назад.
Лица .тостер {javascript}: Фил и Лука
2012-05-11 в 14:05, admin, рубрики: .тостер, html5, javascript, Блог компании .тостер, конференция, фронт-энд, метки: .тостер, html5, javascript, конференция, фронт-энд 
Улыбающийся молодой человек на фотографии — никто иной, как Фил Хоксворт, технический директор студии R/GA, расположенной в Лондоне и занимающейся, фактически, всем: от создания стратегии digital-продвижения до выполнения сложных технических проектов под нужды заказчиков. И хотя сейчас Фил все меньше непосредственно пишет код и, все больше, координирует свою команду дизайнеров, верстальщиков и разработчиков, он признается в том, что грешен, и иногда флиртует с кодом, пока никто не видит.
Читать полностью »
Маленькая задача, вывести дату
2012-05-11 в 9:53, admin, рубрики: javascript, mail.ru, Веб-разработка, метки: javascript, mail.ruЯ хочу рассказать о простой задаче — вывод даты на главной странице Mail.Ru. Маленькая задача, нетривиальное решение.
Решение в лоб:
function print_date(date){
return date.getDate() + ' ' + getMonth(date.getMonth()) …
}
print_date( new Date() );
Маленькая задача — вывести дату
2012-05-11 в 9:53, admin, рубрики: javascript, mail.ru, Веб-разработка, метки: javascript, mail.ruЯ хочу рассказать о простой задаче — вывод даты на главной странице Mail.Ru. Маленькая задача, нетривиальное решение.
Решение в лоб:
function print_date(date){
return date.getDate() + ' ' + getMonth(date.getMonth()) …
}
print_date( new Date() );
Работа с локальным хранилищем, как с объектом? Легко!
2012-05-10 в 17:08, admin, рубрики: javascript, localStorage, sessionstorage, storage, Веб-разработка, метки: localStorage, sessionstorage, storageКогда появился localStorage я был рад, как слон, но, немногим позже, после подробного изучения вопроса, я несколько разочаровался: там могут храниться только строки, а об объектах можно было забыть. Приходилось превращать их в строки для хранения, приходилось обратно конвертировать строку в объект для работы с ним, затем опять конвертировать в строку, чтоб сохранить. Не спорю, есть замечательные библиотеки, позволяющие манипулировать хранилищем максимально просто, но вызывать функции как-то не очень хотелось.
localStorage = { a: {b: 1}, c: { d:2 }}
localStorage.a.b = 3;
Круто было бы, не так ли?
Относительно давно, где-то около полугода назад я задался вопросом: как же, блин, сделать так, чтоб можно было работать с localStorage вообще без функций, чисто как с объектом. Challenge accepted!
Как говорит небезызвестный Геша: “Всё, я здзелал”.
Читать полностью »
eachDeferred — отложенная обработка коллекции, one by one
2012-05-10 в 15:54, admin, рубрики: deferred, each, javascript, jquery, Веб-разработка, метки: deferred, each, javascript, jquery В ходе разработки текущего энтерпрайз-проекта, понадобилось реализовать отложенную обработку коллекции элементов jQuery — имелся набор виджетов, содержимое которых нужно было загрузить по очереди, причем загрузка происходила асинхронно. Пришлось написать небольшое расширение к $.fn — eachDeferred.
Читать полностью »
Пакеты в JavaScript — jpack
2012-05-10 в 14:14, admin, рубрики: javascript, Песочница, метки: javascriptРазговор пойдет именно про JavaScript и ничего больше.
Давно мучаюсь от мысли, что часто приходится переносить функции из проекта в проект и, поскольку я не очень-то люблю файлики типа common.js или utils.js, где свалено всё в кучу, иногда даже приходится держать эти функции в разных файлах. В этом-то и состоит суть проблемы. Хочется иметь большую переносимость, при этом не загромождая глобальную область видимости и, соответствено, не использую префиксов функций.
Читать полностью »
Улучшаем «бесконечный скроллинг»
2012-05-10 в 10:46, admin, рубрики: css, html5, javascript, scroll, Юзабилити в IT, метки: css, html5, javascript, scrollВ 2011 году очень модно было (по-моему, эта мода пошла от Фейсбука) делать у себя на сайтах «бесконечный скроллинг»: это когда пользователь крутит-крутит колесом мыши, и всё новые результаты поиска подгружаются Аяксом внизу страницы, превращая обычный скроллинг в бесконечный и вызывая у столкнувшегося с этим в первый раз пользователя «когнитивный диссонанс».
Также недавно я видел на этом сайте статью, в которой автор выражал своё недовольство «бесконечным скроллингом» и призывал использовать старую добрую «паджинацию».
Читать полностью »