Separation of concerns, Model and View with HTML 5 Canvas

In my first getting started post on HTML 5 canvas I made a simple example on how to quickly throw together a canvas project in a way in which I usually do so when first starting out with a canvas project. However the way I wne t about things there is not always what I would do if things start to get a little complex. As a project grows in size it becomes more important to separate code that has to do with creating and updating a module from code that renders that module to the canvas.

So in other words if a project is something stupid simple things like separation of concerns does not strike me as something that is that important. However if I do start to put together something that is a little advanced, it does become more important to separate what is often called state, or a model from what is often called a view. Doing so is a good way of avoiding writing the dreaded spaghetti code as a project advances.

So to help keep things more organized, javaScript code that has to do with the state of something is keep septate from code that renders that state. That is there is a canvas model that holds the current state, and then a canvas view that renders that state. There is then also something that changes the state that can be thought of as a controller resulting in what is often called MVC or Model View Controller. So in this post I will be going over some quick javaScript and canvas code examples that can be thought of as a way of keeping things broken down like this.

Read More

Traversing over an object in node.js

Sometimes I get into a situation in which I may want to loop over all the nodes of a given object. That is I want to traverse, or loop over an object and preform a certain action with certain key value pairs of an object that has one or more nested objects in it.

I could slap together my own solution for looping over all nested object keys, maybe starting with a for in loop that I use in a method that is called recursively. However a much better option would likely be to just go ahead and use traverse as this seems to work just fine for this kind of task.

Read More

javaScript minification of js files with jsmin

Today I am working on my 2017 submission to js13kgames.com in which I must make a JavaScript game in which all the source code and any additional assets takes up 13kb or less of space. As such it is important to crunch the size of the source code down, as the development form of any game I make often surpasses that limit in a heart beat.

There are many solutions for javascript minification, but for this post I will be writing on jsmin. Which is one of the most popular and best known options out on the open web.

Read More

Getting started with deterministic systems using javaScript and canvas.

Now that I have a decent understanding of a certain programing environment I find myself facing a new kind of problem with respect to what it is that I want to do with my coding ability, that is why I stared the discovery category of this site.

Anyway in my efforts to find something interesting to work on, I have come across the concept of something called a deterministic system. From what I have found out so far it is a fancy name for a system in which there is no randomness, or variation of any kind when the system exists in a state with the same time index, and initial model values.

Read More

Using yaml in place of JSON in node.js with js-yaml

YAML is a recursive acronym for YAML Ain’t Markup Language that is used for data serialization, but does so in a more human readable style format, by supporting features like comments.

Because of the support of comments often I see it used for configuration files in place of JSON (JavaScript Object Notation), as a means of soft coding settings, and storing other forms of data where YAML may be an appropriate option. This is the case in the static site generator that I use called hexo, for the purpose of configuring settings for hexo itself as well as for a site project folder such as what theme I am using.

Read More