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

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

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

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

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

Тестове показват, че е напълно възможно да се създаде 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

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

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

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

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

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

С това обаче добрите вести не свършват, оказва се че и по HTML5 Forms работата върви с пълна пара, но какво точно ще видим в следващата версия на браузъра е трудно да се каже на този етап.  Пълен списък с прогреса по различните елементи и атрибути има тук: https://wiki.mozilla.org/User:Mounir.lamouri/HTML5_Forms

Последното нещо, с което ще ви занимая е един доста впечатляващ експеримент – Smoke Screen . Накратко това дава възможност на вашия HTML5 браузър да показва Flash анимации без да ползва Flash player… ъ-ъ-ъ странно нали . В случая цялата работа се извършва от Javascript + Canvas  елемент и преди да възкликнете „За какво би било полезно това, при положение че Flash плейърът е фрий“, ще ви напомня че  много съвременни смартфони не поддържат Flash (iPhone) и някои от CEO-тата на компаниите производители (Стив Джобс) публично се заклеха, че съпорт за Flash няма да има НИКОГА!

Та така, Web-a си върви, кучетата си лаят и определено ни чакат интересни месеци до излизането на Firefox 4.0

Разбира се, аз като open-minded developer на какъвто се правя напоследък, няма как да пропусна възможността да напиша нещо малко и от сърце за Ubiquity, а и ScreenShotMe стана толкова „популярен“ (трябва да измислят четворни кавички, двойните неотразяват добре реалността в този случай), че съм готов вече на всякакви експерименти – включително и писане на Ubiquity команда, която да прави снимка на текущата страница и да я праща (в ада ) на сървиса. След около ден рисърч и зяпане из сорсовете на Firefox, се убедих че nsITransferable неподдържа „image/bmp“ data flavor – може би защото от BMP формата лъха твърде много на Microsoft, кой знае. Това директно изпотроши първоначалната ми идея юзера да цъка print screen и командата да изпраща целия екран. Но всяко зло за добро – докато разглеждах имплементацията на хелпърите на Ubiquity се натъкнах на нещо яко – начин да изрисуваш window-ски content в canvas. Това явление е тотална измишльотина на Mozilla, защото в HTML5 Canvas draft-та няма такива неща, но все пак спаси положението. Вярно – няма да записвам целия екран, но пък когато човек иска да print screen-не browser-а си, обикновено не иска да му се виждат всички табове например, така че от подобна функционалност, която да предлага снимка само на уеб страницата има смисъл, а и ще върви и под OS X (за разлика от предния път ).

// Най-добре натиснете "<>" горе вдясно на страницата, за да се разшири.
// Така създаваме нов запис на команда, която да ползваме от конзолата
CmdUtils.CreateCommand({

// име, аргументи, описание, превю, хелп са задължителни
  names: ["shotit"],
  arguments: [{role: 'object', nountype: noun_arb_text, label: "image format"}],
  description: _("Publishes the current browser snapshot on the web and puts a link to it in the clipboard."),
  homepage: "http://dailyffs.com/index.php/share-screen/",
  author: {name: "Lucho Yankov"},
  license: "GPL",
// preview може и да е метод, който да започне изпълнение веднага щом селектирате командата (без да натискате enter или да я изпълнявате даже), но на мен ми трябва само статичен текст
  preview: _("Publishes the current browser snapshot on the web and puts a link to it in the clipboard."),
  help: _("To specify the image format just put 'jpeg' or 'png' as command's parameter, if no format is specified and the image is smaller than 1200KB it will be saved as PNG, otherwise the JPEG format will be used."),

// execute е кодът, който ще се изпълни при стартиране на командата
  execute: function(args) {
    var window = CmdUtils.getWindow();
// Следващите няколко реда са взаимствани до голяма степен от имплементацията на CmdUtils.getWindowSnapshot
    var canvas = CmdUtils.getHiddenWindow().document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
    canvas.mozOpaque = true; // Дали canvas-ът да поддържа alpha или само солиден цвял (ускорява някои операции)
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
// Шантавият метод на canvas, който рисува прозорци - INSANE!
    canvas.getContext("2d").drawWindow(window, window.scrollX, window.scrollY, window.innerWidth, window.innerWidth, "rgb(255,255,255)");
    var data = null;
// Проверка, дали има експлицитно зададен формат на изображението и ако не, дали то не е твърде голямо за да го правим на PNG и директно да го запазим като JPEG.
// Параметрите трябва да са jpeg, jpg, j, png, p
    if (/^j(pe?g)?\s*$/i.test(args.object.text)) {
        data = canvas.toDataURL("image/jpeg");
    } else if (/^p(ng)?\s*$/i.test(args.object.text)) {
        data = canvas.toDataURL("image/png");
    } else {
        data = canvas.toDataURL("image/png");
        if (data.length > 1600*1024) data = canvas.toDataURL("image/jpeg");
    }
// Показваме в notification bar-а, колко данни се изпращат, за да придобие представа потребителя, дали ще чака докато остарее или повече
    displayMessage(_("Sending ") + parseInt(data.length/1024+1) + "KB...", this);
    MAIN_URL = "http://dailyffs.com/shotme/";
// Изпращаме изображението към сървъра и когато върне като отговор ключа индексиращ картинката, сглобяваме линк и го пъхаме в клипборда и в notification bar-а
    jQuery.post(MAIN_URL, "image="+data, function(key) {
        if (key == "ERROR") return;
        var url = MAIN_URL + "?" + key;
        Utils.clipboard.text = url;
        displayMessage({text: url, onclick: function(){window.open(url);}}, this);
      }
    );
  }
});

