Herramientas online para escribir, encontrar y compartir código

¡Hola lectores de n9eeks!

Bienvenidos al Martes de Desarrollo.

Si eres nuevo, intermedio o avanzado en desarrollo, esto te servirá. Te mostraré herramientas online para compartir, buscar y escribir código e incluso algunos podrán ejecutar el código en la misma web.

Ser programador exige experimentar, fallar y repetir , pero qué pasa cuando ya hay quienes han experimentado antes que nosotros, dónde ponen sus códigos, donde podemos verlos, y empezar a partir de ellos.

Les comparto una lista de aplicaciones web donde pueden pegar su código o directamente escribirlo, probarlo y compartirlo con el mundo además de llenarse de inspiración.

1. Code Gist Github

Como número uno Code Gist de Github. Este servicio te dejará crear scripts, darle seguimiento a tus cambios y compartirlo con la gente, aparte soporta infinidad de marcadores de sintaxis(coloreado de código) de lenguajes de programación, para hacer más fácil su visualización.

CodeGist de Github es posiblemente la plataforma con más scripts en el mundo, pero eso no me lo creas, ve y busca código en su plataforma.

Este ejemplo es de hace unos años donde creé un script en python para redimensionar todas las fotos de una carpeta a tamaño 1920px de ancho. Me funcionó cuando tenia mil fotos de 8 mb a 10mb cada una y tenia que redimensionarlas y ponerles calidad 92 a todas. Resultado: de 2Gb de Tamaño en imagen 300MBs en total. Se me hizo fácil crear un script y ahora está ahí compartido para cuando lo quieran usar :D

2. CodePenIO

En CodePenIO la ventaja es que nos da un embed code, que significa que además podemos pegarlo en nuestros sitios web, blogs, etc. De una manera fácil y cómoda. Ejecuta automático nuestros scripts y podemos cargarle librerías como jquery, angular, etc. O simplemente escribir código.

Lenguajes: Html, css, JS

Preprocesadores CSS: Sass, Less, Stylus,

Preprocesadores JS: CoffeScript, TypeScript, Babel

Preprocesadores Html: Jade, Yaml, Markdown, Slim

¿OK, te empieza a sonar raro? Esta herramienta es super pro para los front-ends o si apenas estas empezando en esto son lenguajes para crear web más rápido ¡Pero no te asustes! Porque aquí puedes probar tecnologías que aun no has instalado en tu computadora, si te convencen puedes instalarlas.

Tips:

Puede convertir de un preprocesador a otro código, es decir si vez un “código” en SASS puedes convertir en CSS puro sin dolor, solo lo seleccionas y ya.

Puedes ver código de otras personas e inspirarte.

Puedes ver la pre visualización antes de leer siquiera el código.

Puedes Subir tu código a github gist con un solo click, etc.

Te invito a conocer más esta herramienta :D

Les dejo un ejemplo de un corazón creado por alguien más que configure para n9eeks :D

3. Dabblet

Esta herramienta es para probar código css y html rápido, no es tan potente como el anterior, pero es bonito y funciona muy bien. Además fue creado por @LeaVerou una desarrolladora muy pro, que ha creado otras herramientas como prefixfree, libros como css secrets, su propio blog y actual estudiante de la MIT.

Les dejo este ejemplo rápido y fácil de un fondo con gradiantes y un saludo para la comunidad n9eek :D

Ejemplo: http://dabblet.com/gist/f630b5a63fe5b1e85d729b13fe843368

4. Pastebin

¿Alguna vez has trabajado sólo o en equipo y te han dicho, pásame ese código que tienes por skype, messenger, o por cualquier mensajero? Bueno casi siempre copiamos y pegamos pero se ve horrible, a duras penas se entiende. Para estos casos pastebin es la opción ideal.

Veamos sus características principales.

Código Privado, Público

Te deja escribir códigos anónimos públicos o privados( así no dejas huellas de nada personal de ninguna empresa o de tu proyecto, y aparte podrás compartirlo con mucha gente o solo compartiendo el link).

Tiempo de Vida: 1 min, 5 min, 1 hora, 1 día, 1 semana, 1 mes.

Con esta característica puedes vivir sin miedo a que te plagien código o que algo quede en la nube que sea confidencial, por si no te bastó tener código privado.

Tiene varios Syntax Highlighting(remarcado de código) de lenguajes de programación para que puedas ver con más claridad el código en algún lenguaje específico.

Un ejemplo de cómo averiguar la versión de django(framework web de python) que tengas instalada.

Ejemplo: http://pastebin.com/1XxFBaPU

5. Jsfiddle.net

Esta plataforma es parecida a CodepenIO pero tiene más años, tiene más comunidad que CodePen, tiene llamadas a API’s, y una forma de colaboración con chats en tiempo real, una lista de librerias de JS de uso más común.

En particular no le veo algo mucho mejor que codepen, pero en internet hay muchos ejemplos inclusive de la W3Schools, Mozilla, etc. que tienen enlace directo a un ejemplo ya escrito en JSfiddle por lo tanto tener una cuenta para hacernos con una copia de códigos de ejemplo siempre esta bueno.

Les dejo un ejemplo con javascript, sprites, para animar cambio de armas y disparo en la web :D

Ejemplo: http://jsfiddle.net/pjnovas/4PvSm/

6. LiveWeave

Este en lo personal apenas lo conocí y lo veo super práctico para quienes apenas empiezan en la web, tiene cerrado de tags inteligente, tiene acompletadores de tags, y tanto para CSS, HTML y JS. Todo esto en la web y viendo los cambios al instante. Lo cual lo convierte en una poderosa herramienta para quienes aprenden los comandos, en los anteriores links que les pase, esto no viene activado y aquí sí.

Les dejo un ejemplo de saludo a la comunidad :D

Ejemplo: http://liveweave.com/ehEGnQ

7. Codepad.co

Este es como la anterior plataforma, lo agregué porque igual tiene una comunidad de personas que comparten sus códigos aquí. Puedes ver interesantes proyectos como este login hecho imitando al de World of Warcraft.

Ejemplo: https://codepad.co/snippet/9pIYFhjh

Conclusiones

Si en tu próximo proyecto necesitas ayuda de un compañero para que revise tu código o necesitas inspiración para una funcionalidad que necesitabas crear, estas plataformas te ayudarán en ese proceso.

Compartan sus códigos con cualquier herramienta, pero no copien y peguen en messenger o skype, se lee horrible y no se entiende nada. Usen esto chicos es un super tip.

Estas herramientas me han ayudado demasiado espero a ti también que nos lees en n9eeks :D