Lo que vas a crearSiendo programador independiente, a menudo necesito arreglar el código de otra persona o mover un tema de una plataforma a otra. Esto lleva a una amplia lista de código no comentado que necesito averiguar.
En este tutorial, le mostraré mi flujo de trabajo para encontrar rápidamente el código y documentarlo de manera que sepa lo que está haciendo. Estaré usando Monodraw aplicación para crear arte ASCII.
ASCII significa Código Estándar Americano para el Intercambio de Información.
Para comprender mi enfoque, debe darse cuenta de que la mayoría de los editores de códigos modernos tienen una función llamada minimapa. Este es un resumen condensado del código que se encuentra en el lado derecho del editor..
Minimapa en el texto sublime Atom y corchetesEstos son tres de los editores más comunes con sus minimapas.. Texto sublime 3 tiene minimapas incorporadas, mientras que Átomo, y Soportes tenerlo usando un plugin.
El minimapa le permite ver fácilmente la estructura del código, pero no puede leerlo. Para ver las cosas más claramente, puedes agregar Arte ASCII.
Arte ASCII está utilizando símbolos ASCII normales para crear una imagen. Algunas personas usan la marca hash para deletrear palabras.
# # # # ###### ## ##### ###### ##### # # # # # # # # # # ####### ##### # # # # ##### # # # # ###### # # # ##### # # # # # # # # # # # # ###### # # ## ### ###### # #
Dado que la mayoría de los editores de código utilizan fuentes monoespaciadas, el arte ASCII es factible. Pero, siempre me cuesta trabajo que se vea bien. Para mí, se necesita mucho esfuerzo para crear legible Arte ASCII.
Solicitud de Monodraw Eso es donde Monodraw Puede ayudar al codificador. Pensar en Monodraw como siendo Ilustrador Adobe para Arte ASCII. Hace la creación de Arte ASCII No solo es fácil, sino que también le brinda más opciones y formas de agregar detalles ilustrativos a su código..
Cuando Monodraw se abre, tiene un área de trabajo en blanco dividida en cuadrados. Cada cuadrado es un área de símbolo ASCII. Entonces puedes fácilmente dibujar el arte ASCII que quieras. Monodraw automatiza la mayor parte por ti.
El lado izquierdo enumera los objetos en su área de trabajo con opciones para moverse hacia adelante y hacia atrás en orden visual. Cada objeto tiene un nombre predeterminado, pero puede cambiarlo a algo más descriptivo. El lado derecho es el inspector. Usas el inspector para inspeccionar los parámetros de los objetos y hacer ajustes..
Haciendo clic en el Texto En la barra de herramientas, puede crear un área de texto en el área de trabajo. Se mostrará un cuadro de diálogo donde se escribe el texto que desea. Seleccione el tipo de representación en el inspector en el lado derecho.
Aquí, he seleccionado el Bandera Estilo de fuente. Monodraw Tiene 149 estilos de fuente diferentes para elegir. Si desea cambiar el texto, haga doble clic en el área de texto para abrir el cuadro de diálogo nuevamente..
Mueva el área de texto alrededor en el área de trabajo. El inspector de la derecha le permite agregar bordes, sombras, alineación y varias otras opciones para obtener el efecto que desea.
Etiqueta de cabecera isométrica con bordelos Épico La fuente se muestra muy bien en el minimapa. Lo uso con un borde para ayudarlo a sobresalir en el código. Para exportar el arte ASCII a su editor, seleccione del menú Archivo - Exportar.
Diálogo de exportaciónExisten opciones para exportar como texto ASCII, PNG o SVG. La opción de texto ASCII tiene una opción para copiar al portapapeles en la esquina inferior izquierda. Esa es la principal forma en que exporto mi arte. Lo pego en el código fuente.
La opción de estilo de comentario incluirá el arte ASCII en el estilo de comentario para el idioma que está utilizando. Estaré usando el XML / HTML estilo de comentario en este tutorial.
Una nota de precaución: Si el arte ASCII no se ve bien en el editor de código, entonces el tema del editor no usa una fuente monoespaciada, tiene el ajuste de palabra activado o el tema del editor usa comentarios en cursiva. Tendrá que ajustar el tema y las opciones de ajuste de palabras. Para obtener una mejor coincidencia, abre las preferencias con Mando-, (Comando Coma).
Preferencias En el cuadro de diálogo de preferencias, configure la fuente para que coincida con la fuente utilizada en su editor. Desde que uso Menlo Regular 14 en Texto sublime, Configuré las preferencias a la misma fuente y tamaño..
Administro algunos sitios web que creé originalmente en WordPress, pero estoy en el lento proceso de moverlos a Craft CMS. Ya que quieren mantener el mismo tema, tengo que volver a crear el tema.
La forma más fácil de comenzar es volcar el código de la página abriendo el sitio web en un navegador, clic secundario dentro del sitio, seleccione Ver código fuente, y copia y pega la fuente en el editor de texto. Eso es más rápido que ir a través de todos los archivos diferentes en WordPress.
Una vez que tengo el archivo fuente básico, uso Texto sublime bonito formatearlo con el HTML-CSS-JS Prettify paquete. Una vez formateado muy bien, puedo etiquetar fácilmente las secciones.
HTML con nombres de sección Crear cada etiqueta y colocarlas en el código solo toma segundos. Si lo hubiera hecho a mano, hubiera tardado horas..
Puedes ver en el minimapa los diferentes banners para cada sección. Cuando necesite una sección en particular, puede verla fácilmente y hacer clic en ella en el minimapa..
Al hacer clic en cualquier lugar del minimapa, se accede a esa ubicación en el código. Si es difícil de ver, aumente el tamaño de la fuente o pruebe uno de los otros estilos.
Ya que Monodraw ayuda a crear formas, puede usarlo para documentar el diseño del sitio. Utilizando la Caja herramienta, cree cada área y etiquétela con texto usando la Caja de texto sin establecer un estilo de fuente.
Documentación de diseño del sitio A medida que crea elementos, puede ver cada elemento en el lado izquierdo de la pantalla. Puede hacer clic en varios elementos, como hice para el cuadro de la barra lateral y el texto, y usar las herramientas de alineación en el inspector de la derecha para centrar el texto..
Documentación de diseño del sitio exportada a texto sublime Exportarlo y colocarlo en el editor para dar una excelente vista general del diseño de esta página web.
Ejemplo de diagrama de flujo simple Incluso puede usarlo para crear diagramas de flujo que puede agregar a JavaScript código.
Lo creé con tres cuadros, un diamante, tres líneas y un texto. Cuando selecciona la herramienta de línea y selecciona un objeto que está allí, le mostrará puntos azules que puede conectar la línea. Imagina hacer esto a mano..
Si quieres imitar una imagen, usa la Imagen Para seleccionar un elemento, seleccione la imagen del disco duro y trátela con la herramienta de lápiz y seleccione diferentes caracteres ASCII para pintar.
Esto requiere más de una habilidad artística para hacerlo bien, pero otros han hecho réplicas de iPhone y más.
Escribí este tutorial con la versión 1.0.1. Están trabajando y casi listos para enviar, versión 1.1.
Una de las grandes características nuevas será la capacidad de crear Fragmentos y compartirlos con los demás. Actualmente tengo un archivo con piezas de Arte ASCII que copio y pego en otros documentos.
Teniendo Fragmentos será aún más fácil.
El archivo de descarga contiene un Monodraw documentos con el Arte ASCII utilizado en este tutorial. Si quieres aprender más sobre Arte ASCII, Es posible que desee revisar estos sitios web:
Ahora que ve lo fácil que es agregar ASCII Art a su código, siga adelante y pruébelo. Me ha ahorrado muchas horas de búsqueda de la sección correcta de código.
Puedes usar un programa de reducción para eliminar los comentarios y compactar el código. los Reducir paquete para Texto sublime es lo que yo uso. No olvides guardar tu bonita versión también..
Accentsconagua
Share