апр 01 2013

Easter Rail 4 todo app

Category: Dev,HTML5,WebLucho @ 14:33

So, it is that time of the year when you have 4 free days, because it is Easter and at the same time Rails 4 and Ruby 2 got out recently and you have not touched Ruby and Rails in ages. As we all know, when the life throws at you new Ruby and new Rails you must make a lemonade or at least a hello world-ish todo app out of this (also it helps to refresh your lost rails-fu points).

The result of my efforts is on github and the application is demoed on heroku.

This time I was clever enough to write down all important steps and obstacles on my way, so I have a „lessons learned“ section for future me (if future me is going to start a bigger project on Rails 4 any day).

I also had the chance to pick up on HTML5 Boilerplate, jQuery 2 and Giphy API, which just boost indefinitely the awesomeness of the todo app. The only bad thing was that Giphy’s API seems very undergroundish, or at least I could not find any official documentation about it, so I just followed examples from other github repos.

One last thing – heroku deployment is still a serious pain in the arse1!!12 I MEAN IT!! The only positive thing out of this is that I learned how to git rebase –interactive and squash 14 heroku-should-work-now commits in one – I leveled up in git.

nyan

 


Етикети: , , ,


юли 24 2011

Game of Life (javascript + html5’s canvas)

Category: Dev,HTML5,WebLucho @ 23:55

Тези дни отново ме загриза съвестта, че не работя по някакъв сайд-проект – мой собствен или open source и за това днес реших да почета и понапиша Game of Life.

Оказа се доста прост алгоритъм с доста интересна история, която и сами може да си прочетете :-)

Демо може да видите тук: http://dailyffs.com/life/

Сорсът е тук: https://gist.github.com/1102964

Коментарът към сорса от страна на @skanev е тук: https://twitter.com/skanev/status/95213748092026880

Това, което искам да кажа в тази статия е, че колкото и да са бързи съвремените Javascript engine-и и колкото и разни светила и икони на браузър вендорите да се хвалят, че производителността скача многократно от версия до версия, това не значи че не може да забързате всичко още малко много. Цената на „забързването“ е „угрозняване“ и оптимизиране на кода. В моя конкретен случай – на една функция, която се вика 60000 пъти на преизчисление.

Въпросната фунцкия:


function getLiveNeighbours(id, data) {
  var x = id % canvas.width;
  var y = parseInt(id / canvas.width);

  var cnt = 0;
  for (var i = -1; i < 2; i++) {
    for (var j = -1; j < 2; j++) {
      if ((i != 0 || j != 0) &&
        !(x+i < 0 || x+i >= canvas.width || y+j < 0 || y+j >= canvas.height) &&
        data.data[4*((y+j)*canvas.width+(x+i))] != THE_BLACK) {
        cnt++;
      }
    }
  }
  return cnt;
}

Простата оптимизация на кода включва:

  1. Премахване на извикването на функцията (тялото на функцията се ползва директно) – спестява 60000 извиквания и времето за изпълнение на една итерация пада от 500ms на 270ms
  2. Заменяне на двата вложени цикъла проверяващи за броя на съседни клетки – от 270ms на 150ms
  3. Опростяване на пресмятанията (премахване на умножения) – от 150ms на 60ms
  4. Създаване на локални референции към често използваните данни (вместо постоянни извиквания от типа „obj.data“ при изчисленията се създава и използва локална променлива) – от 60ms на 50ms
// (4)
var width = canvas.width*4;
var d = data.data;
var nd = newdata.data;
var cw = canvas.width;
var ch = canvas.height;
var base = 0;

for (var i = 0; i < d.length/4; i++) {
  var x = i % cw;
  var y = parseInt(i / cw);

  var cnt = 0;
  // (1), (2), (3)
  if (x > 0 && d[base-4] != THE_BLACK) cnt++;
  if (x < cw-1 && d[base+4] != THE_BLACK) cnt++;
  if (x > 0 && y > 0 && d[base-4-width] != THE_BLACK) cnt++;
  if (y > 0 && d[base-width] != THE_BLACK) cnt++;
  if (x < cw-1 && y > 0 && d[base+4-width] != THE_BLACK) cnt++;
  if (x > 0 && y < ch-1 && d[base-4+width] != THE_BLACK) cnt++;
  if (y < ch-1 && d[base+width] != THE_BLACK) cnt++;
  if (x < cw-1 && y < ch-1 && d[base+4+width] != THE_BLACK) cnt++;
  ...

В крайна сметка производителността скочи 10 пъти, макар логиката на кода да изглежда по-зле от преди. Не, че преди изглеждаше много красива, но все пак :D

Разбира се има и още един доста по-умен начин за техническа оптимизация – Web Workers. Те са панацеята на всички проблеми, началото и края, давид и голиат, содом и гомор, ин и ян… за тях може да почетете тази статия - Mandelbrot + Web Workers

Забележка:

  • става дума за проста техническа оптимизация на кода, а не за подобрения на алгоритъма!
  • вероятно оптимизациите в javascript engine-ите не се фокусират върху случаи на извикване на функция 60 хиляди пъти… а би трябвало.

Етикети: , , ,


юни 13 2011

Mandelbrot + Web Workers

Category: Dev,Firefox,HTML5,WebLucho @ 22:28

Обичам фрактална графика и поради липса на по-смислено занимание тези дни, реших да напиша визуализатор за Mandelbrot. Имплементацията ползва готините Web Workers, за да се справи с тоновете сметки и Canvas за да изобрази резултатът на екрана.

48 web worker-a се борят да запълнят 800х600 пиксела пространство и да си призная се справят по-добре от очакваното… е, все още си е бавно, но е 48 пъти по-добре отколкото без възможност за паралелно изпълнение на алгоритъма :D.

Резултатът може да видите тук – http://dailyffs.com/mandelbrot/

А кодът е достъпен тук – https://gist.github.com/1023445

Забележка: работи само с Firefox, защото другите браузъри или нямат web workers или не поддържат предаването на по-сложни обекти от/към worker-ите.


Етикети: , , ,


яну 11 2011

Ontwik

Category: Dev,HTML5,WebLucho @ 12:38

Ако сте мързелив програмист и не обичате да четете книги или пък харесвате dev конференции и искате да слушате лекции на любимите си гурута, то на драго сърце ще ви препоръчам Ontwik.

Ontwik е сайт, който събира в себе си записи от различни конференции на web тематика и дава възможност на всеки да ги гледа… безплатно. Темите, които следя са предимно Javascript, Ruby, Rails, Python, Django, Git, HTML5, но има още много други. Голямата част от лекциите са наистина качествени и интересни, като има записи на web гурута като David Hansson – създателят на Rails,  Tom Werner – един от създателите на Github, Линус Торвалдс, Brendan Eich – създателят на Javascript, и още много други.

Оставям ви с една много готина презентация на David Hansson:

„Why Ruby?“ – RubyConf X Keynote from David Heinemeier Hansson on Vimeo.


Етикети: , , , , ,


дек 08 2010

Firefox 4 идва без WebSockets

Category: Firefox,HTML5,Mozilla,WebLucho @ 14:49

За съжаление най-якият фичър на HTML5 – WebSockets ще бъде изключен по подразбиране от Firefox 4. Причините са евентуални пробиви на сигурността в проксита и всичко, което е между браузъра и крайния сървър.

Тестове показват, че е напълно възможно да се създаде proxy cache poisoning (да се вкара вреден код в кеша на проксито), защото прокситат не разбират от Upgrade handshake-а, който WebSockets ползва. Това дефакто е проблем на прокситата, а не на протокола на WebSocket-ите, но за жалост не е възможно да се оправят всички прокси сървъри по света :-), за това се налага да се префасонира протокола на сокетите :-(. Препоръката за сега е да се промени стандарта и да се полза CONNECT handshake-a вместо Upgrade handshake, тъй като прокситата го интерпретират правилно.

Най-вероятно няма да видим WebSocket-и във Firefox скоро, поне докато проблемът не бъде разрешен и стандартът не дефинира нов метод за handshake.

Повече подробности може да прочетете на http://www.0xdeadbeef.com/weblog/2010/12/disabling-websockets-for-firefox-4/ и http://www.ietf.org/mail-archive/web/hybi/current/msg04744.html

Update: Opera спира поддръжката на WebSockets също – http://annevankesteren.nl/2010/12/websocket-protocol-vulnerability


Етикети: , , ,


ное 04 2010

OpenFest 2010

Category: Dev,Firefox,HTML5,Mozilla,WebLucho @ 15:30

На 20-и и 21-и Ноември в Интерпред (София) ще се проведе OpenFest 2010 и ако сте от хората, които обичат отворения код и семинарите, значи със сигурност ще сте там!

OpenFest се провежда за 8-ми пореден път, като тази година в програмата е включена сесия с Lightning Talks

Освен „стандартните“ презентации обаче, тази година се надяваме да обагатим програмата на OpenFest и с една сесия Lightning Talks – изказвания, които по правило продължават по не повече от 5 минути всяко и следват непосредствено едно след друго. Освен че са изключително интересни и забавни за присъстващите, тези кратки презентации предоставят незаменима възможност за нови участници да се представят за първи път, без да е необходимо да изнасят цяла лекция.

Така че ако имате нещо интересно, което да споделите за 5 минути с феновете на отворения код – тогава е времето.

Аз лично обмислям няколко теми за HTML5 – „HTML5 и (сигурната смърт на) Flash“, „Историята на HTML5 в 5 минути“ и „Бъдещият HTML5 в днешния уеб“


Етикети: , , , ,


окт 03 2010

Mozilla Labs – Game On 2010

Category: Dev,HTML5,Mozilla,WebLucho @ 16:29

Тези дни хората от Mozilla Labs стартираха конкурс за разработка на изцяло уеб базирана игра. Състезанието се казва Game On 2010 и дава възможност на всички гейм или уеб разработчици да покажат на какво са способни, но… само с HTML(5)/Javascript/CSS.

Да – правилно прочетохте! Flash, Applet-и и други плъгини не са позволени, защото основната идея на конкурса е да покаже на какво са способни модерните браузъри. А те наистина са способни! HТML5 & Friends докараха на белия свят доста новости и купища ексцентрични API-та – Canvas елементът,  SVG (директно в html кода), WebGL, Web Sockets (двупосочна свързаност), няколко API-та за data storing, Video елементът и още много интересни благинки.

В конкурса могат да участват както индивидуални разработчици, така и екипи. Естествено и за награди е помислено, като за сега от Лаба са обявили само наградата за първо място – два билета за Game Development Conference 2011 в Сан Франциско, с включен път, хотел и храна. Награди ще има и за още дузина категории, така че запретвайте ръкави ;-)

Крайният срок за участие е 11.01.2011г.

Успех на всички :-)

П.П. Аз лично смятам да се включа и съм навит за обединяване на усилията с други ентусиасти.


Етикети: , , ,


Следваща страница »