nodum.io Docs

Welcome at the nodum Docs. You'll find comprehensive guides and documentation to help you start working with nodumApp as quickly as possible. Let's jump right in!

Get Started    Docs

Code Editor

Als je op een tabblad Code klikt, kom je in de zwarte code editor van die pagina.
In de linkse kolom onder Code verschijnen als je langer werkt in nodum de 5 laatst geopende bestanden.
De kolom ernaast vind je de folders, hier staan een aantal folders maar kan je ook folders aanmaken. Een folder die er standaard al in staat is de homefolder. Hierin zitten een aantal bestanden zoals main, 404, 500, 403 footer etc. Aan het einde van de rij is een zoekfunctie, om bestanden in de gekozen map te zoeken.

Als je op een willekeurig bestand klikt verschijnt er rechts een extra sidebar.
Onder de zoekfuntie voor bestanden zit Auto, en je werkt in een Twig bestand met HTML en Twig syntax dan herkent nodum deze twee talen en kan hij auto-suggesties geven om je tags af te sluiten.

Onder Auto zit Line, dit zorgt ervoor dat er verticale lijnen in de text editor verschijnen. Zo kan je gemakkelijk zien of je je tags allemaal hebt afgesloten.
Hierna zijn een aantal highlighters voor verschillende programmeertalen; HTML, Twig en markdown. Het zal je opvallen dat de kleuren in de text editor zich aanpassen aan de syntax die je kiest. Dit is handig voor de leesbaarheid en overzichtelijkheid van je code.

HTML een toegankelijke mark-up taal. Voor meer uitleg hierover zie de uitleg over het gebruik van HTML in nodum.
Twig een simpele programmeertaal. Sla waardes op in variabelen, die je later weer kunt weergeven, voer berekeningen uit, geef automatisch dingen meerdere keren weer door loopjes en meer. Vind hier of lees de volledige documentatie van Twig zelf.
MD Dit staat voor Markdown: Markdown is een handige syntax voor simpele tekstbewerking. Denk aan lijstjes, paragrafen, kopjes. Meer informatie hierover vind je op de website van Markdown of op deze pagina.

Wrap Deze optie zorgt ervoor dat je syntax worden afgebroken en op de volgende regel verder gaan, zodat je volledige code altijd goed leesbaar is.

Mobile version
Altijd al jezelf afgevraagd hoe jouw website er op een mobieltje uitziet? Is hij wel voldoende responsive? Je kan er achter komen met deze optie. Je bestanden zie je snel in een mobiele preview modus. Vink hiervoor mobile aan en druk vervolgens op ctrl p of klik in plaats van ctrl p op de preview button.

Desktop version
In de meeste rechtse balk naast de text-editor zie je de button van een computer met een oog daarin. Dit is de preview button die je net als ctrl p brengt naar de preview desktop versie van je applicatie of website. De preview button werkt zowel voor de desktop version als ook voor de mobile version. Je kan de button mobile version aangevinkt hebben staan en vervolgens op de onderste preview button klikken, dan zie je de preview mobile version of je kan de mobile version uitgevinkt hebben staan dan zie je als je op de preview button klinkt de desktop preview version.

Snippetmanager
Hieronder zit een icoon met drie blokjes, het icoon voor de "Snippetmanager" Hiermee kan je stukjes code die je vaak gebruikt opslaan en makkelijk invoegen als je het weer wilt gebruiken.
Een snippet is een stuk code dat meer dan eens gebruikt zou kunnen worden. Daarbij kan gedacht worden aan bijvoorbeeld een formulier om in te loggen of een veelvoorkomende {% if %}-{% else %}-{% endif %}-situatie. Deze code kan nu opgeslagen worden en gemakkelijk worden aangeroepen door de snippetmanager.

Met ctrl + shift + sof het icoon met de blokjes aan de rechterkant van de code-editor wordt de manager in de code-editor opgeroepen en met de pijltoetsen kunnen er eenvoudig een snippet geselecteerd worden. Hierdoor wordt veelvoorkomende code schrijven een stuk gemakkelijker.

De snippetmanager is persoonsgebonden. Daarom zijn alle snippets in 'My Account' te vinden onder het tabblad Snippets. Hier kunnen nieuwe snippets worden opgeslagen en al opgeslagen snippets worden bewerkt. Hoewel snippets dezelfde titel kunnen krijgen is dit niet aan te raden om het onderhoud van de snippets te vergemakkelijken.

Snippet invoegen
Een snippet is in te voegen door met ctrl + shift + s of de icoon met de blokjes aan de rechterkant van de code-editor de snippetmanager te openen. Met de pijltoetsen kan er vervolgens een snippet worden geselecteerd en met de enter-toets worden ingevoegd op de plaats van de cursor in de code. Ook kan er, wanneer er veel snippets aanwezig zijn, gezocht worden in de bovenste balk van de snippetmanager. De snippets wiens titel die niet matchen aan de zoekopdracht worden gefilterd.

Title code snippet is vindbaar

De zoekopdracht werkt niet op de code in de snippets, alleen op de titel.

