Lange hat es gedauert - Ahem.
In den letzten Monaten habe ich mich mit Lektor auseinandergesetzt. Mit ein Paar Plugins (CreativeCommons und Markdown Highlighter) kann man viel SpaĂ beim Blog-Post schreiben haben.
Der groĂe Vorteil von Lektor ist, dass man eine komplett statische Seite damit rendert. Man kann die Seite danach also ĂŒber ein CDN ausliefern - 'Internet Scale' ist also gar kein ProblemâŠ
Solche Systeme gibt es natĂŒrlich viele - aber mit Lektor kriegt man zusĂ€tzlich noch ein CMS (das Lokal lĂ€uft) - oder auch hinter .htaccess
geschĂŒtzt laufen kann, so dass man keine Sorgen haben muss, dass einem ĂŒber so eine Webseite der Server aufgemacht wird.
Aber Lektor ĂŒberzeugt auch mit einer moderat einfachen API, selbst plugins dafĂŒr zu schreiben ist einfach und macht SpaĂ. Fast wie es bei Track ganz am Anfang auch einmal war. âșïž
Ich freue mich darĂŒber dass ich jetzt eine voll-responsive Seite haben, die mit HTML und CSS wirklich auskommt - no JS needed. (Ich werde aber vielleicht in der Zukunft fĂŒr Experimente auch JS in der Seite verwenden). FĂŒr jetzt ist es erst mal das Experiment wie lange ich ohne JS auskomme.
Da wĂ€re zum Beispiel das MenĂŒ - das auf Mobil mit Animation schön aufklappt. Hierzu habe ich verschiedene Techniken kombiniert.
Die VerhĂ€ltnisse der ganzen Abmessungen werden ĂŒber CSS-Variablen und CSS-Calc einmal global gesetzt. Das geht zwar noch nicht vollstĂ€ndig, da man CSS Variablen nicht in Media Queries einsetzen kann, aber immerhin. Einzig dass man Stylesheets noch nicht 'nested' aufschreiben kann stört.
Die Animation beim klick auf das Hamburger MenĂŒ sowie das Ăffnen des MenĂŒs kommt komplett ohne JS aus. Damit das geht braucht es ein DOM Element, dass den State 'ein oder ausgeblendet' hĂ€lt, gleichzeitig via CSS abgefragt werden kann sowie diesen State durch Klick auf ein anderes Element Ă€ndert. Well, dafĂŒr funktioniert lustiger Weise das
<input type=checkbox id=menu-state>
Element. Das wechselt denchecked
-Zustand, was mann dankenswerter Weise in CSS mittels:checked
herausfinden kann. Der Clou ist aber, dass man irgendwo anders im Dokument ein<label for=menu-state>
haben kann, auf das man Klicken kann um diesen State zu wechseln. Und<label>
kann man im Gegensatz zu<input type=checkbox>
in allen Browsern vernĂŒnftig stylen. Und man kann mittels CSS-Animationen alles animieren. Fuck yeah!