<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Cheatsheet — Dev Runs</title>
<style>
:root{--bg:#0b0f14;--fg:#e8eff8;--muted:#a7b0bc;--accent:#4da3ff;--card:#111722;--border:#1f2a3a;}
*{box-sizing:border-box}
body{margin:0;display:flex;background:var(--bg);color:var(--fg);font:15px/1.45 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial}
a{color:var(--accent);text-decoration:none}
.sidebar{position:sticky;top:0;align-self:flex-start;height:100vh;overflow:auto;min-width:260px;border-right:1px solid var(--border);background:#0d131c;padding:18px}
.sidebar h1{font-size:18px;margin:0 0 12px}
.menu{display:grid;gap:6px}
.menu a{padding:8px 10px;border-radius:10px;background:transparent;border:1px solid transparent}
.menu a:hover{border-color:var(--border);background:#0f1621}
.content{padding:24px;max-width:980px;margin:0 auto;flex:1;display:grid;gap:28px}
section{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px}
section h2{margin:0 0 12px;font-size:18px}
.item{border:1px solid var(--border);border-radius:12px;margin:10px 0;background:#0f1621}
.item-header{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--border)}
.label{font-weight:600;color:var(--fg)}
.copy{cursor:pointer;border:1px solid var(--border);background:#0d131c;color:var(--fg);border-radius:8px;padding:6px 10px}
.copy:active{transform:scale(0.98)}
pre{margin:0;padding:12px;overflow:auto}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:13px;white-space:pre}
.topbar{position:sticky;top:0;background:linear-gradient(#0b0f14,#0b0f1400);padding:8px 0 6px;z-index:5}
.hint{color:var(--muted);font-size:13px;margin-left:6px}
@media(max-width:980px){.sidebar{display:none} .content{padding:14px}}
</style>
</head>
<body>
<aside class="sidebar">
<h1>⚡ Cheatsheet</h1>
<nav class="menu">
<a href="#ddev">DDEV</a>
<a href="#drush-drupal">Drush (Drupal)</a>
<a href="#docker">Docker</a>
<a href="#homebrew-macos">Homebrew (macOS)</a>
<a href="#nodejs--npm">Node.js / NPM</a>
<a href="#pnpm">PNPM</a>
<a href="#yarn">Yarn</a>
<a href="#python-venvpipuv">Python (venv/pip/uv)</a>
<a href="#php--composer">PHP / Composer</a>
<a href="#git-básico">Git (básico)</a>
<a href="#vs-code-cli">VS Code (CLI)</a>
<a href="#vite-web-dev">Vite (web dev)</a>
<a href="#laravel-php">Laravel (PHP)</a>
<a href="#postgresql-cli">PostgreSQL (CLI)</a>
<a href="#redis-cli">Redis (CLI)</a>
<a href="#misc-util">Misc (util)</a>
</nav>
</aside>
<main class="content">
<div class="topbar">
<strong>Bloquinhos com Copy/Paste</strong><span class="hint">Clique em “Copiar” e cole no terminal</span>
</div>
<section id="ddev">
<h2>DDEV</h2>
<div class="item">
<div class="item-header">
<div class="label">Subir containers</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>ddev start</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Reiniciar</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>ddev restart</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Parar</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>ddev stop</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Abrir no navegador</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>ddev launch</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Shell do projeto (web)</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>ddev ssh</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Listar projetos</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>ddev list</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Logs (web)</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>ddev logs</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Exec na web (ex.: composer install)</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>ddev exec composer install</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Poweroff (reset global)</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>ddev poweroff</code></pre>
</div>
</section>
<section id="drush-drupal">
<h2>Drush (Drupal)</h2>
<div class="item">
<div class="item-header">
<div class="label">Status</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>ddev exec drush status</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Login admin</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>ddev exec drush uli</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Cache:rebuild</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>ddev exec drush cr</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Atualizar DB</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>ddev exec drush updb -y</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Import config</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>ddev exec drush cim -y</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Export config</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>ddev exec drush cex -y</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Cron</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>ddev exec drush cron</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Instalar site (standard)</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>ddev exec drush site:install standard -y</code></pre>
</div>
</section>
<section id="docker">
<h2>Docker</h2>
<div class="item">
<div class="item-header">
<div class="label">Subir (detached)</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>docker compose up -d</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Parar</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>docker compose down</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Logs serviço (follow)</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>docker compose logs -f</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Listar containers</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>docker ps</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Entrar no container (sh)</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>docker exec -it <container> sh</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Build</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>docker build -t <nome>:latest .</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Prune total</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>docker system prune -af</code></pre>
</div>
</section>
<section id="homebrew-macos">
<h2>Homebrew (macOS)</h2>
<div class="item">
<div class="item-header">
<div class="label">Atualizar & upgrade</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>brew update && brew upgrade</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Instalar formula</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>brew install <formula></code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Instalar app (cask)</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>brew install --cask <app></code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Checar</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>brew doctor</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Limpar</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>brew cleanup -s</code></pre>
</div>
</section>
<section id="nodejs--npm">
<h2>Node.js / NPM</h2>
<div class="item">
<div class="item-header">
<div class="label">Init projeto</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>npm init -y</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Instalar dep</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>npm i <pkg></code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Dev</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>npm run dev</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Build</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>npm run build</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Start</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>npm start</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Listar scripts</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>npm run</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Atualizar deps (interativo)</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>npx npm-check -u</code></pre>
</div>
</section>
<section id="pnpm">
<h2>PNPM</h2>
<div class="item">
<div class="item-header">
<div class="label">Init</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>pnpm init</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Instalar dep</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>pnpm add <pkg></code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Dev</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>pnpm dev</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Build</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>pnpm build</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Start</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>pnpm start</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Atualizar deps</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>pnpm update -L</code></pre>
</div>
</section>
<section id="yarn">
<h2>Yarn</h2>
<div class="item">
<div class="item-header">
<div class="label">Init</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>yarn init -y</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Instalar dep</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>yarn add <pkg></code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Dev</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>yarn dev</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Build</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>yarn build</code></pre>
</div>
</section>
<section id="python-venvpipuv">
<h2>Python (venv/pip/uv)</h2>
<div class="item">
<div class="item-header">
<div class="label">Criar venv</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>python -m venv .venv</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Ativar venv (mac/linux)</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>source .venv/bin/activate</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Ativar venv (Windows)</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>.\.venv\Scripts\activate</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Instalar deps</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>pip install -r requirements.txt</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Freezar deps</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>pip freeze > requirements.txt</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Rodar script</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>python main.py</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Atualizar pip</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>python -m pip install --upgrade pip</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">(Rápido) uv</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>pip install uv
uv venv
source .venv/bin/activate
uv pip install -r requirements.txt</code></pre>
</div>
</section>
<section id="php--composer">
<h2>PHP / Composer</h2>
<div class="item">
<div class="item-header">
<div class="label">Versão</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>php -v</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Servidor embutido</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>php -S localhost:8000 -t public</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Composer install</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>composer install</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Composer update</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>composer update</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Adicionar pacote</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>composer require vendor/package</code></pre>
</div>
</section>
<section id="git-básico">
<h2>Git (básico)</h2>
<div class="item">
<div class="item-header">
<div class="label">Init + primeiro commit</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>git init
git add .
git commit -m "init"</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Branch nova</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>git checkout -b feat/x</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Pull</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>git pull</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Push</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>git push</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Stash</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>git stash
git stash pop</code></pre>
</div>
</section>
<section id="vs-code-cli">
<h2>VS Code (CLI)</h2>
<div class="item">
<div class="item-header">
<div class="label">Abrir pasta atual</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>code .</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Abrir arquivo</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>code <arquivo></code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Sem extensões</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>code --disable-extensions .</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Recarregar janela</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>code --force</code></pre>
</div>
</section>
<section id="vite-web-dev">
<h2>Vite (web dev)</h2>
<div class="item">
<div class="item-header">
<div class="label">Criar app</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>npm create vite@latest</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Dev</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>npm run dev</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Build</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>npm run build</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Preview</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>npm run preview</code></pre>
</div>
</section>
<section id="laravel-php">
<h2>Laravel (PHP)</h2>
<div class="item">
<div class="item-header">
<div class="label">Criar projeto</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>composer create-project laravel/laravel app</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Servidor</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>php artisan serve</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Migrações</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>php artisan migrate</code></pre>
</div>
</section>
<section id="postgresql-cli">
<h2>PostgreSQL (CLI)</h2>
<div class="item">
<div class="item-header">
<div class="label">Conectar</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>psql "postgres://user:pass@localhost:5432/db"</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Listar DBs</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>\l</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Listar tabelas</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>\dt</code></pre>
</div>
</section>
<section id="redis-cli">
<h2>Redis (CLI)</h2>
<div class="item">
<div class="item-header">
<div class="label">Abrir CLI</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>redis-cli</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Ping</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>redis-cli PING</code></pre>
</div>
</section>
<section id="misc-util">
<h2>Misc (util)</h2>
<div class="item">
<div class="item-header">
<div class="label">Gerar .env do exemplo</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>cp .env.example .env</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Buscar na árvore</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>grep -R "termo" .</code></pre>
</div>
<div class="item">
<div class="item-header">
<div class="label">Liberar porta 3000 (mac)</div>
<button class="copy" onclick="copyCode(this)">Copiar</button>
</div>
<pre><code>lsof -i :3000 | awk 'NR>1 {print $2}' | xargs kill -9</code></pre>
</div>
</section>
</main>
<script>
function copyCode(btn){
const pre = btn.parentElement.nextElementSibling;
const text = pre.innerText;
navigator.clipboard.writeText(text).then(()=>{
const old = btn.textContent;
btn.textContent = "Copiado ✓";
setTimeout(()=>btn.textContent=old, 1200);
});
}
</script>
</body>
</html>
