Share
Ce veți creaFiind un programator independent, deseori trebuie să reparăm codul altcuiva sau să mutăm o temă de la o platformă la alta. Acest lucru duce la o enumerare vastă a codului necomentat pe care trebuie să-l dau seama.
În acest tutorial, vă voi arăta fluxul meu de lucru pentru a găsi rapid codul meu și a-l documenta, astfel încât să știu ce face. Voi folosi Monodraw aplicație pentru crearea ASCII Art.
ASCII înseamnă codul standard american pentru schimbul de informații.
Pentru a înțelege abordarea mea, trebuie să realizați că majoritatea editorilor de coduri moderne au caracteristica numită minimap. Aceasta este o prezentare condensată a codului care se află în partea dreaptă a editorului.
Minimap în atomul de text sublim și parantezeAcestea sunt trei dintre editorii cei mai obișnuiți, cu minimele lor. Text sublim 3 are minimă construită, în timp ce Atom, și Console îl folosiți cu ajutorul unui plugin.
Minimap vă permite să vedeți ușor structura codului, dar nu îl puteți citi. Pentru a vedea lucrurile mai clar, puteți adăuga ASCII Art.
ASCII Art utilizează simboluri ASCII normale pentru a crea o imagine. Unii oameni folosesc marcajul hash pentru a preciza cuvintele.
# # # # ############################################### # # # # ##### ########################################## ### ### ###### ##
Deoarece majoritatea editorilor de cod utilizează fonturi monospațiate, arta ASCII este realizabilă. Dar, întotdeauna am greu să înțeleg bine. Pentru mine, este nevoie de mult efort pentru a crea lizibil ASCII Art.
Aplicația Monodraw Aici este locul Monodraw poate ajuta coderul. A se gandi la Monodraw ca fiind Adobe Illustrator pentru ASCII Art. Ea face crearea de ASCII Art nu numai ușor, dar vă oferă mai multe opțiuni și modalități de a adăuga detalii ilustrative la codul dvs..
Cand Monodraw se deschide, aveți o zonă de lucru goală împărțită în pătrate. Fiecare pătrat este o zonă simbol ASCII. Puteți apoi ușor a desena arta ASCII pe care o vrei. Monodraw automatizează majoritatea pentru dvs..
Partea stângă afișează obiectele din spațiul de lucru cu opțiuni pentru a vă deplasa înainte și înapoi în ordine vizuală. Fiecare obiect are un nume implicit, dar îl poți schimba la ceva mai descriptiv. Partea dreaptă este inspectorul. Utilizați inspectorul pentru a inspecta parametrii obiectelor și a efectua ajustări.
Făcând clic pe Text pictograma din bara de instrumente, puteți crea o zonă de text în spațiul de lucru. Acesta va afișa un dialog în care introduceți textul dorit. Selectați tipul de redare în inspectorul din partea dreaptă.
Aici, am selectat stindard stilul fontului. Monodraw are 149 de stiluri de fonturi diferite pentru a alege de la. Dacă doriți să modificați textul, faceți dublu clic pe zona de text pentru a deschide din nou dialogul.
Deplasați zona de text în jurul spațiului de lucru. Inspectorul din dreapta vă permite să adăugați margini, umbre, aliniere și alte câteva opțiuni pentru a obține efectul dorit.
Capsetă izometrică cu frontierăEpic fontul este foarte bun in minimap. Îl folosesc cu o graniță pentru ao ajuta să iasă în cod. Pentru a exporta arta ASCII în editorul dvs., selectați din meniul File - Export.
Dialogul de exportExistă opțiuni pentru export ca text ASCII, PNG sau SVG. Opțiunea de text ASCII are opțiunea de a copia în clipboard în colțul din stânga jos. Acesta este principalul mod în care îmi export arta. Îl lipesc în codul sursă.
Opțiunea de stil de comentariu va închide arta ASCII în stilul de comentariu pentru limba pe care o utilizați. Voi folosi XML / HTML stil de comentariu în acest tutorial.
O notă de precauție: dacă arta ASCII nu arată drept în editorul de cod, atunci tema editorului nu folosește niciun font monospațial, nu este activat cuvântul wrap sau tema editorului folosește comentarii italice. Va trebui să ajustați opțiunile de împachetare a cuvintelor și a cuvintelor. Pentru a obține o potrivire mai bună, deschideți preferințele cu Comanda-, (Command Comma).
Preferințe În dialogul de preferințe, setați fontul astfel încât să se potrivească cu fontul utilizat în editorul dvs. De când folosesc Menlo Regular 14 în Text sublim, Am setat preferințele la același font și mărime.
Gestionez câteva site-uri pe care le-am creat inițial WordPress, dar eu sunt în procesul lent de a le muta Craft CMS. Deoarece vor să păstreze aceeași temă, trebuie să re-creez tema.
Cel mai simplu mod de a începe este să dați codul paginii deschizând site-ul într-un browser, Clic secundar în interiorul site-ului, selectați Vezi sursa paginii, și copiați și inserați sursa în editorul de text. E mai rapid decât trecând prin toate fișierele diferite din WordPress.
Odată ce am fișierul de bază de bază, îl folosesc Text sublim pentru ao format destul cu HTML-CSS-JS Prettify pachet. Odată formatat frumos, pot eticheta cu ușurință secțiunile.
Cod HTML cu nume de secțiuni Crearea fiecărei etichete și plasarea acesteia în cod durează doar câteva secunde. Dacă aș fi făcut-o manual, ar fi fost nevoie de ore.
Puteți vedea în minime diferite bannere pentru fiecare secțiune. Când aveți nevoie de o anumită secțiune, puteți vedea cu ușurință și faceți clic pe ea în minimap.
Dacă faceți clic pe oriunde pe minim, veți ajunge în acel loc în cod. Dacă este greu de văzut, măriți dimensiunea fontului sau încercați unul dintre celelalte stiluri.
De cand Monodraw ajută la crearea de forme, îl puteți folosi pentru a documenta aspectul site-ului. Utilizarea Cutie instrument, creați fiecare zonă și etichetați-o cu text folosind Casetă de text fără a seta un stil de font.
Documentația privind aspectul site-ului Pe măsură ce creați elemente, puteți vedea fiecare element din partea stângă a ecranului. Puteți să faceți clic pe mai multe elemente, așa cum am făcut pentru bara laterală și text, și să folosesc instrumentele de aliniere din inspectorul din dreapta pentru a centra textul.
Documentația privind aspectul paginilor este exportată în text sublim Exportați-l și plasați-l în editor pentru a oferi o imagine superbă a aspectului acestei pagini web.
Exemplu de schemă simplă Puteți chiar să-l utilizați pentru a crea scheme pe care le puteți adăuga JavaScript cod.
Am creat acest lucru cu trei cutii, un diamant, trei linii și un text. Când selectați instrumentul de linie și selectați un obiect care este acolo, acesta vă va afișa puncte albastre pe care le puteți conecta. Imaginați-vă că faceți acest lucru manual.
Dacă doriți să imitați o imagine, utilizați Imagine element, selectați imaginea de pe unitatea de disc și urmăriți-o cu instrumentul stilou și selectând diferite caractere ASCII a picta.
Acest lucru are nevoie de mai mult de o capacitate artistică pentru a obține dreptate, dar alții au făcut replici iPhone și multe altele.
Am scris acest tutorial cu versiunea 1.0.1. Ei lucrează și sunt aproape gata să livreze versiunea 1.1.
Una dintre noile caracteristici noi va fi abilitatea de a crea Snippeturi și împărtășiți-le cu alții. În prezent am un fișier cu bucăți de ASCII Art pe care le copiați și inserați în alte documente.
Având Snippeturi va fi chiar mai ușor.
Fișierul de descărcare conține a Monodraw documente cu ASCII Art utilizate în acest tutorial. Dacă doriți să aflați mai multe despre ASCII Art, vă recomandăm să consultați aceste site-uri web:
Acum, când vedeți cât de ușor este să adăugați arta ASCII la codul dvs., faceți-o și încercați. Mi-a salvat multe ore de căutare a secțiunii din dreapta a codului.
Aveți posibilitatea să utilizați un program minify pentru a dezbate comentariile și pentru a compacta codul. Comprimați pachet pentru Text sublim este ceea ce folosesc. Nu uitați să vă păstrați și versiunea drăguță.
Accentsconagua