Herramientas & Workflow

| Extensión              | Qué hace                                                          | Imprescindible |
|--------------------------|----------------------------------------------------------------------|----------------|
| Prettier                 | Formatea tu código automáticamente al guardar                   | Si             |
| ESLint                   | Detecta errores y malas prácticas en JS/TS                      | Si             |
| Live Server              | Servidor local con reload automático                           | Si             |
| Auto Rename Tag          | Renombra la etiqueta de cierre al editar la de apertura              | Si             |
| HTML CSS Support         | Autocompletado de clases CSS en HTML                                 | Si             |
| Path Intellisense        | Autocompletado de rutas de archivos                                  | Si             |
| Error Lens               | Muestra errores inline directamente en el editor                    | No, pero genial|
| CSS Peek                 | Ctrl+click en una clase HTML para ir al CSS                          | No             |
| GitLens                  | Info de Git inline (quien cambió qué, cuándo)                   | No             |
| Thunder Client           | Cliente HTTP tipo Postman, dentro de VS Code                         | No             |
| Indent Rainbow           | Colorea la indentación para ver bloques visuales                | No             |
| Material Icon Theme      | Iconos bonitos para archivos y carpetas                              | No             |

{
    // Formatear al guardar (usa Prettier si está instalado)
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",

    // Tamaño de tabulación
    "editor.tabSize": 4,
    "editor.insertSpaces": true,

    // Eliminar espacios en blanco al final de cada línea al guardar
    "files.trimTrailingWhitespace": true,
    "files.insertFinalNewline": true,

    // Word wrap para no scrollear horizontalmente
    "editor.wordWrap": "on",

    // Minimap (el mapa lateral) - a gusto personal
    "editor.minimap.enabled": false,

    // Font y tamaño
    "editor.fontSize": 15,
    "editor.fontFamily": "'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace",
    "editor.fontLigatures": true,

    // Bracket pair colorization (colorea pares de llaves/parentesis)
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs": "active",

    // Mostrar errores y warnings inline
    "editor.inlineErrors.enabled": true,

    // Emmet expand abbreviation en archivos que no son HTML
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },

    // Excluir carpetas del file explorer para no polucionar
    "files.exclude": {
        "**/.git": true,
        "**/node_modules": true,
        "**/.DS_Store": true
    }
}

| Acción                           | Windows/Linux            | macOS                   |
|-----------------------------------|-------------------------|-------------------------|
| Command Palette                   | Ctrl+Shift+P            | Cmd+Shift+P             |
| Abrir archivo rápido              | Ctrl+P                  | Cmd+P                   |
| Búsqueda en archivos              | Ctrl+Shift+F            | Cmd+Shift+F             |
| Terminal integrada                 | Ctrl+`                  | Cmd+`                   |
| Split editor (lado a lado)        | Ctrl+\                  | Cmd+\                   |
| Mover línea arriba/abajo         | Alt+Up/Down             | Option+Up/Down          |
| Duplicar línea                    | Shift+Alt+Down          | Shift+Option+Down       |
| Seleccionar siguiente ocurrencia   | Ctrl+D                  | Cmd+D                   |
| Seleccionar todas las ocurrencias  | Ctrl+Shift+L            | Cmd+Shift+L             |
| Ir a definición                  | F12 / Ctrl+Click        | F12 / Cmd+Click         |
| Renombrar símbolo                 | F2                      | F2                      |
| Toggle comment                    | Ctrl+/                  | Cmd+/                   |
| Toggle block comment              | Shift+Alt+A             | Shift+Option+A          |
| Formatear documento               | Shift+Alt+F             | Shift+Option+F          |
| Multi-cursor (click en línea)    | Alt+Click               | Option+Click            |
| Cerrar pestaña                   | Ctrl+W                  | Cmd+W                   |

// En settings.json o .vscode/settings.json
{
    // Puerto personalizado (default es 5500)
    "liveServer.settings.port": 8080,

    // No abrir el navegador automáticamente
    "liveServer.settings.openBrowser": false,

    // Recargar solo CSS inyectándolo (sin recarga completa)
    "liveServer.settings.NoBrowser": false,

    // Ignorar archivos/carpetas para el watch
    "liveServer.settings.ignoreFiles": [
        ".vscode/**",
        "node_modules/**"
    ],

    // Usar HTTPS en lugar de HTTP
    "liveServer.settings.https": {
        "enable": false,
        "cert": "/ruta/a/cert.pem",
        "key": "/ruta/a/key.pem"
    }
}

| Feature                         | Cómo usarla                              |
|---------------------------------|---------------------------------------------|
| Inspeccionar elemento           | Click derecho → Inspeccionar (o Ctrl+Shift+C) |
| Editar HTML in-situ             | Doble click en el elemento en el árbol DOM   |
| Editar atributos                | Doble click en un atributo                   |
| Toggle clases                   | Icono .cls para agregar/quitar clases        |
| Editar estilos en vivo          | Panel Styles a la derecha                     |
| Forzar estados (:hover, etc)   | :hov para simular pseudo-classes             |
| Box Model visual                | Diagrama visual de margin/border/padding      |
| Computed styles                 | Ver el valor final computado de cada prop    |
| Layout / Grid                   | Inspeccionar grids y flexbox visualmente     |
| Copy element                    | Click derecho → Copy → Copy element  |
| Capture node screenshot         | Click derecho → Capture node screenshot |

// === Ejecutar en la consola del navegador ===

// Seleccionar y explorar elementos
const header = document.querySelector("header");
header.classList;           // ver clases
header.getBoundingClientRect(); // ver posición y tamaño

// Medir performance de una operación
console.time("render");
// ... operación que querés medir ...
console.timeEnd("render"); // "render: 12.345ms"

// Log con estilo (colores, fuente grande, etc)
console.log("%cWebForge", "font-size: 24px; color: #58a6ff; font-weight: bold");
console.log("%cError crítico!", "color: #ff6b6b; font-weight: bold");

// $0 y $$ : referenciar elementos seleccionados
// $0 = el elemento actualmente seleccionado en Elements
$0.style.color = "red";    // cambia el color del elemento seleccionado
$$("p");                   // querySelectorAll abreviado

// copy() : copiar al portapapeles
copy($0.outerHTML);        // copia el HTML del elemento seleccionado

// monitor() : log automático cuando una función es llamada
monitor(document.addEventListener);

// table() : mostrar arrays/objetos como tabla
table([{ nombre: "Ana", edad: 28 }, { nombre: "Carlos", edad: 32 }]);

{
    "semi": true,
    "singleQuote": true,
    "tabWidth": 4,
    "useTabs": false,
    "trailingComma": "es5",
    "printWidth": 100,
    "bracketSpacing": true,
    "arrowParens": "always",
    "htmlWhitespaceSensitivity": "css",
    "endOfLine": "lf"
}

!                               <!DOCTYPE html><html lang="en"><head>...</head><body></body></html>

div                             <div></div>
div#app                         <div id="app"></div>
div.card                        <div class="card"></div>
div.card.active                 <div class="card active"></div>

p>span                          <p><span></span></p>
ul>li*3                         <ul><li></li><li></li><li></li></ul>
nav>ul>li*5>a                   <nav><ul><li><a href=""></a></li>...x5</ul></nav>

div+article+aside               <div></div>  <article></article>  <aside></aside>

div.header+div.main+div.footer  3 divs hermanos con esas clases

div>p*2>span                    <div><p><span></span></p><p><span></span></p></div>

div>(header>h1)+section*2        div con header>h1 y 2 sections adentro


a{Click aquí}               <a href="">Click aquí</a>
button.btn{Enviar}[type=submit]  <button class="btn" type="submit">Enviar</button>
img[src="foto.jpg"][alt="paisaje"]  <img src="foto.jpg" alt="paisaje">


ul>li.item${Texto $}*3        <ul>
                                  <li class="item1">Texto 1</li>
                                  <li class="item2">Texto 2</li>
                                  <li class="item3">Texto 3</li>
                                </ul>


lorem                           Genera 30 palabras de texto placeholder
lorem5                          Genera 5 palabras
lorem*3                         Genera 3 párrafos

