Pour ceux qui ne sont pas familiers, TextExpander est une application de productivité fantastique pour Mac qui peut potentiellement vous faire économiser des centaines d’heures au cours d’une année. Avec la dernière version de la version 4, elle est maintenant meilleure que jamais. L'idée de base est simple: permettre à l'utilisateur d'attribuer des abréviations, qui seront ensuite étendues à de plus grandes chaînes de texte. Mais, une fois que vous aurez vraiment fouillé dans l'application, vous découvrirez à quel point elle peut être puissante pour les développeurs Web..
Contenu sponsoriséCeci est une critique sponsorisée ou un cadeau d'un produit / service qui est particulièrement pertinent pour nos lecteurs..
Avant de nous intéresser aux techniques les plus amusantes, passons en revue l'utilisation de base de l'application..
Supposons que vous souhaitiez gagner un peu de temps lors de la création de HTML. Plutôt que de taper manuellement:
… Vous voulez plutôt entrer simplement blockquote, et avoir ce texte développer à l'extrait HTML ci-dessus. Dans TextExpander, c'est un jeu d'enfant.
Nous commençons par créer un nouvel extrait.
Ensuite, dans la fenêtre "Contenu", nous pouvons coller le texte intégral et spécifier une abréviation.
Remarquez comment, dans l’image ci-dessus, nous avons également spécifié, via le % |, où le curseur doit être placé après expansion.
Nous avons maintenant créé un lien direct entre la chaîne, "blockquote" et le fragment HTML ci-dessus. L'étape suivante consiste à déterminer quand nous voulons que l'expansion se produise. Il y a deux choix:
Personnellement, je préfère ce dernier; sinon, il peut arriver que des expansions accidentelles se produisent lorsque vous vous y attendez le moins. Si vous choisissez la première méthode, je vous encourage à réfléchir à la manière dont vous nommez vos abréviations. peut-être une convention de nommage spéciale aidera.
Pour définir un délimiteur, choisissez "Préférences -> Développer les abréviations", puis choisissez l'option qui vous convient le mieux..
Maintenant, essayez-le! Ouvrez un éditeur de texte ou de code, tapez "blockquote", suivi du délimiteur spécifié (le cas échéant), et observez-le instantanément se transformer en fragment HTML tout en plaçant le curseur à l'emplacement correct..
Excellent! Très utile - mais nous pouvons en faire plus.
Pour notre prochaine astuce, imaginons que votre blog nécessite une mise en forme spécifique lors de l’ajout d’images. Peut-être faut-il une légende ou peut-être devrait-il être entouré d'un div - un peu comme nous le faisons sur les Nettuts+.
Le seul problème est qu’il est difficile d’écrire manuellement à chaque fois. TextExpander à la rescousse!
Créez un nouveau fragment de code, attribuez-lui l'abréviation de "tutimage" et collez-le:
Cela semble un peu effrayant, mais TextExpander vous aidera avec les détails. Tout d'abord, l'extension supposera que la source de l'image est collée dans votre presse-papiers. Ensuite, lorsque vous tapez "tutimage", il va coller le contenu de votre presse-papiers comme valeur de la src attribut. Avis où nous avons ajouté % presse-papiers? Vous utiliserez souvent cette fonctionnalité!
Mais qu'en est-il de cette confusion alt section d'attribut? On peut séparer cette logique en trois parties.
Cependant, si vous craignez que cela soit difficile à retenir, TextExpander peut automatiquement remplir les données à votre place..
Maintenant, lors de la création d'un nouveau blog, copiez simplement la source de l'image dans votre presse-papiers, puis tapez "tutimage". Parce que nous avons choisi le alt texte à remplir, une boîte de dialogue apparaîtra.
Soit s'en tenir à la valeur par défaut, et frapper Entrer, ou définir une valeur personnalisée pour l'attribut. Une fois que vous appuyez sur Entrer, l'extrait suivant sera ajouté à votre éditeur:
Chouette! Cette astuce est particulièrement utile lorsque, par exemple, vous copiez le code source d’une image à partir d’Amazon S3..
Ce n’est pas que nous apprécions les courriels sous forme de formulaires (en fait, nous les haïssons), mais il n’ya que beaucoup d’heures par jour. Parfois, il est plus facile de coller un modèle et de cliquer sur "Envoyer". Obtenons plutôt le meilleur des deux mondes. Nous allons utiliser un modèle, mais le personnaliser pour chaque personne.
Créez un nouveau fragment de code, attribuez-lui l'abréviation de "facture" et ajoutez:
Hé,% filltext: nom = personne%, merci beaucoup à votre entreprise. Veuillez noter que j'ai joint une facture à cet e-mail pour le% de texte intégral: nom = montant%. Faites-moi savoir si vous avez d'autres questions,% filltext: name = person%! Merci encore! VOTRE NOM
Tout d'abord, notez comment nous avons ajouté deux commandes 'filltext' ayant le même identifiant: "personne". Comme la valeur de chaque élément doit être identique, lorsque nous appliquons un nom au premier remplissage, celui-ci sera automatiquement ajouté à la deuxième occurrence..
Nous avons également défini un montant à remplir pour le montant de la facture..
Maintenant, quand nous tapons "facture" avec le délimiteur, nous verrons:
Ce sont des commodités simples, mais qui permettent d’économiser rapidement du temps au cours d’une année..
Peut-être êtes-vous un utilisateur fidèle de Vim et souhaitez-vous tirer parti de certaines de ces commandes au clavier utiles du navigateur - peut-être lors de la création d'un nouveau blog?.
Notre objectif est: lorsque nous copions un bout de texte et que nous tapons "s" (pour "surround"), ce texte est alors entouré d'une balise HTML. Faisons en sorte que cela arrive!
Créez un nouveau fragment de code, définissez l'abréviation sur "s" et ajoutez:
<%filltext:name=Tag Name:default=strong%>% presse-papiers
Important: pour que cela fonctionne correctement, assurez-vous de choisir "Abandon Delimiter" dans les préférences. Sinon, l’agrandissement conservera la
Languette.
Encore une fois, ce que nous avons ici est vraiment très simple. Nous laissons l'utilisateur spécifier le nom de la balise (une valeur par défaut de fort), puis nous définissons le contenu du presse-papiers dans les balises.
Pour l'essayer, sélectionnez du texte dans votre éditeur de code, copiez-le avec Contrôle / Commande + C, puis tapez s + Languette.
Une fois que vous avez spécifié un nom de tag, appuyez sur Entrer, et le texte sélectionné sera maintenant entouré de la balise HTML désignée.
D'accord, d'accord - c'est un peu un gadget; mais ça marche!
Vous les détestez autant que moi; créer un étiquette, met le pour attribut, définir le texte, créer le formulaire contribution, met le valeur, prénom, et identifiant des champs. Cela prend beaucoup de temps. Corrigeons cela en utilisant l'abréviation de "forminput".
Rappelez-vous: vous n'êtes pas obligé d'entrer ce mot; TextExpander fournira les menus nécessaires pour rendre le processus aussi simple que possible..
Maintenant, lorsque nous tapons "forminput", nous obtenons:
Si vous y réfléchissez, il y a beaucoup de texte dupliqué, lors de la création étiquettes et forme contributions. C'est pourquoi cette technique peut être si utile. Définir le premier pour attribuer valeur, et ce texte sera automatiquement appliqué comme le étiquetteLe texte de, et le contributionde prénom et identifiant valeur.
Maintenant, on se retrouve avec:
Tellement plus facile!
Pour revenir à cette astuce précédente, il peut arriver que nous n’ayons pas besoin d’un élément de la liste étiquette et contribution. Mettons à jour l'extrait de code pour rendre ces éléments facultatifs, en utilisant une "section facultative".
Supprimez l'élément de la liste d'habillage et choisissez "Fill-In -> Section facultative".
La clé est de faire les deux et pièces facultatives, mais leur donner le même nom, de sorte que la coche à bascule affecte les deux.
Voici la sortie générée:
% fillpart: name = élément de liste d'emballage?: default = yes%
Cette fois, lorsque vous déclenchez «entrée de formulaire», vous aurez la possibilité d’exclure l’élément de liste.
Utilisateurs de Mac: nous sommes tous irrités par le fait qu’il n’existe pas de moyen facile de créer un nouveau fichier vide. Eh bien, voici un petit truc. Même si vous ne tapez pas dans un éditeur de texte, TextExpander est toujours à l'écoute..
Encore mieux: nous pouvons également exécuter des scripts Shell et AppleScripts dans TextExpander!
Obtenez où je vais ici? Attribuons un raccourci de "fichier" qui créera un nouveau fichier sur le bureau lorsqu'il sera déclenché.
Cette fois-ci, dans la fenêtre de contenu, en haut, choisissez "Script Shell" et collez ce qui suit:
#! / bin / bash cd ~ / Bureau tactile% filltext: nom = nom de fichier: défaut = index.html%
La première ligne est standard pour les scripts shell et pointe vers Bash. Ensuite, comme vous le feriez dans le terminal, CD sur le bureau et créez un nouveau fichier en utilisant le toucher commander.
C'est tout; Essaye le! N'importe où sur votre bureau (même en dehors d'un éditeur de texte), tapez "fichier" avec le délimiteur que vous avez spécifié. Une boîte de dialogue apparaîtra, avec un défaut de index.html; Une fois que vous avez appuyé sur Entrée, le nouveau fichier a été créé.!
Le problème avec les langues, comme Markdown, est que nous devenons dépendants d’elles. Lorsque je suis obligé d'écrire du code HTML classique, que ce soit dans un navigateur ou un traitement de texte, je pense en silence à des pensées mesquines. Et si nous pouvions nous en tenir aux mêmes commodités que celles proposées par Markdown, tout en affichant immédiatement le code HTML? Nous pouvons - avec un peu de ruse.
Considérons l'utilisation de code de style Github.
"php echo 'du code';"
Créons une abréviation, ", qui s'étendra à tout ce que HTML est requis pour afficher la coloration syntaxique de votre code. Pour Nettuts +, nous utilisons [langue] CODE [/ langue], mais votre plate-forme pourrait utiliser pré Mots clés. Prenons soin de cette dernière méthode.
Coller dans:
% |
Et c'est tout! Maintenant, tapez ", remplissez la langue de votre choix et le code HTML nécessaire sera affiché. Rincer et répéter pour toutes les autres fonctionnalités de Markdown que vous utilisez.
Une grande partie des premières étapes de la création de sites Web consiste à définir des espaces réservés, qu'il s'agisse du texte générique "lorem ipsum" ou des espaces réservés pour les images..
La partie "lorem ipsum" sera un jeu d'enfant. Nous allons assommer ça maintenant.
Avant de le faire, cependant, il est important que vous adoptiez un système afin de pouvoir vous rappeler ces raccourcis. Pour mes projets, tous les extraits de code de réservation suivent une convention de dénomination: le mot "lieu" et le nom de l'extrait..
Ainsi, pour placer un seul paragraphe du texte "lorem ipsum", j'utiliserais une abréviation de "placelorem1". Et, pour deux paragraphes, "placelorem2". Si j'ajoute plutôt une image de marque de réservation, l'abréviation correcte serait "Placeimage".
Eh bien c'était facile. Rincez et répétez autant de paragraphes que nécessaire.
Pour les images d’espace réservé, nous allons tirer parti de l’excellent service Placehold.it. Le seul problème est que j'oublie souvent quelle est l'URL correcte. Si nous utilisons plutôt TextExpander, cela ne pose plus aucun problème..
Bien que nous ayons défini une taille d'image par défaut de 350x150, le menu contextuel vous permettra de remplacer ce paramètre, si nécessaire. Maintenant, nous pouvons ajouter des images de marque de réservation à nos projets en quelques secondes.
Si vous pensez au dernier conseil relatif aux espaces réservés, vous en trouverez beaucoup en matière de services d’image! Pourquoi ne modifions-nous pas "image de lieu" afin que l'utilisateur puisse choisir parmi une variété de choix? A partir de TextExpander v4, cela est maintenant possible.
En plus des remplissages sur une ligne, TextExpander en propose quelques autres, notamment un menu contextuel..
Cela nous permet de fournir une liste déroulante des remplissages potentiels..
Ci-dessus, j'ai simplement collé dans les URL correctes pour plusieurs services réservés.
Et, maintenant, lorsque nous déclenchons une "image de lieu", nous obtenons:
Trop cool! Tout ce qui me permet de penser moins et de travailler plus vite est une bonne chose.
Si vous êtes comme moi, même avec un système de nommage en place, notre cerveau coule parfois et nous ne pouvons pas comprendre ce que nous avons appelé un extrait particulier. TextExpander propose des raccourcis clavier utiles pour suggérer des extraits de code, en créer de nouveaux, etc..
Voici ce que j'ai défini pour les deux que j'utilise le plus souvent.
Maintenant, si je ne me souviens plus de ce que j’ai appelé un extrait particulier, j’appuie sur Option + Commande + s ("s" pour suggérer), et maintenant je peux le rechercher. Si vous travaillez, tapez "place" et voyez ensuite les suggestions qu'il propose..
Une fois que vous avez trouvé le bon extrait, appuyez sur Commander avec le numéro correct, et votre extrait sera collé dans.
Je considère TextExpander comme l'une des applications les plus puissantes de ma boîte à outils de développement. Il suffit d’un bref aperçu des statistiques TextExpander pour montrer que j’ai gagné un temps fou. Essayez si vous ne l'avez pas déjà fait. Nettuts + donne un grand coup de pouce!
Note de l'éditeur: ce tutoriel a été sponsorisé par Smile Software.
Accentsconagua
Share
