diff options
Diffstat (limited to 'nl-nl')
| -rw-r--r-- | nl-nl/amd-nl.html.markdown | 235 | ||||
| -rw-r--r-- | nl-nl/brainfuck-nl.html.markdown | 86 | ||||
| -rw-r--r-- | nl-nl/coffeescript-nl.html.markdown | 110 | ||||
| -rw-r--r-- | nl-nl/yaml-nl.html.markdown | 139 |
4 files changed, 570 insertions, 0 deletions
diff --git a/nl-nl/amd-nl.html.markdown b/nl-nl/amd-nl.html.markdown new file mode 100644 index 00000000..d5e0022a --- /dev/null +++ b/nl-nl/amd-nl.html.markdown @@ -0,0 +1,235 @@ +--- +category: tool +tool: amd +contributors: + - ["Frederik Ring", "https://github.com/m90"] +translators: + - ["Reinoud Kruithof", "https://github.com/reinoudk"] +filename: learnamd-nl.js +lang: nl-nl +--- + +## Aan de slag met AMD + +De **Asynchronous Module Definition** API specificeert een mechanisme om JavaScript + modules the definiëren zodat de module en dependencies (afhankelijkheden) asynchroon + geladen kunnen worden. Dit is vooral erg geschikt voor de browseromgeving, waar het + synchroon laden van modules zorgt voor problemen qua prestatie, gebruiksvriendelijkheid, + debugging en cross-domain toegangsproblemen. + +### Basis concept +```javascript +// De basis AMD API bestaat uit niks meer dan twee methodes: `define` en `require` +// and gaat vooral over de definitie en gebruik van modules: +// `define(id?, dependencies?, factory)` definieert een module +// `require(dependencies, callback)` importeert een set van dependencies en +// gebruikt ze in de gegeven callback + +// Laten we starten met het gebruiken van define om een nieuwe module (met naam) +// te creëeren, welke geen dependencies heeft. Dit doen we door een naam +// en een zogeheten factory functie door te geven aan define: +define('awesomeAMD', function(){ + var isAMDAwesome = function(){ + return true; + }; + // De return waarde van een module's factory functie is + // wat andere modules of require calls ontvangen wanneer + // ze onze `awesomeAMD` module requiren. + // De geëxporteerde waarde kan van alles zijn: (constructor) functies, + // objecten, primitives, zelfs undefined (hoewel dat niet veel nut heeft). + return isAMDAwesome; +}); + + +// We gaan nu een andere module defineren die afhankelijk is van onze +// `awesomeAMD` module. Merk hierbij op dat er nu een extra functieargument +// is die de dependencies van onze module defineert: +define('schreewlelijk', ['awesomeAMD'], function(awesomeAMD){ + // dependencies worden naar de factory's functieargumenten + // gestuurd in de volgorde waarin ze gespecificeert zijn + var vertelIedereen = function(){ + if (awesomeAMD()){ + alert('Dit is zOoOo cool!'); + } else { + alert('Vrij saai, niet?'); + } + }; + return vertelIedereen; +}); + +// Nu we weten hoe we define moeten gebruiken, kunnen we require gebruiken +// om ons programma mee te starten. De vorm van `require` is +// `(arrayVanDependencies, callback)`. +require(['schreeuwlelijk'], function(schreewlelijk){ + schreeuwlelijk(); +}); + +// Om deze tutorial code uit te laten voeren, gaan we hier een vrij basic +// (niet-asynchrone) versie van AMD implementeren: +function define(naam, deps, factory){ + // merk op hoe modules zonder dependencies worden afgehandeld + define[naam] = require(factory ? deps : [], factory || deps); +} + +function require(deps, callback){ + var args = []; + // we halen eerst alle dependecies op die nodig zijn + // om require aan te roepen + for (var i = 0; i < deps.length; i++){ + args[i] = define[deps[i]]; + } + // voldoe aan alle dependencies van de callback + return callback.apply(null, args); +} +// je kan deze code hier in actie zien (Engels): http://jsfiddle.net/qap949pd/ +``` + +### require.js in de echte wereld + +In contrast met het voorbeeld uit de introductie, implementeert `require.js` + (de meest populaire AMD library) de **A** in **AMD**. Dit maakt het mogelijk + om je modules en hun dependencies asynchroon in the laden via XHR: + +```javascript +/* file: app/main.js */ +require(['modules/someClass'], function(SomeClass){ + // de callback word uitgesteld tot de dependency geladen is + var things = new SomeClass(); +}); +console.log('Dus, hier wachten we!'); // dit wordt als eerste uitgevoerd +``` + +De afspraak is dat je over het algemeen één module in één bestand opslaat. +`require.js` kan module-namen achterhalen gebaseerd op de bestandslocatie, +dus je hoeft je module geen naam te geven. Je kan simpelweg aan ze referen + door hun locatie te gebruiken. +In het voorbeeld nemen we aan dat `someClass` aanwezig is in de `modules` map, + relatief ten opzichte van de `baseUrl` uit je configuratie. + +* app/ + * main.js + * modules/ + * someClass.js + * someHelpers.js + * ... + * daos/ + * things.js + * ... + +Dit betekent dat we `someClass` kunnen defineren zonder een module-id te specificeren: + +```javascript +/* file: app/modules/someClass.js */ +define(['daos/things', 'modules/someHelpers'], function(thingsDao, helpers){ + // definitie van de module gebeurt, natuurlijk, ook asynchroon + function SomeClass(){ + this.method = function(){/**/}; + // ... + } + return SomeClass; +}); +``` +Gebruik `requirejs.config(configObj)` om het gedrag van de standaard mapping + aan te passen in je `main.js`: + +```javascript +/* file: main.js */ +requirejs.config({ + baseUrl : 'app', + paths : { + // je kan ook modules uit andere locatie inladen + jquery : '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min', + coolLibUitBower : '../bower_components/cool-lib/coollib' + } +}); +require(['jquery', 'coolLibUitBower', 'modules/someHelpers'], function($, coolLib, helpers){ + // een `main` bestand moet require minstens eenmaal aanroepen, + // anders zal er geen code uitgevoerd worden + coolLib.doFancyDingenMet(helpers.transform($('#foo'))); +}); +``` +Op `require.js` gebaseerde apps hebben vaak een enkel beginpunt (`main.js`) + welke toegevoegd wordt aan de `require.js` script tag als een data-attribuut. +Deze zal automisch geladen en uitgevoerd worden als de pagina laadt: + +```html +<!DOCTYPE html> +<html> +<head> + <title>Honder script tags? Nooi meer!</title> +</head> +<body> + <script src="require.js" data-main="app/main"></script> +</body> +</html> +``` + +### Een heel project optimaliseren met r.js + +Veel mensen geven er de voorkeur aan om AMD te gebruiken tijdens de + ontwikkelfase om code op een gezonde manier te organiseren maar + willen nog steeds een enkel scriptbestand gebruiken in productie in + plaats van honderderen XHR verzoeken uit te voeren als de pagina laadt. + +`require.js` wordt geleverd met een script genaamd `r.js` (die je waarschijnlijk +uitvoert in node.js, hoewel Rhino ook ondersteund wordt) welke de +dependency book van je project analyseert en een enkel bestand bouwt met daarin +al je module (juist genaamd), geminificeerd en klaar voor productie. + +Instaleren met `npm`: +```shell +$ npm install requirejs -g +``` + +Nu kun je het een configuratiebestand voeden: +```shell +$ r.js -o app.build.js +``` + +Voor ons bovenstaande voorbeeld zou de configuratie er zo uit kunnen zien: +```javascript +/* file : app.build.js */ +({ + name : 'main', // naam van het beginpunt + out : 'main-built.js', // naam van het bestand waar de output naar geschreven wordt + baseUrl : 'app', + paths : { + // `empty:` verteld r.js dat dee nog steeds geladen moet worden van de CDN, + // gebruik makend van de locatie gespecificeert in `main.js` + jquery : 'empty:', + coolLibUitBower : '../bower_components/cool-lib/coollib' + } +}) +``` +Verwissel simpelweg `data-main` om het gebouwde bestand te gebruiken in productie: +```html +<script src="require.js" data-main="app/main-built"></script> +``` + +Een erg gedetaileerd [overzicht van bouwopties](https://github.com/jrburke/r.js/blob/master/build/example.build.js) is +beschikbar in de GitHub repo (Engels). + +Hieronder vind je nog meer informatie over AMD (Engels). + +### Onderwerpen die niet aan bod zijn gekomen +* [Loader plugins / transforms](http://requirejs.org/docs/plugins.html) +* [CommonJS style loading and exporting](http://requirejs.org/docs/commonjs.html) +* [Advanced configuration](http://requirejs.org/docs/api.html#config) +* [Shim configuration (loading non-AMD modules)](http://requirejs.org/docs/api.html#config-shim) +* [CSS loading and optimizing with require.js](http://requirejs.org/docs/optimization.html#onecss) +* [Using almond.js for builds](https://github.com/jrburke/almond) + +### Verder lezen: + +* [Official Spec](https://github.com/amdjs/amdjs-api/wiki/AMD) +* [Why AMD?](http://requirejs.org/docs/whyamd.html) +* [Universal Module Definition](https://github.com/umdjs/umd) + +### Implementaties: + +* [require.js](http://requirejs.org) +* [dojo toolkit](http://dojotoolkit.org/documentation/tutorials/1.9/modules/) +* [cujo.js](http://cujojs.com/) +* [curl.js](https://github.com/cujojs/curl) +* [lsjs](https://github.com/zazl/lsjs) +* [mmd](https://github.com/alexlawrence/mmd) diff --git a/nl-nl/brainfuck-nl.html.markdown b/nl-nl/brainfuck-nl.html.markdown new file mode 100644 index 00000000..6062b24c --- /dev/null +++ b/nl-nl/brainfuck-nl.html.markdown @@ -0,0 +1,86 @@ +--- +language: brainfuck +contributors: + - ["Prajit Ramachandran", "http://prajitr.github.io/"] + - ["Mathias Bynens", "http://mathiasbynens.be/"] +translators: + - ["Jelle Besseling", "https://github.com/Jell-E"] +lang: nl-nl +--- + +Brainfuck (schrijf je niet met een hoofdletter behalve aan het begin van een +zin) is een extreem +minimalistische Turing-complete programmeertaal met maar acht commando's. + +``` +Elk karakter behalve "><+-.,[]" (en de quotes) wordt genegeerd. + +Brainfuck wordt gerepresenteerd door een array met 30.000 cellen die initieel +gevuld is met nullen en een pointer die wijst naar de huidige cel. + +Dit zijn de acht commando's: ++ : Verhoog de huidige cell met 1. +- : Verminder de huidige cell met 1. +> : Beweeg de pointer naar de volgende cell (één naar rechts). +< : Beweeg de pointer naar de vorige cell (één naar links). +. : Print de huidige cell als een ASCII karakter(d.w.z. 65 = 'A'). +, : Lees een karakter in de huidige cell. +[ : Als de huidige cell nul is ga dan naar de bijbehorende ] . + Als het geen nul is, ga dan gewoon verder. +] : Als de huidige cell nul is ga dan gewoon verder. + Als het geen nul is, ga dan terug naar de bijbehorende [ . + +[ en ] maken een while loop. Ze moeten uiteraard wel gebalanceerd zijn + +Laten we een kijkje nemen naar een paar brainfuck programma's. + +++++++ [ > ++++++++++ < - ] > +++++ . + +Dit programma print het karakter 'A'. Eerst verhoogt het cell #1 tot 6. +Cell #1 wordt gebruikt om te loopen. Dan begint het de loop ([) en gaat +naar cell #2. Het verhoogt cell #2 tien keer, gaat terug naar cell #1, en +verlaagt cell #1. Deze loop gebeurt zes keer (na zes keer staat cell #1 +weer op nul, waarna het doorgaat naar het einde van de loop (]) en +verder gaat). + +De pointer staat nu weer op cell #1, deze heeft een waarde van 0, en cell #2 +heeft een waarde van 60. > beweegt de pointer naar cell #2, daarna verhoogt +het de cell vijf keer, waardoor het een waarde van 65 bevat, en print dan +de waarde van cell #2. 65 is 'A' in ASCII, dus 'A' wordt geprint in de terminal. + + +, [ > + < - ] > . + +Dit programma leest een karakter van de gebruiker in put en kopieert dat +karakter in cel #1. Dan start de loop. Ga naar cel #2, verhoog de waarde in +cel #2, ga terug naar cel #1, en verklein de waarde in cel #1. Dit gaat door +totdat cel #1 nul is en cel #2 de oude waarde heeft van cell #1. Omdat we +op cel #1 staan verplaatst > de pointer één naar rechts en . print het +karakter in cel #2. + +Houd wel in gedachten dat de spaties alleen zijn voor leesbaarheid, je kan het +bovenstaande programma net zo goed schrijven als: + +,[>+<-]>. + +Probeer maar eens te bedenken wat het volgende programma doet: + +,>,< [ > [ >+ >+ << -] >> [- << + >>] <<< -] >> + +Dit programma neemt twee getallen als input, en vermenigvuldigt ze. + +In het begin leest het twee karakters in cel #1 en #2. Dan start het de +buitenste loop, met als teller cel #1. Het beweegt naar cel #2, dan start het +de binnenste loop met als teller cel #2, daar verhoogd het cel #3. Maar +dan is er een probleem als cel #2 nul wordt aan het einde van de binnenste loop. +Om dit op te lossen wordt ook cel #4 verhoogd naar het oorspronkelijke getal +uit cel #2 en daarna wordt cel #4 weer gekopieerd naar cell #2. +Het resultaat komt in cel #3 te staan. +``` + +En dat is dan brainfuck. Niet heel moeilijk, toch? Je kan zelf voor de lol +brainfuck programma's gaan schrijven, of je kan een interpreter schrijven +voor brainfuck in een andere taal. Het is namelijk redelijk makkelijk om te +implementeren aangezien brainfuck maar acht commando's heeft. En als je een +masochist bent kan je ook nog proberen om brainfuck te implementeren… in +brainfuck. diff --git a/nl-nl/coffeescript-nl.html.markdown b/nl-nl/coffeescript-nl.html.markdown new file mode 100644 index 00000000..dc0b1e19 --- /dev/null +++ b/nl-nl/coffeescript-nl.html.markdown @@ -0,0 +1,110 @@ +--- +language: coffeescript +contributors: + - ["Tenor Biel", "http://github.com/L8D"] + - ["Xavier Yao", "http://github.com/xavieryao"] +translators: + - ["Jelle Besseling", "https://github.com/Jell-E"] + - ["D.A.W. de Waal", "http://github.com/diodewaal"] +filename: coffeescript-nl.coffee +lang: nl-nl +--- + +CoffeeScript is een kleine programmeertaal die direct compileert naar +JavaScript en er is geen interpretatie tijdens het uitvoeren. +CoffeeScript probeert om leesbare, goed geformatteerde en goed draaiende +JavaScript code te genereren, die in elke JavaScript runtime werkt, als een +opvolger van JavaScript. + +Op [de CoffeeScript website](http://coffeescript.org/), staat een +volledigere tutorial voor CoffeeScript. + +``` coffeescript +# CoffeeScript is een taal voor hipsters. +# Het gaat mee met alle trends van moderne talen. +# Commentaar begint dus met een hekje, net zoals bij Python en Ruby. + +### +Blokken commentaar maak je zo, ze vertalen naar JavaScripts */ en /* +in de uitvoer van de CoffeeScript compiler. + +Het is belangrijk dat je ongeveer snapt hoe JavaScript +werkt voordat je verder gaat. +### + +# Toewijzing: +getal = 42 #=> var getal = 42; +tegengestelde = true #=> var tegengestelde = true; + +# Voorwaarden: +getal = -42 if tegengestelde #=> if(tegengestelde) { getal = -42; } + +# Functies: +kwadraat = (x) -> x * x #=> var kwadraat = function(x) { return x * x; } + +vul = (houder, vloeistof = "koffie") -> + "Nu de #{houder} met #{koffie} aan het vullen..." +#=>var vul; +# +#vul = function(houder, vloeistof) { +# if (vloeistof == null) { +# vloeistof = "koffie"; +# } +# return "Nu de " + houder + " met " + vloeistof + " aan het vullen..."; +#}; + +# Reeksen: +lijst = [1..5] #=> var lijst = [1, 2, 3, 4, 5]; + +# Objecten: +wiskunde = + wortel: Math.sqrt + kwadraat: kwadraat + derdemacht: (x) -> x * kwadraat x +#=> var wiskunde = { +# "wortel": Math.sqrt, +# "kwadraat": kwadraat, +# "derdemacht": function(x) { return x * kwadraat(x); } +#} + +# "Splats": +wedstrijd = (winnaar, lopers...) -> + print winnaar, lopers +#=>wedstrijd = function() { +# var lopers, winnaar; +# winnaar = arguments[0], lopers = 2 <= arguments.length ? __slice.call(arguments, 1) : []; +# return print(winnaar, lopers); +#}; + +# Aanwezigheid: +alert "Ik wist het!" if elvis? +#=> if(typeof elvis !== "undefined" && elvis !== null) { alert("I knew it!"); } + +# Lijst abstractie: +derdemachten = (wiskunde.derdemacht num for num in lijst) +#=>derdemachten = (function() { +# var _i, _len, _results; +# _results = []; +# for (_i = 0, _len = lijst.length; _i < _len; _i++) { +# num = list[_i]; +# _results.push(wiskunde.derdemacht(num)); +# } +# return _results; +# })(); + +etenswaren = ['broccoli', 'spinazie', 'chocolade'] +eet eten for eten in etenswaren when eten isnt 'chocolade' +#=>etenswaren = ['broccoli', 'spinazie', 'chocolade']; +# +#for (_k = 0, _len2 = etenswaren.length; _k < _len2; _k++) { +# eten = etenswaren[_k]; +# if (eten !== 'chocolade') { +# eet(eten); +# } +#} +``` + +## Handige links (in het Engels): + +- [Smooth CoffeeScript](http://autotelicum.github.io/Smooth-CoffeeScript/) +- [CoffeeScript Ristretto](https://leanpub.com/coffeescript-ristretto/read) diff --git a/nl-nl/yaml-nl.html.markdown b/nl-nl/yaml-nl.html.markdown new file mode 100644 index 00000000..a4a9d5fc --- /dev/null +++ b/nl-nl/yaml-nl.html.markdown @@ -0,0 +1,139 @@ +--- +language: yaml +filename: learnyaml-nl.yaml +contributors: + - ["Adam Brenecki", "https://github.com/adambrenecki"] +translators: + - ["Niels van Velzen", "https://nielsvanvelzen.me"] +lang: nl-nl +--- + +YAML is een data serialisatie taal ontworpen om snel te kunnen worden begrepen door mensen. + +Het is een strikte superset van JSON en bevat nieuwe regels en een stricte manier van inspringen, zoals bij Python. In tegenstelling tot Python kan je alleen geen tab tekens gebruiken. + +```yaml +# Commentaar in YAML ziet er zo uit + +################ +# SCALAR TYPES # +################ + +# Ons hoofd object (Wat in het hele document gebruikt wordt) is een map, +# dit staat gelijk aan een dictionary, hash of object in andere talen. +sleutel: waarde +nog_een_sleutel: Een andere waarde +nummer_waarde: 100 +wetenschappelijke_waarde: 1e+12 +boolean_waarde: true +null_waarde: null +sleutel met spaties: waarde +# Merk op dat strings niet verplicht in quotes moeten, maar dit kan wel. +quote_waarde: "Een string in quotes" +"Ook sleutels kunnen in quotes": "Dit is bijvoorbeeld handig als je een dubbelepunt wilt gebruiken in je key" + +# Tekst over meerdere lijnen kan je schrijven als een 'letterlijk blok' (met |) +# Of een 'gevouwen blok' (met >) +letterlijk_blok: | + Dit hele blok met tekst is de waarde van de 'letterlijk_blok' sleutel, + met nieuwe lijnen behouden. + + Het blok blijft door gaan tot het geeindigd wordt door korter te inspringen. + + Lijnen die groter zijn ingesprongen behouden dit. +gevouwen_stijl: > + Dit blok met tekst zal de waarde zijn van 'gevouwen_stijl', + maar deze keer zullen alle nieuwe lijnen worden vervangen met een spatie. + + Lege lijnen, zoals hierboven, zullen worden vertaald naar een nieuwe lijn. + + Meer ingesprongen lijnen zullen hun nieuwe lijnen ook behouden, + deze tekst zal over 2 lijnen te zien zijn. + +#################### +# COLLECTION TYPES # +#################### + +# Nesten wordt bereikt met inspringen. +geneste_map: + sleutel: waarde + andere_sleutel: andere waarde + andere_geneste_map: + hallo: wereld + +# In een map is een sleutel niet verplicht om een string te gebruiken +0.25: een float als sleutel + +# Sleutels kunnen ook meerdere lijnen gebruiken met behulp van het vraagteken +? | + Dit is een sleutel + met meerdere lijnen +: en dit is de waarde + +# YAML staat ook collection types toe in sleutels, maar veel programmeertalen +# zullen hierover klagen. + +# Sequences (gelijk aan lijsten of arrays) zien er zo uit: +een_sequence: + - Item 1 + - Item 2 + - 0.5 # sequences kunnen meerdere type waardes bevatten. + - Item 4 + - sleutel: waarde + andere_sleutel: andere waarde + - + - Dit is een sequence + - in een andere sequence + +# Doordat YAML een superset van JSON is kan je ook JSON-stijl mappen en +# sequences maken: +json_map: {"sleutel": "waarde"} +json_seq: [3, 2, 1, "takeoff"] + +####################### +# EXTRA YAML FUNCTIES # +####################### + +# YAML heeft ook een handige functie genaamd 'anchors' (ankers), deze laten je +# makkelijk de waarde van ergens anders in je document kopieëren. Beide sleutels +# krijgen dezelfde waarde: +geankert_content: &anker_naam Deze string zal verschijnen als waarde voor de twee sleutels +andere_anker: *anker_naam + +# YAML heeft ook tags, deze gebruik je om een expliciet type te verklaren +expliciete_string: !!str 0.5 +# Sommige parsers gebruiken taal specifieke tags, zoals deze voor Python's +# complexe nummer type: +python_complex_nummer: !!python/complex 1+2j + +#################### +# EXTRA YAML TYPES # +#################### + +# Strings en nummer zijn niet de enige types die YAML begrijpt. +# ISO opgemaakte datum en datumtijd notaties werken ook: +datumtijd: 2001-12-15T02:59:43.1Z +datumtijd_met_spaties: 2001-12-14 21:59:43.10 -5 +datum: 2002-12-14 + +# De !!binary tag geeft aan dat de string een base64-gecodeerde +# binary blob is. +gif_bestand: !!binary | + R0lGODlhDAAMAIQAAP//9/X17unp5WZmZgAAAOfn515eXvPz7Y6OjuDg4J+fn5 + OTk6enp56enmlpaWNjY6Ojo4SEhP/++f/++f/++f/++f/++f/++f/++f/++f/+ + +f/++f/++f/++f/++f/++SH+Dk1hZGUgd2l0aCBHSU1QACwAAAAADAAMAAAFLC + AgjoEwnuNAFOhpEMTRiggcz4BNJHrv/zCFcLiwMWYNG84BwwEeECcgggoBADs= + +# YAML heeft ook een set type, dat ziet er zo uit: +set: + ? item1 + ? item2 + ? item3 + +# Zoals in Python zijn sets gewoon mappen met null waardes; +# bovenstaand is gelijk aan: +set2: + item1: null + item2: null + item3: null +``` |