Los entornos de codificación local son excelentes, pero a menudo no quiero abrir Espresso y dedicar unos minutos a configurar el código cuando lo único que quiero es probar una idea o solucionar un error. Además, las opciones de uso compartido para la mayoría de las aplicaciones de codificación locales son limitadas y, por lo general, requieren la integración de una aplicación externa como Dropbox.
Los patios de recreo en línea o las cajas de arena como jsFiddle resuelven este problema al proporcionarle un entorno de codificación instantáneamente listo para que pueda comenzar a experimentar tan pronto como se cargue la página. Estas herramientas le permiten combinar CSS, HTML y, a menudo, incluso JavaScript para crear y compartir ejemplos de codificación. Soy completamente adicto a estas cosas y he probado exhaustivamente todas las que puedo tener en mis manos. Hoy repasaré mis cinco favoritos y discutiré no solo por qué me gusta de cada opción, sino también dónde se quedan cortos.
CSSDesk
Comenzaré con CSSDesk porque es uno de los más antiguos de esta lista. Ha existido durante años como una pequeña herramienta silenciosa y oscura que es extremadamente útil para jugar con código web básico. CSSDesk es una herramienta muy simple que se centra exclusivamente en HTML y CSS.
Lo que me gusta de CSSDesk
Hay muchas cosas que me encantan de CSS Desk. Hay tres secciones principales: HTML, CSS y vista previa en vivo, cuyos tamaños se pueden modificar fácilmente con un clic y arrastrar. Me gusta que pueda ver fácilmente todo lo que necesita en una vista simple. No hay ningún esfuerzo o configuración aquí, solo carga la página y comienza a crear.
También hay resaltado de sintaxis básico al igual que todas las otras herramientas en esta lista. Sin embargo, una característica bastante única que no se ve a menudo en este tipo de herramientas son los números de línea. Es una adición tan simple, pero me gustan los números de línea, así que realmente aprecio la inclusión.
Las características de la barra de herramientas también son geniales, ya que ofrecen algunas opciones que simplemente no encuentras en otros lugares. Además de la función de uso compartido estándar, también tiene la opción de descargar lo que acaba de crear. Además, hay un conjunto de texturas de fondo de mosaico predeterminado que se aplican si no las reemplazas manualmente. Estos son divertidos si solo está creando un botón o widget de algún tipo y quiere algo que no sea el típico fondo blanco liso.
Lo que no me gusta de CSSDesk
Honestamente, no hay mucho que no me guste de esto. Claro, es simple y no tiene algunas de las características de lujo que tienen las otras opciones, pero eso es lo que lo hace genial. Casi nunca uso este, pero cada vez que lo hago es tan agradable que creo que debería pasar por más a menudo.
El mayor inconveniente para los codificadores de hardcore es la falta de soporte de JavaScript. Si esto es un factor decisivo para usted, intente revisar una de las otras opciones.
Js bin
JS Bin es otro lugar popular para juguetear con tu código. El diseño de esta aplicación es bastante mínimo y realmente te permite enfocarte en el código. De forma predeterminada, la página solo muestra los paneles de vista previa en HTML y en vivo, pero también puede agregar JavaScript fácilmente.
Lo que me gusta de JS Bin
Hay algunas características interesantes en JS Bin. Lo primero que me encontré apreciando es el hecho de que actualizar la página no destruye tu trabajo. La vista previa se actualiza automáticamente, pero para las raras ocasiones en que necesita una actualización manual, es bueno que su primer instinto (Comando-R) no resulte en la pérdida accidental de una hora de retoques.
Al igual que con CSSDesk, usted guarda, comparte y descarga su trabajo. Sin embargo, el lugar donde esto obviamente avanza es la implementación de JavaScript. Obviamente, puedes ingresar tu propio JS, pero como un bono puedes elegir incluir bibliotecas populares como jQuery.
Otra característica interesante es la capacidad de controlar los paneles que ves al manipular la URL. Por ejemplo,? Http: //jsbin.com/#javascript,html,live? obtendrá los tres paneles mientras? http: //jsbin.com/#html,live? sólo conseguirá que ustedes dos.
Lo que no me gusta de JS Bin
Para ser honesto, JS Bin es mi opción menos favorita en esta lista. No está mal, pero definitivamente carece del encanto de los demás. Una cosa que siempre me molesta es que no hay un lugar dedicado para CSS, lo que te obliga a incrustarlo en tu HTML. Esto funciona bien, pero no es tan bueno como la separación intencional que se ve en las otras opciones.
jsFiddle
jsFiddle ha despegado completamente en los últimos meses a un año y es probablemente la opción más popular en esta lista en este momento. Y por una buena razón, esta es una aplicación increíble. Enfrentémoslo, una vez que profundices en jsFiddle, nunca más verás ninguna de las otras opciones.
Lo que me gusta de jsFiddle
Hay un montón de grandes cosas para cubrir en mi lista de razones por las que debería usar jsFiddle. Primero está el diseño. Hay cuatro paneles (HTML, CSS, JavaScript y vista previa) para que pueda ver todo lo que necesita a la vez y cambiar el tamaño de cada área sobre la marcha. El sistema de diseño aquí se siente realmente flexible y es realmente divertido jugar con él.
Mientras discutimos los paneles, puede personalizar los paneles CSS y JavaScript para utilizar sus herramientas de terceros favoritas. Encontrará soporte para la sintaxis Sass SCSS y CoffeeScript.
jsFiddle le permite crear un inicio de sesión y ver un panel de su trabajo anterior guardado. Hay un montón de opciones de menú y herramientas una vez que haya guardado un fiddle, mis favoritos son la capacidad de crear rápidamente un tenedor y la opción de ordenar automáticamente la estructura de código desordenada.
Además de las opciones de personalización del panel, la barra lateral tiene un montón de otras excelentes funciones también. Por ejemplo, puede agregar rápidamente las bibliotecas principales que desee incluir (jQuery, MooTools, etc.) y sus propios recursos de JavaScript / CSS.
Una última opción increíble de jsFiddle que acabo de descubrir el otro día: puedes incrustar violines en una página web. Esta opción se encuentra en el menú Compartir y es una excelente alternativa a otros servicios de incrustación de código.
Lo que no me gusta de jsFiddle
Mi principal problema con jsFiddle es la falta de una opción de actualización automática para la vista previa. Una vez que haya usado todas las otras opciones en esta lista y haya experimentado las ventajas de la actualización automática, es difícil soportar actualizaciones manuales cada pocos segundos en jsFiddle.
En lo que respecta a otras características, es la mejor de la lista, pero esa molestia a menudo me lleva a otro lado si solo quiero hacer una prueba rápida. Los atajos de teclado ayudan, pero aún no son tan agradables como algo automático.
Dabblet
Dabblet es un chico bastante nuevo en el bloque en este género. Al igual que CSSDesk, se enfoca solo en HTML y CSS sin JavaScript. Sin embargo, no lo cuentes porque trae una innovación seria a la mesa que no encontrarás en ningún otro editor.
Lo que me gusta de Dabblet
Por defecto, Dabblet se divide en tres pestañas: CSS y Resultado, HTML y Resultado y Resultado. Esto proporciona flexibilidad y enfoque al tiempo que le permite vigilar siempre el resultado.
Puedes cambiar las cosas con los controles que se muestran a continuación. La división puede ser vertical, horizontal o eliminarse completamente. También hay un interesante? Detrás del código? Modo donde su resultado es simplemente el fondo para el área de codificación. Note que también hay un mensaje sobre el uso de prefijo libre. ¡Utilizo Dabblet todo el tiempo y nunca me di cuenta de esto hasta ahora! Esto significa que no tiene que usar prefijos de proveedores locos y puede codificar los valores predeterminados simples, el JavaScript oculto se asegurará de que sus navegadores lo interpreten correctamente.
Dabblet tiene algunas excelentes opciones de ahorro, como "guardar de forma anónima". También se vincula a tu cuenta de GitHub, que a los nerds de codificación les encantará.
Mi característica favorita de Dabblet es la integración del efecto de desplazamiento super slick en el CSS. Son más fáciles de mostrar que describen. Aquí dos ejemplos:
Como puede ver, al pasar el ratón sobre ciertos fragmentos de CSS, se muestran estas pequeñas informaciones sobre herramientas que son realmente geniales. Puede obtener vistas previas de fuentes, colores, tamaños e incluso imágenes.
Lo que no me gusta de Dabblet
Dabblet es un poco peculiar desde una perspectiva visual, o lo amas o lo odias. Personalmente, disfruto mucho con su uso pero realmente deseo tener más control sobre el tamaño del panel. Tener una división automática 50/50 es genial, pero debería poder ajustar manualmente lo que yo elija.
Por lo que sé, tampoco hay manera de ver tu HTML y CSS al mismo tiempo, lo cual es un poco molesto si estás acostumbrado a opciones como jsFiddle donde puedes vigilar todo a la vez.
Tinkerbin
Tinkerbin es la alternativa más cercana a jsFiddle que he encontrado. Aunque no tiene todas las características de lujo que se encuentran en jsFiddle, tiene algunos trucos propios que son realmente buenos.
Lo que me gusta de Tinkerbin
El diseño predeterminado del panel en Tinkerbin es probablemente mi favorito en toda esta lista. Es un diseño muy lógico que pone el código a la izquierda y una gran vista previa de actualización automática a la derecha. Las secciones de HTML, CSS y JavaScript se apilan unas sobre otras, con pestañas opcionales que le permiten concentrarse en solo una de estas.
Además, Tinkerbin admite incluso más opciones de sintaxis alternativas que jsFiddle. Puedes elegir HTML o HAML; CSS, SCSS (con Compass), la antigua sintaxis SASS o LESS; y JavaScript o CoffeeScript. No hace falta decir que, si cavas preprocesadores, esta es la opción para ti.
Tinkerbin es la única opción que le permite intercambiar su vista previa por una fuente de vista agradable y extensa. ventana.
Lo que no me gusta de Tinkerbin
Incluso más que Dabblet, el diseño de Tinkerbin es completamente rígido. Claro, me gusta más la configuración predeterminada, pero a veces quiero hacer que la vista previa sea más amplia y simplemente no tengo la opción aquí.
Además, las opciones de ahorro no son las mejores. No hay configuración de cuenta, panel de control, integración de GitHub, etc. Simplemente guarda sus experimentos en una URL acortada.
Conclusión
A estas alturas, estoy seguro de que puedes ver los beneficios de tener algunos de estos sitios marcados como favoritos. Lo aliento a que experimente con la mayor frecuencia posible con nuevas ideas para mantenerse fresco y estos servicios brindan una manera increíble de hacerlo.
Espero que esta revisión haya servido como una mirada útil en los detalles de cada una de estas soluciones. Ahora debe saber no solo qué hace que cada opción sea única, sino también dónde se queda corto. Esto le ayudará a tomar una decisión informada sobre cuál o dos se enfocará principalmente.
Personalmente salgo de un lado a otro con bastante regularidad, pero últimamente he estado saliendo principalmente en jsFiddle, Dabblet y Tinkerbin. ¿Cuál de estos es tu favorito y por qué?