Den Browser zum Notepad machen
Kommentare

Im Verlauf eines Arbeitstages macht man sich so einiges an Notizen. Diejenigen, die vor einem Rechner sitzen, nutzen die verschiedensten Programme dafür. Aber warum eigentlich? Denn wie Jose Jesus Perez Aguinaga in einem Post auf Coderwall beschreibt, lebt er quasi im Browser und will auf keinen Fall noch eine weitere Anwendung öffnen.

Eine simple und zugegebener Maßen etwas nerdige Lösung: Einfach folgende Zeile in die Adresszeile des Browsers eingeben und loslegen mit dem Tippen:

data:text/html, <html contenteditable> 

Das spätere Speichern der Notizen als HTML-Seite ist natürlich wenig praxistauglich. Aber wenn wirklich etwas festgehalten werden soll, kopiert man es eben in ein Programm, in dem „richtiges“ Speichern möglich ist.

Wie funktioniert das Ganze? Mithilfe des Data URI Formats wird dem Browser befohlen, eine einfache HTML-Seite anzulegen, die das HTML5 Attribut „contenteditable“ beinhaltet. Das sollte von allen modernen Browsern unterstützt werden.

Zugegeben: Das Browser-Notepad ist eher etwas für Nerds, aber ich persönlich find’s spitze!

Die Kommentatoren von Joses Post haben übrigens noch einige weitere Tweaks unter dem Beitrag hinzugefügt – reinschauen loht sich. Da wäre beispielsweise dieser etwas längere Code, der dafür sorgt, dass der geschriebene Text größer ist und sich die Hintergrundfarbe während des Schreibens in sanften Abstufungen von Weiß nach Rot verändert:

data:text/html, <html><head><link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><style type="text/css"> html { font-family: "Open Sans" } * { -webkit-transition: all linear 1s; }</style><script>window.onload=function(){var e=false;var t=0;setInterval(function(){if(!e){t=Math.round(Math.max(0,t-Math.max(t/3,1)))}var n=(255-t*2).toString(16);document.body.style.backgroundColor="#ff"+n+""+n},1e3);var n=null;document.onkeydown=function(){t=Math.min(128,t+2);e=true;clearTimeout(n);n=setTimeout(function(){e=false},1500)}}</script></head><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;"> 

Oder dieses Ruby Notepad Bookmarklet, mit dem man aus seinem Browserfenster einen Code Editor macht.

data:text/html,  <style type="text/css">#e{position:absolute;top:0;right:0;bottom:0;left:0;}</style><div id="e"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("e");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/ruby");</script>
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -