2013-07-30

Node JS

программирование, JavaScript

Наконец, плотно пришлось познакомиться с Node.js. Первые впечатления вполне позитивные, хотя, складывается впечатления, что ребята, создавшие эту штуку еще большие извращенцы чем я, а уж я то себя считал законченным JavaScript маньяком.

Если очень кратко, то основой node.js является JavaScript движек - тот же самый, что крутится в Google Crome. Вот только его заставили работать на стороне сервера. Всё пишется на JavaScript. Хотя, нет, все работает на JavaScript - писать код можно на производных JS, например на CoffeeScript - эти извращенцы взяли и лишили JavaScript своих фигурных кавычек превратив его почти что в Python. Сам CoffeeScript затем также компилируется в JavaScript и затем уже выполняется. Есть для node.js и веб фреймфорк - называется Express - явный закос под Ruby on Rails и Jango.

Шаблоны можно писать с использованием различных шаблонных движков, например, Jade или EJS.

Так как везде используется JavaScript то код получается на редкость компактный.

Еще стоит заметить, что для того чтобы создать приложение и запустить вообще не нужен веб сервер - node.js, сам по себе, имеет возможности создать вебсервер буквально нескольким строчками кода. В общем, штука презабавная, а главное, довольно простая, правда, только для тех кто уже хорошо владеет JavaScript.

 

Оставить комментарий

 
  2012-02-29

VML в IE8

JavaScript, программирование, ztools

Заметил, что моя векторная библиотечка не хочет работать в восьмом эксплорере. При этом в Интернете вообще мало примеров работы VML которые бы оставались работоспособными в этом замечательном браузере. Даже на сайте Microsoft примеры VML которые прекрасно работали в шестой и седьмой версии напрочь отказываются работать в восьмерке.

При этом, вроде бы, иногда, что-то как-то работает в режиме совместимости, но не всегда, и только при определенных условиях типа наличия или отсутствия DOCTYPE и даже версии Service Pack.

Убив день на исследования я так ничего не выяснил. Кто то говорит что нужно переделать все размеры в заданные явно в пикселях, кто-то указывает на баг в количестве каскадных таблиц в IE. Каждый раз когда я, наконец, думал, что локализовал проблему она появлялась с другой стороны.

И вот когда я уже почти собрался переделать код на вывод VML в отдельном iframe который бы работал только в режиме совместимости, я нашел код который работает всегда и всезде во всех режимах - это оказался все тот же raphael. Дмитрий Барановский нашел способ обуздать IE8 - весьма неочевидным и почти магическим способом он заставил это всё работать как надо.

Обновлил свой пример для работы c VML.

 

Оставить комментарий

 
  2012-01-14

Интересная JavaScript библиотека

JavaScript, программирование

Набрёл на интересную бублиотечку для создания простых трехмерных визуализаций с использованием VML. Как следстивие использовазония VML работает это только в Internet Explorer. Интересно, можно ли малой кровью сделать для неё SVG реализацию чтобы она стала полностью кроссбраузерной?

 

Оставить комментарий

 
  2012-01-05

Фракталы на JavaScript, продолжение

JavaScript, программирование, ztools

После того, как фрактал в примере получился ну архи ме-е-е-е-е-дленным, решил немного исправить ситуацию. Все дело в том, что данную программку я написал как демо для объекта z.Canvas из z.Tools а z.Canvas - это на самом деле хелпер, который рисует графические примитивы при при помощи SVG и VML в зависимости от того, что доступно в текущем браезере. Идея была сделать именно холст, на котором можно было бы рисовать и в Internet Explorer и во всех остальных браузерах, ведь IE, как известно, до девятой версии не поддерживает SVG. Как следствие, каждый примитив на этом "холсте" будет занимать память, и если нарисовать фрактал из прямоугольников на холсте 300 на 300 пикселей, то компьютеру придется выделить память для девяносто тысяч маленьких объектов, само по себе это не сильно много, но всё равно, значительно тормозит весь процесс.

Переделать это дело на "настоящий" HTML5 canvas было делом нескольких минут, вот она, версия на Canvas, работает значительно быстрее и уже не жрет большого количества памяти.

Уже выложив, придумал, как ещё немного ускорить процесс рисования - сейчас, каждая точка рисуется в отдельном потоке через setTimeOut а это тоже страшно медленно - если делать без setTimeout процесс "подвиснет" пока не завершится рассчет фрактала, но можно сделать, чтобы рисовалась не точка но целая линия - это ускорит весь процесс без "зависания" процесса рисования.

 

Оставить комментарий

 
  2012-01-03

Фракталы на Javascript

JavaScript, программирование, ztools

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

 

Коментариев: 3

 
  2010-12-14

Графики на SVG/VML

программирование, JavaScript, ztools

Мне никак дает покоя Google Charts...

Наиболее популярными библиотеками для построения графиков на сегодняшний день являются JPGraph и Google Charts. Решение от Google - замечательное, удобное, простое, графики очень симпатичные. Однако, все графики генерируются на чужом сервере (речь идет о графиках построенных через URL API). Пользователю разрешается создать ограниченное количество графиков а потом его могут забанить. Конечно, это количество большое, но меня немного смущает сама возможность быть забаненным из за превышения количества показов. Кроме того, сервер гугла я не контролирую и никто не может гарантировать, что этот сервис будет работать вечно, или что завтра на моих графиках не появится реклама, или внешний вид этих графиков не будет изменен на тот, который мне не нравится.

Между тем, задача сделать график на экране компьютера под силу школьнику освоившему курс информатики (мы такое, помню делали в старших классах). Так зачем же отдавать такие "сложные" вычисления серверу гугла?

