Ein Spiel, nur mit HTML, CSS und JS: „Hang The Song“

Hang ... song!

Screenshot

Ein Bildschirmfoto der Hang The Song App unter Windows 10 auf meinem Lumia 550.

Ziel des Spiels ist es, Songs nur anhand der ersten und der letzten Wörter des Lyrics zu erraten.
Ist das auf Anhieb zu schwierig, bekommst du über „Get a new hint“ zwei weitere Wörter zum Lyric hinzu.
Ein Hinweis kostet dir 10 Punkte. Pro Song hast du insgesamt 100 Punkte zur Verfügung. Sind alle Punkte aufgebraucht, ist das Spiel leider vorbei.

Am besten ist es also, so wenig Punkte wie möglich zu verschwenden und die Song-Titel zu erraten.

Kostenlos spielen

Die App ist unter lgk.io/hang-the-song erreichbar und kann direkt im Browser gespielt werden.
Sie ist auf mobile Endgeräte optimiert, kann aber genau so gut am PC verwendet werden.

Ich habe außerdem mit dem Windows App Studio herum experimentiert und so gibt das Spiel auch als Windows 10 App. Für PCs UND Smartphones!

Allerdings noch nicht im Windows Store. Wenn du die Apps aber trotzdem testen willst, kannst du das tun.


Voraussetzung ist, dass du entweder Windows 10 oder Windows 10 Mobile benutzt.

Windows 10 am PC:

  1. Stelle sicher, dass sich dein PC im Entwickler-Modus befindet.
  2. Installier das Windows Zertifikat
  3. Installier die App Hang The Song

Windows 10 am Smartphone:

  1. Stelle sicher, dass dein Smartphone Querladen von Apps erlaubt.
  2. Installier das Windows Zertifikat auf deinem Handy:
    hang-the-song-cert-install
  3. Installier die App auf deinem Handy:
    hang-the-song-app-install

Die komfortable Art, JavaScript- und CSS-Dateien zu kombinieren — mit Miniphpy

Miniphpy

In den Artikeln Traffic verringern: JavaScript-Dateien kombinieren und Website-Gestaltung: Beschleunigung durch Kombinieren von CSS-Dateien bin ich bereits darauf eingegangen, dass es Sinn macht, bei Web-Projekten CSS- und JavaScript-Dateien zusammenzufassen, um mehrfaches Abfragen einzelner Dateien zu verhindern.

Verwendet man CSS Pre-Prozessoren wie LESS oder Sass, ist es ziemlich einfach, seine Stylesheets zu kombinieren. Seit einiger Zeit nutze ich für das Kompilieren von LESS-Dateien die Anwendung Koala.

Nur für das Kombinieren von JavaScript-Dateien habe ich bisher noch keine Lösung gefunden. Und deswegen habe ich mir einfach selbst eine gemacht: Miniphpy

miniphpy-screenshot

Durch das Web-Interface kannst du deine Dateien zu Bündel kombinieren. Um auf Dateien zu verweisen, kannst du entweder einen lokalen Pfad oder eine URI zu einer Datei angeben.

Die Dateien werden dann, abhängig von der Reihenfolge, zusammgefügt und anschließend komprimiert.

Hierbei kannst du wählen, ob die Komprimierung lokal (erfolgt mithilfe von Bibliotheken, die in Miniphpy enthalten sind) oder remote (dabei werden APIs der Komprimierungs-Dienste http://javascript-minifier.com/ und http://cssminifier.com/ verwendet) passieren soll.

Da Miniphpy eine PHP-Anwendung ist, musst du Apache (z.B. durch XAMPP) auf deinem PC am Laufen haben.

Startmon Build-News jetzt immer hier im Blog

Ab sofort werde ich bei jeder neuen Beta-Veröffentlichung von Startmon einen kleinen Post hier im Blog erstellen, um die Änderungen und Verbesserungen zu dokumentieren.

Diese Posts werden unter der Kategorie Startmon Build-News veröffentlicht und werden außerdem immer auf der Startseite in der Sidebar erscheinen.

Die Verkündungen neuerer Versionen werden aber auch weiterhin über Twitter (@lgkonline) geschehen.

Neue Domain: lgk.io

Neue Domain: lgk.io

Neue Domain: lgk.io

Ich konnte mir nun die Domain lgk.io sichern.
Innerhalb der nächsten Zeit, sollen alle meine Dienste auf diese neue Domain umsteigen, während lgkonline.com weiterhin als Alias erhalten bleiben soll.

Die Domain-Endung „.io“ ist eigentlich länderspezifisch für das Britische Territorium im Indischen Ozean vorgesehen.
Da IO aber auch für „Input/Output“ steht, werden .io-Domains in letzter Zeit aber vor allem auch in der IT-Branche verwendet.

Wer sich beispielsweise bei GitHub eine Seite einrichten lässt, ist diese dann unter nutzername.github.io erreichbar.

Endlich eine deutlich kürzere URL!

Da der Name „LGK“ schon vorher stand und die Domains lgk.de und lgk.com bereits vergeben war, hatte ich mich für lgkonline.com, auch wenn ich das Anhangen von „online“ schon immer hässlich fand. ^^
Das hat man vielleicht in den 90ern so gemacht.

Deshalb bin ich umso glücklicher mit der neuen knackigen Domain lgk.io.

Neue Möglichkeiten für Services

Startmon wird dann wohl die Subdomain startmon.lgk.io erhalten.
Und auch die anderen Services sollten dann eine deutlich kürzere Adresse bekommen.

Synchronisiere Colorganize-Paletten mit LESS und Sass

Paletten-Farben als LESS-Variablen.

Paletten-Farben als LESS-Variablen.

LESS und Sass sind sogenannte „CSS Pre-Prozessoren“.
Damit ist es möglich, Stylesheets effizienter als je zu vor zu erstellen.
Mehr über die Vorteile von CSS Pre-Prozessoren »


Es ist nun möglich, seine Paletten aus Colorganize.com direkt mit eigenen LESS- und Sass-Code zu verbinden.
Ein @import genügt und du kannst deine Farben aus deiner Palette innerhalb deines Projektes benutzen.
Sobald du etwas an deiner Palette in der Web App änderst, wirkt sich das automatisch auf deinen Code aus.
Wenn du eine z.B. aus LESS-generierte CSS-Datei verwendest, muss diese vorher neu komprimiert werden.

Damit du eine Palette mit LESS oder Sass nutzen willst, muss diese als „public“ markiert sein.
Standardmäßig sind aber alle Nutzer-Paletten als „private“ markiert. So kannst du das ändern:

  1. Klicke oben rechts auf „Edit mode“, um in den Bearbeitungs-Modus zu gelangen.
  2. Klicke links im Paletten-Menü auf das jeweilige Stift-Symbol, um die Palette zu bearbeiten.
  3. Aktiviere „public“, indem du auf den entsprechenden Button klickst.
Variablen-Namen können schnell und einfach kopiert werden.

Variablen-Namen können schnell und einfach kopiert werden.

Die Variablen-Namen der Farben stehen immer griffbereit. Ein Klick genügt und die gewünschte Farb-Variable kann in deinen LESS-, bzw. Sass-Code eingefügt werden.


Probiere es gleich aus »

Falls du noch nicht registriert bist, ist es übrigens auch möglich sich mit seinen Twitter-Account anzumelden. Mehr dazu hier »

Registrierung bei Startmon ist jetzt möglich

Startmon Preview 3

Die dritte Preview von Startmon ist nun online und nun ist auch die Registrierung möglich.
Somit können Nutzer Startmon jetzt selbst anpassen.

Nun können eigene Link-Menüs und Links angelegt werden.

Startmon anpassen

Startmon anpassen

Für die Link-Menüs können Icons und Farben angepasst werden.

Klicke hier, um dich zu registrieren.
Um eigene Anpassungen zu machen, logge dich ein und klicke oben rechts auf das -Symbol und der Edit-Modus wird aktiv.

Später sollen auch noch die Suchmaschinen-Masken personalisiert werden können.

start.lgkonline.com »