Echo Sierra Studio

Feel free to leave suggestions by sending an email to illustratorscriptinstaller_support@esstudio.site

Authenticating Firebase JWT Tokens

2020-02-07T00:00:00+01:00

There might be circumstances where you would want to verify if a certain user is authenticated with firebase.

You don’t need the firebase admin module to verify and decode firebase JWT tokens. In the example below you can find a full implementation of this. I’m only using the default node.js modules http, https and crypto.

Example response JSON

{
    "data": {
        "iss": "https://securetoken.google.com/<project_id>",
        "aud": "<project_id>",
        "auth_time": 1581009428,
        "user_id": "9jnxi9kmz76ajnc4do47emrk8s1s",
        "sub": "9jnxi9kmz76ajnc4do47emrk8s1s",
        "iat": 1581082417,
        "exp": 1581086017,
        "email": "test@example.com",
        "email_verified": true,
        "firebase": {
            "identities": {
                "email": [
                    "test@example.com"
                ]
            },
            "sign_in_provider": "password"
        }
    }
}

You can optionally check if the “iss” value is equal to “https://securetoken.google.com/<project_id>” to ensure the user is signed in with a specific firebase project.

Batch exporting Adobe Illustrator data sets

2020-01-20T00:00:00+01:00

Important: Data sets should not have invalid characters for filenames like: \ / : * ? “ < >

Open a random document
Create a new “Save” action where you simply save the file as a pdf document, Don’t forget to uncheck “View PDF after saving”
Select the action and click on the hamburger button (the 3 horizontal lines) in the top right, click “Batch”
Select your “Save” action
Choose “Data Sets” as the source (you should see “No options available”)
Choose a destination
Check Override Action “Save” Command

File Name: Choose either File + Data Set Name or Data Set Name. _Make sure your dataset names have valid filename characters so none of these: \ / : * ? “ < >

Click “Ok”

If you’re getting this error: current values have not been captured and will be discarded upon switching data sets. Proceed?, please refer to “Clean data sets”

Clean data sets

Download the following script: https://gist.github.com/sempostma/30ea44b8fbce7033752cb80b8eb1ffb1/archive/d1405b86decd4c4462e5ca224c8506d62cdb3ad4.zip
Open the zip file, you should find a “Clean Datasets.jsx” file.
Copy the file to C:\Program Files\Adobe\Adobe Illustrator CC 2019\Presets\\\Scripts or the equivalent script folder for your operating system.
Restart Illustrator
Run: “File->Scripts->Clean Datasets”

Source:

Key value wrapper around IndexedDB

2020-01-12T00:00:00+01:00

Local-storage can be slow because local-storage’s CRUD operations are synchronous so they pause rendering, script execution, etc. If you want to do anything more complex than storing a string in local-storage, you will have to serialize/de-serialize your data, which also causes an extra performance impact. Storing blobs and files is even more tricky, you will have to convert blobs and files to bloated base64 strings. You can solve all of this by using IndexedDB, but you will soon notice there’s a giant difference between the two API’s. This wrapper attempts to gap those differences.

Make sure to use the following polyfills when necessary: https://github.com/eligrey/Blob.js and https://github.com/stefanpenner/es6-promise

Example:

const cacheStore = require('./indexeddb-wrapper-file') // es6
import cacheStore from './indexeddb-wrapper-file' // commonjs
var cacheStore = window.cacheStore // compiled javascript

cacheStore.set('my_key', { myAwesome: 'complexObject' })
	.then(function() {
  		return cacheStore.get('my_key')
	}).then(function(myKey) {
      	console.log('myKey', myKey)
    })

After deleting the store in devtools you might see an error in the console, you should bump the “VERSION” any time you delete database stores so the browser knows it should create new object stores.

Steps to add a new store:

Name your store: const APP_PERSISTENCE = "APP_PERSISTENCE";
Add it to the array of stores: const stores = [CACHE_STORE, APP_PERSISTENCE];
Bump the version: const VERSION = n; to const VERSION = n+1;
Instantiate a wrapper around the store: const myStoreWrapper = indexedDBStorage(APP_PERSISTENCE)

You might want to check if “error.name === ‘QuotaExceededError’” in transaction.onabort. If this is the case, alert the user about there not being enough storage space on the device.

Javascript:

const VERSION = 1;
const CACHE_STORE = "CACHE_STORE";
const DATABASE_NAME = window.location.origin;
const stores = [CACHE_STORE];
const request = (window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB)
    .open(DATABASE_NAME, VERSION);
const db = new Promise((resolve, reject) => {
    request.onsuccess = (e) => {
        resolve(e.target.result);
    };
    request.onerror = (e) => {
        reject(e);
    };
    request.onupgradeneeded = (e) => {
        const db = e.target.result;
        stores.forEach((store) => {
            if (!db.objectStoreNames.contains(store)) {
                db.createObjectStore(store);
            }
        });
    };
    request.onblocked = (e) => {
        reject(e);
    };
});
const indexedDBStorage = (name) => {
    const get = (key) => db.then((database) => new Promise((resolve, reject) => {
        let transaction = database.transaction([name], "readonly");
        transaction.onabort = function (e) {
            let error = e.target.error;
            throw error;
        };
        const store = transaction.objectStore(name);
        let request = store.get(key);
        request.onsuccess = function (e) { resolve(e.target.result); };
        request.onerror = reject;
    }));
    const keys = () => db.then((database) => new Promise((resolve, reject) => {
        let transaction = database.transaction([name], "readonly");
        transaction.onabort = function (e) {
            let error = e.target.error;
            throw error;
        };
        const store = transaction.objectStore(name);
        let request = store.getAllKeys();
        request.onsuccess = function (e) { resolve(e.target.result); };
        request.onerror = reject;
    }));
    const set = (key, value) => db.then((database) => new Promise((resolve, reject) => {
        let transaction = database.transaction([name], "readwrite");
        transaction.onabort = function (e) {
            let error = e.target.error;
            throw error;
        };
        const store = transaction.objectStore(name);
        let request = store.put(value, key);
        request.onsuccess = () => {
            resolve();
        };
        request.onerror = reject;
    }));
    const indexedDbDelete = (key) => db.then((database) => new Promise((resolve, reject) => {
        let transaction = database.transaction([name], "readwrite");
        transaction.onabort = function (e) {
            let error = e.target.error;
            throw error;
        };
        const store = transaction.objectStore(name);
        let request = store.delete(key);
        request.onsuccess = resolve;
        request.onerror = reject;
    }));
    const purgeDatabase = () => db.then((database) => new Promise((resolve, reject) => {
        let transaction = database.transaction([name], "readwrite");
        transaction.onabort = function (e) {
            let error = e.target.error;
            throw error;
        };
        const store = transaction.objectStore(name);
        let request = store.clear();
        request.onsuccess = resolve;
        request.onerror = reject;
    }));
    const deleteDatabase = () => {
        window.indexedDB.deleteDatabase(window.location.origin);
    };
    return {
        get,
        set,
        delete: indexedDbDelete,
        purgeDatabase,
        deleteDatabase,
        keys
    };
};
export default indexedDBStorage(CACHE_STORE);

Typescript:

const VERSION = 1;
const CACHE_STORE = "CACHE_STORE";
const DATABASE_NAME = window.location.origin;

const stores = [CACHE_STORE];

const request = (window.indexedDB || (window as any).mozIndexedDB || (window as any).webkitIndexedDB)
.open(DATABASE_NAME, VERSION);

const db = new Promise((resolve, reject) => {
  request.onsuccess = (e) => {
    resolve((e.target as any).result);
  };
  request.onerror = (e) => {
    reject(e);
  };
  request.onupgradeneeded = (e) => {
    const db = (e.target as any).result;
    stores.forEach((store) => {
      if (!db.objectStoreNames.contains(store)) {
        db.createObjectStore(store);
      }
    });
  };

  request.onblocked = (e) => {
    reject(e);
  };

});

const indexedDBStorage = (name: string) => {
  const get = (key: string) => db.then((database: any) => new Promise((resolve, reject) => {
    let transaction = database.transaction([name], "readonly");
    transaction.onabort = function(e: any) {
      let error = e.target.error;
      throw error;
    };
    const store = transaction.objectStore(name);
    let request = store.get(key);
    request.onsuccess = function(e: any) { resolve(e.target.result as any); };
    request.onerror = reject;
  }));

  const keys = () => db.then((database: any) => new Promise((resolve, reject) => {
    let transaction = database.transaction([name], "readonly");
    transaction.onabort = function(e: any) {
      let error = e.target.error;
      throw error;
    };
    const store = transaction.objectStore(name);
    let request = store.getAllKeys()
    request.onsuccess = function(e: any) { resolve(e.target.result as any); };
    request.onerror = reject;
  }));

  const set = (key: string, value: any) => db.then((database: any) => new Promise((resolve, reject) => {
    let transaction = database.transaction([name], "readwrite");
    transaction.onabort = function(e: any) {
      let error = e.target.error;
      throw error;
    };
    const store = transaction.objectStore(name);
    let request = store.put(value, key);
    request.onsuccess = () => {
      resolve();
    };
    request.onerror = reject;
  }));

  const indexedDbDelete = (key: string) => db.then((database: any) => new Promise((resolve, reject) => {
    let transaction = database.transaction([name], "readwrite");
    transaction.onabort = function(e: any) {
      let error = e.target.error;
      throw error;
    };
    const store = transaction.objectStore(name);
    let request = store.delete(key);
    request.onsuccess = resolve;
    request.onerror = reject;
  }));

  const purgeDatabase = () => db.then((database: any) => new Promise((resolve, reject) => {
    let transaction = database.transaction([name], "readwrite");
    transaction.onabort = function(e: any) {
      let error = e.target.error;
      throw error;
    };
    const store = transaction.objectStore(name);
    let request = store.clear();
    request.onsuccess = resolve;
    request.onerror = reject;
  }));

  const deleteDatabase = () => {
    window.indexedDB.deleteDatabase(window.location.origin);
  };

  return {
    get,
    set,
    delete: indexedDbDelete,
    purgeDatabase,
    deleteDatabase,
    keys
  };
};

export default indexedDBStorage(CACHE_STORE);

Compiled Javascript:

(function() {
  var VERSION = 1;
  var CACHE_STORE = "CACHE_STORE";
  var DATABASE_NAME = window.location.origin;
  var stores = [CACHE_STORE];
  var request = (
    window.indexedDB ||
    window.mozIndexedDB ||
    window.webkitIndexedDB
  ).open(DATABASE_NAME, VERSION);
  var db = new Promise(function(resolve, reject) {
    request.onsuccess = function(e) {
      resolve(e.target.result);
    };

    request.onerror = function(e) {
      reject(e);
    };

    request.onupgradeneeded = function(e) {
      var db = e.target.result;
      stores.forEach(function(store) {
        if (!db.objectStoreNames.contains(store)) {
          db.createObjectStore(store);
        }
      });
    };

    request.onblocked = function(e) {
      reject(e);
    };
  });

  var indexedDBStorage = function indexedDBStorage(name) {
    var get = function get(key) {
      return db.then(function(database) {
        return new Promise(function(resolve, reject) {
          var transaction = database.transaction([name], "readonly");

          transaction.onabort = function(e) {
            var error = e.target.error; 
            throw error;
          };

          var store = transaction.objectStore(name);
          var request = store.get(key);

          request.onsuccess = function(e) {
            resolve(e.target.result);
          };

          request.onerror = reject;
        });
      });
    };

    var keys = function keys() {
      return db.then(function(database) {
        return new Promise(function(resolve, reject) {
          var transaction = database.transaction([name], "readonly");

          transaction.onabort = function(e) {
            var error = e.target.error; 
            throw error;
          };

          var store = transaction.objectStore(name);
          var request = store.getAllKeys();

          request.onsuccess = function(e) {
            resolve(e.target.result);
          };

          request.onerror = reject;
        });
      });
    };

    var set = function set(key, value) {
      return db.then(function(database) {
        return new Promise(function(resolve, reject) {
          var transaction = database.transaction([name], "readwrite");

          transaction.onabort = function(e) {
            var error = e.target.error;
            throw error;
          };

          var store = transaction.objectStore(name);
          var request = store.put(value, key);

          request.onsuccess = function() {
            resolve();
          };

          request.onerror = reject;
        });
      });
    };

    var indexedDbDelete = function indexedDbDelete(key) {
      return db.then(function(database) {
        return new Promise(function(resolve, reject) {
          var transaction = database.transaction([name], "readwrite");

          transaction.onabort = function(e) {
            var error = e.target.error;
            throw error;
          };

          var store = transaction.objectStore(name);
          var request = store["delete"](key);
          request.onsuccess = resolve;
          request.onerror = reject;
        });
      });
    };

    var purgeDatabase = function purgeDatabase() {
      return db.then(function(database) {
        return new Promise(function(resolve, reject) {
          var transaction = database.transaction([name], "readwrite");

          transaction.onabort = function(e) {
            var error = e.target.error;
            throw error;
          };

          var store = transaction.objectStore(name);
          var request = store.clear();
          request.onsuccess = resolve;
          request.onerror = reject;
        });
      });
    };

    var deleteDatabase = function deleteDatabase() {
      window.indexedDB.deleteDatabase(window.location.origin);
    };

    return {
      get: get,
      set: set,
      delete: indexedDbDelete,
      purgeDatabase: purgeDatabase,
      deleteDatabase: deleteDatabase,
      keys: keys
    };
  };

  var _default = indexedDBStorage(CACHE_STORE);

  window.cacheStore = _default;
})();

Export illustrator file to all important file formats.

2019-11-12T00:00:00+01:00

Final Export.jsx

Installation: Copy this file to your illustrator scripts folder:

For windows: C:\Program Files\Adobe\Adobe Illustrator CC 2019\Presets\\\Scripts

For Mac: Applications/Adobe Illustrator CC/Presets//Scripts

Usage: File->Scripts->Final Export

Questions? Send me an email.

Download link: ZIP

Output file structure:

  Output file structure:
  /<choosen output folder>
      /pictogram
           /<choosen filename>.jpg
           /<choosen filename>.png
      /icon
           /<choosen filename>.jpg
           /<choosen filename>.png
      /small
           /<choosen filename>.jpg
           /<choosen filename>.png
      /large
           /<choosen filename>.jpg
           /<choosen filename>.png
      /xlarge
           /<choosen filename>.jpg
           /<choosen filename>.png
      /<choosen filename>.ai
      /<choosen filename>.pdf
      /<choosen filename>.svg
      /<choosen filename>.jpg
      /<choosen filename>.png
      /<choosen filename>.dxf
      /<choosen filename>.eps

TIP: You can keep exporting different variations to the same output folder as long as you choose a different name when exporting. Be carefull, files can be overidden.

Source GIST:

Editing Netlify CMS config.yml from Netlify CMS without plugins

2019-06-09T00:00:00+02:00

While experimenting I decided to see how much i could stretch the Netlify CMS capabilities regarding this issue.

Turns out you can almost do it. It wasn’t completely possible due to these 2 issues:

Because Netlify CMS can’t handle self-referential / circular data structures in the config.yml the file becomes very big and fields only work 1 depth down. For example my config can’t handle an object in an object in an object. You can get around this by increasing the depth but the file will become exponentially bigger. As it is, the file already has ~5000 😵 lines of code. Of course the upside is that you don’t have to look at it anymore…

Don’t use this in production. This could lead to data loss. This is an experiment, not a viable solution.

Add this to your config.yml:

I created a small node utility for creating the config from 2 different (less bulky) files.

Feel free to fork, tweak or otherwise change the code.

Markdown viewer for windows

2019-06-09T00:00:00+02:00

Want a very simple, windows-themed, clean and easy to use markdown viewer? Checkout Mardownify: https://www.microsoft.com/p/markdownify/9npgxqvzj8c0

