Share
Hva du skal skapeÅ være freelance programmerer, må jeg ofte fikse en andres kode eller flytte et tema fra en plattform til en annen. Dette fører til stor liste over uncommented kode som jeg trenger å finne ut.
I denne veiledningen vil jeg vise deg arbeidsflyten min for raskt å finne veien rundt kode og dokumentere den slik at jeg vet hva den gjør. Jeg skal bruke Monodraw søknad om å lage ASCII Art.
ASCII betyr amerikansk standardkode for informasjonsutveksling.
For å forstå min tilnærming må du innse at de fleste moderne kodeditorer har funksjonen kalt en minimap. Dette er en kondensert oversikt over koden som sitter på høyre side av redaktøren.
Minimap i Sublime Text Atom og BracketsDette er tre av de vanligste redaktørene med sine minimaps. Sublim tekst 3 har minimaps innbygget, mens Atom, og brak~~POS=TRUNC ha det ved hjelp av et plugin.
Minimaprogrammet lar deg enkelt se strukturen i koden, men du kan ikke lese den. For å se ting tydeligere, kan du legge til ASCII Art.
ASCII Art bruker normale ASCII-symboler for å lage et bilde. Noen mennesker bruker hash-merket til å stave ord ut.
# # # # ############################################### ################################################### ### ###### # #
Siden de fleste kodeditorer bruker monospaced skrifttyper, er ASCII-art mulig. Men jeg har alltid det vanskelig å få det til å se riktig ut. For meg tar det mye arbeid for å lage lesbar ASCII Art.
Monodraw-applikasjon Det er der Monodraw kan hjelpe koderen. Tenker på Monodraw som værende Adobe Illustrator til ASCII Art. Det gjør skaperverket av ASCII Art Ikke bare enkelt, men gir deg flere alternativer og måter å legge til illustrative detaljer til koden din.
Når Monodraw åpner, har du et tomt arbeidsområde delt inn i firkanter. Hver firkant er et ASCII-symbolområde. Du kan da enkelt tegne ASCII-kunst du vil ha. Monodraw automatiserer det meste for deg.
På venstre side vises objekter i arbeidsområdet med muligheter for å bevege seg frem og tilbake i visuell rekkefølge. Hvert objekt har et standardnavn, men du kan endre det til noe mer beskrivende. Høyre side er inspektøren. Du bruker inspektøren til å inspisere objekternes parametre og foreta justeringer.
Ved å klikke på Tekst ikonet i verktøylinjen, kan du opprette et tekstområde i arbeidsområdet. Det vil vise en dialog der du skriver inn teksten du vil ha. Velg type gjengivelse i inspektøren på høyre side.
Her har jeg valgt banner fontstil. Monodraw har 149 forskjellige skriftstiler å velge mellom. Hvis du vil endre teksten, dobbeltklikker du på tekstområdet for å åpne dialogboksen igjen.
Flytt tekstområdet rundt i arbeidsområdet. Inspektøren til høyre lar deg legge til grenser, slippe skygger, justering og flere andre alternativer for å få den effekten du vil ha.
Isometrisk topptekst med kantlinjeDe Epic fonten viser seg bra i minimaporten. Jeg bruker den med en grense for å hjelpe den skille seg ut i koden. For å eksportere ASCII-kunst til redaktøren din, velg fra menyen Fil - Eksporter.
Eksporter dialogAlternativer eksisterer for eksport som ASCII-tekst, PNG eller SVG. Alternativet ASCII-tekst har et alternativ å kopiere til utklippstavlen nederst til venstre. Det er den viktigste måten jeg eksporterer min kunst på. Jeg limer den inn i kildekoden.
Alternativet Kommentartilstand vil legge ved ASCII-kunst i kommentarstilen for språket du bruker. Jeg skal bruke XML / HTML kommentar stil i denne opplæringen.
Et forsiktighetsvarsel: hvis ASCII-kunst ikke ser rett i kodeditoren, er editor-temaet heller ikke bruk av en monospaced-skrift, har ordlås på eller editor-temaet bruker kursiverte kommentarer. Du må justere tema og ordbryteralternativer. For å få en bedre kamp, åpne innstillingene med Kommando-, (Command Comma).
Preferanser I innstillingsdialogboksen angir du skrifttypen for å matche skrifttypen som brukes i redigeringsprogrammet. Siden jeg bruker Menlo Regular 14 i Sublim tekst, Jeg angir preferansene til samme skrift og størrelse.
Jeg administrerer noen nettsteder som jeg opprinnelig opprettet WordPress, men jeg er i den langsomme prosessen med å flytte dem til Craft CMS. Siden de vil beholde det samme temaet, må jeg gjenopprette temaet.
Den enkleste måten å komme i gang er å dumpe sidekoden ved å åpne nettsiden i en nettleser, sekundærklikk På siden, velg Vis sidekilde, og kopier og lim inn kilden til tekstredigeringsprogrammet. Det er raskere enn å gå gjennom alle de forskjellige filene i WordPress.
Når jeg har den grunnleggende kildefilen, bruker jeg Sublim tekst å formatere det med HTML-CSS-JS Prettify pakke. Når du har blitt formatert pent, kan jeg enkelt merke avdelingene.
HTML med delenavn Å lage hver etikett og plassere dem i koden tar bare sekunder. Hvis jeg gjorde det for hånd, ville det ha tatt timer.
Du kan se i minimap de forskjellige bannere for hver seksjon. Når du trenger en bestemt del, kan du enkelt se og klikke på den i minimaporten.
Hvis du klikker hvor som helst på minimapappen, tar du til den plasseringen i koden. Hvis det er vanskelig å se, øker du skriftstørrelsen eller prøv en av de andre stilene.
Siden Monodraw hjelper til med å lage figurer, du kan bruke den til å dokumentere layoutet for nettstedet. Bruker Eske verktøy, opprett hvert område og merk det med tekst ved hjelp av Tekstboks uten å sette inn en skrifttypestil.
Dokumentasjon for nettstedoppsett Når du lager elementer, kan du se hvert element i venstre side av skjermen. Du kan klikke på flere elementer, som jeg gjorde for sidebjelken og teksten, og bruk justeringsverktøyene i inspektøren til høyre for å sentrere teksten.
Dokumentasjon for nettstedlayout eksportert til sublime tekst Eksporterer den og plasser den i redaktøren for å gi en flott oversikt over oppsettet for denne nettsiden.
Enkelt Flowchart Eksempel Du kan til og med bruke den til å lage flytdiagrammer som du kan legge til Javascript kode.
Jeg opprettet dette med tre bokser, en diamant, tre linjer og litt tekst. Når du velger linjeverktøyet og velger et objekt som er der, vil det vise deg blå prikker som du kan koble linjen til. Tenk deg å gjøre dette for hånd.
Hvis du vil etterligne et bilde, bruk Bilde element, velg bildet fra harddisken og spor det med pennverktøyet og velg forskjellige ASCII-tegn til maling.
Dette tar mer av en kunstnerisk evne til å få det riktig, men andre har gjort iPhone-replikaer og mer.
Jeg skrev denne opplæringen med versjon 1.0.1. De jobber med, og er nesten klar til å sende, versjon 1.1.
En av de flotte nye funksjonene vil være evnen til å skape Tekstutdrag og del dem med andre. Jeg har for øyeblikket en fil med deler av ASCII Art at jeg kopierer og limer inn i andre dokumenter.
Å ha Tekstutdrag vil bli enda enklere.
Nedlastingsfilen inneholder en Monodraw dokumenter med ASCII Art brukt i denne opplæringen. Hvis du vil lære mer om ASCII Art, kan du sjekke ut disse nettstedene:
Nå som du ser hvor lett det er å legge til ASCII Art til koden din, kan du gå og prøve. Det har reddet meg mange timer med å søke etter den riktige delen av koden.
Du kan bruke et minifiseringsprogram for å fjerne kommentarene og komprimere koden. De Minify pakke for Sublim tekst er det jeg bruker. Ikke glem å beholde den vakre versjonen din også.
Accentsconagua