Share
Wat je gaat creërenAls freelance programmeur moet ik vaak de code van iemand anders repareren of een thema van het ene platform naar het andere verplaatsen. Dit leidt tot een enorme lijst van niet-gecomprimeerde code die ik moet achterhalen.
In deze zelfstudie laat ik je mijn workflow zien om snel de weg te vinden in code en deze te documenteren, zodat ik weet wat het doet. Ik zal gebruiken Monodraw applicatie om ASCII Art te creëren.
ASCII betekent Amerikaanse standaardcode voor informatie-uitwisseling.
Om mijn benadering te begrijpen, moet je je realiseren dat de meeste moderne codebewerkers de functie hebben die een minimap wordt genoemd. Dit is een verkort overzicht van de code aan de rechterkant van de editor.
Minimaliseren in sublieme tekstatomen en haakjesDit zijn drie van de meest gebruikte editors met hun minimaps. Sublieme tekst 3 heeft ingebouwde minimaps Atoom, en beugels heb het met behulp van een plug-in.
Met de minimap kunt u gemakkelijk de structuur van de code zien, maar u kunt deze niet lezen. Om dingen duidelijker te zien, kun je toevoegen ASCII Art.
ASCII Art gebruikt normale ASCII-symbolen om een afbeelding te maken. Sommige mensen gebruiken het hekje om woorden te spellen.
# # # # ###### ## ##### ###### ##### # # # # # # # # # # ####### ##### # # # # # # # ### ## # # # ###### # # # ##### # # # # # # # # # # # # ###### # # ## ### ###### # #
Omdat de meeste code-editors enkelzijdige lettertypen gebruiken, is ASCII-kunst mogelijk. Maar ik kan het altijd moeilijk krijgen om er goed uit te zien. Voor mij kost het veel moeite om leesbaar te maken ASCII Art.
Monodraw-toepassing Dat is waar Monodraw kan de codeur helpen. Denken aan Monodraw als wezen Adobe Illustrator voor ASCII Art. Het maakt het creëren van ASCII Art niet alleen gemakkelijk, maar biedt u ook meer opties en manieren om illustratieve details aan uw code toe te voegen.
Wanneer Monodraw opent, hebt u een leeg werkgebied verdeeld in vierkanten. Elk vierkant is een ASCII-symboolgebied. Je kunt dan gemakkelijk trek de ASCII-kunst die je wilt. Monodraw automatiseert het meeste voor u.
Aan de linkerkant worden de objecten in uw werkruimte weergegeven met opties om heen en weer te gaan in visuele volgorde. Elk object heeft een standaardnaam, maar u kunt dit wijzigen in iets dat meer beschrijvend is. De rechterkant is de inspecteur. U gebruikt de inspector om de parameters van objecten te inspecteren en aanpassingen door te voeren.
Door op te klikken Tekst pictogram in de werkbalk, kunt u een tekstgebied in de werkruimte maken. Er verschijnt een dialoogvenster waarin u de gewenste tekst typt. Selecteer het type rendering in het infovenster aan de rechterkant.
Hier heb ik de banier lettertype. Monodraw heeft 149 verschillende lettertypen om uit te kiezen. Als u de tekst wilt wijzigen, dubbelklikt u op het tekstgebied om het dialoogvenster opnieuw te openen.
Verplaats het tekstgebied in de werkruimte. Met de rechterinspectie kunt u randen toevoegen, schaduwen laten vallen, uitlijnen en verschillende andere opties om het gewenste effect te krijgen.
Isometrische koptag met randDe episch lettertype komt goed naar voren in de minimap. Ik gebruik het met een rand om het te helpen opvallen in de code. Om de ASCII-kunst naar uw editor te exporteren, selecteert u in het menu Bestand - Exporteren.
Dialoog exporterenEr bestaan opties om te exporteren als ASCII-tekst, PNG of SVG. De ASCII-tekstoptie heeft een optie om naar het klembord in de linkerbenedenhoek te kopiëren. Dat is de belangrijkste manier waarop ik mijn kunst exporteer. Ik plak het in de broncode.
De optie voor de commentaarstijl omsluit de ASCII-kunst in de commentaarstijl voor de taal die u gebruikt. Ik zal de gebruiken XML / HTML commentaarstijl in deze tutorial.
Een waarschuwing: als ASCII-kunst er niet goed uitziet in de codebewerker, gebruikt het editorthema ofwel geen letter met een vaste spatiëring, is woordomslag ingeschakeld of gebruikt het editorthema cursieve opmerkingen. U moet het thema en de tekstomloopopties aanpassen. Om een betere match te krijgen, open je de voorkeuren met Commando-, (Command Comma).
voorkeuren Stel in het dialoogvenster voor voorkeuren het lettertype in op het lettertype dat in uw editor wordt gebruikt. Sinds ik Menlo Regular 14 in gebruik Sublieme tekst, Ik heb de voorkeuren ingesteld op hetzelfde lettertype en dezelfde grootte.
Ik beheer enkele websites die ik oorspronkelijk heb gemaakt WordPress, maar ik ben in het langzame proces van verhuizen naar Craft CMS. Omdat ze hetzelfde thema willen behouden, moet ik het thema opnieuw maken.
De eenvoudigste manier om aan de slag te gaan, is door de paginacode te dumpen door de website in een browser te openen, secundair-click binnen de site, selecteer Bekijk paginabron, en kopieer en plak de bron in de teksteditor. Dat is sneller dan alle verschillende bestanden doorlopen WordPress.
Zodra ik het basisbronbestand heb, gebruik ik het Sublieme tekst om het mooi te formatteren met de HTML-CSS-JS Prettify pakket. Eenmaal mooi geformatteerd, kan ik eenvoudig de secties labelen.
HTML met sectienamen Het maken van elk label en het plaatsen ervan in de code duurt slechts enkele seconden. Als ik het met de hand deed, zou het uren duren.
Je kunt in de minimap de verschillende banners voor elke sectie zien. Wanneer u een bepaald gedeelte nodig heeft, kunt u het eenvoudig zien en erop klikken in de minimap.
Klik ergens op de minimap om naar die locatie in de code te gaan. Als het moeilijk te zien is, verhoog dan je lettergrootte of probeer een van de andere stijlen.
Sinds Monodraw helpt om vormen te maken, je kunt het gebruiken om de lay-out voor de site te documenteren. De ... gebruiken Doos gereedschap, maak elk gebied en label het met tekst met behulp van de Tekstvak zonder een letterstijl in te stellen.
Documentatie voor sitelay-out Terwijl u items maakt, ziet u elk item aan de linkerkant van het scherm. U kunt op meerdere items klikken, zoals ik deed voor de zijbalk en de tekst, en de uitlijningshulpmiddelen gebruiken in de rechterinspectie om de tekst te centreren.
Site-indelingsdocumentatie geëxporteerd naar sublieme tekst Exporteer het en plaats het in de editor om een goed beeld te krijgen van de lay-out voor deze webpagina.
Eenvoudig stroomdiagramvoorbeeld U kunt het zelfs gebruiken om stroomdiagrammen te maken waaraan u kunt toevoegen JavaScript code.
Ik heb dit gemaakt met drie vakken, één ruit, drie regels en wat tekst. Wanneer u het lijngereedschap selecteert en een object selecteert dat zich daar bevindt, toont het u blauwe punten waarmee u de lijn kunt verbinden. Stel je voor dat je dit met de hand doet.
Als u een afbeelding wilt nabootsen, gebruikt u de afbeelding element, selecteert u de afbeelding van de harde schijf en volgt u deze met het pengereedschap en selecteert u verschillende ASCII-tekens in verf.
Dit vereist meer artistieke vaardigheden om het goed te doen, maar anderen hebben iPhone-replica's en meer gemaakt.
Ik heb deze zelfstudie geschreven met versie 1.0.1. Ze werken eraan en zijn bijna klaar om te verzenden, versie 1.1.
Een van de geweldige nieuwe functies is de mogelijkheid om te maken snippets en deel ze met anderen. Ik heb momenteel een bestand met stukjes ASCII Art die ik kopieer en plak in andere documenten.
Het hebben van snippets wordt nog eenvoudiger.
Het downloadbestand bevat een Monodraw documenten met de ASCII Art gebruikt in deze tutorial. Als u meer wilt weten over ASCII Art, misschien wilt u deze websites bekijken:
Nu u ziet hoe eenvoudig het is om ASCII Art aan uw code toe te voegen, doe het en probeer het eens. Het heeft me vele uren aan zoeken naar het juiste deel van de code bespaard.
U kunt een verkleinen programma gebruiken om de opmerkingen te verwijderen en de code te comprimeren. De Kleineren pakket voor Sublieme tekst is wat ik gebruik. Vergeet ook niet je mooie versie te houden.
Accentsconagua