Pure CSS: Accessible responsive nav

[marctrix]

Hej alle,

unter dem derzeit noch „etwas“ sperrigen Namen „Responsive Accessible Dropdown Navigation without JavaScript (pure CSS)“ habe ich die angekündigte Navigation bereit gestellt (Demo zum Testen).

Leider sind alle Kommentare und die README.md verloren gegangen, weil ich irgendwas mit git kaputt gemacht habe (toll, so ein Versionierungssystem, dass einem eine alte Version aufzwingt, bevor man etwas pushen darf).

Na egal, der Quellcode ist wiederhergestellt und unter dem neuen Repository accessible-nav könnt ihr es auch klonen usw.

Es wäre super nett, wenn sich jemand das Ding mal mit einem Android-Gerät vornehmen würde.

Marc

PS: vielleicht ist es ja ganz gut, dass die Beschreibungen weg sind, so werden keine Erklärungen oder Erwartungen mitgeteilt. Gute Testvoraussetzungen. - Ich reiche die ohnehin kurze Readme.md die Tage nach. Für heute habe ich die Nase voll… PPS: Auch gut, dass ihr meine ganzen Fehlversuche nciht nachvollziehen könnt. 😉 PPPS: Wenn ich keine negative Rückmeldung bekomme, erkläre ich, was ich gemacht habe, in einem Blog-Beitrag. 😉

[Julius]

Hallo Marc,

erst einmal vielen Dank dafür, dass du dich diesem Thema annimmst. Navigationen waren für mich bisher immer ein Graus, ich habe das bisher nie unter allen Punkten zufriedenstellend lösen können. Wahrscheinlich ist deine Lösung da ein Lichtblick.

Der unter „problematische Seite“ angegebene Link liefert einen 404er.

Leider sind alle Kommentare und die README.md verloren gegangen, weil ich irgendwas mit git kaputt gemacht habe (toll, so ein Versionierungssystem, dass einem eine alte Version aufzwingt, bevor man etwas pushen darf).

Vielleicht hast du im Remote-Repo (also über die GitHub-Weboberfläche) Änderungen vorgenommen, lokal nicht mit deinen lokal gemachten Änderungen gemergt und dann einen Reset auf den vorherigen Stand gemacht? Bin jetzt aber auch nicht so der git-Profi...

Es wäre super nett, wenn sich jemand das Ding mal mit einem Android-Gerät vornehmen würde.

Ich hatte das Problem, dass ich die Überkategorien nicht immer aufklappen konnte, sondern es nur nach einem zweimaligen Tippen auf den entsprechenden Eintrag mit dazwischen liegendem Neuladen der Seite ging. Ich habe davon ein Video gemacht (Konnte leider nicht die Tapser auf dem Display aufnehmen, weil die Software das nicht kann und ich mir keinen Krams aus dem Google Play Store dafür runterladen wollte.). Firefox 60.0.2 auf Android 8.1

Ein ähnliches Verhalten war auch in Chrome 67 auf dem selben Handy zu beobachten.

Gruß
Julius

P.S.: Vielleicht möchtest du die Config deines Editors mit dem Namen „config.codekit3“ aus dem Repo raus halten.

P.P.S.: Hast du dich schon für eine Lizenz entschieden? Wenn ich einen Vorschlag machen dürfte, würde ich eine liberale Lizenz empfehlen. Beispielsweise die MIT-Lizenz oder es alternativ gar unter Public Domain (CC0 als Lizenz) stellen. Bei letzterer kann man so etwas bedenkenlos kopieren und in eigene Software einbetten, was ja vielleicht in deinem Sinne sein könnte.

[beatovich]

hallo

War nicht leicht zu verfolgen, wo's happert.

Da sich das ganz auf dem mobile wie ein Accordeon verhält, füllt dieses den ganzen Viewport. Wie kann man da eine Sektion schliessen? Man muss auf den deakivierten Link der den aria-page=current entspricht nochmal klicken. So was muss man aber erst rausfinden.

P.P.S.: Hast du dich schon für eine Lizenz entschieden? Wenn ich einen Vorschlag machen dürfte, würde ich eine liberale Lizenz empfehlen. Beispielsweise die MIT-Lizenz oder es alternativ gar unter Public Domain (CC0 als Lizenz) stellen. Bei letzterer kann man so etwas bedenkenlos kopieren und in eigene Software einbetten, was ja vielleicht in deinem Sinne sein könnte.

Ich weiss nicht, was ich von dem Lizenzunwesen halten soll. Weder soll der Code kopiert werden, noch geht's darum ihn zu zitieren. Es ist ja lediglich Technik-Demo und zudem noch nicht mal eine, die man bedenkenlos anwenden kann.

Zur Demo

Ich bin sicher, man kann diese Demo noch besser (= als real world applikation überzeugender) ausarbeiten. Die entscheidende Frage ist ja die, würde der Verfasser selbst diese Demo anwenden? Und ja, der muss sich jeder Autor stellen, weil JS einfach nicht immer verfügbar ist.

Beim gezeigten Verhalten habe ich da meine Zweifel. Praktisch finde ich die Bedienung gerade bei widescreen per Maus hinderlich, weil ohne Anlass die Boxen aufklappen, ohne dass ich darüber hovere.

Dass sich permanent der Bildschirm bewegt und verschiebt ist ein anderes grosses Manko.

