HTML5 Erneuerungen für Input Felder

HTML5 bietet einige praktische Erneuerungen, wie zum Beispiel autofocus="autofocus" um einem Login Feld nach dem Laden den Focus zu geben.


Weitere nützliche Features wie required oder pattern findet man bei homepage-total.de.

Flußdiagramme Online erstellen

Ist immer wieder praktisch, wenn man keine Software installieren muss. Darum hier ein Open Source Online Editor für Flußdiagramme, Schaltpläne, Mockups und ähnliches:

http://www.diagram.ly/

Lustig, die Hilfe Seite sieht aus wie Stackoverflow.

Javascript Weiterleitung und Privacy Preferences

Stackoverflow Entdeckungen des Tages:

• Javascript redirect: window.location.replace
• P3P: Platform for Privacy Preferences

Netbeans Plugins und Einstellungen

Eine kleine Sammlung von Netbeans Plugins und Einstellungen die ich benutzte.

Plugins

• Deutsche Sprachprüfung
• Dateien mit anderem Encoding öffnen (Plugin im Attachment)

Einstellungen: Tools > Options

• Tabs anstelle von Leerzeichen: Editor > Formatting: Number of Spaces per Indent = Tab Size = 4 und kein Harken bei "Expand Tabs to Spaces"
• PHP Klammern in neuer Zeile: Editor > Formatting > Language: PHP > Category: Braces > Alle auf "New Line" und in Category: Alignment > Bei "else, elseif", "catch"
• UTF-8 als default: Im Netbeans ordner in /etc/netbeans.conf: -J-Dfile.encoding=UTF-8

Strings kürzen mit CSS

Man kann Strings kürzen und "..." anhängen auch automatisch mit CSS:

.ellipsis {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 -o-text-overflow: ellipsis;
 -moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}

Geht im alten Firefox zwar nicht, aber der ist nicht mehr so verbreitet.

Quelle: http://mattsnider.com/css/css-string-truncation-with-ellipsis/

Encode and decode Dreamweaver password in PHP

If you want to generate a Dreamweaver site file (.ste) so you can import it, you need to encode the password for Dreamweaver. You can learn from Andrew Odri that the encryption is very bad. He wrote encode and decode functions for this in Javascript. Doing the same in PHP is way easier. Of course you can use this page to decode your side export. But they do not explain how it works:

function encodePassword($input)
{
  $output = '';
  
  for($i = 0; $i < strlen($input); $i++)
  {
    $output .= dechex(ord($input[$i]) + $i);
  }

  return strtoupper($output);
}


function decodePassword($input)
{
  $output = '';
  
  for($i = 0; $i < strlen($input); $i += 2)
  {
    $output .= chr(hexdec($input[$i].$input[$i+1]) - $i/2);
  }

  return ($output);
}

CSS position: relative vs absolute

Mit position: absolute, liegt die Div Box manchmal im nirgendwo. Mit position: relative bleibt jedoch der Platz für die Box reserviert auch wenn man sie verschiebt. Das löst man einfach in dem man mit margin-bottom: -10px die Box weg macht. Das klappt gut.


Noch bessere ist es richtig zu lernen mit div Boxen umzugehen. Dieses kurze und doch nette Tutorial zeigt, dass die absolute Box nicht mehr abhaut, wenn man sie in ein relatives Div legt.