Share
Cosa starai creandoEssendo un programmatore freelance, ho spesso bisogno di correggere il codice di qualcun altro o spostare un tema da una piattaforma all'altra. Questo porta a un vasto elenco di codice non commentato che ho bisogno di capire.
In questo tutorial, ti mostrerò il mio flusso di lavoro per trovare rapidamente il mio modo di aggirare il codice e documentarlo in modo che io sappia cosa sta facendo. Userò Monodraw applicazione per creare arte ASCII.
ASCII significa American Standard Code for Information Interchange.
Per capire il mio approccio, è necessario rendersi conto che la maggior parte dei moderni editor di codice ha la funzione chiamata minimappa. Questa è una panoramica condensata del codice che si trova sul lato destro dell'editor.
Minimappa nell'atomo e nelle staffe del testo sublimeQuesti sono tre degli editor più comuni con i loro minimappa. Testo sublime 3 ha minimappa integrato, mentre Atomo, e Parentesi averlo usando un plugin.
La minimappa ti permette di vedere facilmente la struttura del codice, ma non puoi leggerlo. Per vedere le cose in modo più chiaro, puoi aggiungere Arte ASCII.
Arte ASCII sta usando i normali simboli ASCII per creare un'immagine. Alcune persone usano il marchio hash per compitare le parole.
# # # # ###### ## ##### ###### ##### # # # # # # # # # # ####### ##### # # # # ##### # # # # # ###### # # # ##### # # # # # # # # # # # # ###### # # ## ### ###### # #
Poiché la maggior parte degli editor di codice usa font a spaziatura fissa, l'arte ASCII è fattibile. Ma ho sempre difficoltà a farlo sembrare giusto. Per me, ci vuole molto sforzo per creare leggibile Arte ASCII.
Applicazione Monodraw Ecco dove Monodraw può aiutare il programmatore. Pensa a Monodraw come Adobe Illustrator per Arte ASCII. Rende la creazione di Arte ASCII non solo è facile, ma ti offre più opzioni e modi per aggiungere dettagli illustrativi al tuo codice.
quando Monodraw si apre, si dispone di un'area di lavoro vuota divisa in quadrati. Ogni quadrato è un'area di simboli ASCII. Puoi quindi facilmente disegnare l'arte ASCII che vuoi. Monodraw automatizza la maggior parte di esso per te.
La parte sinistra elenca gli oggetti nell'area di lavoro con le opzioni per spostarsi avanti e indietro in ordine visivo. Ogni oggetto ha un nome predefinito, ma puoi cambiarlo in qualcosa di più descrittivo. Il lato destro è l'ispettore. Si utilizza l'ispettore per ispezionare i parametri degli oggetti e apportare modifiche.
Cliccando sul Testo icona nella barra degli strumenti, è possibile creare un'area di testo nell'area di lavoro. Mostrerà una finestra di dialogo in cui digiti il testo che vuoi. Seleziona il tipo di rendering nell'ispettore sul lato destro.
Qui, ho selezionato il bandiera stile del font. Monodraw ha 149 stili di carattere diversi tra cui scegliere. Se vuoi cambiare il testo, fai doppio clic sull'area di testo per aprire nuovamente la finestra di dialogo.
Sposta l'area di testo nell'area di lavoro. L'ispettore sulla destra ti consente di aggiungere bordi, ombre esterne, allineamento e molte altre opzioni per ottenere l'effetto desiderato.
Tag di intestazione isometrica con bordoIl Epico il font si presenta alla grande nella minimappa. Lo uso con un bordo per farlo risaltare nel codice. Per esportare l'arte ASCII nel tuo editor, seleziona dal menu File - Esporta.
Esporta finestra di dialogoEsistono opzioni da esportare come testo ASCII, PNG o SVG. L'opzione di testo ASCII ha un'opzione per copiare negli appunti nell'angolo in basso a sinistra. Questo è il modo principale in cui esporto la mia arte. Lo incollo nel codice sorgente.
L'opzione di stile commento racchiude l'arte ASCII nello stile di commento per la lingua che stai utilizzando. Userò il XML / HTML stile di commento in questo tutorial.
Una nota di cautela: se l'arte ASCII non sembra corretta nell'editor di codice, il tema dell'editor non utilizza un carattere a spaziatura fissa, è attivato il ritorno a capo automatico o il tema dell'editor utilizza i commenti in corsivo. Avrai bisogno di regolare il tema e le opzioni di ritorno a capo. Per ottenere una corrispondenza migliore, apri le preferenze con Comando-, (Comma Comma).
Preferenze Nella finestra di dialogo delle preferenze, imposta il carattere in modo che corrisponda al carattere utilizzato nell'editor. Dal momento che uso Menlo Regular 14 in Testo sublime, Ho impostato le preferenze sullo stesso carattere e dimensioni.
Gestisco alcuni siti Web in cui sono stato originariamente creato WordPress, ma sono nel lento processo di trasferirli Craft CMS. Dal momento che vogliono mantenere lo stesso tema, devo ricreare il tema.
Il modo più semplice per iniziare è scaricare il codice della pagina aprendo il sito Web in un browser, secondario-click all'interno del sito, selezionare Visualizza origine pagina, e copia e incolla il sorgente nell'editor di testo. È più veloce rispetto a tutti i diversi file in WordPress.
Una volta ho il file sorgente di base, io uso Testo sublime per formattarlo con il HTML-CSS-JS Prettify pacchetto. Una volta formattato correttamente, posso facilmente etichettare le sezioni.
HTML con nomi di sezioni Creare ciascuna etichetta e inserirle nel codice richiede solo pochi secondi. Se l'avessi fatto a mano, ci sarebbero volute ore.
Puoi vedere nella minimappa i diversi banner per ogni sezione. Quando hai bisogno di una sezione particolare, puoi facilmente vederla e cliccarci sopra nella minimappa.
Cliccando ovunque sulla minimappa ti porta in quella posizione nel codice. Se è difficile da vedere, aumenta la dimensione del carattere o prova uno degli altri stili.
Da Monodraw aiuta a creare forme, puoi usarlo per documentare il layout del sito. Usando il Scatola strumento, crea ogni area ed etichettala con il testo usando il Casella di testo senza impostare uno stile di carattere.
Documentazione sul layout del sito Mentre crei oggetti, puoi vedere ogni oggetto nella parte sinistra dello schermo. Puoi fare clic su più elementi, come ho fatto per la casella della barra laterale e il testo, e utilizzare gli strumenti di allineamento nell'ispettore a destra per centrare il testo.
Documentazione del layout del sito esportata in testo sublime Esportandole e inseritele nell'editor per dare una grande visione del layout per questa pagina web.
Esempio di diagramma di flusso semplice Puoi persino usarlo per creare diagrammi di flusso che puoi aggiungere JavaScript codice.
Ho creato questo con tre scatole, un diamante, tre linee e del testo. Quando selezioni lo strumento linea e selezioni un oggetto che è lì, ti mostreranno dei punti blu che puoi collegare alla linea. Immagina di farlo a mano.
Se vuoi imitare un'immagine, usa il Immagine elemento, selezionare l'immagine dal disco rigido e tracciarla con lo strumento penna e selezionare diversi caratteri ASCII in dipingere.
Questo richiede più di un'abilità artistica per farlo bene, ma altri hanno fatto repliche iPhone e altro ancora.
Ho scritto questo tutorial con la versione 1.0.1. Stanno lavorando e sono quasi pronti per la spedizione, versione 1.1.
Una delle grandi nuove funzionalità sarà la capacità di creare Frammenti e condividili con gli altri. Al momento ho un file con pezzi di Arte ASCII che copio e incollo su altri documenti.
avere Frammenti sarà ancora più facile.
Il file di download contiene a Monodraw documenti con Arte ASCII usato in questo tutorial. Se vuoi saperne di più Arte ASCII, potresti voler controllare questi siti web:
Ora che vedi come è facile aggiungere ASCII Art al tuo codice, vai avanti e provalo. Mi ha risparmiato molte ore di ricerca della giusta sezione di codice.
È possibile utilizzare un programma minify per rimuovere i commenti e compattare il codice. Il minify pacchetto per Testo sublime è quello che uso. Non dimenticare di mantenere anche la tua bella versione.
Accentsconagua