Mit ‘Javascript’ getaggte Beiträge

For a current project I use RequireJS with Backbone and Handelbars to create some fancy single page web application 😉 After playing around and getting everything togethet, I noticed some strange and randomly occurring errors.

My setup looks like this:

| js/
  | app/
    - [...]
    - main.js
    - config.js
  | libs/
    - [...]
    - require.js

The main.js wires RequireJS and starts up the application. Here is an excerpt from main.js file:

require.config({
    deps: ['config']
});

require(['dummy/app', 'jquery', 'jqueryui', 'underscore', 'backbone'], function (App) {
    new App();
});

I exported the RequireJS configuration into its own file (config.js), because I needed almost the same configuration for unit testing the application via karma. Here is an excerpt from config.js file:

require.config({
    paths: ...
    shim: ...
});

Sometimes the app tried to load my libraries from paths like „js/app/jquery.js„, but the libraries were located under „js/libs/…„!
After googling around I noticed that RequireJS is loading every content asynchronously by adding „async“ as attribute to the <script> tag. The same behavior occurs for loading external RequireJS configuration files. The following statement loads its sub-configutation also async!

require.config({
    deps: ['config']
});

After becoming aware of this feature, I wrapped the initialization of the main application into another require(..) statement (as described on stackoverflow.com). The loading process and linking of external asynchronously loaded content was now fixed.

Here is an excerpt of the fixed main.js file:

require.config({
    deps: ['config']
});

require(['config'], function () {
    require(['dummy/app', 'jquery', 'jqueryui', 'underscore', 'backbone'], function (App) {
        new App();
    });
});

While developing a online text editor with the HTML <textarea> element, I found a very strange behavior of the <textarea> in IE9 in rotated mode. The rotated textarea element is a functional requirement, so it cannot be rejected. The textareas dimensions should also automatically align on text input.

In the first solution, I set the content and styles of the textarea like so:

var elTextarea = new Element("textarea").inject(document.body);

elTextarea.set("text", textContent);

elTextarea.setStyles({
  // [...]

  "-webkit-transform-origin": pX +"px "+ pY +"px",
  "-moz-transform-origin":    pX +"px "+ pY +"px",
  "-o-transform-origin":      pX +"px "+ pY +"px",
  "-ms-transform-origin":     pX +"px "+ pY +"px",

  "-webkit-transform": "rotate("+ angle +"deg)",
  "-moz-transform":    "rotate("+ angle +"deg)",
  "-o-transform":      "rotate("+ angle +"deg)",
  "-ms-transform":     "rotate("+ angle +"deg)"
});

On a „keydown“-event, I aligned the textareas dimensions to max. width and height of the text content (I did this with a helper <div> element and measured the dimensions of that element).
So far the solution works properly in Chrome 17+, Firefox 11+ and Opera, but not in IE9 😦

In IE9 the textarea jumps around like crazy, parts are hidden or overlayed with some outer content. This problem is solvable by using msTransform instead of -ms-transform (why Micro$oft!? Everbody else uses the -BROWSER-CSS syntax! *grml*).

Here is the first fix:

elTextarea.setStyles({
  // [...]

  "-webkit-transform-origin": pX +"px "+ pY +"px",
  "-moz-transform-origin":    pX +"px "+ pY +"px",
  "-o-transform-origin":      pX +"px "+ pY +"px",
  "-ms-transform-origin":     pX +"px "+ pY +"px",
  "msTransformOrigin":        pX +"px "+ pY +"px",

  "-webkit-transform": "rotate("+ angle +"deg)",
  "-moz-transform":    "rotate("+ angle +"deg)",
  "-o-transform":      "rotate("+ angle +"deg)",
  "-ms-transform":     "rotate("+ angle +"deg)",
  "msTransform":       "rotate("+ angle +"deg)"
});

The second problem was a more tricky one: The textareas text content is set dynamically via JavaScript and MooTools. After a single read of the text-content, the text did not automatically wrap on the next write in the textarea.

This issue gave me a lot of food for thoughts … The problem was the MooTools method set(attr, content) to set attribute nodes of HTML elements. I did some testing and set the textareas content by .innerHTML, .value and with .textContent. I got the best working solution by using .value to set the content.

So I altered the code from set("text",[...]) to set("value", [...]). The following code example contains the whole solution to this problems:

var elTextarea = new Element("textarea").inject(document.body);

elTextarea.set("value", textContent);

elTextarea.setStyles({
  // [...]

  "-webkit-transform-origin": pX +"px "+ pY +"px",
  "-moz-transform-origin":    pX +"px "+ pY +"px",
  "-o-transform-origin":      pX +"px "+ pY +"px",
  "-ms-transform-origin":     pX +"px "+ pY +"px",
  "msTransformOrigin":        pX +"px "+ pY +"px",

  "-webkit-transform": "rotate("+ angle +"deg)",
  "-moz-transform":    "rotate("+ angle +"deg)",
  "-o-transform":      "rotate("+ angle +"deg)",
  "-ms-transform":     "rotate("+ angle +"deg)",
  "msTransform":       "rotate("+ angle +"deg)"
});

Who would have thought that three lines of code would cause so much trouble in IE9 …

Scratchpad / Notizblock

Veröffentlicht: 18. August 2011 in Web
Schlagwörter:, , , , , , , , ,

In Firefox 6 hat mal wieder ein neues Spielzeug Einzug gefunden: das Scratchpad oder auf deutsch Notizblock. Scratchpad ist ein sehr mächtiges Tool für Entwickler, da direkt JavaScript interpretiert werden kann.

Scratchpad

Aufruf von Scratchpad über das Menü

(mehr …)

Zeitmessung

In meiner Bachelor-Thesis habe ich u.a. auch Optimierungen und Optimierungsmöglichkeiten in Javascript untersucht. An der ein oder anderen Stelle bin ich immer wieder über das Problem gestolpert, meinen Javascript Code auf Performance zu testen. (mehr …)

Bachelor-Thesis

Veröffentlicht: 29. April 2011 in Hochschule
Schlagwörter:, ,

Am 14. Januar 2011 habe ich bereits meine Bachelor-Arbeit über das Thema „Optimierung von webbasierten Client / Server Systemen mit Schwerpunkt Javascript“ abgegeben. Durch die Arbeit habe ich viele neue Einblicke in den Bereich der Website und Javascript Optimierung bekommen. Die Erkenntnisse im Bereich wissenschaftlicher Arbeiten und das Arbeiten mit LaTex haben mich auch sehr weiter gebracht und helfen mir für zukünftige Projekte.

Einige der Vorlagen und Kniffe in LaTex habe ich bereits an andere Stelle in diesem Block veröffentlicht, um anderen Leuten mit ähnlichen Problemen gute Hilfestellungen in diesem Bereich zu geben.