Ook wanneer er meerdere cursors actief zijn in de code-editor kan er een snippet geselecteerd worden. Deze wordt dan op alle plekken waar de cursors staan ingevoegd, rekening houdend met indentation.

Nieuwe snippet maken
Onder 'Mijn Account' en het tabblad 'Snippets' kunnen nieuwe snippets worden toegevoegd en bestaande snippets worden aangepast. Geef een nieuw snippet een duidelijke naam, omschrijving en de juiste code en druk linksboven op 'Save'. De volgorde van de snippets kan worden aangepast door deze te verslepen. Deze volgorde wordt ook gebruikt om de snippets in de manager te tonen.

Ook vanuit de code-editor kan er een nieuw snippet aangemaakt worden. Door een selectie te maken van de gewenste code en de snippetmanager aan te roepen kan er door middel van de groene plus in de rechter bovenhoek een nieuw snippet worden aangemaakt. Deze knop zal doorverwijzen naar de Snippetpagina onder 'My Account' en de geselecteerde code zal - ook wanneer er meerdere cursors gebruikt werden - getoond worden in het aan te maken snippet. Alleen de titel en de beschrijving hoeft nog bedacht te worden.

Zoekfunctie binnen een bestand
Als je snel een woord zoekt binnen je bestand dan kan je deze functie gebruiken. Ook kan je het gebruiken als je niet meer weet in welk bestand een bepaalde variabele stond. De zoekfunctie doorzoekt alle bestanden.

Vrijgeef Button
Het slotje is het laatste icoon in het rijtje, dit is de vrijgeef button. Als je in een bestand werkt kan op dat moment niemand anders in hetzelfde bestand werken. Met de vrijgeef button kan je een bestand vergrendelen, nu kan iemand anders in dit bestand werken. Het scherm krijgt bij degene die op de vrijgeef button heeft gedrukt een rode gloed en een alleen-lezen melding. Als je rechtsonder op vernieuwen drukt ontgrendel je het scherm weer. Nu kan jij weer in het bestand werken. Deze functionaliteit is handig als je samenwerkt en het bestand toegankelijk wilt maken voor anderen om erin te werken. Je kan ook live meekijken wat de ander aan het typen is in het bestand.

Code-editors
Elk Twig bestand heeft 3 interne text editors. Dit zijn Code, CSS, en JS en je vindt ze onderaan de text editor. Markdown bestanden hebben deze functionaliteit niet nodig omdat ze geen javascript/CSS gebruiken. 'Code' gebruik je om je html/twig syntax neer te zetten. Daarnaast staat 'CSS' en 'JS', als je daar op klikt krijg je weer een lege text editor waar je je CSS syntax inzet. En in JS zet je je javascript, of bibliotheken zoals jQuery, en/of Vue.JS neer. Je hoeft in deze text editors niet meer boven en onder aan de pagina <html></html>,<style></style>, <script></script>neer te zetten, dit begrijpt nodum zelf al.

Pagina specifieke opmaak

Plaats je Html/CSS/Javascript code in de 3 aparte tabbladen voor een overzichtelijke code.

Auto-complete
Een handige functie van de text editor in nodum, is dat de editor je helpt bij het coden. Dit doet het bijvoorbeeld door suggesties te maken als je begint met typen, Typ bijvoorbeeld <d en je krijgt een lijstje te zien met suggesties. Dit is handig bij het foutloos overnemen van class of ID namen. Ook kan de editor codes voor je aanvullen, zodat je niet de hele functie hoeft te typen. Een voorbeeld hiervan is {% do mail , de auto-complete geeft al een suggestie van mail.send, als je daar op klikt zal hij de functie voor je aanvullen zodat je snel weet wat je nog moet invullen om te kunnen mailen. Dit alles helpt om minder fouten te maken en sneller te coderen. Een derde handigheid is dat bij het openen van een tag meteen de sluit tag wordt gegenereerd. Bijvoorbeeld als je typt `, zal de editor gelijk</form>` in verticale lijn onder jouw geopende tag zetten. Handig hier aan is ook dat als je een lange code hebt geschreven, en snel wilt weten of je nog iets moet sluiten de editor je een suggestie geeft of je nog iets moet sluiten. Als je bijvoorbeeld </ typt en je moest nog een div sluiten de editor al </ veranderd in

. Zo weet je snel of je alle tags wel netjes hebt gesloten.

Ook bij namen van variabelen en attributen worden suggesties gedaan. Zo wordt de kans verkleind op een foutieve class-name en het versneld jouw programmeerwerk aanzienlijk.
Ook voor filters | wordt er een suggestie gedaan. Een aantal filters bevatten meerdere argumenten die worden als suggestie getoond. Een voorbeeld hiervan is |sort_by_key die als autosuggestie: DESC terug geeft. Er worden alleen filter suggesties gedaan na |.
En als laatste auto-suggest toevoeging worden ook de namen van Mongo collections aangevuld, waardoor je hier geen spelfouten meer in kunt maken. Tevens worden de methodes voor mongo.* (get, set, find, enz) aangevuld bij custom collections.