The Microsoft store is packed with markdown viewers and editors. Most of the markdown apps are too expensive and overly complex. Some of those apps are already very old and don’t adhere to the windows 10 theme.

Markdownify is a simple and effective markdown/text file viewer. You can open any file in the markdown format. Markdownify can also view HTML files.

Source code: Github

Markdownify

Markdown Viewer

Click “File”->”Open” button in the toolbar to open files. You can also drag files into the app.

File Associations

Markdown

markdown
mdown
mkdn
md
mkd
mdwn
mdtxt
mdtext
text
Rmd

HTML

html
htm
xhtml
dhtml
phtml
jhtml
mhtml
rhtml
shtml
zhtml

Other releases:

You can check out the latest releases on Github or follow the latest releases through the Newsfeeder app:

Download latest version: https://www.microsoft.com/p/markdownify/9npgxqvzj8c0

Copyright

All rights reserved. No part of this software may be reproduced, distributed, or transmitted in any form or by any means without the prior written permission of the publisher, except certain noncommercial uses permitted by copyright law. For permission requests, contact the copyright holder.

All about debouncing, throttling and batching

2019-05-25T00:00:00+02:00

Failing to properly debounce or throttle taxing tasks in your javascript apps (or any other app for that matter) can really hurt performance. In this article i’ll list some examples of debounce and javascript functions.

If you are not up to date with debounce and throttle function, you check out this css.tricks article by dcorbacho. A debounce or throttle function is actually just a way of limiting how much a function can be called. The window scroll event for example can fire hundreds of times for every interaction. If you’re doing some heavy javascript layout tasks, every time this event is fired, you’re website is going to be very janky. Another place where debounce and throttling functions are often used is with limiting ajax calls. Most autocomplete search boxes use some kind of debounce or throttle function because sending a request for every keypress will hurt your app a lot.

I stole the debounce function from David Walsh and the throttle function from a comment on the same article:

Niall Campbell

Throttled can be simply achieved by changing the way the timeout is cleared/set. eg..
// Returns a function, that, as long as it continues to be invoked, will only
// trigger every N milliseconds. If <code>immediate</code> is passed, trigger the 
// function on the leading edge, instead of the trailing.
function throttle(func, wait, immediate) {
	var timeout;
	return function() {
		var context = this, args = arguments;
...
Note that the timeout is not destroyed and recreated for every call (unlike debouncing). Its destroyed after the timeout has completed and created on the first call after its been destroyed.

In simple terms, the function rate limits the amount of events to a certain time span. Visually a debounce function looks something like this:

The debounce snippet:

    // Returns a function, that, as long as it continues to be invoked, will not
    // be triggered. The function will be called after it stops being called for
    // N milliseconds. If `immediate` is passed, trigger the function on the
    // leading edge, instead of the trailing.
    
    var debounce = function debounce(func, wait, immediate) {
      var timeout;
      return function() {
        var context = this,
          args = arguments;
    
        var later = function later() {
          timeout = null;
          if (!immediate) func.apply(context, args);
        };
    
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
      };
    };
    
    // window.onscroll = debounce(200)(function() { 
    // 	console.log(window.pageYOffset ) 
    // });

The throttle snippet:

    // Returns a function, that, as long as it continues to be invoked, will only
    // trigger every N milliseconds. If `immediate` is passed, trigger the
    // function on the leading edge, instead of the trailing.
    
    var throttle = function throttle(func, wait, immediate) {
      var timeout;
      return function() {
        var context = this,
          args = arguments;
    
        var later = function later() {
          timeout = null;
          if (!immediate) func.apply(context, args);
        };
    
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
      };
    };
    
    
    // window.onscroll = throttle(200)(function() { 
    // 	console.log(window.pageYOffset ) 
    // });

The comments already explain the ‘immediate’ parameter. The basic difference is that without the ‘immediate’ parameter the function will wait and then fire. If the ‘immediate’ parameter is set to true it will fire and then wait. Be aware that if you set the ‘immediate’ parameter, the function won’t always fire at or after the last event because it might still be waiting because of a previous event. If ‘immediate’ is set to true the function will always fire after or at the last event. This can get you into trouble if you’re sending data or if you have to make sure you always have the latest. Only set the ‘immediate’ parameter if you know what you’re doing.

See the Pen NVMjJV by sempostma (@Afirus) on CodePen.

In some cases you want to all the data from all of the events but you still want debouncing/throttling behavior:

var update = debounce(500)(function(e) {
    // doFakeAjaxRequest(payload);
	console.log(e);
});

let delay = 0;
setTimeout(() => update('All'), delay += 300);
setTimeout(() => update('of'), delay += 300);
setTimeout(() => update('these'), delay += 300);
setTimeout(() => update('arguments'), delay += 600);
setTimeout(() => update('are'), delay += 300);
setTimeout(() => update('not'), delay += 300);
setTimeout(() => update('batched'), delay += 300);

If you don’t want event data to be lost you can use this function to get all of the arguments since the last time the debounce/throttle function fired:

const batched = delayedFunc => func => {
    const stack = [];
    const handler = delayedFunc(() => {
        func(stack);
        stack.splice(0, stack.length);
    });
    return function () {
        stack.push({ context: this, args: arguments });
        handler();
    }
}

Use the following snippets:

The debounce snippet:

// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.

var debounce = function debounce(wait, immediate) {
  return function(func) {
    var timeout;
    return function() {
      var context = this,
        args = arguments;

      var later = function later() {
        timeout = null;
        if (!immediate) func.apply(context, args);
      };

      var callNow = immediate && !timeout;
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
      if (callNow) func.apply(context, args);
    };
  };
};

// window.onscroll = debounce(200)(function() { 
// 	console.log(window.pageYOffset ) 
// });

The throttle snippet:

// Returns a function, that, as long as it continues to be invoked, will only
// trigger every N milliseconds. If `immediate` is passed, trigger the
// function on the leading edge, instead of the trailing.
var throttle = function throttle(wait, immediate) {
  return function(func) {
    var timeout;
    return function() {
      var context = this,
        args = arguments;

      var later = function later() {
        timeout = null;
        if (!immediate) func.apply(context, args);
      };

      var callNow = immediate && !timeout;
      clearTimeout(timeout);
      if (!timeout) timeout = setTimeout(later, wait);
      if (callNow) func.apply(context, args);
    };
  };
};

// window.onscroll = throttle(200)(function() { 
// 	console.log(window.pageYOffset ) 
// });

And then change your code to this:

var update = batched(debounce(500))(function(stackedEvents) {
	var payload = stackedEvents.map(function(frame) {
		return frame.args[0];
	}).join(' ');
    // doFakeAjaxRequest(payload);
    console.log(payload);
});

let delay = 0;
setTimeout(() => update('All'), delay += 300);
setTimeout(() => update('of'), delay += 300);
setTimeout(() => update('these'), delay += 300);
setTimeout(() => update('arguments'), delay += 600);
setTimeout(() => update('are'), delay += 300);
setTimeout(() => update('being'), delay += 300);
setTimeout(() => update('batched'), delay += 300);

Which will result in:

index.js:85 All of these 
index.js:85 arguments are being batched

Mindviewer - Create multi-user realtime editable mindmaps

2019-04-26T00:00:00+02:00

I created a web based realtime multi-user mindmapper. It’s currently free to use and I’m looking for feedback. You can try it by opening the same mindmapper in 2 different tabs.

You can connect to the other mindmap by creating a public mindmap and then clicking the share icon:

An example mindmap: https://mindviewer.esstudio.site/mindmapper.html?firestore=true&ispublic=true&room=l7nQoP3a5ni5mBkzApZY&theme=minimalistic

If you open this in multiple chrome browser tabs you will notice that the mindmaps update in realtime. I’m currently working on perfecting the exporting to image and html feature.

Using the icon you can change the background of your mindmap. This change is not synced to the other tabs so every user can have their own theme and custom background.

If you click the icon you go back to the home screen (don’t forget to save you’re changes by on one of the save buttons). You can download the mindmap by going to Mindviews->”Example mindmap”->Download.

The mindmaps are stored in a human readable format. You can view the stored information by opening the “.onmm” file with https://json-gui.esstudio.site File->Open from disk. You can make changes to your mindmap, save and open the newly created file in mindviewer by going to “Import mindmap” and dragging the mindmap into the file dropzone.

With mindviewer you can create mindmaps with other users in real-time. Support for saving mindmaps to google drive and your local machine coming soon. If you want to give feedback or tips, please send a message: mindviewer@esstudio.site or use the contact form: esstudio.site/contact.

Mindviewer Quick-launch

Mindviewer is a HTML5 web app which allows real-time mindmap building with multiple users.

Nieuwe patch van de Kadaster Kaart

2019-02-19T00:00:00+01:00

Een nieuwe versie van de kadaster kaart is uitgebracht met een aantal vernieuwingen. De user interface is gebruiksvriendelijker en er zijn wat overbodige element verwijderd. Ook is er een nieuwe lander pagina: esstudio.site/kadaster-kaart/. Perceel nummers zijn nu makkelijker te vinden en er zijn een aantal weergave verbeteringen aangebracht.

Open de proefversie.

Kadaster Kaart

Met de Kadaster kaart app/website kunt u gemakkelijk informatie opzoeken over percelen die geregistreerd staan bij het Kadaster.

The real guide to creating a website with free hosting (2019)

2019-02-17T00:00:00+01:00

If you search google for “How to create a free website” you will see a bunch of website builders and websites who will give you a domain like: “yourname.theirname.com” or “theirname.com/yourname”. But in this tutorial/guide I will show you the secret to creating a real website completely customizable website. The only payment you will need to do is a 0.89 dollar one year domain.

Step 1

Go to https://www.namecheap.com/domains/ and search for a domain name. I would suggest choosing an uncommon domain name. Try to find one that costs as little as possible. This is probably the best because if you’re starting out, you can always buy a more expensive domain later. If you’ve found a cheap domain it’s probably because it’s very unique and original so it’s a good thing. One thing to keep in mind though is to keep the domain name as short as possible.

In this example I’m using namecheap but you can use any service you want. If you want to follow along I suggest you buy the domain via namecheap, they provide good pricing and a nice user interface (I’m not sponsored). For example this domain costs 0.88 euro/yr which is about a 1 USD. Click “add to cart”, create an account if you haven’t already and buy the domain.

Step 2

When you’re done, go to https://www.cloudflare.com/, create an account and add a website:

Cloudflare will now get your DNS records. If you are not familiar with those, it doesn’t matter, you can just click continue until you get to the following dialog:

Go back to your namecheap account (or another domain name provider if you didn’t use namecheap). Go to your domain’s dashboard and change the nameserver setting to Custom DNS and copy the nameservers values to the values in the cloudflare dialog:

If you’re not using namecheap, search for the nameserver setting, there should be a similar setting. If you can’t find it, a quick google search often reveals where you can change it.

Go back to cloudflare, click “continue”, and wait until cloudflare completes your nameserver setup. This can take a (very) long time. If it’s not immediately working just give it an hour’s worth of time.

You need to add three records to your DNS table.

Add an “A” record by clicking the dropdown in the top left in the above image and give it the name of your domain in my example it’s “esstudio.site”. Make sure you don’t include any slashes or the “https://” part of the url. In the value field, put in “192.30.252.153”.
Add another “A” record by clicking the dropdown in the top left in the above image and give it the name of your domain in my example it’s “esstudio.site”. Make sure you don’t include any slashes or the “https://” part of the url. In the value field put in “192.30.252.154”.
Finally, add a CNAME record with the name “www”. In the value field, put in the name of your github username plus “.github.io” If you don’t have a github account, you can do this after step 3.

For all the records keep the TTL setting at “Automatic TTL”.

Step 3

Next, go to https://github.com/, and create an account if you haven’t already. Click on the little plus icon in the top right and choose “New repository”. You can also go to your repositories and click “New”. You will see the following dialog:

Choose a repository name and description, keep the repository public (it’s going to be a public website so it will be public anyway) and click “Create repository”.

The following page might be a bit confusing if you’re not a programmer or you’re not familiar with git(hub) but you need to click the “Create a new file” link/button.

If you know HTML you can put in the following:

Otherwise enter the following:

The above picture shows a markdown file but that’s to only thing you need to know. If you don’t know anything about HTML or Markdown you can a website called forestry.io to edit and create pages. I’m actually using it right now to write this article.

If you’re a programmer, keep in mind that even though this is just a static website hosted on github, a lot of websites nowadays are just static web apps running react or angular which fetch data from an API. You can even use https://firebase.google.com/ for a full serverless architecture or use something like heroku to create an API. You can use forestry.io as a CMS for your github repositories. It actually commits and pushes your edits to github. You can even use jekyll which has builtin support for sass, coffeescript, markdown and does a lot more. You can even use jekyll to output data as JSON. I’ve created an RSS reader using the methods above which can be found here: https://newsfeeder.esstudio.site/.

Step 4

The following steps may be confusing but just follow along and copy what I’m doing. Click on the “settings” tab:

Scroll down until you see the following:

Click the github pages source dropdown and select the “master” branch.

You will probably see something like this. Because we want an absolute URL (without the “/my-fast-static-site/” part we go back to the code tab and add a new file:

Enter the domain name you just purchased. It’s important that you don’t include any slashes or the “https://” part in the domain name. Save the file and we’re done with github.

Step 5

After completing the previous step, wait a minute and open your domain and see if it’s working. If it’s not, please leave a message in the comments.

To improve performance and enable SSL and HTTPS, go to back to cloudflare. For non-programmers, if you use HTTPS you’re users will see a little security lock next to the URL to show that the page is secure.

Click on the crypto icon and enable full SSL.

Scroll down and make sure that “Always Use HTTPS” is selected.

Click the speed icon. And enable “Auto Minify” of Javascript, CSS and HTML.

Scroll down and enable Brotli compression.

Scroll down and click the caching icon.

Scroll down and select the Standard caching level. Set the browser cache expiration to 4 hours and make sure that “always online” is set to “On”.

And you’re done!

To edit you’re pages I recommend forestry.io. To get started with foresty.io, click “login” and then “login with github”. Import your github repository as a jekyll project and you can start adding pages. If you want to learn more check out the documentation.

To change you’re website’s theme, you can select these themes. Click on one of the themes, for example cayman. If you scroll down, you will probably see a “usage” section. You only need to do the first instruction which looks like this in the case of the cayman theme:

Add the following to your site’s _config.yml:

theme: jekyll-theme-cayman

Note to programmers

If you’re using a javascript framework or a build tool you can use git to push you’re dist folder to the github-pages branch using the steps below. These steps are copied from: https://gist.github.com/cobyism/4730490.

Step 1

Remove the dist directory from the project’s .gitignore file (it’s ignored by default by Yeoman).

Step 2

Make sure git knows about your subtree (the sub folder with your site).

git add dist && git commit -m "Initial dist subtree commit"

Step 3

Use subtree push to send it to the gh-pages branch on GitHub.

git subtree push --prefix dist origin gh-pages

Boom. If your folder isn’t called dist, then you’ll need to change that in each of the commands above.

Downloading, saving and opening files with Cordova

2019-02-16T00:00:00+01:00

In the browser, downloading files is actually quite easy. You can just do:

<a download="filename.txt" href="data:text/plain;charset=utf-8,hello world!">Download</a>

But this doesn’t work in webview. I’ve expanded on the answer given in this stackoverflow question to work in both the browser and in a webview. It also let’s the user open the files in a webview and polyfills the anchor’s download attribute.

Because of how cordova works we need the cordova-plugin-file, the cordova-plugin-file-opener2 and file-saver. The cordova-plugin-file plugin gives us access to the users’s file system, and the cordova-plugin-file-opener2 plugin helps us with opening files using an external application (e.g word, excel, etc.). We are using the file-saver when we are running inside of the browser.

function download(filename, data, mimeType) {
  var blob = new Blob([data], {
    type: mimeType
  });
  if (window.cordova && cordova.platformId !== "browser") {
    document.addEventListener("deviceready", function () {
      // save file using codova-plugin-file
    });
  } else {
    saveAs(blob, filename);
  }
};

Let’s save the file using codova-plugin-file.

function download(filename, data, mimeType) {
  var blob = new Blob([data], {
    type: mimeType
  });
  if (window.cordova && cordova.platformId !== "browser") {
  	document.addEventListener("deviceready", function() {
      var storageLocation = "";

      switch (device.platform) {
        case "Android":
          storageLocation = cordova.file.externalDataDirectory;
          break;

        case "iOS":
          storageLocation = cordova.file.documentsDirectory;
          break;
      }

      var folderPath = storageLocation;

      window.resolveLocalFileSystemURL(
        folderPath,
        function(dir) {
          dir.getFile(
            filename,
            {
              create: true
            },
            function(file) {
              // The file...
            },
            function(err) {
              alert("Unable to download");
              console.error(err);
            }
          );
        },
        function(err) {
          alert("Unable to download");
          console.error(err);
        }
      );
    });
    } else {
      saveAs(blob, filename);
    }
}

To finish the function we write the data to the file and then we open it using the file opener plugin. So the full example is:

function download(filename, data, mimeType) {
  var blob = new Blob([data], {
    type: mimeType
  });
  if (window.cordova && cordova.platformId !== "browser") {
    document.addEventListener("deviceready", function () {
      var storageLocation = "";

      switch (device.platform) {
        case "Android":
          storageLocation = cordova.file.externalDataDirectory;
          break;

        case "iOS":
          storageLocation = cordova.file.documentsDirectory;
          break;
      }

      var folderPath = storageLocation;

      window.resolveLocalFileSystemURL(
        folderPath,
        function (dir) {
          dir.getFile(
            filename,
            {
              create: true
            },
            function (file) {
              file.createWriter(
                function (fileWriter) {
                  fileWriter.write(blob);

                  fileWriter.onwriteend = function () {
                    var url = file.toURL();
                    cordova.plugins.fileOpener2.open(url, mimeType, {
                      error: function error(err) {
                        console.error(err);
                        alert("Unable to download");
                      },
                      success: function success() {
                        console.log("success with opening the file");
                      }
                    });
                  };

                  fileWriter.onerror = function (err) {
                    alert("Unable to download");
                    console.error(err);
                  };
                },
                function (err) {
                  // failed
                  alert("Unable to download");
                  console.error(err);
                }
              );
            },
            function (err) {
              alert("Unable to download");
              console.error(err);
            }
          );
        },
        function (err) {
          alert("Unable to download");
          console.error(err);
        }
      );
    });
  } else {
    saveAs(blob, filename);
  }
}

Full example

Now we can call the download function with any kind of data, text and blobs, and it will work in the browser and inside a webview. But we still haven’t fixed the download attribute issue. To fix this we can add a click handler to the document. This function works for any kind of url, including data urls.

Resources:

Javascript in 24 hours

HTML, CSS, ES6 all in one

A Hands-On Guide to Building Web Applications Using React

Learning Regular Expressions

InformIT eBook Store has a large number of ebooks on a wide range of topics. I would definitely recommend them.

Great courses:

Javascript for beginners in 3 hours

Mobile UI and UX Design

Building web applications with react

Starting with angular 4

Programming in C# (recommended)

More web development courses

Quickstart offers a large amount of (online) courses on web development (Use Code LSOFF50 to get 50% off ;p)

A* Pathfinding in Javascript

2018-11-14T14:19:03+01:00

Because we’ll be using binary heaps (min heap) in this tutorial I would recommend this tutorial on implementing binary heaps with javascript.

The code for the min heap is:

// I'm using a "MinHeap" in this example. If you don't know what priority queues or binary trees are, checkout this article: https://esstudio.site/2018/10/31/implementing-binary-heaps-with-javascript.html
    
class MinHeap {
  constructor(selector) {
    this.items = [];
    this.selector = selector;
  }

  seek() { return this.items[0]; }

  push(item) {
    let i = this.items.length;
    this.items.push(item);
    while (i > 0 && this.selector(this.items[Math.floor((i + 1) / 2 - 1)]) > this.selector(this.items[i])) {
      let t = this.items[i];
      this.items[i] = this.items[Math.floor((i+1)/2-1)];
      this.items[Math.floor((i+1)/2-1)] = t;
      i = Math.floor((i + 1) / 2 - 1);
    }
  }

  pop() {
    if (this.items.length <= 1) return this.items.pop();
    const ret = this.items[0];
    this.items[0] = this.items.pop();
    let i = 0;
    while (true) {
      let lowest = this.selector(this.items[(i + 1) * 2]) < this.selector(this.items[(i + 1) * 2 - 1]) 
      ? (i + 1) * 2 : (i + 1) * 2 - 1;
      if (this.selector(this.items[i]) > this.selector(this.items[lowest])) {
        let t = this.items[i];
        this.items[i] = this.items[lowest];
        this.items[lowest] = t;
        i = lowest             
      } else break;
    }
    return ret;
  }

  delete(item) {
    let i = this.items.indexOf(item);
    // heapify
    this.items[i] = this.items.pop();
    while (true) {
      let lowest = this.selector(this.items[(i + 1) * 2]) < this.selector(this.items[(i + 1) * 2 - 1]) 
      ? (i + 1) * 2 : (i + 1) * 2 - 1;
      if (this.selector(this.items[i]) > this.selector(this.items[lowest])) {
        let t = this.items[i];
        this.items[i] = this.items[lowest];
        this.items[lowest] = t;
        i = lowest             
      } else break;
    }
  }

  heapify(arr) {
    for (let i = 0; i < arr.length; i++) {
      this.push(arr[i]);
    }
  }
}

Again if you don’t understand something you can refer to this blog post.

Make sure the MinHeap class is a global variable or better, export the class if you’re using commonjs or es6 modules.

class GridPath {
    constructor(width, height) {
        this.width = width;
        this.height = height;
        this.len = width * height;
        this.startI = null;
        this.goalI = null;
    }
}

When a new grid path is instantiated we set the width and height of the grid. Then we get the total number of cells/nodes and set it to the “.len” field. We also set the start node index and the goal node index to null. If the width and height are 10 for example, the grid will be laid out like this:

[
	0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
    10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
    20, 21, 22, 23, 24, 25, 26, 27, 28, 29,
    30, 31, 32, 33, 34, 35, 36, 37, 38, 39,
    40, 41, 42, 43, 44, 45, 46, 47, 48, 49,
    50, 51, 52, 53, 54, 55, 56, 57, 58, 59,
    60, 61, 62, 63, 64, 65, 66, 67, 68, 69,
    70, 71, 72, 73, 74, 75, 76, 77, 78, 79,
    80, 81, 82, 83, 84, 85, 86, 87, 88, 89,
    90, 91, 92, 93, 94, 95, 96, 97, 98, 99
]

To recap. Every node on the grid has it’s own index. There are two special nodes on the grid, the “start node” and the “goal node”. We stored the indexes of these nodes.

Now we can start with the actual logic.

// class GridPath {
// ...
	find(startI, goalI) {
        this.startI = startI;
        this.goalI = goalI;

        const closedSet = {}; // a set with all the indexes that we've processed

        const cameFrom = {}; // a set with indexes that point to the index of the node from where we came from.

        const gScore = {}; // a set with indexes that hold the current lowest cost (how many nodes away from the start according to the current closest path) to get to that node.
        gScore[startI] = 0; // set the gscore of the start index to zero, because it costs zero to get from the first node to the first node.

        const fScore = {}; // a set with indexes that hold the approximate distance or cost to get from that node to the goal. We need a function to approximate that distance which will be "this.heuristicCostEstimateSquared(aRandomNodeIndex, goalIndex)"
      
        const openSet = new MinHeap(index => fScore[index] || Infinity); // a minheap that holds all the nodes that need to be processed sorted based on the node's fScore.
        
      	fScore[startI] = this.heuristicCostEstimateSquared(startI, goalI); // we set the initial approximate distance from the goal.
        openSet.push(startI); // we push the start node index on the minheap.
  
  		// ...
	}
// }

The closed set holds a set with all the indexes that we’ve processed. The camefrom variable holds a set with indexes that point to the index of the node from where we came from. The gscore holds a set with indexes that hold the current lowest cost (how many nodes away from the start according to the current closest path) to get to that node. We set the gscore of the start index to zero, because it costs zero to get from the first node to the first node. The fscore holds a set with indexes and the approximate distance or cost to get from that node to the goal. We need a function to approximate that distance which will be “this.heuristicCostEstimateSquared(aRandomNodeIndex, goalIndex)”. We do this for the first node we need to process which is the start node. Then we push this node onto the open set which is a minheap that holds all the nodes that need to be processed sorted based on the node’s fScore.

The “heuristicCostEstimateSquared” function is implemented like this:

heuristicCostEstimateSquared(node1I, node2I) {
        return Math.pow(node2I % this.width - node1I % this.width, 2) 
            + Math.pow(Math.floor(node2I / this.width) - Math.floor(node1I / this.width), 2);
}

We simply use the “pythagoras theorem” to determine the approximate distance between nodes. You can optimize this function by not taking the square root because we don’t need the actual distance. We just need to know if node A is closer then node B, so taking the square root is just useless overhead.

Next we start a while loop that continues untill there are no more nodes in the openSet. Hopefully we find a path before that happens otherwise we can be sure there’s no valid path from the start node to the goal node.

// class GridPath {
	// ...
	// find(startI, goalI) {
		// ...
		while(openSet.items.length > 0) {
            const currentI = openSet.pop();

            if (currentI === goalI) {
                // done
                return this.reconstructPath(cameFrom, currentI);
            }

            closedSet[currentI] = true;
            const neighboursI = this.neighboursI(currentI);

            for (let i = 0; i < neighboursI.length; i++) {
                const neighbourI = neighboursI[i];
                
                if (neighbourI < 0 || neighbourI > this.len || closedSet[neighbourI])
                    continue;

                const tentativeGscore = gScore[currentI] + 1;

                if (!fScore[neighbourI]) {
                    cameFrom[neighbourI] = currentI;
                    gScore[neighbourI] = tentativeGscore;
                    fScore[neighbourI] = tentativeGscore + this.heuristicCostEstimateSquared(neighbourI, goalI);
                    openSet.push(neighbourI);
                }
                else {
                    if (tentativeGscore >= gScore[neighbourI])
                        continue;
                    else {
                        cameFrom[neighbourI] = currentI;
                        gScore[neighbourI] = tentativeGscore;
                        fScore[neighbourI] = tentativeGscore + this.heuristicCostEstimateSquared(neighbourI, goalI);
                        // update openset
                        openSet.delete(neighbourI);
                        openSet.push(neighbourI);
                    }
                }
            }
        }
	// }
// }

Start by popping the closes node to the goal from the openSet. Then check if that node is the goal node, if so we’ve finished.

Else, we set the node’s index on the closedSet. Marking it as discovered. Then we get all of the node’s neighbours. We can get all of the indexes of the neighbours with this function:

// class GridPath {
    // ...
    neighboursI(nodeI) {
      return [
        nodeI - this.width,
        nodeI + 1,
        nodeI + this.width,
        nodeI - 1,
      ]
    }
// }

Now we start looping over every neighbour. If the neighbour is in the closed set, we skip that node and continue. Then we set the tentative gscore of the neighbour to the gscore of the previous node plus one. If the neighbour is not in the fscore set we add the nieghbour with the heuristic cost estimate plus the tentaive gscore. Then we set the camefrom and gscore set, and we push the neighbour onto the open set. If the nieghbour is in the fscore set, we check if the current tentative gscore is lower then the previous gscore. If so we set it onto the camefrom, gscore and fscore sets. We also delete and push the neighbour to trigger the openset the resort the binary tree.

And we’re done, we now only need to define the “reconstructPath(cameFrom, currentI)” function:

// class GridPath {
    // ...
	reconstructPath(cameFrom, currentI) {
        let counter = 0;
        const path = [];
        path.push(currentI);
        while(currentI !== this.startI) {
            path.push(currentI);
            currentI = cameFrom[currentI];
            if (counter++ > 999999) return null;
        }
        path.push(this.startI);
        let nodesI = new Array(path.length);
        for(let i = 0; i < path.length; i++) {
            nodesI[i] = path[path.length - 1 - i];
        }
        return nodesI;
    } 
// }

Let’s test the code:

var dim = 51;
var lookup = document.getElementsByClassName('col-block');
var pathfinding = new GridPath(dim, dim);
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
window.addEventListener('mousemove', function (e) {
  var pos = getMousePos(canvas, e);
  var x = pos.x;
  var y = pos.y;
  if (x < 0 || y < 0 || x >= dim || y >= dim) return;
  var i = y * dim + x;
  var mi = Math.round(dim * dim * .5);
  var nodes = pathfinding.find(mi, i) || [];
  var bw = canvas.width / dim;
  var bh = canvas.height / dim;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (var k = 0; k < nodes.length; k++) {
    ctx.fillRect(nodes[k] % dim * bw, Math.floor(nodes[k] / dim) * bh, bw, bh);
  }
});

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: Math.round((evt.clientX - rect.left - canvas.width / dim * .5) / canvas.width * dim),
    y: Math.round((evt.clientY - rect.top - canvas.height / dim * .5) / canvas.height * dim),
  };
}

See the Pen Grid Pathfinding by sempostma (@Afirus) on CodePen.

Resources:

Javascript in 24 hours

HTML, CSS, ES6 all in one

A Hands-On Guide to Building Web Applications Using React

Learning Regular Expressions

InformIT eBook Store has a large number of ebooks on a wide range of topics. I would definitely recommend them.

Great courses:

Javascript for beginners in 3 hours

Mobile UI and UX Design

Building web applications with react

Starting with angular 4

Programming in C# (recommended)

More web development courses

Quickstart offers a large amount of (online) courses on web development (Use Code LSOFF50 to get 50% off ;p)

html2js-loader tutorial

2018-11-14T13:35:00+01:00

This tutorial covers how you set up the html2js-loader and webpack. If you don’t know what html2js does, you can read this blog post or use the online converter tool.

To get started you can use the following instructions.

npm init
npm i -D html2js-loader webpack webpack-cli

or clone the tutorial repository.

git clone https://github.com/sempostma/html2js-loader-demo-tutorial.git

When the loader and webpack have finished installing, add the following line to your scripts:

"scripts": {
    "start": "webpack --config webpack.config.js --watch"
}

Create a “webpack.config.js” file.

// webpack.config.js

const path = require('path');

module.exports = {
    context: __dirname,
    entry: path.resolve(__dirname, 'src/index'),
    mode: 'development',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
    module: {
        rules: [{
            test: /\.html$/,
            use: {
                loader: 'html2js-loader',
                options: {
                    // defaults:

                    // trimWhitespace: false,
                    // removeComments: false,
                    // skipEmptyTextNodes: false
                }
            }
        }]
    }
}

Now create a folder called “dist” and add an “index.html” file:

<!-- dist/index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>html2js loader tutorial</title>
</head>
<body>
    
    <script src="bundle.js"></script>
</body>
</html>

Also, add a folder “src” with a “index.js” file, containing:

// src/index.js

document.write('<h1>Hello World</h1>');

That’s it, we’re finished setting up the project, you can run “npm start” to watch for changes and build your project.

npm start

Open the “index.html” file in your favorite browser (for example chrome) and you should see the text “Hello World”.

To use the loader we create an html file in the src folder (I’m going to call it “posts.html” with the following content).

<!-- src/posts.html -->

<h1>Blog Posts</h1>

<section class="posts" itemscope itemtype="http://schema.org/Blog">
    <article itemprop="blogPost">
        <img class="post-image" itemprop="image" src="https://esstudio.site/uploads/simple%20draggable%20elements2.gif"
            alt="&quot;Create draggable elements with Javascript&quot; Thumbnail">
        <h2 class="post-title">Create draggable elements with Javascript</h2>
        <p><small class="post-date">01 NOVEMBER 2018</small></p>
        <a target="_blank" href="https://esstudio.site/2018/11/01/create-draggable-elements-with-javascript.html">View
            more...</a>
    </article>
    <article itemprop="blogPost">
        <img class="post-image" itemprop="image" src="https://esstudio.site/uploads/giphy.gif" alt="&quot;Lazy loading images with Javascript&quot; Thumbnail">
        <h2 class="post-title">Lazy loading images with Javascript</h2>
        <p><small class="post-date">01 NOVEMBER 2018</small></p>
        <a target="_blank" href="https://esstudio.site/2018/11/01/lazyloading-images-with-javascript.html">View more...</a>
    </article>
    <article itemprop="blogPost">
        <img class="post-image" itemprop="image" src="https://esstudio.site/uploads/binaryheap.png" alt="&quot;Implementing Binary Heaps with Javascript&quot; Thumbnail">
        <h2 class="post-title">Implementing Binary Heaps with Javascript</h2>
        <p><small class="post-date">31 OCTOBER 2018</small></p>
        <a target="_blank" href="https://esstudio.site/2018/10/31/implementing-binary-heaps-with-javascript.html">View
            more...</a>
    </article>
    <article itemprop="blogPost">
        <img class="post-image" itemprop="image" src="https://esstudio.site/uploads/rssreader.jpg" alt="&quot;Creating an Atom feed reader with Javascript&quot; Thumbnail">
        <h2 class="post-title">Creating an Atom feed reader with Javascript</h2>
        <p><small class="post-date">30 OCTOBER 2018</small></p>
        <a target="_blank" href="https://esstudio.site/2018/10/30/creating-an-atom-feed-reader-with-javascript.html">View
            more...</a>
    </article>
</section>

Let’s open “src/index.js” and replace the previous content with:

// src/index.js

const createPosts = require('./posts.html');

document.body.appendChild(createPosts());

Some optional CSS:

/* dist/style.css */

* {
    box-sizing: border-box;
}

html {
    font-family: sans-serif;
}

article {
    width: 25%;
    float: left;
    padding: 10px;
}

img {
    max-width: 100%;
}

h1 {
    padding: 10px;
}

@media screen and (max-width: 1000px) {
    article {
        width: 50%;
    }
}

@media screen and (max-width: 500px) {
    article {
        width: 100%;
    }
}

Resources:

Javascript in 24 hours

HTML, CSS, ES6 all in one

A Hands-On Guide to Building Web Applications Using React

Learning Regular Expressions

InformIT eBook Store has a large number of ebooks on a wide range of topics. I would definitely recommend them.

Great courses:

Javascript for beginners in 3 hours

Mobile UI and UX Design

Building web applications with react

Starting with angular 4

Programming in C# (recommended)

More web development courses

Quickstart offers a large amount of (online) courses on web development (Use Code LSOFF50 to get 50% off ;p)

html2js-loader

2018-11-14T12:32:00+01:00

Exports HTML to javascript instructions. Create javascript functions from HTML templates.

Dynammicly creating HTML in javascript is actually quiete easy right? You just save the html as a string and use “.innerHTML” to insert it into the document. Well, if you’re doing that a lot it can get slow. The browser has to parse the HTML string everytime. This also means that you’re putting HTML snippets in you’re javascript code, which violates the “separation of concerns” priniciple. Putting HTML strings in your javascript also prevents you’re editor/IDE from giving intellisense, code-completion, linting, etc. A solution would be to convert these html strings to javascript instructions:

// from

document.querySelector('#some-selector').innerHTML = `
<article>
	<h2>My dynamically generated html</h2>
</article>`;

// to 

var container = document.querySelector('#some-selector');
var article = document.createElement('article');
var h2 = document.createElement('h2');
h2.innerText = 'My dynamically generated html';
article.appendChild(h2);
container.appendChild(article);

Although this is faster, this kind of code can become long, unclear, tedious and difficult to maintain. You will also need to use document fragments if you’re doing this in a loop because adding an element to the DOM every time you iterate through a loop can be even more expensive than setting the “.innerHTML” of the container in the first place. Why can’t we write like this:

<!-- template.html --!>

<article>
	<h2>My dynamically generated html</h2>
</article>

const createArticle = require('./template.html'); // or import createArticle from './template.html';

document.querySelector('#some-selector').innerHTML = createArticle();

This combines the best of both worlds. It’s easy to maintain, easy to read and fast. If you’re not using a fancy build tool like webpack can copy this code snippet and implement it yourself. You can also use https://html2js.esstudio.site online converter if you just need to convert once.

Install

npm i -D html2js-loader

Usage

Add the html2js-loader to your webpack.config.js.

{
  test: /\.html$/,
  use: {
    loader: 'html2js-loader',
    options: {}
  }
}

Now, simply import/require any html. For example:

<!-- templates/list.html -->
<ul role="list">
    <li>Item one</li>
    <li>Item two</li>
    <li>Item three</li>
</ul>

const createList = require('./templates/list.html');

document.body.appendChild(createList());

this will be converted to the following javascript:

  function createNode() {
  var e_0 = document.createElement("ul");
  e_0.setAttribute("role", "list");
  var e_1 = document.createElement("li");
  e_1.appendChild(document.createTextNode("Item one"));
  e_0.appendChild(e_1);
  var e_2 = document.createElement("li");
  e_2.appendChild(document.createTextNode("Item two"));
  e_0.appendChild(e_2);
  var e_3 = document.createElement("li");
  e_3.appendChild(document.createTextNode("Item three"));
  e_0.appendChild(e_3);
  return e_0;
}

You can use this online tool: html2js.esstudio.site which will convert your html to javascript on the fly.

The loader will optimize this code by injecting the following base code into your bundle:

module.exports = {
    document_createDocumentFragment: () => {
        return document.createDocumentFragment();
    },
    document_createElement: name => {
        return document.createElement(name);
    },
    document_createTextNode: text => {
        return document.createTextNode(text);
    },
    appendChild: (parent, child) => {
        parent.appendChild(child);
    },
    setAttribute: (elem, key, value) => {
        elem.setAttribute(key, value);
    }
};

This will enable the compiler to name mangle these function calls. For example, if we convert the following html:

<ul role="list">
    <li>Item one</li>
    <li>Item two</li>
    <li>Item three</li>
</ul>

That will produce the following minified base code (this will only be included once):

var a=function(e){return document.createElement(e)},b=function(e){return document.createTextNode(e)},c=function(e,f,g){return e.setAttribute(f,g)},d=function(e,f){return e.appendChild(f)}

And the following minified javascript instructions for the html template:

var e=a("ul");c(e,"role","list");var f=a("li");d(f,b("Item one"));d(e,f);f=a("li");d(f,b("Item two"));d(e,f);f=a("li");d(f,b("Item three"));d(e,f);

Resources:

Javascript in 24 hours

HTML, CSS, ES6 all in one

A Hands-On Guide to Building Web Applications Using React

Learning Regular Expressions

InformIT eBook Store has a large number of ebooks on a wide range of topics. I would definitely recommend them.

Great courses:

Javascript for beginners in 3 hours

Mobile UI and UX Design

Building web applications with react

Starting with angular 4

Programming in C# (recommended)

More web development courses

Quickstart offers a large amount of (online) courses on web development (Use Code LSOFF50 to get 50% off ;p)

Kadaster Online

2018-11-07T17:34:00+01:00

Met deze gratis kadastrale kaart van nederland kun je heel makkelijk kadaster en BAG (Basisregistraties adressen en gebouwen) informatie opzoeken. De informatie komt rechtstreeks van het kadaster systeem door gebruik te maken van het geodata bestand van het nationaal register. Op de kadaster kaart kun je de volgende informatie vinden:

Perceelgrenzen
Perceelnummers
Straatnamen en huisnummers
Kadastrale grootte
Tijdstip van ontstaan
Perceel nummer
Gemeente
Lengte en breedtegraad
Panden die zich in het perceel bevinden

Over panden kun je ook nog deze informatie vinden:

Gebruiksdoel van het pand
Bouwjaar
Status van het pand
Oppervlakte

Ook kun je informatie over verblijfplaatsen vinden, zoals huisletter, huisnummer, oppervlakte, etc.

Ook kun je informatie vinden over ligplaatsen, woonplaatsen, en standplaatsen.

Deze app kan voor veel verschillende doeleinden handig zijn. Voor bedrijven om gemakkelijk toegang te hebben tot deze dataset, maar je kunt ook gewoon even kijken wat de oppervlakte van het huis van de buren is.

Kadaster Kaart

Met de Kadaster kaart app/website kunt u gemakkelijk informatie opzoeken over percelen die geregistreerd staan bij het Kadaster.

Star Watch Follow @sempostma

Er is ook een app versie beschikbaar via google play.

Laatste veranderingen:

App neemt 20% minder opslag ruimte op!
Zoom toast is verwijderd
Automatische zoom naar kadaster raster hoogte
Kleine UI fixes

Deze applicatie is open source en kan hier op Github gevonden worden.

Create draggable elements with Javascript

2018-11-01T20:26:00+01:00

There are a lot of libraries that offer this type of functionally but this often means, loading hundreds of kilobytes of Javascript and CSS. I my case I justed wanted simple sticky note functionally. I want a draggable element and a “dragger” handle with which I can drag the element. It had to be simple and flexible, extendible, no initialization code, it had to have support for nested draggables and should always stay within the parent element (the draggable area).

The HTML

Let’s begin with creating the draggable area. We will give it a height of 340px, and a border. This makes it easier for the user to see the bounds of the draggable area. The only required elements are: An element with the class “draggable” and within it an element with the class “dragger”.

<div style="height: 340px; border: 1px solid #ccc">
  <div class="draggable">
    <div class="dragger"></div>
    <p>Some content for the draggable sticky note.</p>
  </div>
</div>

Because there is no initialization code, you can dynamically add these elements and it will just work.

The CSS

Here are the CSS rules that I used. The only required rules are that a “.draggable” must have the “position” rule set to “relative” or “absolute”. This is because we will manipulate the “left” and “top” CSS rules. If you have multiple draggable elements and you’re using “position: absolute”, the elements will initially overlap. And if you haven’t set a fixed height for the draggable area, the draggable area will collapse to “height = 0” and your draggable elements will not be visible/work. If you don’t understand position absolute or position relative, you can check out the W3Schools tutorial on CSS Layout.

.draggable {
  width: 300px;
  height: 200px;
  background: #ccc;
  position: relative;
}

.draggable.dragging {
  user-select: none;
}

.dragger {
  height: 30px;
  background: #555;
}

.dragger::before {
  content: "window";
  color: #fff;
  margin: 5px;
  display: inline-block;
}

The Javascript

Finally, the Javascript. If you don’t want to create global variables you can wrap the code in an iffy: (function(){<code>})(). This is called an immediately-invoked function expression (or IIFE, pronounced “iffy”).

Let’s start by listening for “mousedown” events. Then we loop through the event path to see if we clicked on the “dragger” element (the handle). Then we continue until we find the draggable element. We save the draggable element to the variable “target” and save the cursor position relative to the target position (the “left” and “right” CSS rules). We use slice to get rid of the “px” at the end of the CSS rule ("100px".slice(0, -2) === "100"). If the CSS rule string is an empty string the minus operator will type coerce it to zero.

Now, let’s listen for the “mousemove” event. If the target is null we immediately return. If it’s not, we move the element using the CSS “top” and “left” rules. Then we check if the element is within the parent. If it’s not, we set change the position so it’s clamped inside the parent.

We finish by adding a “mouseup” event and setting the target to null when we’ve stopped dragging.

var x, y, target = null;

document.addEventListener('mousedown', function(e) {
  var clickedDragger = false;
  for(var i = 0; e.path[i] !== document.body; i++) {
    if (e.path[i].classList.contains('dragger')) {
      clickedDragger = true;
    }
    else if (clickedDragger && e.path[i].classList.contains('draggable')) {
      target = e.path[i];
      target.classList.add('dragging');
      x = e.clientX - target.style.left.slice(0, -2);
      y = e.clientY - target.style.top.slice(0, -2);
      return;
    }
  }
});

document.addEventListener('mouseup', function() {
  if (target !== null) target.classList.remove('dragging');
  target = null;
});

document.addEventListener('mousemove', function(e) {
  if (target === null) return;
  target.style.left = e.clientX - x + 'px';
  target.style.top = e.clientY - y + 'px';
  var pRect = target.parentElement.getBoundingClientRect();
  var tgtRect = target.getBoundingClientRect();

  if (tgtRect.left < pRect.left) target.style.left = 0;
  if (tgtRect.top < pRect.top) target.style.top = 0;
  if (tgtRect.right > pRect.right) target.style.left = pRect.width - tgtRect.width + 'px';
  if (tgtRect.bottom > pRect.bottom) target.style.top = pRect.height - tgtRect.height + 'px';
});

The full example

See the Pen Simple Draggable Elements by sempostma (@Afirus) on CodePen.

Resources:

Javascript in 24 hours

HTML, CSS, ES6 all in one

A Hands-On Guide to Building Web Applications Using React

Learning Regular Expressions

InformIT eBook Store has a large number of ebooks on a wide range of topics. I would definitely recommend them.

Great courses:

Javascript for beginners in 3 hours

Mobile UI and UX Design

Building web applications with react

Starting with angular 4

Programming in C# (recommended)

More web development courses

Quickstart offers a large amount of (online) courses on web development (Use Code LSOFF50 to get 50% off ;p)

Lazy loading images with Javascript

2018-11-01T01:00:00+01:00

Lazy Loading doesn’t have to be hard. This is a very simple example/tutorial on how to do lazy loading. Lazy loading works best if you have to load in a lot of large images which slows down the page load.

The only requirement for this implementation is, that you have to have to native image width and native image height. This can easily be done server-side.

The HTML

<img width="500" data-width="6000" data-height="4000" data-src="www.example.com/image">

Implementation

Because we don’t want the page to wait until all images are loaded until showing the page, and we don’t want the layout to change every time an image is loaded in we have to set an initial width, you can also do this with CSS. You want the img element to have the correct size before the image is even loaded.

Now we fill the image to it’s correct size using Javascript.

var img = document.querySelector('img[data-src]');
var ratio = +img.getAttribute('data-height') / +img.getAttribute('data-width');
  img.style.paddingTop = ratio * img.getBoundingClientRect().width + 'px';

After adding some CSS we can see a grey box, the size of the image.

img[data-src] {
  background: #aaa;

If you want a nice looking loading animation you can change it to:

img[data-src] {
  background: #aaa url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" viewBox="0 0 38 38" stroke="#fff" stroke-width="2" fill="none"><circle stroke-opacity=".5" cx="19" cy="19" r="18"/><path xmlns="http://www.w3.org/2000/svg" d="M36 19c0-9.94-8.06-18-18-18" transform="rotate(189.606 18 18)"><animateTransform attributeName="transform" type="rotate" from="0 19 19" to="360 19 19" dur="1s" repeatCount="indefinite"/></path></svg>') no-repeat center center;
}

But of course, we want to show the image so let’s change the javascript to the following. Basically we load another image in the background. Once it’s loaded we set it’s “src” to our initial image “src” and remove the padding which we used to fill the image initially.

var img = document.querySelector('img[data-src]');
var ratio = +img.getAttribute('data-height') / +img.getAttribute('data-width');
  img.style.paddingTop = ratio * img.getBoundingClientRect().width + 'px';
var lazy = new Image();
lazy.onload = function() {
  img.src = lazy.src;
  img.style.paddingTop = 0;
  img.classList.remove('loading');
  img.classList.add('loaded');
}
img.classList.add('loading');
lazy.src = img.getAttribute('data-src'); 

But what if we don’t want to start loading every image on the page in the background. Let’s say we only want to load in the images that are currently visible or we want to wait for some kind of event (click, load, DOMContentLoad, etc.).

var img = document.querySelector('img[data-src]');
var ratio = +img.getAttribute('data-height') / +img.getAttribute('data-width');
  img.style.paddingTop = ratio * img.getBoundingClientRect().width + 'px';
var lazy = new Image();
lazy.onload = function() {
  img.src = lazy.src;
  img.style.paddingTop = 0;
  img.classList.remove('loading');
  img.classList.add('loaded');
}

// Wait for some kind of event. In this example I'm using "window.load"

window.addEventListener('load', function() {
  img.classList.add('loading');
  lazy.src = img.getAttribute('data-src'); 
});

We can wrap this code in a function and return the actual load callback. This makes it even easier.

function lazyLoad(img) {
  var ratio = +img.getAttribute('data-height') / +img.getAttribute('data-width');
  img.style.paddingTop = ratio * img.getBoundingClientRect().width + 'px';
  var lazy = new Image();
  lazy.onload = function() {
    img.src = lazy.src;
    img.style.paddingTop = 0;
    img.classList.remove('loading');
    img.classList.add('loaded');
  }
  return { load: load }
  function load() { 
    img.classList.add('loading');
    lazy.src = img.getAttribute('data-src'); 
  }
}

var img = document.querySelector('img[data-src]');
var load = lazyLoad(img).load;

// Wait for some kind of event. In this example I'm using "window.load"

window.addEventListener('load', load);

And we’re done. This is all you need to lazy load images. I’ve included some extra examples below, their all using the “lazyLoad” function above.

Start lazy loading images immediately

document.querySelectorAll('img[data-src]').forEach(img => lazyLoad(img).load());

Wait for DOMContentLoaded

document.querySelectorAll('img[data-src]').forEach(img => {
  var load = lazyLoad(img).load;
  document.addEventListener('DOMContentLoaded', load);
});

Wait until image is visible

document.querySelectorAll('img[data-src]').forEach(img => {
  var load = lazyLoad(img).load;
  checkViewport();
  window.addEventListener('scroll', checkViewport);
  window.addEventListener('resize', checkViewport);
  window.addEventListener('orientationchange', checkViewport);
  function checkViewport() {
    var rect = img.getBoundingClientRect();
    var isVisible = (rect.top <= (window.innerHeight || document.documentElement.clientHeight)) 
      && ((rect.top + rect.height) >= 0)
      && (rect.left <= (window.innerWidth || document.documentElement.clientWidth)) 
      && ((rect.left + rect.width) >= 0);
    if (isVisible) {
      window.removeEventListener('scroll', checkViewport);
      window.removeEventListener('resize', checkViewport);
      window.removeEventListener('orientationchange', checkViewport);
      load();
    }
  };
});

Full example

You edit the full example below and try out the examples above by going to the Codepen.

See the Pen Easy Lazyloading by sempostma (@Afirus) on CodePen.

Resources:

Javascript in 24 hours

HTML, CSS, ES6 all in one

A Hands-On Guide to Building Web Applications Using React

Learning Regular Expressions

InformIT eBook Store has a large number of ebooks on a wide range of topics. I would definitely recommend them.

Great courses:

Javascript for beginners in 3 hours

Mobile UI and UX Design

Building web applications with react

Starting with angular 4

Programming in C# (recommended)

More web development courses

Quickstart offers a large amount of (online) courses on web development (Use Code LSOFF50 to get 50% off ;p)

Implementing Binary Heaps with Javascript

2018-10-31T17:23:28+01:00

A heap tree is a type of data structure where the each node is either greater than or equal or less than or equal to the node’s children. Binary heaps are often used to implement priority queues. Priority queues are used in path finding for example.

Even though it might sound like a difficult subject it’s actually not that difficult. We will start by establishing some basics. The first one being that a node will always be equal to or smaller than it’s children. This means that the smallest value is always on top (the root node). The reason that a binary heap is so fast compared to sorting arrays, is that every time we add or delete an item, we “sort” the heap. This heap “sorting” is very fast because we only need to check the parent node if it’s bigger than the child. As the tree grows exponentially the time to sort the heap does not (grow exponentially). This is called time complexity, which is “O(log n)” for heap insertion and deletion. Binary heaps can perform very well with very large data-sets compared to other algorithms.

We can implement a heap in two different ways:

First - Object reference implementation:

var node1 = { val: 6, parent: null };
var node2 = { val: 7, parent: node1 };
var node3 = { val: 12, parent: node1 };
var node4 = { val: 10, parent: node2 };
var node5 = { val: 15, parent: node2 };
var node6 = { val: 17, parent: node3 };

Second - Array implementation

This might seem strange but we can easily represent a binary heap as an array.

var tree = [6,7,12,10,15,17];

The first element in the array is the root node. The left child is the second item and the right child is the third item, etc.

To navigate the array we use these rules:

The left child is located at (index + 1) * 2 - 1
The right child is located at (index + 1) * 2
The parent child is located at Math.floor((i + 1) / 2 - 1)

For example if we have a node located at index 7, we know that it’s left child is located at 15 = (7 + 1) * 2 - 1, the right child is located at index 16 = (7 + 1) * 2 and the parent is located at index 3 = Math.floor((7 + 1) / 2 - 1). If you’re still struggling with how binary trees work, you can checkout this article by Carnegie Mellon University which helped me out a lot.

Using these rules we can write the following code:

class MinHeap extends Heap {
    constructor(selector) {
        this.items = [];
        this.selector = selector;
    }
  
  	seek() { return this.items[0]; }

    push(item) {
        let i = this.items.length;
        this.items.push(item);
        while (i > 0 && this.selector(this.items[Math.floor((i + 1) / 2 - 1)]) > this.selector(this.items[i])) {
            let t = this.items[i];
            this.items[i] = this.items[Math.floor((i+1)/2-1)];
            this.items[Math.floor((i+1)/2-1)] = t;
            i = Math.floor((i + 1) / 2 - 1);
        }
    }

    pop() {
        if (this.items.length <= 1) return this.items.pop();
        const ret = this.items[0];
        this.items[0] = this.items.pop();
        let i = 0;
        while (true) {
            let lowest = this.selector(this.items[(i + 1) * 2]) < this.selector(this.items[(i + 1) * 2 - 1]) 
                ? (i + 1) * 2 : (i + 1) * 2 - 1;
            if (this.selector(this.items[i]) > this.selector(this.items[lowest])) {
                let t = this.items[i];
                this.items[i] = this.items[lowest];
                this.items[lowest] = t;
                i = lowest             
            } else break;
        }
        return ret;
    }

    delete(item) {
        let i = this.items.indexOf(item);
        // heapify
        this.items[i] = this.items.pop();
        while (true) {
            let lowest = this.selector(this.items[(i + 1) * 2]) < this.selector(this.items[(i + 1) * 2 - 1]) 
                ? (i + 1) * 2 : (i + 1) * 2 - 1;
            if (this.selector(this.items[i]) > this.selector(this.items[lowest])) {
                let t = this.items[i];
                this.items[i] = this.items[lowest];
                this.items[lowest] = t;
                i = lowest             
            } else break;
        }
    }

    heapify(arr) {
        for (let i = 0; i < arr.length; i++) {
            this.push(arr[i]);
        }
    }
}

To create a max heap, where the child nodes are always smaller than or equal to the parent, we can change it do this:

class MaxHeap extends Heap {
    constructor(selector) {
        this.items = [];
        this.selector = selector;
    }
  
  	seek() { return this.items[0]; }

    push(item) {
        let i = this.items.length;
        this.items.push(item);
        while (i > 0 && this.selector(this.items[Math.floor((i + 1) / 2 - 1)]) < this.selector(this.items[i])) {
            let t = this.items[i];
            this.items[i] = this.items[Math.floor((i+1)/2-1)];
            this.items[Math.floor((i+1)/2-1)] = t;
            i = Math.floor((i + 1) / 2 - 1);
        }
    }

    pop() {
        if (this.items.length <= 1) return this.items.pop();
        const ret = this.items[0];
        // heapify
        this.items[0] = this.items.pop();
        let i = 0;
        while (true) {
            let lowest = this.selector(this.items[(i + 1) * 2]) > this.selector(this.items[(i + 1) * 2 - 1]) 
                ? (i + 1) * 2 : (i + 1) * 2 - 1;
            if (this.selector(this.items[i]) < this.selector(this.items[lowest])) {
                let t = this.items[i];
                this.items[i] = this.items[lowest];
                this.items[lowest] = t;
                i = lowest             
            } else break;
        }
        return ret;
    }

    delete(item) {
        let i = this.items.indexOf(item);
        // heapify
        this.items[i] = this.items.pop();
        while (true) {
            let lowest = this.selector(this.items[(i + 1) * 2]) > this.selector(this.items[(i + 1) * 2 - 1]) 
                ? (i + 1) * 2 : (i + 1) * 2 - 1;
            if (this.selector(this.items[i]) < this.selector(this.items[lowest])) {
                let t = this.items[i];
                this.items[i] = this.items[lowest];
                this.items[lowest] = t;
                i = lowest             
            } else break;
        }
    }

    heapify(arr) {
        for (let i = 0; i < arr.length; i++) {
            this.push(arr[i]);
        }
    }
}

This basic implementation only implements push, pop and delete, but most of the time this is all you need.

We can visualize the tree using the following html and javascript:

<input type="number" id="val" placeholder="value"></input>
<button id="push">Push</button>
<button id="pop">Pop</button>

<canvas id="heap-visualization" width="600" height="280"></canvas><br>

const heap = new MinHeap(x => x);
heap.heapify([1, 0, 4, 6, 5, 9, 7, 2, 3, 8]);

const ctx = document.getElementById('heap-visualization').getContext('2d');
visualize(ctx, heap.items);

document.getElementById('push').addEventListener('click', function() {
  var val = +document.getElementById('val').value;
  if (isNaN(val)) return alert('Value is not a number');
  heap.push(val);
  visualize(ctx, heap.items);
}); 

document.getElementById('pop').addEventListener('click', function() {
  heap.pop();
  visualize(ctx, heap.items);
}); 

Full example

The Codepen below shows the full example, visualization and code.

See the Pen JmQZeq by sempostma (@Afirus) on CodePen.

An example of using a heap with pathfinding can be found here. It searches the shortest route from A to B. A min-heap is used as a priority queue in the A* search algorithm.

Resources:

Javascript in 24 hours

HTML, CSS, ES6 all in one

A Hands-On Guide to Building Web Applications Using React

Learning Regular Expressions

InformIT eBook Store has a large number of ebooks on a wide range of topics. I would definitely recommend them.

Great courses:

Javascript for beginners in 3 hours

Mobile UI and UX Design

Building web applications with react

Starting with angular 4

Programming in C# (recommended)

More web development courses

Quickstart offers a large amount of (online) courses on web development (Use Code LSOFF50 to get 50% off ;p)

Creating an Atom feed reader with Javascript

2018-10-30T21:26:22+01:00

Atom is an extension of XML, just like RSS. Atom uses the .atom and .xml extensions and the application/atom+xml mimetype. Below is an example of an Atom feed from https://americanhorrorstory.style/. Having an atom feed on your website is a good idea, you can get more exposure via rss readers like Feedly, NewsBlur or NewsFeeder (a website/app i created).

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">
    <generator uri="https://jekyllrb.com/" version="3.7.4">Jekyll</generator>
    <link href="https://americanhorrorstory.style/feed.xml" rel="self" type="application/atom+xml" />
    <link href="https://americanhorrorstory.style/" rel="alternate" type="text/html" hreflang="en" />
    <updated>2018-10-21T21:23:56+02:00</updated>
    <id>https://americanhorrorstory.style/</id>
    <title type="html">American Horror Story Outfits</title>
    <subtitle>This site is an inspiration style guide to some of the iconic American Horror Story characters. Read about the characters and their unique clothing style.</subtitle>
    <author>
        <name>Eva van der Weide</name>
    </author>
    <entry>
        <title type="html">APOCALYPSE - Madison</title>
        <link href="https://americanhorrorstory.style/2018/10/18/apocalypse-madison.html" rel="alternate" type="text/html" title="APOCALYPSE - Madison" />
        <published>2018-10-18T22:09:00+02:00</published>
        <updated>2018-10-18T22:09:00+02:00</updated>
        <id>https://americanhorrorstory.style/2018/10/18/apocalypse-madison</id>
        <content type="html" xml:base="https://americanhorrorstory.style/2018/10/18/apocalypse-madison.html">
          The witches are back! Who would’ve thought the witches from season 3 would make a comeback in season 8 of American Horror Story (named: Apocalypse).</content>
        <author>
            <name>Eva van der Weide</name>
        </author>
        <summary type="html">The witches are back!</summary>
        <media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://americanhorrorstory.style/images/meta-icons/android-chrome-512x512.png" />
    </entry>
</feed>

Let’s fetch the feed with Fetch API. You can use any valid Atom feed you want.

fetch('https://americanhorrorstory.style/feed')
  .then(response => response.text())
  .then(xml => { })

We will use the well supported DOMParser to parse the feed into a document. It’s important to set the type to “text/xml”, because it will default to “text/html”.

const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xml,"text/xml");

Let’s log the “xmlDoc” to the console. This will show a list of entry elements, which we need to display our posts.

Because the xmlDoc is of type “Document” and not “HTMLDocument”, we can’t use functions like “.querySelector” so we will use “.getElementsByTagName” to select the entry tags. This will return an array like object. To convert an array like object or iterable object, to an array, use Array.from(arrayLikeObject).

const html = Array.from(xmlDoc.getElementsByTagName('entry')).map(entry => `<div class="entry"></div>`);

This will return an array of strings containing HTML markup for our feed. Now we need to fill up the entry elements with content from the Atom feed. We can make this a bit easier by writing some helper functions.

// Get's a single child element by tag name
const t = (entry, tname) => entry.getElementsByTagName(tname)[0];

// Get date from an entry element
const date = entry => new Date(t(entry, 'published').textContent).getDate();

// Strip html tags to remove html tags like b, i, h1, etc.
const html2txt = html => html.replace(/<(?:.|\n)*?>/gm, '');

// Get excerpt from an entry content
const content = entry => html2txt(t(entry, 'content').textContent).slice(0, 200);

Now, replace the template string

`<div class="entry"></div>`

with the template string below.

`<div class="entry">
  <div class="timestamp">${date(entry)}</div>
  <a href="${t(entry, 'link').getAttribute('href')}">
  <h2 class="entry-title">${t(entry, 'title').innerHTML}</h2>
  </a>
  <div class="content">${content(entry)}&hellip;</div>
</div>`

Let’s join the html strings together and put it on the page.

<div id="items">loading........</div>

document.getElementById('items').innerHTML = html.join('');

You can checkout the full example, with code below. I’ve also added some extra css and html markup.

See the Pen Atom Feed Reader by sempostma (@Afirus) on CodePen.

The RSS reader I talked about earlier is a serverless javascript website/app called NewsFeeder. I’t parses Atom and RSS feeds, it’s free, it’s safe and has no sign-up.

NewsFeeder

Easily search for news on multiple platforms, find feeds on popular websites and more. Also works as a classic RSS/Atom reader.

NewsFeeder on Google Play.

Resources:

Javascript in 24 hours

HTML, CSS, ES6 all in one

A Hands-On Guide to Building Web Applications Using React

Learning Regular Expressions

InformIT eBook Store has a large number of ebooks on a wide range of topics. I would definitely recommend them.

Great courses:

Javascript for beginners in 3 hours

Mobile UI and UX Design

Building web applications with react

Starting with angular 4

Programming in C# (recommended)

More web development courses

Quickstart offers a large amount of (online) courses on web development (Use Code LSOFF50 to get 50% off ;p)

Base Converter

2018-10-30T11:50:18+01:00

This simple simple conversion tool converts the same number between different number systems. You can convert from any base, for example, hexadecimal, decimal, binary, octal, up to base 36, which is the largest base you can represent using letters, and numbers (0-9 + A-Z).

Base Converter

An easy to use application which converts to different numerical systems.

You can also find it in the play store.

For example: If we convert the decimal number “123456789” to base 16 (hexadecimal) we get: “75bcd15”, octal is “726746425” and with binary we get “111010110111100110100010101”. You can use the tool to automate or simplify your work.

Also, checkout simple function plotter which allows you to plot, visualize and save algebraic formula’s.

Creating a Javascript spellingchecker with bjspell

2018-10-22T22:11:31+02:00

I saw this question on stackoverflow: Need Client side spell checker for DIV. There are not a lot of libraries available that will allow you to do this but I did find an older library called bjspell which does the job.

BJSpell in production: spell-checker.site

Let’s start with writing the HTML. We need a contenteditable div with the spellcheck attribute set to false. This is because we don’t want to use the default browser spellchecking, we want our own implementation.

<div id="text" contenteditable spellcheck="false"></div>

<button id="check" disabled>Check</button>
<button id="reset">Reset</button>

It’s best to add some css rules to the contenteditbale div because we want to style it as an inputfield. The minimum height is required because otherwise the div will collapse to height = 0. Also, let’s add some styling to correct and misspelled words, so users can spot their spelling mistakes.

#text {
  min-height: 100px;
  border: 1px solid #ccc;
}

#text .correct {
  border-bottom: 2px solid green;
}

#text .misspelled {
  border-bottom: 2px solid red;
}

Let’s load in bjspell from the bjspell repository. In this example I’m using the en_US dictionary. The available dictionaries are de_DE, en_GB, en_USE, es_ES, fr_FR, it_IT. You can also compile your own but that’s beyond the scope of this tutorial. Call the BJSpell function with url of the dictionary, and a callback. The callback will be fired when bjspell has loaded and parsed the dictionary. In this case, we will set the disabled attriute of the “check button” to false.

var check =  document.querySelector('#check');
var div = document.querySelector('#text');use 
var reset = document.querySelector('#reset');

var dictionary = 'https://rawcdn.githack.com/maheshmurag/bjspell/master/dictionary.js/en_US.js';
var lang = BJSpell(dictionary, function() {
  check.disabled = false;
});

Next, add a click handler to the “check button”. Below is a very simple implementation. You could do a spelling check everytime the div changes, and save/store the user selection and cursor position. In short, we get all words from the div as text. Then we individually check every word for spelling mistakes. If we find a spelling mistake, we add a list of suggestions and save the word as a span element. After we’ve finished mapping every word, we join the all the span elements together and store it in the div’s innerHTML.

check.addEventListener('click', function() {
  var text = div.innerText;
  var words = text.split(/\s/);
  
  div.innerHTML = words.map(function(word) {
     var correct = lang.check(word);
     var className = correct ? 'correct' : 'misspelled';
     var title = correct 
      ? 'Correct spelling' 
      : `Did you mean ${lang.suggest(word, 5).join(', ')}?`;
     return `<span title="${title}" class="${className}">${word}</span>`;
   }).join(' ');
});

We also want a way for our user to reset the div:

reset.addEventListener('click', function() {
  div.innerText = div.innerText;
});

Full example:

See the Pen Client-side spellchecking, contenteditable DIV by sempostma (@Afirus) on CodePen.

A complete spellchecker using BJSpell: spell-checker.site

Resources:

Javascript in 24 hours

HTML, CSS, ES6 all in one

A Hands-On Guide to Building Web Applications Using React

Learning Regular Expressions

InformIT eBook Store has a large number of ebooks on a wide range of topics. I would definitely recommend them.

Great courses:

Javascript for beginners in 3 hours

Mobile UI and UX Design

Building web applications with react

Starting with angular 4

Programming in C# (recommended)

More web development courses

Quickstart offers a large amount of (online) courses on web development (Use Code LSOFF50 to get 50% off ;p)

ATC Manager 2 - Text Commands Tutorial

2018-10-22T21:49:22+02:00

All Tutorials

Text Comands Tutorial

Enable text commands

To enable text commands you have to go into advanced settings.

Then switch the “Text commands” to “On”

Command formats

Commands are case insensitive

Changing heading

<airplane callsign> turn left heading <heading in degrees>

e.g DLH213 turn left heading 200

Changing altitude

<airplane callsign> climb and maintain <flightlevel or altitude in feet>

DLH213 alt fl230

Changing “Direct to”

<airplane callsign> direct <waypoint/runway callsign>

<airplane callsign> direct to <waypoint/runway callsign>

e.g DLH213 dct EH11

Changing speed

<airplane callsign> increase speed <speed in knots>

<airplane callsign> reduce speed <speed in knots>

<airplane callsign> reduce speed to <speed in knots>

e.g DLH213 spd 200

Takeoff

<airplane callsign> takeoff

<airplane callsign> clear for takeoff

e.g DLH213 clear for takeoff

Go-around

<airplane callsign> go around

<airplane callsign> goaround

e.g DLH213 go around

Target State (VFR)

<airplane callsign> extend <vfr state>

e.g DLH213 extend downwind

Resources:

Javascript in 24 hours

HTML, CSS, ES6 all in one

A Hands-On Guide to Building Web Applications Using React

Learning Regular Expressions

InformIT eBook Store has a large number of ebooks on a wide range of topics. I would definitely recommend them.

Great courses:

Javascript for beginners in 3 hours

Mobile UI and UX Design

Building web applications with react

Starting with angular 4

Programming in C# (recommended)

More web development courses

Quickstart offers a large amount of (online) courses on web development (Use Code LSOFF50 to get 50% off ;p)

ATC Manager 2 - Tutorial

2018-10-22T21:35:23+02:00

All Tutorials

Intro Tutorial

Index

Starting
Giving commands
Landing

Starting

Start by selecting an area (default). You can leave everything on default except for the difficulty setting.

Press “START”. You will now see something like this:

There are 3 elements on your screen. The radar in the middle is your overview. The panel in the top right (see image below) is a list of flight strips. These are all the flights you’re managing.

The buttons in the bottom right (see image below) allow you to pause, save, change optons, view logs and view information about your airfield and the game.

Every airplane on the radar screen has text next to it. It includes the altitude in feet or flight level and the planes airspeed in knots (wiki)(unit)). Flight level (wiki)) or “FL” is roughly one hundredth of a feet (12,000 ft is FL120). Flight levels depend on air pressure while altitude in feet references the altitude above mean sea level (MSL). Transition altitude (TA) is when airplanes switch over to using flight levels. This is usually 18,000 ft. You can view more information about an airplane by clicking the question mark on the airplane’s flight strip (see image below).

This opens a panel which includes information about the plane, like the operator, the callsign, airplane specification, etc.

If you click on an airplane in the flight strips list or on the radar screen the airplane becomes highlighted.

A fourth element will appear on your screen. The “commands” panel (see image below).

This can be used to give airplanes commands. Like the airplanes direction (heading), it’s altitude, speed, and other commands like “go-around” and “takeoff”.

Giving commands

Let’s start by changing the airplane’s direction. As a reference let’s look at this compass:

Every direction is given in degrees. There are a total of 360 different directions. 0 or 360° is north, 90° is east, 180° is south and 270° is west. Let’s change heading to 180° (south).

Then press the “GIVE COMMAND” button.

You will notice the airplane slowly turning to left until it reaches a heading of 180°.

You can do the same thing for the “Direct to”, “Speed” and “Altitude” boxes. The reason the airplane was turning so slow is because it’s still flying at cruise speed. Let’s lower it’s speed to 270 knots. The knot is a unit of speed equel to one nautical mile per hour, exactly 1.852 km/h and approximately 1.15078 mph(wiki)(unit)). After you’ve changed the speed box to “270”, press “GIVE COMMAND”. You will notice a red arrow pointing down next to the airspeed. This means the airplane is reducing it’s speed.

Landing

To land an airplane you first have to line it up with the runway (see image below), it has be less then 3200 feet above the airport and has to flying in the general direction of the runway.

If this is all correct, you will see the message, “Land using ‘Direct to’”, under the “GIVE COMMAND” button. Select the runway in the “Direct to” input box.

Then click “GIVE COMMAND”.

Hopefully you know how to start. If you don’t or you have a question,visit the subreddit(unit)). If you want to continue learning, you can check out more tutorials by clicking the “All TUTORIALS” button below.

Resources:

Javascript in 24 hours

HTML, CSS, ES6 all in one

A Hands-On Guide to Building Web Applications Using React

Learning Regular Expressions

InformIT eBook Store has a large number of ebooks on a wide range of topics. I would definitely recommend them.

Great courses:

Javascript for beginners in 3 hours

Mobile UI and UX Design

Building web applications with react

Starting with angular 4

Programming in C# (recommended)

More web development courses

Quickstart offers a large amount of (online) courses on web development (Use Code LSOFF50 to get 50% off ;p)

ATC Manager 2 - Tutorials and General Aviation

2018-09-27T17:57:08+02:00

Tutorials

I’m in the process of writing tutorials for the general aviation feature of the game (which will soon be added). I thought it would be cool to include some tutorials from the community in the game! If anyone is interested you could message me a pastebin link or a youtube video etc. You will of course be credited along with the tutorial and in the about section as a top contributor of the game.

General Aviation

The next update of the game will include general aviation. It will be put behind a checkbox to keep the game simple (and because there could be a lot of changed to it in the future). I really like the feature because it makes the game a lot more dynamic.

General Aviation

Some work needs to to be put in to collision avoidance, correct states for each type of VFR (visual flight rules) flight (Inbound, Outbound, Enroute, Closed Pattern), Go-arounds, Touch and go’s and new general aviation airplanes. Feedback is welcome because the feature is not done yet, so i can still change things without to much hassle. General aviation airplanes do not always fly VFR, you will also see them in the regular IFR (instrument flight rules) traffic.

VFR Traffic

VFR traffic is not controlled by setting heading and altitude. You can give the instructions listed above.

Resources:

Web game developers cookbook using javascript and html5

Game design with unity and C#

Unity game development in 24 hours

Creating 3D games in C++

Developing AI with Unreal Engine

More web development courses

InformIT eBook Store has a large number of ebooks on a wide range of topcis. I would definitely recommend them

Great courses:

Game development fundamentals with python

Create a Flappy Bird Clone with Python

Game Development on Unity

HTML5 Game from scratch step by step learning JavaScript

Quickstart offers a large amount of (online) courses on game development (Use Code LSOFF50 to get 50% off ;p).

ATC Manager 2

Web based air traffic control game. Manage airspace of busy airports like Schiphol or Heathrow in a realistic simulator.

Tutorials and General Aviation from r/ATCManager2

Resources:

Javascript in 24 hours

HTML, CSS, ES6 all in one

A Hands-On Guide to Building Web Applications Using React

Learning Regular Expressions

InformIT eBook Store has a large number of ebooks on a wide range of topics. I would definitely recommend them.

Great courses:

Javascript for beginners in 3 hours

Mobile UI and UX Design

Building web applications with react

Starting with angular 4

Programming in C# (recommended)

More web development courses

Quickstart offers a large amount of (online) courses on web development (Use Code LSOFF50 to get 50% off ;p)

3D Texturing using curvature maps.

2018-09-10T13:30:08+02:00

Using curvature maps is a great way of improving your diffuse/occlusion maps and potentially also other kind of UV maps. Im sorry if I’m not the most educated on this subject but I was very pleased with the final result. I decided to create eight meshes which I then unwrapped on a single 4096 by 4096 px image. Creating each map for all of the meshes and then combining them took a long time to complete. But the fun part was generating the curvature maps. In short the curvature map stores the convexity of the mesh in the Red color value, and concavity in the Green color value. Convexity of the mesh means the places on the model where the mesh is curving outwards. Concavity means basically the opposite so the places on the model where the mesh is “hollow”. In my case, only the Convexity was important because i wanted to outline the spots on the mesh where a lot of wear could occur. I only used the Red channel (convexity), and desaturated it. And used the white color to brighten parts of the diffuse map. I also applied this technique to the metalness map.

On the left the basic Diffuse map, on the right the Diffuse map with the convexity layer added.

On the left the normal map and on the right the height map.

Final results:

Resources:

Learn Adobe Photoshop CC for Visual Design: Adobe Certified Associate Exam Preparation, 2nd Edition

Final Cut Pro X 10.4 - Apple Pro Training Series: Professional Post-Production

Learn Adobe Premiere Pro CC for Video Communication: Adobe Certified Associate Exam Preparation

Learn Adobe Dreamweaver CC for Web Authoring: Adobe Certified Associate Exam Preparation, 2nd Edition

Discovering AutoCAD 2017

InformIT eBook Store has a large number of ebooks on a wide range of topcis. I would definitely recommend them

Great courses:

Photoshop CS6 Beginner

Illustrator CS6 Advanced

InDesign CS6 Advanced

Adobe Audition CC Basics

Quickstart offers a large amount of (online) courses on game development ( Use Code LSOFF50 to get 50% off ;p).

Amsterdam Outdoor Urinals

2018-09-05T18:48:00+02:00

Searching for Amsterdam Outdoor Urinals or a public toilet near you? You can use this website to find a public bathroom in the city of Amsterdam. You can also find information about the restroom like: Does the restroom or urinal have lighting? Does it have a roof?

Amsterdam Public Toilets

Amsterdam urinals and bathrooms. Google Play

Need a rental to bike to get there? Check out this app:

OV Bike Rentals

NS bikes rental locations in Amsterdam/The Netherlands. Google Play

Bike Rental Amsterdam

2018-09-05T18:25:00+02:00

Having trouble finding a bike rental location in Amsterdam? View all NS bikes, bike hire and NS rental locations in Amsterdam and the rest of Holland/the Netherlands.

OV Bike Rentals

NS bikes rental locations in Amsterdam/The Netherlands. Google Play

You can use the “OV Fiets App” to easily find information about NS bike rental locations. When you type in a city or location, the app will show you a list of suggested bike rental locations. When you’ve found the right rental location you click the “Go” button or select the station. This will open a page showing the location’s status (open or closed), the amount of bikes available, time since the last update, opening hours and the position of the bike rental location.

If you’re visiting Amsterdam this app might also come in handy:

Amsterdam Public Toilets

Searching for public urinals in amsterdam? this interactive chart shows all the public toilets/urinals/bathrooms in the city center of Amsterdam. Google Play

The OV Fiets App uses open data from openov.nl and is provided by the NS-Lab.

Air Traffic Controller Games

2018-09-04T12:48:00+02:00

Not all of the ATC apps listed here are games. Alot of them are simulators. If you are a real Air Traffic Controller and like to preted to be at work when you come home. Not all of these ATC games are free but i will take that into account.

Air Control Madness

Air Control Madness is an adictive atc game which puts the job of handling incoming traffic, in your hands. Link.

ATC Manager

Checkout the App.

ATC Manager is an ATC TRACON sim. Load and save your progress. It features a variety of real world airlines and aircraft (all with their own specifications) dynamic runway use, infinite flights, different speed settings and an easy to use interface.

ATC Manager 2 ✈️

ATC Manager 2

ATC Manager 2 is a web based air traffic control game. Manage airspace of busy airports like Schiphol or Heathrow in a realistic simulator.

ATC Manager 2 is a free web based app with a ton of features. It has support for speech synthesis. It has alot of customization options. Unlike alot of other ATC games it allows you to save and load progress.

Unmatched Air Traffic Control

Unmatched Air Traffic Controll is a very fun 3D air traffic control game. Unmatched Air traffic Control is a game for Android iOS and Windows Phone. A new version of this game, Unmatched Air Traffic Control 2, has also been released.

Air Traffic Controller 4

Air Traffic Controller 4 is a simulator game that simulates the operation of an airport. The player’s mission is to direct planes onto the correct ILS, land them on the runway, taxi them to the correct gate, and to direct takeoffs.

Take Control of the Tower

This game is rather more difficulat. You must align the aircraft with the runway while separating between arrivals and departure.

ATC-SIM

ATC-SIM is a browser-based air traffic control simulator. It works by typing commands into a textbox. The game is simple and very addictive to play.

Air Control Lite

This simple and addictive game where the player has to control an airport with two runways and one helipad. The planes have different colors, Red, Blue and Green. Red for large incoming flights, blue for smaller planes, and green for incoming helicopters. It has the number one ranking in ATC games category on Google Play Store.

Endless ATC

Endless ATC is an easy to play simulation game, where you are an air traffic controller at the approach radar of a busy airport. The goal is to guide the planes safely to the runways to get a high score. If you make no errors, the number of planes you have to control gets larger and larger. How many flights at a time can you handle?

FlightRadar24

The world’s most popular flight tracker. Watch aircraft move around the world in real-time on detailed map, get up-to-date flight status & airport information.

Youtube Comment Generator

2018-08-31T04:05:00+02:00

Searching for a good youtube comments generator?

This website is a free youtube comments generator. The created random comments are based on the existing comments on that video. If a youtube video has a lot of comments the results will be best.

Youtube Comments are Evil

Generate fake youtube comments.

Earth at Night

2018-08-30T18:31:00+02:00

Check out how the earth looks from space and view NASA’s image of the day. This world map/chart is provided by NASA satellite images. The map wil always show the most recent earth imaging. You can even add the page as an app to your homescreen (desktop and mobile), you can find the instructions at the bottom of the page.

Earth at Night

View the earth at night.

Imagery provided by services from the Global Imagery Browse Services (GIBS), operated by the NASA/GSFC/Earth Science Data and Information System (ESDIS) with funding provided by NASA/HQ.

ATC Manager

2018-08-30T18:07:00+02:00

Version 2 is out!

New planes, new operators, new airfields, save your progress and new features!

You can find the game in the Google Play store.

WHAT’S NEW

Design changes
Different font
More maps
More planes
More operators
Timer
Toggleable labels
Realistic locations

ATC Manager is a realistic Air Traffic Control manager which features a variety of real world airlines and aircraft (all with their own specifications) dynamic runway use, infinite flights, different speed settings and an easy to use interface.

Download it on Google Play. Also check out the web based ATC Manager, which was also previously updated, here.

Road map:

Commands to speech ability
Editable content (create your own airplanes & airports)
More realistic flight behavior
SID/STARS
General Aviation (GA)
More interesting weather dynamics
Scenario’s
ATC log
Time limitations
Better penalties system

Learning how to program or improving programmings skills:

Resources:

Web game developers cookbook using javascript and html5

Game design with unity and C#

Unity game development in 24 hours

Creating 3D games in C++

Developing AI with Unreal Engine

More web development courses

InformIT eBook Store has a large number of ebooks on a wide range of topcis. I would definitely recommend them

Great courses:

Game development fundamentals with python

Create a Flappy Bird Clone with Python

Game Development on Unity

HTML5 Game from scratch step by step learning JavaScript

Quickstart offers a large amount of (online) courses on game development (Use Code LSOFF50 to get 50% off ;p).

Kadaster Kaart

2018-08-29T12:23:00+02:00

Met de kadaster kaart kunt u gemakkelijk online kadasterdata bekijken in Nederland. De actuele gegevens zijn makkelijk in te zien en op te slaan. Vind voor elk perceel, ligplaats, pand, verblijfplaats en standplaats in Nederland en groot aantal andere gegevens. De app gebruikt een minimaal gedeelte van u opslag en is zeer gemakkelijk te gebruiken. Wilt u bij Kadasterplan online een kadasterplan opvragen, bekijk dan eerst of u deze app kunt gebruiken.

U kunt verschillende kaarten gebruiken zoals satelliet en plattegrond of de map van Nederland.

Deze digitale kaart gebruikt open data die voor iedereen beschikbaar is (zie: Publieke Dienstverlening Op de Kaart (PDOK))

Download de App

ATC Manager 2 - version 2

2018-08-26T18:38:00+02:00

With the release of version 2 a lot of things have changed (check out the changelog below). New airplanes, operators, icons, ATIS info and a bunch of improvements.

ATC Manager 2

ATC Manager on the web.

Also check out the android app

Check out the reddit post

If you like the game and you want the game to stay (advertisement) free, please consider giving a small amount💰.

Goals:

1€ Bug fixing
2€ Buy me a coffee
100€ New airlines
200€ New airplanes
250€ Custom Feature (for individual donation, include your email, also the feature - - request has to be fair and achievable)
500€ Speech synthesis for pilots
1000€ Speech recognition

Check out the gofundme page

You can also donate using paypal

Changelog

[1.2.0] - 2018-08-26

Added✅

Better icons
Android icons
Apple icons
Microsoft icons
Safari icons
Updated theme colors
In-game icons
Safety prompts when discarding unsaved data
Info panel
About panel
Logs panel
Donation info
More (realistic) logs
Tab close message if the user has unsaved progress
New planes
- Boeing 757
- Boeing 767
- Boeing 777
- Airbus A380
- Airbus A330
- Boeing 787 Dreamliner
- Airbus A319
- Airbus A320
- Airbus A321
- Airbus A350
- Boeing 717
- McDonell Douglas MD-88
- McDonell Douglas MD-90
- Embraer 190
- McDonell Douglas MD-82
- McDonell Douglas MD-83
New operators
Southwest Airlines
American Airlines
British Airways
Continental Airlines
Lufthansa
Air France
China Southern Airlines
China Eastern Airlines
All Nippon Airways
Ryanair
Turkish Airlines
Emirates
FedEx Express
UPS Airlines
Cathay Pacific
Qatar Airways
Korean Air
Cargolux
Air China
Egyptair
App caching (performance & offline use)
Altimeter setting
Atis info
Pilot messages are now included in the logs

Changed ❗

Fixed an issue where saving a map without a name caused issues
Better checkboxes (the old ones were ugly)
Styling tweaks
Game not updating in the background fixed
Updated operators on some aircraft
Speech synthesis default rate
Runway left/right switched fix
Default airport/map colors changed
Optimized web-app size

Removed❌

Speech recognition option is removed (because it hasn’t yet been implemented)

Converting JSON from and to XML in Javascript

2018-08-14T00:26:00+02:00

Checkout the website: JSON2XML or the full example.

As it turns out, finding a good xml to json javascript library is not as easy as it sounds. I did find this implementation does the job but sometimes the output can be a bit confusing:

xmlToJson((new DOMParser).parseFromString('<root root-attr="value">    <child child-attr="value"> text  \n  </child>\n</root>', 'application/xml'));

will output:

{
    "root": {
        "@attributes": {
            "root-attr": "value"
        },
        "#text": [
            "    ",
            "\n"
        ],
        "child": {
            "@attributes": {
                "child-attr": "value"
            },
            "#text": " text  \n  "
        }
    }
}

Borrowing from David Walsh’s implementation, let’s implement the obj2xml function:

function xml2obj(xml, opt) {
    if (typeof xml === 'string') {
        var dom = (new DOMParser).parseFromString(xml, 'application/xml');
        xml = dom.childNodes[dom.childNodes.length - 1];
    }
    opt = opt || {};
    var attrPrefix = opt.attrPrefix || '';
    function toObj(xml) {
        var n, o = {};
        if (xml.nodeType == 1) {
            if (xml.attributes.length) {
                for (var i = 0; i < xml.attributes.length; i++) {
                    o[attrPrefix + xml.attributes[i].nodeName] = (xml.attributes[i].nodeValue || '').toString();
                }
            }
            if (xml.firstChild) {
                var textChild = 0, cdataChild = 0, hasElementChild = false;
                for (n = xml.firstChild; n; n = n.nextSibling) {
                    if (n.nodeType == 1) {
                        hasElementChild = true;
                    } else {
                        if (n.nodeType == 3 && n.nodeValue.match(/[^ \f\n\r\t\v]/)) {
                            textChild++;
                        } else {
                            if (n.nodeType == 4) {
                                cdataChild++;
                            }
                        }
                    }
                }
                if (hasElementChild) {
                    if (textChild < 2 && cdataChild < 2) {
                        removeWhite(xml);
                        for (n = xml.firstChild; n; n = n.nextSibling) {
                            if (n.nodeType == 3) {
                                o['#text'] = escape(n.nodeValue);
                            } else {
                                if (n.nodeType == 4) {
                                    o['#cdata'] = escape(n.nodeValue);
                                } else {
                                    if (o[n.nodeName]) {
                                        if (o[n.nodeName] instanceof Array) {
                                            o[n.nodeName][o[n.nodeName].length] = toObj(n);
                                        } else {
                                            o[n.nodeName] = [o[n.nodeName], toObj(n)];
                                        }
                                    } else {
                                        o[n.nodeName] = toObj(n);
                                    }
                                }
                            }
                        }
                    } else {
                        if (!xml.attributes.length) {
                            o = escape(innerXml(xml));
                        } else {
                            o['#text'] = escape(innerXml(xml));
                        }
                    }
                } else {
                    if (textChild) {
                        if (!xml.attributes.length) {
                            o = escape(innerXml(xml));
                        } else {
                            o['#text'] = escape(innerXml(xml));
                        }
                    } else {
                        if (cdataChild) {
                            if (cdataChild > 1) {
                                o = escape(innerXml(xml));
                            } else {
                                for (n = xml.firstChild; n; n = n.nextSibling) {
                                    o['#cdata'] = escape(n.nodeValue);
                                }
                            }
                        }
                    }
                }
            }
            if (!xml.attributes.length && !xml.firstChild) {
                o = null;
            }
        } else {
            if (xml.nodeType == 9) {
                o = toObj(xml.documentElement);
            } else {
                alert('unhandled node type: ' + xml.nodeType);
            }
        }
        return o;
    }
    function innerXml(node) {
        var s = '';
        if ('innerHTML' in node) {
            s = node.innerHTML;
        } else {
            var asXml = function (n) {
                var s = '';
                if (n.nodeType == 1) {
                    s += '<' + n.nodeName;
                    for (var i = 0; i < n.attributes.length; i++) {
                        s += ' ' + n.attributes[i].nodeName + '="' + (n.attributes[i].nodeValue || '').toString() + '"';
                    }
                    if (n.firstChild) {
                        s += '>';
                        for (var c = n.firstChild; c; c = c.nextSibling) {
                            s += asXml(c);
                        }
                        s += '</' + n.nodeName + '>';
                    } else {
                        s += '/>';
                    }
                } else {
                    if (n.nodeType == 3) {
                        s += n.nodeValue;
                    } else {
                        if (n.nodeType == 4) {
                            s += '<![CDATA[' + n.nodeValue + ']]\x3e';
                        }
                    }
                }
                return s;
            };
            for (var c = node.firstChild; c; c = c.nextSibling) {
                s += asXml(c);
            }
        }
        return s;
    }
    function escape(txt) {
        return txt.replace(/[\\]/g, '\\\\').replace(/["]/g, '\\"').replace(/[\n]/g, '\\n').replace(/[\r]/g, '\\r');
    }
    function removeWhite(e) {
        e.normalize();
        for (var n = e.firstChild; n;) {
            if (n.nodeType == 3) {
                if (!n.nodeValue.match(/[^ \f\n\r\t\v]/)) {
                    var nxt = n.nextSibling;
                    e.removeChild(n);
                    n = nxt;
                } else {
                    n = n.nextSibling;
                }
            } else {
                if (n.nodeType == 1) {
                    removeWhite(n);
                    n = n.nextSibling;
                } else {
                    n = n.nextSibling;
                }
            }
        }
        return e;
    }
    if (xml.nodeType == 9) {
        xml = xml.documentElement;
    }
    var obj = toObj(removeWhite(xml));
    return obj;
};

This will return the desired output. The function takes in an xml string or an XMLDocument.

xml2obj('<root root-attr="value">    <child child-attr="value"> text  \n  </child>\n</root>', );

For example this xml string will become:

{
    "root-attr": "value",
    "child": {
        "child-attr": "value",
        "#text": " text  \\n  "
    }
}

You can also pass in { attrPrefix: '@' } as a second argument to prevent name collisions between attributes and child elements:

xml2obj('<root samename="value">    <samename child-attr="value"> text  \n  </samename>\n</root>', { attrPrefix: '@' });

Will become:

{
    "@samename": "value",
    "samename": {
        "@child-attr": "value",
        "#text": " text  \\n  "
    }
}

To convert a json object to xml, you can use the following function.:

var endScopeObj = {};
window.obj2xml = function (obj, opt) {
    if (!opt) opt = {};
    var rootName = opt.rootName || 'root';
    var declaration = opt.declaration === 'auto' ? '<?xml version="1.0" encoding="utf-8"?>' : opt.declaration;
    var indentation = opt.indentation || 0;
    var generateDtd = (opt.doctype === 'auto' || opt.doctype === 'generate') && declaration;
    var useAttributes = opt.attributes === false ? false : true;
    var scope_indent = 0;
    if (generateDtd) {
        var dtdAttr = {};
        var dtdElem = {};
    }
    var ret = [];
    var tagContent, isArr, curs, _t, _ti, key, innerKey, name, queue = [obj, rootName];
    while (queue.length > 0) {
        name = queue.pop();
        curs = queue.pop();
        if (generateDtd)
            dtdElem[name] = dtdElem[name] || {};
        if (curs === endScopeObj) {
            scope_indent--;
            if (indentation > 0) ret.push('\n', ' '.repeat(indentation * scope_indent));
            ret.push('</', name, '>');
            continue;
        }
        if (typeof curs === 'object') {
            queue.push(endScopeObj);
            queue.push(name);
            tagContent = [name];
            isArr = Array.isArray(curs);
            if (isArr && generateDtd) {
                dtdElem[name][name + 'Item*'] = true;
            }
            for (key in curs) {
                if (curs.hasOwnProperty(key)) {
                    if (isArr) {
                        queue.push(curs[key]);
                        queue.push(name + 'Item');
                    } else if (typeof curs[key] == 'object' || useAttributes === false) {
                        queue.push(curs[key]);
                        queue.push(key);
                        if (generateDtd)
                            dtdElem[name][key] = true;
                    } else {
                        if (generateDtd) {
                            dtdAttr[name] = dtdAttr[name] || {};
                            dtdAttr[name][key] = true;
                        }
                        tagContent.push(key + '=' + '"' + curs[key] + '"');
                    }
                }
            }
            if (indentation > 0) ret.push('\n', ' '.repeat(indentation * scope_indent));
            ret.push('<', tagContent.join(' '), '>');
            scope_indent++;
        } else {
            if (generateDtd)
                dtdElem[name]['#PCDATA'] = true;
            if (indentation > 0) ret.push('\n', ' '.repeat(indentation * scope_indent));
            ret.push('<');
            ret.push(name);
            ret.push('>');
            ret.push(curs);
            ret.push('</');
            ret.push(name);
            ret.push('>');
        }
    }
    if (generateDtd) {
        var dtd = ['<!DOCTYPE ', rootName, ' ['];
        for (key in dtdAttr) {
            if (dtdAttr.hasOwnProperty(key)) {
                for (innerKey in dtdAttr[key]) {
                    if (dtdAttr[key].hasOwnProperty(innerKey)) {
                        if (indentation > 0) dtd.push('\n');
                        dtd.push('<!ATTLIST ', key, ' ', innerKey, ' CDATA #IMPLIED>');
                    }
                }
            }
        }
        for (key in dtdElem) {
            if (dtdElem.hasOwnProperty(key)) {
                innerKey = null;
                _t = ['<!ELEMENT ', key, ' ('];
                _ti = [];
                for (innerKey in dtdElem[key]) {
                    if (dtdElem[key].hasOwnProperty(innerKey)) {
                        _ti.push(innerKey);
                    }
                }
                if (indentation > 0) dtd.push('\n');
                if (innerKey === null) // no children
                    dtd.push('<!ELEMENT ', key, ' EMPTY>');
                else {
                    _t.push(_ti.join(', '));
                    _t.push(')>');
                    dtd.push.apply(dtd, _t);
                }
            }
        }
        dtd.push(']>');
        ret.unshift.apply(ret, dtd);
    } else if (declaration)
        ret.unshift(opt.doctype ? opt.doctype : '<!DOCTYPE ' + rootName + '>');
    if (declaration) ret.unshift(declaration);
    return ret.join('');
};

Which turns:

obj2xml({ child: { key: 'value' } });

into:

<root><child key="value"></child></root>

The function obj2xml(obj, {...options}) takes the following options:

{
    rootName: 'name of the root', // defaults to 'root'
    declaration: 'auto' || '<a custom declaration>', // defaults to undefined
    indentation: 'number', // defaults to 0
    doctype: 'auto', // defaults to undefined
    attributes: false || true // defaults to true
}

I used the code in this example to build a json2xml/xml2json converter which can be found here.

Full Example:

Resources:

Javascript in 24 hours

HTML, CSS, ES6 all in one

A Hands-On Guide to Building Web Applications Using React

Learning Regular Expressions

InformIT eBook Store has a large number of ebooks on a wide range of topics. I would definitely recommend them.

Great courses:

Javascript for beginners in 3 hours

Mobile UI and UX Design

Building web applications with react

Starting with angular 4

Programming in C# (recommended)

More web development courses

Quickstart offers a large amount of (online) courses on web development (Use Code LSOFF50 to get 50% off ;p)

Bioscopen Nederland

2018-08-11T03:02:00+02:00

Deze app maakt het mogelijk om bioscopen in Nederland te zoeken. Je kunt gemakkelijk het adres, het aantal doeken en stoelen vinden. De app kan ook offline gebruikt worden. De app gebruikt een offline kaart waardoor je deze zonder internet nog steeds kan gebruiken.

Bioscopen Nederland

Zoek bioscopen in Nederland.

Download op google play.

Rustplekken Utrecht

2018-08-11T02:59:00+02:00

Interactieve kaart met rustpunten in Utrecht. De app bevat ook een offline kaartje zodat je de app ook offline kan gebruiken.

Rustplekken Utrecht

Interactieve kaart met rustpunten in Utrecht.

Download op google-play.

Public Toilets Amsterdam

2018-08-11T02:55:00+02:00

Interactive chart showing public toilets in the city centre of amsterdam. The chart also shows your current location for easy navigation. This app also loads in a small offline map (only about ~4.3MB), so you don’t have to worry about your internet connection when you install this app on your device.

Public Toilets Amsterdam

Interactive chart showing public toilets in the city centre of amsterdam.

Download op google play

Echochamber Affinity

2018-08-11T02:50:00+02:00

Check your twitter personality. On which side of the political spectrum do you fall?

Echochamber Affinity

Check your twitter personality. On which side of the political spectrum do you fall?

Simple Function Plotter

2018-08-11T02:40:00+02:00

This app let’s you plot algebreic equations, plot computational expressions, solve conversions, do matrix operations, etc. You can save the graph as a vector image (svg) and easily create a lot of graphs.

Function Plotter

Expression solver.

Download op google-play.

ATC Manager 2

2018-08-11T02:30:00+02:00

Web based air traffic control game. Manage airspace of busy airports like Schiphol or Heathrow in a realistic simulator.

ATC Manager 2

ATC Manager on the web.

Youtube Comments are Evil

2018-08-11T02:21:00+02:00

Generates fake youtube comments for a given video using a markov model. The created comments are based on the existing comments on that video. If a youtube video has alot of comments the results will be best.

YCAE

Generates fake youtube comments for a given video.

Laika Notes

2018-08-11T02:15:00+02:00

A simple notes managing app inspired by laika the dog. Can be added to your homescreen and works offline.

Laika Notes

A simple notes managing app.

Download op google play

Newsfeeder

2018-08-11T01:45:00+02:00

Newsfeeder (also known as “feedfetish”) is a search engine and modern RSS/Atom reader. It let’s you combine all of your different news/blog, like Reddit, Cnn, Lifehacker, etc. All of your your favorite websites, blogs in one place. Get started for free without the need to sign up below by clicking the launch button.

Its a free open source desktop and web app. You don’t have to create an account. There are no cookies except for one anonymized analytics cookie (so i know how many people are using the app). There’s no event tracking like tracking the user’s mouse or scroll behavior. It only works on a secure connection (https). It has an offline mode. To install it on your desktop, you can follow the instructions under the about section. Its licensed under MIT which permits any form of (re)use. Its open source. You can find the source code here: https://github.com/sempostma/newsfeeder

The app is available in the browser and on the google play store.

Newsfeeder

The easiest way to follow news from your favorite websites and blogs and news sites. Easily search for news on multiple platforms, find feeds on popular websites and more. Also works as a classic RSS/Atom reader.

Pure CSS Progress Circles

2018-07-08T15:31:00+02:00

Progress elements can be usefull in alot of different situations. Showing them as loading indicators, using them as part of a task flow or for data visualization.

Let’s start by creating the html:

<div class="player">
  <div class="player-icon"></div>
  <div class="progress">
    <div class="right-side"></div>
    <div class="left-side"></div>
  </div>
  <div class="player-text"></div>
  <div class="player-title"></div>
</div>

Now let’s add some CSS:

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: sans-serif, Arial, Helvetica;
}

.player {
    width: 100px;
    height: 100px;
    background: #eee;
    position: relative;
    border-radius: 50%;
    overflow: visible;
    margin: 80px auto;
}

.player:hover {
    opacity: .8;
}

.player-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #4beade;
  font-weight: 700;
  font-size: 20px;
}

.player-title {
    position: absolute;
    left: 0; right: 0;
    top: calc(50% + 55px);
    text-align: center;
    color: #999;
}

Next we have to create a round border on the element with a variable circumference. Using a few tricks this can be achieved whith pure CSS. We need to halfs of a circle, a left side and a right side. If the progress is less than 50% we rotate the left side over the right side and give the left side the same color as the background. This allows us to hide the right side and show values from 0% to 50%. To show values above 50%. We chage the color of the left side to the color of the progress circle and do essentially the same thing as before only now we are extending the other circle from 50% to a 100%.

.left-side {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 50%;    
    border: 2px solid #eee;
    border-left-color: transparent;
    border-bottom-color: transparent;
    transform: rotate(45deg);
}

.left-side.fill {
    border-color: transparent;
    border-left-color: #4beade;
    border-bottom-color: #4beade;
}

.right-side {
    transform: rotate(45deg);
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 50%;    
    border: 2px solid #4beade;
    border-left-color: #eee;
    border-bottom-color: #eee;
}

Now we can set the rotate and fill class values manualy:

<div class="player">
  <div class="player-icon"></div>
  <div class="progress">
    <div class="right-side"></div>
    <div class="left-side" style="transform: rotate(189deg)"></div>
  </div>
  <div class="player-text">40%</div>
  <div class="player-title">Cool Progress</div>
</div>

Or use javascript to set the values:

var players = document.getElementsByClassName('player');

setProgress(.4, players[0]);

function setProgress(ratio, player) {
    var leftSide = player.getElementsByClassName('left-side')[0];
    ratio = ratio % 1;
    var rot = 45 + ratio * 360;
    leftSide.classList[ratio > .5 ? 'add' : 'remove']('fill');
    leftSide.setAttribute('style', 'transform: rotate(' + rot + 'deg)');
}   

And your done!

Full example:

See the Pen Pure CSS Progress Circle by sempostma (@Afirus) on CodePen.

Animation example:

See the Pen Animated CSS Progress Circle by sempostma (@Afirus) on CodePen.

Pie chart example:

See the Pen Pie Progress CSS by sempostma (@Afirus) on CodePen.

Live example: http://esstudio.site/tana-soundboad/.

Resources:

Javascript in 24 hours

HTML, CSS, ES6 all in one

A Hands-On Guide to Building Web Applications Using React

Learning Regular Expressions

InformIT eBook Store has a large number of ebooks on a wide range of topics. I would definitely recommend them.

Great courses:

Javascript for beginners in 3 hours

Mobile UI and UX Design

Building web applications with react

Starting with angular 4

Programming in C# (recommended)

More web development courses

Quickstart offers a large amount of (online) courses on web development (Use Code LSOFF50 to get 50% off ;p)

OV Fiets App 1.2

2018-07-02T15:58:00+02:00

Niet genoeg OV Fietsen op het station? Deze app laat het aantal fietsen zien, beschikbaarheid en de openingstijden voor elke OV Fiets huurlocatie in nederland. Beschikbaar als app en in de browser

Met de OV Fiets App kunt u gemakkelijk informatie opzoeken over OV Fiets huurlocaties. U kunt de zoekbalk bovenaan de homepage van de app gebruiken om locaties te zoeken.

Verbeter punten in update 1.2:

App opslagruimte meer dan gehalveerd!
Updated voor de laatste versie van android
Android 4.4 ondersteuning
Refresh scroll (pullhook) verwijderd
Oude versies van android chrome ondersteuning
Bugs waarin de app niet goed offline functioneerde zijn opgelost
Snelheid optimalisaties

Google Play

Ook is er nu een website versie van de OV Fiets App die hier gevonden kan worden.

OV Fiets App

Met de OV Fiets Website kunt u gemakkelijk informatie opzoeken over OV Fiets huurlocaties.

De website versie werkt in essentie hetzelfde als de app alleen kan het ook op IOS, windows en desktops gebruiken. De website kan zelfs offline gebruikt worden (met verouderde informatie over ov fiets locaties totdat je weer online bent), wanneer je het installeert als web app. Dat kan heel handig kan zijn als je bijvoorbeeld net even geen wifi hebt. De instructies voor installeren van de web app zijn staan hieronder:

Als je de web app nog niet hebt geïnstalleerd en je gebruikt de laatste versie van chrome dan kun je onderaan de website de knop “Toevoegen aan Startscherm/Bureaublad” zien.

Dit geld ook voor android, ios etc.

Klik op deze knop.

Er verschijnt nu een dialoog, klik op installeren.

De web app is nu geïnstalleerd op je startscherm.

Wanneer de internet verbinding onderbroken wordt zie je de melding “Je bent niet verbonden met het internet. Deg gegevens die worden weergegeven zijn mogelijk verouderd.

Als je de app weer wilt verwijderen dan kun je naar deze link gaan: “chrome://apps/”.

Klik met de rechter muis op de web app en klik op verwijderen. In android, IOS en andere mobiele apparaten kun je de app vanaf het startscherm verwijderen (net als elke andere app).

Meer:

Lighthouse Progressive Web App score:

Converting JSON to CSV in Javascript

2018-06-07T13:45:00+02:00

Checkout the website: JSON2CSV or the full example.

While searching for a csv2obj javascript library I couldn’t find a good solution, so I decided to write a very minimal csv2obj converter. Let’s start with creating the parser (csv2obj). Because of cross browser support i will try not to use a lot of es5/es6 specific syntax. The following function will do the job. There are some important caveats. The function will, in some cases, try to convert boolean, number and null values to their correct type. This only works if it matches the exact value. For example “null” will be parsed as a null value/object, but “ null” (with a leading space) will not.

    function csv2obj(csv, opt) {
        opt = opt || {};
        var delimeter = opt.delimeter || ',';
        var i, row, rownum, collumNum, lines = csv.split(/\s*\n\s*/);
        var headers = lines[0].split(delimeter);
        for(i = 0; i < headers.length; i++) {
            headers[i] = headers[i].replace(/(^[\s"]+|[\s"]+$)/g, '');
        }
        var ret = [];
        for (rownum = 1; rownum < lines.length; rownum++) {
            row = lines[rownum].split(delimeter);
            ret[rownum - 1] = {};
            for (collumNum = 0; collumNum < headers.length; collumNum++) {
                if (row[collumNum].length > 0 && (!isNaN(row[collumNum]) || row[collumNum] === 'true' 
                    || row[collumNum] === 'false' || row[collumNum] === 'null')) 
                    ret[rownum - 1][headers[collumNum]] = JSON.parse(row[collumNum]);
                else 
                    ret[rownum - 1][headers[collumNum]] = row[collumNum].replace(/(^\s*"*|"*\s*$)/g, '');
            }
        }
        return ret;
    }

The difficult part is writing the serialization function. Objects with grandchildren will be flattened and their names squashed together like this: “child.grandchild” -> “child/grandchild”. It will recursively find all of the children and push them to a queue. The function itself is not recursive! This is important in terms of performance. We will use JSON.stringify as a trick to automatically put double quotes around strings. Lastly we loop through all the rows and join the columns together.

    function obj2csv(obj, opt) {
        if (typeof obj !== 'object') return null;
        opt = opt || {};
        var scopechar = opt.scopechar || '/';
        var delimeter = opt.delimeter || ',';
        if (Array.isArray(obj) === false) obj = [obj];
        var curs, name, rownum, key, queue, values = [], rows = [], headers = {}, headersArr = [];
        for (rownum = 0; rownum < obj.length; rownum++) {
            queue = [obj[rownum], ''];
            rows[rownum] = {};
            while (queue.length > 0) {
                name = queue.pop();
                curs = queue.pop();
                if (curs !== null && typeof curs === 'object') {
                    for (key in curs) {
                        if (curs.hasOwnProperty(key)) {
                            queue.push(curs[key]);
                            queue.push(name + (name ? scopechar : '') + key);
                        }
                    }
                } else {
                    if (headers[name] === undefined) headers[name] = true;
                    rows[rownum][name] = curs;
                }
            }
            values[rownum] = [];
        }
        // create csv text
        for (key in headers) {
            if (headers.hasOwnProperty(key)) {
                headersArr.push(key);
                for (rownum = 0; rownum < obj.length; rownum++) {
                    values[rownum].push(rows[rownum][key] === undefined
                        ? ''
                        : JSON.stringify(rows[rownum][key]));
                }
            }
        }
        for (rownum = 0; rownum < obj.length; rownum++) {
            values[rownum] = values[rownum].join(delimeter);
        }
        return '"' + headersArr.join('"' + delimeter + '"') + '"\n' + values.join('\n');
    }

(Array.isArray is es5 syntax, be sure to polyfill when necessary)

I used the code in this example to build a json2csv/csv2json converter which can be found here.

Full Example:

Resources:

Javascript in 24 hours

HTML, CSS, ES6 all in one

A Hands-On Guide to Building Web Applications Using React

Learning Regular Expressions

InformIT eBook Store has a large number of ebooks on a wide range of topics. I would definitely recommend them.

Great courses:

Javascript for beginners in 3 hours