This will be a quick post on the vuejs model directive that might need to be used now and then when doing something with input elements in a template. The model directive may not need to always be used when working out an interface in a template but I have found that I need to use it with input, select, and text area tags. The vue model directive will make it so that you have two way bindings between input tags, and a value in the data object of a vue instance. So that when something changes in the data object, that change will effect the value of an input tag, and that if the user changes the value in the input tag that will change the value in the data object.

Read More

It has been a long time sense I wrote a post on vuejs, so I thought I would make a vuejs example post to help expand that collection. For this vuejs example the idea of a simple image editor application came to mind as just one of many ideas that might prove to be fun. So maybe something like that is in order when it comes to expanding on what can be done with vuejs. After all once I cover all the basics the only thing to do from that point forward is to start to create some actual projects one one type or another.

The general idea I have for this image editor application is to not make any kind of major project out of it that will be a full blown image manipulation program. All I want to do is just have a way to make my own image asset standard, and have a simple little tool that can be used to create and edit such a standard.

Read More

This post will be on the ins and outs of event objects in client side javaScript. There are several properties and methods that are of key interest such as the target property that is a reference to the element where the event happened. There are also a number of methods that are of interest also such as the prevent default method that will stop default browser behavior for certain types of events like mouse and touch events.

I forget about things like the prevent default method now and then, so maybe writing a long post about that and the event object in general will help me to remember better. There is also a great deal to cover when it comes to these event objects, such as the fact that the properties and methods will differ a little from one kind of event to another.

There are also some advanced topics that come up when it comes to working with these objects, such as creating them with javaScript code and using them to simulate an event by way of a script rather than having to create them by some kind of manual action.

Read More

In client side javaScript there is the canvas element that is one of the coolest, if not the coolest elements to with with. The reason why is because it can be used to create graphics and animations using javaScript code. So it goes without saying that this canvas element is worth doing a great deal of research on beyond this post if you have not done all ready. If you have a solid grasp on the element all ready then you might want to do more research now and then how other developers work with the element by looking at there own collection of canvas examples to gain a better sense of how to work on all kinds of different projects that make use of canvas elements.

There is a whole bunch of methods for drawing to a canvas element when it comes to drawing lines and shapes, as well as rendering an image to the canvas, and even working with raw image data.

I have wrote a lot of posts on the canvas element then, from getting started posts, to posts on various properties and methods in the 2d drawing context API, to full canvas examples of games, animations, and so forth. So it was only a matter of time until I made a main blog post of sorts that will act as a center point for all things canvas related on this github pages site of mine here.

Read More

The window.innerWidth, and window.innerHeight properties of the window object are a way to go about getting the current size of a window in a page. However not the total size of a screen at least not on desktop clients anyway. That is that on mobile devices the innerWidth property might work okay go get an idea of what the width of the screen of the device is, however on desktop systems it might not because the user might not have there browser window maximized or in full screen. Even if that is not the case it might not be the best option to know what you are dealing with, there is the subject of zooming, and also logical pixels.

Still these properties are useful for the sake of getting the inner width, and height of a browser window in most cases. This information can then be used as a way to center and position elements using javaScript code, and the style API. However there might be better options for doing so when it comes to just using HTML and CSS, in other words looks for a more simple solution first before resorting to javaScript.

Read More