Bij de ontwikkeling van nodum hebben wij ons een duidelijk doel voor ogen: moeilijke dingen makkelijk maken. Het maken van dynamische webapplicaties en werken met API's en koppelingen eenvoudig(er) bereikbaar maken voor een grote(re) doelgroep.

Met makkelijker maken bedoelen we ook: tijd besparen door slimmer te werken. Om dit te doen werken veel webontwikkelaars en programmeurs met handige plugins voor editors als Sublime en Atom om met een beperkt aantal toetsencombinaties "te toveren met code". Althans: zo zal het er uit zien als je iemand dit voor het eerst ziet doen.

We gaan een aantal handigheden doornemen:

• Code jumping
  
• Multi cursor
  
• Emmet (expand HTML)
  
• Line duplication
  
• Snippets
  
• Code beautify
  
• Select-wrap
  

De genoemde toetsencombinaties zijn voor de Mac, maar alle functionaliteiten zijn voor Windows-gebruikers ook beschikbaar. De gewenste toetsencombinaties zijn te vinden door te klikken op het toetsenbord-icoontje links onder de editor.

1. Code jumping

Je cursor en/of selectie slimmer verplaatsen scheelt je een hoop tijd. Het komt tevens goed van pas in combinatie met een aantal van de volgende tips en trucs. De meeste mensen werken (bewust of onbewust) al met deze functie (die niet alleen in nodum werkt, maar in praktisch elke plek waar tekstinvoer mogelijk is).

We hebben het over het gebruiken van de alt toets en de cmd toets, gecombineerd met de pijltjestoetsen op je toetsenbord. Met de alt toets in combinatie met de pijltjes ga je per woord naar links of naar rechts. Met de cmd toets + links/rechts ga je direct naar het begin of einde van de regel.

Door per woord of direct naar het einde van de regel te springen ben je veel sneller waar je moet zijn zonder dat je de muis nodig hebt. En: door deze toetsencombinaties te combineren met shift kun je hetzelfde doen, maar dan tijdens het maken van selecties.

2. Multi cursor

Breid je selectie uit naar meerdere selecties van het geselecteerde. Je hebt nu meerdere cursors. Invoer vindt nu plaats op meerdere plekken. Klinkt misschien nog even vaag, maar het komt hier op neer: je selecteert een woord (of meerdere woorden) of een complete zin, en vervolgens druk je op Cmd + D. Je "duplicate" nu je selectie. Als de geselecteerde waarde nog een keer voorkomt in je code, wordt ook daar geselecteerd (en een cursor geplaatst). Nog een keer Cmd + D en je selectie wordt weer verder uitgebreid.

Nu je meerdere cursors hebt, kun je dezelfde bewerking meerdere keren uitvoeren. Kortom: weghalen met backspace? Met alt + pijltje rechts met de cursor naar rechts gaan, en er wat achter typen? Je doet het in 1x op meerdere plekken. En dat maakt het belachelijk eenvoudig om op meerdere plekken een wijziging in je code aan te brengen.

Door met meerdere cursors slim te werken met Jumping (zie vorige punt) kun je ook je cursors behouden en je meerdere cursors naar een ander deel van je code brengen.

3. Emmet (expand HTML)

De volgende is Cmd + E (expand). Je typt een CSS-selector, en drukt op Cmd + E. De code wordt automatisch omgezet in HTML. Je kunt gebruik maken van een ID (#) en classes (.).

4. Line duplication

Heel eenvoudig, maar voor velen onbekend: met een toetsencombinatie de regel (of regels) waar je cursor (of selectie) staat dupliceren. Dese truc is goed te combineren de vorige twee punten, maar ook zeker met het volgende punt.

Je doet het met Cmd + Shift + D

5. Snippets

Sommige stukjes code schrijf je met enige regelmaat. Wellicht met wat aanpassingen, wellicht met een hoop toevoegingen, maar altijd met een paar vaste kenmerken. Denk bijv. aan de code om een variabele op te geven, de code om een formulier met een input-veld te maken, enz. Deze stukjes code kun je opslaan als Snippet. Snippets worden opgeslagen in je nodum-account (en zijn daar ook te bewerken en te sorteren) en zijn in al je projecten bruikbaar.

Je opent de Snippet-Manager met Cmd + Shift + S. Indien je reeds een selectie hebt gemaakt, kun je de selectie direct als Snippet opslaan.

Als je de Snippet-Manager hebt gekopend kun je met de pijltjestoetsen tussen je bestaande snippets bladeren. Je kunt ook een trefwoord opgeven om te filteren. Je krijgt een voorvertoning van de Snippet-code, en met Enter voeg je het snippet in. Indien je Mulit-Cursor gebruikt wordt het snippet ingevoegd bij iedere cursor.

6. Code beautify

Heb je een stuk code geschreven en heb je je niet netjes aan de indenting gehouden? Kortom: staat alles op andere niveau's waardoor je niet goed kunt zien waar je div nu begint en waar hij wordt gesloten, waar je if start en eindigt, en waar je for loop wordt beëindigd? Ctrl + B (beautify) is je reddende engel. Alle code springt nu automatisch goed in.

7. Select-wrap

Select-wrapping maakt het mogelijk tekst te "omringen" met Twig-syntax. Indien je meerdere selecties hebt geldt dit voor iedere selectie. Zo kun je van tekst eenvoudig alsnog een variabele, logica of een vertaalbare string maken. Je hoeft hier verder niets voor te doen, anders dan een selectie te maken, en de {, % en } tekst in te voegen. Om te "wrappen" in de vertaal-syntax gebruik je Ctrl + Alt + T.