Archives

by lorenzo tilve

Back from JSCONF.eu 2009

After a some of rest (we slept just too little during the conferences) and catching up with the mail, I was willing to devote some time to write about my notes and feelings these days in Berlin.

Just to sum up, the whole thing was just awesome! We knew a lot of great people there and learned so many things.  We are surprised with the maturity and possibilities around JavaScript community, and how they will have even more presence in the short term.

The speakers were all important people from the variety of JS related feet, just missed some speech about Gnome Shell. In some months time all GNOME 3 users around the world will be running JavaScript in their desktops. That’s millions of people! We talked a lot about this with many people and everybody was really interested about it. In fact, a BoF about was almost proposed. In future JSConf editions we should try to get something presented on Gjs.

I have plenty of annotations, tools to test and things to take a look at, but for the record, some interesting quotes 🙂

Saturday

We already knew some people from the welcome party the day before (Sergi and Irakli from Tom Tom, Tobie Langel and Peter Svensson who were talking on Sunday) and after the ‘expect bacon’ breakfast the conference started. Briefing:

And later on the Nokia party was also really good. The snacks were great, all the food we had at Berlin, in fact. We also had a little bit of time to go for a walk and see the Brandenburg Gate spectacularly lit for the 20th anniversary of the Fall of The Wall.

Sunday

  • Amy Hoy Hard Refresh – Not Just Another LightboxVery innovative ideas about concepts on web design and user interaction (Motion, Interaction, Graphics and Differentiation). I promised her that I would be sending her a copy of the t-shirt I have in mind with the great quote I borrowed from her blog “If you polish shit, all you get is shit that’s shiny“.
  • Ryan Dahl Node.js, Evented I/O for V8 Javascript We were really interested in this speech as it was giving hints on threading and handling of high concurrence environments, that apply to DBUS problematic in GNOME
  • Steve Souders Performance Really interesting his analysis on the emotional reaction that makes the user feel slowness, and the tools he introduced browserscope.org, webpagetest.org, spriteme and pagespeed. Progressive rendering and enhancement are needed, deliver HTML first and defer JS loading and decoration.
  • Tobie Langel Unittesting JavaScript with Evidence He explained his motivations to create a new unit testing suit, based on the necessity of making it framework agnostic
  • Faruk Ateş JavaScript in the age of HTML 5 and CSS 3 A great presentation on how to manage advanced CSS3 features from an agent independant point of view. It started in a shocking way: ‘All the webs don’t need to look the same in different browsers. Equal vs. similar‘. The idea is that some visual enhancements can be managed from each separate feature, and not in terms of user agent, and it will be the responsibility of the developer to implement the rest or not. It can be experienced what he ment in his site, accesing it with webkit based browsers, Gecko or others, and check the CSS transparencies, rounded corners and animated transitions. I had also an interesting discussion with him to ask for his opinion on the improvements planned for the webkit hackfest and he would be glad offering his point of view in the priorities from a designer point of view.
  • Jörn Zaefferer Developing web applications with jQuery UI Gave a quick overview on creating a shop from the scratch with jQuery. An interesting question was asket regarding to interaction in newer smartphones, to which the roadmap will have to manage interaction with multitouch events
  • Nicole Sullivan A little off topic: on OOCSS Useful set of hints and techniques to keep CSS under control and make the architecture of the presentation styles more coherent. I do agree with her ‘code is fragile’ quote, and that’s even more explicit in CSS, but it’s still difficult to avoid.
  • Fabian Jakobs Autopsy of a Widget An step-by-step implementation of a spinner component
  • John Resig Understanding JavaScript Testing Some more comparison on testing suites. As Tobie already covered that, he also included a part of profiling. It was funny to find out that IE benchmarking works better emulated, as getTime() function gives more accurate results than 0 and 16 ;p

Then another informal party in the Lounge of the Ïma Design Village, where all the conferences were done, a really cool place by the way.

This is as summarized as I could, an overview of what I saw at Berlin. For any other information I could have ask me, or see the rest of stuff is in their web, slideshare, Flickr, Twitter and so on ;p

