Javascript hier im Blog

Hier im Blog kommt eine Menge Javascript zum Einsatz. Doch die vielen unterschiedlichen Scripte und jQuery Plugins bei jeder Seite stumf zu laden geht natürlich zu lasten der Datenmenge dir Übertragen werden muss und somit auch der Ladezeit der Seite. Daher lade ich hier im Blog Javascript nur wenn es benötigt wird.

In der Datei script.js die auf jeder Seite nach jQuery geladen wird, findet eine Überprüfung statt, ob das Script überhaupt benötigt wird. Zum Beispiel wird überprüft ob ein bestimmtest HTML Element existiert. Hier im Beispiel ein Element mit der CSS Klasse ‘.cinematiclist’. Wenn es existiert wird das Javascript File per Javascript nachgeladen und eine Callback Funktion ausgeführt die das Script/Plugin mit Parametern aufruft.

Spy myself – mit Apples Find My iPhone

Spy Myself Heatmap

Bei Christian Leus bin ich auf seinen Ansatz der Selbstüberwachung gestoßen – NSA und so. Christian nutze bisher das mittlerweile eingestellte Google Latitude um seinen aktuellen Aufenthaltsort zu speichern. Da dieser Dienst nun nicht mehr zur Verfügung steht nutzt er nun die Daten aus Apples “Find My iPhone”.

Apple bietet mit “Find My iPhone” die Möglichkeit alle mobilen Geräte unter einer AppleID geographisch zu lokalisieren. Sprich den aktuellen Standort auf einer Karte zu markieren. Zusätzlich lässt sich auf dem Gerät ein Ton oder eine Nachricht anzeigen oder eine Fernlöschung auszulösen.

Ich hab diese Idee und sein Script aufgegriffen und an meine Bedürfnisse angepasst.

Mein raspberryPI ruft alle 15 Minuten ein Script auf welches überprüft ob die letzte gespeicherte Koordinate mindestens 1 Stunde alt ist. Ist sie älter wird die aktuelle Koordinate meines iPhones über die “Find My iPhone”-API abgerufen und mit der letzten gespeicherten Koordinate verglichen. Ist die Distanz größer als 1 KM wird sie gespeichert und der Ablauf beginnt von vorne. Ist die Distanz niedriger als 1 KM wird beim nächsten Durchlauf direkt die Distanz zwischen letzter gespeicherter und aktueller Koordinate überprüft und ggf. abgespeichert.

So werden nur Koordinaten gespeichert wenn ich mich bewege. Trotzdem sind mittlerweile eine Menge Koordinaten angefallen. Da bei jedem wechsel zwischen z.B. Arbeit und zu Hause Koordinaten gespeichert werden.

Spy Myself Deutschland Heatmap

Primär nutze ich eine Google Map welche die gespeicherten Positionen als Heatmap darstellt. Anfangs habe ich die Koordinaten noch mittels Marker dargestellt. Ist jedoch bei vielen Markern relativ übersichtlich.

Spy Myself Heatmap

Nachmachen erwünscht. Sourcecode gibt es auf GitHub: https://github.com/sinky/php-location-tracking-icloud

Bildschirmschoner in HTML, CSS und Javascript als Webseite

… mit Hilfe von Webkit und Node.JS.

Schon lange bin ich auf der Suche nach einem einfachen Bildschirmschoner (für Windows) der mir gegebene Bilder in einer “Fullscreen-Slideshow” anzeigt. Der bei XP mitgelieferte Bildschirmschoner zeigte die Bilder nicht im Vollbild. Dies hat sich bei Windows 7 geändert, jedoch bietet der Bildschirmschoner neben der Angabe eines Bilder Ordners nur drei feste Wechselintervalle und einen Random-Schalter.

Da sich meine Programmierkenntnisse auf Web-Sprachen beschränken, suchte ich lange nach einem Weg eine Webseite als Bildschirmschoner anzuzeigen. Es gibt einige mehr oder weniger aktuelle Screensaver zum Download – die jedoch alle auf den IE setzten. Und dass man sich als Entwickler damit keinen Gefallen tut weiß jeder.

Jetzt bin ich auf node-webkit gestoßen. Ein auf Chromium basierender Browser mit eingebautem node.js.

Chromium plus Nodejs