Резултата от усилията ми е качен в Git, напълно отворен и поощрен за разширение – http://gist.github.com/192995 , версията на Ubiquity за която го писах е 0.5.4 (в случай, че нещо при някой невърви).

Ако някой има идеи, предложения или питания да заповяда – коментарите са за това

Първоначалната ми идея, с която няма да ви занимавам сега, включваше използване на HTML 5 Canvas – платно на което може да се рисува и дава пълен достъп до битмапа – красота! Естествено този стандарт е все още слабо разпространен сред браузърите, защото е нов (Microsoft-ския Trident още не го подържа изобщо, бахти изостаналата нация ). Идеята включваше и Рейлс, но прагматичното в мен победи и пожела да запълня 99% свободен bandwith на хостинга ми (да, блога ми е толкова популярен, че ползвам <1% от линията ). Това води след себе си сравнително неприятното задължение да пиша на PHP… но няма да се лъжем, на PHP се пише много бързо, ама много, много бързо и грозно и… абе селска работа! Предните седмици, докато чаках вдъхновението, реших да проуча въпроса, как мога да взема изображение от клипборда и да го плесна на кенвъса, оказа се нетолкова лесна история, но възможна все пак. Цената не е прекалено висока – ползвам Java Applet-че, което върши цялата работа всъщност. Алтернативата е Flash, но доколкото разбрах Flash 10 налагал по-строги ограничения за боравене с клипборда, а и не обичам Flash и ActionScript (винаги ме е боляло много след интервенция с тях). Големият проблем е, че някъде при прехвърлянето на битмапа от клипборда през аплета към javascript-ския код нещата стават много бавно и това може да отнеме до няколко секунди, за по-големи изображения, но като се абстрахираме от това – ТО РАБОТИИИИ!!!! Следващото нещо, което направих е функционалност за селектиране на фрагмент от кенвъса, почти като в Paint или друг редактор… и в общи линии до тази вечер бях стигнал до тук, когато ме осени идеята – selection tool-а става на crop tool и целия проект се превръща в 3-click-screen-share. Гениално наистина, print screen, paste, [optional: crop], save и получаваш линк… а и подобно нещо не съм виждал да има досега… е друг е въпросът колко често на човек му трябва подобно нещо, но като се замисля, че иначе трябва да отваряш image editor, пък после да save-ваш, пък после да го публикуваш някъде, и накрая да пратиш линк – it is retarded!

Първоначалната версия на услугата е тук: http://dailyffs.com/shotme/

За сега всички енджини без този на Microsoft подържат в някаква степен Canvas, като за FireFox 3.5 приложението върви на 100%. Естествено за view на изображението впоследствие не е необходимо нищо специално и всеки браузър би свършил работа, така че всички ще могат да видят скрийншота ви – спокойно

Ако някой има предложения или поне му е харесала идеята или пък го е отвратила, може да напише мнението си тук. Чуждият фийдбек е стимул, стимул за подобряване, изпипване и разширяване на идеята. Ако има интерес ще наема нов domain и ще се постарая да оправя забавянията, да сложа една четка, че да може да оградите примерно определено място от изображението, на което искате да наблегнете.

Хубаво е когато човек дава свобода на въображението и творчеството си, кара те да се чувстваш щастлив и да си изпълнен с идеи и енергия… даже и цената, която трябва да платиш да е малко писане на PHP