Web Maker un editor de código online, gratuito y Open Source

Como entusiasta al desarrollo web siempre ando en busca de nuevas herramientas que me permitan realizar mi trabajo de forma práctica, sobre todo en los procesos del diseño web en los que solo quiero realizar pruebas sin tener que pasar por el “bucle infinito” de armar el entorno necesario para tal fin, ya sabes crear las carpetas, archivos y en ciertos casos buscar y descargar las librerías necesarias.

Para este tipo de escenario yo estaba utilizando Codepen, sin dudas es una maravilla porque además de tener un espacio de pruebas te permite compartir tus creaciones con la comunidad y ver lo que la comunidad a compartido, pero cuando quise crear un espacio privado que no se compartiera públicamente me pidieron que pasara por caja y pagara una suscripción anual.

Pero chachan, “Que vaina que nunca falta un pero para uno el pobre” no hay el dinero suficiente para eso, así que buscando opciones me tope con Web Maker un potente editor de código online gratuito y Open Source muy similar a Codepen pero más centrado en proyectos privados.

Web Maker cuenta con casi todas las opciones que posee Codepen, un editor que puedes configurar a gusto, vista previa, livereload y muchas otras características que pasare a detallarte a continuación y que tal vez puedan que lleguen a convencerte de darle una oportunidad a Web Maker.

Stan personaje de la serie South Park creado con HTML y CSS usando el editor de código Web Maker

Características de Web Maker.

Web Maker viene cargada con un arsenal de opciones entre la que destaca poder usarlo en modo offline, así que la conexión a internet no es un impedimento.

Además puedes iniciar sesión en la aplicación con tu cuenta de Github, Google o Facebook para guardar todos tus experimentos y acceder a ellos cuando quieras.

  • Modo Offline (la primera vez que accede debes tener conexión a internet)
  • Preprocesadores HTML (pug, markdown), CSS (SCSS, LESS, Stylus, Atomic CSS), JavaScript (ES6, CoffeeScript, TypeScript)
  • Emmet
  • Auto-completado de código (Intellisense)
  • Vista previa
  • Livereload
  • Librerías CSS y JavaScript bootstrap, foundation, angular, react, vue entre otros muchos, también podrás buscar y cargar cualquier otra librería desde cdnjs gracias al buscador integrado, y de forma manual desde los siguientes servicios.
    • localhost
    • https://ajax.googleapis.com
    • https://code.jquery.com
    • https://cdnjs.cloudflare.com
    • https://unpkg.com
    • https://maxcdn.com
    • https://cdn77.com
    • https://maxcdn.bootstrapcdn.com
    • https://cdn.jsdelivr.net
    • https://rawgit.com
    • https://wzrd.in
  • Puedes compartir o terminar tu proyecto en Codepen
  • Consola integrada
  • Extensión para Google Chrome
  • Guardado automatico
  • Exportar e importar las creaciones
  • Documentación de uso. Ver la documentación.

Configuración del editor de código Web Maker

El editor de código también cuenta con sus configuraciones, en la que podrás elegir el tema visual del editor, la fuente tipográfica y su tamaño así como los atajos de teclado (sublime text o vim).

Ir a Web Maker

Bien esto ha sido todo por ahora, espero que Web Maker sea de tu utilidad y puedas sacarle el máximo provecho. Hasta la próxima.