Die Eckdaten:

Spielstätte: Grünfeld, Brüsseler Str. 47, 50674 Köln

Stichtag: Donnerstag, 31.05.2012
Beginn “Freies Training”: 19.00 Uhr
Offizieller Turnierbeginn: 19.30 Uhr
Siegerehrung: ca. 22.00 Uhr

Moderation: Heribert Faßbender

Bereit für den FlickOff? Netze bis zum 25.05. Deine Anmeldung bei uns ein.

Eine eMail mit „Ich will Handheld werden“ unter Angabe Deines Vor- und Zunamens an handheld@antwerpes.de genügt.

Wie gut, dass Total Commander mit seinen frei konfigurierbaren Button-Bars uns eine Möglichkeit gibt, diesen Minify-Prozess zu vereinfachen.

1.) YUI Compressor herunterladen

Ladet euch den aktuellen Build des YUI-Compressors von der Projekthomepage herunter und entpackt die .jar-Datei aus dem Build-Ordner auf eure Festplatte. In meinem Beispiel liegt die .jar-Datei nun in c:\users\lukas\Tools\YUI\

Außerdem muss Java installiert und im PATH hinterlegt sein. Prüft dies, indem ihr eine Eingabeaufforderung startet und dort “java” eingebt. Wird der Befehl nicht gefunden, muss Java noch kurz installiert werden.

2.) Button-Bar anpassen

Erstellt nun in eurem TotalCommander einen neuen Button in der Button-Bar, in der Menüleiste auf “Konfigurieren” > “Buttonbar ändern” klickt. Anschließend fügt ihr per Klick auf “Anfügen” einen neuen Knopf hinzu.

Folgende Werte werden im folgenden Dialog eingetragen:

Kommando: java

Parameter*: -jar "C:\users\lukas\Tools\YUI\yuicompressor-2.4.7.jar" -o "%O.min.%E" "%P%N"

(* den Pfad zur YUI-Jar muss natürlich angepasst werden)

Icondatei: Hier ein beliebiges Icon auswählen

Tooltip: Auch frei vergebbar. Ich habe mich für “Compress” entschieden.

Bei mir sieht das ganze nun so aus:

3.) Fertig

Mit Klick auf “OK” entsteht in der Buttonbar ein neuer Knopf. Wird nun in einem der Dateilisten des TotalCommander eine Javascript-Datei ausgewählt und anschließend auf den neuen Button geklickt, so entsteht im selben Ordner eine neue Datei, deren Originalnamennun um ein “.min” ergänzt ist – und hoffentlich deutlich kleiner ist!

Das ganze sollte auch mit .css-Dateien funktionieren!

Was die 30 Teilnehmer unter der Anleitung von David Neu in nur einem Tag zustande gebracht haben, ist der Wahnsinn. Denn obwohl sich am Anfang des Tages die wenigsten Teilnehmer untereinander kannten (na gut, die 10 Teilnehmer aus den Entwicklerteams von antwerpes und DocCheck vielleicht mal ausgenommen…), hatte jede der Gruppen bis zum Ende des Tages unglaublich kreative Ideen mit höchsten technischen und mechanischen Herausforderungen umgesetzt.

Wir als Veranstalter hatten tierisch viel Freude am Basteln und Lernen und fanden den Tag mit Euch sehr inspirierend! Vielen Dank an dieser Stelle an alle Beteiligten, ganz besonders an die Vertreter des Cowoco und der Dingfabrik!

Einen kleinen Eindruck gibt es in der Bildergalerie. Die Videos der fertigen Projekte folgen bald!

wir laden ein zu unserem ersten Physical Computing Laboratory in Köln!

In einer Intensiv-Session basteln bis zu 30 interessierte IT-ler mit der beliebten Arduino-Plattform, frei nach Schnauze und unter Anleitung von Physical-Computing-Experte David Neu. Die Teilnahme ist Kostenlos. Vorkenntnisse mit der Plattform sind nicht erforderlich.

Interesse? Dann hier entlang zu allen Details und zur Anmeldung!

Hier zum Beispiel im Vergleich die Besuche-Entwicklung von IE6 und Chrome 14 in einem unserer Auftritte:

IE6

Chrome 14

  O---O
 / \ / \
O---O---O
 \ / \ /
  O---O

erzeugt. Alleine im Blog gab es 11 Einsendungen, plus zahlreiche weitere, die uns per E-Mail erreichten. Hier nun die feierliche Bekanntgabe der Gewinner:

Aaaalso.

Wir haben uns selbstverständlich jede Einsendung Zeile für Zeile angeguckt (sofern es möglich war ) und jeweils geschaut, was für eine Ausgabe auf welchem Wege zustande kommt. Da gab es die unterschiedlichsten Ansätze – von einem simplen echo() nebst Abarten über Parsing dieser Gewinnspielseite, base64-Geschichten, bis zu komplexen, auf einem Mikrocontroller lauffähigen Programmen.

