JavaScript на Диване – мой lightning talk на JSConf

Рубрика: Development, JavaScript/Ajax | 21 February 2012, 12:02 | Vadim Voituk

Про просьбе организаторов последней JSConf выкладываю свою презентацию и черновик доклада своего lightning talk под названием “JavaScript на Диване”. [Далее...]

JSON Lint tool using Node.js

Рубрика: Development, JavaScript/Ajax | 8 February 2011, 22:19 | Vadim Voituk

История одной занозы в … или небольшая заметка о том, как быстро написать что-то полезное на node.js

В последнее время много и часто приходится работать с HTTP-REST-JSON  API, в результате чего назрела необходимость в нормальном client tool для этого API. И если на роль полноценного HTTP-REST-клиента претендовать не приходится (первенство тут отдаем старому доброму консольному curl), то вот с “красивым” форматированием результата вызова API – приходилось повозиться.
Порою доходило до того, что ввиду сложности структуры результата, приходилось запускать developers console WebKit-a, копировать в буфер обмена строку-результат запроса, и выполнять  что-то вроде:

console.log(/*...long...long...long...string...goes...here..*/)

Во процессе борьбы с таким неудобством, в какой-то момент в недрах сети была найдена утилита jsonlint, которая умела структурировано выводить на экран JSON-обьект (такой себе аналог xmllint), но и с ней не сложилось – какие-то ее зависимости категорично отказывались устанавливаться посредством  MacPorts.

Вконце концов было принято решение набросать аналогичный tool самостоятельно.
Среди кандидатов на язык разработки подобной мелочи были Groovy, Groovy++, php и Node.JS).
Ввиду JavaScript-nature поставленной задачи грех было не воспользоваться Node.JS – и выбор оправдал мои ожидания.
Всего 30 минут “курения” node.js Manual & Documentation”, 10 строк кода, и нужнейшая утилита “в кармане”.

Исходный код приводить тут не буду – его можно поглядеть на github, покажу лишь несколько примеров использования полученной мини-утилиты на примере Twitter API (команды вводить unix-консоли):

1. Информации о Twitter-аккаунте конкретного пользователя:
curl -s "http://api.twitter.com/1/users/show/voituk.json" | jsonlint | less

2. Поиск в Twitter:
curl -s "http://search.twitter.com/search.json?q=@voituk" | jsonlint | less

Установить или обновить такую полезную “тулзу” можно простой консольной командой:
curl https://github.com/voituk/Misc/raw/master/nodejs/jsonlint > ~/bin/jsonlint && chmod a+x !#:3
(как это сделать на Windows – не спрашивайте ибо я даже не представляю как установить на Windows сам Node.JS)

Вот так вот неожиданно все получилось легко и просто посредством Node.JS.
Критика и пожелания приветствуются в коментариях.

Code WTF: JavaScript HTML entities

Рубрика: JavaScript/Ajax, Юмор | 2 July 2009, 10:49 | Vadim Voituk

Извините за “неформат” для данного блога, но не смог удержаться.
Вот так вот мой “юннат” реализует замену html-entities на JavaScript:


function properHtmlFromText(text){
	while (text.search(/\</) != -1)
		text = text.replace(/\</, '&lt;');
	while (text.search(/\&/) != -1)
		text = text.replace(/\&/, '&amp;');
	while (text.search(/\r/) != -1)
		text = text.replace(/\r/, '');
	while (text.search(/\n/) != -1)
		text = text.replace(/\n/, '<br />');
	return text;
}

Как увидел – плакал…
Наверное все-таки будем возобновлять ежедневные code-review…

P.S. В комментариях предлагаю поделиться “правильным” решением :)

JavaScript applet loader.

Рубрика: Development, Java, JavaScript/Ajax | 6 February 2009, 13:50 | juriy

У каждого разработчика есть свои маленькие “заморочки” по поводу того как должно выглядеть приложение. Одна из моих любимых: пользователь должен знать минимум о том, как работает приложение и на каких технологиях оно построено. Взять, к примеру, Flash. Загружается тихонько в окне браузера, крутит пользователю картинки или видео и до тех пор, пока пользователь не начнет по нему кликать правой кнопкой, не признаЕтся кто он такой.

С другой стороны Java. Вот тебе пользователь раз логотип при загрузке апплета, да побольше, побольше, а если ты вдруг забыл про то, что работаешь с великой и могучей Java, мы тебе иконку в трей кинем, чтобы он тебе оттуда напоминал что пора качать новую версию.
Вобщем, вы мою позицию поняли.

Недавно я задался вопросом, как организовать загрузку апплета на странице так, чтобы пользователь не увидел экрана загрузки. Вместо него я бы хотел, к примеру, разместить логотип и progress bar (не настоящий, а просто картинку, которая показывает, что процесс идет). Второе обязательное требование: чтобы приложение отображалось, как только GUI прорисован. Мы не хотим заставлять пользователя ждать лишнее время.
[Далее...]

Костыли для апплетов

Рубрика: Java, JavaScript/Ajax | 9 September 2008, 09:54 | juriy

Вам приходилось слышать в адрес апплетов выражение: “dead man walking”? Апплеты – часть Java платформы, задуманная, как мощнейшее средство, позволяющее проинтегрировать Java прямо в web страницу, практически полностью теряющее свои достоинства из-за тонн ограничений, которые на них возложены.
Последние несколько дней я бился над вопросом: как заставить апплет “выглянуть в мир”, за параноидальным прокси моего офиса.
[Далее...]

Аналог jQuery.ready() в Prototype.js

Рубрика: JavaScript/Ajax | 10 June 2008, 23:55 | Vadim Voituk

Недавно впервые удалось попробовать использовать JavaScript-библиотеку jQuery.

Из того, что понравилось сразу – это возможность выполнять JavaScript-код не по событию полной загрузки страницы (window.onLoad), а сразу после загрузки и инициализации DOM-дерева. Т.е. можно уже выполнять манипуляции с DOM-деревом не дожидаясь загрузки стилей, изображений и остальных медиа-компонентов.

В jQuery реализуется это 2-мя способами:

$(document).ready(function(){...})

и в сокращенной нотации

$((function(){...})

Но так как я являюсь давним пользователем prototype.js  – сразу же захотелось такую же возможность и в нем. Как оказалось в версии 1.6 она уже есть, и использовать её можно таким образом:

document.observe('dom:loaded', function(){ ... })

или

Event.observe(document, 'dom:loaded', function(){ ... })

Работоспособность проверял на Prototype 1.6.0.2 в Firefox3, Internet Explorer 6 и Safari (Win+Mac).

Java Deployment Toolkit

Рубрика: Development, Java, JavaScript/Ajax | 28 May 2008, 10:55 | Vadim Voituk

Вместе с выходом беты Java Development Kit 6u10, Sun анонсировали и выход вспомогательной, но IMHO очень полезной JavaScript-библиотеки  Java Deployment Toolkit.

Назначение библиотеки – сделать развертывание и запуск Java-приложений в среде Web (апплетов, WebStart-приложений) более простой и комфортной.
При этом библиотека берет на себя задачи по определению установленных JRE, проверки соответствия их версий минимальным требуемым приложением, установке обновлений (если необходимо) и конечно же кроссбраузерного добавления обьектов на страницу.
Получается такой себе аналог SWFObject для Java.

Использовать Java Deployment Toolkit  очень просто – достаточно подключить на web-страницу единственный JavaScript-файл:
[javascript]<script src=”http://java.com/js/deployJava.js”></script>[/javascript]

Пример добавления аплета на страницу будет выглядеть так:

deployJava.runApplet({codebase:"http://voituk.kiev.ua/demo/",
  archive:"TumbleItemProject.jar", code:"components/TumbleItem.class",
  width:"600", Height:"95"},
{maxwidth:120, nimgs:17, offset:-57, img:"images/tumble"}, "1.5")

где первый параметр метода runApplet() – параметры тэга <APPLET>,
второй – параметры, передаваемые самому апплету (значения <PARAM>),
третий – минимальная версия JRE необходимая для запуска апплета.

Что  по cути отличается от использования старого доброго тега <APPLET> только формой нотации (JSON вместо HTML).

При этом, при попытке зайти на страницу с апплетом с помощью браузера, без установленного (или с устаревшим) Java Plugin, будет предложено установить последнюю версию оного.

Новые эксперименты от Google

Рубрика: Google, JavaScript/Ajax | 11 February 2008, 16:11 | Артем Волхонский

Пользуясь в очередной раз поиском наткнулся на один линк который до этого или не замечал или его попросту небыло. Дословно линк называется “Попробуйте воспользоваться экспериментальной версией поиска Google“. Как я мог пропустить такой заманчивый линк :) Кто не хочет немного заглянуть в будущее и узнать как будет выглядеть гугль? Вообщем полез разбираться и забыл в итоге что вообще искал на гугле, но не пожалел.

Итак, сам линк выводится в результатах поиска в самом низу возле нижней строки поиска, нажимаем и попадаем на страничку http://www.google.com.ua/experimental/
Суть проекта в чем. Можно принять участие в разработке новых фишек на гугле. Среди тех которые в разработке есть очень много интересных, по крайней мере для меня, но думаю каждый найдет что-то и для себя, то чего ему очень нехватало все это время. Полный перечень приводить не буду, зайдите сами гляньте, как говорится лучше один раз увидеть.

Например “Keyword suggestions”. Позволяет увидеть результаты поиска по мере набора.
Или “Keyboard shortcuts” из названия понятно что за фишка. Она позволяет пользоваться горячими клавишами. Должен заметить очень удобно :).
Ajax рулит вообщем. Одно огорчило некоторые фишки у меня не работали и одновременно можно попробовать только одну, но это все еще в разработке поэтому жаловаться грех.
Советую всем присоединиться, тем более можно выставить свою оценку для каждой фишки и тем самым почувствовать себя участником грандиозного проекта :)

Около 2х месяцев назад мне поручили разработать систему сбора и первичного анализа данных о поведении пользователей определенных ресурсов.
Само собой стал вопрос о визуализации этих данных и отчетов, построенных по ним.

Для построения полноценного современного web-интерфейса были выбран набор библиотек и компонентов, которым хочу с вами и поделиться. [Далее...]

Покажу на небольшом примере каким образом можно с помощью Google Feed API быстро написать widget “Последние статьи” к своему сайту/блогу.

RSS или Atom по сути является XML-форматом достаточно простой структуры, потому разбор такого документа средствами встроенного в баузер JavaScript ничего сложного из себя не представляет.
Сложнее приходится с загрузкой RSS feed-а ввиду того, что загружать данные посредством Ajax можно только с того домена, с которого был загружен сам JavaScript скрипт.
Вот тут на помощь приходит Google Feed API -с его помощью из JavaScript на странице можно получить доступ к любому RSS-потоку, проиндексированному Google Feedfetcher (эдакий Google Bot только для RSS), а ввиду повального использования Google Reader – можно смело утверждать что таким образом доступен любой RSS-фид. [Далее...]

Страница 1 из 212