How to Encode an SVG for the `src`-Attribute using PHP

As SVGs should preferably not be base64 encoded when setting them on an -tag src-attribute, the suggested alternative is to URL-encode them. The standard PHP urlencode function unfortunately is not suitable for this task, as the resulting value is not interpreted by any browser as a valid SVG image. Instead, the function rawurlencode has to be used. Took me some time to realize. As soon as you get this, you can also take over some other optimizations; maybe get inspired by Taylor Hunts mini-svg-uri to decode some characters manually to improve the overall size. A final function could possibly look like this:

function svgUrlEncode($svgPath)
{
$data = \file_get_contents($svgPath);
$data = \preg_replace('/\v(?:[\v\h]+)/', ' ', $data);
$data = \str_replace('"', "'", $data);
$data = \rawurlencode($data);
// re-decode a few characters understood by browsers to improve compression
$data = \str_replace('%20', ' ', $data);
$data = \str_replace('%3D', '=', $data);
$data = \str_replace('%3A', ':', $data);
$data = \str_replace('%2F', '/', $data);
return $data;
}

Loading Likes...

Cortana vs. Siri #4: Verfügbarkeit

Lange hat es gedauert, doch nun scheint dieser Punkt auch an Cortana zu gehen: Seit nicht allzu langer Zeit ist einerseits Cortana auf Windows 10 Geräten auch in der Schweiz standardmässig verfügbar, ohne dass man gross tricksen muss, und andererseits Siri verfügbar auf Desktop-Geräten und Laptops, die mit dem neusten MacOS ausgerüstet sind. Aber den wharen Punkt gibt es, da insbesondere Cortana bald auch auf iOs- und Adroid-Geräten verfügbar, was von Siri umgekehrt wohl nie behauptet werden kann.

Loading Likes...

Apple Superdrive mit Windows verwenden

Das Apple Superdrive Laufwerk lässt sich problemlos unter Windows verwenden. Allerdings muss dafür der entsprechende Treiber installiert werden.

Das geht folgendermassen: Laden Sie sich die Apple Boot Camp-Support-Software herunter. Die Datei ist eine Zip-Datei, also um einen «Zip-komprimierten Ordner», wie Windows das nennt. Entpacken Sie die Datei und öffnen anschliessend den entpackten Ordner. Gehen Sie darin zum Unterordner /BootCamp/Drivers/Apple. Dort finden Sie eine Datei namens «AppleODDInstaller64.exe» (eventuell ist die Endung «.exe» nicht zu sehen). Installieren Sie mithilfe dieser Datei den Treiber, indem Sie auf sie doppelklicken und dem Installationsassistenten folgen. Das war es schon! Beim nächsten Anhängen des Apple-SuperDrive Laufwerks sollte Ihr Windows dieses nun erkennen und damit arbeiten können.

Loading Likes...

Dynamic MediaQueries for an image raster with Sass

Ich konnte MediaQueries dynamisch aus Zurb Foundations-Breakpoints für ein Raster mit folgendem Sass-Code genierieren:

$i: 2;
@each $s,
$breakpoint in $breakpoints {
    @media (min-width: $breakpoint) {
        div.grid {
            .element {
                width: calc(100%/#{$i});
            }
        }
    }
    $i: $i+1;
}

In meinem Fall generiert es die Medienabfragen für alle Breakpoints, die für das Zurb Foundation Framework in den Sass-Array $breakpoints definiert sind. Für jeden Haltepunkt erhöht er die Anzahl der in einer Reihe des Gitters angezeigten Elemente, indem er seine Breite einstellt, beginnend mit zwei Elementen für die kleinste Bildschirmbreite. Natürlich muss für das .element die display -Eigenschaft auf inline-block gesetzt sein.

Loading Likes...

Cortana in der Schweiz!

Mit dem Anniversary Update von Windows 10 ist es endlich soweit – der Sprachassistent von Microsoft ist endlich auch in der Schweiz verfügbar. Zwar versteht Cortana nur Hochdeutsch, doch das ist verständlich. Um Cortana zu aktivieren, benötigt man als erstes das neuste Update von Windows. Dies ist unterdessen auch für Mobilgeräte verfügbar, und kann in den Einstellungen unter Update und Sicherheit und Windows Update installiert werden.

Anschliessend ist für die Aktivierung noch eine kleine Einstellung notwendig. Durch klicken auf das Lupensymbol öffnet sich ein Fenster, in dem man unten links über dem Feedback-Symbol auf das Zahnrad klicken muss, um die Einstellungen für diese Suche zu öffnen. Dort findet man die Einstellung für die Sprache von Cortana. Man wird darauf hingewiesen, dass Region und Sprache nicht mit einer verfügbaren Cortana Sprache übereinstimmen. Dennoch kann man aus einer Liste die Sprache Deutsch (Deutschland) auswählen. Eine erneute Warnung, dass Region und Sprache nicht mit Cortanas Sprache übereinstimmen, und dass einige Features möglicherweise nicht verfügbar sind, kann man getrost wegklicken. Und yay – das wars! Cortana ist ab sofort auf deinem Gerät aktiviert.

Mich hat es vor allem gefreut, dass nun endlich auch der nervtötende {searchTerms} Bug auf meinem Lumia 930 gelöst und verschwunden ist. Bei diesem Fehler öffnete sich mir immer ein Edge-Tab mit einer Google-Suche nach {searchTerms} wenn ich das Lupensymbol berührte.

Loading Likes...

Google und Neujahrsvorsätze

Wer im Web sucht, verrät etwas über sich – zumindest wenn er sich nicht dagegen schützt. So zeichnen Google, Bing und Co. jede Suchanfrage auf, zusammen mit Datum, Ort und welche Daten auch immer sie noch kriegen können. Zu unserem Glück bieten sie immer wieder einen Einblick in ihre Daten und zeigen Trends und Highlights, so zum Beispiel auf google.com/trends.

Diese Daten können wichtige Erkenntnisse liefern oder einfach faszinieren. Und sie repräsentieren die Gedanken und Sorgen unserer Gesellschaft. So lässt sich zum Beispiel feststellen, dass kurz vor dem Verkaufsstart von neuen iPhones die Suchanfragen nach “iPhone langsam” exponentiell in die Höhe schnellen.

Jetzt, kurz nach Silvester, jetzt, am Anfang des neuen Jahrs, lässt sich eine ebenso rasch ansteigende Nachfrage nach “Fitness”, “abnehmen” oder “Diät” feststellen. Diese wird auch dieses Jahr – wie alle Jahre zuvor, achten Sie mal auf die Kurve – schnell wieder zurückgehen. Im Frühling wenn das Volk wieder von einer Bikinifigur träumt gehen die Suchanfragen wieder ein wenig rauf, nehmen aber auch diesmal wieder ab – bis zu den Neujahrsvorsätzen!

Welche regelmässigen Kurven finden Sie? Schreiben Sie Ihre Beobachtungen in die Kommentare!

Loading Likes...

plymouthd: ply-terminal.c:611: ply_terminal_open: Assertion 'terminal != ((void *)0)' failed

plymouthd: ply-terminal.c:611: ply_terminal_open: Assertion 'terminal != ((void *)0)' failed

Eine Fehlermeldung, die den Cubietruck praktisch zum erliegen bringt. Irres auf-der-Tastatur-herumschlagen nützt au nichts mehr. Da gibt es aber noch eine Lösung: Ctrl + Alt + F1

Das Problem ist bloss, dass die Lubuntu Benutzeroberfläche nicht gestartet werden konnte. Mit dem magischen Tastaturbefehl kommt man zur ursprünglichen Ubuntu Befehlszeile. Von hier aus kann man nun mögliche Ursachen suchen und selbige beheben.

In meinem Fall verhinderte eine unvollständige Installation von Java das starten der UI. Die Installation konnte ich, nachdem ich ein wenig mehr Platz geschaffen habe auf der Festplatte, mit sudo apt-get -f install vollenden. Danach kann man entweder die Benutzeroberfläche per Befehl starten, oder mit sudo reboot den Computer neu starten, so dass die Benutzeroberfläche wie üblich beim Aufstarten aktiviert wird.

Loading Likes...

Ist ein Objekt mit einer Eigenschaft in meinem Array?

Mit folgendem Code können Sie testen, ob ein Objekt in einem Array ‘array’ eine Eigenschaft ‘property’ mit dem Wert ‘value’ hat.

// test if a object located in 'arrray' has a 'property' which equals 'value'
var isInArray = function (array, property, value) {
for (var i=0; i < array.length; i++) { if (array[i][property] === value) return true; } return false; };
Loading Likes...

Lesemodus – Rückentwicklung des Webs?

Immer mehr Geräte mit Internetzugang bieten im Browser die Möglichkeit, die Website ohne Style bloss als Text mit den Bildern anzuzeigen. Je nach Browser heisst diese Funktion zum Beispiel “Reader View” bzw. “Lesemodus”. Das meiner Meinung erstaunliche daran ist, dass das meiner Beobachtungen zufolge quasi ein Rückschritt auf dem Weg der Webentwicklung bedeutet. Im Lesemodus werden die Seiten, wie ganz zu Beginn des Internets, nur mit den elementarsten HTML Tags dargestellt: Nur die verschiedenen Headings, Links und Paragraphen werden angewandt. Dieser Modus macht das Lesen vielfach tatsächlich einfacher und bietet somit viel Potential. Dennoch sehe ich noch einige Schwachstellen. Einerseits werden die Webseiten dennoch ganz geladen und verbrauchen somit ebenso viel Internetleistung. Andererseits entspricht der Style des Lesemodus aus unerfindlichen Gründen nicht dem Standardstyle des Browsers – wenn also ein Developer denkt er könne es sich einfach machen und den Style einfach weg lassen, weil seine Seite einfach nur gelesen werden muss, hat sich leider getäuscht. Das Standardlayout ist noch immer voll 90er Jahre und dass der Nutzer deshalb die Reader View einschaltet ist nicht zu erwarten. Stattdessen sucht er eine andere Website auf, die ihm besser gefällt…

Haben Sie diesen Artikel im Lesemodus angeschaut? Ist Ihnen meine Meinung zu weit hergeholt? Schreiben Sie Ihre Antwort in die Kommentare!

Loading Likes...

Angular & Onsen.io

Nahezu drei Tage brachte ich es einfach nicht hin, dass meine Angular Applikation mit onsen.io macht, was sie sollte. ng-repeat waren im DOM-Baum auskommentiert, ng-click reagierten nicht.
Nun endlich ist mir das Problem aufgefallen und bewusst geworden. Die ng-controller dürfen nicht auf einem angewendet werden, sondern dürfen frühestens bei der als Attribut gesetzt werden. Ich hoffe ich kann mit dieser Beobachtung anderen solch schweres Kopfzerbrechen verhindern.

Loading Likes...

spaceMaster – mein erstes Game für iOs & Android

Das Spiel, das von mir ursprünglich als Projekt im EF Informatik entwickelt wurde, ist jetzt für Android und iOs verfügbar.

Im Spiel geht es darum, dass Sie mit Ihrer Rakete durch das All fliegen und die Goldmünzen einsammeln, die Sie auf Ihrem Weg finden. Doch Vorsicht: Das All ist voll mit gefährlichen Meteoriten und feindlichen Ufos, die Ihre Münzen klauen und Sie vernichten wollen! Weichen Sie ihnen aus, um den Highscore zu knacken.

Das Spiel ist sehr einfach aufgebaut und erinnert, hauptsächlich aufgrund der Schwierigkeitsstufe, ein wenig an Flappy Bird. Auch wenn hohe Highscores auf den ersten paar Versuchen unmöglich scheinen, ist das Spiel für die eine oder andere Gelegenheit sehr zu empfehlen! Ausgetauscht werden die Highscores auf iOs mit dem GameCenter und auf Android mit Swarm.

Leider ist das Anbieten von Apps im iTunes Store nicht kostenlos, so dass ich das Spiel auch nicht gratis anbieten kann. Der Preis von CHF 1.- ist jedoch vergleichsweise sehr tief, so dass diese Kosten Sie hoffentlich nicht daran hindern, die App herunterzuladen.

Wie viele Punkte haben Sie erreicht? Schreiben Sie die Antwort in die Kommentare!

Weitere Infos zum Spiel: http://bernhard-webstudio.ch/spacemaster

Loading Likes...

Cortana vs. Siri #2: Desktop

Seit Siri das erste Mal vorgestellt wurde, sind schon einige Jahre ins Land gezogen. Mit ihnen kamen viele Gerüchte – wird Siri auch auf OS X verfügbar sein? Und nach all diesen Jahren ist die ernüchternde Antwort noch immer: “vermutlich eines Tages, aber bisher ist noch nichts definitiv!”
Bei Cortana sieht das anders aus. Schon eine der ersten Technical Preview von Windows 10 kam mit Cortana ausgeliefert. Der Funktionsumfang entspricht dem von Windows Phone, logischerweise, da Microsoft ja für alle Geräte das selbe OS ausliefern möchte. Und wer Cortana sowohl auf dem Smartphone wie auch auf dem Desktoprechner mit dem selben Microsoft-Konto nutzt, dem werden die Daten über die Cloud selbstverständlich von einem Gerät zum anderen synchronisiert.
Ob das jetzt von Vorteil ist, wenn die gleiche Sprachsteuerung vom Handy auch auf dem Desktopcomputer verfügbar ist, sei dahingestellt. Es ist aber ein Punkt mehr, der an Cortana geht. Doch das Spiel ist noch nicht aus.

Loading Likes...