Les presento Snipping Code

Snipping code

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:

Snipping code - Nginx

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.

Snipping code - Lazy loading

¿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:

Snipping code - new snip

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:

Snipping code - snip description
Como se ve una descripción con Markdown

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:

Snipping code - colecciones
Como se ve una Colección

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:

Snipping code - perfil de usuario

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:

Snipping code - perfil de usuario
Mi perfil en Snipping Code

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:

Snipping code - sistema de comentarios
Sistema de comentarios

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:

Snipping code - Likes
Likes de la comunidad

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:

Snipping code - búsqueda por nombre

La búsqueda por Nombre permite filtrar los Snips por su nombre, y permite una entrada de texto libre en lenguaje natural.

Snipping code - búsqueda por tags

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:

Snipping code - búsqueda por lenguaje

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:

Snipping code - Embeber Snips

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:

Snip en modo Preview

Snip en modo completo

Versión PRO

Snipping Code es una plataforma totalmente gratuita, donde cualquiera puede crear sus propios Snips y Colecciones sin límite, con la única restricción de que los Snips y Colecciones sean públicas, ya que fomentamos que la comunidad crezca, pero también comprendemos que puedan existir situaciones en las que desees crear Snips o Colecciones privadas, por esa razón agregamos la versión PRO.

Como toda plataforma, necesitamos podemos recaudar algunos fondos para pagar la operación de la plataforma, renta de servidores, compra de certificados y dominio, pero sobre todo y más importante, seguir dándole soporte y desarrollando nuevos features, por esa razón, lanzamos la versión PRO, una versión de paga (muy económica) que te permite crear Snips y Colecciones privadas al mismo tiempo que nos ayudas a seguir adelante con este proyecto.

¿Alguna sugerencia?

Quisiera hacerte saber que en Snipping code estamos totalmente abiertos a la crítica y las sugerencias para mejorar, por lo que te invitamos a que si veas alguna área de mejora, nos escribas directamente en este publicación y nos digas que te ha parecido la plataforma, que te gusto, que no te gusto, que podemos agregar y que debemos de mejorar, todas estas sugerencias harán que mejoremos y te podamos brindar un mejor servicio, finalmente, si quieres escribirme directamente para cualquier tema, puedes mandarme un Email a oscarblancarte3@gmail.com y con gusto te responderé.

Conclusiones

Snipping Code nació para resolver una problemática propia que creo que es es muy común entro los desarrolladores y es que olvidamos con frecuencia fragmentos de código que nos hacen perder mucho tiempo, es por ello que estoy convencido que hay más personas allá afuera que comparten conmigo esta necesidad y espero de corazón que esta plataforma ayude a solucionar esta problemática 😊

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *