Share
Cuando escribí sobre JSBin hace un tiempo, definitivamente provocó mucha conversación y debate sobre qué editor de fragmentos de código en línea era el mejor. Se desecharon un par de alternativas, especialmente CodePen.
Con tantos lectores que se sienten tan apasionados y comprometidos con sus elecciones específicas, quería hacer un artículo que resaltara algo de la frialdad de CodePen. Diré que este no es un artículo de comparación, principalmente porque realmente odio hacer ese tipo de artículos. Cada una de estas herramientas es única y ofrece su propio valor que, en muchos casos, se reduce a las preferencias del usuario..
Definitivamente hay similitudes entre las herramientas, tanto en la interfaz de usuario como en la funcionalidad. Si nos fijamos en ambas herramientas, verá que la interfaz de usuario de múltiples paneles es bastante común y por una buena razón; es muy intuitivo.
JSBin:
CodePen:
El enfoque de múltiples paneles hace que sea increíblemente fácil visualizar todas las facetas de su código de muestra, lo que le permite actualizar rápidamente el marcado o JavaScript y obtener resultados inmediatos. Y para eso están generalmente estas herramientas; Prototipado rápido y prueba de fragmentos de código..
Además de las similitudes de interfaz de usuario, ambos editores permiten a los usuarios:
Desde mi punto de vista, estas son todas las características críticas de cualquier herramienta de contenedor de código, lo que permite al usuario no solo crear un prototipo de código de front-end utilizando los activos que comúnmente usan, sino que también les permite compartirlo con la mayoría de los medios utilizados por los desarrolladores. Como escritor técnico, la capacidad de incrustar un fragmento en vivo es increíblemente importante, ya que proporciona comentarios en tiempo real para demostrar el código que creo, reforzando los conceptos sobre los que estoy escribiendo, al mismo tiempo que proporciona comentarios y códigos reales al lector..
En algunos casos, la paridad de características se reduce al costo, en cuanto a si estas características están disponibles o no. Por ejemplo, si desea funciones de colaboración, JSBin lo ofrece de forma gratuita, mientras que es una función que solo está disponible para la oferta de nivel Pro de CodePen. Y para ser claros (y lo he dicho antes), creo que está perfectamente bien cobrar por grandes funciones. Por lo tanto, si la función es gratuita o basada en suscripción es irrelevante en mi opinión, siempre y cuando aporte valor al usuario..
De todas las herramientas de código bin que he usado, ciertamente puedo decir que CodePen es, con mucho, la más estética y honestamente, tiene sentido. El diseño de front-end de CodePen fue creado por el desarrollador extremadamente talentoso, Chris Coyier, quien tiene un ojo increíble para el diseño de la interfaz de usuario. Y ciertamente se muestra en el aspecto pulido de la herramienta.
Se ha pensado mucho en proporcionar un fácil acceso a la multitud de características importantes al tiempo que se garantiza que el editor no esté desordenado y que las funciones no sean intrusivas. Esto es importante ya que las propiedades inmobiliarias de la ventana gráfica, en este tipo de IU, son ajustadas. Tratar de equilibrar todo, proporcionar una experiencia de codificación decente en varios idiomas, al tiempo que proporciona resultados inmediatos; Eso es complicado y obliga a pensar en términos de diseño..
Esto es claramente evidente en el uso de iconos bien ubicados dentro de los encabezados de cada panel de secuencia de comandos.
Al aprovechar un icono de interfaz de usuario utilizado comúnmente para la configuración (un engranaje), puede ver cómo el equipo de CodePen ha consolidado bastante bien una importante funcionalidad complementaria que mejora la experiencia de creación de prototipos. Esto es lo que quiero decir con que la interfaz de usuario no es intrusiva: ofrece accesos directos intuitivos a funciones adicionales. Pero es más que simplemente agregar características adicionales. Estas son herramientas del mundo real que los desarrolladores web utilizan todos los días y son importantes para tener una idea legítima de si su prototipo funcionará o no..
Características como la "Detalles"vea cómo demuestra el enfoque de CodePen en proporcionar no solo una sólida experiencia de edición, sino también un fuerte ángulo social que permite a los usuarios obtener una mejor visibilidad de la utilidad de los fragmentos de código que están compartiendo:
Ahora, mientras que ambas herramientas ofrecen amplias funciones complementarias, en mi opinión, CodePen demuestra una clara inclinación hacia la provisión de mejores herramientas para los diseñadores a través de su amplio soporte para Sass, LESS y Stylus, incluidos complementos como Compass, Bourbon y Nib.
Pero mientras brilla en CSS y marcado, CodePen no ofrece tanto como JSBin cuando se trata de soporte de biblioteca de JavaScript. No quiere decir que no incluya a muchos de los principales actores, pero con la gran cantidad de nuevas bibliotecas y marcos en uso hoy en día, hay una clara diferencia en términos de soporte integrado:
CodePen:
JSBin:
De estas capturas de pantalla (que solo son capturas parciales) se desprende claramente que la amplitud del soporte de la infraestructura de JavaScript es mucho más extensa que CodePen, tanto en números como en versiones compatibles. CodePen ofrece la posibilidad de incluir un recurso de JavaScript externo en su fragmento de código, pero la conveniencia de poder hacer clic en un menú desplegable y elegir entre una variedad de marcos JS es bastante útil.
Hay una característica, sin embargo, que es un sobresaliente total para mí y es esta:
Está bien. CodePen incluye la integración con una de mis herramientas de prueba favoritas del navegador, BrowserStack.com. He escrito sobre el servicio antes y me encanta por su simplicidad para las pruebas y la amplitud de la cobertura del navegador, por lo que ver la integración de CodePen con él es una gran ventaja. Pero es más que ese botón que lo hace increíble. Es el menú desplegable junto a él que te permite decidir a qué navegador te gustaría dirigirte:
... que luego te dirige a BrowserStack con la misma información:
En términos de conveniencia, esta es una victoria definitiva para los desarrolladores. Es importante tener en cuenta que serás redirigido fuera de CodePen cuando hagas clic en el botón BrowserStack y necesitarás una cuenta BrowserStack para poder usarlo.
CodePen viene en una edición gratuita y más rica en características Pro versión. Esto incluye funciones para la vista previa en vivo del código en múltiples dispositivos, la colaboración con otros desarrolladores, la temática de bolígrafos de códigos integrados y el intuitivo "Modo Profesor", que es muy útil para la capacitación y las clases en línea..
De las características Pro disponibles, las dos que me parecen más útiles son las Vista en vivo y Alojamiento de activos esto último permite a los desarrolladores cargar activos como imágenes y archivos de script que pueden usarse directamente en el lápiz del código.
Quizás te preguntes por qué esto es útil? Bueno, la alternativa es encontrar una opción de alojamiento externo como un CDN o su propio servidor. Al poder cargar directamente su propio archivo JavaScript personalizado, las imágenes o la hoja de estilo resuelven ese problema y hacen que esos activos estén disponibles para usar en sus plumas de códigos. Una vez cargado, es una simple cuestión de hacer clic en el activo, tomar su URL y colocarla en su código:
Esto solo merece los $ 9 por mes para usar el servicio y parece ser exclusivo de CodePen.
La razón por la que realmente me gusta el Vista en vivo característica es porque las pruebas a través de diferentes factores de forma es increíblemente importante en la actualidad. Esto se hace enviando el enlace del lápiz al dispositivo con el que desea realizar la prueba. Esto se puede hacer escribiéndolo directamente en la barra de URL del navegador móvil o usando el cuadro de diálogo Compartir de CodePen para enviar un mensaje de texto a un dispositivo móvil:
Cuando la pluma se actualiza en su computadora, refleja casi instantáneamente los cambios en cualquier número de dispositivos.
CodePen es una gran herramienta. Es muy pulido y rico en funciones con un soporte fantástico para el marcado y herramientas de CSS. El hecho de que algunas funciones solo estén basadas en suscripciones, no me deja un poco desfasado, ya que no me importa admitir un buen software. Diré que algunas características parecen ser una parte estándar del servicio, específicamente la creación de bolígrafos privados y previsualización en vivo, especialmente cuando otros servicios ya lo ofrecen de forma gratuita..
En mi opinión, después de haber usado JSBin y CodePen, está claro que comparten capacidades muy similares y la elección de qué servicio usar, en última instancia, dependerá de las preferencias personales. A algunos les puede gustar la interfaz de usuario profesional de CodePen, mientras que otros pueden apreciar la amplia gama de soporte de JavaScript en JSBin. Puede reducirse a usar ambas para realizar diferentes tareas, pero puedo decir que CodePen es ciertamente un servicio que vale la pena aprovechar y lo agregaré a mis herramientas del oficio.
Accentsconagua