Dafür habe ich Backstretch für eine Fullscreen-Slideshow über den gesamte Background der Seite genutzt. Da sich der Bildschirmschoner bei Maus und Tastatur Eingaben beenden soll, wird mit jQuery auf die Events “mousemove”, “mousedown” und “keydown” gewartet und im Fall ein window.close() ausgeführt. Bei Webkit ist dies einfach so möglich. Will mann den Screensaver mit Firefox nutzen, benötigt dom.allow_scripts_to_close_windows unter about:config gesetzt werden. Nur die Pfeiltasten rechts und links sowie die Leertaste bilden eine Außnahme und können zur Steuerung der Slideshow genutzt werden.

Durch das in node-webkit eingebaute Node.js, ist es möglich mit Javascript z.B. den Ordner Inhalt des Bilder Ordners auszulesen. Ohne dafür ein PHP zurückzugreifen.

Github Repo: https://github.com/sinky/html5-screensaver-node-webkit

Marco Krage

Da ist mir doch glatt unentdeckt geblieben dass in meinem aktuellen Theme keine HTML Header für die RSS-Feeds existieren.

<link rel="alternate" type="application/rss+xml" title="my-azur.de » Feed" href="http://my-azur.de/blog/feed/" />
<link rel="alternate" type="application/rss+xml" title="my-azur.de » Kommentar-Feed" href="http://my-azur.de/blog/comments/feed/" />

Dabei ist nur folgende Wordpress Funktion aufzurufen. Zum Beispiel in der function.php des jeweiligen Theme.

<?php add_theme_support( 'automatic-feed-links' ); ?>

Also, ab jetzt könnt Ihr wieder einfach im Browser den RSS-Feed abonieren. Ich für meinen Teil nutze Feedly als RSS Reader. follow us in feedly

Cinematic: Backend – die Filmliste

Ich schaue gerne Filme. Ob im Kino oder in meinem eigenen “Heimkino” … mit Veröffentlichung dieses Blogs habe ich versucht eine persönliche Wertung jedes Filmes auf der extra eingerichteten Seite Cinematic festzuhalten.

Um die Filmliste zu veröffentlichen, habe ich mit einer im Wordpress Editor geschriebenen HTML-Tabelle angefangen. Doch mit der Zeit und zunehmenden Zeilen in der Tabelle wurde das Hinzufügen einer neuen Zeile am Anfang der Tabelle zur Tortur. Eine für einen Admin angemessene Lösung musste her! Da ich in letzter Zeit immer mehr zu einem Javascript Fanatiker mutiere, versuchte ich die Daten jedes Filmes (Name, URL, Medium, Wertung, Datum) in einem Javascript Object zu speichern. So konnte ich das Erstellen des HTML Code automatisieren.

Nachteil dieser Methode ist jedoch, dass, die Tabelle erst auf Client Seite im Browser generiert wird und somit z.B. vom Google Bot nicht erkannt wird. Außerdem ist das Editieren nur bedingt einfacher geworden.

Doch jetzt gibt es das Cinematic: Backend

Screenshot Cinematic: Backend

Aus den Daten, die im Backend in einer Datenbank gespeichert werden, wird nun auf der Blog Seite Cinematic eine HTML-Tabelle, die Filmliste, generiert.

Mit diesem Codeschnipsel wird die recht lange Tabelle beim Laden der Seite gekürzt und nur 15 Zeilen angezeigt. Mit einem Klick lässt sich die Tabelle aber in kompletter Länge darstellen.

Ohne die folgenden fantastischen Open Source Projekte wäre ich sicher nicht so weit gekommen.

github.com Stars filtern und durchsuchen

github logoIch bin wirklich ein Fan von github.com. Dort finden sich zahlreich fantastische Opensource Projekte. Auch ich habe dort meinen Code veröffentlicht.

Früher konnte man Projekten, genauer gesagt Repositorys (Repos), “folgen”. Das “Folgen” wurde vor einiger Zeit durch vergeben eines “Stars” ersetzt. Quasi eine Favoriten Funktion.

Meine favorisierten Repos sind unter https://github.com/sinky/following zu finden. Bei mittlerweile drei Seiten ist das Wiederfinden bestimmter Repos echt schwer geworden. Glücklicherweise kann man seine “Starred Repos” unter https://github.com/stars nun auch durchsuchen.

Quelle: https://github.com/blog/1236-searching-and-filtering-stars