inicio mail me! sindicaci;ón

Archive for Allgemein

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:

<a href="target" data-hovertext="Hover Text">
  Normal Text
</a>
a[data-hovertext]:hover
  font-size: 0
  &:before
    font-size: initial
    content: attr(data-hovertext)

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?