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();
    });
});

Nach einiger Zeit bin ich endlich mal wieder dazu gekommen neue Kategorien und Inhalte hinzuzufügen. Neu sind die Kategorien Gitarren, Gitarrenverstärker und HiFi. Dort habe ich einige Elektronikprojekte veröffentlicht die ich in den letzten Jahren gebaut habe.

Bei den neuesten Projekten geht es u.a. um den Bau des HiFi Röhrenverstärkers KT88 SE und des HiFi Verstärkers Chipamp LM3886.

Frontansicht KT88 SE Röhrenverstärker

Frontansicht KT88 SE Röhrenverstärker

Gehäuse des Chipamps

Gehäuse des Chipamps

Schnelles erzeugen von LaTeX-Dokumenten [Update]

Veröffentlicht: 6. Februar 2013 in Latex
Schlagwörter:, , , , ,

Da ich in letzter Zeit Buch mit 300 Seiten und mehr mitgearbeitet habe, hat mich der Erzeugungsprozess von LaTeX doch irgendwann gestört. LaTeX ist numal immer noch eine Ein-Prozess-Anwendung und kann deshalb Mehrkern-Systeme nicht ganz so optimal ausnutzen. Es gibt jedoch trotzdem Tricks wie der Erstellungsprozess beschleunigt werden kann.

Den Rest des Beitrags lesen »

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.

Windows 8 Consumer Preview

Veröffentlicht: 6. März 2012 in Sonstiges
Schlagwörter:, , ,

Vor kurzem wurde die neue Win8 Preview freigegeben. Zu Testzwecken hab ich die gleich mal in eine VM installiert. Als erstes ist mir der blaue Fisch beim Startvorgang aufgefallen. Ein blauer Fisch!!!

Die Installation ging Windows untypisch sehr einfach und war nach erstaunlich 10 Minuten bereits fertig. Es wurden auch nur zwei Parameter erfasst: Die Spracheinstellungen und bei der erweiterten Installation wurde noch nach einer Installationsfestplatte gefragt. Ui das war ja einfach😮 Wenn ich da so an WinXP Zeiten zurückdenke … Der eigentlich Startbildschirm ist schick und einfach gehalten.

Ein „wisch“ und der Login-Bildschirm erscheint. Der Login-Vorgang erfolgt jetzt per Windows-Live-Konto. Bin mal gespannt ob das auch in der fertigen Version erhalten bleibt. Das erinnert mich an ChromeOS.

Nach dem Login landet man nicht wie bei früheren Windows Versionen auf dem Desktop, sondern auf einem neuen Bildschirm mit den neuen Kacheln wie es sie z.B. auch auf dem Windows Phone gibt.

Insgesamt bin ich positiv überrascht. Klar ist das bisher nur eine Preview und der App-Store ist noch leer, jedoch ändert sich bestimmt noch einiges bis zum eigentlichen Release. Mir ist noch eine Sache aufgefallen: Die Bedienung der Kacheln per Maus und Tastatur macht nur bedingt Spaß. Hier erkennt man gut, wofür Win8 entwickelt wurde: Für Tablets und Touch-Geäte.