Matteo Bicocchi's Blog

A major update of mb.containerPlus is Out!

2.4.7 minor and major issue and bugfix:
1. added minWidth and minHeight to be setted as metadata of the container.
2. modified onClose callback to be executed after the transition effect.
3. added onBeforeClose callback to be executed before the close transition effect.
4. now the resize event of a container into a dom element take care of the containment.
5. added alwaysOnTop metadata param to mantain the container always on top.
6. added mb_setFixedPosition() method to set fixed position on the fly.
7. fixed a bug in mb_setCookie() with expire date.
8. Added a dockedIconDim param to set the dimension of docked icons.
9. Fixed a bug that if the container hasn’t a height set, once restored from minimized, it still expand its contenet without showing scrollbars.

Get it now: http://pupunzi.open-lab.com/mb-jquery-components/mb-containerplus/

My components suite mb.components benefits greatly from the Q&A service which we bought from StackExchange services. We decided to offer to all jQuery component developers free hosting on the jquery.pupunzi.com service.

What you get: if you link your components site to jquery.pupunzi.com,

1. you get the best online Q&A service you can get: see stackoverflow.com.
2. we will add a home page banner pointing to your components site, as in the picture on the left.

You should link from your site filtering by the “root” tag concerning your component, e.g.

http://jquery.pupunzi.com/questions/tagged/jquery.mb.scrollable

Why we do this: it is a way to get more visibility to our (and your) component by “sharing” users. It is also a way to share answers and experts on jQuery components.

How to proceed: write me an e-mail at info at open-lab dot com, and I’ll get back to you.

The Navigator, Buster Keaton

I found what my friend Pietro Polsinelli wrote in his article The blurring distinction between graphic design and software development really interesting; he takes the right point view of a modern approach to software development.

As a creative code developer and as member of Open Lab, I can say that this method of working keeps is quite different from the standard approach to development: it gives people a sort of three dimensional perception of what they are doing.

Usually a programmer draws the behavior and the workflow of the app he’s developing, constraining graphic designers to adapt their creativity to what exist. This approach penalizes usability, hampering possible “Wow” effects and increasing complexity. Vice-versa no graphic designer can create a usable and comfortable interface without knowing what’s possible on the code side. Neither developers nor graphic designers can finish their work without any marketing analysis and content editing.

As Pietro says, “among the hats one startup should include in its first team, there is indeed development and marketing, but also graphic and usability design […]” and all these roles should continuously involve each other, brain storming together on all sorts of problems.
This “cross-competence’s feedback method” increases our productivity and the interface’ smartness; we needed just three month from the idea to the product for both Patapage and BugsVoice (two of our new products); it completely changes the way of working both for both graphic designers and developers, expanding each other skills and flexibility.

Diagrams for the Living Interface

I am increasingly convinced that our skills should be less specific and instead embrace everything that surrounds what we do.
The evolution of the web in the recent years is a reflection of this change, from a system composed of millions of isolated pieces, to a system in which every element is trying to communicate intelligently with others, where there is no distinction between enjoyment and action.
Users have an increasingly participatory role and often become direct authors of contents; I’m thinking to the world of blogs, wikipedia, Twitter, Facebook, Flickr, Youtube, and how these services are able to interact between them.

All this happens just because the distinction that previously existed between technology and creativity has been broken, invading every area of communication and radically changing our lives.

Today, a web designer must also deal with functional aspects of what she/he is doing, and must have programming skills, vice versa a developer must acquire user interface skills to optimize the usability of her/his application. This confluence of roles makes the difference between what works and what does not work for the end-user.

It doesn’t mean that a developer has to do the graphics himself … it would be a disaster! This means taking part and be aware of each other’s problems to address their skills in a more creative and responsible way, getting faster innovative solutions that respect user needs.

People are not looking for full featured complex applications… people are looking for something that fills their needs in the easier way. As we can learn from some successful web applications like Google itself or Tweetter or Flickr or WordPress and so on… we should not reveal the complexity of our application, we should instead exalt the smartness and the usability of it. And this is possible only if developers and GUI designers work together to code and interface interaction.

Those considerations can be applied not only to the web but to everything that needs user interaction in the real world; lets think at cars, phones, appliances, clothes, shoes, …

So you designers and you programmers participate and share your ideas! And also hope that Pietro (a developer) will never work alone on his application GUI!

Suggested readings:

• Designing Interactions, Bill Moggridge
• About Face 3: The Essentials of Interaction Design, Alan Cooper

jQuery team have done a great work  in this new 1.4 release.

