betawax

jQuery.ready() & google.load()

Holger — Thu, 04 Mar 2010 15:39:33 +0000

Wie man jQuery über die Google AJAX Libraries API einbindet hatte ich bereits vor einiger Zeit in einem Beitrag beschrieben, nun möchte ich noch mal genauer auf das Zusammenspiel von jQuery.ready() und google.load() eingehen.

Ich lagere meinen gesamten JS-Code für gewöhnlich in eine eigene Datei aus und möchte entsprechend auch google.load() und jQuery.ready() dort aufrufen. Damit dies korrekt funktioniert muss sichergestellt werden das jQuery vollständig geladen wurde bevor .ready() ausgeführt wird. Hierzu verwende ich folgendes Pattern:

HTML

Im der Seite wird zunächst die Google AJAX Libraries API und danach das eigene JavaScript (hier foobar.js) eingebunden:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/foobar.js"></script>

JavaScript

Nachdem im JavaScript (foobar.js) nun das Objekt google zur Verfügung steht kann jQuery dynamisch geladen und jQuery.ready() ausgeführt werden:

google.load("jquery", "1.4");
google.setOnLoadCallback(function() {
  $(function() {
    // document ready
  });
});

google.setOnLoadCallback() stellt dabei sicher das jQuery vollständig geladen wurde bevor jQuery.ready() ausgeführt wird. $(function() {}); ist lediglich eine Kurzform von $(document).ready(function() {});.

ImageMagick Support für TYPO3 unter MAMP (OS X)

Holger — Thu, 21 Jan 2010 14:17:41 +0000

Wie man ImageMagick in MAMP bzw. MAMP PRO unter OS X zum laufen bekommt beschreibt Bryan Rite in seinem Beitrag Getting Imagemagick (and more) to work with MAMP on OS X.

Aufbauend auf diesen Beitrag habe ich eine Kurzanleitung verfasst die noch mal alles zusammenfasst und zusätzlich auch auf die Verwendung in TYPO3 eingeht.

1. MacPorts & ImageMagick installieren

Wenn nicht schon geschehen die Xcode Developer Tools (zu finden auf der Apple Developer Connection Seite oder der Mac OS X Installations-DVD) installieren und anschließend ggf. die Softwareaktualisierung ausführen. Danach MacPorts installieren und folgenden Befehl im Terminal eingeben:

$ sudo port -v selfupdate

MacPorts ist nun einsatzbereit und ImageMagick kann übers Terminal installiert werden:

$ sudo port install ImageMagick

2. MAMP anpassen

In der Datei /Applications/MAMP/Library/bin/envvars folgende zwei Zeilen auskommentieren:

DYLD_LIBRARY_PATH="/Applications/MAMP/Library/lib:$DYLD_LIBRARY_PATH" export DYLD_LIBRARY_PATH

Und folgende Zeile darunter hinzufügen:

export PATH="$PATH:/opt/local/bin"

3. TYPO3 sagen wo ImageMagick zu finden ist

Im Install Tool unter Basic Configuration bei Search for ImageMagick folgenden Pfad eingeben: /opt/local/bin/

Nach einem Klick auf Send steht ImageMagick dann auch in TYPO3 bereit und wird entsprechend grün gekennzeichnet.

Disclaimer: bezüglich Risiken und Nebenwirkungen dieser Methode sollte man sich auf jeden Fall auch noch mal den original Beitrag samt Kommentare durchlesen.

TYPO3 Update von 4.2.x auf 4.3.0

Holger — Tue, 15 Dec 2009 16:15:05 +0000

Aus aktuellem Anlass habe ich mal eine Anleitung geschrieben wie sich TYPO3 von Version 4.2.x auf 4.3.0 aktualisieren lässt. Die Anleitung soll dabei als Zusammenfassung dienen und ist nicht als vollständig anzusehen, auch werden TYPO3-Grundkenntnisse (z.B. der Umgang mit dem Install Tool und Extensions) vorausgesetzt.

Ich selbst habe noch einige System-Updates vor mir und verwende die folgenden Schritte sozusagen als Leitfaden, vielleicht sind sie ja auch für den ein oder anderen mit ähnlichen Szenario hilfreich.

Ausgangssituation:

TYPO3 4.2.10
RealURL 1.5.3
tt_news 2.5.2

Als Informationsgrundlage für das Update dient die knapp gehaltene Anleitung in der TYPO3 Wiki Upgrading to 4.3 und die TYPO3 4.3 Release Notes.

1. TYPO3 Source tauschen

Zunächst wird der neue TYPO3 Source wie gewohnt oberhalb des Document Root entpackt und dann daraus verlinkt:

$ tar xvzf typo3_src-4.3.0.tar.gz $ ln -fs ../typo3_src-4.3.0 typo3_src

2. Install Tool

Nachdem der Source getauscht wurde wechselt man ins Install Tool und führt dort folgende Schritte aus:

2.1 Update Wizard

changeCompatibilityVersion
installSystemExtensions
installNewSystemExtensions
installVersioning

Unter changeCompatibilityVersion nehme ich gerne die Option CSS Styled Content: htmlspecialchars in menu content elements mit, diese behebt z.B. Probleme mit & (kaufmännisches Und) in Seitentiteln.

Bei installSystemExtensions, installNewSystemExtensions und installVersioning kann man die angebotenen Extensions den eigenen Anforderungen entsprechend übernehmen oder weglassen.

2.2 Database Analyser

Anschließend führt man im Database Analyser ein COMPARE DATABASE aus, dies bring die Tabellenstruktur der Datenbank auf den aktuellen Stand. Ich führe hier auch immer ein TRUNCATE TABLE cache_hash; mit aus.

3. temp_CACHED Dateien löschen

Nun löscht man im typo3conf Verzeichnis noch alle temp_CACHED Dateien:

$ rm -f temp_CACHED*

4. Alle Caches löschen

Das eigentliche System-Update ist damit soweit schon angeschlossen, bevor man nun die Ausgabe im Frontend kontrolliert sollte man noch alle Caches im TYPO3-Backend leeren.

5. Extensions deinstallieren

Grundlegend empfiehlt es sich nicht verwendete bzw. benötigte Extensions zu deinstallieren. Bei mir stehen z.B. folgende System-Extension je nach Projekt zur Diskussion:

5.1 Backend

t3editor (funktioniert leider aktuell noch nicht in WebKit-Browsern)
version (je nach Bedarf)

5.2 Frontend

feedit (kann ggf. auch durch feeditadvanced ersetzt werden)
simulatestatic (bei Verwendung von RealURL)

6. Extensions aktualisieren

Auch alle verwendeten Extensions sollten aktualisiert werden, dies geschieht im Erw-Manager:

[Settings: Enable extensions without review (basic security check)] *
Import Extensions: Retrieve/Update
Check for extension updates

* natürlich auf eigenes Risiko

Unter Check for extension updates werden, nachdem man das Repository aktualisiert hat, alle Updates für die installierten Extensions aufgeführt. Durch einen Klick auf den Namen der jeweiligen Extension kann man diese aktualisieren, anschließend das Update nicht vergessen.

Wichtig sind vor allem die Updates von RealURL und tt_news da diese die Kompatibilität zu TYPO3 4.3 sicherstellen. Beim Update von tt_news sollte man vorher einen Blick in die Datei tt_news_3.0_changes.sxw werfen. Dort wird genau beschrieben was man alles beim Update beachten sollte. tt_news bring außerdem zusätzlich einen Updater mit der dabei hilft eine bestehende tt_news 2.5.x Installation auf 3.x.x zu portieren.

7. Translation Handling

Abschließend kann man im Erw-Manager auch noch das Translation Handling aktualisieren:

Translation handling: Update from repository

Damit ist das Update vollständig und TYPO3 samt Extensions auf dem aktuellen Stand. Ob alles glatt ging zeigt eine anschließende umfangreiche Funktionsprüfung. Viel Glück!

Anregungen, Tipps, Kritik etc. kann übrigens gerne in den Kommentaren hinterlassen werden.

Wie mit dem Internet Explorer 6 umgehen?

Holger — Tue, 17 Feb 2009 14:44:36 +0000

In die Diskussion wie man im Jahre 2009 als Webentwickler mit dem Internet Explorer 6 umgehen sollte scheint immer mehr Bewegung zu kommen. Der IE6 ist nun 8 Jahre alt und verursacht immer noch einen Mehraufwand und somit auch Mehrkosten bei der Umsetzung von Projekten. Zusätzlich verhindert er auch noch den Einsatz modernen Technologien im Web.

Leider kann man den IE6-Support je nach Projekt und Zielgruppe immer noch nicht komplett einstellen. Hierzu habe ich mal ein paar interessante Artikel zusammengetragen die sich mit dem Thema befassen wie Webentwickler mit dem IE6 umgehen können:

Drop IE6 Support — Give People a Reason to Upgrade
Stop developing for Internet Explorer 6
No more pixel perfectionism in IE 6
How I Might Deal with IE6
Revolte gegen den Internet Explorer 6 [Update 23.02.]
Benutzer über Browserupdates informieren [Update 25.03.]

Ebenfalls interessant ist wie Google mit der Situation umgeht:
Google empfiehlt IE 6-Nutzern den IE 7 – IE 7-Nutzer sollen Google Chrome verwenden

Eins ist sicher, an dem Tag, an dem ich den Support für den IE6 endlich komplett einstellen kann gebe ich erstmal ordentlich einen aus!

jQuery via Google AJAX Libraries API einbinden

Holger — Wed, 11 Feb 2009 07:55:34 +0000

Bisher habe ich jQuery immer auf die traditionelle Weise in meine Projekte eingebunden. Ich ziehe mir die aktuelle Version von der Projektseite, benenne die Datei in jquery.js um und hoste diese selbst im Projekt. Eingebunden wird jQuery dabei direkt via script src:

<script type="text/javascript" src="/js/jquery.js"></script>

Google hat hierfür, mal wieder, eine elegantere Lösung parat, nämlich lässt sich jQuery auch ganz einfach über die Google AJAX Libraries API einbinden. Vorteil hiervon ist u.a. das man jQuery nicht mehr selbst hosten und sich somit auch um Updates kümmern muss. Gerade bei Mashups ist dies eine praktische Lösung.

Die Einbindung ins Projekt bleibt dabei gewohnt einfach:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>

Der Aufruf erfolgt über die google.load() Methode. Das erste Argument bezeichnet die zu ladende JavaScript Library, dass zweite die zu verwendende Version.

Die Version erlaubt netterweise den Einsatz von Wildcards. google.load("jquery", "1.3"); bindet z.B. die aktuellste Version des 1.3 Branch ein (aktuell 1.3.1), mit google.load("jquery", "1.3.1"); lässt sich eine genauere Version definieren.

Neben jQuery & jQuery UI stellt Google auch weitere populäre JavaScript Libraries wie Prototype, script.aculo.us etc. auf diese Weise bereit.

nc_staticfilecache mit RealURL & .html-Suffix

Holger — Mon, 22 Dec 2008 11:35:16 +0000

Verwendet man in Typo3 eine Kombination aus nc_staticfilecache mit RealURL und .html-Suffix muss in der .htaccess die Variante für simulateStaticDocuments aus der Static File Cache Doku verwendet werden damit die Seiten korrekt aus dem Dateisystem ausgeliefert werden:

%{DOCUMENT_ROOT}/typo3temp/tx_ncstaticfilecache/%{HTTP_HOST}/%{REQUEST_URI}/index.html -f
RewriteRule .* typo3temp/tx_ncstaticfilecache/%{HTTP_HOST}/%{REQUEST_URI}/index.html [L]