by lorenzo tilve

Components scroll synchronization with Javascript

Management of scrolls in different areas of your page it’s as easy to attach a listener to the component where the scrolls are shown in order to change the positioning properties of the simulated scrollable attached area when the scrollbars are used. A couple of things to keep in mind are that the javascript-scrolled area should have the same dimensions that the main one in order to handle the same amount of displacement with the scrolls, and depending on the need of explicitly  showing the secondary scrollbar or not CSS display property should be set properly.

A very basic example would be just moving this examples here, a couple of simple HTML boxes:


   
Lorem ipsum...





   
Lorem ipsum...

with its asociatted CSS properties:

#scrolled-block {
   overflow:auto;
}
#javascript-scrolled-block {
   overflow:hidden;
}
.content-box {
   background-color: #EEEEEE;
   margin:20px;
   padding:10px;
   width: 200px;
   height: 200px;
   float:left;
}

This produces the displayed result. Our purpose is to add an action listener to onScroll first component in order to get the second box moved when we scroll the first one:

Scrollable box

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc mollis ante ut sapien venenatis porttitor. Aliquam vel justo nec nisi mattis tempus
in eget magna. Sed vitae risus et nulla placerat laoreet. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Duis vestibulum velit a sapien bibendum
laoreet. Nulla nec sapien et orci tincidunt tempor. Proin orci metus, egestas at sodales vitae, sodales vitae erat.

Self-scrolled box

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc mollis ante ut sapien venenatis porttitor. Aliquam vel justo nec nisi mattis tempus
in eget magna. Sed vitae risus et nulla placerat laoreet. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Duis vestibulum velit a sapien bibendum
laoreet. Nulla nec sapien et orci tincidunt tempor. Proin orci metus, egestas at sodales vitae, sodales vitae erat.

listenToScroll();
function listenToScroll() {
scroll.block_ = document.getElementById(‘scrolled-block’);
scroll.jsblock_ = document.getElementById(‘javascript-scrolled-block’);
onScroll = function() {
scroll.jsblock_.scrollTop = scroll.block_.scrollTop;
};
scroll.block_.onscroll = onScroll;
}

listenToScroll();

function listenToScroll() {
    scroll.block_ = document.getElementById('scrolled-block');
    scroll.jsblock_ = document.getElementById('javascript-scrolled-block');
    onScroll = function() {
        scroll.jsblock_.scrollTop = scroll.block_.scrollTop; 
    };
    scroll.block_.onscroll = onScroll;
}

This strategy works fine for simultaneous synchronization but we have checked a different behavior for listeners attached to scrollbars in the different browser engines. In WebKIT based browsers with its Javascript engines (as Squirrelfish in Epiphany or v8 in Chrome), all listeners are processed when the browser implementation fiscally scrolls the component, so the movement is perfectly synchronized. For Gecko plus Tracemonkey, the effect that can be perceived is that scroll in the first component is slightly delayed. To avoid this, it’s necessary to scroll both components using Javascript, and creating a third element just with the scrollbar. The result can be checked evolving the previous example.

Self-scrolled box 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc mollis ante ut sapien venenatis porttitor. Aliquam vel justo nec nisi mattis tempus
in eget magna. Sed vitae risus et nulla placerat laoreet. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Duis vestibulum velit a sapien bibendum
laoreet. Nulla nec sapien et orci tincidunt tempor. Proin orci metus, egestas at sodales vitae, sodales vitae erat.
Aliquam sed lorem a ante vestibulum pharetra. Nullam lobortis facilisis tincidunt. Quisque id libero ante, in aliquet orci.

Self-scrolled box 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nunc mollis ante ut sapien venenatis porttitor. Aliquam vel justo nec nisi mattis tempus
in eget magna. Sed vitae risus et nulla placerat laoreet. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Duis vestibulum velit a sapien bibendum
laoreet. Nulla nec sapien et orci tincidunt tempor. Proin orci metus, egestas at sodales vitae, sodales vitae erat.
Aliquam sed lorem a ante vestibulum pharetra. Nullam lobortis facilisis tincidunt. Quisque id libero ante, in aliquet orci.

