Archiv für die Kategorie ‘Web’

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 …

Firefox „Newtab“

Veröffentlicht: 19. Mai 2012 in Web
Schlagwörter:, ,

In Firefox Version 12 hat ein neues „nightly“ Feature Einzug in den Browser gefunden: Die Newtab-Funktion. Dadurch ist es nun möglich die am häufigsten besuchten Webseiten direkt auf der Startseite bzw. in einem neuen Tab anzeigen zu lasen. Diese Funktion existiert in anderen Browsern wie z.B. Chrome schon länger.

Um diese Funktion in Firefox 12 zu aktivieren, muss man about.config in die Adresszeile eingeben, die Werte browser.newtabpage.enabled auf true setzen und für browser.newtab.url den Wert about:newtab eingeben.

Das Ergebnis kann sofort in einem neuen Tab betrachtet werden.

Die Firefox-Entwickler haben eine nützliche neue Funktion eingebaut, die es zwar bereits schon vorher durch Plugins gab, aber jetzt endlich nativ vom Browser selbst angeboten wird. Bleibt nur zu hoffen, dass die Funktion auch noch in der nächsten Version 13 erhalten bleibt 😉

Firefox hat seit Version 4 einige einfache Entwicklertools und eine Konsole in den Browser integriert. In der neuesten Version 10 wurden diese Tools ein bisschen aufgepeppt. Über den Menü-Punkt „Web-Entwickler“ → „Untersuchen“ können nun direkt im Browser Elemente in der Webseite selektiert werden, der HTML-Code analysiert und CSS-Stile manipuliert werden.

Optisch ist die neue Funktion ansprechender als die gleiche Funktion im kostenlos erhältlichen Firefox-AddOn „Firebug„. Der Funktionsumfang reicht aber allgemein bei weitem noch nicht an die von Firebug heran. Vermutlich sind die neuen und erweiterten Web-Entwickler Tools auch ein Schritt in Richtung der schon seit längerem in Webkit-Browser integrierten „F12“-Tools. Man darf gespannt sein in welche Richtung sich Firefox im Punkt Entwickler-Tools entwickeln wird. Bisher können diese jedoch noch nicht die „Web-Developer„-Symbolleiste und „Firebug“ ersetzten.

Bereits im vergangen Jahr habe ich eine Hausarbeit über YouTube-Statistiken erstellt. Dazu habe ich bereits die Einträge „Python Classifier“ und „MySQL Datenbank“ erstellt. Nun kommt etwas verspätet auch ein Eintrag dazu 🙂

Inhaltlich habe ich in der Arbeit einen Testserver aufgesetzt, Daten über die YouTube Data API angefragt und die Daten in eine MySQL Datenbank geschrieben. Die Daten wurden dann zu einem späteren Zeitpunkt mit Hilfe eines Python-Skripts ausgewertet. (mehr …)

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 …)

Python Classifier

Veröffentlicht: 16. Mai 2011 in Hochschule, Web
Schlagwörter:, , ,

Im Moment arbeite ich an einem Projekt, in dem ich unter anderem statistische Daten über Youtube sammle und Kommentare auswerte. Gerade eben konnte ich endlich mit Erfolg die Sprachkomponente zum Bewerten von Kommentaren fertigstellen. Dazu habe ich ein Python-Skript geschrieben, dass mit Hilfe von NLTK und dem NaiveBayes Classifier meine Kommentare bewertet.

Dabei habe ich jetzt einen Zwischenerfolg erreicht: Das Skript hat gerade ~55.000 Kommentare aus meiner Datenbank eingelesen, bewertet, in eine Kategorie eingeordnet und diese Kategorie wieder zurück in die Datenbank gespeichert. Der ganze Vorgang hat dabei nur 48 Sekunden gedauert! 🙂