Der .html-Suffix wird über die RealURL Konfiguration gesetzt:

'fileName' => array('defaultToHTMLsuffixOnPrev' => 1)

Um anschließend die Auslieferung der Seiten zu testen bearbeitet man am besten in html/typo3temp/tx_ncstaticfilecache/ eine oder mehrere Dateien und setzt z.B. im Title-Tag ein “static: ” als Prefix. Wird im Frontend der Prefix korrekt angezeigt kann man sicher sein das die Seiten auch wirklich aus dem Dateisystem ausgeliefert werden.

Zum testen darf man übrigens nicht im Backend angemeldet sein da sonst standardmäßig keine gecachten Seiten ausgeliefert werden.

Meine Top 5 iPhone Apps

Holger — Fri, 19 Sep 2008 13:11:37 +0000

Kurz und knackig, hier mal meine Top 5 iPhone (App Store) Apps:

Remote
iTunes & Apple TV mit dem iPhone fernsteuern. Danke Apple.

RunKeeper
Funktioniert auch prima mit dem Mountainbike.

Shazam
Da freut sich der iTunes Music Store.

Twitterrific
Twittern bis der Arzt kommt.

UsedBudget
Pflicht App für alle T-Mobile iPhone Kunden.

Klappe zu, Affe tot – die CableBox

Holger — Fri, 05 Sep 2008 13:35:17 +0000

Nach der Leave Me Alone Box kommt nun die CableBox. Diese ist vielleicht nicht ganz so cool, hat dafür aber echten praktischen Nutzen. Sinn und Zweck der kleinen Kunststoffbox ist die Aufnahme von Stromsteckleisten und sonstigen Kabelsalat, perfekt also für Wohnzimmer und Büro.

Die Box hat einen leicht abnehmbaren Deckel, zwei Öffnungen für Kabel und rutschfeste Füße an der Unterseite. In ihr lassen sich je nach Größe ungefähr zwei bis vier Steckleisten und genug überflüssiges Kabel verstauen. Sogar meine AirPort Express Station hat ihren Platz gefunden (siehe Bild unten).

Ich habe mir einfach mal eine Box bestellt um zu testen ob das Ganze was taugt. Kabelsalat habe ich nämlich genug, den gibts bei mir beinahe jeden Tag zum Frühstück. Nachdem ich heute meine Box bekommen habe werde ich mir wohl noch ein bis zwei weitere bestellen um auch noch meine restlichen Leisten und Kabel zu verstecken. So sieht es einfach schöner und aufgeräumter aus. Ein weiterer Pluspunkt ist das man so auch wesentlich leichter Staubsaugen kann.

Ein klarer Minuspunkt ist der Preis. Die CableBox kann in Deutschland z.B. bei Charles & Marie bestellt werden und kostet dort 22 Euro plus 9,90 Euro (!) Versand. Das lohnt sich fast nur bei Sammelbestellungen. Die Lieferung (via UPS) und Zahlung via Kreditkarte klappte trotz leichter Verzögerung aber tadellos. Die Box kam mit hübscher Verpackung, kleinen Gimmicks und perfekt eingepackt bei mir an.

Hier ein vorher / nachher Bild:

Mit den verfügbaren Farben Schwarz und Weiß ist für jeden was dabei. Und bei Bluelounge gibt es übrigens auch noch weitere interessante Produkte, wie z.B. die SpaceStation.

Mehr Bilder bei flickr.

GUIMagnets

Holger — Mon, 25 Aug 2008 11:33:13 +0000

GUIMagnets. Via fscklog.

iPhone: Screenshot der Bildschirmanzeige

Holger — Mon, 18 Aug 2008 07:58:47 +0000

Das war mir neu, seit dem 2.0 Update hat man die Möglichkeit durch gleichzeitiges drücken der Home- und der Standby-Taste einen Screenshot der aktuellen Bildschirmanzeige zu erstellen. Der Screenshot findet sich anschließend in Fotos. Praktisch. Via iFUN.