Designanpassungen für kleine Bildschirme

[Wandmalfarbe]

• Fixed: Durch PR Diverse kleine Anpassungen am Layout und Design #199 verdeckte auf kleinen Geräten der Menü-Button die Überschrift.
• Fixed: Die Seite Farben hat jetzt auch eine Überschrift. Damit ist sie einheitlich zu den anderen Seiten und sorgt nicht für Konflikte mit dem Menü-Button auf kleinen Geräten.
• Changed: Die Überschriften der Boxen auf der Seite Anzeigeoptionen enthalten nicht mehr den Suffix *optionen. Das war redundant.
• Removed: Unbenutzten CSS-Code für das alte Menü (.main-menu) und die bereits entfernten Elemente .content, .header h2 entfernt.
• Changed: Camel-Case-Schreibweise von WortUhr bzw. der englischen oder deutschen Schreibweise generell angepasst auf Wortuhr (deutsch) oder wordclock (englisch).
• Changed: Hochauflösendes Bild der Website hinzugefügt

---

Kleine Bildschirme

Große Bildschirme

[dbambus]

Hallo @Wandmalfarbe,

wieder einmal vielen dank für deinen Beitrag. Ich sehe doch deutlich, dass du sehr viel mehr Ahnung vom Frontend hast als ich. :-)

Vielleicht kannst du mir damit helfen ?

Eine bisher unverwirklichte Idee die ich für die Seite habe, ist die Sprache ändern zu können. Je nachdem welche Spracheinstellung über den User Agent des Browsers kommen oder über ein Dropdown Menü. Wie würdest du das prinzipiell lösen ?

Bisher habe ich hier nur ein sehr einfachen Testcase hier:

Bspw über eine kleine function im script.js

	for (var key of Object.keys(language[languageSelector])) {
		console.log(key);
		console.log(language[languageSelector][key]);
		document.body.innerHTML = document.body.innerHTML.replace(new RegExp(key, 'g'), language[languageSelector][key]);
	  	//document.getElementById(key).textContent = language[languageSelector][key];
  	}

und weiteren Javascript Dateien wie de.js, en.js, ...

var language = [{
	"wordclock_text": "Wordclock",
	"color_text":"Colors", 
	"functions_text":"Functions",
	"settings_text":"Settings", 
	"smart_home_text":"Smart Home",
	"about_text":"About"},
	{
	"wordclock_text": "Wordlclock",
	"color_text":"Farben", 
	"functions_text":"Funktionen",
	"functions2_text":"Funktionen",
	"settings_text":"Einstellungen", 
	"smart_home_text":"Smart Home",
	"about_text":"Über"
	}];

Ist das ein guter Ansatz oder muss man noch mehr beachten ?

[Wandmalfarbe]

Danke für das Lob :)

Über eine einstellbare Sprache hatte ich auch schon mal nachgedacht. Da gibt es prinzipiell drei Möglichkeiten:

1. Die Sprache wird beim Bau eingebettet und lässt sich später nicht mehr ändern. Das vereinfacht die Entwicklung in den JavaScript-Dateien, da dort keine Sprachänderungslogik implementiert wird. Außerdem hält man die Bundle-Size sehr klein, da nur die gewünschte Sprache im späteren Image enthalten ist. Der große Nachteil ist, dass man das passende Image herunterladen und flashen muss und die Sprache sich nicht nachträglich in der Weboberfläche ändern lässt.
2. 1. Man implementiert den Sprachwechsel zur Laufzeit mit einer geeigneten i18n-Bibliothek. Dies erhöht die Komplexität im JavaScript, da z. B. beim Sprachwechsel auch der Inhalt von Dropdowns angepasst werden muss. Zusätzlicher Speicher wird benötigt, für die Bibliothek und alle Sprachdateien (das dürfte mit einem Minifier allerdings nicht sehr stark ins Gewicht fallen). Einige Bibliotheken wären z. B. https://www.i18next.com/, https://github.com/globalizejs/globalize oder https://airbnb.io/polyglot.js/.
   2. Man implementiert den Sprachwechsel zur Laufzeit mit eigenen Mitteln (vanilla JS). Das spart viel Speicherplatz, aber man muss auch einige Features von den i18n-Bibliotheken selbst entwickeln, was fehleranfällig und zeitaufwändig ist. Gerade bei i18n gibt es haufenweise Fallstricke, weshalb man besser eine Bibliothek verwendet.