This blog has been moved to: http://www.webdesignporto.com/

Hello!

I have to tell you that this blog has been moved to http://www.webdesignporto.com/. There is more JavaScript content.

Qooxdoo [1.6]: create & understand tables with remote models

No CSS, No HTML [p07]: Easy image sprite manager

Totty got tired because:

1. He has to manually change it’s CSS file in multiple places in order to be get the correct x and y of the image he needed;
2. Even changing the skin can be very time consuming;

.lightSkin .backButton {
   background-image: url('img/UI_lightSkin') 0px 10px no repeat;
}

Then he think and solved:

1. Now he can make an object that is structured in this way: libraryName.imageName;

// you only have to change here, where you define
mapSprite("UI", "lightSkin", { // library name, skin name, maps
   backButton: [0, 10, 10, 10], // x, y, width, height
   forwardButton: [10, 10, 10, 10]
});
// the code where you actually use you don't have to change and worry about
// if you change the skin you don't really have to change anything here
// everything is managed internally. In this case we use the default skin.
// the real image is: "UI_lightSkin"
var backButton = new Image('UI.backButton');
template.addChild(backbutton);

No CSS, No HTML [p06]: Use multiple layouts/designs to measure usability

Totty got tired because:

1. He couldn’t easily test whatever one template was better than another; Whatever one UI pattern is better than another;

Then he think and solved:

1. As he chose to use the template by object now he can change the layout at run-time and log to statistics;

No CSS, No HTML [p05]: Fast design and layout changes

Totty got tired because:

1. Making a larger change in the design has to change it’s CSS files in multiple places; This took time and created more bugs;

Then he think and solved:

1. As he chose to use the template by object now he can change the layout even at run-time without side-effects, just by changing 1 javascript file;

No CSS, No HTML [p04]: Server acts like a service

Totty got tired because:

1. Server has to render HTML pages and responding to ajax queries by not reusing code;

Then he think and solved:

1. As he chose to use only the client framework to render pages on the client and on the server then he can render pages on the server with the same code that renders on the client; The real part of the server only have to act like a service responding only to ajax queries.

No CSS, No HTML [p03]: Templates by HTML vs objects

Totty got tired because:

1. Templates by HTML were dirty;
2. Difficult to put UI logic in it;
3. Has to be in sync with the client framework in order to make DOM queries;

Then he think and solved:

1. Used templates by objects: you create an object in javascript and then it renders itself; This object usually contain other objects that render themselves; Until it reaches the most basic parts: buttons, texts, boxes, layouts…
2. All the UI logic is written in pure javascript;
3. He write once and render both on client and on server, therefore no DOM queries are needed;

No CSS, No HTML [p03]: Maintaining CSS files

Totty got tired because:

1. To write plugins/widgets/modules in javascript mixed with HTML and maintain an external CSS file for each;
2. Has to make DOM queries;

Then he think and solved:

1. Got a client framework that abstracts all the CSS and HTML therefore writing a plugin/widget/module only needs at least 1 pure javascript file (no strings with HTML);
2. By generating HTML there is no need to make DOM queries because all the elements are stored in a variable when are created or appended to the DOM;

No CSS, No HTML [p02]: CSS browser inconsistencies

Totty got tired because:

1. He had to check the website in 5 different browsers (Chrome is his default, IE, Firefox, Opera and Safari) every time he made a change to his CSS files;

Then he think and solved:

1. Instead of writing websites in CSS and HTML he chose to write real apps in Javascript only, that don’t rely on CSS and HTML;

No CSS, No HTML [p01]: Websites vs Web-apps

Totty got tired because:

1. Has using 2 different approaches when building a website and a web-app;
2. This cannot be done because web-apps are not index-able by Google and therefore SEO doesn’t work;
3. Sometimes a website needs a part that is more web-app like (backoffice) and has to integrate it’s web-app with the website;

Then he think and solved:

1. Use the same framework and approach when building a website and a web-app;
2. Render the application on the server using a Domless client side framework;
3. Share the same code between the backoffice and the website itself;