feat: new blogpost about Phaser

fix: title of web apis blog
feat: new blog on Phaser by @esteenredeker

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-  "editor.formatOnSave": true
+  "editor.formatOnSave": true,
+  "liveServer.settings.port": 5501
 }

README.md

@@ -2,38 +2,29 @@
 
 Onze blog staat live: http://geekbites.move4mobile.io
 
-
 #### How to install
-Allereerst even checken of je Ruby hebt geinstalleerd:
-
-`ruby -v`
-
-Als dat het geval is dan kun je volgende commando's uitvoeren:
-
-`sudo gem install bundler`
-
-`sudo gem install jekyll`
+First install Node.js and check which verion of Node you have.
+Eleventy requires Node-8 or newer 
 
-`bundle`
+`node --version`
 
-`jekyll serve`
+If that is the case you can run the following code to install the dependencies:
 
-En je bent klaar voor het schrijven van je eigen Geekbite!
+`npm install`
 
-Mocht je toch tegen een probleem met dependencies aanlopen, dan kun je het volgende commando chain proberen:
+After this you can run the code `npm run`.
 
-`bundle update` 
+To build, just run `npm run build`. This will pack and compile all resources needed to put the application in production and generate a service worker.
 
-`bundle install`
+Then you `npm run start`, npm will run the start script for you and start your application with your special configuration options.
 
-`bundle exec jekyll serve`
+And then you are ready to write your own Geekbites blog. 
 
-Succes!!!
+#### Tips
 
+When it found any vulnerabilities after you run the code `npm install`  you can run the code  `npm audit fix` to fix them, or `npm audit` for details
 
-## GitHub Actions
-### Auto merge PR's
+After this there will be no or less vulnerabilities, then you can run the code `npm run`.
 
-Experiment 1:
-* https://github.com/pascalgn/automerge-action
 
+Goodluck!!

src/posts/2021-02-15-phaser-blog.md

@@ -0,0 +1,58 @@
+---
+title: 'Phaser, een gameframework voor HTML-5 games'
+comments: true
+author: eline
+min_read: 5
+date: 2021-03-10
+---
+
+### Wat is Phaser?
+Kort gezegd is [Phaser](https://phaser.io/) een gameframework waarmee je HTML-5 games kan maken. Deze games kunnen gespeeld worden op desktop en mobiel. Phaser kan gratis gedownload worden via https://phaser.io/ en is ontwikkeld door Photon Storm in 2013.
+
+Om gebruik te maken van Phaser is het handig als je al enige kennis hebt van HTML en JavaScript. Phaser is namelijk een JavaScript library, wat dus betekent dat je de game volledig hierin bouwt. Phaser maakt het mogelijk voor beginners en gevorderden om een eigen interactieve en leuke game te maken. Verder heeft het veel verschillende functies, zelfs te veel om allemaal te benoemen. Dit is ook een van de redenen waarom het zo geliefd is bij game ontwikkelaars. 
+
+### Opzetten van een Phaser game
+Het begint allemaal bij je HTML bestand waar je Phaser aanroept in je head, met de volgende code: 
+```html
+<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser-ce/2.12.0/phaser.min.js"></script>
+```
+Na dit gedaan te hebben maak je een JavaScript bestand aan en roep je de game aan met:
+```javascript
+window.onload = function(){
+    var game = new Phaser.Game(800, 600, Phaser.AUTO, "", {
+        preload: preload,
+        create: create,
+        update: update
+  }); 
+```
+Als weergavecontext voor de game kan er gekozen worden voor Phaser.CANVAS, Phaser.WEBGL of Phaser.AUTO. De aanbevolen waarde om te gebruiken is Phaser.AUTO, omdat deze automatisch gebruik maakt van datgene dat door de browser ondersteunt wordt. 
+
+Wanneer je toch wil kiezen voor WEBGL of CANVAS is het goed om de verschillen te weten. Uit onderzoek (Pedamkar, 2021) blijkt dat een van de verschillen is dat WEBGL een stuk sneller is dan CANVAS. Daarnaast wordt WEBGL door meer browsers ondersteunt en is vooral bedoelt voor 3D, maar kan ook gebruikt worden voor 2D. Daarentegen kan CANVAS alleen gebruikt worden voor 2D weergave. CANVAS is dan ook de voorloper van WEBGL, want WEBGL is voortgekomen uit CANVAS 3 experimenten.
+
+Verder staat de 800 voor de width en de 600 voor de height. Dit is de canvasgrootte van de game. 
+
+#### Preload functie
+Verder heeft elke game een preload, create en update functie, waarmee je het spel maakt. Wanneer de game start laadt Phaser automatisch alles wat er in de preload functie staat in. In de preload roep je alle ‘’game.load’’ aan om een wachtrij voor de lader op te bouwen. 
+
+#### Create functie
+Zodra het laden van de preload functie klaar is wordt de create functie automatisch gestart. In de create functie staat het grootste deel van de set-upcode. Het is belangrijk om te weten dat de game objecten worden weergegeven in de volgorde waarin ze worden aangemaakt. Je kan zelf kiezen waar je objecten op het canvas wil plaatsen. Dit doe je door ook de variabelen width en height aan ze mee te geven. Het is zelfs mogelijk om het object buiten de 0, 0 tot 800, 600 te plaatsen. Je kan het object dan niet zien maar het zal nog steeds binnen de scene aanwezig zijn. Met het camerasysteem van Phaser 3 is het mogelijk om met een actieve camera je in het spel te verplaatsen en in en uit te zoomen. 
+
+#### Update functie
+Ten slotte de update functie, deze wordt vooral gebruikt om ervoor te zorgen dat de player zich kan verplaatsen, de zwaartekracht te bepalen en om botsingen met andere objecten te controleren. Deze botsingen controleren is belangrijk, want anders valt hij door de ondergrond heen. Om de speler met de ondergrond te laten botsen, moet je een collider object aanmaken. Dit doe je door dit in je update functie te zetten
+```javascript
+this.physics.add.collider (player, platform); 
+```
+
+### Phaser game
+Zelf graag een Phaser game willen spelen of benieuwd naar hoe ze eruit kunnen zien? 
+Breakout en starstruck zijn beide HTML-5 games gemaakt met Phaser.
+* [Breakout](https://phaser.io/examples/v2/games/breakout)
+* [Starstruck](https://phaser.io/examples/v2/games/starstruck)
+
+
+### Belangrijke bronnen
+
+* [Making your first Phaser 3 game](https://phaser.io/tutorials/making-your-first-phaser-3-game/part1)
+* [WebGL vs Canvas](https://www.educba.com/webgl-vs-canvas/)
+* [Breakout](https://phaser.io/examples/v2/games/breakout)
+* [Starstruck](https://phaser.io/examples/v2/games/starstruck)

src/posts/2021-02-25-Web-APIs.md → src/posts/2021-02-25-web-apis.md

@@ -1,5 +1,5 @@
 ---
-title: Moderne web API's
+title: Moderne web APIs
 tags: Browser API's, Web Bluetooth, WebUSB, Web Serial,
 comments: true
 author: youri