Recientemente elaboré una estructura alámbrica para un embellecedor de código. Al día siguiente, decidí convertirlo en una verdadera herramienta. Todo el proyecto tardó menos de dos días en completarse.
Estuve pensando en construir un nuevo embellecedor de código por un tiempo. La idea no es única, pero cada vez que uso la herramienta de otra persona, vuelvo a aplicar la misma configuración y evito los anuncios cada vez. 🤦🏻
Quería una herramienta simple que funcionara bien sin problemas, así que la semana pasada tomé un poco de papel y comencé a esbozar una. Soy un gran fanático del wireframing a mano. Hay algo en el lápiz y el papel que hace que la parte del diseño de mi cerebro funcione mejor que mirar una pantalla.
Inicié el proceso de diseño dibujando a mano esquemas de alambre para la aplicación.
Inmediatamente me inspiré después de dibujar la estructura metálica. Al día siguiente, me tomé un descanso de mi rutina habitual para convertirla en algo real. 👨🏻💻
Echale un vistazo
El diseño
Sabía que quería que el editor de código fuera el foco principal de la herramienta, así que creé una barra de menú delgada en la parte superior que controla el modo (es decir, HTML, CSS, JavaScript) y la configuración. Finalmente, también agregué un botón Acerca de.
El editor en sí ocupa la mayor parte de la pantalla, pero se integra para que no te des cuenta. En lugar de desperdiciar espacio con instrucciones, utilicé un marcador de posición que desaparece cuando comienzas a escribir.
La interfaz de usuario del modo oscuro se basa en una palanca que actualiza los estilos.
En la parte inferior, creé una barra de estado que muestra estadísticas en vivo sobre el código, incluido el modo actual, la configuración de sangría, el número de líneas, el número de caracteres y el tamaño del documento en bytes. El lado derecho de la barra de estado tiene un botón “Limpiar” y “Limpiar + Copiar”. El centro tiene un logo que conecta descaradamente mi propio servicio.
No creo que muchos desarrolladores realmente codifiquen en teléfonos, pero quería que esto funcionara en dispositivos móviles de todos modos. Aparte de las técnicas de respuesta habituales, tuve que observar el tamaño de la ventana y ajustar la posición de la pestaña cuando la pantalla se vuelve demasiado estrecha.
Estoy usando unidades flexbox y viewport para el tamaño vertical. En realidad, esto fue bastante fácil de hacer con la excepción de una pequeña peculiaridad de iOS. Aquí hay un bolígrafo que muestra la estructura alámbrica básica. Observe cómo el área de texto se estira para llenar el espacio no utilizado entre el encabezado y el pie de página.
Ver la pluma
Editor de texto de página completa con encabezado + pie de página por Cory LaViska (@claviska)
en CodePen.
Si observa la pestaña JavaScript, verá la peculiaridad de iOS y la solución. No estoy seguro de cómo detectar algo como esto, así que por ahora es solo una simple verificación del dispositivo.
Configuración de manejo
Quería mantener la configuración más utilizada de fácil acceso, pero también exponer la configuración avanzada para cada modo. Para hacer esto, hice que el botón de configuración fuera una ventana emergente con un enlace a configuraciones más avanzadas en su interior. Cuando se cambia una configuración, la interfaz de usuario se actualiza inmediatamente y la configuración se conserva para localStorage
.
Las configuraciones más comunes están contenidas en un pequeño panel que brinda acceso rápido a ellas, mientras que las configuraciones avanzadas aún son accesibles a través de un enlace en el panel.
Aproveché Vue.js aquí. Cada configuración se asigna a una propiedad de datos, y cuando uno de ellos cambia, la interfaz de usuario se actualiza (si es necesario) y llamo saveSettings()
. Funciona algo como esto.
function saveSettings() {
const settings = {};
// settingsToStore is an array of property names that will be persisted
// and "this" is referencing the current Vue model
settingsToStore.map(key => settings[key] = this[key]);
localStorage.setItem('settings', JSON.stringify(settings);
}
Cada configuración es una propiedad de datos que se sincroniza con localStorage
. Esta es una forma bastante primitiva de almacenar el estado, por lo que podría actualizar la aplicación para usar una biblioteca de administración de estado como Vuex más adelante.
Para restaurar la configuración, tengo un restoreSettings()
función que se ejecuta cuando se inicia la aplicación.
function restoreSettings() {
const json = localStorage.getItem('settings');
if (json) {
try {
const settings = JSON.parse(json);
Object.keys(settings).forEach(key => {
if (settingsToStore.includes(key)) {
this[key] = settings[key];
}
});
} catch (err) {
window.alert('There was an error loading your previous settings');
}
}
}
La función obtiene la configuración de localStorage
, luego los aplica uno por uno asegurando solo configuraciones válidas en settingsToStore
ser importado.
El enlace Configuración avanzada abre un cuadro de diálogo con pestañas para cada modo. A pesar de tener más de 30 configuraciones en total, todo está organizado y es de fácil acceso para que los usuarios no se sientan abrumados.
Al hacer clic en el enlace “Configuración avanzada”, se abren las preferencias y los accesos directos específicos del idioma.
Aplicar temas
El modo oscuro está de moda en estos días, por lo que está habilitado de forma predeterminada. También hay un tema ligero para quienes lo prefieran. Toda la interfaz de usuario cambia, excepto los elementos emergentes y los diálogos.
Consideré usar prefers-color-scheme
, que casualmente aterrizó en Firefox 67 recientemente, pero decidí que probablemente sería mejor cambiarlo. El soporte del navegador para la consulta de preferencia de tema de color aún no es tan bueno, y los desarrolladores son raros. (Por ejemplo, uso macOS con el tema claro, pero mi editor de texto es oscuro).
La aplicación con la interfaz de usuario del modo de luz habilitada.
Definición de características
Proponer ideas de funciones es bastante fácil. Son funciones limitantes para una versión inicial que es difícil. Estas son las características más relevantes que envié de inmediato:
- Embellece el código HTML, CSS y JavaScript
- Resaltado de sintaxis con coincidencia de etiqueta / corchete
- Pegar o soltar archivos para cargar código
- Detecta automáticamente la preferencia de sangría según el código pegado o el archivo soltado
- Temas claros y oscuros
- Limpiar y copiar con un clic
- Atajos de teclado
- La mayoría de las opciones de JS Beautify son configurables
- La configuración se almacena indefinidamente en
localStorage
- Interfaz de usuario mínima sin anuncios (solo un enchufe discreto para mi propio servicio) 🙈
También agregué algunos huevos de Pascua para divertirme. Intente actualizar la página, explorar accesos directos y compartirla en Facebook o Twitter para encontrarlos. 😉
Las herramientas y bibliotecas que utilicé
Soy un gran fan de Vue.js. Probablemente sea excesivo para este proyecto, pero la CLI de Vue me permitió comenzar a construir con las últimas herramientas a través de un simple comando.
vue create beautify-code
No tuve que perder tiempo construyendo andamios, lo que me ayudó a construir esto rápidamente. Además, Vue fue útil para cosas como estadísticas en vivo, cambiar temas, alternar configuraciones, etc. Usé varios componentes de UI de Element para cosas como botones, elementos de formulario, ventanas emergentes y diálogos.
El editor funciona con CodeMirror utilizando estilos personalizados. Es un proyecto fantástico y bien respaldado que no puedo recomendar lo suficiente para la edición de código en el navegador.
La biblioteca que hace todo el embellecimiento se llama JS Beautify, que maneja JavaScript, HTML y CSS. JS Beautify se ejecuta en el lado del cliente, por lo que realmente no hay backend para esta aplicación: ¡su navegador hace todo el trabajo!
JS Beautify es increíblemente fácil de usar. Instalarlo con npm install js-beautify
y ejecute su código a través de la función apropiada.
import beautify from 'js-beautify';
const code="Your code here";
const settings = {
// Your settings here
};
// HTML
const html = beautify.html(code, settings)
// CSS
const css = beautify.css(code, settings)
// JavaScript
const js = beautify.js(code, settings)
Cada función devuelve una cadena que contiene el código embellecido. Puede cambiar la forma en que se emite cada idioma pasando su propia configuración.
Me han preguntado varias veces sobre Prettier, que es una herramienta comparable, por lo que vale la pena mencionar que elegí JS Beautify porque es menos obstinado y más configurable. Si hay suficiente demanda, consideraré agregar una opción para alternar entre JS Beautify y Prettier.
He usado todas estas bibliotecas antes, por lo que la integración fue bastante fácil. 😅
Este proyecto fue posible gracias a mi aplicación, Surreal CMS. Si está buscando un excelente CMS para sitios web estáticos, compruébelo: ¡es gratis para sitios web personales, educativos y sin fines de lucro!
Ah, y si se pregunta qué editor utilicé … es Visual Studio Code. 👨🏻💻