أثناء قراءتي لخلاصات RSS الخاصة بي، صادفت مقالًا على موقع MuyComputer والذي بدوره قادني إلى منشور لخوسيه خيسوس بيريز أغويناغا، حيث يوضح لنا كيفية استخدام تنسيق Data URI الذي يسمح لنا، جنبًا إلى جنب مع قوة HTML5 وعنصر جديد يسمى " contenteditable "، بإنشاء صفحة HTML يمكننا استخدامها مثل المفكرة.
علينا فقط أن نضع في شريط العناوين:
data:text/html, <html contenteditable>
في منشور خوسيه خيسوس بيريز أغويناغا ، تظهر بعض الأمثلة الأخرى الجديرة بالاهتمام في التعليقات:
data:text/html, <textarea style="font-size: 1.5em; width: 100%; height: 100%; border: none; outline: none" autofocus />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;">data:text/html, <body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">data:text/html, <title>Text Editor</title><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">لقد جربته على متصفحي فايرفوكس وكروميوم ، ويعمل بشكل ممتاز. أعتقد أنه سيعمل على أي متصفح آخر يدعم HTML5.