De ce WebKit?

Încă de la începuturi, Adobe România a fost focalizată pe zona de Web. Asta a însemnat realizarea de produse ce foloseau atât web-ul ca platformă dar și produse care foloseau tehnologii web în afara contextului clasic de browsing. Unul din aceste produse a fost Adobe AIR – la care echipa din România a contribuit încă de la primele iterații, cu suportul pentru realizarea de aplicații AIR folosind HTML, CSS și JavaScript. Toate astea, folosind motorul de randare HTML WebKit (regăsit în Apple Safari, Google Chrome și majoritatea browserelor de pe plaformele mobile non-Microsoft).
Ulterior, în vremurile mai recente, WebKit a fost folosit de către echipe din România și din US ca bază pentru prototipuri care au ajuns noi specificații CSS (CSS Regions, CSS Exclusions, CSS Shaders). Cu alte cuvinte exista deja o masă critică de oameni cu experiență de WebKit și dorința de-a învăța și pe alții.

Ce presupune un hackathon?

Un hackathon este în principiu un eveniment în cadrul căruia un grup de programatori (dar nu numai, nu neapărat) se adună pentru a lucra la un produs sau la o idee. Ce rezultă în urma unui hackathon variază foarte mult, de la simple noi teste în jurul unei funcționalități, până la repararea de bug-uri sau prototiparea unor funcționalități noi.

Acesta a fost primul hackathon de WebKit organizat 100% de echipa din București (deși unii colegi aveau deja 1-2 hackathoane la activ, împreună cu echipele din US). În final ne-am strâns ~16 oameni, cam în proporții egale ingineri din Adobe România și studenți din Politehnică. Pentru studenții din Poli, Adobe a pus la dispoziție toată infrastructura (laptopuri, acces la Internet, locație) și utilitățile necesare (suc/ceai/cafea, pizza la prânz și bere după demo-urile de vineri), totul sub atenta organizare a lui Mihnea Pe lângă demitizarea procesului de contribuție, unul din scopurile hackathonului a fost și promovarea contribuției la WebKit printre studenții la Poli.

Prima zi a fost mai mult de familiarizare cu codul și procesele din jurul WebKit – Mihnea și Răzvan au ținut prezentări despre arhitectura și comunitatea WebKit, procesul de submitare de patch-uri, how-to-s sau proiectele la care lucrăm acum. Apoi s-au format echipe, în jurul diferitelor idei. În ciuda unor probleme în configurațiile software, la finalul zilei, aproape toți reușiseră măcar să compileze WebKit-ul. „Grosul” dezvoltării s-a făcut în a doua zi și în prima parte a celei de-a treia zile, iar vineri după-masă echipele și-au prezentat realizările. În ciuda unor dificultăți tehnice care au încetinit prezentările vineri, totul a mers bine, la final având un număr mare de demo-uri în stare aproape finală. Lucru cu atât mai îmbucurător cu cât doar câțiva dintre participanți aveau experiență de lucru cu WebKit (pentru mine a fost prima dată când am deschis cod de WebKit în XCode ).

Demo time!

www.youtube.com/watch?v=cvywEynl2gM

În cele ce urmează, veți găsi o scurtă descriere pentru fiecare din proiectele realizate în timpul hackathonului, împreună cu screenshot-uri, video-uri și, acolo unde este cazul, link-uri la codul produs.

Resize event pentru orice element HTML

În HTML singurul obiect care aruncă evenimente de tip resize este window. Uneori însă, în layout-uri complexe sau în situații în care conținutul se poate modifica dinamic, codul pentru a detecta schimbări de dimensiune ale elementelor poate fi destul de complicat. Prototipul realizat de Mihai Maerean, Cătălin Badea și Mihai Bivol adaugă evenimente de tip resize pe orice element DOM din HTML.

www.youtube.com/watch?v=k-1kq3amVa0

Suport pentru CSS Regions în DRT

Dump Render Tree (sau pe scurt DRT) este o componentă din WebKit folosită de frameworkul de testare automată. Folosind DRT, poziția pe ecran și relația elementelor DOM poate fi exportată în format textual sau ca imagini, permițând compararea rezultatelor cu niște valori așteptate, considerate corecte. În cazul CSS regions, pentru elementele care sunt poziționate într-o regiune, această informație nu este expusă de DRT în format text. Asta face imposibilă crearea de teste automate care folosesc compararea textuală a rezultatelor. Patch-ul la care au lucrat Ion Roșca și Cătălin Ușurelu permite folosirea DRT pentru teste de CSS Regions cu rezultat text. De asemenea pentru a putea lucra pe Windows la acest patch, Ion a trebuit să mai rezolve un bug.

www.youtube.com/watch?v=ErVNZwUZoVY

Poziționarea subtitrărilor în <video> (WebVTT)

www.youtube.com/watch?v=tTdleDoXo5o

Una din specificațiile referitoare la video în HTML 5 este WebVTT. WebVTT standardizează modul de tratare și afișare a track-urilor de tip text într-un element <video>, fie că e vorba de subtitrări, closed-captions sau orice alt fel de conținut text adăugat peste un element video. Patch-ul lui Victor Cărbune îmbunătățește suportul pentru WebVTT din WebKit, asigurând vizibilitatea textului indiferent unde este el poziționat.

www.youtube.com/watch?v=ZcQUCuHmjt0

background-clip și border-radius

În ultima versiune de Safari, proprietatea background-clip nu este aplicată corect în cazul în care un element are mai multe imagini de fundal și elementul are specificat și border-radius – aka colțuri rotunjite. Vladimir Grecescu a implementat un fix pentru acest bug dar, după cum spunea și el în prezentare, mai sunt încă niște pași de făcut până ce patch-ul va fi acceptat în trunk-ul WebKit.

www.youtube.com/watch?v=snhNp0ZoNNc

WebInspector bug

Un bug destul de sâcâitor în Web Inspector-ul din WebKit apare la editarea regulilor CSS „read-only” – de exemplu cele provenite din style-sheet-ul implicit al browser-ului sau din setările utilizatorului. În mod normal, dublu-click într-o regulă CSS adaugă o nouă pereche proprietate-valoare, care poate fi editată. În cazul anterior însă, dublu-click adaugă o pereche nouă vidă care nu poate fi editată. Încercarea de-a o edita cu dublu-click duce la adăugarea a încă o astfel de pereche. Nimic grav, dar destul de sâcâitor. Patch-ul realizat de Vlad Voicu rezolvă acest bug și a fost deja submitat și inclus în trunk-ul de WebKit.

www.youtube.com/watch?v=Y32huMwU_C4

CSS counter-set

CSS 2.1 permite un oarecare control asupra contoarelor CSS (folosite de exemplu de listele ordonate) prin proprietățile counter-reset și counter-increment. CSS 3 adaugă o proprietate nouă – counter-set – pentru mai mult control. Cu toate acestea, counter-set nu este încă implementat în WebKit. Patch-ul lui Andrian Cucu adaugă suport pentru această proprietate.

www.youtube.com/watch?v=jm5Q1ap28wY

Web Inspector à la «Inventing on principle»

Prezentarea lui Bret Victor «Inventing on principle» a stârnit multe conversații în jurul instrumentelor de dezvoltare actuale și a celor viitoare. Horia a încercat să prototipeze câteva din ideile din «Inventing on principle» referitoare la editarea vizuală și cu feedback instantaneu de CSS, peste Web Inspector-ul din WebKit. Ce a ieșit, vedeți mai jos

www.youtube.com/watch?v=I9b-6ihcSWE

Mouse events în CSS Regions

Implementarea curentă de CSS Regions are câteva goluri în zona evenimentelor declanșate de utilizator (mouse events, keyboard events). Unul din ele este faptul că în cazul click-urilor pe conținut poziționat într-o regiune, un dezvoltator JavaScript nu poate afla ușor și direct în ce regiune a fost făcut click-ul în cazul în care conținutul „curge” prin mai multe regiuni. Patch-ul lui Alexandru adaugă la evenimentele de mouse declanșate într-o regiune un nou membru, care conține informații despre regiunea în care a fost făcut click-ul.

www.youtube.com/watch?v=RHlf1jd3iSU

Teste pentru CSS Regions

Deși regulile pentru submitarea de cod în WebKit cer ca pentru orice nou feature să fie adăugate și teste, de cele mai multe ori testele incluse inițial nu sunt acoperitoare. Așa se face că există o categorie aparte de bug-uri în WebKit, care vizează adăugarea de teste pentru anumite părți dintr-un feature, care nu sunt încă acoperite în suita de teste automate (numită LayoutTests). Eu am lucrat la un astfel de bug, submitând teste care verifică faptul că specificitatea și poziția regulilor CSS sunt respectate când se folosește region styling. Ocazie cu care am descoperit încă un bug în aceeași zonă.

www.youtube.com/watch?v=W9UJ8Hwu520

Alte demo-uri

Deși nu apar înregistrați „pe bandă”, au mai participat și:

• Andrei Poenaru – care a lucrat la repararea unor teste de audio și video care erau incorecte
• Radu Apostoleanu – care a încercat să adauge un eveniment overflow pe obiectele NamedFlow din CSS Regions.
• Răzvan Căliman – care a studiat posibilele interacțiuni dintre Shadow DOM și CSS Regions și cum ar putea fi folosite cele două pentru a crea un model mai elegant de folosire a regiunilor. Concluziile celor 3 zile de studiu sunt publice, pe GitHub.
• Mihnea Ovidenie și Raul Hudea – care au ajutat cu sfaturi în orice a însemnat dezvoltare WebKit

Și încheierea de maxim efect

www.youtube.com/watch?v=gWdemNILD4k

Ce mai zic și alții

[...] pe mine m-au bucurat in special oamenii care si-au aratat dedicatia, deschiderea spre comunicare si intelegerea catre cei care nu aveau aceeasi experienta in spate.

Am invatat mai multe despre Webkit si cum este el structurat, m-am lovit de structura implementarii lui (.h, .c, .idl) si toate dependintele care duc la creearea webengine-ului. Am invatat rigoarea in dezvoltarea pe termen lung a unui produs, importanta comment-urilor (care nu prea exista), importanta unui cod usor de inteles si a testelor.

Cu toate ca a fost prima oara cand m-am lovit de webkit si un objective-c riguros, nici Mihnea si nici Raul nu m-au facut sa ma simt nasol sau ca nu as stii destul in ciuda numarului mare de intrebari pe care l-au primit de la mine. [...]

In concluzie evenimentul a fost unul reusit in mare parte datorita tuturor care au avut o atitudine deschisa si au fost gata sa sara peste orice problema de 32 de bitzi.
(Radu Apostoleanu)

Am avut ocazia sa intru in detalii cu Shadow DOM si cum interactioneaza cu CSS Regions.

Am descoperit cateva limitari ale implementarii noastre pe care le putem corecta din timp. Asta e foarte bine! Shadow DOM are foarte mare potential si cred ca trebuie urmarit indeaproape in perioada urmatoare.

Ca urmare a hackatonului am publicat un scurt document cu ce am invatat: https://github.com/oslego/shadow-dom-regions/blob/master/Lessons-learned.md.

Documentul a generat ceva interes in cercurile oamenilor din domeniu. Dimitry Glazkov, initiatorul Shadow DOM si Paul Irish, Google Developer Advocate, au salutat initiativa si au dat mai departe documentul catre followerii lor.

Provocarea a venit din partea documentatiei limitate pentru Shadow DOM. Fiind un feature inca in dezvoltare a trebuit sa ma bazez doar pe LayoutTeste din WebKit si pe specificatia W3C pentru a intelege ce este bug si ce este limitare de implementare.
(Răzvan Căliman)

Hackathon-ul a reprezentat pentru mine o experiență deosebită, întrucât am participat atât ca organizator și mentor, fiind intern Adobe, cât și ca participant la început de drum în privința contribuțiilor în WebKit. Am avut multe lucruri noi de învățat și am fost surprins să văd feature-uri foarte de interesante și complexe dezvoltate într-un interval de timp extrem de scurt. Încă o dată, am înțeles că entuziasmul și perseverența sunt suficiente pentru a mișca lucrurile repede și în direcția potrivită.
(Victor Cărbune)

Mulțumim celor care-au participat, celor care au organizat și… să ne vedem la următorul!

Nu vreau sa vorbesc insa despre asta la modul general, ci vreau sa atrag atentia asupra unui aspect care poate trece usor neobservat, dar care este relevant pentru lumea digital publishing-ului: este primul browser de pe mobile care are suport partial de CSS Regions. Este un prim pas in a permite web designerilor sa creeze usor layout-uri complexe, de genul celor din publicatiile profesionale, si care sunt in acelasi timp adaptive la dimensiunile oricarei tablete sau smartphone.

Pentru cine nu a aflat inca, CSS Regions este o initiativa pornita din Adobe Romania, implementata tot in Romania de catre echipa WebKit. Faptul ca CSS Regions a ajuns in Chrome pentru Android ne demonstreaza ca obiectivul nostru de a ne implica activ in imbunatatirea web-ul este realizabil. Ne demonstraza ca o echipa din Romania poate influenta directia in care se indreapta web-ul.

Ca o paranteza, CSS Regions este suportat si de Chrome pentru desktop, incepand cu versiunea 15, si este implementat partial si in IE10 beta.

Felicitari echipei WebKit!

Si stam destul de bine in industrie:

Top10 pe toate industriile este:

Mai multe detalii aveti pe site-ul celor de la Vestas (furnizorii solutiilor folosite de Adobe).

Creative Cloud, anuntat la MAX si cu stiri noi despre preturi ieri, este o noua initiativa majora din partea Adobe, care promite sa revolutioneze felul in care produceti continut. Primul pas a fost facut acum un an cu abonamentele pentru Creative Suite, dar incepand din 2012 venim cu multe imbunatatiri si adaugiri.

Ce contine Creative Could?

• Desktop Applications — Toate produsele din Adobe Creative Suite Master Collection,  Photoshop®, InDesign®, Illustrator®, Dreamweaver®, Premiere® Pro, After Effects®, ca si produsele care acum se afla in beta Adobe Edge si Muse.
• Touch Apps – Primele 6 Adobe Touch Apps anuntate la MAX , 2011 – Adobe Collage, Adobe Kuler, Adobe Carousel, Photoshop Touch, Adobe Debut, Adobe Proto si Adobe Ideas.
• Services – Adobe Digital Publishing Suite pentru a livra publicatii digitale pe tablete,  Adobe Business Catalyst pentru a-ti duce business-ul online, si cloud-based fonts  prin Typekit.
• Community –Collaboration feature prin care puteti sa va postati munca online si sa discutati cu alti membri pe forum, sa gasiti idei noi.

Si pentru ca o poza face cat 1000 de cuvinte, cam asa arata Creative Cloud-ul acum:

Dar cel mai bun lucru la toate astea este pretul. Membership-ul va costa 49.99$ pe luna pentru indivizi si 69.99$ pe luna per seat pentru companii, in cazul unui plan anual.

In traducere: Cam 600$ pe an pentru tot Creative Suite-ul, plus Business Catalyst, plus o groaza de servicii. Pret care include si faptul ca vei fi tot timpul up to date cu ultima versiune de Creative Suite.

You’re welcome

Our future work with Flash on mobile devices will be focused on enabling Flash developers to package native apps with Adobe AIR for all the major app stores.  We will no longer continue to develop Flash Player in the browser to work with new mobile device configurations (chipset, browser, OS version, etc.) following the upcoming release of Flash Player 11.1 for Android and BlackBerry PlayBook.  We will of course continue to provide critical bug fixes and security updates for existing device configurations.  We will also allow our source code licensees to continue working on and release their own implementations.

Idei de un milion de dolari sunt putine. Business-uri care sa reuseasca sa puna ideea in practica sunt si mai putine, pentru ca de obicei, pana sa lansezi tu produsul, ideea a prins viata, s-a raspandit si a creat clone (mai reusite sau nu). AirBNB are mai putin de 2 ani si jumatate intre prima runda de finantare ca Seed (ianuarie 2009 – 20.000$) si momentul in care a primit o evaluare mai mare de un miliard de dolari (mai 2011). Si cu toate astea, in astia 2 ani, au aparut deja clonele (9flats, wimdu, housetrip, etc.) care incearca si ele sa muste o bucatica din aceeasi mare placinta.

Cine castiga? Nu neaparat cel care a avut ideea, si nu neaparat primul care a implementat, ci mai degraba cel care realizeaza cel mai bun mix intre idee si punerea ei in practica.

Toyota este recunoscuta in toata lumea pentru cultura pe care o impune, si brandul a devenit deja sinonim cu acea cultura. Iar modul in care au ajuns acolo nu este un secret pentru nimeni, dimpotriva. Firma este deschisa pentru tururi pentru ca toata lumea sa poata vedea ce inseamna in practica implementarea acestor idei. La un search pe Google pe termeni “Toyota quality” sunt 216 milioane de rezultate, iar un search cu aceeasi termeni in Amazon pe sectiunea de carti da 490 de rezultate. Si cu toate astea nimeni nu i-a detronat inca la capitolul calitate. De ce?

