Neurons to bytes

Posts Tagged ‘javascript’

Путешествие по Губке Менгера. Javascript + Canvas.

04.10.2010 by Ouch! - 0 Comment
Posted in javascript, программерское

Наткнулся на пост у блоггера avva:

Совершенно замечательное демо трехмерного путешествия по губке Менгера. Смотреть в любом браузере, кроме Эксплорера. Весь код укладывается в 512 байт!

Там используется интересный алгоритм, который называется ray-marching. Должно быть не очень сложным и поучительным упражнением сделать unobfuscation всему этому коду и подробно объяснить, как он работает.

Я рекомендую смотреть демо в Google Chrome или Opera. Особенно рекомендую почитать комментарии к записи - там рассказывают, как работает код.

Кода всего ничего (512 байт):

<body bgcolor=0 text=snow onload=N=[K=R.getContext('2d')];for(t=B=127,I=K.getImageData(0,0,q=64,q);t--;$=Math.cos)N[t]=t/43&1;setInterval("t++;for(i=y=-1;y<1;y+=A)for(x=-1;x<1;x+=A=1/32,I.data[i+=4]=h+h)for(m=C=$(a=t/86),S=$(a+8),c=$(b=t/B),s=$(b+8),u=x*C+S,v=y*c-u*s,u=u*c+y*s,w=C-x*S,X=q+9*$(a+b),Y=q+9*$(b-a),Z=t,h=B;--h&&m<q;X+=u,Y+=v,Z+=w)for(m=1;N[X*m&B]+N[Y*m&B]+N[Z*m&B]<2&&m<q;m*=3);K.putImageData(I,0,0)",9)>JSpongy by p01<br><canvas id=R width=64 height=64 style=width:3in;height:3in;background:#fff>

Tag after ,

LibCanvas - фреймворк для работы с canvas

04.08.2010 by Ouch! - 4 Comments
Posted in javascript, mootools, программерское

Месяц назад я написал заметку “Перспективы клиентских технологий в веб“, о том, как на мой взгляд будут развиваться клиентские технологии. Вот выдержка из заметки:

Как думаю я, не будет хватать именно какого-то фреймворка для построения интерфейсов, лайотов и создания векторной анимации.

Такой фреймворк скорее всего появится, и будет основан на технологиях Javascript, SVG и canvas. Возможно, он уже разрабатывается кем-то, но вот я пока об этом не знаю.

Сегодня на хабре один человек разместил статью http://habrahabr.ru/blogs/javascript/90339/, в которой он описал разрабатываемый их фреймворк как раз для тех целей, которые описывались мною в заметке про перспективы клиентских технологий. Так что я был прав в том, куда стремится веб.
Продолжаю следить за сабжем.

Скачать библиотеку LibCanvas можно здесь: http://code.google.com/p/libcanvas/

Tag after ,

Перспективы клиентских технологий в веб

03.17.2010 by Ouch! - 6 Comments
Posted in javascript, программерское

Откушав чаю, я тут подумал, что в связи со всеми этими новыми технологиями и фишками, такими как HTML5, canvas, SVG и скоростью выполнения JS в современных браузерах, а так же постепенным выпиливанием IE6-7 (а скоро и 8-го), будет, как мне кажется, отход от технологий flash и silverlight.

Спрашивается, почему?

А что - сейчас флэш обычно используют для анимации, видео и аудио. Всё то же самое уже сейчас можно делать на html5, но пока это будет работать не во всех браузерах, а в тех, в которых будет работать, например видео еще работает не так как надо. Но все равно чего-то будет не хватать в HTML5 по сравнению с флэшем. Как думаю я, не будет хватать именно какого-то фреймворка для построения интерфейсов, лайотов и создания векторной анимации.

Такой фреймворк скорее всего появится, и будет основан на технологиях Javascript, SVG и canvas. Возможно, он уже разрабатывается кем-то, но вот я пока об этом не знаю.

Я думаю, будущее именно за такой открытой технологией, в отличие от flash и silverlight - нужно ждать только появления фреймворка и развития технологий в браузерах.

UPD: Действительно, такой фреймворк уже разрабатывается. Подробнее здесь: LibCanvas - фреймворк для работы с canvas

Tag after , , , , ,

Javascript в nginx

02.16.2010 by Ouch! - 2 Comments
Posted in javascript

Игорь Сысоев, создатель веб-сервера nginx, написал заметку об идее встраивания javascript в nginx, наподобие того, как встроен perl.

Но, как рассказывает Игорь, пока нет возможности правильно встроить V8 в nginx из-за особенностей реализации.
Я вот что-то не могу понять, как тогда появилась такая вещь, как nodejs, которая, при всем при этом, держит огромную кучу запросов (я где-то видел тесты, не помню у кого)?

Или он просто плохо смотрел (в чем я не уверен)?

Короче, буду рад, если мне кто-нибудь разъяснит, чем так кардинально отличается nginx от nodejs, что в nginx пока нельзя корректно встроить v8?

Tag after , , ,

Микрофреймворк fab для nodejs

01.13.2010 by Ouch! - 5 Comments
Posted in javascript, программерское

Наткнулся на замечательный микрофреймворк fab, который позволяет легко создавать простые серверные приложения на языке javascript, для веб-сервера nodejs.

Fab очень похож на ruby-фреймворк Sinatra, который является довольно популярной штукой в среде ruby-девелоперов, так как позволяет сделать легкое приложение, без использования тяжеловесов, таких, как Rails.

Например, так выглядит простейшее приложение в Sinatra:

require 'rubygems'
require 'sinatra'
get '/' do
  'Hello world!'
end

А вот так выглядит точно такое же приложение в fab:

fab = require( "./fab" ).fab;

( fab )
  ( "/", function(){ return 'Hello world!' })
.deploy();

Многословнее, но всё равно круто, да? Единственное там пока нету разделения запросов по REQUEST_METHOD, первой нужнейшей штуки для удобной реализации REST-сервиса.

Tag after , , , ,

Фреймворки для nodejs

01.09.2010 by Ouch! - 1 Comment
Posted in javascript, программерское

logo
Я просто оставлю это здесь. Список фреймворков для nodejs, которые я нашёл:

  • Намётки и размышления одного дядюшки Бена, который пытается создать свой фреймворк на nodejs. Смешно, он обозвал Дэвида Хэйнемайера Хэнсона тупицей, это повеселило :) Готового кода я там так пока и не нашел. А вот страничка проекта.
  • Simplex - здесь есть интересные куски кода, стоит посмотреть. Хотя это так - не фреймворк, а просто эксперимент, созданный за пару вечеров.
  • Raccoon - эта штука уже посерьёзней остальных. Буду её исследовать.
  • Вот еще один фреймворк, nerve
  • В комментариях Kuroki Kaze подсказывает, что есть еще JSAN. опенсурсовая библиотека javascript, но честно говоря, не слишком много я полезного там увидел.
  • Список проектов на github, посвященных nodejs

Если кто знает еще фреймворки для nodejs, буду признателен за ссылки в комментах.

Вообще, мне кажется, серверное программирование на js штука весьма перспективная. Не хватает только мощного фреймворка, по типу Zend или пакетов CPAN, как в Perl, или Gems, как в Ruby. Но это вопрос времени и я думаю, на эту тему стоит написать отдельный пост.

Tag after , , , , ,

Интересная штука этот Rhino, или мысли о серверной разработке на Javascript

12.18.2009 by Ouch! - 3 Comments
Posted in программерское

Давеча посмотрел на исходный код проекта Etherpad, который гугл недавно свернул. Долго искал внутри проекта что-то похожее на скрипты питона или чего либо еще модного, пока до меня не дошло: проект написан на Javascript. Достаточно было открыть любой файл с расширением js.

Как оказалось, проект написан на Rhino. Это такая имплементация javascript’а на Java. Хоть я в жизни ничего и никогда не писал на Java, но носорог меня определенно заинтересовал. Вообще, классная же идея, писать и на стороне сервера и на стороне клиента на одном языке, на Javascript?

По-моему махровому мнению - это круто. Я слышал краем глаза про такой проект, Jaxer, который позволяет использовать Javascript на стороне сервера, но не щупал его.

Нужно будет потом посмотреть, как там обстоят дела на предмет существования фреймворков для разработки на джаваскрипте на сервере. И вообще, какие есть препятствия для серверной разработки на JS. А то что-то не слышно про серверных разработчиков на этом языке.

Update:

Нашел классный проект Nodejs, это веб-сервер, использующий гугловский джаваскриптовый движок V8. Очень интересная разработка, попробую её собрать под nix и попробовать наваять какую-нибудь простую штуку. Наверное, получится пост.

Tag after , , , ,

How does the event bubbling works in Javascript?

11.28.2009 by Ouch! - 4 Comments
Posted in Без рубрики

Few people knows how events works in javascript. Currently, many people use frameworks, and do not realize how event works, so they are spend much time on simple things.

I’ll tell about a widely known in narrow circles thing such as event bubbling. What I’m talking about?

When we are click on any element on the web page, the event is raised on all the parent nodes of clicked element, until it reaches the document node. This is event bubbling as is.
Let’s see clearly how it works, it’s better to see than tell a thousand words.
Read the rest of this entry »

Tag after , , ,

Event bubbling в Javascript - что это такое?

11.27.2009 by Ouch! - 0 Comment
Posted in программерское

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

Я расскажу про такую широко известную в узких кругах фишку, как event bubbling. Что это вообще такое?

Когда мы кликаем по-какому либо элементу на странице, то событие поднимается по всем родительским узлам кликнутого элемента, пока не дойдет до узла document. Это и есть event bubbling.
Посмотрим наглядно как это работает, ведь лучше увидеть, чем сказать тысячу слов.

Есть HTML:

<div id="dialog">
    I'm a absolutely positioned dialog. So click me!
</div>

Есть CSS:

<style type="text/css">
#dialog {
    padding: 200px;
    position: absolute;
    top: 100px;
    left: 100px;
    border: 1px solid #000;
    background: #ddd;
}
</style>

И, самое главное, есть javascript (JQuery):

<script type="text/javascript">
$(document).ready(function() {
    $('#dialog').click(function(e) {
        alert('Clicked on dialog!');
    })

    $(document).click(function(e) {
        alert('Clicked on document!');
    })
});
</script>

Как видно по коду, у нас навешаны колбэки на клик по диалогу, а так же на клик по документу. Давайте теперь откроем рабочий пример и кликнем по диалогу. Что получилось? А получилось 2 алерта, алерт диалога и алерт документа. Почему так вышло, мы же кликнули только по диалогу? Причина этого именно в event bubbling’е.

Давайте теперь сделаем так, чтобы при клике по диалогу появлялся только алерт этого диалога. Все, что нужно сделать, это отменить event bubbling, чтобы он не поднимался вверх по DOM узлам. Сделать это можно просто добавив e.stopPropagation() в колбэк диалога. Все. Давайте посмотрим второй пример.

Вот так, вроде простая вещь - но знают о ней немногие. Ее знание сильно облегчает разработку на javascript. Как, например, без особых извращений сделать так, чтобы какой-либо элемент на странице скрывался при клике вне этого элемента? Только через event bubbling!

До скорого.

Tag after , , ,