#128 – Como ter um pacote office inteiro dentro do seu Google Chrome

E não estamos falando de Microsoft Office ou Apple...

Feb 3, 2021

🕑 Tempo de leitura: 2 min

Na edição de ontem, demos a dica de como transformar uma aba do seu Chrome em um bloco de anotações rápidas. Mencionamos também a possibilidade de personalizar o tamanho de fonte e margens, para melhorar a leitura.

Mas teve gente que não se contentou com isso e decidiu criar um pacote office inteiro usando esse truque – com direito a planilha, slides, editor de texto, editor de código e até um quadro de desenho.

Chamado de Awfice, a “menor suite office do mundo” segue o mesmo funcionamento do bloco de notas instantâneo:

Abra o Chrome
Cole o código na barra de endereços
Pressione Enter
SHAZAAAAM! 🎩✨
(e para facilitar a sua vida, salve o “link” nos favoritos 😉)

Conheça os “aplicativos” da Awfice e o que eles são capazes de fazer:

Editor de Texto

Sem muito segredo, funciona como o bloco de notas.

data:text/html,<body contenteditable style=line-height:1.5;font-size:20px>

Planilha

Contém 100 linhas e 26 colunas fixas (A-Z)
Utilize “=” para iniciar uma fórmula

São suportadas as operações básicas (soma, substração, divisão e multiplicação) –Ex. =(A10+A11)/A12

data:text/html,<table id=t><script>z=Object.defineProperty,p=parseFloat;for(I=[],D={},C={},q=_=>I.forEach(e=>{try{e.value=D[e.id]}catch(e){}}),i=0;i<101;i++)for(r=t.insertRow(-1),j=0;j<27;j++)c=String.fromCharCode(65+j-1),d=r.insertCell(-1),d.innerHTML=i?j?"":i:c,i*j&&I.push(d.appendChild((f=>(f.id=c+i,f.onfocus=e=>f.value=C[f.id]||"",f.onblur=e=>{C[f.id]=f.value,q()},get=_=>{v=C[f.id]||"";if("="!=v.charAt(0))return isNaN(p(v))?v:p(v);with(D)return eval(v.slice(1))},a={get},z(D,f.id,a),z(D,f.id.toLowerCase(),a),f))(document.createElement`input`)))</script><style>#t{border-collapse:collapse}td{border:1px solid gray;text-align:right}input{border:none;width:4rem;text-align:center}</style>

Quadro de Desenho

Uma ferramenta para desenhar usando o mouse; simples assim 🤷‍♀️

data:text/html,<canvas id=v><script>d=document,d.body.style.margin=0,P="onpointer",c=v.getContext`2d`,v.width=innerWidth,v.height=innerHeight,c.lineWidth=2,f=0,d[P+"down"]=e=>{f=e.pointerId+1;e.preventDefault();c.beginPath();c.moveTo(e.x,e.y)};d[P+"move"]=e=>{f==e.pointerId+1&&c.lineTo(e.x,e.y);c.stroke()},d[P+"up"]=_=>f=0</script></canvas>

Slides de Apresentação

São 50 slides em branco para você criar usando texto
Ctrl (ou Command) +Alt+1: Cabeçalho
Ctrl+Alt+2: Texto normal
Ctrl+Alt+3: Alinhar à esquerda
Ctrl+Alt+4: Alinhar ao centro
Ctrl+Alt+5: Alinhar à direita
Ctrl+Alt+6: Recuar
Ctrl+Alt+7: Indentar

Ctrl+Alt+8: Lista

data:text/html,<body><script>d=document;for(i=0;i<50;i++)d.body.innerHTML+='<div style="position:relative;width:90%;padding-top:60%;margin:5%;border:1px solid silver;page-break-after:always"><div contenteditable style=outline:none;position:absolute;right:10%;bottom:10%;left:10%;top:10%;font-size:5vmin>';d.querySelectorAll("div>div").forEach(e=>e.onkeydown=e=>{n=e.ctrlKey&&e.altKey&&e.keyCode-49,f="formatBlock",j="justify",x=[f,f,j+"Left",j+"Center",j+"Right","outdent","indent","insertUnorderedList"][n],y=["<h1>","<div>"][n],x&&d.execCommand(x,!1,y)})</script><style>@page{size:6in 8in landscape}@media print{*{border:0 !important}}

Editor de Código

Editor simples para brincar em HTML, CSS e Javascript

data:text/html,<body oninput="i.srcdoc=h.value+'<style>'+c.value+'</style><script>'+j.value+'</script>'"><style>textarea,iframe{width:100%;height:50%;}body{margin:0;}textarea{width: 33.33%;font-size:18px;padding:0.5em}</style><textarea placeholder="HTML" id="h"></textarea><textarea placeholder="CSS" id="c"></textarea><textarea placeholder="JS" id="j"></textarea><iframe id="i"></iframe><script>document.querySelectorAll("textarea").forEach((t)=>t.addEventListener("keydown",function(t){var e,s;"Tab"==t.key&&(t.preventDefault(),e=this.selectionStart,s=this.selectionEnd,this.value=this.value.substring(0,e)+"  "+this.value.substring(s),this.selectionStart=this.selectionEnd=e+1)}))</script></body>

Vale repetir o lembrete: não há qualquer tipo de salvamento das informações. Então, fechou a aba, já era, ok?

Essa dica sensacional (e divertida!) foi gentilmente compartilhada pelo Lucas Eduardo. Valeu demais, Lucas! 🙌

Amanhã tem mais ✌️

Você também vai gostar…

😃 A atalho.xyz tem sido útil para você? Compartilhe-a e ajude a comunidade a crescer.

atalho.xyz