inicio mail me! sindicaci;ón

Archive for Allgemein

Zero-config Rails und PHP mit puma-dev

Mit puma-dev lassen sich beliebig viele Rack/Rails-Anwendungen durch Erstellen von Symlinks verfügbar machen.
Allerdings ist damit Port 80 blockiert und steht nicht mehr für Apache zur Verfügung.

Zum Glück erlaubt puma-dev nicht nur das Erstellen von Symlinks auf Rack-Apps sondern auch das Erstellen von Files innerhalb von ~/.puma-dev/, die als Inhalt einen alternativen Port enthalten.
Damit kann man alle Applikationen, die statt von puma-dev von Apache behandelt werden sollen, z.B. PHP-Apps und statische Seiten, als Files anlegen, die nur 81 enthalten.
Außerdem muss man Apache auf Port 81 lauschen lassen.

Die erforderlichen Schritte sind:

Apache-Konfiguration /etc/apache2/httpd.conf

Apache soll zukünftig auf Port 80 lauschen:

Listen 81

Die Module für virtuelle Hosts, Rewrite und PHP sollen verwendet werden:

LoadModule vhost_alias_module libexec/apache2/mod_vhost_alias.so
LoadModule rewrite_module libexec/apache2/mod_rewrite.so
LoadModule php7_module libexec/apache2/libphp7.so
Include /private/etc/apache2/extra/httpd-vhosts.conf

Virtual Hosts Konfiguration /etc/apache2/extra/httpd-vhosts.conf

<VirtualHost 127.0.0.1:81>
  ServerName any.dev
  ServerAlias *.dev
  UseCanonicalName Off
  VirtualDocumentRoot "/Users/{username}/Sites/%1"
  <Directory "/Users/{username}/Sites/*">
    Options Indexes FollowSymLinks
    AllowOverride All
    Order allow,deny
    Allow from all
    Require all granted
  </Directory>
</VirtualHost>

Angenommen die gewünschte PHP-Applikation liegt im Verzeichnis /Users/{username}/Sites/meine-app/.
Erstellt man eine Datei ~/.puma-dev/meine-app mit dem Inhalt 81, dann wird diese unter http://meine-app.test durch Apache verfügbar gemacht.

Happy hacking!

HTML5 input validation with custom message

HTML5 provides us with ways to specify different types of input, complete with client side validation. Inputs can be marked as required and it is even possible to specify regexp patterns for valid input.

Let’s put this into action by creating an input for german zip codes, consisting of 5 numbers:

As you can see, this works, but the actual validation message you get when entering a wrong code is a bit generic (In german: “Ihre Eingabe muss mit dem geforderten Format übereinstimmen.”). Instead, you would want the message to state what a correct zip code has to look like.

Fortunately there is a way to specify the message to be displayed via the javascript setCustomValidity method (unfortunately there is no way to do this via another attribute, say pattern-invalidmessage).

Now, when using the setCustomValidity method there is a conceptual problem. Setting this on an input field, automatically renders this field invalid, no matter whether it is otherwise perfectly fine!

So for our case, we want to set this message only after the browser has decided, that the field does not match the pattern, kind of as a second error on the field. The message should be specified in another attribute called data-invalidmessage.
The following CoffeeScript does just that:

The final working example:

Use CSS to change link content on hover

Using just a data-attribute and a simple stylesheet rule it is possible to change the content of a link when hovering over it.
Use an HTML / SASS combination like the following:

See this in action.

Connecting to redis via SSH tunneling

SSH tunneling is, of course, useful for a ton of services, but I happened to stumble upon it, when I wanted to connect to a remote redis server.

If you have a redis server running on [remotehost], you can easily connect
to it (given you have ssh access to it, of course) via:

ssh -L 9999:localhost:6379 [remoteuser]@[remotehost]

This will open a tunnel from the remote port 6379 (redis standard) to your local port 9999.

You can now use the redis on your local port 9999 like you would if it was running locally. Nice.

MomoFlow

Coverflow has become a de facto visualization standard for the presentation of collections of images, be it covers or portraits.
There are a number of implementations for usage on web pages (e.g. this one) but the usable ones require Adobes Flash and thus won’t run on the iPhone.

When looking for HTML5 canvas based implementations I found this promising implementation based on the YUI library.
Though workig, it has three major drawbacks: It is rather overengineered and difficult to tweak, it uses YUI (whereas I prefer the more lightweight jQuery) and it performs poorly with image sizes bigger than thumbnails.

After trying to change the code for a while I decided to do a reimplementation in jQuery. The result can be seen on the MomoFlow demo page. Here are two screenshots:

CoverFlow using canvas and jQuery

CoverFlow using canvas and jQuery

Quicklook mode

Quicklook mode

The used 3D transformation is superbly described on the YUI blog .

My implementation caches the rendered canvases per rendering angle. Further speed increments are made possible by adjusting the mesh width used for the slicing transformation depending on the achieved framerate.

The result performs beautifully in recent Safari, Chrome and Opera, decently on Firefox. It also works flawlessly on the iPhone. Keyboard control is coming soon.

I do still need help on IE, maybe the image composition is too demanding for ExplorerCanvas? 
The code is available on github: http://github.com/momolog/momoflow.
Comments and improvements are very much welcome!

MySQL BEFORE INSERT trigger as check constraint

Since MySQL does neither have real check constraints nor a way to raise an exception in a stored procedure, we found it not instantly obvious, how we could *reject* a certain row on insert, based on a certain condition.

A nice way we found was to set the value in question to NULL, based on the condition and let the NOT NULL constraint do its work.

ALTER TABLE sessions MODIFY session_id varchar(255) NOT NULL;
DROP TRIGGER IF EXISTS check_sessionid;
DELIMITER $$
CREATE TRIGGER check_sessionid BEFORE INSERT ON sessions  
FOR EACH ROW BEGIN
  IF NOT NEW.session_id REGEXP '^[[:xdigit:]]{32}$' THEN
    SET NEW.session_id = NULL;
  END IF;
END;
$$
DELIMITER ;

The trigger will let any 32 character string with only HEX characters for the column session_id pass and rejects the rest.

> INSERT INTO sessions (session_id) VALUES ('ffffffffffffffffffffffffffffffff');
Query OK, 1 row affected (0.01 sec)
> INSERT INTO sessions (session_id) VALUES ('fffffffffffffffffffffffffffffffg');
ERROR 1048 (23000): Column 'session_id' cannot be null

Happy triggering.

Vor kurzem dazugelernt:

Suche nach Wort unter dem Cursor in vim: #.

jssh ist eine JavaScript Shell, die den Firefox per Port 9997 fernsteuerbar macht.
Download z.B. hier.

y erzeugt einen YAML dump auf der Rails console, mehr dazu hier.

=3D ist ein escaptes “=” in quoted_printable.

sudo /usr/libexec/locate.updatedb aktualisiert unter MacOSX sofort die locate Datenbank.

rake db:migrate:redo führt unter rails die letzte Migration rückwärts und sofort wieder vorwärts aus, so dass sich die Vorwärts-Action korrigieren läßt

ack -Q bringt ack dazu, literal, also ohne RegExp zu suchen.

Du bist Terrorist.

Kampagne gegen Terroristen in Deutschland. Sehr schön.

Which programming language am I?

You are Visual Basic. You have little respect for common sense.  You are immature, but have recently begun to grow up.
Which Programming Language are You?