Praktisch würde ich es vorziehen, auf die Unternavigation in dem Fall bei nojs ganz zu verzichten, und diese erst mit JS zu ergänzen.

Besonders muss man aber auch eine Freifläche für das Zuklappen von Navigationen bereitstellen (falls es dazu nicht einen expliziten Button gibt).

Aber das zeigt ja nur, wie schwierig das Thema ist.

Selbst meine nav hat Mängel wenn man berücksichtigt, dass focus-within oder details (bei no-js spielen polyfills keine rolle) bei einigen Browsern gar nicht implementiert ist.

Ich bin auf die nächste Iteration zum Thema gespannt.

[marctrix]

Hej beatovich,

War nicht leicht zu verfolgen, wo's happert.

Da sich das ganz auf dem mobile wie ein Accordeon verhält, füllt dieses den ganzen Viewport. Wie kann man da eine Sektion schliessen? Man muss auf den deakivierten Link der den aria-page=current entspricht nochmal klicken. So was muss man aber erst rausfinden.

Ja kann man, muss man aber nicht, da alle Inhalte auch bei geöffnetem Menü erreichbar bleiben. Diese werden lediglich nach unten verschoben (hatte das erst anders, also so, dass sich das Menü über die Inhalte legt — das gefiel mir aber nicht, weil man das Menü dazu nämlich wieder schließen müsste.

Ich find das so jetzt besser.

Das überdecken von Inhalten mag ich nicht und wenn man so etwas will, findet man ja genug Alternativen. Das muss ich nicht genauso noch einmal bauen…

Zur Demo

Ich bin sicher, man kann diese Demo noch besser (= als real world applikation überzeugender) ausarbeiten.

Die entscheidende Frage ist ja die, würde der Verfasser selbst diese Demo anwenden?

Sie tut das, was ich mir gewünscht habe. Daher: ja natürlich!

Das einzige, was mir persönlich noch fehlt (weil die Nutzer es so gewohnt sind, nicht weil es nötig wäre): ein Button zum schließen. Mal schauen, wie ich das noch löse.

Im Moment fehlt mir noch die Idee.

Praktisch finde ich die Bedienung gerade bei widescreen per Maus hinderlich, weil ohne Anlass die Boxen aufklappen, ohne dass ich darüber hovere.

Echt? - Das sollte nicht sein! Vielleicht eine ältere Version online gegangen?!?

Dass sich permanent der Bildschirm bewegt und verschiebt ist ein anderes grosses Manko.

Dass sollte nur einmal passieren: wenn man mit der Maus über den ersten Link hovert. Von da an sollte es so bleiben, bis man das Menü schließt, indem man auf eine freie Fläche klickt oder das Menü verlässt (dann kommen die Inhalte freilich wieder hoch. Das sollte aber eine Ausnahme sein, weil man idR wohl über das Menü fährt, um einen Link zu klicken).

Praktisch würde ich es vorziehen, auf die Unternavigation in dem Fall bei nojs ganz zu verzichten, und diese erst mit JS zu ergänzen.

Mit welchem Vorteil?

Besonders muss man aber auch eine Freifläche für das Zuklappen von Navigationen bereitstellen (falls es dazu nicht einen expliziten Button gibt).

Die gibt es. Ich überlege noch, ob ich dazu ein „x“ einblende. Das funktioniert aber noch nicht bei Touch-Geräten.

Daher habe ich das hintenan gestellt.

Aber das zeigt ja nur, wie schwierig das Thema ist.

Yep. Das ist es, hast ja auch schon einiges an Erfahrungen gesammelt.

Selbst meine nav hat Mängel wenn man berücksichtigt, dass focus-within oder details (bei no-js spielen polyfills keine rolle) bei einigen Browsern gar nicht implementiert ist.

details setze ich nicht ein, für das Fehlen von focus-within habe ich als fallback die zweite Navigation, die daher notwendig ist für sehende mausnutzer.

Ich bin auf die nächste Iteration zum Thema gespannt.

Die wird aber nicht in deinem Sinne sein 😉

Das habe ich an deinen Kommentaren hier gemerkt. Umso wertvoller sind die für mich und ich danke dir ganz herzlich!

Auch wenn ich immer „dagegen“ geschrieben habe. Es war eher ein erklären meines Konzepts.

Mir kam es auf drei Dinge an:

1.) das Ding soll schnell sein. Ich mag keine Animationen auf die man warten muss und keine Bibliotheken. 2.) alles kann, nichts muss: es sollte unnötig sein, das Menü zu schließen, daher das verschieben der Inhalte. Da man da u.U. nicht drauf kommt, eventuell noch ein „x“ irgendwo in der Freifläche, wo man auch jetzt sowieso schon klicken kann (viele würden das auch probieren. Warum hat das bei dir nicht geklappt - welche Browser nutzt du?) 3.) Es soll natürlich vollständig zugänglich sein.

Marc

[beatovich]

hallo

Praktisch finde ich die Bedienung gerade bei widescreen per Maus hinderlich, weil ohne Anlass die Boxen aufklappen, ohne dass ich darüber hovere.

Echt? - Das sollte nicht sein! Vielleicht eine ältere Version online gegangen?!?

Aktueller Desktop Firefox.

Ich muss mit der Maus schon extrem nach unten ausweichen, um das Menu zum Schliessen zu bewegen.

Eine Maus fährt ja gelegentlich über den Bildschirm, ohne Absicht immer etwas öffnen zu wollen. Dem kann man nur mit einer transition-Verzögerung begegnen.

übrigens die heise Seite hat da einen ähnlich unangenehmen Menu-Layer und der dafür intendierte Button schliesst nicht, weil ich keine Lust hatte herauszufinden, welches der Scripte jetzt dafür eine Freischaltung braucht.

Praktisch würde ich es vorziehen, auf die Unternavigation in dem Fall bei nojs ganz zu verzichten, und diese erst mit JS zu ergänzen.

Mit welchem Vorteil?

Skalierbarkeit! Na ich korrigiere mal, ich würde auf die eigentlich redundante Unternavigation in dem Fall verzichten.

Du hast deine Navigation mit gerade jener Anzahl Unterpunkte geplant, die gerade noch funktionieren. Es ist aber ärgerlich, wenn jetzt eine Seite viele aber kurze Kapitel erhält.

Der primäre Zweck von Untermenus ist die Möglichkeit, mehr Links anzubieten, als permanent sichtar sein können. Um die Skalierbarkeit hier weiterzuführen, müsste hier eine Navigation auch mit 2nd-level Untermenus umgehen können.

Um eine Skalierbarkeit zu erreichen, verwendet man entweder Popup-Boxen oder man beitet eine scrollbare Liste an.

Besonders muss man aber auch eine Freifläche für das Zuklappen von Navigationen bereitstellen (falls es dazu nicht einen expliziten Button gibt).

Die gibt es. Ich überlege noch, ob ich dazu ein „x“ einblende. Das funktioniert aber noch nicht bei Touch-Geräten.

Wenn dein x ein <label> ist, das den Focus aus dem Navigationsbereich verschiebt, könnte das gehen.

[marctrix]

Hej beatovich,

Praktisch finde ich die Bedienung gerade bei widescreen per Maus hinderlich, weil ohne Anlass die Boxen aufklappen, ohne dass ich darüber hovere.

Echt? - Das sollte nicht sein! Vielleicht eine ältere Version online gegangen?!?

Aktueller Desktop Firefox.

Also bei mir öffnen sich nur Boxen, die man auch hovert. Das Verhalten kann ich nciht nachvollziehen.

Ich muss mit der Maus schon extrem nach unten ausweichen, um das Menu zum Schliessen zu bewegen.

Ja, damit sich die Inhalte nicht dauernd hoch und runter bewegen, sondern nur einmal beim Öffnen des Menüs. Dann klickt man auf die Seite, wo man hinwill und gut ist. wenn man gar keinen Link öffnen möchte, muss man diese Fläche tatsächlich wieder verlassen oder anklicken.

Eine Maus fährt ja gelegentlich über den Bildschirm, ohne Absicht immer etwas öffnen zu wollen. Dem kann man nur mit einer transition-Verzögerung begegnen.

Könnte man machen, aber dann müsste man warten. Und wie lange? Und dann passiert etwas, ohne dass man wissentlich etwas ausgelöst hat? - Finde ich problematisch…

übrigens die heise Seite hat da einen ähnlich unangenehmen Menu-Layer und der dafür intendierte Button schliesst nicht, weil ich keine Lust hatte herauszufinden, welches der Scripte jetzt dafür eine Freischaltung braucht.

Bei einem JS-freien Menü hat man dieses Problem ja nicht… 😉

Praktisch würde ich es vorziehen, auf die Unternavigation in dem Fall bei nojs ganz zu verzichten, und diese erst mit JS zu ergänzen.

Mit welchem Vorteil?

Skalierbarkeit! Na ich korrigiere mal, ich würde auf die eigentlich redundante Unternavigation in dem Fall verzichten.

Ach so. Ja die könnte man dann per Js ausblenden. Aber das wäre ein ganz anderes Konzept.

Du hast deine Navigation mit gerade jener Anzahl Unterpunkte geplant, die gerade noch funktionieren. Es ist aber ärgerlich, wenn jetzt eine Seite viele aber kurze Kapitel erhält.

Der primäre Zweck von Untermenus ist die Möglichkeit, mehr Links anzubieten, als permanent sichtar sein können. Um die Skalierbarkeit hier weiterzuführen, müsste hier eine Navigation auch mit 2nd-level Untermenus umgehen können.

Die Liste mit den Kapiteln (oder Unterseiten) lässt sich ja verschachteln. In der Hauptnavigation sind mehr als zwei Ebenen kontraproduktiv.

Die müssen dann irgendwohin aufgehen (meist links oder rechts) und das abhängig davon, wo sie sich befinden (am linken Bildschirmrand ist links kein Platz, am rechten Bildschirmrand ist rechts kein Platz). Alles sehr unschön, würde ich daher nicht machen.

Das ist einer (von mehreren Gründen), warum ich die Struktur ab der zweiten Ebene gerne außerhalb einer verschwindenden Navbar anzeige.

Weitere sind:

Übernahme der Breadcrumb-Funktion, Darstellung weiterer Informationen, also außer, woher komme ich (Breadcrumb), wo bin ich (Hervorhebung der aktuellen Seite, was gibt es auf gleicher Ebene (benachbarte Themen), was gehört zu dem ausgewählten Bereich noch (mögliche Unterpunkte einer tieferen Ebene).

Um eine Skalierbarkeit zu erreichen, verwendet man entweder Popup-Boxen oder man beitet eine scrollbare Liste an.

Das kann ich mir nicht vorstellen. Hast du ein Beispiel?

Klingt aber auch ganz danach, als ob du hier ein ganz anderes Konzept bevorzugen würdest. Was ich gut heiße. Mir geht der derzeitige Einheitsbrei mächtig auf den Keks.

Ob das an den zimmergleichen Frameworks liegt? — Kreativ ist jedenfalls anders.

Besonders muss man aber auch eine Freifläche für das Zuklappen von Navigationen bereitstellen (falls es dazu nicht einen expliziten Button gibt).

Die gibt es. Ich überlege noch, ob ich dazu ein „x“ einblende. Das funktioniert aber noch nicht bei Touch-Geräten.

Wenn dein x ein <label> ist, das den Focus aus dem Navigationsbereich verschiebt, könnte das gehen.

Na ja gehen tut es ja schon, man muss irgendwo auf den Hintergrund klicken, dann geht das Menü zu. Außerhalb eines Bedienelemente zu klicken macht so etwas ganz häufig. Aber dennoch weiß das natürlich cniht jeder, daher die Idee ein "x" irgendwo zu platzieren. Man kann zwar aber auch überall sonst klicken, aber das würd es noch mal deutlich machen. Was ich schade fände, dass menschen, die ohne das "x" einfach mal versuchen würden irgendwohin zu klicken, werden dann vermutlich auch versuchen, das "x" zu treffen, was ja eigentlich unnötiger Aufwand ist. Keine Ahnung, wie ich aus diesem Dilemma komme.

label Ja, aber das verstehen Screenreader nicht. Vor denen allerdings könnte man es verstecken. Ich hatte an einen seiteninternen Link gedacht. So oder so muss ich sehen, wie ich den Link oder das label nach dem Klick wieder loswerde…

Auf jeden Fall einen Gedanken wert. Danke!

Derzeit tendiere ich noch dazu, es so zu lassen, wie es ist, d.h. man muss entweder von der Fläche runter mit der Maus oder eben irgendwo in die Fläche klicken… Vielleicht würde ich es auch Anwendern überlassen ein "x" irgendwo anzuzeigen und diese Frage einfach in der Kurz-Doku ansprechen.

Marc

[marctrix]

Hej Julius,

erst einmal vielen Dank dafür, dass du dich diesem Thema annimmst. Navigationen waren für mich bisher immer ein Graus, ich habe das bisher nie unter allen Punkten zufriedenstellend lösen können. Wahrscheinlich ist deine Lösung da ein Lichtblick.

Der unter „problematische Seite“ angegebene Link liefert einen 404er.

Ach menno, ich habe ja mein Repo verloren, während ich den Beitrag schrieb. Die Gelegenheit habe ich gleich genutzt, um einen mir besser gefallenden Namen zu vergeben (accessible nav statt zuvor css-menu)

Leider sind alle Kommentare und die README.md verloren gegangen, weil ich irgendwas mit git kaputt gemacht habe…

Vielleicht hast du im Remote-Repo (also über die GitHub-Weboberfläche) Änderungen vorgenommen, lokal nicht mit deinen lokal gemachten Änderungen gemergt und dann einen Reset auf den vorherigen Stand gemacht? Bin jetzt aber auch nicht so der git-Profi...

Ja irgendwas. Habe auf mehreren Rechnern gearbeitet und vermutlich einmal nicht gepusht und dann woanders weiter gemacht und dann irgendwo Quatsch gemacht. Ich dachte, es müsste dann möglich sein, den aktuellen Stand, mit dem ich zufrieden war, als neueste Version einzustellen. Das hat aber anscheinend nicht geklappt (obwohl ich das dachte) und dann hatte ich beim nächsten Download einen ganz alten Stand (den vom andren Rechner, an dem ich ein paar Tage zuvor war).

Ich konnte dann den aktuellen Code behalten, habe aber das Repo gelöscht und ein neues mit dem aktuellen Stand angelegt, ohne daran zu denken, die Beschreibung und readme.md zu sichern.

Es war also nciht ganz leicht, das kaputt zu kriegen, aber ich ich habe ordentliche Arbeit geleistet. 😉

Kennst du denn eine Möglichkeit zu sagen, was ich jetzt lokal habe, soll die aktuelle Version werden? Das könnte doch öfters mal hilfreich sein?

Es wäre super nett, wenn sich jemand das Ding mal mit einem Android-Gerät vornehmen würde.

Erst mal danke für den Test!!!

Ich hatte das Problem, dass ich die Überkategorien nicht immer aufklappen konnte, sondern es nur nach einem zweimaligen Tippen auf den entsprechenden Eintrag mit dazwischen liegendem Neuladen der Seite ging.

Kann es sein, dass es sich dabei um die aktuell offene Seite handelt? Hier fehlt noch eine deutliche Hervorhebung. Ich kann das auf dem Video nicht so richtig erkennen.

Habe übrigens auf dem iPad neu gelernt, dass ein langer druck offenbar "active" setzt, was dann das Menu der nicht verlinkten aktuellen Seite doch öffnet.

Hier bin ich vermutlich nah dran, ich brauche aber für genau so etwas Rückmeldungen!

Ein ähnliches Verhalten war auch in Chrome 67 auf dem selben Handy zu beobachten.

Vielen Dank. Würde eine Hervorhebung des aktuellen Menüpunktes reichen? oder betrifft es alle Menüpunkte?

P.S.: Vielleicht möchtest du die Config deines Editors mit dem Namen „config.codekit3“ aus dem Repo raus halten.

Ja! 😂

Danke für den Hinweis!

P.P.S.: Hast du dich schon für eine Lizenz entschieden? Wenn ich einen Vorschlag machen dürfte, würde ich eine liberale Lizenz empfehlen. Beispielsweise die MIT-Lizenz oder es alternativ gar unter Public Domain (CC0 als Lizenz) stellen. Bei letzterer kann man so etwas bedenkenlos kopieren und in eigene Software einbetten, was ja vielleicht in deinem Sinne sein könnte.

Ja genau so. Ich überlege noch, ob ich mit Namen genannt werden möchte, ein bisschen Werbung kann ja nicht schaden. Geht das bei MIT?

Ich mache das zum ersten Mal und würde mich am liebsten darum drücken, alle Lizenzen komplett zu lesen. Die eine, die ich nutzen möchte, werde ich natürlich lesen…

Ich habe auch nichts dagegen, wenn jemand mit JS zu dem Projekt beitragen möchte, um es noch geschmeidiger zu machen (es also progressive zu enhancen 😉).

Aber dafür sollte es fertig gestylt sein. Im Moment habe ich nur noch die Hervorhebung des aktuellen Menüeintrages und die Wiederherstellung von Kommentaren und Kurz-Doku auf meiner To-Do.

Mit Screenreader wurde es übrigens bereits getestet.

Da nichts mittels display:none versteckt wird, hat es erwartungsgemäß keine Probleme gegeben.

Marc

[Julius]

Hallo Marc,

Leider sind alle Kommentare und die README.md verloren gegangen, weil ich irgendwas mit git kaputt gemacht habe…

Vielleicht hast du im Remote-Repo (also über die GitHub-Weboberfläche) Änderungen vorgenommen, lokal nicht mit deinen lokal gemachten Änderungen gemergt und dann einen Reset auf den vorherigen Stand gemacht? Bin jetzt aber auch nicht so der git-Profi...

Ja irgendwas. Habe auf mehreren Rechnern gearbeitet und vermutlich einmal nicht gepusht und dann woanders weiter gemacht und dann irgendwo Quatsch gemacht. Ich dachte, es müsste dann möglich sein, den aktuellen Stand, mit dem ich zufrieden war, als neueste Version einzustellen. Das hat aber anscheinend nicht geklappt (obwohl ich das dachte) und dann hatte ich beim nächsten Download einen ganz alten Stand (den vom andren Rechner, an dem ich ein paar Tage zuvor war).

[…]

Kennst du denn eine Möglichkeit zu sagen, was ich jetzt lokal habe, soll die aktuelle Version werden? Das könnte doch öfters mal hilfreich sein?

Ich vermute mal, dass du meinst, dass du deinen lokalen Stand commiten und pushen willst. Ich beschreibe einfach mal den einfachsten Ablauf mit git anhand der Befehle (wenn du das per GUI machst, werden die Buttons sicher ähnlich heißen; hilfreich kann auch diese Grafik mit den Abläufen bei git sein):

Gehen wir mal davon aus, dass du das Repo gerade frisch auf GitHub angelegt oder es zumindest noch nicht auf den Rechner kopiert hast. Dann klonst du es ja als erstes auf deinen Rechner:

git clone https://git.exampple.org/blablubb

Falls du das Projekt nach dem klonen auf dem Remote (via GitHub oder anderem Client) wieder geändert hast, müsstest du deine lokale Kopie aktualisieren. Es ist eine Best-Practise, das bei Beginn der Arbeit an einem Projekt (also bevor du Änderungen machst) und möglichst oft (wenn man mit mehr als einer Person an einem Projekt arbeitet; sonst weiß man ja grob, ob man etwas geändert hat) zu machen.

git pull

Falls du vor diesem Schritt bereits lokal Änderungen gemacht hast, die noch nicht commited wurden, müsstest du die commiten und wirst dann beim Pullen gefragt, ob du die Änderungen mergen (also zusammenführen möchtest).

Dann arbeitest du an dem Projekt. Änderst Dateien, fügst welche hinzu und löscht ggf. welche. Wenn du dann commiten und auf den Remote (also GitHub) pushen willst, musst du als erstes die Änderungen stagen:

git add .
# staged alles im aktuellen Ordner (.), man kann auch einen Dateinamen angeben

Anschließend commitest du das und pushst das:

git commit -m "css verbessert, bessere Farben"
git push

So müsste eigentlich alles klappen.

Branches habe ich ausgelassen. Habe ich noch nicht benutzt, weil ich das bisher noch nicht zu brauchen meinte und ich mich da noch reinfuchsen muss...

Das wäre eigentlich auch mal ein schickes Blog-Thema: „Versionsverwaltung mit git für Webentwickler.“
Naja. Erst einmal andere Sachen erledigen...

Es wäre super nett, wenn sich jemand das Ding mal mit einem Android-Gerät vornehmen würde.

Erst mal danke für den Test!!!

Ich hatte das Problem, dass ich die Überkategorien nicht immer aufklappen konnte, sondern es nur nach einem zweimaligen Tippen auf den entsprechenden Eintrag mit dazwischen liegendem Neuladen der Seite ging.

Kann es sein, dass es sich dabei um die aktuell offene Seite handelt? Hier fehlt noch eine deutliche Hervorhebung. Ich kann das auf dem Video nicht so richtig erkennen.

Tatsächlich: Beim ersten Tippen auf die Oberkategorie lädt der Browser die betreffende Seite und dann klickt man ja auf den Eintrag, der die aktuelle Seite kennzeichnet. Dann geht das.

Habe übrigens auf dem iPad neu gelernt, dass ein langer druck offenbar "active" setzt, was dann das Menu der nicht verlinkten aktuellen Seite doch öffnet.

Ist das bei einem Link zweckmäßig? Also bei FF/Android fragt der Browser, ob er den Link in einem neuen Tab öffnen soll...

Ein ähnliches Verhalten war auch in Chrome 67 auf dem selben Handy zu beobachten.

Vielen Dank. Würde eine Hervorhebung des aktuellen Menüpunktes reichen? oder betrifft es alle Menüpunkte?

Das Problem ist anders gelagert:
Immer wenn ich auf einen Obermenüpunkt tippe, der nicht der Menüpunkt zu der aktuellen Seite ist, wird die verlinkte Seite geladen und dann erst kann ich das Menü dauerhaft ausgeklappt betrachten, weil ich auf der Seite bleibe.

P.P.S.: Hast du dich schon für eine Lizenz entschieden? Wenn ich einen Vorschlag machen dürfte, würde ich eine liberale Lizenz empfehlen. Beispielsweise die MIT-Lizenz oder es alternativ gar unter Public Domain (CC0 als Lizenz) stellen. Bei letzterer kann man so etwas bedenkenlos kopieren und in eigene Software einbetten, was ja vielleicht in deinem Sinne sein könnte.

Ja genau so. Ich überlege noch, ob ich mit Namen genannt werden möchte, ein bisschen Werbung kann ja nicht schaden. Geht das bei MIT?

Die Namensnennung ist bei der MIT-Lizenz so gestrickt, dass der mitgelieferte Vermerk mit deinem Namen bei allen Kopien immer mit ausgeliefert werden muss. Allerdings glaube ich nicht, dass jemand dazu verpflichtet wurde, im Footer oder Impressum der Seite auf dich zu verweisen.

Falls dir die Bedingungen der MIT-Lizenz nicht zusagen, kannst du immer noch eine restriktivere Lizenz wählen (sofern dein komplettes Projekt unter der MIT-Lizenz steht). Wenn du initial die GPL wählst, kannst du das zwar auch machen, müsstest aber alle, die zu deinem Projekt etwas beigetragen haben, um Erlaubnis fragen und ggf. ihre Beiträge neu erstellen, falls sie nicht zustimmen. Die alten Versionen (sofern die noch jemand hat) bleiben natürlich unter der MIT-Lizenz verfügbar.

Ich mache das zum ersten Mal und würde mich am liebsten darum drücken, alle Lizenzen komplett zu lesen. Die eine, die ich nutzen möchte, werde ich natürlich lesen…

Der MIT-Lizenz ist ganz kurz 😜 und bei Wikipedia gibt es eine Übersetzung ins Deutsche. Ich finde die Kürze ganz interessant. Allerdings fehlt in der MIT-Lizenz eine Regelung zu den betroffenen Patenten (also quasi, dass du allen die Nutzung deiner Patente ermöglichst, statt deine Ansprüche irgendwann gelten zu machen). Ist jetzt aber für eine Navigation nicht soooo relevant.

Ich habe auch nichts dagegen, wenn jemand mit JS zu dem Projekt beitragen möchte, um es noch geschmeidiger zu machen (es also progressive zu enhancen 😉).

Genau das erleichtert eine Lizenz ja neben der Verwendung ja auch, weil ich weiß, unter welcher Lizenz der originale Quelltext steht. Bei der MIT muss ich nicht zwangsläufig diese weiter benutzen – auch die GPL erfüllt die Bedingung der Namensnennung, allerdings erzwingt diese auch die Weitergabe unter gleichen Bedingungen und die Veröffentlichung des Quelltextes.

In der Praxis wird aber jemand, der mit dir zusammenarbeiten will, vermutlich einfach die von dir benutzte Lizenz verwenden.

Gruß
Julius

[marctrix]

Hej Julius,

ganz herzlichen Dank für die viele Mühe, die du dir mit der langen Antwort gegeben hast!

Die ist sehr hilfreich!

git pull

Falls du vor diesem Schritt bereits lokal Änderungen gemacht hast, die noch nicht commited wurden, müsstest du die commiten und wirst dann beim Pullen gefragt, ob du die Änderungen mergen (also zusammenführen möchtest).

Dann arbeitest du an dem Projekt. Änderst Dateien, fügst welche hinzu und löscht ggf. welche.

Jetzt hätte ich gerne die Möglichkeit zu sagen: auf dem Server ist alles nicht mehr relevant, ich möchte den lokalen Stand jetzt 1:1 auf den Server übertragen. 😉

Wenn du dann commiten und auf den Remote (also GitHub) pushen willst, musst du als erstes die Änderungen stagen:

git add .
# staged alles im aktuellen Ordner (.), man kann auch einen Dateinamen angeben

Ja, was da passiert, das kapiere ich noch nicht so recht.

Auf jeden Fall werde ich darauf mal achten. Ich dachte irgendwie macht das mein Client automatisch? Muss ich noch mal in den Einstellungen graben…

Branches habe ich ausgelassen. Habe ich noch nicht benutzt, weil ich das bisher noch nicht zu brauchen meinte und ich mich da noch reinfuchsen muss...

Ja, wäre vermutlich für mich auch mal sinnvoll.

Wie machst du das mit Versionen? In SVN hat man dafür einfach einen "Tag" vergeben. Läuft das bei git ähnlich?

Das wäre eigentlich auch mal ein schickes Blog-Thema: „Versionsverwaltung mit git für Webentwickler.“
Naja. Erst einmal andere Sachen erledigen...

Ach menno… 😉

Habe übrigens auf dem iPad neu gelernt, dass ein langer druck offenbar "active" setzt, was dann das Menu der nicht verlinkten aktuellen Seite doch öffnet.

Ist das bei einem Link zweckmäßig? Also bei FF/Android fragt der Browser, ob er den Link in einem neuen Tab öffnen soll...

Ist ja kein Link. Zumindest fehlt dem Eintrag für die erste Seite das href — erst die Unterpunkte sind dann wieder verlinkt. An die kommt man dann durch langes drücken. Festes drücken öffnet das Kontextmenü.

Ein ähnliches Verhalten war auch in Chrome 67 auf dem selben Handy zu beobachten.

Vielen Dank. Würde eine Hervorhebung des aktuellen Menüpunktes reichen? oder betrifft es alle Menüpunkte?

Das Problem ist anders gelagert:
Immer wenn ich auf einen Obermenüpunkt tippe, der nicht der Menüpunkt zu der aktuellen Seite ist, wird die verlinkte Seite geladen und dann erst kann ich das Menü dauerhaft ausgeklappt betrachten, weil ich auf der Seite bleibe.

Hmmm… — muss mir mal jemanden mit Android schnappen und damit selber rumspielen.

Die Namensnennung ist bei der MIT-Lizenz so gestrickt, dass der mitgelieferte Vermerk mit deinem Namen bei allen Kopien immer mit ausgeliefert werden muss. Allerdings glaube ich nicht, dass jemand dazu verpflichtet wurde, im Footer oder Impressum der Seite auf dich zu verweisen.

Falls dir die Bedingungen der MIT-Lizenz nicht zusagen, kannst du immer noch eine restriktivere Lizenz wählen.

Nö, Restriktionen sind doof. Ich fände es natürlich schön, wenn die entstandenen Projekte auch kostenlos weitergegeben würden, aber manchmal geht das ja gar nicht. Und was ist denn bei einer Website, die man gegen Geld erstellt. Man muss ja auch essen. Dann soll man aber bitte trotzdem lieber mein Menü nehmen, als eines mit Barrieren.

Gerade damit sich so eine Lösung verbreitet, hätte ich gerne eine Quellenangabe oder so drin, damit man als Entwickler, der sich dafür interessiert, wie das gemacht wurde (meinetwegen mit den Entwicklerwerkzeugen) vielleicht die Download-Adresse findet.

Ins Impressum oder den Foster muss das nicht.

Solche Dinge kann ich aber auch in die Doku schreiben. Eine bitte reicht an dieser Stelle denke ich.

Der MIT-Lizenz ist ganz kurz 😜 und bei Wikipedia gibt es eine Übersetzung ins Deutsche. Ich finde die Kürze ganz interessant.

Ich finde die geeiiil!

Wird genommen, danke Dir!

Marc

[Auge]

Hallo

git pull

Jetzt hätte ich gerne die Möglichkeit zu sagen: auf dem Server ist alles nicht mehr relevant, ich möchte den lokalen Stand jetzt 1:1 auf den Server übertragen. 😉

git push origin [branchname] -f

… oder wenn dir sprechende Namen verständlicher sind …

git push origin [branchname] --force

Falls allerdings jemand anderes den dabei überschriebenen Stand des Repos auf dem Server geforkt haben sollte, haben die beiden Repositories (deines und das des Forkers) wieder unterschiedliche Stände. Deines beïnhaltet die Änderungen, deren Übertragung du erzwungen hast und seines beïnhaltet diese Änderungen nicht, weil der Fork vor der Übertragung deiner Änderungen stattgefunden hat.

Du solltest mit -f beziehungsweise --force sehr vorsichtig umgehen.

Tschö, Auge

[marctrix]

Hej Auge,

git pull

Jetzt hätte ich gerne die Möglichkeit zu sagen: auf dem Server ist alles nicht mehr relevant, ich möchte den lokalen Stand jetzt 1:1 auf den Server übertragen. 😉

git push origin [branchname] -f

Falls allerdings jemand anderes den dabei überschriebenen Stand des Repos auf dem Server geforkt haben sollte, haben die beiden Repositories (deines und das des Forkers) wieder unterschiedliche Stände. Deines beïnhaltet die Änderungen, deren Übertragung du erzwungen hast und seines beïnhaltet diese Änderungen nicht, weil der Fork vor der Übertragung deiner Änderungen stattgefunden hat.

Du solltest mit -f beziehungsweise --force sehr vorsichtig umgehen.

Bisher arbeite ich ganz einsam und allein an meinen Projekten.

Komischerweise hatte ich schon bei SVN immer mal wieder einen Punkt, an dem es nicht weiterging und ich ein neues Repo anlegen musste. Jetzt hatte ich das zum ersten Mal auch bei git. Passiert euch das denn nicht?

Marc

[Christian Kruse]

Hallo marctrix,

Bisher arbeite ich ganz einsam und allein an meinen Projekten.

Auch wenn du allein arbeitest: git push -f ist idR ein Indiz dafür, dass man etwas falsch gemacht hat. Lieber nicht benutzen, bzw nur benutzen wenn nicht anders möglich.

Komischerweise hatte ich schon bei SVN immer mal wieder einen Punkt, an dem es nicht weiterging und ich ein neues Repo anlegen musste. Jetzt hatte ich das zum ersten Mal auch bei git. Passiert euch das denn nicht?

Nein, ist mir noch nie passiert. Ich verstehe ehrlich gesagt auch nicht so richtig, was du gemacht hast, dass dir das passiert.

LG,
CK

[Auge]

Hallo

Komischerweise hatte ich schon bei SVN immer mal wieder einen Punkt, an dem es nicht weiterging und ich ein neues Repo anlegen musste. Jetzt hatte ich das zum ersten Mal auch bei git. Passiert euch das denn nicht?

Nein, ist mir noch nie passiert. Ich verstehe ehrlich gesagt auch nicht so richtig, was du gemacht hast, dass dir das passiert.

Soweit ich es verstanden habe, hat Marc an mehreren Rechnern mit dem Repo gearbeitet, Änderungen von einem Rechner (R#1) nach Github synchronisiert, aber vor weiteren Änderungen am Code an einem anderen Rechner (R#2) diese Änderungen von R#1 nicht von Github geholt. Beim Push der neuen Änderungen von Rechner R#2 beschwert sich Git natürlich.

Tschö, Auge

[Christian Kruse]

Hallo Auge,

Soweit ich es verstanden habe, hat Marc an mehreren Rechnern mit dem Repo gearbeitet, Änderungen von einem Rechner (R#1) nach Github synchronisiert, aber vor weiteren Änderungen am Code an einem anderen Rechner (R#2) diese Änderungen von R#1 nicht von Github geholt. Beim Push der neuen Änderungen von Rechner R#2 beschwert sich Git natürlich.

Ah, verstehe. Das ist dann aber auch ein Fall von „hier bitte kein force push verwenden“ 😉

LG,
CK

[marctrix]

Hej Auge,

Soweit ich es verstanden habe, hat Marc an mehreren Rechnern mit dem Repo gearbeitet, Änderungen von einem Rechner (R#1) nach Github synchronisiert, aber vor weiteren Änderungen am Code an einem anderen Rechner (R#2) diese Änderungen von R#1 nicht von Github geholt. Beim Push der neuen Änderungen von Rechner R#2 beschwert sich Git natürlich.

Ja, irgendwas. Das Problem, ich hatte ja eine Version, die mir gefallen hat und hätte gerne einerseits die alten einfach "verwaisen" lassen, ohne die ganz zu verlieren. Ist ja irgendwie der Sinn eines Versionierungssystems, dass man die alten Versionen nicht verliert. Selbst wenn man die in Gänze nicht mehr will, kann ja sein, dass man später ein bestimmtes Detail noch mal benötigt oder etwas nachschlagen will.

Außerdem: wenn ich das von zwei Rechnern nutze und es hinkriege, dass ich keine aktuelle Version mehr reinbekommen kann (gerade das erst pullen, dann morgen, dann pushen hat halt dazu geführt, dass ich immer eine ziemlich alte Version vom Server bekam), wie soll es dann möglich sein, das bei mehreren beteiligten zu verhindern?!?

Na egal. Vielleicht wäre es mit mehr Kenne auch noch zu retten gewesen. Spielt in meinem Fall keine große Rolle, ich sollte das aber mal verstehen…

Marc

[Auge]

Hallo

Branches habe ich ausgelassen. Habe ich noch nicht benutzt, weil ich das bisher noch nicht zu brauchen meinte und ich mich da noch reinfuchsen muss...

Das ist aber genau das Feature, mit dem man an verschiedenen Ecken eines Projekts arbeiten kann, ohne dabei Arbeiten an anderen Ecken in die Quere zu kommen.

… auch die GPL erfüllt die Bedingung der Namensnennung, allerdings erzwingt diese auch die Weitergabe unter gleichen Bedingungen und die Veröffentlichung des Quelltextes.

Zur Klarstellung: Die Veröffentliochung des Quelltextes ist dann Pflicht, wenn der lizensierte Code vertrieben (weitergegeben) wird. Benutze ich den Code für eine interne Anwendung, muss ich etwaige Änderungen und Anpassungen, auch wenn sie notwendigerweise selbst nun auch unter der GPL stehen, nicht öffentlich machen. Für eine Webanwendung mag dieser Umstand aber wenig relevant sein.

Tschö, Auge