Bereit um in der Luft zerrissen zu werden

[keul3]

und das stückweise Laden macht alles viel spannender -

da hatte ich ja anfangs die Befürchtung es wirke plumb, aber tatsächlch gefällts mir auch, hat imo ne gewisse Eleganz.

ganz abgesehen von den Ladezeiten ist diese Lösung richtig gut;

danke Vor allem kann in Zukunft die Seite theoretisch total vollknallen ohne mir wirklich Gedanken um Ladezeiten machen zu müssen

Das gilt natürlich nicht nur für | sondern auch für deinen Punkt. Das ist alles kein Text und gehört mit CSS gelöst.

Ich dachte du seist ein Strichhasser und n Punktfreund
wie erstellt man dann am besten diese Punkte in CSS? Ne gefloatete Liste mit der entsprechenden Decoration?

zum Menue: welchen Sinn macht es denn wenn ich die Navigation via Anker ausführen würde? Ich mein ohne JS funzt die komplette Seite nicht. Das einzige was wegfällt, dass man nicht speziell die einzelnen Abschnitte bookmarken kann. Und selbst wenn mans könnte, die Seite hat beim Laden immer die Gleiche Ausgangsposition.

Deine Pfeile sind keine Bilder sondern Schmuckgrafiken, sollten also auch nicht als Bilder eingebunden werden sondern mittels Hintergrundgrafik, bzw gänzlich über CSS gelöst werden.

k, werd schaun wie ich das in JS zugewiesen bekomme.

onclick Events im HTML Code ist auch nciht notwendig, binde einen event-handler auf deine Elemente.

den Punkt hab ich mir tatsächlich auch schon selbst auf die Liste geschrieben. Beim ganzen Umschreiben ist viel ScriptMüll entstanden. Das wollt ich alles einheitlich machen, also nur mit Listenern/Handlern.

<div class="cuttingline bgDark"></div> <-- absolut unnötig, dafür gibt es border. Oder eventuell ein pseudo-element mit Inhalt wenn der Strich nicht über die volle Breite gehen soll.

macht Sinn, wird gemacht.

fully fleshed out games ist eigentlich eine Überschrift und kein Absatz (wenn auch eine mickrige für ein Element).

ebenfalls sinnig, h4-Tags incoming

Du hast etliche div-suppen die du noch bereinigen kannst. div direkt auf div bei denen "flash codeBox" Elementen ist zB nicht notwendig.

Da bin ich der Meinung das jeder Div sinnvoll ist, kann mich aber natürlich auch irren. 1. Div --> fasst thematisch ähnliche Anwendungen zusammen. 2. Div ist die Applikation selbst, welche Schrift und Bild enthält. 3. Div ist der Platzhalter für das zu ladene Bild. Wie soll ich dass denn entschlacken, ohne das Layout zu ändern?

Die Typografie zu den Elementen, also die kleinen überschriften gefallen mir noch nicht so.

Du meinst 3D,2D usw oder welche Elemente?

 

[Myhar]

Ich dachte du seist ein Strichhasser und n Punktfreund
wie erstellt man dann am besten diese Punkte in CSS? Ne gefloatete Liste mit der entsprechenden Decoration?

Mir is es wurst ob Strich oder Punkt, alle Satzzeichen sind gleich. Nur manche eben gleicher?
Nein, ernsthaft: Weil du ja auch immer wieder usability anführst: alles, was als Text vorliegt sollte auch nur Text sein. Wenn jetzt jemand deine Seite vorliest dann würde er (plump gesagt) folgendes sagen "Modeling" "Punkt" "Texturing" "Punkt" "Rendering". Möchtest du diesen "Text" dem User vermitteln, dann lass es ruhig so. Möchtest du aber lieber einen "Modeling, Texturing, Rendering"-Effekt haben, dann erzeuge die Trennelemente mit CSS. Wie du den machst ist ein Thema für sich. Ist es eine Liste, die du repräsentierst? Dann nimm eine html-liste und nimm ein list-icon. Möchtest du eher keine Liste darstellen, dann nimm ein CSS-Pseudolement dafür. Oder für den | einfach einen border.

zum Menue: welchen Sinn macht es denn wenn ich die Navigation via Anker ausführen würde? Ich mein ohne JS funzt die komplette Seite nicht. Das einzige was wegfällt, dass man nicht speziell die einzelnen Abschnitte bookmarken kann. Und selbst wenn mans könnte, die Seite hat beim Laden immer die Gleiche Ausgangsposition.