The new release of jQuery has come out with many new features and code optimization (http://api.jquery.com/category/version/1.4/) to ease manipulate and traversing DOM elements.
The most impressive improvement is internal calls reduction to perform jQuery methods, with a significant increase in performance:

jquery 1.3.2 versus 1.4 performance

Lets take a closest look at some useful changes

• All setter method now accept a function as value:

  .css(), .attr(), .val(), .html(), .text(), .append(), .prepend(), .before(), .after(), .replaceWith(), .wrap(), .wrapInner(), .offset(), .addClass(), .removeClass(), and .toggleClass().

  $('div.demo-container').html(function() {
   var emph = '' + $('p').length + ' paragraphs!';
  return 'All new content for ' + emph + '';
  });

• Quick Element Construction:
  

  When you create a single element with the jQuery function, you can now pass in an object to add attributes and events at the same time:

  jQuery("<div/>", {
  id: "foo",
  css: { height: "50px", width: "50px", color: "blue", backgroundColor: "#ccc" },
  click: function() { $(this).css("backgroundColor", "red");  }
  }).appendTo("body");

• Event Multi-binding:
  You can now pass an object of many events to bind to an element:

  $("div.test").bind({
  click: function(){ $(this).addClass("active"); },
  mouseenter: function(){ $(this).addClass("inside"); },
  mouseleave: function(){ $(this).removeClass("inside"); }
  });

• All Events Can Be Live Events:
  Has been introduced cross-browser support for change, submit, focusin, focusout, mouseenter, and mouseleave via the event delegation in .live(). Note that if you need a live focus event, you should use focusin and focusout rather than focus and blur, because focus and blur do not bubble. Also, live() also now accepts a data object, just as bind() has:

  $("p").live("myCustomEvent", function(e, myName, myValue){
  $(this).text("Hi there!");
  $("span").stop().css("opacity", 1) .text("myName = " + myName) .fadeIn(30).fadeOut(1000);
   });
  $("button").click(function () {
  $("p").trigger("myCustomEvent");
  });

• before, after, replaceWith on disconnected nodes:
  You can now use before, after, and replaceWith on nodes that are not attached to the DOM. This allows you to do more complex manipulations before inserting the final structure into the DOM.

  jQuery(" ").before("Hello").appendTo("body")

• .offset( coords | Function )
  It is now possible to set the offset of an element. Offset, like all setter methods, can now also accept a function as a second argument.

  $(MyEl).offset({ top: 10, left: 30 });

• New .delay() method:
  The .delay() method will delay any further elements in the queue for the specified number of milliseconds.

  $("div").fadeIn().delay(4000).fadeOut();

And many other features are waiting to be used for our great new projects!

I think that this release of jQuery is a great step forward for web based applications development and their usability, as well as key tool for stimulating creativity in the web world.

Here are some graphs that show the dramatic overhauls in performance:

DOM Insertion

Performance of .html()

Performance of .remove() and .empty()

Don’t be afraid to update to 1.4! Backwards-Incompatible is really minimized:

• .add() no longer plainly concatenates the results together, the results are merged and then sorted in document order.
• .clone(true) now copies events AND data instead of just events.
• jQuery.data(elem) no longer returns an id, it returns the element’s object cache instead.
• jQuery() (with no arguments) no longer converts to jQuery(document).
• .val(“…”) on an option or a checkbox is no longer ambiguous (it will always select by value now, not by text value).
• jQuery.browser.version now returns engine version.
• jQuery is now strict about incoming JSON and throw an exception if we get malformed JSON. If you need to be able to evaluate malformed JSON that is valid JavaScript, you can make a text request and use eval() to evaluate the contents.
• Param serialization now happens in the PHP/Rails style by default. You can use jQuery.ajaxSettings.traditional = true; to use traditional parameter serialization. You can also set the behavior on a per-request basis by passing traditional: true to the jQuery.ajax method.
• jQuery.extend(true, …) No longer extends non-plain-objects or arrays.
• If an Ajax request is made without specifying a dataType and it is returned as text/javascript, it will be executed. Previously, an explicit dataType was required.
• Setting an Ajax request’s ifModified now takes ETags into consideration.

Open-lab will take part at Better Software Conference on 5 and 6 May 2010.

We are proud that Develer, a florentine software company, is organizing a software conference here in Florence and we will help them where possible!
The main conference’ topics are agile projects, open source and web 2.0.
We proposed to participate in the talks with an evolution of the Get visitors to read and remember your home page blog posts, which is an important topic for a startup which is attempting self-promotion. We will also give discounts on our products to all participants to Better Software – stay tuned.

The call for papers has just started, all details are here: http://www.bettersoftware.it/call-paper/

We have published a new charting tool for Patapage.

based on jqPlot for jquery, it let you easily show any data as chart on your page with many configuration and a friendly tool to insert your value; it has a history manager to let you restore previous versions and it’s on the Patapage philosophy! check this article written by Roberto Bicchierai (the author of this tool): http://roberto.open-lab.com/2009/12/21/javascript-charting-tools-an-overview/

Go and try it!

jquery.mb.flipText is a simple plug-in to turn your text vertically in both direction: top-bottom or bottom-top.Wasn’t that something you would have done on your HTML pages?

Take a look

See it also presented in Patapage: Flip your HTML text around.

Using the BugsVoice service you will supply friendly error pages and collect user feedback on exceptions.

For everyone who makes web applications and needs to manage exceptions in a friendly way; if you get a trapped exception in your application (or in your web server), this will print out the script copied from your BugsVoice account, display the friendly error page to your customers, and collect their eventual feedback. All this will be saved in your account, and you can access any time to inspect the bug, feedback the customer etc.

try BugsVoice!

site:  http://bugsvoice.com

see also:
setting up an example error trapping page

version 2.4 , The mb.containerPlus with memory!

Finally out the mb.containerPlus with cookies manager; this issue was one of the most voted for this component, it allows to remember the state, the position and the dimensions of your container once the page is reloaded. Just add a”rememberMe” metadata on the specific container and the game is done! (the container must have an ID setted)

Get the last version!

Just published the release 1.5 of jquery.mb.extruder with great new issue:

• modified the flipText behavior (stronger than before).
• added “positionFixed” param to control the position of the extruder (true id default and the extruder doesn’t scroll with the page; if set to false it scrolls).
• added a method to disable/enable a voice on the fly:
  $.fn.disableExtruderVoice and $.fn.enableExtruderVoice

Take a look!