listenToSimulatedScroll();
function listenToSimulatedScroll() {
scroll.simulatedblock_ = document.getElementById(‘simulated-scrolled-block’);
scroll.jsblock1_ = document.getElementById(‘javascript-scrolled-block-1’);
scroll.jsblock2_ = document.getElementById(‘javascript-scrolled-block-2’);
onScroll = function() {
scroll.jsblock1_.scrollTop = scroll.simulatedblock_.scrollTop;
scroll.jsblock2_.scrollTop = scroll.simulatedblock_.scrollTop;
};
scroll.simulatedblock_.onscroll = onScroll;
}

listenToSimulatedScroll();
function listenToSimulatedScroll() {
	scroll.simulatedblock_ = document.getElementById('simulated-scrolled-block');   
	scroll.jsblock1_ = document.getElementById('javascript-scrolled-block-1');	
	scroll.jsblock2_ = document.getElementById('javascript-scrolled-block-2');	
    onScroll = function() {
        scroll.jsblock1_.scrollTop = scroll.simulatedblock_.scrollTop; 
        scroll.jsblock2_.scrollTop = scroll.simulatedblock_.scrollTop; 
    };
    scroll.simulatedblock_.onscroll = onScroll;
}

It would be necessary to remove the paddings, and that’s it.

#javascript-scrolled-block-1, #javascript-scrolled-block-2 {   
	overflow:hidden;
}
#simulated-scrolled-block {
    overflow:auto;
    background-color: #EEEEEE;
    padding-left:0;
    width: 5px;
}
.inner-simulated-block {
   height:300px;
}
.content-box {
    background-color: #EEEEEE;
    overflow:auto;
    padding-left:0;
    width: 5px;	
    margin:20px;
    padding:10px;
    height: 200px;
    float:left;
}


   
Lorem ipsum...





   
Lorem ipsum...

Things get really complicated when it’s necessary to scroll intersected areas inside a complex layout with the need to stick scrollable components over the main area, in a desktop application style approach, let’s say for instance a Gantt application layout. In this scenario we have to combine this technique with CSS positioning of related elements, manage its resizing and binding different methods to each dimension scrolling, but the main idea is the same one.

by lorenzo tilve

Going to JSConf.eu 2009

After some doubts about if we were going to be able to register, we finally could sign up for JSConf.eu 2009, so two people from Igalia are going be in Berlin the 7th and 8th of November.

lg_logoJavascript is one of the transversal technologies in Igalia and this is the reason why there will be people in the conferences that has been working both on Desktop Mobile and Web Application Development groups.

Some of us already have quite a lot of experience with Server-Side communications with JS, and we are willing to go deeper in its usage to more advanced RIA oriented features within the scope of our ZK scheduling application.

We hope to get a lot of interesting ideas and boost our knowledge in the different frameworks that are going to be explored, have an insight in future opportunities, and of course, know people and have fun!

PD.  Then we take Berlin!

by lorenzo tilve

Testing Moonlight

We have been considering several architectural alternatives for a future project we are going to start. The idea is to develop a production management system, which has a scheduling part, to which is going to have a web interface. The debate is: plugin-oriented (free alternatives, of course) vs javascript.

We are not sure about the richness we will need to handle, and how easy would be to integrate it with

I have installed packages to run my own mono server, and develop some quick tests for moonlight http://www.go-mono.com/moonlight/

The tests were done with 1.0 and 2.0 versions for 32 bits. First worked fine, but some environments already demanded the latest version that shoud be downloaded from the repository

svn co svn://anonsvn.mono-project.com/source/trunk/moon

Although some simple C# components worked fine, and it would be interesting in the future as an alternative to Flash, its level of maturity, and the doubts on how we could connect the graphical components with a non-mono application, led us to discard Moonlight for the current project.

Besides, the possible use of direct Canvas elements in HTML 5, made us go to Javascript alternatives that seem to have other clear advantages.

So we are testing now Yahoo Library YUI (BSD Licensed) that is looking really good for our purpose of drawing and moving boxes over our ZK Direct RIA architecture.