Ce que vous allez créerEn tant que programmeur indépendant, j'ai souvent besoin de corriger le code de quelqu'un d'autre ou de déplacer un thème d'une plate-forme à une autre. Cela conduit à une vaste liste de code non commenté que je dois comprendre.
Dans ce tutoriel, je vais vous montrer mon flux de travail pour trouver rapidement mon chemin dans le code et le documenter afin que je sache ce qu’il fait. Je vais utiliser Monodraw application pour créer de l'art ASCII.
ASCII signifie code standard américain pour l'échange d'informations.
Pour comprendre mon approche, vous devez comprendre que la plupart des éditeurs de code modernes possèdent la fonctionnalité appelée carte minimale. Ceci est une vue d'ensemble condensée du code qui se trouve du côté droit de l'éditeur..
Minimap in Sublime Text Atome et BracketsCe sont trois des éditeurs les plus courants avec leurs minimaps. Sublime Text 3 a minimaps intégré, tandis que Atome, et Supports l'avoir en utilisant un plugin.
La mini-carte vous permet de voir facilement la structure du code, mais vous ne pouvez pas le lire. Afin de voir les choses plus clairement, vous pouvez ajouter ASCII Art.
ASCII Art utilise des symboles ASCII normaux pour créer une image. Certaines personnes utilisent le signe dièse pour épeler des mots.
# # # # ####### ## ##### ###### ##### # # # # # # # # # # # # ########### # # # # ###### # # # # # # ###### # # # # ##### # # # # # # # # # # # # # ####### # ### ### ###### # #
Étant donné que la plupart des éditeurs de code utilisent des polices à espacement fixe, l’art ASCII est faisable. Mais j'ai toujours du mal à le faire paraître correct. Pour moi, il faut beaucoup d’efforts pour créer des fichiers lisibles. ASCII Art.
Application Monodraw C'est là où Monodraw peut aider le codeur. Penser à Monodraw comme étant Adobe Illustrator pour ASCII Art. Cela rend la création de ASCII Art non seulement facile, mais vous donne plus d'options et de moyens d'ajouter des détails illustratifs à votre code.
Quand Monodraw s'ouvre, vous avez une zone de travail vide divisée en carrés. Chaque carré est une zone de symbole ASCII. Vous pouvez alors facilement dessiner L'art ASCII que vous voulez. Monodraw automatise la plupart pour vous.
Le côté gauche répertorie les objets de votre espace de travail avec des options pour aller et venir dans l'ordre visuel. Chaque objet a un nom par défaut, mais vous pouvez le changer pour quelque chose de plus descriptif. Le côté droit est l'inspecteur. Vous utilisez l'inspecteur pour inspecter les paramètres des objets et faire des ajustements.
En cliquant sur le Texte Dans la barre d’outils, vous pouvez créer une zone de texte dans l’espace de travail. Il montrera une boîte de dialogue où vous tapez le texte que vous voulez. Sélectionnez le type de rendu dans l'inspecteur sur le côté droit.
Ici, j'ai sélectionné le Bannière le style de police. Monodraw a 149 styles de police différents à choisir. Si vous souhaitez modifier le texte, double-cliquez sur la zone de texte pour ouvrir à nouveau la boîte de dialogue..
Déplacez la zone de texte dans l'espace de travail. L'inspecteur de droite vous permet d'ajouter des bordures, des ombres portées, un alignement et plusieurs autres options pour obtenir l'effet souhaité..
Étiquette d'en-tête isométrique avec bordurele Épique la police est très bien affichée sur la mini-carte. Je l'utilise avec une bordure pour l'aider à se démarquer dans le code. Pour exporter le dessin ASCII vers votre éditeur, sélectionnez dans le menu Fichier - Exporter..
Boîte de dialogue d'exportationDes options existent pour exporter en texte ASCII, PNG ou SVG. L'option de texte ASCII a une option pour copier dans le presse-papiers dans le coin inférieur gauche. C'est la principale manière d'exporter mon art. Je le colle dans le code source.
L'option de style de commentaire inclura l'art ASCII dans le style de commentaire de la langue que vous utilisez. Je vais utiliser le XML / HTML style de commentaire dans ce tutoriel.
Une note de prudence: Si le format ASCII ne correspond pas à l'éditeur de code, le thème de l'éditeur n'utilise pas de police à espacement fixe, le retour à la ligne est activé ou le thème de l'éditeur utilise des commentaires en italique. Vous aurez besoin d'ajuster les options de thème et d'habillage de mots. Pour obtenir une meilleure correspondance, ouvrez les préférences avec Commander-, (Virgule de commande).
Préférences Dans la boîte de dialogue des préférences, configurez la police pour qu'elle corresponde à la police utilisée dans votre éditeur. Depuis que j'utilise Menlo Regular 14 in Texte sublime, Je règle les préférences sur la même police et la même taille.
Je gère certains sites Web que j'ai créés à l'origine WordPress, mais je suis dans le lent processus de les déplacer Artisanat CMS. Puisqu'ils veulent garder le même thème, je dois recréer le thème..
Le moyen le plus simple de commencer est de vider le code de la page en ouvrant le site Web dans un navigateur., clic secondaire à l'intérieur du site, sélectionnez Voir le source de la page, et copiez et collez le source dans l'éditeur de texte. C'est plus rapide que de parcourir tous les différents fichiers de WordPress.
Une fois que j'ai le fichier source de base, j'utilise Texte sublime pour le mettre en forme avec le HTML-CSS-JS Prettify paquet. Une fois bien formaté, je peux facilement étiqueter les sections.
HTML avec noms de section Créer chaque étiquette et les placer dans le code ne prend que quelques secondes. Si je le faisais à la main, ça aurait pris des heures.
Vous pouvez voir sur la mini-carte les différentes bannières pour chaque section. Lorsque vous avez besoin d’une section particulière, vous pouvez facilement la voir et la cliquer sur la mini-carte..
En cliquant n'importe où sur la mini-carte, vous accédez à cet emplacement dans le code. Si vous avez du mal à voir, augmentez la taille de la police ou essayez l’un des autres styles..
Puisque Monodraw aide à créer des formes, vous pouvez l’utiliser pour documenter la mise en page du site. En utilisant le Boîte outil, créez chaque zone et étiquetez-la avec du texte à l'aide du Zone de texte sans définir un style de police.
Documentation sur la mise en page du site Lorsque vous créez des éléments, vous pouvez voir chaque élément dans la partie gauche de l’écran. Vous pouvez cliquer sur plusieurs éléments, comme je l'ai fait pour la zone de la barre latérale et le texte, et utiliser les outils d'alignement de l'inspecteur à droite pour centrer le texte..
Documentation de mise en page de site exportée vers du texte sublime Exportez-le et placez-le dans l'éditeur pour avoir une vue d'ensemble de la mise en page de cette page Web..
Exemple d'organigramme simple Vous pouvez même l'utiliser pour créer des organigrammes que vous pouvez ajouter à JavaScript code.
J'ai créé cela avec trois boîtes, un diamant, trois lignes et du texte. Lorsque vous sélectionnez l'outil Ligne et sélectionnez un objet qui s'y trouve, il affiche des points bleus sur lesquels vous pouvez connecter la ligne. Imaginez le faire à la main.
Si vous voulez imiter une image, utilisez les touches Image élément, sélectionnez l’image du disque dur et tracez-la à l’aide de l’outil Plume, en sélectionnant différents caractères ASCII à utiliser. peindre.
Cela prend plus de talent artistique pour bien faire les choses, mais d’autres ont fait des répliques d’iPhone et plus encore.
J'ai écrit ce tutoriel avec la version 1.0.1. Ils travaillent sur la version 1.1 et sont presque prêts à être livrés..
Une des nouvelles fonctionnalités sera la possibilité de créer Extraits et les partager avec d'autres. J'ai actuellement un fichier avec des morceaux de ASCII Art que je copie et colle dans d'autres documents.
Ayant Extraits sera encore plus facile.
Le fichier de téléchargement contient un Monodraw documents avec le ASCII Art utilisé dans ce tutoriel. Si vous voulez en savoir plus sur ASCII Art, vous voudrez peut-être consulter ces sites Web:
Maintenant que vous voyez à quel point il est facile d’ajouter ASCII Art à votre code, essayez-le. Cela m'a évité de nombreuses heures de recherche de la bonne section de code.
Vous pouvez utiliser un programme minify pour supprimer les commentaires et compacter le code. le Minify forfait pour Texte sublime c'est ce que j'utilise. N'oubliez pas de garder votre jolie version aussi.
Accentsconagua
Share