Acabo de lanzar https://snippingcode.com, una red social para desarrolladores donde puedes compartir pequeños fragmentos de código interesantes, repetitivos o que se nos olvida con frecuencia. La idea es que entre todos compartamos e interactuemos entre nosotros.Ayuden a compartir.
Snipping Code nace de una necesidad propia, ya que soy una persona que olvida con frecuencia fragmentos de código interesantes y que tengo que estar Googleando cada vez que los quiero utilizar, por ejemplo, una configuración de Apache, Nginx, algo estilo interesante de CSS, como utilizar algún API o librería, como validar un Email, etc. Todos estos ejemplos son en realidad muy fáciles de implementar, pero tenía que estar Googleando con frecuencia cada ves que los quería implementar lo que me quitaba algunas horas o dolores de cabeza.
Un ejemplo real del por que decidí crear Snipping Code, es por ejemplo la configuración de Nginx, ya que esto por lo general lo haces una solo vez por proyecto y nunca más lo vuelves hacer, por lo que pueden pasar meses antes de que requieres configurarlo nuevamente, entonces la solución es simple, copio la configuración y creo un Snip para jamás olvidarlo:
El ejemplo anterior es la configuración que utilizo para redireccionar las peticiones del subdominio api.snippingcode.com a mi API REST, mientras que las peticiones al dominio principal snippingcode.com se redireccionan a la aplicación de web. Puede que este Snip no sea gran cosa, pero la verdad es que ha ahorrado más de 3 días para recordar la configuración exacta.
Otro ejemplo simple pero efectivo es como cargar los Script en JS de forma perezosa, es decir que no se carguen al memento de que la página cargue, si no que hasta que el usuario haga el primer Scroll, de esta forma, me aseguro que el script no afecte el tiempo de carga de la página.
¿Que puedo hacer con Snipping code?
Bueno, lo obvio es puedes crear Snips, los cuales son los fragmentos de código que vimos anteriormente, el cual soporta casi 200 lenguajes diferentes y les puedes agregar etiquetas para clasificarlos mejor:
Crear un nuevo Snip
La pantalla anterior nuestra lo fácil que es crear un nuevo Snip. Por cierto, puedes agregar una descripción para explicar tu Snip, pero sobre todo para que el resto de la comunidad entienda tu código y puede reutilizarlo. La descripción soportar Markdown, así que podrás crear descripciones muy atractivas con la siguiente:
Colecciones
Otra de las ventajas de Snipping Code es que puedes agrupar tus Snips por Colecciones, las cuales son una especie de bandeja donde puedes organizar los Snips para no perderlos o encontrarlos más rápido:
En la imagen anterior puedes ver una colección con algunos Snips, en este caso, es una Colección de Snips de Java Stream, la cual me permite acceder rápidamente a todos los Snips relacionados con los Streams de Java.
Pero eso no es todo, las colecciones no están limitadas para agregar tus propios Snips, si no que puedes agregar Snips de la comunidad, para de esa forma nunca perder un buen aporte de algún miembro de la comunidad.
Descubre Snips de la comunidad
Snipping Code esta diseñado al rededor de la comunidad, pues no solo se trata de subir tus Snips y ya, si no que está diseñado para poder tener una interacción con la comunidad y entre todos aportar y retroalimentarnos. Por ejemplo, todos podemos ver el perfil de cualquier miembro de la comunidad:
Por ejemplo, este es mi perfil de Snipping Code, donde puedes ver mis colecciones y mis Snips para ver el trabajo que estoy asiendo.
También puedo editar mi perfil para personalizar la forma en que los demás me ven en la comunidad:
Sistema de comentarios
Una verdadera red social para desarrolladores no estaría completa sin un sistema de comentarios donde cualquiera pueda comentar los Snips y dejar sus agradecimientos o comentarios para mejorarlo:
Y como toda sistema de comentarios para Desarrolladores que se respete, soporta Markdown 😃
Notas
Las notas son una forma simple de tomar apuntes sobre tus proyectos, por ejemplo, guardar los datos de contacto del Stakeholder, datos de los servidores, como URL, IP, credenciales, etc. O simplementen puedes tomar a puntes de tareas que tienes que realizar o comentarios para no olvidarlos:
Crece dentro de la comunidad
Snipping Code está diseñado para mostrar los Snips más populares al inicio, por lo que hemos implementado un sistema de Likes, donde la comunidad pueda juzgar cuales son los Snips y Colecciones más interesantes dejando su Like:
De esta forma, entre más Snips crees más te podrás dar a conocer entre la comunidad 💪
Otros features
Búsquedas avanzadas
Snipping Code está diseñado para que puedas buscar fácilmente nuevos Snips, por lo que hemos agregados 3 filtros que te permitirán descubrir nuevos Snips de una forma simple. Los filtros son por Nombre:
La búsqueda por Nombre permite filtrar los Snips por su nombre, y permite una entrada de texto libre en lenguaje natural.
La búsqueda por Tags permite filtrar los Snips por los Tags del Snip, de esta forma podemos encontrar Snips que coincidan mejor con los tópicos que estamos buscando.
Finalmente, tenemos la búsqueda por tecnología:
La búsqueda por tecnología permite buscar todos los Snips de una determinada tecnología, sin importar su contenido o su Tags. Este es un estilo e búsqueda diseñado para descubrir nuevos Snips, mas que para buscar algo en especifico.
Embeber Snips en tus páginas
Otra de las grandes ventajas de Snipping Code es que puedes insertar tus Snips en tu página web, para que esta forma, puedes reutilizar tu contenido creado, para esto, solo tienes que dirigirte al Snip que quieres compartir (puede ser tuyo o de otra persona) y seleccionar la opción de Embed del menú dinámico:
Puedes insertar tus Snips de dos formas, en vista previa y en vista completa, la vista previa muestra el Snips de forma resumida, pero con un link para verlo completo en Snipping Code, la cual es la mejor opciones si no quieres que te quite mucho espacio en tu página. Finalmente, la vista completa permite ver el Snip completo, para que tus usuarios puedan ver el Snip directamente desde tu página.
A continuación un ejemplo del mismo Snip en los dos modos: