Share
Vad du ska skapaAtt vara en frilansprogrammerare behöver jag ofta fixa någon annans kod eller flytta ett tema från en plattform till en annan. Detta leder till en stor lista med okommentarisk kod som jag behöver räkna ut.
I den här handledningen visar jag mitt arbetsflöde för att snabbt hitta mig runt kod och dokumentera det så att jag vet vad den gör. Jag ska använda Monodraw ansökan om att skapa ASCII Art.
ASCII betyder amerikansk standardkod för informationsutbyte.
För att förstå mitt tillvägagångssätt måste du inse att de flesta moderna kodredigerare har funktionen som kallas ett minimaprogram. Detta är en sammanfattad översikt över koden som sitter på höger sida av redigeraren.
Minimap i Sublime Text Atom och parentesDessa är tre av de vanligaste redaktörerna med sina minimaps. Sublim Text 3 har minimaps inbyggd, medan Atom, och konsoler ha det med hjälp av ett plugin.
Minimaprogrammet låter dig enkelt se kodens struktur, men du kan inte läsa den. För att se saker tydligare kan du lägga till ASCII Art.
ASCII Art använder normala ASCII-symboler för att skapa en bild. Vissa människor använder hash-märket för att stava ord.
# # # # ############################################## ################################################### ### ########
Eftersom de flesta kodredigerare använder monospaced-teckensnitt är ASCII-arten genomförbar. Men jag har alltid svårt att få det att se rätt ut. För mig krävs det mycket för att skapa läsbar ASCII Art.
Monodraw Application Det är där Monodraw kan hjälpa kodaren. Tänk på Monodraw som att vara Adobe Illustrator för ASCII Art. Det gör skapandet av ASCII Art inte bara lätt, men ger dig fler alternativ och sätt att lägga till illustrativa detaljer i din kod.
När Monodraw öppnas, du har ett tomt arbetsområde uppdelat i rutor. Varje kvadrat är ett ASCII-symbolområde. Du kan då enkelt dra ASCII-konsten du vill ha. Monodraw automatiserar det mesta för dig.
Den vänstra sidan visar objekten i ditt arbetsområde med alternativ för att flytta fram och tillbaka i visuell ordning. Varje objekt har ett standardnamn, men du kan ändra det till något mer beskrivande. Den högra sidan är inspektören. Du använder inspektören för att inspektera objektets parametrar och göra justeringar.
Genom att klicka på Text ikonen i verktygsfältet kan du skapa ett textområde i arbetsytan. Det kommer att visa en dialogruta där du skriver in texten du vill ha. Välj typ av utförande i inspektorn på höger sida.
Här har jag valt Baner typsnitt. Monodraw har 149 olika teckensnitt att välja mellan. Om du vill ändra texten dubbelklickar du på textområdet för att öppna dialogrutan igen.
Flytta textområdet runt i arbetsytan. Inspektören till höger låter dig lägga till gränser, släppa skuggor, justera och flera andra alternativ för att få den effekt du vill ha.
Isometrisk Header Tag With BorderDe Episk teckensnittet visar sig bra i minimaprogrammet. Jag använder den med en gräns för att hjälpa den att stå ut i koden. För att exportera ASCII-konsten till din editor, välj från menyn File - Export.
Export DialogAlternativ finns att exportera som ASCII-text, PNG eller SVG. Alternativet ASCII-text har ett alternativ att kopiera till urklippet längst ner till vänster. Det är det viktigaste sättet att exportera min konst. Jag klistrar in den i källkoden.
Kommandotypalternativet kommer att bifoga ASCII-konsten i kommentarstilen för språket du använder. Jag ska använda XML / HTML kommentar stil i denna handledning.
En försiktighetsåtgärd: Om ASCII-arten inte ser rätt i kodredigeraren använder editor-temat inte heller ett monospaced-teckensnitt, ordlindning är påslaget eller redigeratema använder kursiverade kommentarer. Du måste justera alternativen för tema och ordbrytning. För att få en bättre match, öppna inställningarna med Kommando-, (Kommando Komma).
Inställningar I inställningsdialogrutan ställer du in teckensnittet för att matcha det teckensnitt som används i redigeraren. Eftersom jag använder Menlo Regular 14 in Sublim Text, Jag ställer in inställningarna till samma typsnitt och storlek.
Jag hanterar några webbplatser som jag ursprungligen skapade i Wordpress, men jag är i den långsamma processen att flytta dem till Craft CMS. Eftersom de vill behålla samma tema måste jag återskapa temat.
Det enklaste sättet att komma igång är att dumpa sidkoden genom att öppna webbplatsen i en webbläsare, sekundär klick på sidan, välj Visa sidans källa, och kopiera och klistra in källan till textredigeraren. Det är snabbare än att gå igenom alla de olika filerna i Wordpress.
När jag har den grundläggande källfilen använder jag Sublim Text att formatera det ganska bra med HTML-CSS-JS Prettify paket. När du har formaterats snyggt kan jag enkelt märka avsnitten.
HTML med avsnittnamn Skapa varje etikett och placera dem i koden tar bara sekunder. Om jag gjorde det för hand, skulle det ha gått timmar.
Du kan se i miniporten de olika bannersna för varje sektion. När du behöver ett visst avsnitt kan du enkelt se och klicka på det i minimaprogrammet.
Om du klickar någonstans på minimapetet tar du till den platsen i koden. Om det är svårt att se, öka din stilsortsstorlek eller prova en av de andra stilarna.
Eftersom Monodraw hjälper till att skapa former, du kan använda den för att dokumentera layouten för webbplatsen. Använda Låda verktyg, skapa varje område och märka det med text med hjälp av Textruta utan att ställa in en typsnitt.
Dokumentation för webbplatslayout När du skapar objekt kan du se varje objekt på skärmens vänstra sida. Du kan klicka på flera objekt, som jag gjorde för sidofältet och texten, och använd justeringsverktygen i inspektorn till höger för att centrera texten.
Sidlayoutdokumentation Exporterad till Sublim Text Exportera det och placera det i redigeraren för att ge en bra överblick över layouten för den här webbsidan.
Enkelt flödesschema exempel Du kan till och med använda den för att skapa flödesdiagram som du kan lägga till JavaScript koda.
Jag skapade detta med tre lådor, en diamant, tre linjer och lite text. När du väljer linjevärdet och väljer ett objekt som finns där visas det blå prickar som du kan ansluta linjen till. Tänk dig att göra detta för hand.
Om du vill efterlikna en bild använder du Bild element, välj bilden från hårddisken och spåra den med pennverktyget och välj olika ASCII-tecken till måla.
Detta tar mer av en konstnärlig förmåga att få det rätt, men andra har gjort iPhone replikor och mer.
Jag skrev denna handledning med version 1.0.1. De arbetar på, och är nästan redo att leverera, version 1.1.
En av de stora nya funktionerna kommer att vara möjligheten att skapa utdrag och dela dem med andra. Jag har för tillfället en fil med bitar av ASCII Art att jag kopierar och klistrar in i andra dokument.
Har utdrag kommer att bli ännu enklare.
Hämtningsfilen innehåller en Monodraw dokument med ASCII Art används i denna handledning. Om du vill lära dig mer om ASCII Art, du kanske vill kolla in dessa webbplatser:
Nu när du ser hur lätt det är att lägga till ASCII Art i din kod, fortsätt och prova. Det har sparat mig många timmar med att söka efter den rätta delen av koden.
Du kan använda ett minifiera program för att ta bort kommentarerna och komprimera koden. De minify paket för Sublim Text är vad jag använder. Glöm inte att behålla din vackra version också.
Accentsconagua