Pentru ca este usor sa ai ideea. Fie o ai tu, fie o gasesti la un competitor, fie te inspiri dintr-o suita de idei puse cap la cap, nu conteaza. Ce conteaza in final este implementarea, si la capitolul asta se vad castigatorii.

Anyways, ca sa scurtez ca deja m-am lungit prea mult. In cazul in care vrei sa auzi cum vorbeste un castigator (14 Product of the Year, 12 Best of NAB, 7 Best of Comdex, 2 PC Magazine Technical Excellence awards, and one Emmy award) vino anul asta la How to Web sa il asculti pe Mark Randall. Ne gasesti si pe noi pe acolo, dar noi suntem secundari. Mark conteaza.

De data asta marim miza, si marim si competitia. Punem la bataie un bilet la MAX, cu avionul si hotelul platite, si participare la cea mai tare conferinta de anul asta. Daca vrei sa vii cu noi in Los Angeles la inceputul lui octombrie trebuie doar sa codezi o aplicatie mobila super tare, sa o inscrii pe cele trei mari site-uri (Android marketplace, Apple Store si BlackBerry AppWorld) pana pe 1 septembrie si…. cam asta e tot.

Restul decide juriul, din care fac parte 4 evangelisti si un Business Development Manager.  Categoriile de jurizare au ramas aceleasi ca si acum un an: User Experience, Architecture, Novelty and Usefulness.

Fiecare categorie va castiga cate un Creative Suite 5.5, iar castigatorul marelui premiu merge cu noi la MAX.

Pentru mai multe detalii si inscriere puteti intra pe site-ul Adobe Mobile Challenge.
Daca aveti intrebari puteti lasa un comentariu fie aici, fie pe siteul Adobe Mobile Challenge

Magda

Esti pasionat de Adobe® Photoshop®, Illustrator® sau InDesign® si

… iti place sa desenezi toata ziua iar creatiile tale sunt, de cele mai multe ori, pentru print,

… iti doresti, insa, sa te implici si in creearea de site-uri web,

… dar de fiecare data, trebuie sa lucrezi cu developeri pentru a te ajuta cu generarea codului?

Daca tu esti persoana de mai sus, atunci cu siguranta vei fi interest de Muse.

Muse (nume de cod) este o noua tehnologie Adobe în curs de dezvoltare, care permite graphic designerilor sa dezvolte site-uri in in cateva minute fara a-si bate capul cu codul HTML si CSS.

Dacă te intereseaza sa dezvolti site-uri web folosind un instrument familiar,  te invitam să participi la programul nostru privat de pre-lansare in care te poti juca cu aceasta noua tehnologie si ne poti ajuta si pe noi sa o rafinam si sa o dezvoltam mai departe. Click aici, urmeaza pasii descrisi, iar noi te vom cauta cand versiunea Beta va fi gata. Si va fi gata cat de curand.

LE: Pentru ca il avem in sediu pe omul care posibila platforma AIR pentru mobile, si care conduce acum tot ce inseamna Flash Runtime, ne-am gandit sa il rugam pe el sa tina Keynote-ul. Asa ca primul speaker al serii va fi Arno Gourdol.

Vino sa vedem impreuna ce e nou in mobile development si cum arata Playbook-ul celor de la RIM. Programul mai poate suferi modificari, iar daca aveti sugestii sunt binevenite. Deocamdata el arata cam asa:

• Keynote – Arno Gourdol/Director of Engineering, Flash Runtime Core Dev/ Adobe
• Building mobile apps for Android, iOS, and Playbook – Mihai Corlan / Developer Evangelist / Adobe
• Meet the Playbook and find out all about RIM’s new tablet. – Sanyu Kiruluta / EMEA Team Lead Developer Relations / Research In Motion Ltd.

Agenda arata cam asa:

• HBase intro – Lars George
• Big Data with HBase and Hadoop at Adobe
• Talk 3 – TBD
• Lightning talks (10m each)
• HBase status and roadmap – Lars George
• Q&A/Open discussion
• Beer at Rock’n Pasta or downtown

Daca vreti sa prezentati ceva sau aveti comentarii puteti posta aici pentru inregistrare la eveniment mergeti aici.