Posteamelo

Los navegadores modernos cada vez demuestran más y más capacidades, y la última prueba de ello es un pequeño truco que permite convertir a cualquiera de ellos en un útil y versátil bloc de notas. El descubrimiento proviene de un post de José Jesús Pérez Aguinaga en Coderwall, una comunidad de desarrolladores, y consiste en hacer uso del formato Data URI para crear una simple página HTML que contiene el nuevo elemento HTML5 llamado ‘contenteditable‘. Así, si escribimos lo siguiente en el campo de direcciones de nuestro navegador: data:text/html, Otros Ejemplos: data:text/html,

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;"> Podremos comenzar a escribir dentro de la ventana del navegador como si este fuera un singular bloc de notas.</div></article><div class="flex flex-col gap-3 my-10"><div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 flex-wrap bg-[#fff9eb] border border-[#f5e6c4] px-4 py-3 rounded text-[11px] font-medium text-[#856404]"><div class="flex flex-wrap items-center gap-x-6 gap-y-2"><div class="flex items-center gap-1.5 shrink-0 opacity-80 uppercase tracking-wide"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock w-3.5 h-3.5" aria-hidden="true"><path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle></svg><span>Datos archivados del Taringa! original</span></div><div class="flex flex-wrap items-center gap-x-8 gap-y-2"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star w-3.5 h-3.5 fill-[#856404] opacity-40 shrink-0" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><span class="text-gray-900 font-extrabold tabular-nums text-xs">35</span><span class="opacity-70 lowercase">puntos</span></div><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye w-3.5 h-3.5 shrink-0 opacity-40" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path><circle cx="12" cy="12" r="3"></circle></svg><span class="text-gray-900 font-extrabold tabular-nums text-xs">805</span><span class="opacity-70 lowercase">visitas</span></div><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-square w-3.5 h-3.5 shrink-0 opacity-40" aria-hidden="true"><path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"></path></svg><span class="text-gray-900 font-extrabold tabular-nums text-xs">0</span><span class="opacity-70 lowercase">comentarios</span></div></div></div></div><div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 flex-wrap bg-[#f0fff4] border border-[#c6f6d5] px-4 py-3 rounded text-[11px] font-medium text-[#2f855a]"><div class="flex flex-wrap items-center gap-x-6 gap-y-2"><div class="flex items-center gap-1.5 shrink-0 opacity-80 uppercase tracking-wide"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star w-3.5 h-3.5" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><span>Actividad nueva en Posteamelo</span></div><div class="flex flex-wrap items-center gap-x-8 gap-y-2"><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star w-3.5 h-3.5 fill-[#2f855a] opacity-40 shrink-0" aria-hidden="true"><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"></path></svg><span class="text-gray-900 font-extrabold tabular-nums text-xs">0</span><span class="opacity-70 lowercase">puntos</span></div><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye w-3.5 h-3.5 shrink-0 opacity-40" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path><circle cx="12" cy="12" r="3"></circle></svg><span class="text-gray-900 font-extrabold tabular-nums text-xs">2</span><span class="opacity-70 lowercase">visitas</span></div><div class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-square w-3.5 h-3.5 shrink-0 opacity-40" aria-hidden="true"><path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"></path></svg><span class="text-gray-900 font-extrabold tabular-nums text-xs">0</span><span class="opacity-70 lowercase">comentarios</span></div></div></div><div class="flex flex-wrap items-center gap-3"><span class="text-[10px] text-[#2f855a] font-bold uppercase tracking-tight mr-1">Dar puntos:</span><button class="px-1.5 py-0.5 rounded text-[10px] font-extrabold transition-colors hover:bg-[#2f855a] hover:text-white">+1</button><button class="px-1.5 py-0.5 rounded text-[10px] font-extrabold transition-colors hover:bg-[#2f855a] hover:text-white">+2</button><button class="px-1.5 py-0.5 rounded text-[10px] font-extrabold transition-colors hover:bg-[#2f855a] hover:text-white">+3</button><button class="px-1.5 py-0.5 rounded text-[10px] font-extrabold transition-colors hover:bg-[#2f855a] hover:text-white">+5</button><button class="px-1.5 py-0.5 rounded text-[10px] font-extrabold transition-colors hover:bg-[#2f855a] hover:text-white">+10</button></div></div></div></div><div class="bg-white rounded-lg shadow-sm border border-gray-100 p-6"><div class="h-4 w-36 bg-gray-100 rounded mb-6 animate-pulse"></div><div class="flex flex-col gap-4"><div class="flex items-center justify-between"><div class="space-y-2 flex-1"><div class="h-3 w-3/4 bg-gray-100 rounded animate-pulse"></div><div class="h-2 w-24 bg-gray-100 rounded animate-pulse"></div></div><div class="h-3 w-10 bg-gray-100 rounded animate-pulse"></div></div><div class="flex items-center justify-between"><div class="space-y-2 flex-1"><div class="h-3 w-3/4 bg-gray-100 rounded animate-pulse"></div><div class="h-2 w-24 bg-gray-100 rounded animate-pulse"></div></div><div class="h-3 w-10 bg-gray-100 rounded animate-pulse"></div></div><div class="flex items-center justify-between"><div class="space-y-2 flex-1"><div class="h-3 w-3/4 bg-gray-100 rounded animate-pulse"></div><div class="h-2 w-24 bg-gray-100 rounded animate-pulse"></div></div><div class="h-3 w-10 bg-gray-100 rounded animate-pulse"></div></div><div class="flex items-center justify-between"><div class="space-y-2 flex-1"><div class="h-3 w-3/4 bg-gray-100 rounded animate-pulse"></div><div class="h-2 w-24 bg-gray-100 rounded animate-pulse"></div></div><div class="h-3 w-10 bg-gray-100 rounded animate-pulse"></div></div></div></div><div class="bg-white rounded-lg shadow-sm border border-gray-100 p-6 mt-10"><h3 class="text-sm font-bold text-gray-800 uppercase tracking-tight mb-6">Dejá tu comentario</h3><form><div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"><div class="flex flex-col gap-2"><label data-slot="label" class="flex items-center gap-2 select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 text-[11px] font-bold text-gray-400 uppercase tracking-wide" for="name">Nombre</label><input data-slot="input" class="file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive h-10 bg-gray-50/50 border-gray-100 focus:ring-[#6b4255]/20 focus:border-[#6b4255]/40" id="name" placeholder="Tu nombre" value=""/></div><div class="flex flex-col gap-2"><label data-slot="label" class="flex items-center gap-2 select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 text-[11px] font-bold text-gray-400 uppercase tracking-wide" for="country">País</label><select id="country" class="flex h-10 w-full items-center justify-between rounded-md border border-gray-100 bg-gray-50/50 px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-[#6b4255]/20 focus:border-[#6b4255]/40 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1"><option value="1">Otro</option><option value="2">Argentina</option><option value="3">México</option><option value="4" selected="">Chile</option><option value="5">Colombia</option><option value="6">España</option><option value="7">Venezuela</option><option value="8">Uruguay</option><option value="9">Perú</option><option value="10">Ecuador</option></select></div></div><div class="flex flex-col gap-2 mb-6"><label data-slot="label" class="flex items-center gap-2 select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 text-[11px] font-bold text-gray-400 uppercase tracking-wide" for="comment">Comentario <span class="normal-case font-normal text-gray-400 lowercase ml-1">(usa **negrita** y *cursiva*)</span></label><textarea id="comment" rows="5" placeholder="Escribí tu comentario..." maxLength="2000" class="flex min-h-[120px] w-full rounded-md border border-gray-100 bg-gray-50/50 px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-[#6b4255]/20 focus:border-[#6b4255]/40 disabled:cursor-not-allowed disabled:opacity-50">

0/2000

Usando el navegador web como un Bloc de Notas online

Autor del Post