JPGpaph дает возможность создавать графические изображения на своем сервере, но все равно это — графические изображения, со всеми присущими графическим изображениям ограничениями.

У растровых графиков есть один недостаток — их полная неинтерактивность. На растровый график невозможно добавить эффекты анимации при наведении мышкой, нельзя добавить гиперссылки (imagemap не в счет). Так как изначально природа графиков векторная — лучшим решением будет использовать векторный движёк вместо растрового. У вектора есть несколько неоспоримых преимуществ - не нужно передавать изображения по сравнительно узким каналам связи - передается только сама информация для построения графика, при этом рендеринг изображения происходит на машине клиента.

На сегодняшний день в вебе наиболее популярными являются несколько технологий - Adobe Flash, Microsoft Silverlight и Canvas/SVG/VML. Выбирая между Canvas и SVG я отдаю предпочтение последнему так как эта технология позволяет создавать по настоящему интерактивные эффекты и ближе к VML используемому в браузерах от Microsoft.

Используя ztools создал несколько компонентов для построения различных графиков и диаграмм:

 

Конечно, эти компоненты еще не совершенны, это даже не бета версия. Но уже лучше чем ничего. Главным отличием от аналогичных являются: открытость исходного кода, простота, и (надеюсь) удобство использования. Замечания, пожелания, багрепорты и фичреквесты приветствуются.

 

 

Коментариев: 1

 
  2010-12-06

Векторные часики

программирование, JavaScript, ztools

Для одного из проектов сделал вот такие вот часики. Они должны работать во всех популярных браузерах включая IE6+, FireFox, Safary, Opera. Для визуализации в Internet Explorer используется VML для других браузеров SVG.

 
 

Оставить комментарий

 
  2010-11-11

Как узнать действующее значение стиля

howto, JavaScript

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

В Internet Explorer для этого можно воспользоваться свойстом currentStyle
var elem1 = document.getElementById("elemId");
alert(elem1.display);
(см. http://msdn.microsoft.com/en-us/library/ms535231%28v=VS.85%29.aspx) в браузерах на Mozilla можно использовать window.getComputedStyle(el)
var elem1 = document.getElementById("elemId");
var style = window.getComputedStyle(elem1, null);
alert(style.getPropertyValue("display"))
(см. https://developer.mozilla.org/en/DOM%3awindow.getComputedStyle)
Насчет HTML и Opera не уверен, но думаю там также как и у Mozilla.

 

Оставить комментарий

 
  2010-11-03

Векторный графический редактор на JavaScript

программирование, JavaScript

На сайте ztools.org создал небольшой векторный графический редактор. Реализованы пока всего три вида объектов - линия, овал и прямоугольник. Редактор сам по себе примитивный и сделан исключительно с целью демонстрации возможностей библиотеки ztools а также для отладки работы с векторной графикой.

Что самое приятное, так это то, что код редактора, без учета библиотечных файлов содержит всего около четыреста строк.

Для прорисовки векторной графики в IE используется VML а в остальных браузерах SVG. В идеале, хочется сделать что то вроде библиотеки Raphael Дмитрия Барановского, но Raphael это вещь в себе, хотя и совершенно волшебная, мне же хочется сделать библиотеку для работы с векторной графикой на базе ztools. С его объектно-ориентированными возможностями можно будет создавать вещи нереализуемые при помощи классического HTML/CSS

 

Оставить комментарий

 
  2010-09-20

Вертикальный текст в HTML

howto, программирование, JavaScript, ztools

Как я уже писал, в HTML совершенно нет возможности размещать текст по-вертикали. Правда, сильно ограниченные возможности присутствуют в Internet Explorer, правда, у этого способа я обнаружил один баг — при предварительном просмотре печати текст оказывается зеркально отраженным, видимо, второй фильтр не применяется.

Хотелось бы найти универсальный способ отображать вертикальный текст по-вертикали во всех браузерах и по возможности без глюков. Как говорится если нельзя, но очень хочется, то можно.

Создал небольшой скрипт для отображения текста по-вертикали. Код получился сравнительно небольшим. Скрипт использует VML под IE и SVG под остальными браузерами.

Внешний вид полностью настраивается при помощи CSS и Javascript. Здесь можно скачать архив, а здесь увидеть как это работает в живую.

Выложенный пример тестировался на IE6-IE7, Firefox2, Google Crome, Opera и Safary.

 

Коментариев: 6

разное (181)
howto (122)
программирование (107)
гад-же-ты (75)
мысли (42)
PHP (41)
JavaScript (39)
вебмастеринг (37)
linux (28)
гондураша (28)
юмор (25)
полезное (20)
движок (17)
Android (16)
софт (15)
деньги (14)
видео (12)
кино (11)
беспредел (10)
путешествия (10)
музыка (10)
ztools (8)
интернет (8)
занимательная физика (8)
умный дом (8)
Nokia 5800 (7)
diy (7)
хостинг (7)
языки (7)
книги (7)
css (6)
вебдизайн (6)
lifehack (6)
apple (5)
связной (5)
oDesk (5)
козлы (5)
arduino (5)
прелоадер (5)
Python (4)
занимательная юриспруденция (4)
кухня (4)
svn (4)
рестораны (3)
энергия (3)
synphony (3)
software (2)
webmastering (2)
фото на документы (2)
Java (2)
движек (2)
Ruby on Rails (2)
спорт (2)
bash (2)
аниме (2)
гитара (2)
SEO (1)
дурдом (1)
C++ (1)
годнурас (1)
микросервисы (1)
сайты (1)
авторское право (1)
programming (1)
технологии (1)
наука (1)
восстановить (1)
Поиск по блогу:

Valid XHTML 1.0 Strict