Overlay Size Fix & require.js Cache Buster

  • Hallo,


    da nun schon öfter die Frage aufkam, was es mit den beiden o.g. Erweiterungen auf sich hat, hier mal eine kurze Vorstellung derselben. Vorab sei erwähnt, dass es sich um "passive" Erweiterungen handelt, d.h. ihr müsst nach der Installation nichts weiter tun, um die nachfolgend genannten Funktionen nutzen zu können.


    Was ist Overlay Size Fix?


    Diese Erweiterung behebt einen Fehler im WSC, bei dem die Inhalte von Overlays unscharf erscheinen können. Gut zu beobachten ist dieses Problem bei unserer Font Awesome-Erweiterung. Dabei handelt sich dabei um ein Sub-Pixel-Rendering-Problem, dass immer dann auftritt, wenn die Differenz aus der Fensterbreite und dem Dialog einen ungeraden Wert ergibt. In Folge wird der Dialog auf einem halben Pixel ausgerichtet und unterliegt im Folgenden der Kantenglättung, mit den genannten Auswirkungen.


    Die Erweiterung berechnet beim Erzeugen von Overlays und eventuellen Veränderungen an der Fensterbreite die notwendige Pixel-Anzahl, um einen geraden Wert zu erzeugen und korrigiert dementsprechend die Breite des Dialogfensters, um diesem Problem entgegen zu wirken.


    Mehr dazu unter https://community.woltlab.com/thread/256962/
    Download der Erweiterung hier.


    Was ist require.js Cache Buster?


    Viele Erweiterungen für das WSC nutzen mittlerweile require.js. Das Problem daran ist, dass im WSC 3.0 kein sog. "Cache Buster" dafür zum Einsatz kommt. Das ist insofern ungünstig, da statische Dateien, die eine hohe Auslaufzeit (Expires-Header) haben, nicht mehr vom Server geladen-, sondern direkt aus dem Cache des Browsers eingebunden werden. Wird die Ressource aber auf dem Server geändert, bekommt der Browser dies nicht mit und lädt weiterhin die alte Version aus dem Browser-Cache.


    Um den Browser nun anzuweisen, die geänderten Ressourcen neu auszulesen und im Cache zu behalten, bedient man sich des sog. Cache Busters. Alternativ könnte man auch seinen Browser-Cache leeren, aber das ist nicht wirklich zumutbar. Bei einem Cache-Buster handelt es sich im Normalfall um einen Zusatz am Dateinamen, was in etwa so aussieht: WCF.Combined.min.js?v=1492037373. Ändert sich die Zahl hinter dem Parameter v, geht der Browser her und lädt die Ressource vom Server neu herunter und behält diese Version so lange im Cache, bis sich der Wert wieder ändert.


    Im WSC 3.0 funktioniert das allerdings nicht bei den Erweiterungen, die mittels require.js eingebunden werden. Auch hier ist die Font Awesome-Erweiterung ein gutes Beispiel. Aber auch WoltLab-eigene Scripts sind von diesem Problem betroffen. Dieser Zustand wird mit dem WSC 3.1 zwar behoben sein, das hilft allerdings niemandem, der ein WSC 3.0 einsetzt. Und dann kommt unsere Erweiterung ins Spiel.


    Mehr dazu unter https://community.woltlab.com/thread/256517-cache-buster-für-requirejs
    Download der Erweiterung hier.