Saltar a contenido

DevDocs Cheat Sheet

"Clase de la hoja" id="copy-btn" class="copy-btn" onclick="copyAllCommands()" Copiar todos los comandos id="pdf-btn" class="pdf-btn" onclick="generatePDF()" Generar PDF seleccionado/button ■/div titulada

Sinopsis

DevDocs es un navegador de documentación de API rápido y sin conexión que combina múltiples referencias de desarrollador en una única interfaz de búsqueda. Proporciona acceso instantáneo a la documentación para cientos de lenguajes de programación, marcos y herramientas con poderosas capacidades de búsqueda y funcionalidad offline.

NOVEDAD Nota: Libre de usar en devdocs.io. Fuente abierta y autoanfitriona.

Comienzo

Interfaz web

# Access DevDocs:
# Visit: https://devdocs.io
# No account required
# Works in any modern browser
# Responsive design for mobile/tablet

# First-time setup:
# 1. Browse available documentation
# 2. Enable desired documentation sets
# 3. Configure preferences
# 4. Start searching and browsing

Usage Offline

# Enable offline access:
# 1. Click "Offline" in the sidebar
# 2. Select documentation to download
# 3. Wait for download completion
# 4. Access without internet connection

# Offline features:
# - Full documentation content
# - Search functionality
# - Bookmarks and history
# - Custom settings
# - Automatic updates when online

Aplicaciones de escritorio

# Unofficial desktop applications:
# - DevDocs Desktop (Electron-based)
# - Zeal (Windows/Linux)
# - Dash (macOS)
# - Velocity (Windows)

# Installation:
# Download from respective websites
# Import DevDocs documentation
# Configure shortcuts and preferences

Interfaz principal

# Interface components:
# - Sidebar: Documentation list and search
# - Main content: Documentation pages
# - Search bar: Global search across all docs
# - Settings: Preferences and configuration
# - Offline indicator: Download status

# Sidebar sections:
# - Enabled docs: Active documentation sets
# - Disabled docs: Available but not enabled
# - Search results: When searching
# - Table of contents: Current page structure

Gestión de documentación

# Enable documentation:
# 1. Click on documentation name
# 2. Toggle switch to enable
# 3. Documentation loads automatically
# 4. Appears in enabled list

# Disable documentation:
# 1. Find in enabled list
# 2. Click settings icon
# 3. Toggle off or remove
# 4. Frees up storage space

# Popular documentation sets:
# - JavaScript, Python, Java, C++
# - React, Vue, Angular, Node.js
# - HTML, CSS, Bootstrap
# - Git, Docker, Kubernetes
# - AWS, Google Cloud, Azure

Función de búsqueda

Búsqueda básica

# Search methods:
# - Type in search bar
# - Use keyboard shortcut (/)
# - Click on search suggestions
# - Browse by category

# Search scope:
# - All enabled documentation
# - Current documentation only
# - Specific documentation set
# - Page content and titles

Búsqueda avanzada

# Search operators:
javascript array          # Search in JavaScript docs
css @media                # Search for @media in CSS
python def                # Search for function definitions
react hooks               # Search React hooks

# Search filters:
# - By documentation type
# - By content category
# - By API method type
# - By language feature

Consejos de búsqueda

# Effective searching:
# - Use specific terms
# - Include context keywords
# - Try multiple variations
# - Use abbreviations
# - Search by method/function names

# Quick access:
# - Recent searches saved
# - Autocomplete suggestions
# - Keyboard navigation
# - Direct URL access

Atajos de teclado

Atajos de navegación

# Global shortcuts:
/                         # Focus search
Escape                    # Clear search/close
Ctrl/Cmd + /              # Toggle sidebar
Alt + R                   # Go to homepage
Alt + Left/Right          # Navigate history

# Search shortcuts:
Tab                       # Navigate suggestions
Enter                     # Open selected result
Ctrl/Cmd + Enter          # Open in new tab
Up/Down arrows            # Navigate results

Página

# Content navigation:
J/K                       # Next/previous section
G G                       # Go to top
G Shift+G                 # Go to bottom
Ctrl/Cmd + F              # Find in page
N/Shift+N                 # Next/previous search result

# Sidebar navigation:
Alt + S                   # Focus sidebar
Alt + C                   # Toggle table of contents
Alt + T                   # Focus documentation list

Marcas e Historia

# Bookmark shortcuts:
Ctrl/Cmd + D              # Bookmark current page
Ctrl/Cmd + Shift + D      # Manage bookmarks
Alt + B                   # Toggle bookmarks

# History shortcuts:
Alt + H                   # Show history
Ctrl/Cmd + H              # Clear history
Ctrl/Cmd + Shift + H      # History search

Personalización y configuración

Ajustes de la apariencia

# Theme options:
# - Light theme (default)
# - Dark theme
# - Auto (system preference)
# - Custom CSS support

# Layout options:
# - Sidebar width adjustment
# - Font size scaling
# - Line height adjustment
# - Content width limits

Configuración de búsqueda

# Search settings:
# - Search suggestions count
# - Fuzzy search tolerance
# - Search result grouping
# - Auto-complete behavior
# - Search history length

# Performance settings:
# - Search debounce delay
# - Result rendering limit
# - Memory usage optimization
# - Cache management

Personalización del teclado

# Shortcut customization:
# - Modify existing shortcuts
# - Add custom key bindings
# - Disable unwanted shortcuts
# - Export/import configurations
# - Reset to defaults

# Accessibility options:
# - High contrast mode
# - Keyboard-only navigation
# - Screen reader support
# - Focus indicators
# - Skip links

Idiomas de programación

# Core languages:
# - JavaScript (ES6+, Node.js)
# - Python (3.x, 2.7)
# - Java (8, 11, 17)
# - C++ (14, 17, 20)
# - C# (.NET Core, Framework)
# - Go (latest)
# - Rust (stable)
# - PHP (7.x, 8.x)

# Scripting languages:
# - Bash
# - PowerShell
# - Ruby
# - Perl
# - Lua

Web Technologies

# Frontend frameworks:
# - React (latest)
# - Vue.js (2.x, 3.x)
# - Angular (latest)
# - Svelte
# - Ember.js

# CSS frameworks:
# - Bootstrap (4.x, 5.x)
# - Tailwind CSS
# - Bulma
# - Foundation
# - Materialize

# Build tools:
# - Webpack
# - Vite
# - Parcel
# - Rollup
# - Gulp

Backend y bases de datos

# Backend frameworks:
# - Express.js
# - Django
# - Flask
# - Spring Boot
# - Ruby on Rails
# - Laravel

# Databases:
# - MongoDB
# - PostgreSQL
# - MySQL
# - Redis
# - Elasticsearch
# - SQLite

DevOps y Cloud

# Container technologies:
# - Docker
# - Kubernetes
# - Docker Compose
# - Podman

# Cloud platforms:
# - AWS
# - Google Cloud
# - Azure
# - DigitalOcean
# - Heroku

# CI/CD tools:
# - GitHub Actions
# - GitLab CI
# - Jenkins
# - Travis CI

Características avanzadas

Documentación personalizada

# Add custom documentation:
# 1. Prepare documentation in supported format
# 2. Host documentation online
# 3. Add custom source URL
# 4. Configure parsing rules
# 5. Enable in documentation list

# Supported formats:
# - HTML with proper structure
# - Markdown with metadata
# - JSON API documentation
# - OpenAPI/Swagger specs

Patrones URL y enlace profundo

# URL structure:
https://devdocs.io/javascript/array/map
https://devdocs.io/python~3.9/library/os
https://devdocs.io/css/media_queries

# Deep linking benefits:
# - Share specific documentation pages
# - Bookmark exact locations
# - Reference in external documents
# - Integrate with other tools

Integración del navegador

# Browser extensions:
# - Chrome DevDocs extension
# - Firefox DevDocs add-on
# - Safari DevDocs extension

# Extension features:
# - Right-click search
# - Omnibox integration
# - Quick access shortcuts
# - Context menu options

Autoestación y despliegue

Instalación local

# Requirements:
# - Ruby 2.7+
# - Git
# - Modern web browser

# Installation steps:
git clone https://github.com/freeCodeCamp/devdocs.git
cd devdocs
bundle install
thor docs:download --all
bundle exec rackup

# Access at http://localhost:9292

Docker Deployment

# Docker setup:
docker pull thibaut/devdocs
docker run -d \
  --name devdocs \
  -p 9292:9292 \
  thibaut/devdocs

# Custom configuration:
docker run -d \
  --name devdocs \
  -p 9292:9292 \
  -v /path/to/config:/app/config \
  thibaut/devdocs

Despliegue de la producción

# Nginx configuration:
server {
    listen 80;
    server_name docs.yourcompany.com;

    location / {
        proxy_pass http://localhost:9292;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

# SSL setup:
# Use Let's Encrypt or your SSL certificate
# Configure HTTPS redirect
# Set security headers

API e integración

API

# Direct documentation access:
# Format: https://devdocs.io/{doc}/{path}
# Examples:
https://devdocs.io/javascript/array/map
https://devdocs.io/python~3.9/library/json
https://devdocs.io/react/hooks-state

# Search API:
# Format: https://devdocs.io/search?q={query}
# Returns JSON results
# Supports JSONP callback

Automatización del navegador

// Puppeteer example
const puppeteer = require('puppeteer');

async function searchDevDocs(query) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto('https://devdocs.io');
  await page.type('input[type="search"]', query);
  await page.keyboard.press('Enter');

  await page.waitForSelector('.list-result');
  const results = await page.evaluate(() => {
    return Array.from(document.querySelectorAll('.list-result')).map(el => ({
      title: el.querySelector('.list-text').textContent,
      url: el.href
    }));
  });

  await browser.close();
  return results;
}

IDE Integration

# VS Code integration:
# - DevDocs extension available
# - Hover documentation
# - Quick search commands
# - Sidebar integration

# Vim integration:
# - DevDocs.vim plugin
# - :DD command for search
# - Keyword lookup
# - Split window display

# Emacs integration:
# - devdocs-lookup package
# - M-x devdocs-search
# - Company backend
# - Helm integration

Uso móvil

Aplicación Web móvil

# Mobile features:
# - Responsive design
# - Touch navigation
# - Offline support
# - Search optimization
# - Bookmark sync

# Mobile shortcuts:
# - Swipe navigation
# - Pull to refresh
# - Long press menus
# - Voice search (browser dependent)

Aplicación Web progresiva

# PWA features:
# - Add to home screen
# - Offline functionality
# - Push notifications
# - Background sync
# - App-like experience

# Installation:
# 1. Visit devdocs.io on mobile
# 2. Browser prompts for installation
# 3. Add to home screen
# 4. Launch as standalone app

Optimización del rendimiento

Cargando rendimiento

# Optimization techniques:
# - Enable only needed documentation
# - Use offline mode for frequently accessed docs
# - Clear cache periodically
# - Disable unused features
# - Use fast internet connection for initial setup

# Memory management:
# - Limit enabled documentation sets
# - Clear search history regularly
# - Close unused tabs
# - Restart browser periodically

Resultados de la búsqueda

# Search optimization:
# - Use specific search terms
# - Enable fuzzy search carefully
# - Limit search results count
# - Use documentation-specific search
# - Cache frequently searched terms

Solución de problemas

Cuestiones comunes

# Documentation not loading:
# - Check internet connection
# - Clear browser cache
# - Disable browser extensions
# - Try incognito mode
# - Check DevDocs status

# Search not working:
# - Clear search cache
# - Refresh the page
# - Check enabled documentation
# - Try different search terms
# - Disable ad blockers

Cuestiones de transición

# Offline problems:
# - Re-download documentation
# - Check storage quota
# - Clear offline data
# - Update browser
# - Check service worker status

# Storage management:
# - Monitor storage usage
# - Remove unused documentation
# - Clear old cache data
# - Optimize browser settings

Cuestiones de ejecución

# Slow performance:
# - Reduce enabled documentation
# - Clear browser data
# - Close other tabs
# - Restart browser
# - Check system resources

# Memory issues:
# - Limit concurrent searches
# - Clear history regularly
# - Use fewer documentation sets
# - Restart application
# - Check available RAM

Buenas prácticas

Gestión de documentación

# Efficient setup:
# - Enable only relevant documentation
# - Group related technologies
# - Regular cleanup of unused docs
# - Keep documentation updated
# - Organize bookmarks logically

# Version management:
# - Use specific version docs when available
# - Keep legacy versions for maintenance
# - Update to latest stable versions
# - Document version dependencies

Estrategias de búsqueda

# Effective searching:
# - Start with broad terms, then narrow
# - Use exact method/function names
# - Include context keywords
# - Try alternative spellings
# - Use documentation-specific search

# Search organization:
# - Bookmark frequently accessed pages
# - Use browser bookmarks for quick access
# - Create custom search shortcuts
# - Organize search history

Integración del flujo de trabajo

# Development workflow:
# - Keep DevDocs open in dedicated tab
# - Use keyboard shortcuts for quick access
# - Integrate with IDE/editor
# - Create custom documentation sets
# - Share useful links with team

# Team collaboration:
# - Standardize documentation versions
# - Share custom configurations
# - Create team-specific bookmarks
# - Document common search patterns

Casos de uso avanzado

Documentación Curación

# Custom documentation sets:
# 1. Identify team-specific needs
# 2. Create custom documentation
# 3. Host on internal servers
# 4. Configure DevDocs integration
# 5. Maintain and update regularly

# Internal API documentation:
# - Generate from code comments
# - Convert to DevDocs format
# - Host internally
# - Integrate with development workflow

Educación Uso

# Learning resources:
# - Create learning paths
# - Bookmark key concepts
# - Track progress through documentation
# - Create study guides
# - Share resources with students

# Teaching integration:
# - Use in coding bootcamps
# - Reference in tutorials
# - Create assignments using DevDocs
# - Demonstrate best practices

Recursos

Documentación

Comunidad

Alternativas