Der Sinn ist, dass man dann auf die Unterbereiche linken kann. Aber das ist natürlich nur sinnvoll wenn man auf Usability Wert legt. Ist einem das egal, dann kann man natürlich bei einem JS-Menü bleiben. Dein Menü lässt sich nicht mit der Tastatur bedienen (auch ein wichtiger Usability-Punkt). Bzw. deine Seite lässt sich so gut wie nicht mit der Tastatur bedienen, hier gibt es auch nur 1 von 10 Usability Punkten.

k, werd schaun wie ich das in JS zugewiesen bekomme.

WTF? Wo habe ich gesagt, dass du das mit JS umsetzen sollst? Liest du überhaupt was ich schreibe?

Da bin ich der Meinung das jeder Div sinnvoll ist, kann mich aber natürlich auch irren.

Ja, da irrst du dich. Ein div wird nur dann verwendet, wenn es kein anderes, passendes Element (wie h1, p, header, etc.) gibt. Ein div selbst hat nie (wirklich nie) eine Bedeutung, sie sind lediglich dazu da, dass du mit dem CSS besser und flexibler bist. (also für wrapper, etc, da hast du schon Recht)
btw wo wir schon dabei sind: Du brauchst nicht jedem div auf der selben Ebene die selbe Klasse zu geben, da reicht es aus dem eltern-div eine Klasse zu geben. Du kannst dir codeCollection als Klasse sparen und mit .codeBlock > div > div selektieren.

Mehr ist nicht nötig für den Aufbau deiner Spiele-Liste. Wenn du schon dein Platzhalter-Element brauchst, dann verwende hier ein span im P-Tag, da div hier nicht zulässig ist.

<div>
<h4>fully fleshed out games</h4>
<p>
TIME WILL BLAST <img />
</p>
</div>

 

[keul3]

Ist es eine Liste, die du repräsentierst?

gute Frage, iwie schon aber iwie auch nicht...

Oder für den | einfach einen border.

neee, also den | hast du mir schon vermiest, da hängen jetzt zu viele schlechte Erinnerungen dran
Werd mir mal die Pseudoelemente ansehn...

Der Sinn ist, dass man dann auf die Unterbereiche linken kann.

du meinst von Außen? wie gesagt, das geht so wie die Seite momentan generiert wird gar nicht (Beispiel http://keul3.com/#codesub funktioniert nur innerhalb der Seite, nachdem sie geladen wurde). Wenn ich mal Zeit und Lust hab, werd ich schaun ob ich das noch so einbaut bekomme, aber ich glaub das übersteigt dann doch meine momentanen Fähigkeiten. Ich will da jetzt eigentlich auch nichts am Aufbau ändern, denn so find ich den schon ganz nett. Nice to have, aber nicht allzu wichtig imo
Und gerad wo ich die Zeilen geschrieben hab, hab ich evtl. doch ne Idee dafür ... verdammt

Dein Menü lässt sich nicht mit der Tastatur bedienen (auch ein wichtiger Usability-Punkt). Bzw. deine Seite lässt sich so gut wie nicht mit der Tastatur bedienen, hier gibt es auch nur 1 von 10 Usability Punkten.

Ich wusste bis eben nicht, dass sich eine Seite via Tastatur steuern lässt außer mit den ArrowKeys
Werd mich da mal schlau machen...

WTF?

Na na. Nicht fluchen

Wo habe ich gesagt, dass du das mit JS umsetzen sollst? Liest du überhaupt was ich schreibe?

Klar lese ich das und es ist immer wieder lehrreich und teilweise auch unterhaltsam
Aber soweit ich weiß lässt sich in CSS schlecht auf codegenerierte Grafiken verweisen

Ja, da irrst du dich. Ein div wird nur dann verwendet, wenn es kein anderes, passendes Element (wie h1, p, header, etc.) gibt. Ein div selbst hat nie (wirklich nie) eine Bedeutung, sie sind lediglich dazu da, dass du mit dem CSS besser und flexibler bist. (also für wrapper, etc, da hast du schon Recht)

okay, klarere Tags benutzen und dieses Wischiwaschi-Div so gut es geht meiden

btw wo wir schon dabei sind: Du brauchst nicht jedem div auf der selben Ebene die selbe Klasse zu geben, da reicht es aus dem eltern-div eine Klasse zu geben. Du kannst dir codeCollection als Klasse sparen und mit .codeBlock > div > div selektieren.

Die Childselection ist mir bekannt, und hab ich ganz zu Anfang auch tatsächlich genutzt. Fand dann aber das direkte ansprechen griffiger. Ist so auch wesentlich einfacher aus JS drauf zugriff zu nehmen. Das ist denke ich auch kein Fehler, sondern eher eine Sache der persönlichen Präferenz.

 

[Myhar]

gute Frage, iwie schon aber iwie auch nicht...

Ich weiß es ja nicht, aber vielleicht fragst du mal beim Ersteller der Seite nach, der hat sich da bestimmt Gedanken gemacht

neee, also den | hast du mir schon vermiest, da hängen jetzt zu viele schlechte Erinnerungen dran
Werd mir mal die Pseudoelemente ansehn...

ich mein damit ::after, bzw. ::before. Dann mit content="" den Content einfügen, bzw. die runden Kugeln mit einem quadratischen Element und 50% border-radius machen.

du meinst von Außen? wie gesagt, das geht so wie die Seite momentan generiert wird gar nicht (Beispiel http://keul3.com/#codesub funktioniert nur innerhalb der Seite, nachdem sie geladen wurde). Wenn ich mal Zeit und Lust hab, werd ich schaun ob ich das noch so einbaut bekomme, aber ich glaub das übersteigt dann doch meine momentanen Fähigkeiten. Ich will da jetzt eigentlich auch nichts am Aufbau ändern, denn so find ich den schon ganz nett. Nice to have, aber nicht allzu wichtig imo
Und gerad wo ich die Zeilen geschrieben hab, hab ich evtl. doch ne Idee dafür ... verdammt

Ja, sicher mein ich von außen. Wie soll ich von innen auf die Seite verlinken?
Ein plakatives Beispiel: Herr Müller findet deine Seite super-duper und möchte jemand deinen 3D-Bereich empfehlen. Bei "normalen" Seiten, bzw Navigationen funktioniert das folgendermaßen: Er klilckt auf 3D und kopiert dann den Link in sein Facebook und schreibt "Super-duper, das is das beste an 3D wo gibt, sofort alles kaufen" Bei deiner Seite werden die Leute die dann auf FB auf den Link klicken sagen "Herr Müller, sie sind aber doof, da is ja nix von 3D zu sehen, das is doch alles nur unsinn."

Ich wusste bis eben nicht, dass sich eine Seite via Tastatur steuern lässt außer mit den ArrowKeys
Werd mich da mal schlau machen...

Arrowkeys? Du meinst zum Scrollen? Nein, da gibt es viele Möglichkeiten bezüglich der Navigation und jeder Browser ist anders.
Wo wir gerade bei der Tastaturnavigation sind: Es muss uach ersichtlich sein, wo ich mich gerade mit der "Tastaturnavigation" befinde. Dafür gibt es den :focus (wie :hover, nur eben für Tastatur)

Na na. Nicht fluchen

Klar lese ich das und es ist immer wieder lehrreich und teilweise auch unterhaltsam
Aber soweit ich weiß lässt sich in CSS schlecht auf codegenerierte Grafiken verweisen

Das war nicht fluchend sondern als Ausdruck des Erstaunens gemeint. ;-) Damit klar wird, was ich meine: So was kann man mit CSS machen. Da braucht es keine "Codegenerierte Grafik" (was auch immer das sein soll)

okay, klarere Tags benutzen und dieses Wischiwaschi-Div so gut es geht meiden

Guter Mann

Die Childselection ist mir bekannt, und hab ich ganz zu Anfang auch tatsächlich genutzt. Fand dann aber das direkte ansprechen griffiger. Ist so auch wesentlich einfacher aus JS drauf zugriff zu nehmen. Das ist denke ich auch kein Fehler, sondern eher eine Sache der persönlichen Präferenz.

Ja, ich hab das auch vor allem zu Beginn häufig gemacht, aber egal in welche Programmiersprache (ob HTML jetzt programmieren ist sei mal ausgenommen) man sich einarbeitet, man sollte sich nie zu oft wiederholen. Sicher, man muss auch schauen dass der code lesbar ist, aber wenn man 20 mal ein Element mti der selben Klasse hat, dann sollte man sich was überlegen

 

[keul3]

Ich weiß es ja nicht, aber vielleicht fragst du mal beim Ersteller der Seite nach, der hat sich da bestimmt Gedanken gemacht

Naja, er hat mir gesagt, es ist n Untertitel die wie eine Liste daherkommt ... was für ein Querkopf

Arrowkeys? Du meinst zum Scrollen?

wozu sonst

Wo wir gerade bei der Tastaturnavigation sind: Es muss uach ersichtlich sein, wo ich mich gerade mit der "Tastaturnavigation" befinde. Dafür gibt es den :focus (wie :hover, nur eben für Tastatur)

ja, bin gerad dabei mich zu informieren. Aber ich hab noch nie jemanden mit der Tastatur navigieren sehn
Möcht ich aber schon so gut es geht berücksichtigen

Damit klar wird, was ich meine: So was kann man mit CSS machen.

netter CSS-Hack, aber die sind so standard, nee da behalt ich meine.

Da braucht es keine "Codegenerierte Grafik" (was auch immer das sein soll)

JS + Canvas --> schicke Pfeilchen

Guter Mann

ich bemühe mich, auch wenns nicht immer so scheint

aber wenn man 20 mal ein Element mti der selben Klasse hat, dann sollte man sich was überlegen

Viel vom Html-Code erzeuge ich dynamisch, wie auch bspw. die codeboxen, und somit ist auch der className nur ein Einzeiler. So kann man sagen, dass die Wiederholung nur den Betrachter der HTML-Zeilen stört, aber nicht den Schaffensprozess selbst

 

[Myhar]

ja, bin gerad dabei mich zu informieren. Aber ich hab noch nie jemanden mit der Tastatur navigieren sehn
Möcht ich aber schon so gut es geht berücksichtigen

Weil viele Leute auch einfach nicht wissen dass das geht. Aber eigentlich ist die Unterstützung von Tastaturnavigation von Haus aus bei HTML dabei, man muss eigentlich nichts besonderes machen, dass es funktioniert. Im Gegenteil, man muss etwas machen, damit es dann nicht mehr funktioniert.

netter CSS-Hack, aber die sind so standard, nee da behalt ich meine.

JS + Canvas --> schicke Pfeilchen

Als Hack würde ich das nicht bezeichnen sondern als Standard-CSS. Und ja, ich freue mich acuh immer, wenn ich etwas mit JS+Canvas basteln kann, aber die CSS-Lösung ist hier geschätzte 20 Byte oder so groß, da kann dein JS+Canvas wohl nicht mithalten (Ohne jetzt bei beiden nachgeschaut zu haben)
Auch ist dein Bild semantisch falsch, es gehört einfach ein Hintergrundbild hin. Ein <img>-Tag hat, ganz im Gegensatz zu einem div, immer eine Bedeutung. Das heißt, bei dir würde es so aussehen, wenn man die Seite "vorliest": Bild "3dUnterstrichhead", danach kommt dann Bild "triangle". Das triangle hat aber nichts mit der Seite an sich zu tun, das is nur Schmuckgrafik, also gehört hier kein Bild hin. Darum geht es mir eigentlich.

Ansonsten: Schön, dass du auch was Umsetzt und Änderst und auch was dabei lernst. Auch wenn du eigentlich schon fertig bist

 

[keul3]

Im Gegenteil, man muss etwas machen, damit es dann nicht mehr funktioniert.

unbewusst dinge kaputt machen, das kann nicht jeder

Als Hack würde ich das nicht bezeichnen sondern als Standard-CSS

Ich glaub nicht, dass die Leute die CSS designed haben, beabsichtigt haben, dass man mit border Dreiecke erstellen kann, auf die Idee muss man erstmal kommen, ist also imo ein Hack wenn auch ein kleiner

aber die CSS-Lösung ist hier geschätzte 20 Byte oder so groß

so sieht sie auch aus

Auch ist dein Bild semantisch falsch, es gehört einfach ein Hintergrundbild hin. Ein <img>-Tag hat, ganz im Gegensatz zu einem div, immer eine Bedeutung. Das heißt, bei dir würde es so aussehen, wenn man die Seite "vorliest": Bild "3dUnterstrichhead", danach kommt dann Bild "triangle". Das triangle hat aber nichts mit der Seite an sich zu tun, das is nur Schmuckgrafik, also gehört hier kein Bild hin. Darum geht es mir eigentlich.

schön dass ich jetzt auch weiß wieso wie gesagt, ich werds via js im style-Objekt unterbringen

Ansonsten: Schön, dass du auch was Umsetzt und Änderst und auch was dabei lernst. Auch wenn du eigentlich schon fertig bist

Die Seite ist ja quasi ein großes Lernprojekt für mich und ich würde behaupten ich bin hier nach um einiges schlauer als vorher, auch und besonders dank eurer/deiner Hilfe