/* Escribe esto:     Se expande a esto: */

df               display: flex;
dfc              display: flex; align-items: center; justify-content: center;
fdc              display: flex; flex-direction: column;
dg               display: grid;
dib              display: inline-block;
dn               display: none;

p10              padding: 10px;
p20              padding: 20px;
pt10             padding-top: 10px;
px20             padding-left: 20px; padding-right: 20px;
py10             padding-top: 10px; padding-bottom: 10px;
m0               margin: 0;
ma               margin: auto;
mt10             margin-top: 10px;
mx-auto          margin-left: auto; margin-right: auto;

w100             width: 100px;
w100p            width: 100%;
h100vh           height: 100vh;
mw100            max-width: 100px;
mnh              min-height: 0;

bgc              background-color: #fff;
bg               background: #000;
bg-img           background-image: url();

c                color: #000;
c:red            color: red;
opa50            opacity: 0.5;

fs20             font-size: 20px;
fw700            font-weight: 700;
fsti             font-style: italic;
ttc              text-transform: capitalize;
tac              text-align: center;
tal              text-align: left;
tdn              text-decoration: none;

brad             border-radius: 5px;
brad50p          border-radius: 50%;
bd1              border: 1px solid #000;
bdn              border: none;

posr             position: relative;
posa             position: absolute;
posf             position: fixed;
poss             position: sticky;
t0               top: 0;
l0               left: 0;
r0               right: 0;
b0               bottom: 0;
zi10             z-index: 10;

ovh              overflow: hidden;
ovs              overflow: scroll;
ova              overflow: auto;

curp             cursor: pointer;
usn              user-select: none;
trf              transform: translateX(-50%);

!important       !important (se agrega al final de cualquier propiedad)
bdi+bdn          border: 1px solid #000; border: none; (valores fuzz)

| Herramienta       | Tipo        | Ventajas                                    | Ideal para          |
|-------------------|-------------|---------------------------------------------|---------------------|
| VS Code Git       | Integrada   | Ya la tenés, zero setup, diff visual        | 90% de los días     |
| GitHub Desktop    | App gratis  | Interfaz limpia, ideal para principiantes    | Open source, PRs     |
| GitLens (ext.)    | Extensión  | Blame inline, historial por línea           | Revisar cambios      |
| GitKraken         | App freemium| Grafo de branches visual, merge drag&drop   | Proyectos complejos  |
| Tower             | App de pago | Potente, well designed                      | Teams profesionales  |
| Terminal (CLI)    | Nativa      | Poder total, scripts, automático          | Todo                 |

La recomendación: usá VS Code Git como tu herramienta principal.
Agregá GitLens para ver quién cambió qué.
Y cuando necesites algo más visual (merge conflicts, rebase), GitHub Desktop.

/* === Estrategia 1: Fallback simple === */
/* El navegador usa la última que entiende */
.card {
    display: block;           /* fallback para navegadores viejos */
    display: flex;            /* navegadores modernos sobreescriben */
}

/* === Estrategia 2: @supports (feature query) === */
/* Aplica estilos solo si el navegador soporta la feature */
.container {
    display: block;
}

@supports (display: grid) {
    .container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}

@supports not (display: grid) {
    .container {
        display: flex;
        flex-wrap: wrap;
    }
    .container > * {
        flex: 1 1 300px;
        margin: 0.5rem;
    }
}

/* === Estrategia 3: Progressive enhancement con clamp() === */
/* Si clamp() no funciona, el navegador ignora la línea */
h1 {
    font-size: 16px;          /* fallback mínimo */
    font-size: clamp(1.5rem, 4vw, 3rem);  /* fluido en navegadores modernos */
}

/* === Estrategia 4: Prefijos vendor (hoy casi innecesarios) === */
.element {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

// === Detectar si una API existe antes de usarla ===

// IntersectionObserver (animaciones on-scroll)
if ("IntersectionObserver" in window) {
    // El navegador soporta IntersectionObserver
    const observer = new IntersectionObserver(callback);
    observer.observe(elemento);
} else {
    // Fallback: mostrar todo directamente sin animación
    elemento.classList.add("visible");
}

// localStorage
if (typeof localStorage !== "undefined") {
    localStorage.setItem("clave", "valor");
}

// fetch API
if (window.fetch) {
    fetch("/api/datos").then(r => r.json());
} else {
    // Fallback con XMLHttpRequest (muy raro hoy en día)
    const xhr = new XMLHttpRequest();
    xhr.open("GET", "/api/datos");
    xhr.onload = () => JSON.parse(xhr.responseText);
    xhr.send();
}

// Optional chaining (?.) - esto es de sintaxis, no se puede detectar
// con if. Para esto se usa Babel o se evita la sintaxis si
// necesitás soportar navegadores muy viejos.

// CSS.supports() - detectar soporte CSS desde JavaScript
if (CSS.supports("display", "grid")) {
    console.log("Este navegador soporta CSS Grid");
}

if (CSS.supports("color: oklch(0.7 0.15 200)")) {
    console.log("Este navegador soporta OKLCH colors");
}

| Plataforma      | Gratuito | Deploy auto | Custom domain | SSL | Build |
|-----------------|----------|-------------|---------------|-----|-------|
| GitHub Pages    | Si       | Si (push)   | Si            | Si  | No    |
| Netlify         | Si       | Si (push)   | Si            | Si  | Si    |
| Vercel          | Si       | Si (push)   | Si            | Si  | Si    |
| Cloudflare Pages| Si       | Si (push)   | Si            | Si  | Si    |
| GitLab Pages    | Si       | Si (push)   | Si            | Si  | Si    |
| Surge.sh        | Si       | CLI         | Si            | Si  | No    |

Para sitios estáticos puros (como WebForge), cualquier plataforma funciona.
GitHub Pages es el más simple si ya usás GitHub.
Netlify y Vercel agregan: redirects, headers custom, form handling, split testing.
Cloudflare Pages es el más rápido (CDN global de Cloudflare).

# === Flujo básico de trabajo con deploy automático ===

# 1. Hacés cambios en tu código local
# 2. Probás localmente con Live Server
# 3. Agregás los cambios a Git
git add .

# 4. Commiteás con un mensaje descriptivo
git commit -m "feat: agregar sección de herramientas y workflow"

# 5. Subís a GitHub
git push origin main

# 6. La plataforma detecta el push y hace deploy automático
#    Tu sitio se actualiza en 1-3 minutos

# === Ver el estado del deploy en GitHub Pages ===
# Ir a: Settings → Pages → ver el indicator "Your site is live"

# === Si usás Netlify CLI ===
# npm install -g netlify-cli
# netlify deploy --prod --dir=.

# === Si usás Vercel CLI ===
# npm install -g vercel
# vercel --prod

1. PLANIFICAR
   └─ Definir qué vas a construir (sección, componente, feature)
   └─ Revisar el PRD o la issue correspondiente
   └─ Pensar la estructura HTML antes de escribir código

2. DESARROLLAR
   └─ Abrir el proyecto en VS Code
   └─ Crear rama de trabajo: git checkout -b feat/nombre-seccion
   └─ Abrir Live Server para preview en tiempo real
   └─ Escribir HTML con Emmet (abreviaciones rápidas)
   └─ Estilar con CSS (variables, mobile-first)
   └─ Agregar interactividad con JavaScript
   └─ Prettier formatea al guardar automáticamente

3. PROBAR
   └─ Probar en el navegador con Live Server
   └─ Revisar responsivo: DevTools → Toggle device toolbar (Ctrl+Shift+M)
   └─ Verificar que no haya errores en la Console
   └─ Revisar Network para ver que todo cargue correctamente
   └─ Probar en Chrome y Firefox al menos

4. VERSIONAR
   └─ git add . (o archivos específicos)
   └─ git commit -m "feat: descripción del cambio"
   └─ git push origin feat/nombre-seccion

5. DEPLOYAR
   └─ Merge a main (via PR en GitHub o local)
   └─ Push a main → deploy automático
   └─ Verificar el sitio en producción
   └─ Revisar con Lighthouse (auditoría de performance/SEO)