marcel henning

My top quotes from DiBi 2017

2017-05-08T00:00:00+00:00

I had the pleasure to attend this years Design It Build It conference in Edinburgh. It was my first UX conference, so I didn’t really know what I could expect from it. The two days were challenging and in some parts changed my mind. I want to share some of my take aways with you.

The conf started with a Keynote hold by Joshua Davis. He opened my eyes on how to handle open source stuff. He writes animation software in Java. You probably saw these animations in some of the last years SuperBowl pre shows.

Don’t overthink things. Just put it out.
Joshua Davis

Don’t overthink things, was one quote from this session that I hear in my mind for weeks now. Thats why I want to write more on this blog. ;)

The kind of work you do is the kind of work you get hired to do.
Joshua Davis

Sometimes it is that simple. People know things they see. Even in the digital business people can only guess what your skills are. Maybe from some kind of skill list, but better with results (or intermediates). When I want to do more UX work and get payed for it - it should do more UX stuff. Sometimes it is that simple.

Ads are not the problem. Trackers are the problem
Laura Kalbag

Lauras talk was about.. Call it trackers. Call it data. Call it the black site of the digital industry. It felt like Big Brother. She showed what data collecting companies can do with your (their?) data. And how should not do that. She indroduced the Ethical Design Manifesto. A good guideline for companies and individuals that worry about the users data.

Shit or get of the pott
Christopher Murphy

Chris startet his talk with a story, when he ended up in the ambulance. The baseline of that talk was: You have everything you need. You are good. Start living your dream. Do the thing you want to do. Dont only think about what you could do. Do it! His talk reminded me of Eugene Cho’s book Overrated.

Use the fuck off phase.
Chris Murphy

Yet another quote from Chris. He mentioned some phases when one has to do with deadlines. In the first place one probably has plenty of time. The deadline is far away, so there is no need to start implementing. Things get deplayed in the first place. He called this first phase the Fuck Off Phase. A phase, where you have all the time. All the time to procastinate and indirectly think about your ideas. The time to sharpen the saw.

Trade everything as a prototype
Chris Hammond

Chris Hammond introduced how IBM does Design Thinking. One sentence mad his way into my brain and lives there. They treat everything as a prototype. Nothing is cut into stone - not even live environments. So it should be easy to rip off things and replace them with a new - even better one. A great attitude and I want more of this.

Design Thinking is basically to rephrase the problem
Chris Hammond

This was the first thing I wrote down when Chris started his talk. He put an exercise at the beginning, asked for some volunteers and asked them to draw a vase. And everyone drawed a vase. Then they should get rid of this prototype. And create a stunning experience to enjoy flowers. This blew my mind. Just by using other words.

Words matter!
Marcel Henning

Thats not a quote but a learning from Louise Mushet’s talk. She talked about the change she could establish in a charity. So when she was about to do some user research, people stuck and didnt want to talk. Instead of using the word “research” she used “insights”. And with that, people stated to talk with her.

DiBi 2017 was a changing experience. I can recommend it to everyone doing some tech stuff, not just designers.

English, Jekyll and my way away from WordPress

2016-04-03T11:05:45+00:00

This blog has a fresh look and from now on I will write my posts in English. The reason is very simple. Most of my twitter followers dont speak german and I want you to understand me.

So there is a new design and a new language. And to get to three new things in a row, I changed my system from WordPress to Jekyll. I liked WordPress for years and I did several pages with this system. BUT I dont want all the administration hassle that comes with a wide spread system. WordPress is one of the most often used systems on the planet - and so it is vulnerable when you dont keep track with all the security updates.

In my sparetime when I just want to write some posts it is not in my interest to update my site within days when a new update is out. So I switched to a static site generator called Jekyll. Now it’s easy for me to write post. I just open up my favorite text editor - and start typing. No editing in a browser, no shortcuts I dont know and no mouse when I dont need it. And - Markdown! Now I can write and let some special characters do the formatting.

So I hope this will result in some more posts than in the past years.

WordPress auf SSL umstellen

2016-01-01T23:05:45+00:00

Dank Lets Encrypt kann man erschwinglich ein SSL Zertifikat bekommen. Für die Inhaber von eigenen Servern bzw. mit SSH Zugriff geht die Einrichtung wohl auch recht schnell und unkompliziert. Was mich bisher dann doch davon abgehalten hatte, war mein Shared Host. Ich habe ja nur begrenzte Zugriff.

SSL mit Lets Encrypt bei all-inkl.com

Da mir die Erstellung für den Shared Host recht lästig vorkam und die Zertifikate auch nur 90 Tage vorhalten, schrieb ich vor kurzem den Support von meinem Hoster all-inkl.com an, ob sie mir denn bei der Einrichtung eines Zertifkates behilflich sein könnten und ob mich das was kosten würde. Die Antwort des Supports kam gewohnt schnell. Und auch die Antwort freute mich. Ich müsse lediglich die (Sub-)Domain nennen und mich authentifizieren. Gesagt, getan und nach weiteren 10 Minuten hatte ich ein Lets Encrypt Zertifikat auf der Domain. Jetzt die Umstellung meiner Domain anfangen.

URL-Optionen anpassen

Von nun an ist es nicht mehr weit. Im Adminbereich unter Einstellungen > Allgemein kann nun noch die URLs umgestellt werden. Habt ihr eine Multisite-Installation, dann wird diese Einstellung in den Netzwerkeinstellungen unter Webseiten > Webseite bearbeiten umgestellt.

Exkurs: Hauptdomain im WordPress MultiSite Netzwerk ändern

Wenn ihr, wie ich, die Hauptdomain eures Netzwerkes umstellen wollt, dann geht es nicht so einfach über die Adminoberfläche. Hierfür sind noch ein paar Anpassungen in der WordPress Konfiguration und in der Datenbank notwendig:

Die Optionen siteurl und home in der Tabelle wp_options^*
Bei einem zusätzlichen Domainwechsel sind die Änderungen in den Tabellen wp_site und wp-blogs notwendig
Bei einem zusätzlichen Domainwechsel ist die Anpassung der Option DOMAIN_CURRENT_SITEin der wp-config.php notwendig

^* wp_ ist ein Platzhalter für deinen Datenbankprefix.

URL Rewrite von http auf https

Nun wollen wir noch die normalen HTTP-Aufrufe auf HTTPS umleiten. Hierfür kann in der .htaccess folgender Codeblock genutzt werden. (URL anpassen nicht vergessen ;-) ):

# SSL for example.org in the multisite network

RewriteCond %{HTTP_HOST} ^example.org

RewriteCond %{SERVER_PORT} !443

RewriteRule ^(.*)$ https://org.org/$1 [R,L]

`


## SSL im WordPress Admin Bereich erzwingen
Neben den Anpassungen in der `.htaccess` kann man durch ein paar Zeilen in der `wp-config.php` die Verwendung von SSL im Adminbereich erzwingen:

`// just switch this domain in the multisite network

if ( $_SERVER["HTTP_HOST"] == "example.org" ) {

    define('FORCE_SSL_ADMIN', true);

    define('FORCE_SSL_LOGIN', true);

}

Alte Links im Content anpassen

Nachdem die Seite nun über HTTPS aufgerufen werden kann, sind dennoch Links auf den alten HTTP-Pfad in den Blogbeiträgen. Hier kann das Plugin Velvet Blues Update URLs Abhilfe schaffen. Es durchsucht den gesamten Content (Posts, Custom Post Types, Medien etc.) nach einer URL und ersetzt sie mit einer neuen URL. Genau das Richtige, um die Links von http auf https zu ändern.

Meine Seite verwendet ein Logo im Header, das über den Theme Customizer eingefügt werden kann. Solche Bilder ersetzt das Plugin leider nicht mit. Um hier den HTTPS-Link zu erhalten, konnte ich das Bild im Customizer aus dem Theme entfernt und erneut hinzugefügen.

Nun noch einen Blick in die Konsole des Browsers werfen um sicher zu stellen, ob alle HTTP-Verweise ersetzt wurden. Und fertig.

Edit: Web Fonts

Ein kleiner Hinweis, den ich noch von @bisonfute erhielt, war auch die Einbindung von WebFonts durchzusehen. Bei mir hatten sich noch ein paar mit eingeschmuggelt. Hier hilft es, um Stylesheet die Referenzierung von http://path.to.webfont auf //path.to.webfont zu ändern.

Zusammenfassung

Eine WordPressinstallation auf SSL umzustellen ist dank einiger Hilfmittel recht schnell zu bewerkstelligen. Die Seiten-URLs können in den meisten Fällen direkt in der Oberfläche von WordPress geändert werden, für die Ersetzung im Content unterstützen Plugins. Dank Lets Encrypt kann man Zertifikate frei erhalten. Selbst mit einen kleinen Änderungen in einem Texteditor kann eine WordPress Multisite-Installation unkompliziert umgestellt werden.

Retina testen ohne Retina

2015-04-24T07:18:24+00:00

Moderne Seiten sollten ja auch auf Retina-Displays vernünftig aussehen. Nur wie testet man, dass das was man da in Code gegossen auch auf diesen Displays gut und richtig aussieht, wenn man grad keines zur Hand hat.

Ein kleine Hilfe bietet der Firefox:

1) In der Adresszeile about: config aufrufen
2) Den Eintrag layout.css.devPixelsPerPx anpassen. 2 ist für Retina, 1 ist normales Display

npm ohne sudo unter Ubuntu

2015-03-19T18:26:59+00:00

Ich bin passionierter Linux Nutzer und war sehr froh, als ich meine Entwicklungsumgebung auch endlich im Ubuntu zum Laufen bekam.

Nodejs, Grunt oder Gulp und natürlich auch IntelliJ. :D

Eine Sache war mit aber noch ein Dorn im Auge. Ich musste alle npm Module per sudo installieren. Aber auch da konnte abhilfe geschaffen werden:

npm config set prefix ~/npm

im Terminal ausführen und dann noch

export PATH="$PATH:$HOME/npm/bin"

in der .bashrc hinzufügen. Und nach dem Ausführen von

source ~/.bashrc

läuft nun auch das Installieren von den npm Modulen schön ohne sudo.

jit-grunt - Ein Modul für Ungeduldige

2015-01-12T15:30:30+00:00

Grunt Tasks laden

Ich bin ja eher einer von der ungeduldigen Sorte. Ich warte ungern und freue mich drüber, wenn ich Prozesse optimieren, automatisieren und beschleunigen kann. Seit dem ich von GruntJS hörte, bin ich Fan. Man kann damit viele nervige und wieder kehrende Sachen automatisieren. Aber wem erzähl ich das..

Nun kommt es vor, dass mit forschreitender Projektdauer das Gruntfile und damit auch die Tasks, die der gute Taskrunner übernimmt, immer mehr werden. Aber man benötigt nicht immer alle Tasks, die auch im Gruntfile definiert sind. Dummerweise weiß das Grunt aber nicht und lädt immer alle Tasks. Das kann auch schon mal seine drei, vier, fünf Sekunden dauern. Wenn nun die Ausführung des eigentlichen Tasks nur den Bruchteil einer Sekunde dauert, ist das vergeudete Zeit.

Es gibt ein Node-Modul, mit dem man diesem Missstand abhelfen kann:

jit-grunt

Bindet man jit-grunt in seinem Gruntfile ein, werden nur noch die Tasks geladen, die auch zum Ausführen benötigt werden. Man mag meinen, dass es keinen sonderlichen Einfluss hat, ob die Auführung nun fünf oder nur zwei Sekunden dauert. Ich als ungeduldiger Mensch kann sagen: Es macht einen Unterschied. Wem es nicht anders geht, kann das Modul ja mal benutzen.

Stolpersteine

Es kann vorkommen, dass man bei der Arbeit mit jit-grunt auf folgende Fehlermeldung stößt:

jit-grunt: Plugin for the "cssmetrics" task not found. If you have installed the plugin already, please setting the static mapping. See https://github.com/shootaroo/jit-grunt#static-mappings Warning: Task "cssmetrics" not found. Use --force to continue.

Diese Meldung kann zwei Herkünfte haben:

Das Modul ist nicht installiert. Dann genügt in der Regel ein Aufruf von npm install um den Task laufen zu lassen
Der Task heißt anders als das Modul (grunt-contrib-[name], grunt-[name] oder [name]), dann muss ein statisches Mapping eingebunden werden.
require('jit-grunt')(grunt, { sprite: 'grunt-spritesmith', hello: 'custom/say-hello.js' // for custom tasks. });

Fazit

Das Modul ist für ungeduldige Menschen eine große Hilfe und kann zur Produktivitätssteigerung beitragen. Durch die wiederholte Ausführung der Tasks dürfte sich die Einrichtungszeit auch bald rentiert haben.

node_modules in Windows löschen

2014-12-03T10:06:31+00:00

Ich habe vor kurzem eine Reihe an yeoman Generatoren ausprobiert. Von Natur aus generieren die einen node_modules-Ordner. Als ich meine Versuche löschen wollte, stellte Windows sich quer. Einige Ordnernamen wären zu lang.

Da das sehr ärgerlich ist und ich meine Festplatte nicht noch weiter vollmüllen wollte, machte ich mich auf die Suche. Und ich wurde fündig. Es gibt ein Node.js Modul, dass sich genau um solche Fälle kümmert. Darf ich vorstellen: rimraf.

Einfach rimraf node_modules in der Konsole aufrufen und er nunmehr ungeliebte Order wird gelöscht.

Agile? Ja, aber wie?

2014-11-23T09:09:19+00:00

Agile Vorgehen sind ein gutes Mittel, um ein Produkt zu entwickeln. Ich bin ein Freund davon, Sachen, die sich in professionellen Bereichen bewährt haben, auch privat oder in ehrenamtlichen Projekten zu benutzen.

So auch agile Vorgehen. Ich persönlich habe praktische Erfahrungen nur in Scrum sammeln können. Also habe ich versucht, Scrum ehrenamtlich zu verwenden. Als Tool hilft mir dabei The Bug Genie. In PHP geschrieben unterstützt es gut bei der Planung und beim Arbeiten.

User Stories, Sprints, Bugs. Alles kann man abbilden.Aber wie lange wählt an den Sprint? Da ich in meinem Testprojekt allein entwickle, wählte ich zunächst einen Monat. Ich dachte mir, das wäre lang genug um auch wirklich was entwickeln zu können und kurz genug, um nach dem Sprint live gehen zu könnnen.

Zwei Monate lang klappte die Entwicklung so ganz gut, dann kam mehr und mehr das Leben dazwischen. In mir verdichtete sich der Verdacht, dass feste Iterationszeiten vielleicht doch nicht so praktikabel sind. Schließlich arbeitet man ja nicht jeden Tag am Projekt.

Der nächste Versuch ist: Ausliefern, wenn die Story fertig ist. Mal sehen, wie praktikabel das wird.

Javascriptkonsole im nativen Android Browser

2014-09-12T18:24:47+00:00

Manchmal kommt soll es in der Entwicklung ja vorkommen, dass die Software oder eine Seite nicht so funktioniert, wie sie eigentlich soll. Manchmal stoppt die Ausführung durch einen Javascriptfehler.

Wenn man nun weinre oder andere Debuggingtools grade nicht zur Hand hat, kann die Konsolenausgabe vom nativen Androidbrowser helfen. Ein kleiner Trick, der vielleicht viele Nerven und viel Raterei sparen kann.

Man öffnet einen neuen Tab und tippt dann about:debug in die Adresszeile sein. Zurückgewechselt zum Ausgangstab kann man nun mit einem Fingerstreif die Konsole einblenden.

Remote Debugging

2014-09-12T08:04:36+00:00

Remote Debugging unterstützt beim Entwicklen von Webseiten. In Zeiten von Responsive Web Design und Mobile First wird ja die Unterstützung von diversen Endgeräten unabdingbar.

Google hat für das Debugging nette Unterstützung in den Chrome eingebaut, Apple in den Safari. So weit so gut. Aber auch da tun sich schnell die Grenzen auf.

Was also tun, wenn man sich abseits von Chrome oder Safari bewegt, weil man z.B. einen Fehler nur auf dem nativen Browser auf Android feststellt.

weinre kann da helfen. weinre ist über npm schnell installiert.

npm install weinre -g

weinre --boundHost 192.168.x.x --readTimeout 60

Der Server startet standardmäßig auf Port 8080. Die Seite kann direkt aufgerufen werden und man findet Installationshilfen für das Skript.

Ich habe den Skripttag in mein Entwicklungssystem eingebunden und kann somit Sachen abgreifen.

Unter Access Points kann man dann den Debugger aufrufen. Wenn man Firebug oder die Chrome Developer Tools kennt, dann fühlt man sich da wohl.

Der HTML-Code wird abgegriffen, CSS-Selektoren können angezeigt werden und das ausgewählte DOM-Element wird auf dem Gerät markiert.