What I learned during the redesign

I have decided to update my website and turned it into a blog. All “portfolio” content is now presented as articles and is alternating with some tricks and tips mostly related to IT. This post is both the announcement of the new design and a collection of snippets I found while customizing WordPress and the theme.

  1. The sticky header is achieved by setting
    .imageBadge {
    	background-attachment:fixed;
    	min-height: 100px;
    }
    .textBadge {
    	position:fixed;
    }
    .mainContent {
    	z-index: 2;
    	position: relative;
    	background-color: #FFF;
    }
    
  2. The parallax effect for the header is done like this:
    /**
     * Creates a parallax effect for the header when scrolling
     */
    (
    function () {
    	var a = document.getElementById("masthead"),
    		e = $(window);
    	e.unbind("scroll").scroll(function () {
    		a.style.backgroundPosition =  "center "+ -(e.scrollTop()/ 9) + "px";
    	});
    }
    )();
    
  3. The sticky footer or “the curtain reveal effect” is done with
    .footerContainer {
      height:50px;
    }
    .footer {
      position:fixed;
      bottom:0px;
      padding: 10px 0px;
      z-index:0;
      width:100%;
    }
    

    A minimal demonstrator for points one to three can be found here: http://jsfiddle.net/PQS2C/3/

  4. Since there are so many syntax highlighters out there: I prefer the SyntaxHighlighter for WordPress. It does not screw up the indents, it has line numbering and visitors can easily copy the code.
  5. Protecting your WordPress login page (or other sensitive documents) by using .htaccess is a good idea because it reduces the load when your site is attacked and you have an additional protection against security vulnerabilities. But if you want a specific IP address to be excluded from the password query so you don’t have to enter the password every time, add the following to your .htaccess in the WordPress root folder:
    <Files wp-login.php>
      AuthUserFile <path to your .htpasswd>
      AuthName "Admin console"
      AuthType Basic
      require valid-user
      Order allow,deny
      allow from 12.34.567.89
      satisfy any
    </Files>
    # Guard some other sensitive files
    <FilesMatch "(\.htaccess|\.htpasswd|wp-config\.php|readme\.html)">
      order deny,allow
      deny from all
    </FilesMatch>
    

How to connect Google Glass to Windows

I recently got my hands on a Google Glass, the Android-based head-mounted display developed by Google. While connecting to it and installing apps works like a charm on my Linux system, it was quite a hassle to do the same with Windows.

I found a quite nice tutorial which I had to adapt to Windows 8: In a nutshell, we have to convince the Google usb driver that it fits to the Glass device and due to the editing we have to convince Windows 8, that it is okay for the driver’s signature to mismatch. Please proceed at your own responsibility.

  1. Connect the Google Glass to your PC and watch how the driver installation fails. If it does work: congratulations, you are done!
  2. Note the VID and the PID of your connected Glass. You can find them via Device Manager → Portable Devices → Glass 1 → Properties → Details → Hardware Ids.
  3. Open <sdk>\extras\google\usb_driver\android_winusb.inf
  4. Add the following lines using the VID and PID from step 2 to sections [Google.NTx86] and [Google.NTamd64]:
    ;Google Glass
    %SingleAdbInterface% = USB_Install, USB\VID_0000&PID_0000&REV_0216
    %CompositeAdbInterface% = USB_Install, USB\VID_0000&PID_0000&MI_01
    
    %SingleAdbInterface% = USB_Install, USB\VID_0000&PID_0000&REV_0216
    %CompositeAdbInterface% = USB_Install, USB\VID_0000&PID_0000&MI_01
    
  5. Go to the device manager and update the drivers.
  6. If you are not running Windows 8, you are done. If you are, the following error will occur: “The hash for the file is not present in the specified catalog file. The file is likely corrupt or the victim of tampering”. This is because we have altered the .INF-file and now the signature does not match anymore.
  7. Go back to the file android_winusb.inf and search for the lines
    CatalogFile.NTx86   = androidwinusb86.cat
    CatalogFile.NTamd64 = androidwinusba64.cat
    

    and comment them out:

    ;CatalogFile.NTx86   = androidwinusb86.cat
    ;CatalogFile.NTamd64 = androidwinusba64.cat
    
  8. Now, you will get a different error: “The third-party INF does not contain digital signature information”. Well, this security check is great but since we know what we are doing … : Do an “Advanced Startup” (just press the windows key and type it in, then go to Troubleshoot → Advanced options → Start up settings → Restart.
  9. Disable driver signature enforcement in the boot menu.
  10. Update your drivers again in the device manager and this time skip the driver signature enforcement.
  11. Google Glass should now be recognized correctly. Restart your computer if you want to re-enable the driver signature enforcement.

Force Facebook to show a specific image when linking to your site

With the time shift due to the end of daylight savings coming up soon I faced the same question I face everytime: Will I have more time in the morning or less? Since I’m definitely not the only one always struggling with this I came up with a silly website: kannicheinestundelängerschlafen.de which answers the question “Can I sleep one hour longer?” with a simple “Yes” or “No”.

When someone would post this link on Facebook I wanted to make sure that a meaningful image was assigned to it. But the website does not even contain an image, so what to do?

Just use the Open Graph API and tell Facebook, which image to use – and while we are at it also manipulate the title and description. Add the following lines to the head node in your HTML document:

<head>
	<meta property="og:description" content='This is the description' />
	<meta property="og:title" content='And this is the title' />
	<meta property="og:image" content='http://example.com/image.jpg' />
</head>

P.S.: As I noticed, Facebook still struggles with German umlauts in domain names. Sometimes it would show the url with umlauts and sometimes without. Even explicitly stating the information like

<meta property="og:url" content='http://www.kannicheinestundelängerschlafen.de' />

could not resolve this. I hope this will be fixed soon.

Passdraw

Passdraw is my first smartphone app on Google Play.

Passdraw is a special keyboard assisting you with entering your passwords – which is normally ridiculously annoying on smartphones. After you have done the setup just draw one of your secret paths whenever you need your password!
—————————————————–
+ No annoying switching between special characters and normal keyboard layout
+ Bystanders don’t get to see the original characters
+ This app does not know your password either
+ No extra permissions – your data stays with you!
+ No need for simple passwords
—————————————————–
More information under www.passdraw.com or directly on Google Play.

Update (December ’13): I am currently working on a complete redesign with an entirely new algorithm and a new user interface. So stay tuned!

Passdraw Screenshot 1 Passdraw Screenshot 3 Passdraw Screenshot 2

GRUB: Reboot to a specific OS

I have installed Linux parallel to Windows since I still need Windows for image and video editing. Because Linux is my main system, I’ve set the timeout of GRUB to one second so I don’t waste a lot of time but can still change the OS to boot if I am quick enough. But when I reboot from Linux to switch to Windows, I always miss this one second :-). So instead I run the following script, placed under /usr/local/bin:

#!/bin/bash
grub-reboot 2 #The entry's number to start
reboot

To make this work, you have to set the default entry to “saved”:

GRUB 1: In /boot/grub/menu.lst , set default to saved.

GRUB 2: In /etc/default/grub , set GRUB_DEFAULT=save

Bachelor thesis

I finished my Bachelor in Computer Science with my thesis “Real-time mobile image processing using heterogeneous cloud computing”. I wrote it in German (the German title is “Mobile Echtzeit-Bildverarbeitung durch heterogenes Cloud-Computing”) but I also included an English abstract:

Providing real-time image processing with computationally intensive components to low-level mobile devices is a problem not yet fully solved.
We show that offloading complex computations elsewise done on a smartphone to a cloud system can result in a higher processing speed.
The tradeoff between computational and network footprint is from particular importance since smartphones are often used in mobile networks. It is shown to be unsuitable to use the mobile device solely for image retrieval and offloading all further calculations (which is referred to as thin-client).
To hide the delay caused by the remote execution the development of a so-called latency-hiding component is discussed and its effectiveness verified.

I wrote my thesis in Prof. Stricker’s Augmented Vision group and was supervised by Nils Petersen.
Bachelor thesis, Figure 4.3

@mastersthesis{Hasper2012,
author = {Hasper, Philipp},
school = {TU Kaiserslautern},
title = {{Mobile Echtzeit-Bildverarbeitung durch heterogenes Cloud-Computing}},
type = {Bachelorthesis},
year = {2012}
}

My A Levels 2009

In spring 2009 I graduated from German high-school and of course I took my camera with me. I filmed the days of examination and the A level party and produced a movie. During the party I used the camera crane which resulted in really awesome pictures :-).

Something interesting about the background story of the film’s creation: Our first A level party was canceled due to a school shooting menace (which would later turn out as having been a hoax) and was replaced by a storming of the school by the police. According to a police officer the balloons of our decoration caused serious problems to the police special force – spontaneously bursting balloons were responsible for one or more adrenaline rushes and they had to destroy a serious number of them to access the teachers’ lounge.

Fortunately we were able to postpone the party and had it two days later, after the building was thoroughly checked. The student who had announced the shooting only because she wanted a day off, was identified.

Nicolas Rocker, Nicolas Pilia (filming) |
Philipp Hasper (filming, editing) |

N.T. – A commercial

I filmed the clip “N.T.” (N.T. is a phonetic wordplay for the German word for duck) in the context of the Ehre und Karriere contest 2008. 17 companies, among them Sony, Mini and Bacardi organized a competition for creative filmmakers, producing their own commercials. Visit ehreundkarriere.de for further information. With over 700 contestants participating, we reached the shortlist (Top 14) but unfortunately didn’t win a prize.
Our clip is based on my idea for the wheat brand “Snow Wheat” and was filmed with the Sony HC7E and my camera crane.

Patrick Herrle (cast) | Nicolas Rocker (assistant, set) |
Philipp Hasper (director, filming, editing) | Michael Donner (music) |
Snow Wheat (bread) | rye bread (stunt bread) |

Hobson 2008

Hobson 2008 is a program suite which simplifies the selection of classes for German A levels. It replaces the current paper-based system by a web interface for the pupils and a management application for the school’s administration. Pupils can submit their course selection online while the administration is able to process the data and export them to third-party programs such as lecture-planning software.

Every 10th grader is assigned an account with which they can authenticate in the web interface to update their personal information whenever necessary, and finally make their course choices according to the limitations set by the Ministry of Education (the standard limitations are those of Rhineland-Palatinate).

Hobson Screenshot 1 Hobson Screenshot 2 Hobson Screenshot 3
 

The project was created as part of a school project and was developed together with Oliver Klupp. Those interested in the software can get an idea by downloading the (German) manual.