юни 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-ите.


Етикети: , , ,


дек 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 в днешния уеб“


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


юни 25 2010

Какво ново около Firefox 4.0 и HTML5

Category: Firefox,HTML5Lucho @ 23:02

В последно време покрай изпити, състезания и разни други неща изпуснах дирята на развитие на HTML5 съпортa от страна на Firefox. За всеобща радост обаче, Twitter ме осведомява прилично тъй като следвам доста Firefox контрибютъри. Та, от там знам че от скоро вече има работещo Web Socket API в нощните билдове на браузъра. Това значи че за FF4.0 (да, FF3.7 няма да има), който излиза през ноември 2010, ще можем да се поздравим с едно от най-нужните неща в съвременния web – истинска двупосочна връзка. С това огнената лисица ще стане втория браузър след Chrome, който поддържа Web Socket-и и мисля, че няма нужда да ви казвам колко много развързва ръцете на дивелопърите наличието на дуплексна връзка!

С това обаче добрите вести не свършват, оказва се че и по 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 :-)


Етикети: ,


сеп 25 2009

Първа среща с Ubiquity

Category: Firefox,HTML5Lucho @ 01:40

Тези дни попаднах на поредното интересно нещо от Mozilla – Ubiquity. Накратко това е плъгин, който осигурява лесно и кратко писане на команди автоматизиращи последователност от действия или предоставящи интерфейс към услуга. На разположение е терминал, в който човек избира команда, извежда се малко панелче, в което се вижда резултата… и това е в общи линий. Това с което бие bookmarklet-ите е вграденото jQuery, възможността да има стотици команди (bookmark лентата е ограничена от към резолюция :P), предлагане на шаблонен интерфейс (попълвате дескрипшън, хелп, etc и те се появяват на правилното място в правилното време), прави Ajax заявки към произволен сървър, има разни шантави тематични аутокъмплийт списъци (nouns), notification bar-че  и още куп готини работи. Пише се на Javascript и Python (само за OS X и Linux, Windows не е стандартно с Python – така че няма как :-( ) и кода излиза умопомрачително кратък, главно заради хелпърите, които идват с Ubiquity и jQuery. Част от стандартните команди, които са в инсталацията са twitter клиент, бързо търсене на различни места, локиращо по IP скриптче, което дава линк към google maps, превод in-place на фрагменти от страница, скъсяване на линкове чрез tinyurl и други.

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

// Най-добре натиснете "<>" горе вдясно на страницата, за да се разшири.
// Така създаваме нов запис на команда, която да ползваме от конзолата
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 (в случай, че нещо при някой невърви).

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

// така създаваме нов запис на команда, която да ползваме от конзолата
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.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);
}
);
}
});



авг 22 2009

Share your screen

Category: Dev,Firefox,HTML5,Web,НонсенсLucho @ 03:43

Напоследък съм изгубил творческата си искра, в работата се занимавам с .NET 2 (нестига, че е .NET ами и е от 2004г :-( ) не съм почивал цяло лято и ми се ще да пиша на Ruby и Rails или Objective C за iPhone. Та сред всички тези несгоди и поради факта, че съм програмист все пак (а добрите програмисти решават проблеми ежедневно и би трябвало и своите да могат да решат!!!) предприех някои стъпки за измъкване от блатото, като една от тях беше да си пиша малко проектче за мое лично удовлетворение. Първоначалната идея изникна в главата ми по напълно случаен начин, с времето идеята се развиваше и променяше, пишех по малко код и очаквах вдъхновението ми да се върне и да ми каже какво да правя… е този момент дойде днес – тази вечер.

Първоначалната ми идея, с която няма да ви занимавам сега, включваше използване на HTML 5 Canvas – платно на което може да се рисува и дава пълен достъп до битмапа – красота! Естествено този стандарт е все още слабо разпространен сред браузърите, защото е нов (Microsoft-ския Trident още не го подържа изобщо, бахти изостаналата нация :-P). Идеята включваше и Рейлс, но прагматичното в мен победи и пожела да запълня 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 :-P