Um es kurz zu machen: Unsere Interne Jury hat sich nach einiger Diskussion und hin-und-her schlussendlich für die drei subjektiv schönsten Beiträge entschieden. Auch wenn sich das gerade nach einer Gewinn-Floskel anhört: Die Entscheidung war wirklich verdammt schwer!

Gewonnen haben:

1. Marc, der zur Generierung des Outputs in PHP 5.3 Convays Spiel des Lebens missbraucht. (Arduino-Starter-Kit)
2. Christoph, für sein weihnachtliches Zusammenspiel von Base64 und Whitespaces (GetDigital.de-Gutschein)
3. Florian, der mit einem interessanten .bat-Skript unser Interesse für sich gewinnen konnte. (Buch “Nerd Attack”)

Die beiden fehlenden Gewinnerbeiträge werden demnächst auch hier zu lesen sein!

Wir danken allen Teilnehmern für ihre kreative Auseinandersetzung mit der Aufgabe! Fröhliche Feiertage wünscht euch

das antwerpes it-Team

Übrigens: Wen der Arduino-Thema interessiert, der sollte in den nächsten Monaten auf jeden Fall mitlesen

  O---O
 / \ / \
O---O---O
 \ / \ /
  O---O

(Das soll übrigens das Signet aus unserem Geschäftsbericht 2010 sein.)

Die drei besten Einsendungen werden prämiert!

1. Preis: Fritzing Starter Kit / Arduino Uno, siehe hier.
2. Preis: getDigital.de-Gutschein über 20€
3. Preis: Christian Stöckers Must-Have Buch Nerd Attack!: Eine Geschichte der digitalen Welt vom C64 bis zu Twitter und Facebook!

Die Programmiersprache ist uns egal – solange wir es mit vertretbarem Aufwand auf unseren Windows-/Apple-/Linux-/iOS-/Android-Kisten zum Laufen kriegen, bist Du in der Wertung.

Unsere interne Jury aus Entwicklern und Systemadministratoren wählt aus allen Einsendungen die drei, die uns am besten gefallen, aus. Egal ob dein Beitrag unerwartet kompakt, wahnsinnig ästhetisch, unglaublich kreativ oder einfach nur absurd ist – wir freuen uns über jede Zeile Code!

Zur Teilnahme hinterlässt Du einfach hier einen Kommentar mit deinem Code oder schickst ihn uns an itblog@antwerpes.de. Ein Hinweis auf die verwendete Programmiersprache kann zudem bei einigen Exoten hilfreich sein
Einsendeschluss ist der 22.12.2011 um 12:00 Uhr.

Bevor wir es vergessen: Der Rechtsweg ist ausgeschlossen. Mitarbeiter der DocCheck AG und deren Tochterunternehmen sind von der Teilnahme ausgeschlossen.

Aber nun viel Spaß beim Basteln und eine fröhliche Adventszeit!

Das meiste in desem Artikel trifft auch auf den generellen Umgang mit Caches zu und findet so auch Verwendung im Bereich der Performance-Optimierung für High Traffic Webseiten.

Wieso ein Proxy und was sind die Folgen?

Neben zahlreichen anderen Funktionen (Anonymisierung, Filterrung, Schutz,…) wird ein Proxy in Netzwerken mit vielen Clients oft dazu eingesetzt die Netzauslastung zu reduzieren. Dazu wird z.B. bei Anfragen aus dem lokalen Netzwerk an externe Quellen das Ergebnis gespeichert. Bei der nächsten Anfrage eines Clients an die externe Quelle verlässt der Request dann nicht mehr das lokale Netzwerk sondern der Proxy liefert das vorher gespeicherte Ergebnis zurück. Der Proxy stellt also stellvertretend für die ihm zugeordneten Clients die Anfrage an den eigentlichen Server.

Die Konsequenz für uns Web-Entwickler ist naheliegend: Hat der Proxy eine Ressource erstmal zwischengespeichert können wir soviel an ihr ändern wie wir wollen, der Kunde bekommt weiterhin die Version des Proxies ausgeliefert. Damit trotzdem eine gewisse Aktualität gewährleistet wird sorgt der Proxy dafür, dass nach einer gewissen Zeit die Ressource verfällt und der Inhalt bei der nächsten Anfrage erneut von der externen Quelle geladen wird. Dieses Intervall kann jedoch unterschiedlich groß sein und möchte man eine Änderung unmittelbar für den Kunden bereit stellen kommt das Abwarten ggf. nicht in Frage.  Was also tun?

HTTP-Header Cache-Control

Das HTTP-Protokoll bringt, ab Version 1.1, für diese Thematik einen entsprechendes Header names “Cache-Control” mit. Über diese Header ist es möglich explizit Einfluss auf den Proxy Cache zu nehmen. So macht es manchmal Sinn das Caching für einen Test- oder Staging-Server komplett via HTTP-Antwort zu deaktivieren oder das Aktualisierungsintervall entsprechend kurz zu konfigurieren.
Die wichtigsten Parameter für den Header lauten:

• no-store: Verbietet jegliches Zwischenspeichern der Ressource
• no-cache: Sorgt dafür das jeder Request an den Cache zur Prüfung an den Zielserver geht bevor eine zwischengespeicherte Ressource ausgeliefert wird
• public/private: Unterscheidet zwischen dem privaten (Browser) und dem öffentlichen (Proxy) Cache. Die meisten Header kann man auch zur Kontrolle des Browser-Caches verwenden.
• max-age=123: Zeit (in Sekunden) die ein Element gültig bleibt

Die Header können auf die üblichen Arten gesetzt werden, zum Beispiel:

PHP:

header("Cache-Control: no store" );

Apache mod-headers:

Header  set  Cache-Control "max-age=0, no-cache, no-store, must-revalidate"

HTML Meta Tags:

HTML bietet die Möglichkeit Meta Tags, ähnlich den HTTP Headern,  zur Steuerung des Caches anzugeben. Da Proxy-Server normalerweise gar nicht die HTML-Daten inspizieren haben die Tags in diesem Zusammenhang in der Regel keinen Effekt. Das Ganze sähe dann z.B. so aus:

<meta http-equiv="cache-control" content="no-cache">

Expires

Dieses Feld gibt es auch als Meta-Tag und im HTTP-Header und definiert den Zeitpunkt bis wann die Ressource gültig ist. Gibt man hier ein Datum in der Vergangenheit an erreicht man dasselbe wie mit no-cache.
Grundsätzlich lässt sich damit die Gültigkeit der Daten genauer steuern als mit dem Cache-Control Header.

ETag

Ebenfalls mit HTTP 1.1 eingeführt wurde der Entity-Tag. Dieses Feld ist eine beliebige Zeichenkette die eine Version der jeweiligen Ressource definiert. Der Cache speichert sich den ETag bei der ersten Anfrage ab. Bei einer erneuten Anfrage wird dann das Feld If-None-Match mit dem entsprechenden String im Header mitgesendet. Darauf prüft der Server ob der ETag sich geändert hat und sollte dies nicht der Fall sein kann er mit dem Status 304 Not Modified antworten.

Interessant ist dies besonders durch die Unterstützung diverser Webserver wie Apache und lighttpd. Dies ermöglicht eine automatische Aktualisierung des ETags basierend auf Änderungen am Dateisystem.

Request-URL ändern

Da das Caching eines Proxies in der Regel nicht auf den Inhalt einer Ressource sondern auf deren URL basiert, reicht es oft die URL geringfügig anzupassen.
So reicht es z.B. die CSS, Bild- oder JavaScript-Datei mit einem, nicht verwendeten, GET-Parameter zu versehen:

http://www.example.com/style.css?v=1

Hat man sowieso eine Versionierung für seine JavaScript-/CSS-Dateien, umso besser.

Sonstiges

SSL
Bei einer SSL-Verbindung kann der Proxy-Cache natürlich nicht eingreifen

STRG+F5
In einigen Browsern (z.B. Firefox) erreicht man so, dass der Browser die HTTP Anfrage um die folgenden Header erweitert:

Pragma: no-cache
Cache-Control: no-cache

Damit soll die Gegenseite aufgefordert werden den Cache nicht zu verwenden. Proxies ignorieren dies aber in der Regel da das Cache Verhalten nicht von den Clients beeinflusst werden soll. Hinzu kommt der Pragma Header auch nur bedingt berücksichtigt wird.

Reverse Proxy

Ein Proxy kann nicht nur als Stellvertreter für Clients sondern auch für einen oder mehrere Server eingesetzt werden. Dies wird oft bei Hochlast-Webseiten zur Lastverteilung eingesetzt. Ein Beispiel dafür ist varnish.

Fazit

Es gibt einige, gut funktionierende Möglichkeiten den (Proxy-) Cache von vornherein zu steuern. Je nach Einsatzfeld sollte man sich jedoch genau überlegen welche Technik man wie einsetzt, da man sich sonst die eigentlichen Vorteile von Caching (Lastveringerung, geringere Latenz,…) verbaut. Für einen Testserver mag z.B. ein no-cache, no-store Header sinnvoll sein, im Livebetrieb sollte man allerdings etwas diffiziler vorgehen und vielleicht auf ETag setzen.

Sind die Ressourcen allerdings bereits ohne entsprechend gesetzte Header im Cache gelandet hilft eigentlich nur warten oder das ändern der URL.

Weiterführende Links:

• W3C: Caching in HTTP
• HTTP 1.1 Spezifikation

Danke auch an Daniel für den reichlichen Input zu diesem Thema.

Wenn Du unseren Vortrag zum Thema “Social Media: Karrierechance oder Karrierefalle?” verpasst hast — komm einfach bei unserem Stand vorbei und informier Dich über Job-Angebote, Praktika, Bachelor- und Master-Arbeitsthemen …