tag:blogger.com,1999:blog-35069247773799354372024-03-21T02:06:14.510-07:00DT265 Project - Crop SimulatorAnonymoushttp://www.blogger.com/profile/06600827240065232487noreply@blogger.comBlogger14125tag:blogger.com,1999:blog-3506924777379935437.post-6107877611831700592016-04-14T14:37:00.000-07:002016-04-15T07:58:15.945-07:00Unity - Top down Camera View<br />
<br />
To this point i have become accustomed to the unity IDE, how to import assets in how to create a scene with a terrain/sky box/ simple objects.<br />
<br />
The first challenge was making these objects interact and behave in certain ways inside the environment.<br />
<br />
The first key thing to learn was how to apply certain components to a game object, which allows physics characteristics like "Rigidbody" to be added to a gameobject. In doing this, we can then set its box collider > material attribute as "Bouncy".<br />
<br />
From here the next challenge was how to record & destroy what this cube bounced off of. In comes the need to learn to script.<br />
<br />
Unity will allow you to work with JavaScript or with C# (there are more, but this is all myself and seemingly most other are concerned with). As i began learning some JS with my Aurellia/node attempt, i thought i would try to write all my beginner scripts in BOTH languages to see if i could get both working. (this is useful for when certain scripts are only available in 1 language, but you would rather convert it to another)<br />
<br />
First i learned to display what objects were in contact, keep a count of how many a type of object was hit and then implementing the find and destroy method. Additionally, how to spawn a prefab object into the world given set time and how to apply a force in a particular direction upon a key press were integrated into this "game" -> the result was actually relatively fun!<br />
<br />
I then built this to my android phone to see how it behaved. The result was not great, the keystrokes i had assigned (space) were not converted in the build, and there was no camera movement ability (part of me hoped this would be automatic)<br />
<br />
So now challenge is to set my camera up to be a suitable view (RTS style, like mentioned in previous posts) and be responsive to touch gestures. This will also include some getting use to setting up events for touches.<br />
<br />
So far I have tried building my own script for the camera. Realising do not yet know enough, i went to find some examples out there. So far from searching the unity forums, stackoverflow, youtube etc, i have found a number of scripts that seem relevant. Problem is: the ones that work, barely work in the right way, and the rest just plain don't work, Further understanding is needed before I can get these scripts working, and then learn enough from them to build my own.<br />
<br />
It SEEMS the main problem i am having with my scripts not working is "nullReferenceException: Object reference not set to an instance of an object" in my update() with the common aspect being Camera is mentioned.<br />
<span style="font-size: x-small;"><br /></span>
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>private Camera _camera;</span><br />
<span style="font-size: x-small;"><br /></span>
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>void Start () {</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>//retrieveing pricate variables</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>_camera = Camera.main;</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br />
<span style="font-size: x-small;"><br /></span>
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>void Update () {</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>//checked if we want to Update zoom sensitivity</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>if (updateZoomSensitivity) {</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>//set move sensitiy x&y to orthographics size / 5 (arbitary number)</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>moveSensitivityX = _camera.orthographicSize / 5.0f;</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>moveSensitivityY = _camera.orthographicSize / 5.0f;</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br />
<br />
**or**<br />
<br />
<span style="font-size: x-small;">Camera cam;</span><br />
<span style="font-size: x-small;"><br /></span>
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>void Awake()</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>{</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>cam = Camera.main;</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br />
<span style="font-size: x-small;">void Update ()</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>{</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>if (Input.touchCount == 0) {</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>oldTouchPositions [0] = null;</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>oldTouchPositions [1] = null;</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>} else if (Input.touchCount == 1) {</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>if (oldTouchPositions [0] == null || oldTouchPositions [1] != null) {</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>oldTouchPositions [0] = Input.GetTouch (0).position;</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>oldTouchPositions [1] = null;</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>} else {</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>Vector2 newTouchPosition = Input.GetTouch (0).position;</span><br />
<span style="font-size: x-small;"><br /></span>
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>cam.transform.position += cam.transform.TransformDirection ((Vector3)((oldTouchPositions [0] - newTouchPosition) * cam.GetComponent<Camera> ().orthographicSize / cam.GetComponent<Camera> ().pixelHeight * 2f));</span><br />
<span style="font-size: x-small;"><br /></span>
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>oldTouchPositions [0] = newTouchPosition;</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br />
<br />
<br />
<br />
** Update** this was fixed by simply ensuring the camera object the script was attached to was the MainCamera.<br />
<br />
The script i am currently using, which seems to give the best results with an orthographic view is:<br />
<br />
<span style="font-size: x-small;">using UnityEngine;</span><br />
<span style="font-size: x-small;">using System.Collections;</span><br />
<span style="font-size: x-small;"><br /></span>
<span style="font-size: x-small;">public class COCcam : MonoBehaviour {</span><br />
<span style="font-size: x-small;"><br /></span>
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>public float moveSensitivityX = 1.0f;</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>public float moveSensitivityY = 1.0f;</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>public bool updateZoomSensitivity= true;</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>public float orthoZoomSpeed = 0.05f;</span><br />
<span style="font-size: x-small;"><br /></span>
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>public float minZoom = 1.0f;</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>public float maxZoom = 20.0f;</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>public bool invertMoveX = false;</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>public bool invertMoveY = false;</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>private Camera _camera;</span><br />
<span style="font-size: x-small;"><br /></span>
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>void Start () {</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>//retrieveing private variables</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>_camera = Camera.main;</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br />
<span style="font-size: x-small;"><br /></span>
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>void Update () {</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>//checked if we want to Update zoom sensitivity</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>if (updateZoomSensitivity) {</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>//set move sensitiy x&y to orthographics size / 5 (arbitary number)</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>moveSensitivityX = _camera.orthographicSize / 5.0f;</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>moveSensitivityY = _camera.orthographicSize / 5.0f;</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br />
<span style="font-size: x-small;"><br /></span>
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>//get touches that are on screen</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>Touch[] touches = Input.touches;</span><br />
<span style="font-size: x-small;"><br /></span>
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>if (touches.Length > 0) {</span><br />
<span class="Apple-tab-span" style="white-space: pre;"><span style="font-size: x-small;"> </span></span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>//single touch(move)</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>if (touches.Length == 1) {</span><br />
<span style="font-size: x-small;"><br /></span>
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>if (touches [0].phase == TouchPhase.Moved) { //returns phase of current touch</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>//obtains delta pos of touch -> difference between touch position of the current/previous frame</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>Vector2 delta = Input.touches[0].deltaPosition;</span><br />
<span style="font-size: x-small;"><br /></span>
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>//variables for position x / y</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>float positionX = delta.x * moveSensitivityX * Time.deltaTime;</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>//check if we are inverting, as per public bools.</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>//if invertmoveX is true then it will equal the same. IF not, it'll equal posX * -1, inverting it.</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>positionX = invertMoveX ? positionX : positionX * -1;</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>float positionY = delta.y * moveSensitivityY * Time.deltaTime;</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>positionY = invertMoveY ? positionY : positionY * -1;</span><br />
<span style="font-size: x-small;"><br /></span>
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>//set camera's tranform position to = new vector 3 at position x, y, z</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>_camera.transform.position += new Vector3 (positionX, positionY, 0);</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br />
<span style="font-size: x-small;"><br /></span>
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>//double touch (zoom)</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>if (touches.Length == 2) {</span><br />
<span style="font-size: x-small;"><br /></span>
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>Touch touchOne = touches [0];</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>Touch touchTwo = touches [1];</span><br />
<span style="font-size: x-small;"><br /></span>
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>//to get the posiiton from the PREVIOUS touch in the previous frame.</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>//subtract touch pos from touch delta</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>Vector2 touchOnePrevPos = touchOne.position - touchOne.deltaPosition;</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>Vector2 touchTwoPrevPos = touchTwo.position - touchTwo.deltaPosition;</span><br />
<span style="font-size: x-small;"><br /></span>
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>//FIND MAGNITUDE OF PREVIOUS TOUCH VS CURRENT TOUCHES</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>float prevTouchDeltaMag = (touchOnePrevPos - touchTwoPrevPos).magnitude;</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>//now the current touch dleta magnitude</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>float touchDeltaMag = (touchOne.position - touchTwo.position).magnitude;</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>//difference between</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>float deltaMagDiff = prevTouchDeltaMag - touchDeltaMag;</span><br />
<span style="font-size: x-small;"><br /></span>
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>//set cam's ortho size -> the delta mag * public variable at top.</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>_camera.orthographicSize += deltaMagDiff * orthoZoomSpeed;</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>//clamp values between min/max zoom defined at top.</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>_camera.orthographicSize = Mathf.Clamp(_camera.orthographicSize, minZoom, maxZoom);</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</span><br />
<span style="font-size: x-small;"><span class="Apple-tab-span" style="white-space: pre;"> </span>} //close update</span><br />
<span style="font-size: x-small;">} //close class</span><br />
<div>
<br /></div>
<br />
<br />
(deeper tutorials into any of the above can follow if there is enough interest!)<br />
<br />
<br />Anonymoushttp://www.blogger.com/profile/06600827240065232487noreply@blogger.com0tag:blogger.com,1999:blog-3506924777379935437.post-24449291065291819922016-04-08T01:54:00.001-07:002016-04-08T01:54:18.318-07:00April Update - No .NET+Aurelia | Unity vs Three.jsFor now the idea of using Visual Studio as my environment along with integrating Aurelia into .net MVC SPA has been abandoned.<br />
<br />
This is mostly as there is much conflicting information/versions and honestly i don't know enough to trouble shoot it yet. Problems setting up the environment took longer than expected, and i am not confident that i am "bug-free" moving forward. Given the time restraints of this project, I feel this is a major aspect to be considered. However, this was not a lost learning experience! I learned a lot about the differences between typescripts/es6, the workings of frameworks in general/Aurelia/ .net / MVC/ SPA./ Visual Studio/ Node package Manage (NPM)/ JSPM / Gulp .<br />
<br />
<br />
So the decision is between:<br />
1) Aurelia + Three.js. implemented as a web app<br />
2) Unity deployed on Android.<br />
<br />
To this end i<br />
<br />
------------------------------------------------------------------------------------------------------------------<br />
1)For the meantime when working with with Aurelia, i will use it more independently and in a more basic way. I.e using gulp watch to compile and launch a dummy server and using Sublime (insert: text editor of your preference). I will focus on the "front end" aspect first, using simulated database calls and build up from there.<br />
<br />
I believe i have Three.js integrated into a working prototype with Aurelia. Now the challenge would be to learn the three.js framework, something which i have ZERO experience with (never touched 3d of any sort!)<br />
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
2) Again, similar to above, i have unity downloaded and installed on Visual Studio (not so hard as it is supported by microsoft... a guide on doing this to come in the future) and again, i have ZERO experience with game design/Unity</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
---------------</div>
<div>
So, the next steps are to do some small demo projects in both Unity and in Three.js looking at various tutorials and seeing which one I gravitate towards more! </div>
<div>
<br /></div>
<div>
The next guides will be my attempts at learning these :)</div>
Anonymoushttp://www.blogger.com/profile/06600827240065232487noreply@blogger.com1tag:blogger.com,1999:blog-3506924777379935437.post-48325371648833461802016-04-03T07:45:00.001-07:002016-04-04T09:00:24.813-07:00Aurelia with C#set up asp.net mvc project<br />
<br />
add aurelia view to home,<br />
<br />
add aurellia ActionResult method in home controller.. re map routing so aurelia opens first.<br />
<br />
right click project solution and open the containing folder... using right cick run the cmd prompt from the rot directory of the project.<br />
<br />
jspm init (yes to everything)<br />
jspm install aurelia-framework<br />
jspm install aurelia-bootstrapper<br />
<br />
now aurellia view file acts as aurellia index... show all files in solution explorer.<br />
right click config.js and "include"<br />
jspm_packages not necessary to add.. but we will drag system.js & the config.js into the aurellai page to <script> link at top.<br />
<br />
we will then <script>System.import("aurelia-bootstrapper")<br />
<br />
<div aurelia-app="main"></div> - this tells where the aurelia app content will display<br />
right click project at top of solution explorer - add> javascript file, name it main.<br />
paste this in:<br />
<span class="token keyword" style="background-color: #f7f7f7; box-sizing: inherit; color: #a71d5d; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;">export</span><span style="background-color: #f7f7f7; color: #333333; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;"> </span><span class="token keyword" style="background-color: #f7f7f7; box-sizing: inherit; color: #a71d5d; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;">function</span><span style="background-color: #f7f7f7; color: #333333; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;"> </span><span class="token function" style="background-color: #f7f7f7; box-sizing: inherit; color: #0086b3; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;">configure</span><span class="token punctuation" style="background-color: #f7f7f7; box-sizing: inherit; color: #333333; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;">(</span><span style="background-color: #f7f7f7; color: #333333; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;">aurelia</span><span class="token punctuation" style="background-color: #f7f7f7; box-sizing: inherit; color: #333333; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;">)</span><span style="background-color: #f7f7f7; color: #333333; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;"> </span><span class="token punctuation" style="background-color: #f7f7f7; box-sizing: inherit; color: #333333; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;">{</span><span style="background-color: #f7f7f7; color: #333333; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;">
aurelia</span><span class="token punctuation" style="background-color: #f7f7f7; box-sizing: inherit; color: #333333; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;">.</span><span style="background-color: #f7f7f7; color: #333333; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;">use
</span><span class="token punctuation" style="background-color: #f7f7f7; box-sizing: inherit; color: #333333; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;">.</span><span class="token function" style="background-color: #f7f7f7; box-sizing: inherit; color: #0086b3; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;">standardConfiguration</span><span class="token punctuation" style="background-color: #f7f7f7; box-sizing: inherit; color: #333333; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;">(</span><span class="token punctuation" style="background-color: #f7f7f7; box-sizing: inherit; color: #333333; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;">)</span><span style="background-color: #f7f7f7; color: #333333; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;">
</span><span class="token punctuation" style="background-color: #f7f7f7; box-sizing: inherit; color: #333333; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;">.</span><span class="token function" style="background-color: #f7f7f7; box-sizing: inherit; color: #0086b3; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;">developmentLogging</span><span class="token punctuation" style="background-color: #f7f7f7; box-sizing: inherit; color: #333333; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;">(</span><span class="token punctuation" style="background-color: #f7f7f7; box-sizing: inherit; color: #333333; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;">)</span><span class="token punctuation" style="background-color: #f7f7f7; box-sizing: inherit; color: #333333; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;">;</span><span style="background-color: #f7f7f7; color: #333333; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;">
aurelia</span><span class="token punctuation" style="background-color: #f7f7f7; box-sizing: inherit; color: #333333; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;">.</span><span class="token function" style="background-color: #f7f7f7; box-sizing: inherit; color: #0086b3; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;">start</span><span class="token punctuation" style="background-color: #f7f7f7; box-sizing: inherit; color: #333333; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;">(</span><span class="token punctuation" style="background-color: #f7f7f7; box-sizing: inherit; color: #333333; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;">)</span><span class="token punctuation" style="background-color: #f7f7f7; box-sizing: inherit; color: #333333; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;">.</span><span class="token function" style="background-color: #f7f7f7; box-sizing: inherit; color: #0086b3; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;">then</span><span class="token punctuation" style="background-color: #f7f7f7; box-sizing: inherit; color: #333333; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;">(</span><span class="token punctuation" style="background-color: #f7f7f7; box-sizing: inherit; color: #333333; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;">(</span><span class="token punctuation" style="background-color: #f7f7f7; box-sizing: inherit; color: #333333; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;">)</span><span style="background-color: #f7f7f7; color: #333333; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;"> </span><span class="token operator" style="background: rgba(255 , 255 , 255 , 0.498039); box-sizing: inherit; color: #a71d5d; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;">=</span><span class="token operator" style="background: rgba(255 , 255 , 255 , 0.498039); box-sizing: inherit; color: #a71d5d; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;">></span><span style="background-color: #f7f7f7; color: #333333; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;"> aurelia</span><span class="token punctuation" style="background-color: #f7f7f7; box-sizing: inherit; color: #333333; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;">.</span><span class="token function" style="background-color: #f7f7f7; box-sizing: inherit; color: #0086b3; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;">setRoot</span><span class="token punctuation" style="background-color: #f7f7f7; box-sizing: inherit; color: #333333; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;">(</span><span class="token punctuation" style="background-color: #f7f7f7; box-sizing: inherit; color: #333333; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;">)</span><span class="token punctuation" style="background-color: #f7f7f7; box-sizing: inherit; color: #333333; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;">)</span><span class="token punctuation" style="background-color: #f7f7f7; box-sizing: inherit; color: #333333; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;">;</span><span style="background-color: #f7f7f7; color: #333333; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;">
</span><span class="token punctuation" style="background-color: #f7f7f7; box-sizing: inherit; color: #333333; font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace; font-size: 13.6px; letter-spacing: 0.4px; line-height: 20.4px; white-space: pre;">}</span><br />
<br />
this will set the root to app.js.. which we now create.... Like with the main.js file, add > app.js<br />
export class App{} // shell for now just to allow running<br />
now add app.html page in the same way... and clear the auto generated code.<br />
<br />
right click project>properties>web>select "specific page" and type "/"<br />
<br />
for now we can type <template>Aurelia has started.</template> and run it to confirm we see this message.<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />Anonymoushttp://www.blogger.com/profile/06600827240065232487noreply@blogger.com0tag:blogger.com,1999:blog-3506924777379935437.post-6700928315918594292016-03-16T12:28:00.000-07:002016-03-16T12:28:19.214-07:00SPA - single page applicationDefinition of a page in SPA:<br />
<br />
<span style="background-color: white; color: #2c3e50; font-family: "helvetica neue" , "helvetica" , "arial" , sans-serif; font-size: 14px; line-height: 20px;">When the app starts, it is the sent to the browser by the server. All presentation logic is on the client after the page initially loads .</span><br />
<div style="background-color: white; box-sizing: border-box; color: #2c3e50; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; margin-bottom: 10px;">
The client, not the server, determines what the app does with the SPA and composes app pages from the HTML templates (fragments) and data which are downloaded asynchronously as needed.</div>
<div style="background-color: white; box-sizing: border-box; color: #2c3e50; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; margin-bottom: 10px;">
The server has no logic for user interface/ no UI state but instead provides resources to the client. First by providing the initial HTML shell, then in response to client HTTP requests for data (which can be HTML templates, JSON, JS or CSS)</div>
<div style="background-color: white; box-sizing: border-box; color: #2c3e50; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; margin-bottom: 10px;">
<br /></div>
<div style="background-color: white; box-sizing: border-box; color: #2c3e50; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; margin-bottom: 10px;">
By using Views we will introduce the ability to "change page" while remaining on the same actual page that was initially served to us from the server.</div>
Anonymoushttp://www.blogger.com/profile/06600827240065232487noreply@blogger.com0tag:blogger.com,1999:blog-3506924777379935437.post-81246240672421273282016-03-12T07:29:00.000-08:002016-03-13T13:19:28.703-07:00Getting started with Aurelia/nodeGet Node.js - download version from node.js <a href="https://nodejs.org/en/download/">website</a>. -- full guide <a href="https://github.com/jspm/jspm-cli/blob/master/docs/getting-started.md">here</a><br />
<br />
Get JSPM.io pakcage manager (like bower etc)<br />
use node to install JSPM from the command line (windows)<br />
<pre style="background-color: #f7f7f7; border-radius: 3px; box-sizing: border-box; color: #333333; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 13.6px; font-stretch: normal; line-height: 1.45; margin-bottom: 16px; overflow: auto; padding: 16px; word-wrap: normal;"><code style="background: transparent; border-radius: 3px; border: 0px; box-sizing: border-box; display: inline; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 13.6px; line-height: inherit; margin: 0px; max-width: initial; overflow: initial; padding: 0px; word-break: normal; word-wrap: normal;">npm install jspm -g</code></pre>
then<br />
<pre style="background-color: #f7f7f7; border-radius: 3px; box-sizing: border-box; color: #333333; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 13.6px; font-stretch: normal; line-height: 1.45; margin-bottom: 16px; overflow: auto; padding: 16px; word-wrap: normal;"><code style="background: transparent; border-radius: 3px; border: 0px; box-sizing: border-box; display: inline; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 13.6px; line-height: inherit; margin: 0px; max-width: initial; overflow: initial; padding: 0px; word-break: normal; word-wrap: normal;">jspm init</code></pre>
(might need to return to set the following, if choose the defaults)<br />
<blockquote class="tr_bq" style="box-sizing: border-box; color: #333333; line-height: 20.48px; margin-bottom: 16px;">
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;">Sets up the package.json and configuration file. Note <code style="background-color: rgba(0, 0, 0, 0.0392157); border-radius: 3px; box-sizing: border-box; margin: 0px; padding: 0.2em 0px;">jspm init</code> happens automatically if you try installing into an empty project too.</span><br />
<ul style="box-sizing: border-box; color: #333333; line-height: 20.48px; margin-bottom: 16px; margin-top: 0px; padding-left: 2em;">
<li style="box-sizing: border-box;"><span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"><strong style="box-sizing: border-box;">baseURL</strong>: This should be set to the public folder where your server will serve from, relative to the package.json file.<em style="box-sizing: border-box;">Defaults to the package.json folder itself.</em></span></li>
<li style="box-sizing: border-box;"><span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"><strong style="box-sizing: border-box;">jspm packages folder</strong>: The folder where jspm will install external dependencies.</span></li>
<li style="box-sizing: border-box;"><span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"><strong style="box-sizing: border-box;">Config file path</strong>: The jspm config file for your application. Should be within the baseURL and checked in to version control.</span></li>
<li style="box-sizing: border-box;"><span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"><strong style="box-sizing: border-box;">Client baseURL</strong>: The URL from the browser where the public folder is hosted.</span></li>
<li style="box-sizing: border-box;"><span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;"><strong style="box-sizing: border-box;">Transpiler</strong>: Change this option at any time with <code style="background-color: rgba(0, 0, 0, 0.0392157); border-radius: 3px; box-sizing: border-box; margin: 0px; padding: 0.2em 0px;">jspm dl-loader babel</code>. Custom transpilation options can also be set through <code style="background-color: rgba(0, 0, 0, 0.0392157); border-radius: 3px; box-sizing: border-box; margin: 0px; padding: 0.2em 0px;">babelOptions</code> or <code style="background-color: rgba(0, 0, 0, 0.0392157); border-radius: 3px; box-sizing: border-box; margin: 0px; padding: 0.2em 0px;">traceurOptions</code> in the jspm config file.</span></li>
</ul>
<span style="font-family: "courier new" , "courier" , monospace; font-size: x-small;">If you ever need to reset any of these properties, you can modify the package.json, which will update the configuration when you next run <code style="background-color: rgba(0, 0, 0, 0.0392157); border-radius: 3px; box-sizing: border-box; margin: 0px; padding: 0.2em 0px;">jspm install</code> or <code style="background-color: rgba(0, 0, 0, 0.0392157); border-radius: 3px; box-sizing: border-box; margin: 0px; padding: 0.2em 0px;">jspm init</code> to refresh.<br />It is possible to run through the above prompts again at any time with <code style="background-color: rgba(0, 0, 0, 0.0392157); border-radius: 3px; box-sizing: border-box; margin: 0px; padding: 0.2em 0px;">jspm init -p</code>.</span></blockquote>
------------------<br />
get the <a href="https://github.com/aurelia/skeleton-navigation/tree/master/skeleton-es2016">Aurelia skeleton navigation</a> (a starting template) and <b>FOLLOW THE README</b><br />
--download the zip and THEN choose which version you want (typescript, es6, .net etc)<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLTUdhEErGxHVXUEMv1CTh10O-rFm2RjubPzXsdbPQn-GPpPy6cwJYoqpIuCMx6uQ87Z4-INw9guyebsmQBLccIuIh8SC6ckDr5iKc49euSfcMu2Wk0qkyolmFmD4AzlK2JpOM2yIEZsa4/s1600/Screenshot+2016-03-12+16.09.46.png" imageanchor="1"><img border="0" height="252" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLTUdhEErGxHVXUEMv1CTh10O-rFm2RjubPzXsdbPQn-GPpPy6cwJYoqpIuCMx6uQ87Z4-INw9guyebsmQBLccIuIh8SC6ckDr5iKc49euSfcMu2Wk0qkyolmFmD4AzlK2JpOM2yIEZsa4/s640/Screenshot+2016-03-12+16.09.46.png" width="640" /></a><br />
-------------------<br />
<br />
You can also link Visual Studio with node to get all the benefits while writing your code.<br />
<a href="https://www.visualstudio.com/en-us/features/node-js-vs.aspx">See here</a><br />
<a href="https://github.com/Microsoft/nodejs-guidelines">Microsoft + Node.js Tips & Tricks</a><br />
<a href="https://github.com/Microsoft/nodejstools/wiki/Install-Node.js-and-get-started-with-NTVS">General read me and installation guide </a><br />
<a href="https://github.com/Microsoft/nodejstools/wiki">nodejstools/wiki </a>(includes work around for MAX_PATH error)<br />
<a href="https://visualstudiogallery.msdn.microsoft.com/65748cdb-4087-497e-a394-2e3449c8e61e">Package intelisense for VS</a><br />
<a href="https://azure.microsoft.com/en-us/develop/nodejs/">Azure Node.js dev center</a><br />
<a href="https://visualstudiogallery.msdn.microsoft.com/ee6e6d8c-c837-41fb-886a-6b50ae2d06a2">Web Essentials 2015.1</a><br />
<div>
<a href="https://visualstudiogallery.msdn.microsoft.com/ee6e6d8c-c837-41fb-886a-6b50ae2d06a2"><strong style="font-family: 'Segoe UI', Verdana, Arial; font-size: 13.008px;"></strong></a><strong style="font-family: 'Segoe UI', Verdana, Arial; font-size: 13.008px;"><a href="https://visualstudiogallery.msdn.microsoft.com/9ec27da7-e24b-4d56-8064-fd7e88ac1c40" style="color: #960bb4; text-decoration: none;">Bundler & Minifier</a></strong><span style="font-family: "segoe ui" , "verdana" , "arial"; font-size: 13.008px;"> - for bundling and minifying JS, CSS and HTML files</span><br />
<strong style="font-family: 'Segoe UI', Verdana, Arial; font-size: 13.008px;"><a href="https://visualstudiogallery.msdn.microsoft.com/3b329021-cd7a-4a01-86fc-714c2d05bb6c" style="color: #960bb4; text-decoration: none;">Web Compiler</a></strong><span style="font-family: "segoe ui" , "verdana" , "arial"; font-size: 13.008px;"> - for compiling LESS, Sass, Scss, (Iced)CoffeeScript and JSX files</span><br />
<strong style="font-family: 'Segoe UI', Verdana, Arial; font-size: 13.008px;"><a href="https://visualstudiogallery.msdn.microsoft.com/a56eddd3-d79b-48ac-8c8f-2db06ade77c3" style="color: #960bb4; text-decoration: none;">Image Optimizer</a></strong><span style="font-family: "segoe ui" , "verdana" , "arial"; font-size: 13.008px;"> - for lossless optimization of PNG, JPG and GIFs</span><br />
<strong style="font-family: 'Segoe UI', Verdana, Arial; font-size: 13.008px;"><a href="https://visualstudiogallery.msdn.microsoft.com/6edc26d4-47d8-4987-82ee-7c820d79be1d" style="color: #960bb4; text-decoration: none;">Web Analyzer</a></strong><span style="font-family: "segoe ui" , "verdana" , "arial"; font-size: 13.008px;"> - for static code analysis (linting) of JS, TS, CSS and JSX files </span><br />
<h1 style="border-bottom-color: rgb(238, 238, 238); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box; margin-bottom: 16px; margin-left: 0px; margin-right: 0px; margin-top: 0px !important; padding-bottom: 0.3em;">
<span style="color: #333333; font-family: "helvetica neue" , "helvetica" , "segoe ui" , "arial" , "freesans" , sans-serif , "apple color emoji" , "segoe ui emoji" , "segoe ui symbol"; font-size: x-small; line-height: 1.2;">-----------------------</span></h1>
<span style="font-size: x-small;"><br /></span>
<b><u>Starting a new Projects: </u></b></div>
<div>
See <a href="http://aurelia.io/docs.html#/aurelia/framework/latest/doc/article/getting-started">here for aurelia getting started page</a><br />
and here for a video explaining aurelia and walking through the set up a bit.<br />
<br />
<span style="font-size: x-small;">open up a html file in Visual studio (this can be imported by going to file - add existing website -> point it to your folder</span><br />
<span style="font-size: x-small;">in your html file, in the body, type:</span><br />
<span style="font-size: x-small;"><script src="jspm_packages/system.js"></script> -- this links the system.js file, this allows import of assest. System.import...</span><br />
<span style="font-size: x-small;"><br /></span>
<span style="font-size: x-small;"><script src="config.js"></script></span><br />
<span style="font-size: x-small;"><br /></span>
<br />
UI comes in 2 parts: View(HTML rendered into DOM) and View Model(written in Javascript which provides data/behaviour to the view). Databinding links both together and allows updating.<br />
<br />
<br />
<br />
Note: when using TypeScript, <span style="background-color: white; color: #444444; font-family: wf_segoe-ui_normal, HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 25.6px;">Typically the first step in any new project is to add in a </span><code style="background-color: #f9f2f4; border-radius: 4px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.4px; padding: 2px 4px;">tsconfig.json</code><span style="background-color: white; color: #444444; font-family: wf_segoe-ui_normal, HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 25.6px;"> file. This defines the TypeScript project settings such as the compiler options and the files that should be included. To do this, open up the folder where you want to store your source and add in a new file named </span><code style="background-color: #f9f2f4; border-radius: 4px; box-sizing: border-box; color: #c7254e; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 14.4px; padding: 2px 4px;">tsconfig.json</code><span style="background-color: white; color: #444444; font-family: wf_segoe-ui_normal, HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 25.6px;">. Once in this file IntelliSense will help you along the way.</span><br />
<span style="background-color: white; color: #444444; font-family: wf_segoe-ui_normal, HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 25.6px;"><br /></span>
<span style="background-color: white; color: #444444; font-family: wf_segoe-ui_normal, HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 25.6px;"><br /></span></div>
Anonymoushttp://www.blogger.com/profile/06600827240065232487noreply@blogger.com0tag:blogger.com,1999:blog-3506924777379935437.post-77318730142476049672016-03-11T09:28:00.001-08:002016-03-11T09:28:23.262-08:00.Net vs MEAN stackGood article https://www.airpair.com/mean-stack/posts/developers-moving-dotnet-to-mean<br />
<br />
<br />Anonymoushttp://www.blogger.com/profile/06600827240065232487noreply@blogger.com0tag:blogger.com,1999:blog-3506924777379935437.post-32117757664570506862016-03-05T13:56:00.000-08:002016-03-28T11:01:23.938-07:00JavaScript framworks<h2>
<a href="http://www.sitepoint.com/top-javascript-frameworks-libraries-tools-use/">Top JavaScript Frameworks, Libraries and Tools and When to Use Them</a> </h2>
(beware that frameworks < flexible than libraries)<br />
<h3>
<span style="font-size: small;">
Isomorphic JS apps can run both client-side & server side (bankend and front end in the same code). <span style="font-weight: normal;"><a href="http://isomorphic.net/libraries">List of all the new isomorphic librarries and frameworks</a></span></span></h3>
<h3>
<span style="font-size: small;">
webcomponents.js</span></h3>
<h2>
<ul>
<li><u>Meteor </u>- isomorphic</li>
</ul>
</h2>
<h2>
<ul>
<li>Underscore &lodash -<span style="font-size: small;"> <span style="background-color: white; color: #4a4a4a; font-family: "roboto" , "helvetica neue" , "helvetica" , "helvetica" , "arial" , sans-serif; line-height: 28.8px;">provides a whole suite of utility functions without monkey patching the built-in JavaScript objects. Both libraries provide over 100 functional helpers and other specialized goodies; including functions like </span><code class=" language-javascript" style="background: rgb(232, 232, 232); border-radius: 3px; box-sizing: border-box; direction: ltr; font-family: consolas, monaco, 'andale mono', 'ubuntu mono', monospace; line-height: 1.5; padding: 3px; text-shadow: rgb(255, 255, 255) 0px 1px; white-space: pre; word-break: normal;">map<span class="token punctuation" style="box-sizing: border-box; color: #999999;">,</span> filter<span class="token punctuation" style="box-sizing: border-box; color: #999999;">,</span> invoke<span class="token punctuation" style="box-sizing: border-box; color: #999999;">,</span> reduce<span class="token punctuation" style="box-sizing: border-box; color: #999999;">,</span> template<span class="token punctuation" style="box-sizing: border-box; color: #999999;">,</span> throttle<span class="token punctuation" style="box-sizing: border-box; color: #999999;">,</span> bind<span class="token punctuation" style="box-sizing: border-box; color: #999999;">,</span> extend<span class="token punctuation" style="box-sizing: border-box; color: #999999;">,</span> pick<span class="token punctuation" style="box-sizing: border-box; color: #999999;">,</span> clone</code></span></li>
</ul>
<div>
<span style="font-family: "consolas" , "monaco" , "andale mono" , "ubuntu mono" , monospace;"><span style="font-size: 16px; line-height: 26.6667px; white-space: pre;"><br /></span></span></div>
</h2>
<h3>
</h3>
<h2>
<ul>
<li><u>Aurelia</u></li>
</ul>
</h2>
<h3>
<u><span style="font-size: small;">complete framework (built using knockout/backbone) </span></u></h3>
<h3>
<div style="font-weight: normal;">
<ul>
<li><span style="color: #3a4145; font-family: "noto serif" , serif; font-size: small; line-height: 34px;">can easily use React.js within Aurelia</span></li>
<li><span style="font-size: small;"><span style="color: #3a4145; font-family: "noto serif" , serif; line-height: 34px;">full-stack SPA framework </span><span style="color: #3a4145; font-family: "noto serif" , serif; line-height: 34px;">with support for ECMAScript 6 syntax (as well as a Gulpfile with customised build system for transpiling your ES6 down to ES5 compatible code). </span><span style="color: #3a4145; font-family: "noto serif" , serif; line-height: 34px;"> </span><span style="color: #3a4145; font-family: "noto serif" , serif; line-height: 34px;">supports all forms of alternative abstraction syntax out of the box like TypeScript, AtScript and even CoffeeScript</span></span></li>
<li><span style="color: #3a4145; font-family: "noto serif" , serif; font-size: small; line-height: 34px;">Variable binding is simple. with just similar syntax to Javascript itself.</span></li>
<ul>
<li><span style="font-size: small;"><span style="color: #3a4145; font-family: "noto serif" , serif; line-height: 34px;"><span style="background-color: white; color: #333333; font-family: "consolas" , "liberation mono" , "menlo" , "courier" , monospace; line-height: 20px; white-space: pre;"><input type="text" value.bind="firstName"> </span></span><span style="background-color: white; color: #333333; font-family: "consolas" , "liberation mono" , "menlo" , "courier" , monospace; line-height: 20px; white-space: pre;"><a href.bind="url">Aurelia</a></span></span></li>
</ul>
<li><span style="color: #333333; font-family: "consolas" , "liberation mono" , "menlo" , "courier" , monospace;"><span style="line-height: 20px; white-space: pre;"><span style="color: #3a4145; font-family: "noto serif" , serif; font-size: small; line-height: 34px; white-space: normal;">You can explicitly specify the type of binding you are using</span></span></span></li>
<ul>
<li><span style="color: #333333; font-family: "consolas" , "liberation mono" , "menlo" , "courier" , monospace;"><span style="line-height: 20px; white-space: pre;"><span style="color: #3a4145; font-family: "noto serif" , serif; line-height: 34px; white-space: normal;"><span style="background-color: white; color: #333333; font-family: "consolas" , "liberation mono" , "menlo" , "courier" , monospace; font-size: small; line-height: 20px; white-space: pre;"><markdown-editor value.two-way="markdown"></markdown-editor></span></span></span></span></li>
</ul>
</ul>
<blockquote class="tr_bq">
<span style="color: #3a4145; font-family: "noto serif" , serif; font-size: small; line-height: 34px;">.. you are learning ES6 and not so much the framework itself. This means all future frameworks that use ES6 will leverage your existing ES6 knowledge which means if you choose to learn Aurelia, most aspects of it should apply to another framework. - <a href="http://ilikekillnerds.com/2015/01/aurelia-vs-angularjs-round-one-fight/">source</a></span></blockquote>
<span style="color: #3a4145; font-family: "noto serif" , serif; font-size: small; line-height: 34px;">Because Aurelia does not replace your HTML or parse it any differently than your browser does without Aurelia, it allows you to use any third party library or plugin inside of your Aurelia application without worrying about it messing with anything.</span><br />
<span style="font-size: small;"><br /></span>
<span style="font-size: small;"><a href="http://www.programwitherik.com/quick-blog-example-with-aurelia/">Aurellia with firebase example</a> ... <a href="https://github.com/PulsarBlow/aurelia-firebase">aurellia/firebase plugin</a></span><br />
<span style="font-size: small;"><br /></span>
<a href="https://trello.com/b/HIO2u3ue/angular-mind-learning-aurelia-through-examples"><span style="font-size: small;">Learning through examples - trello page </span></a><br />
<a href="http://www.syntaxsuccess.com/viewarticle/5521afe061d7e9d80a9f52dc"><span style="font-size: small;">building a treeview</span></a><br />
<a href="http://ilikekillnerds.com/category/javascript/aurelia/"><span style="font-size: small;">I KILL NERDS - POSTS ABOUT AURELLIA </span></a><br />
<a href="https://github.com/Vheissu/Aurelia-Code-Snippets"><span style="font-size: small;">CODE SNIPPETS GITHUB LINK</span></a><br />
<a href="http://stackoverflow.com/questions/35799475/how-to-add-a-tab-or-other-ui-component-with-aurelia"><span style="font-size: small;">How to add a tab (or other) UI component with Aurelia</span></a></div>
<div style="font-weight: normal;">
<a href="http://ilikekillnerds.com/2016/02/using-jquery-ui-widgets-in-aurelia/"><span style="font-size: small;">Using jQuery UI Widgets in Aurelia</span></a></div>
<div style="font-weight: normal;">
<span style="font-size: small;"><a href="https://github.com/ahmedshuhel/aurelia-meteor">Aurelia & Meteor</a></span></div>
</h3>
<a href="http://stackoverflow.com/questions/28200469/configure-aurelia-project-using-visual-studio">Configure Aurelia Project using Visual Studio</a><h2>
<ul>
<li><u>three.js</u></li>
</ul>
</h2>
<h3>
<div style="font-weight: normal;">
<div style="background-color: white; box-sizing: border-box; direction: ltr; margin-bottom: 32px; padding: 0px;">
<span style="color: #4a4a4a; font-family: "roboto" , "helvetica neue" , "helvetica" , "helvetica" , "arial" , sans-serif;"><span style="font-size: small; line-height: 28.8px;">T<a href="http://izzimach.github.io/demos/react-three-interactive/index.html">hree with react</a> related <a href="https://github.com/Izzimach/react-three">Github</a></span></span><br />
<span style="color: #4a4a4a; font-family: "roboto" , "helvetica neue" , "helvetica" , "helvetica" , "arial" , sans-serif; font-size: small;"><a href="https://github.com/toxicFork/react-three-renderer">render into three.js with react</a></span></div>
</div>
<div style="font-weight: normal;">
<span style="font-size: small;"><a href="https://www.youtube.com/watch?v=PN0uwzgPe3c">Guide on making a simple game</a> </span></div>
<div style="font-weight: normal;">
<span style="font-size: small;">render a scene with a camera and a mesh. camera is like the view source. each mesh has a genomeyry aND A MATERIAL.</span></div>
<div style="font-weight: normal;">
<span style="font-size: small;">EVERYTHING IN THE SCENE IS THEN PASSED TO THE RENDEREER AND THIS WILL PROJECT ALL 3D TO A 2D IMAGE FOR IEWING. </span></div>
<div style="font-weight: normal;">
<span style="font-size: small;"><br /></span></div>
<div style="font-weight: normal;">
<span style="font-size: small;">has examples ... (webgl)</span></div>
<div style="font-weight: normal;">
<span style="font-size: small;"><br /></span></div>
<div style="font-weight: normal;">
<span style="font-size: small;">May need to run a local server.</span></div>
<div style="font-size: medium; font-weight: normal;">
<div style="font-size: medium; font-weight: normal;">
<span style="font-size: small;"><br /></span></div>
<div style="font-size: medium; font-weight: normal;">
<span style="font-size: small; font-weight: normal;">Blender with three.js plugin for editing 3d models </span><br />
<span style="font-weight: normal;"><br /></span>
<span style="font-weight: normal;">https://youtu.be/HwkGTYRopYg?t=349</span><br />
<div style="font-size: medium; font-weight: normal;">
<br />
<a href="http://helloenjoy.com/2013/from-unity-to-three-js/">from unity to three.js</a><br />
<br /></div>
</div>
<div style="font-size: medium; font-weight: normal;">
<div style="font-size: medium; font-weight: normal;">
20 three.js examples</div>
<div style="font-size: medium; font-weight: normal;">
<br /></div>
<div style="font-size: medium; font-weight: normal;">
<a href="http://www.sitepoint.com/three-js-babylon-js-comparison-webgl-frameworks/">Babylon vs three.js -- with good example of setting up</a></div>
<div style="font-size: medium; font-weight: normal;">
<a href="https://www.youtube.com/watch?v=Yg59tfX9-zs">three tutorial</a></div>
<div style="font-size: medium; font-weight: normal;">
<br /></div>
<span style="font-weight: normal;"><a href="https://msdn.microsoft.com/en-us/library/dn479430(v=vs.85).aspx">msdn Basic 3D graphics using Three.js</a></span></div>
</div>
</h3>
<h3>
<div style="font-size: medium; font-weight: normal;">
<div style="font-size: medium; font-weight: normal;">
<br /></div>
</div>
</h3>
<h2 style="font-size: medium; font-weight: normal;">
<ul style="font-size: 24px;">
<li><u>Node.Js</u></li>
</ul>
</h2>
<h3>
<div style="font-size: medium; font-weight: normal;">
<div style="font-size: medium; font-weight: normal;">
<span style="font-weight: normal;"><span style="font-size: small;">When building a website, code willbe developed that will run on the server to read and write to the database, to generate web pages and respond to other client requests (like expanding text box instead of loading a new page etc). Node.js allows use of Javascript to do this, by loading the JS code on a server & executing it. (AKA "server side")<br /><br />"Client side" javascript (older but still common) is what is delivered to the browser FROM the server, as textual code, and is then executed by the CLIENT'S browser. MAny website have client JS running and its benefit is it allows dynamic web pages.</span></span></div>
</div>
<div style="font-size: medium; font-weight: normal;">
<span style="font-weight: normal;"><span style="font-size: small;"><br /></span></span></div>
<div style="font-size: medium; font-weight: normal;">
<span style="font-size: small; font-weight: normal;">Client side JS frameworks like EmberJS or AngularJS are being used to run entire applications </span><span style="font-size: small;">completely on the client's browser. </span><span style="font-size: small; font-weight: normal;">The is done by using a web server (usually within Node.js) to <i>statically </i>serve the front end application content (i.e. the HTML, JS, etc...) and only using Node as a sort of REST API to be called for external information such as database calls and the like.</span></div>
<div style="font-size: medium; font-weight: normal;">
<span style="font-weight: normal;"><span style="font-size: small;"><br /></span></span></div>
<div style="font-size: medium; font-weight: normal;">
<span style="font-size: small;"><span style="font-weight: normal;">An advantage to this can be certain actions will not require a full reload of the page (e.g liking a post on facebook, or expanding a comment section etc) and </span></span><span style="font-size: small; font-weight: normal;">the application can update it's various components dynamically, only getting what it needs when it needs it. </span></div>
<div style="font-size: medium; font-weight: normal;">
<span style="font-size: small; font-weight: normal;"><br /></span></div>
<div style="font-size: medium; font-weight: normal;">
<span style="font-size: small; font-weight: normal;">This can mean the Node.js Server does not need to </span><span style="font-size: small; font-weight: normal;">preprocess templates into HTML code every time the user wants to do something non trivial. Server/client configuration becomes more flexible since communication between the client/server are only HTTP requests & responses.</span></div>
<div style="font-size: medium; font-weight: normal;">
<span style="font-weight: normal;"><span style="font-size: small;"><br /></span></span></div>
<div style="font-size: medium; font-weight: normal;">
<span style="font-weight: normal;"><span style="font-size: small;">Javascript via node.js is rising in popularity as a server side language. Alternatives being PHP, Ruby on Rails, Java, Go and Python. Node.js allows you to run the same language on both client and server, but this doesn't always equate to a huge advantage as conversion to text/binary data is still required when passing things around. <br /><br />Note: Anything that be can done in node.js can be done in these other languages and server-side frameworks. Using Python doesn't prevent doing anything that could be done in node.js.</span></span></div>
</h3>
<h2>
<ul>
<li><u>Angular </u></li>
</ul>
<div>
</div>
</h2>
<h3>
<span style="font-size: small; font-weight: normal;">(1 vs version 2) - front end framework <span style="color: #333333; font-family: "georgia" , "times" , "times new roman" , serif; line-height: 16.8px;">static and requires some kind of back-end or API.</span> (think: MEAN stack: Mongo, Express, Angular, Node)</span></h3>
inlining HTML is "ugly" and confusing compared to React - instead, must group controller through an ng template (<script type = "text/ng-template" id ="comment-box.htm">) -<br />
<br />
..</head> <body> <h1> Hello<h1> <div><br />
bn:comment-box url="/comments.json" poll-interval="2000"> </div><br />
<script type="text/javascript"><br />
<i> ---// to manage the comment box // --</i><br />
angular.module ("Tutorial").directive("bnCommentBox", function(){<br />
---// return direcive configuration object// --<br />
return({ controller: Controller, scope:{ url:"@", pollInterval: "@"}. templateURL: });<br />
<i> ---// to manage the comment box view-model // --</i><br />
funcntion Controller ($scope, $http) {<br />
$scope.comments = []; <i>---// collection comments to render// --</i><br />
<i>setInterval (loadRemoteData, $scope.pollInterval); </i><i>---// poll URL for new content// --</i><br />
<i>loadREmoteData():</i><br />
<i><br /></i>
Philosopy to only render when necessary means state must be managed more implicity;<br />
<div>
<br /></div>
<br />
Very popular, flexible, lot of eatures, 800 3rd party modules, big community (backed by google)<br />
<br />
2 way data binding (<br />
<blockquote class="tr_bq">
<span style="color: #3a4145; font-family: "noto serif" , serif; line-height: 34px;">The problem with Angular is even though it simply adds a layer over the top of traditional HTML, you have to learn its abstractions; directives, controllers, services, factories and the way it expects things to be done. Then you need to understand how to do things “the Angular way”, how the $digest cycle works, scoping and issues with nested scoping, communicating between components and other various aspects of Angular that add to the learning curve. - <a href="http://ilikekillnerds.com/2015/01/aurelia-vs-angularjs-round-one-fight/">source</a></span></blockquote>
<span style="color: #333333; font-family: "georgia" , "times" , "times new roman" , serif; line-height: 16.8px;">There are basically five pillars of AngularJS:</span><br />
<br />
<ul style="color: #333333; font-family: georgia, times, 'times new roman', serif; line-height: 16.8px; margin: 0px 2em 1em 0px; padding: 0px;">
<li style="left: 2em; margin: 0px 0px 0.5em; padding: 0px; position: relative;">Directives</li>
<ul>
<li style="left: 2em; margin: 0px 0px 0.5em; padding: 0px; position: relative;"><span style="line-height: 16.8px;">The idea behind directives is that you're able to create your own HTML elements with custom functionality. Think about how we write HTML pages: we use different tags to represent different behaviors: `<a>` tags for links, `<p>` tags for paragraphs. </span><br style="line-height: 16.8px;" /><br style="line-height: 16.8px;" /><span style="line-height: 16.8px;">If we are using HTML5 we might use the new `<audio>` tags for audio or `<video>` tag for a video player.</span><br style="line-height: 16.8px;" /><br style="line-height: 16.8px;" /><span style="line-height: 16.8px;">But what if we want to write our own custom tag with our own custom functionality. (Say, a `<weather>` tag or a `<map>` tag.) Then we'd use directives! </span></li>
<li style="left: 2em; margin: 0px 0px 0.5em; padding: 0px; position: relative;"><span style="line-height: 16.8px;"><span style="line-height: 16.8px;">more about the details of writing directives, see </span><span class="qlink_container" style="line-height: 16.8px;"><a class="external_link" data-tooltip="attached" href="http://www.ng-newsletter.com/posts/directives.html" rel="noreferrer nofollow" style="background-attachment: initial; background-clip: initial; background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xmlns%3Asketch%3D%22http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%2Fns%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%203.5.2%20(25235)%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eexternal_link%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20sketch%3Atype%3D%22MSPage%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22external_link%22%20sketch%3Atype%3D%22MSLayerGroup%22%20fill%3D%22%23ccc%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M10%2C8%20C9.447%2C8%209%2C8.448%209%2C9%20L9%2C12%20L2%2C12%20L2%2C5%20L5%2C5%20C5.553%2C5%206%2C4.552%206%2C4%20C6%2C3.448%205.553%2C3%205%2C3%20L1%2C3%20C0.447%2C3%200%2C3.448%200%2C4%20L0%2C13%20C0%2C13.552%200.447%2C14%201%2C14%20L10%2C14%20C10.553%2C14%2011%2C13.552%2011%2C13%20L11%2C9%20C11%2C8.448%2010.553%2C8%2010%2C8%20L10%2C8%20Z%22%20id%3D%22Shape%22%20sketch%3Atype%3D%22MSShapeGroup%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M13%2C0%20L8%2C0%20C7.447%2C0%207%2C0.448%207%2C1%20C7%2C1.552%207.447%2C2%208%2C2%20L10.586%2C2%20L4.293%2C8.293%20C3.902%2C8.684%203.902%2C9.316%204.293%2C9.707%20C4.488%2C9.902%204.744%2C10%205%2C10%20C5.256%2C10%205.512%2C9.902%205.707%2C9.707%20L12%2C3.414%20L12%2C6%20C12%2C6.552%2012.447%2C7%2013%2C7%20C13.553%2C7%2014%2C6.552%2014%2C6%20L14%2C1%20C14%2C0.448%2013.553%2C0%2013%2C0%20L13%2C0%20Z%22%20id%3D%22Shape%22%20sketch%3Atype%3D%22MSShapeGroup%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E"); background-origin: initial; background-position: 100% 0.3em; background-repeat: no-repeat; background-size: 10.5px; color: #2b6dad; padding-right: 15px; text-decoration: none;" target="_blank">this post about directives by ng-newsletter</a></span><span style="line-height: 16.8px;">.</span></span></li>
</ul>
<li style="left: 2em; margin: 0px 0px 0.5em; padding: 0px; position: relative;">Controllers</li>
<ul>
<li style="left: 2em; margin: 0px 0px 0.5em; padding: 0px; position: relative;"><span style="line-height: 16.8px;">Angular controllers are used to organize functionally across a group of DOM elements. (When I say, "DOM elements", I just mean a group of HTML tags). </span><br style="line-height: 16.8px;" /><br style="line-height: 16.8px;" /><span style="line-height: 16.8px;">The idea is that we can organize our functionality into modules of code and it helps contain functionality in one place. This helps keep a project maintainable as it grows. </span></li>
<li style="left: 2em; margin: 0px 0px 0.5em; padding: 0px; position: relative;"><span class="qlink_container" style="line-height: 16.8px;"><a class="external_link" data-tooltip="attached" href="https://egghead.io/lessons/angularjs-controllers" rel="noreferrer nofollow" style="background-attachment: initial; background-clip: initial; background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xmlns%3Asketch%3D%22http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%2Fns%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%203.5.2%20(25235)%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eexternal_link%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20sketch%3Atype%3D%22MSPage%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22external_link%22%20sketch%3Atype%3D%22MSLayerGroup%22%20fill%3D%22%23ccc%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M10%2C8%20C9.447%2C8%209%2C8.448%209%2C9%20L9%2C12%20L2%2C12%20L2%2C5%20L5%2C5%20C5.553%2C5%206%2C4.552%206%2C4%20C6%2C3.448%205.553%2C3%205%2C3%20L1%2C3%20C0.447%2C3%200%2C3.448%200%2C4%20L0%2C13%20C0%2C13.552%200.447%2C14%201%2C14%20L10%2C14%20C10.553%2C14%2011%2C13.552%2011%2C13%20L11%2C9%20C11%2C8.448%2010.553%2C8%2010%2C8%20L10%2C8%20Z%22%20id%3D%22Shape%22%20sketch%3Atype%3D%22MSShapeGroup%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M13%2C0%20L8%2C0%20C7.447%2C0%207%2C0.448%207%2C1%20C7%2C1.552%207.447%2C2%208%2C2%20L10.586%2C2%20L4.293%2C8.293%20C3.902%2C8.684%203.902%2C9.316%204.293%2C9.707%20C4.488%2C9.902%204.744%2C10%205%2C10%20C5.256%2C10%205.512%2C9.902%205.707%2C9.707%20L12%2C3.414%20L12%2C6%20C12%2C6.552%2012.447%2C7%2013%2C7%20C13.553%2C7%2014%2C6.552%2014%2C6%20L14%2C1%20C14%2C0.448%2013.553%2C0%2013%2C0%20L13%2C0%20Z%22%20id%3D%22Shape%22%20sketch%3Atype%3D%22MSShapeGroup%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E"); background-origin: initial; background-position: 100% 0.3em; background-repeat: no-repeat; background-size: 10.5px; color: #2b6dad; padding-right: 15px; text-decoration: none;" target="_blank">video on AngularJS controllers</a></span><span style="line-height: 16.8px;">.</span></li>
</ul>
<li style="left: 2em; margin: 0px 0px 0.5em; padding: 0px; position: relative;">Scopes</li>
<ul>
<li style="left: 2em; margin: 0px 0px 0.5em; padding: 0px; position: relative;"><span style="line-height: 16.8px;">AngularJS uses scopes to communicate between components - especially between javascript (in controllers) and our HTML (our "view"). Scopes are the glue between our code.</span></li>
<li style="left: 2em; margin: 0px 0px 0.5em; padding: 0px; position: relative;"><span style="line-height: 16.8px;">Code examples, part 2 of </span><span class="qlink_container" style="line-height: 16.8px;"><a class="external_link" href="http://www.ng-newsletter.com/posts/beginner2expert-scopes.html" rel="noreferrer nofollow" style="background-attachment: initial; background-clip: initial; background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xmlns%3Asketch%3D%22http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%2Fns%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%203.5.2%20(25235)%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eexternal_link%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20sketch%3Atype%3D%22MSPage%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22external_link%22%20sketch%3Atype%3D%22MSLayerGroup%22%20fill%3D%22%23ccc%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M10%2C8%20C9.447%2C8%209%2C8.448%209%2C9%20L9%2C12%20L2%2C12%20L2%2C5%20L5%2C5%20C5.553%2C5%206%2C4.552%206%2C4%20C6%2C3.448%205.553%2C3%205%2C3%20L1%2C3%20C0.447%2C3%200%2C3.448%200%2C4%20L0%2C13%20C0%2C13.552%200.447%2C14%201%2C14%20L10%2C14%20C10.553%2C14%2011%2C13.552%2011%2C13%20L11%2C9%20C11%2C8.448%2010.553%2C8%2010%2C8%20L10%2C8%20Z%22%20id%3D%22Shape%22%20sketch%3Atype%3D%22MSShapeGroup%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M13%2C0%20L8%2C0%20C7.447%2C0%207%2C0.448%207%2C1%20C7%2C1.552%207.447%2C2%208%2C2%20L10.586%2C2%20L4.293%2C8.293%20C3.902%2C8.684%203.902%2C9.316%204.293%2C9.707%20C4.488%2C9.902%204.744%2C10%205%2C10%20C5.256%2C10%205.512%2C9.902%205.707%2C9.707%20L12%2C3.414%20L12%2C6%20C12%2C6.552%2012.447%2C7%2013%2C7%20C13.553%2C7%2014%2C6.552%2014%2C6%20L14%2C1%20C14%2C0.448%2013.553%2C0%2013%2C0%20L13%2C0%20Z%22%20id%3D%22Shape%22%20sketch%3Atype%3D%22MSShapeGroup%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E"); background-origin: initial; background-position: 100% 0.3em; background-repeat: no-repeat; background-size: 10.5px; color: #2b6dad; padding-right: 15px; text-decoration: none;" target="_blank">"AngularJS beginner to expert series"</a></span><span style="line-height: 16.8px;"> </span></li>
</ul>
<li style="left: 2em; margin: 0px 0px 0.5em; padding: 0px; position: relative;">Services</li>
<ul>
<li style="left: 2em; margin: 0px 0px 0.5em; padding: 0px; position: relative;"><span style="line-height: 16.8px;">Sometimes we want to share code across different controllers in our code. In Angular we use </span><i style="line-height: 16.8px;">services</i><span style="line-height: 16.8px;"> to perform this functionality. Services are singleton objects that perform tasks that are common to several areas of the system.</span></li>
<li style="left: 2em; margin: 0px 0px 0.5em; padding: 0px; position: relative;"><span style="line-height: 16.8px;">AngularJS </span><span class="qlink_container" style="line-height: 16.8px;"><a class="external_link" data-tooltip="attached" href="http://docs.angularjs.org/guide/dev_guide.services.understanding_services" rel="noreferrer nofollow" style="background-attachment: initial; background-clip: initial; background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xmlns%3Asketch%3D%22http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%2Fns%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%203.5.2%20(25235)%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eexternal_link%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20sketch%3Atype%3D%22MSPage%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22external_link%22%20sketch%3Atype%3D%22MSLayerGroup%22%20fill%3D%22%23ccc%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M10%2C8%20C9.447%2C8%209%2C8.448%209%2C9%20L9%2C12%20L2%2C12%20L2%2C5%20L5%2C5%20C5.553%2C5%206%2C4.552%206%2C4%20C6%2C3.448%205.553%2C3%205%2C3%20L1%2C3%20C0.447%2C3%200%2C3.448%200%2C4%20L0%2C13%20C0%2C13.552%200.447%2C14%201%2C14%20L10%2C14%20C10.553%2C14%2011%2C13.552%2011%2C13%20L11%2C9%20C11%2C8.448%2010.553%2C8%2010%2C8%20L10%2C8%20Z%22%20id%3D%22Shape%22%20sketch%3Atype%3D%22MSShapeGroup%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M13%2C0%20L8%2C0%20C7.447%2C0%207%2C0.448%207%2C1%20C7%2C1.552%207.447%2C2%208%2C2%20L10.586%2C2%20L4.293%2C8.293%20C3.902%2C8.684%203.902%2C9.316%204.293%2C9.707%20C4.488%2C9.902%204.744%2C10%205%2C10%20C5.256%2C10%205.512%2C9.902%205.707%2C9.707%20L12%2C3.414%20L12%2C6%20C12%2C6.552%2012.447%2C7%2013%2C7%20C13.553%2C7%2014%2C6.552%2014%2C6%20L14%2C1%20C14%2C0.448%2013.553%2C0%2013%2C0%20L13%2C0%20Z%22%20id%3D%22Shape%22%20sketch%3Atype%3D%22MSShapeGroup%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E"); background-origin: initial; background-position: 100% 0.3em; background-repeat: no-repeat; background-size: 10.5px; color: #2b6dad; padding-right: 15px; text-decoration: none;" target="_blank">guide on AngularJS services</a></span><span style="line-height: 16.8px;">.</span></li>
</ul>
<li style="left: 2em; margin: 0px; padding: 0px; position: relative;">Dependency Injection</li>
<ul>
<li style="left: 2em; margin: 0px; padding: 0px; position: relative;"><span style="line-height: 16.8px;">How a particular part of the code gets it's dependencies. Dependency Injection (DI) is analogous to `require` in node.js or ruby or `import` in Java. The idea is we're just declaring what dependencies we need. </span><span style="line-height: 16.8px;">AngularJS makes this really easy.</span></li>
</ul>
</ul>
3 learning sources:<br />
<span style="color: #333333; font-family: "georgia" , "times" , "times new roman" , serif; line-height: 16.8px;">1. ng-newsletter's </span><span class="qlink_container" style="color: #333333; font-family: "georgia" , "times" , "times new roman" , serif; line-height: 16.8px;"><a class="external_link" data-tooltip="attached" href="http://www.ng-newsletter.com/posts/how-to-learn-angular.html" rel="noreferrer nofollow" style="background-attachment: initial; background-clip: initial; background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xmlns%3Asketch%3D%22http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%2Fns%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%203.5.2%20(25235)%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eexternal_link%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20sketch%3Atype%3D%22MSPage%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22external_link%22%20sketch%3Atype%3D%22MSLayerGroup%22%20fill%3D%22%23ccc%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M10%2C8%20C9.447%2C8%209%2C8.448%209%2C9%20L9%2C12%20L2%2C12%20L2%2C5%20L5%2C5%20C5.553%2C5%206%2C4.552%206%2C4%20C6%2C3.448%205.553%2C3%205%2C3%20L1%2C3%20C0.447%2C3%200%2C3.448%200%2C4%20L0%2C13%20C0%2C13.552%200.447%2C14%201%2C14%20L10%2C14%20C10.553%2C14%2011%2C13.552%2011%2C13%20L11%2C9%20C11%2C8.448%2010.553%2C8%2010%2C8%20L10%2C8%20Z%22%20id%3D%22Shape%22%20sketch%3Atype%3D%22MSShapeGroup%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M13%2C0%20L8%2C0%20C7.447%2C0%207%2C0.448%207%2C1%20C7%2C1.552%207.447%2C2%208%2C2%20L10.586%2C2%20L4.293%2C8.293%20C3.902%2C8.684%203.902%2C9.316%204.293%2C9.707%20C4.488%2C9.902%204.744%2C10%205%2C10%20C5.256%2C10%205.512%2C9.902%205.707%2C9.707%20L12%2C3.414%20L12%2C6%20C12%2C6.552%2012.447%2C7%2013%2C7%20C13.553%2C7%2014%2C6.552%2014%2C6%20L14%2C1%20C14%2C0.448%2013.553%2C0%2013%2C0%20L13%2C0%20Z%22%20id%3D%22Shape%22%20sketch%3Atype%3D%22MSShapeGroup%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E"); background-origin: initial; background-position: 100% 0.3em; background-repeat: no-repeat; background-size: 10.5px; color: #2b6dad; padding-right: 15px; text-decoration: none;" target="_blank">post on How to Learn AngularJS</a></span><br />
<span style="color: #333333; font-family: "georgia" , "times" , "times new roman" , serif; line-height: 16.8px;">2. </span><span class="qlink_container" style="color: #333333; font-family: "georgia" , "times" , "times new roman" , serif; line-height: 16.8px;"><a class="external_link" data-tooltip="attached" href="http://www.ng-newsletter.com/posts/beginner2expert-how_to_start.html" rel="noreferrer nofollow" style="background-attachment: initial; background-clip: initial; background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xmlns%3Asketch%3D%22http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%2Fns%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%203.5.2%20(25235)%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eexternal_link%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20sketch%3Atype%3D%22MSPage%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22external_link%22%20sketch%3Atype%3D%22MSLayerGroup%22%20fill%3D%22%23ccc%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M10%2C8%20C9.447%2C8%209%2C8.448%209%2C9%20L9%2C12%20L2%2C12%20L2%2C5%20L5%2C5%20C5.553%2C5%206%2C4.552%206%2C4%20C6%2C3.448%205.553%2C3%205%2C3%20L1%2C3%20C0.447%2C3%200%2C3.448%200%2C4%20L0%2C13%20C0%2C13.552%200.447%2C14%201%2C14%20L10%2C14%20C10.553%2C14%2011%2C13.552%2011%2C13%20L11%2C9%20C11%2C8.448%2010.553%2C8%2010%2C8%20L10%2C8%20Z%22%20id%3D%22Shape%22%20sketch%3Atype%3D%22MSShapeGroup%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M13%2C0%20L8%2C0%20C7.447%2C0%207%2C0.448%207%2C1%20C7%2C1.552%207.447%2C2%208%2C2%20L10.586%2C2%20L4.293%2C8.293%20C3.902%2C8.684%203.902%2C9.316%204.293%2C9.707%20C4.488%2C9.902%204.744%2C10%205%2C10%20C5.256%2C10%205.512%2C9.902%205.707%2C9.707%20L12%2C3.414%20L12%2C6%20C12%2C6.552%2012.447%2C7%2013%2C7%20C13.553%2C7%2014%2C6.552%2014%2C6%20L14%2C1%20C14%2C0.448%2013.553%2C0%2013%2C0%20L13%2C0%20Z%22%20id%3D%22Shape%22%20sketch%3Atype%3D%22MSShapeGroup%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E"); background-origin: initial; background-position: 100% 0.3em; background-repeat: no-repeat; background-size: 10.5px; color: #2b6dad; padding-right: 15px; text-decoration: none;" target="_blank">ng-newsletter's Beginner to expert 7 step series</a></span><span style="color: #333333; font-family: "georgia" , "times" , "times new roman" , serif; line-height: 16.8px;"> </span><br />
<span style="color: #333333; font-family: "georgia" , "times" , "times new roman" , serif; line-height: 16.8px;">3. </span><span class="qlink_container" style="color: #333333; font-family: "georgia" , "times" , "times new roman" , serif; line-height: 16.8px; margin-bottom: 0px;"><a class="external_link tooltip_parent" data-tooltip="attached" href="https://egghead.io/" rel="noreferrer nofollow" style="background-attachment: initial; background-clip: initial; background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xmlns%3Asketch%3D%22http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%2Fns%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%203.5.2%20(25235)%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3Eexternal_link%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20sketch%3Atype%3D%22MSPage%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22external_link%22%20sketch%3Atype%3D%22MSLayerGroup%22%20fill%3D%22%23ccc%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M10%2C8%20C9.447%2C8%209%2C8.448%209%2C9%20L9%2C12%20L2%2C12%20L2%2C5%20L5%2C5%20C5.553%2C5%206%2C4.552%206%2C4%20C6%2C3.448%205.553%2C3%205%2C3%20L1%2C3%20C0.447%2C3%200%2C3.448%200%2C4%20L0%2C13%20C0%2C13.552%200.447%2C14%201%2C14%20L10%2C14%20C10.553%2C14%2011%2C13.552%2011%2C13%20L11%2C9%20C11%2C8.448%2010.553%2C8%2010%2C8%20L10%2C8%20Z%22%20id%3D%22Shape%22%20sketch%3Atype%3D%22MSShapeGroup%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M13%2C0%20L8%2C0%20C7.447%2C0%207%2C0.448%207%2C1%20C7%2C1.552%207.447%2C2%208%2C2%20L10.586%2C2%20L4.293%2C8.293%20C3.902%2C8.684%203.902%2C9.316%204.293%2C9.707%20C4.488%2C9.902%204.744%2C10%205%2C10%20C5.256%2C10%205.512%2C9.902%205.707%2C9.707%20L12%2C3.414%20L12%2C6%20C12%2C6.552%2012.447%2C7%2013%2C7%20C13.553%2C7%2014%2C6.552%2014%2C6%20L14%2C1%20C14%2C0.448%2013.553%2C0%2013%2C0%20L13%2C0%20Z%22%20id%3D%22Shape%22%20sketch%3Atype%3D%22MSShapeGroup%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E"); background-origin: initial; background-position: 100% 0.3em; background-repeat: no-repeat; background-size: 10.5px; color: #2b6dad; outline: 0px; padding-right: 15px; position: relative;" target="_blank">egghead.io - Learn AngularJS with Tutorial Videos & Training</a></span><br />
4. <a href="https://www.youtube.com/watch?v=WuiHuZq_cg4">Building a checklist</a><br />
<h2>
<b><u><br /></u></b></h2>
<h2>
<ul>
<li><b><u>React</u></b></li>
</ul>
</h2>
<ul>
<li>Basiaclly just the View in MVC, <span style="color: #333333; font-family: "georgia" , "times" , "times new roman" , serif; line-height: 16.8px;">to work with remote data, will have to look into additional frameworks like Flux to support your app. But react shares a lot of similarities to other framworks, making future switches easier.</span></li>
<li><span style="color: #3a4145; font-family: "noto" serif , serif;"><span style="line-height: 34px;">Would</span></span><span style="color: #3a4145; font-family: "noto serif" , serif; line-height: 34px;"> require a router component</span></li>
<li><span style="color: #3a4145; font-family: "noto serif" , serif; line-height: 34px;">can easily use React.js within Aurelia</span></li>
<li><span style="color: #3a4145; font-family: "noto serif" , serif; line-height: 34px;">good for performance</span></li>
</ul>
<br />
<h4>
can inline html through JSX transpiling e.g.... </h4>
render: function() {<br />
return (<br />
<div className = "commentBox"> <h1>Comments</h1> <br />
<CommentList comments = {this.state.data}/><br />
<CommentForm onCommentSubmit = {this.handleCommentSubmit}/><br />
<div><br />
<h4>
<br />React can render views on the server</h4>
<ul>
<li>will start with an intitial state to define immutable state of the component... </li>
</ul>
<blockquote class="tr_bq">
var CommentBox = React.createClass({<br />
get initialState:function(){<br />
return({data:[] }); }, </blockquote>
<ul>
<li>Then public methods like handling compnenet life cycle events:</li>
<ul>
<li>componentDidMount: function() {</li>
<li>this.loadCommentsFromServer();</li>
<li>setInterval(this.loadCommentsFromServer.bind(this), this.props.pollInterval); }, </li>
</ul>
<li>Or handling interactions like comment submission:</li>
<ul>
<li>handleCommentSubmit: function (comment){</li>
<li>var self = this;</li>
<li>this.setState({ data: this.state.data.concat ( comment)}); </li>
</ul>
</ul>
<br />
Philosopy to always parsing markup, always rendering.. but compenent lifecypcle methods can combat this expensive "always" rendering act.<br />
<br />
get your data from the view, check to see if it's been filled out - pass it back up to the form and then reset the view.<br />
<h4>
both can pole for data at set intervals, but web sockets would be less network intensive</h4>
<div>
How react is "changing the game"</div>
<div>
<blockquote class="tr_bq">
<ul>
<li><span style="color: #333333; font-family: "georgia" , "times" , "times new roman" , serif; line-height: 16.8px;">- Instead of MVC and data binding, a front-end system should have a one-way data flow. Your views should never change the models directly, they always read from the models though, and for writing, they trigger actions that get eventually dispatched to the models (The models are referred to as Stores in this flow). React fits perfectly in the way it "reacts" to data changes in the stores (since it's always listening to that), and re-render the views efficiently (thanks to the Virtual DOM)</span></li>
</ul>
<ul>
<li><span style="color: #333333; font-family: "georgia" , "times" , "times new roman" , serif; line-height: 16.8px;">- Instead of REST, and having the logic of what data to expose on the server-side, then managing different end-points for different needs (for example, one end-point to expose top posts, one to expose a post, and one to expose a post with comments included), let the client asks exactly what they want (using a graph), have the server parses that, and respond with exactly what the client needs (no over-fetching or under-fetching). GraphQL is a great fit for that graph with which the client can ask the server.</span></li>
</ul>
<ul>
<li><span style="color: #333333; font-family: "georgia" , "times" , "times new roman" , serif; line-height: 16.8px;">- Instead of the standard recommended separation of data and views, and since only the view knows exactly which data elements they need to render, don't separate these 2 at all, and have the data requirement expressed in the view component itself, there are huge benefits to this. RelayJS is written to take care of managing this new idea.</span></li>
</ul>
</blockquote>
</div>
--------<br />
<h2>
<ul>
<li>d3</li>
</ul>
</h2>
<b style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 16px; line-height: 17.4545px;">D3</b><span style="background-color: white; color: #222222; font-family: "arial" , sans-serif; font-size: 16px; line-height: 17.4545px;">.</span><b style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 16px; line-height: 17.4545px;">js</b><span style="background-color: white; color: #222222; font-family: "arial" , sans-serif; font-size: 16px; line-height: 17.4545px;"> (or just </span><b style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 16px; line-height: 17.4545px;">D3</b><span style="background-color: white; color: #222222; font-family: "arial" , sans-serif; font-size: 16px; line-height: 17.4545px;"> for Data-Driven Documents) is a </span><b style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 16px; line-height: 17.4545px;">JavaScript</b><span style="background-color: white; color: #222222; font-family: "arial" , sans-serif; font-size: 16px; line-height: 17.4545px;"> library for producing dynamic, interactive data visualizations in web browsers. It makes use of the widely implemented SVG, HTML5, and CSS standards. It is the successor to the earlier Protovis framework.</span><br />
<h2>
<ul>
<li><br /></li>
</ul>
</h2>
<div>
<h2>
<ul>
<li><u>Babylon.js</u></li>
</ul>
</h2>
</div>
<div>
<span style="color: #4a4a4a; font-family: "roboto" , "helvetica neue" , "helvetica" , "helvetica" , "arial" , sans-serif; font-size: 16px; line-height: 28.8px;">a 3d game engine based on WebGL and JavaScript f</span><span style="background-color: white; color: #4a4a4a; font-family: "roboto" , "helvetica neue" , "helvetica" , "helvetica" , "arial" , sans-serif; font-size: 16px; line-height: 28.8px;">or building game that run on browsers. High-quality games complete with physics, audio and particle systems among other things. A more game oriented alternative to three.js</span></div>
<h2>
<ul>
<li><u>Ember</u></li>
</ul>
</h2>
<div>
<u>complete framework</u><b><u> </u></b></div>
<div>
Seems to be declining.</div>
<div>
good with complex nested routes and templates within a page</div>
<div>
<br /></div>
<h2>
<ul>
<li><u>Backbone</u></li>
</ul>
</h2>
<div>
<u>toolkit framework - may reply on other tools </u></div>
<div>
Good for building own framework, defininng own template or using jQuery-like event binding.</div>
<div>
But has a steep learning curve and is for advanced developers</div>
<div>
<br /></div>
<div>
<h2>
<ul>
<li><u>Knockout</u></li>
</ul>
</h2>
<h3>
<u>toolkit framework - may reply on other tools</u></h3>
</div>
<div>
has all basic view rendering features needed for smallscale app. Good iuf you have to develop your own framework</div>
<div>
Expert in data-bindings, easy to setup and work on. </div>
<div>
VIEW> 2 way binding > VIEW MODEL < JS Remoting < MODEL</div>
<h2>
<ul>
<li><u>Others</u></li>
</ul>
</h2>
<div>
<b>Polymer -<br />Ionic - </b><br />
<b>Can </b>- New, so lacks popularity and support. Easy to use and flexible<br />
<h2>
<b>----------------------------------------------------------</b></h2>
<h2>
<b><span style="font-size: small;">Mocha& Chai for testing</span></b></h2>
</div>
<div>
<div style="background-color: white; box-sizing: border-box; color: #4a4a4a; direction: ltr; font-family: roboto, 'helvetica neue', helvetica, helvetica, arial, sans-serif; line-height: 28.8px; margin-bottom: 32px; padding: 0px;">
<span style="line-height: 28.8px;">Mocha is a JavaScript test framework that makes it easy to test the async code in your node module or browser app. Mocha tests can run in series and have the added quality of tracing exceptions to the correct test cases.</span></div>
<div style="background-color: white; box-sizing: border-box; color: #4a4a4a; direction: ltr; font-family: roboto, 'helvetica neue', helvetica, helvetica, arial, sans-serif; line-height: 28.8px; margin-bottom: 32px; padding: 0px;">
Chai is a behavior-driven development/test-driven development assertion library that can be paired with Mocha. It makes it simple to express what you are testing in a readable style.</div>
</div>
<div>
<h2>
<span style="font-size: small;">
Karma</span></h2>
<div style="background-color: white; box-sizing: border-box; color: #4a4a4a; direction: ltr; font-family: roboto, 'helvetica neue', helvetica, helvetica, arial, sans-serif; line-height: 28.8px; margin-bottom: 32px; padding: 0px;">
Having included Mocha and Chai on this list, it would be incomplete not to include a test runner to run these tests or perhaps to setup continuous integration testing. Karma is a tool designed to help automate running your tests against different browsers. It will help you run your Mocha and Chai tests on all the browsers out there.</div>
<div style="background-color: white; box-sizing: border-box; color: #4a4a4a; direction: ltr; font-family: roboto, 'helvetica neue', helvetica, helvetica, arial, sans-serif; line-height: 28.8px; margin-bottom: 32px; padding: 0px;">
Not every browser runs on every platform but luckily there are a couple of free tools you can use to test other browsers, take a look at <a href="https://dev.windows.com/en-us/microsoft-edge/tools/screenshots/?utm_source=SitePoint&utm_medium=article67&utm_campaign=SitePoint" style="border-bottom-color: rgba(54, 155, 200, 0.298039); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box; color: #369bc8; line-height: inherit; padding: 5px 0px 1px; text-decoration: none; transition: all 0.3s ease; word-wrap: break-word;">Browser Screenshots</a>. If you are running on OS X and want to test Edge or Internet Explorer, you can use this tool for <a href="https://remote.modern.ie/?utm_source=SitePoint&utm_medium=article67&utm_campaign=SitePoint" style="border-bottom-color: rgba(54, 155, 200, 0.298039); border-bottom-style: solid; border-bottom-width: 1px; box-sizing: border-box; color: #369bc8; line-height: inherit; padding: 5px 0px 1px; text-decoration: none; transition: all 0.3s ease; word-wrap: break-word;">free</a>.</div>
</div>
<br />Anonymoushttp://www.blogger.com/profile/06600827240065232487noreply@blogger.com0tag:blogger.com,1999:blog-3506924777379935437.post-42232005704846291032016-03-03T08:06:00.000-08:002016-03-12T03:55:30.458-08:00Firebase<a href="https://www.firebase.com/docs/web/guide/">firebase guide</a><br />
<br />
<a href="https://www.firebase.com/docs/android/quickstart.html">Android quickstart</a><br />
<br />
<a href="https://github.com/firebase/Firebase-Unity">Firebase - unity</a><br />
<br />
<a href="https://www.firebase.com/tutorial/#session/uhlfmwnz0k4">some extra examples of possibilities (on the right)</a><br />
<br />
<a href="http://thejackalofjavascript.com/getting-started-with-firebase/">Getting stated with Firebase</a><br />
<br />
(covers: hosting, real time DB, user authentication)<br />
<br />
<br />
<br />
Realtime database via html add <script> to link to firebase<br />
<span style="border: 0px; color: #63676c; font-family: , "helvetica neue light" , "helvetica neue" , "helvetica" , "arial" , "lucida grande" , sans-serif; font-size: 16px; font-stretch: inherit; font-weight: 600; line-height: 28px; margin: 0px; padding: 0px; vertical-align: baseline;">to access Firebase,create a <em style="-webkit-font-smoothing: antialiased; border: 0px; font-family: inherit; font-stretch: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">reference to the root of firebase url</em>:</span><br />
<span style="-webkit-font-smoothing: antialiased; border: 0px; font-stretch: inherit; font-weight: 600; line-height: 28px; margin: 0px; padding: 0px; vertical-align: baseline;"><span style="color: #63676c; font-family: , "helvetica neue light" , "helvetica neue" , "helvetica" , "arial" , "lucida grande" , sans-serif;">var myDataRef = new Firebase('https://k0xssycfcm6.firebaseio-demo.com/');</span></span><br />
<span style="-webkit-font-smoothing: antialiased; border: 0px; font-stretch: inherit; font-weight: 600; line-height: 28px; margin: 0px; padding: 0px; vertical-align: baseline;"><span style="color: #63676c; font-family: , "helvetica neue light" , "helvetica neue" , "helvetica" , "arial" , "lucida grande" , sans-serif;"><br /></span></span>
<span style="-webkit-font-smoothing: antialiased; border: 0px; font-stretch: inherit; font-weight: 600; line-height: 28px; margin: 0px; padding: 0px; vertical-align: baseline;"><span style="color: #63676c; font-family: , "helvetica neue light" , "helvetica neue" , "helvetica" , "arial" , "lucida grande" , sans-serif;">every piece of data has its onURL, this url can be used to access data from:</span></span><br />
<span style="-webkit-font-smoothing: antialiased; border: 0px; font-stretch: inherit; font-weight: 600; line-height: 28px; margin: 0px; padding: 0px; vertical-align: baseline;"></span><br />
<ul style="-webkit-font-smoothing: antialiased; border: 0px; color: #63676c; font-family: proxima-nova, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 14px; font-stretch: inherit; line-height: 28px; list-style: square; margin: 0px; padding: 0px 0px 0px 40px; vertical-align: baseline;">
<li style="-webkit-font-smoothing: antialiased; border: 0px; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; margin: 0px 0px 15px; padding: 0px; vertical-align: baseline;">any Firebase client library</li>
<li style="-webkit-font-smoothing: antialiased; border: 0px; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; margin: 0px 0px 15px; padding: 0px; vertical-align: baseline;">the firebase <a href="https://www.firebase.com/docs/rest" style="-webkit-font-smoothing: antialiased; border: 0px; color: #0f97f9; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline;" target="_blank">REST API</a></li>
<li style="-webkit-font-smoothing: antialiased; border: 0px; font-family: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; margin: 0px; padding: 0px; vertical-align: baseline;">or by entering it in any browser.</li>
</ul>
<div>
<span style="color: #63676c; font-family: , "helvetica neue light" , "helvetica neue" , "helvetica" , "arial" , "lucida grande" , sans-serif;"><span style="font-size: 14px; line-height: 28px;"><br /></span></span></div>
to set......... myDataRef.<b>set</b>('User ' + name + ' says ' + text);<br />
<div>
to <span style="color: #63676c; font-family: , "helvetica neue light" , "helvetica neue" , "helvetica" , "arial" , "lucida grande" , sans-serif; font-size: 16px; line-height: 28px;">write an object with </span><em style="-webkit-font-smoothing: antialiased; border: 0px; color: #63676c; font-family: proxima-nova, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; font-stretch: inherit; line-height: 28px; margin: 0px; padding: 0px; vertical-align: baseline;">text</em><span style="color: #63676c; font-family: , "helvetica neue light" , "helvetica neue" , "helvetica" , "arial" , "lucida grande" , sans-serif; font-size: 16px; line-height: 28px;"> and </span><em style="-webkit-font-smoothing: antialiased; border: 0px; color: #63676c; font-family: proxima-nova, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; font-stretch: inherit; line-height: 28px; margin: 0px; padding: 0px; vertical-align: baseline;">name</em><span style="color: #63676c; font-family: , "helvetica neue light" , "helvetica neue" , "helvetica" , "arial" , "lucida grande" , sans-serif; font-size: 16px; line-height: 28px;"> properties: ... </span>myDataRef.set({name:name, text:text});</div>
<div>
<span style="color: #63676c; font-family: , "helvetica neue light" , "helvetica neue" , "helvetica" , "arial" , "lucida grande" , sans-serif; font-size: 16px; line-height: 28px;">When objects are written to the database, the structure of the object is mapped to database locations. In this example, when the object </span><em style="-webkit-font-smoothing: antialiased; border: 0px; color: #63676c; font-family: proxima-nova, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; font-stretch: inherit; line-height: 28px; margin: 0px; padding: 0px; vertical-align: baseline;">{name: name, text: text}</em><span style="color: #63676c; font-family: , "helvetica neue light" , "helvetica neue" , "helvetica" , "arial" , "lucida grande" , sans-serif; font-size: 16px; line-height: 28px;"> is set, locations for </span><em style="-webkit-font-smoothing: antialiased; border: 0px; color: #63676c; font-family: proxima-nova, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; font-stretch: inherit; line-height: 28px; margin: 0px; padding: 0px; vertical-align: baseline;">name</em><span style="color: #63676c; font-family: , "helvetica neue light" , "helvetica neue" , "helvetica" , "arial" , "lucida grande" , sans-serif; font-size: 16px; line-height: 28px;"> and </span><em style="-webkit-font-smoothing: antialiased; border: 0px; color: #63676c; font-family: proxima-nova, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; font-stretch: inherit; line-height: 28px; margin: 0px; padding: 0px; vertical-align: baseline;">text</em><span style="color: #63676c; font-family: , "helvetica neue light" , "helvetica neue" , "helvetica" , "arial" , "lucida grande" , sans-serif; font-size: 16px; line-height: 28px;"> are automatically created as children of the location referenced by </span><em style="-webkit-font-smoothing: antialiased; border: 0px; color: #63676c; font-family: proxima-nova, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 16px; font-stretch: inherit; line-height: 28px; margin: 0px; padding: 0px; vertical-align: baseline;">myDataRef</em><span style="color: #63676c; font-family: , "helvetica neue light" , "helvetica neue" , "helvetica" , "arial" , "lucida grande" , sans-serif; font-size: 16px; line-height: 28px;">.</span></div>
<div>
<span style="color: #63676c; font-family: , "helvetica neue light" , "helvetica neue" , "helvetica" , "arial" , "lucida grande" , sans-serif; font-size: 16px; line-height: 28px;">to write lists: m</span>yDataRef.push({name: name, text: text});</div>
<div>
Reading Data:... myDataRef.on('child_added', function(snapshot) { //}</div>
child_added' event notifies of new additions.);<br />
you always read data using callbacks<br />
Using Snapshots: .... var message = snapshot.val();<br />
<div>
displayChatMessage(message.name, message.text);</div>
<div>
<br /></div>
<div>
<br />
<div>
<span style="color: #63676c; font-family: , "helvetica neue light" , "helvetica neue" , "helvetica" , "arial" , "lucida grande" , sans-serif; font-size: 16px; line-height: 28px;"><br /></span>
<span style="color: #63676c; font-family: , "helvetica neue light" , "helvetica neue" , "helvetica" , "arial" , "lucida grande" , sans-serif; font-size: 16px; line-height: 28px;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifZBqPjLJdFqVyfuti9kUyQrWTPkT8c8IJBdjIJJeyjF1kOgJYQ8WjX3PShuXLapooqKy42q_thYhRuIfKcSDE6OZLWKH7qh48774erdoiHzXkZgjHmk6qq735YH1rpt-06nR_9u5yOWa5/s1600/Screenshot+2016-03-11+17.35.41.png" imageanchor="1"><img border="0" height="457" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifZBqPjLJdFqVyfuti9kUyQrWTPkT8c8IJBdjIJJeyjF1kOgJYQ8WjX3PShuXLapooqKy42q_thYhRuIfKcSDE6OZLWKH7qh48774erdoiHzXkZgjHmk6qq735YH1rpt-06nR_9u5yOWa5/s640/Screenshot+2016-03-11+17.35.41.png" width="640" /></a></span><br />
<span style="color: #63676c; font-family: , "helvetica neue light" , "helvetica neue" , "helvetica" , "arial" , "lucida grande" , sans-serif; font-size: 16px; line-height: 28px;"><br /></span>
<span style="color: #63676c; font-family: , "helvetica neue light" , "helvetica neue" , "helvetica" , "arial" , "lucida grande" , sans-serif; font-size: 16px; line-height: 28px;"></span><br />
<h1 itemprop="name" style="background-color: white; border: 0px; color: #222426; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 22px; line-height: 1.3; margin: 0px 0px 0.5em; padding: 0px;">
<a class="question-hyperlink" href="http://stackoverflow.com/questions/29223835/mongodb-vs-firebase" style="border: 0px; color: #222426; cursor: pointer; font-size: 24px; font-weight: normal; line-height: 1.35; margin: 0px 0px 0.5em; padding: 0px; text-decoration: none;">MongoDB vs Firebase</a></h1>
</div>
</div>
<a href="http://thejackalofjavascript.com/re-architecting-a-firebase-app-in-node/">Re-Architecting a Firebase app to work with Node.js and MongoDB</a><br />
<div>
<blockquote class="tr_bq" style="background-color: white; border: 0px; clear: both; color: #222426; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 15px; line-height: 19.5px; margin-bottom: 1em; padding: 0px;">
<ol style="background-color: white; border: 0px; color: #222426; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 15px; line-height: 19.5px; margin: 0px 0px 1em 30px; padding: 0px;">
<li style="border: 0px; margin: 0px 0px 0.5em; padding: 0px; word-wrap: break-word;">Firebase is a real-time engine with backward connectivity. I.e. you might build an app where clients subscribe to events on specific data and server actively informs clients about changes</li>
</ol>
<ol style="background-color: white; border: 0px; color: #222426; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 15px; line-height: 19.5px; margin: 0px 0px 1em 30px; padding: 0px;">
<li style="border: 0px; margin: 0px 0px 0.5em; padding: 0px; word-wrap: break-word;">Data layer is hosted for you. It's a nice kickstarter solution. Including auth management</li>
</ol>
<ol style="background-color: white; border: 0px; color: #222426; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 15px; line-height: 19.5px; margin: 0px 0px 1em 30px; padding: 0px;">
<li style="border: 0px; margin: 0px; padding: 0px; word-wrap: break-word;"><b>Geo-Fire. Realtime geo coordinates solution.</b></li>
</ol>
here is a nice <a href="http://thejackalofjavascript.com/re-architecting-a-firebase-app-in-node/" style="border: 0px; color: #005999; cursor: pointer; margin: 0px; padding: 0px; text-decoration: none;">article</a> how to replace Firebase in your app with Node.js+MongoDb. It shows how much work you would have to do on your own, and explains, IMHO, why a startup (small app) should begin with Firebase (if real-time updates to clients are required) and proceed with MongoDb (in any case self-written solution) if the projects keeps evolving</blockquote>
<br />
<br />
<h1 itemprop="name" style="background-color: white; border: 0px; color: #222426; font-family: arial, 'helvetica neue', helvetica, sans-serif; font-size: 22px; line-height: 1.3; margin: 0px 0px 0.5em; padding: 0px;">
Using Firebase with MEAN:</h1>
</div>
<div>
<div style="background-color: white; border: 0px; clear: both; color: #222426; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 15px; line-height: 19.5px; margin-bottom: 1em; padding: 0px;">
Firebase replaces the MongoDB <b>(M)</b> and can replace Express <b>(E)</b> with its free hosting and ability to act as an <a href="https://github.com/firebase/firebase-queue" rel="nofollow" style="border: 0px; color: #005999; cursor: pointer; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 13px; line-height: 16.9px; margin: 0px; padding: 0px; text-decoration: none;">alternative</a> to the typical RESTful strategy, turning server stacks into "scriptlets"<br />
<br />
<br />
We could potentionally still use <b>Node / Express </b>for a <b>server framework </b>with <b>Angular </b>as client framework, using Firebase just as a data source as opposed to MongoDB.</div>
<div style="background-color: white; border: 0px; clear: both; color: #222426; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 15px; line-height: 19.5px; margin-bottom: 1em; padding: 0px;">
As initial configuration would be different, you would need to remove references to MongoDB /Mongoose, if you were to start with a generator ( like Yeoman / MEAN boilerplate ).</div>
<div style="background-color: white; border: 0px; clear: both; color: #222426; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 15px; line-height: 19.5px; margin-bottom: 1em; padding: 0px;">
<i>This can be seen as a FAN stack (firebase/angular/node.js)</i></div>
<div style="background-color: white; border: 0px; clear: both; color: #222426; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 15px; line-height: 19.5px; margin-bottom: 1em; padding: 0px;">
<br /></div>
<div style="background-color: white; border: 0px; clear: both; color: #222426; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 15px; line-height: 19.5px; margin-bottom: 1em; padding: 0px;">
<br /></div>
</div>
<div>
<br /></div>
Anonymoushttp://www.blogger.com/profile/06600827240065232487noreply@blogger.com0tag:blogger.com,1999:blog-3506924777379935437.post-85949757794730185172016-02-27T04:18:00.003-08:002016-03-05T15:31:02.515-08:00Week 2<b><u>Week 2 Objectives:</u></b><br />
<div>
<br /></div>
<div>
<div>
<b>Find out how unity actually interfaces/integrates with android. Does it:</b></div>
<div>
<ol>
<li>Handle all splash screen, activities & intents etc, all within Unity (in C#) and then package a ready to go APK for android devices?</li>
<li>Does Unity handle the game aspect and pass over a package code base that then must be completed in Android studio for all menus, activity starting etc...</li>
<li>Is there no passing from one to the other at all. I.e do both code bases operate independently and they must interact with each other.</li>
<li>If coding in c# via unity.. to deploy on android will i have to work in Java at some point? At what point?</li>
</ol>
<div>
<b>Once the above is figured out, then determine how this will interact with my intended architecture.</b></div>
</div>
<div>
<ul>
<li>Architecture: App sends requests (json) to hosted database which will be handled by a middleman API. This will allow data persistence and allow cross platform compatibility.</li>
<ul>
<li>Is this feasible with any of the above ways.</li>
<li>How much of this proposed architecture can be completed via Unity?</li>
<li>With my online server, is there a limit to data that can be stored? Limit to data types?</li>
<li>How data persistence will work with this app.</li>
</ul>
</ul>
<div>
<b>Gather a list of apps that might reflect how my app could operate. </b>(then maybe find out how they did what they did) See if android apps of a similar nature exists that were created via unity.</div>
</div>
<div>
<ul>
<li><a href="https://youtu.be/CS8lQ-Zjxsg?t=61">Dungeon Keeper</a> (windows).. <a href="https://play.google.com/store/apps/details?id=com.ea.game.dungeonkeeper_row&hl=en">app available</a>, (but horrendous reviews)<a href="http://hubpages.com/games-hobbies/games-like-dk">Games Like Dungeon Keeper</a></li>
<li><a href="https://youtu.be/bJSSQn6-DW0?t=233">Age Of Empires</a> (windows).. <a href="https://play.google.com/store/apps/details?id=com.klab.aoe&hl=en">app</a> (kind of)?</li>
<li><a href="https://www.youtube.com/watch?v=13OnnWuExU0">clash of clans</a> (android) .. <a href="https://play.google.com/store/apps/details?id=com.supercell.clashofclans&hl=en">app</a></li>
</ul>
</div>
<div>
<b>Illustrate architecture.</b><br />
<b><br /></b>
<b>is it activities or intents... in unity?</b><br />
<b><br /></b>
<b><br /></b></div>
<div>
Will go with <a data-href="https://en.wikipedia.org/wiki/Single-page_application" href="https://www.google.ie/url?sa=t&rct=j&q=&esrc=s&source=web&cd=3&cad=rja&uact=8&ved=0ahUKEwjgo5iNyarLAhXEORQKHRT0CD4QFggjMAI&url=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FSingle-page_application&usg=AFQjCNGydJfPsBtCxJ8oQmoEecBuLisghg&sig2=ts9WzPZL5KcX8yw19hL92A" style="color: #660099; cursor: pointer; font-family: arial, sans-serif; font-size: 18px; white-space: nowrap;">Single-page application</a> using the ES6 <span style="color: #3a4145; font-family: "noto serif" , serif; font-size: 19px; line-height: 34px;">ECMAScript 6 features now and understanding the syntax around modules and classes. It seems we are heading in the direction of SPA frameworks using ES6/ES7 features instead of writing their own complicated abstractions and polyfills</span><br />
<span style="color: #3a4145; font-family: "noto serif" , serif; font-size: 19px; line-height: 34px;"><br /></span>
<span style="color: #3a4145; font-family: "noto serif" , serif; font-size: 19px; line-height: 34px;">For front end framework/library I have decided to use Aurelia (possibly using react.js in conjunction where needed), three.js for the </span></div>
</div>
<div>
</div>
Anonymoushttp://www.blogger.com/profile/06600827240065232487noreply@blogger.com0tag:blogger.com,1999:blog-3506924777379935437.post-42607456758448623532016-02-24T10:10:00.002-08:002016-02-24T10:10:31.948-08:00Engine technology comparisons <b><u><span style="background: white; color: #333333; font-size: 10.0pt; mso-bidi-font-family: Arial;">OpenGL:</span></u></b><br />
<div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; mso-line-height-alt: 2.0pt;">
<span style="background: white; color: #333333; font-size: 10.0pt; mso-bidi-font-family: Arial;">OpenGL is an Operating System interface (API) that operates
on a low level. This allows you to write code and determine the best way to
control the hardware, such as the sound card or video card.<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; mso-line-height-alt: 2.0pt;">
<span style="background: white; color: #333333; font-size: 10.0pt; mso-bidi-font-family: Arial;">(OpenGL + OpenCL can
be a full alternative to Unity for creating your own games.)<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; mso-line-height-alt: 2.0pt;">
<span style="background: white; color: #333333; font-size: 10.0pt; mso-bidi-font-family: Arial;">This can be considered a more complex approach.<b><u><o:p></o:p></u></b></span></div>
<div class="MsoListParagraphCxSpFirst" style="margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: 54.0pt; margin-right: 0cm; margin-top: 0cm; mso-add-space: auto; mso-line-height-alt: 2.0pt; mso-list: l3 level1 lfo5; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="color: #333333; font-family: Wingdings; font-size: 10.0pt; mso-bidi-font-family: Wingdings; mso-fareast-font-family: Wingdings;">ü<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span style="background: white; color: #333333; font-size: 10.0pt; mso-bidi-font-family: Arial;">More control (particularly over hardware)<o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: 54.0pt; margin-right: 0cm; margin-top: 0cm; mso-add-space: auto; mso-line-height-alt: 2.0pt; mso-list: l3 level1 lfo5; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="color: #333333; font-family: Wingdings; font-size: 10.0pt; mso-bidi-font-family: Wingdings; mso-fareast-font-family: Wingdings;">ü<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span style="background: white; color: #333333; font-size: 10.0pt; mso-bidi-font-family: Arial;">OpenGL’s libraries can be good for figuring out good ways to do what you are asking the
hardware to do.<o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: 54.0pt; margin-right: 0cm; margin-top: 0cm; mso-add-space: auto; mso-line-height-alt: 2.0pt; mso-list: l3 level1 lfo5; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="color: #333333; font-family: Wingdings; font-size: 10.0pt; mso-bidi-font-family: Wingdings; mso-fareast-font-family: Wingdings;">ü<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span style="background: white; color: #333333; font-size: 10.0pt; mso-bidi-font-family: Arial;">Free.<o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: 54.0pt; margin-right: 0cm; margin-top: 0cm; mso-add-space: auto; mso-line-height-alt: 2.0pt; mso-list: l0 level1 lfo6; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="color: #333333; font-family: "Wide Latin","serif"; font-size: 10.0pt; mso-bidi-font-family: "Wide Latin"; mso-fareast-font-family: "Wide Latin";">-<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;">
</span></span><!--[endif]--><span style="background: white; color: #333333; font-size: 10.0pt; mso-bidi-font-family: Arial;">Does not do as much as Unity.<b><u><o:p></o:p></u></b></span></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: 54.0pt; margin-right: 0cm; margin-top: 0cm; mso-add-space: auto; mso-line-height-alt: 2.0pt; mso-list: l0 level1 lfo6; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="color: #333333; font-family: "Wide Latin","serif"; font-size: 10.0pt; mso-bidi-font-family: "Wide Latin"; mso-fareast-font-family: "Wide Latin";">-<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;">
</span></span><!--[endif]--><span style="background: white; color: #333333; font-size: 10.0pt; mso-bidi-font-family: Arial;">Less productive.<b><u><o:p></o:p></u></b></span></div>
<div class="MsoListParagraphCxSpLast" style="margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: 54.0pt; margin-right: 0cm; margin-top: 0cm; mso-add-space: auto; mso-line-height-alt: 2.0pt; mso-list: l0 level1 lfo6; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="color: #333333; font-family: "Wide Latin","serif"; font-size: 10.0pt; mso-bidi-font-family: "Wide Latin"; mso-fareast-font-family: "Wide Latin";">-<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;">
</span></span><!--[endif]--><span style="background: white; color: #333333; font-size: 10.0pt; mso-bidi-font-family: Arial;">Higher learning curve<b><u><o:p></o:p></u></b></span></div>
<div style="border-bottom: solid windowtext 1.0pt; border: none; mso-border-bottom-alt: solid windowtext .75pt; mso-element: para-border-div; padding: 0cm 0cm 1.0pt 0cm;">
<div class="MsoNormal" style="border: none; margin-bottom: .0001pt; margin-bottom: 0cm; mso-border-bottom-alt: solid windowtext .75pt; mso-line-height-alt: 2.0pt; mso-padding-alt: 0cm 0cm 1.0pt 0cm; padding: 0cm;">
<br /></div>
</div>
<div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; mso-line-height-alt: 2.0pt;">
<b><u><span style="background: white; color: #333333; font-size: 10.0pt; mso-bidi-font-family: Arial;">Unity (</span></u></b><span style="background: white; color: #333333; font-size: 10.0pt; mso-bidi-font-family: Arial;">AKA UDK)<b><u><o:p></o:p></u></b></span></div>
<div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; mso-line-height-alt: 2.0pt;">
<span style="background: white; color: #333333; font-size: 10.0pt; mso-bidi-font-family: Arial;">Game engine. It lays on top of libraries like OpenGL or
DirectX.</span><span style="color: #333333; font-size: 10.0pt; mso-bidi-font-family: Arial;"><br />
<span style="background: white;">If you are working in Unity, you should know C#
or JavaScript, too.<b><u><o:p></o:p></u></b></span></span></div>
<div class="MsoListParagraphCxSpFirst" style="margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: 54.0pt; margin-right: 0cm; margin-top: 0cm; mso-add-space: auto; mso-line-height-alt: 2.0pt; mso-list: l2 level1 lfo7; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="color: #333333; font-family: Wingdings; font-size: 10.0pt; mso-bidi-font-family: Wingdings; mso-fareast-font-family: Wingdings;">ü<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span style="background: white; color: #333333; font-size: 10.0pt; mso-bidi-font-family: Arial;">All in one tool<o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: 54.0pt; margin-right: 0cm; margin-top: 0cm; mso-add-space: auto; mso-line-height-alt: 2.0pt; mso-list: l2 level1 lfo7; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="color: #333333; font-family: Wingdings; font-size: 10.0pt; mso-bidi-font-family: Wingdings; mso-fareast-font-family: Wingdings;">ü<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span style="background: white; color: #333333; font-size: 10.0pt; mso-bidi-font-family: Arial;">Rapid prototyping. (drag & drop editing etc)<o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: 54.0pt; margin-right: 0cm; margin-top: 0cm; mso-add-space: auto; mso-line-height-alt: 2.0pt; mso-list: l2 level1 lfo7; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="color: #333333; font-family: Wingdings; font-size: 10.0pt; mso-bidi-font-family: Wingdings; mso-fareast-font-family: Wingdings;">ü<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span style="background: white; color: #333333; font-size: 10.0pt; mso-bidi-font-family: Arial;">A whole development suite, not just a library of parts to put together
or a framework to help make sure they all fit. You can create the whole game in
Unity.<b><u><o:p></o:p></u></b></span></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: 54.0pt; margin-right: 0cm; margin-top: 0cm; mso-add-space: auto; mso-line-height-alt: 2.0pt; mso-list: l2 level1 lfo7; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="color: #333333; font-family: Wingdings; font-size: 10.0pt; mso-bidi-font-family: Wingdings; mso-fareast-font-family: Wingdings;">ü<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span style="background: white; color: #333333; font-size: 10.0pt; mso-bidi-font-family: Arial;">Helps simplify as possible to create games. (easy for beginners)<b><u><o:p></o:p></u></b></span></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: 54.0pt; margin-right: 0cm; margin-top: 0cm; mso-add-space: auto; mso-line-height-alt: 2.0pt; mso-list: l2 level1 lfo7; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="color: #333333; font-family: Wingdings; font-size: 10.0pt; mso-bidi-font-family: Wingdings; mso-fareast-font-family: Wingdings;">ü<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span style="background: white; color: #333333; font-size: 10.0pt; mso-bidi-font-family: Arial;">Better geared for beginners (good starting point for game development)<b><u><o:p></o:p></u></b></span></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: 54.0pt; margin-right: 0cm; margin-top: 0cm; mso-add-space: auto; mso-line-height-alt: 2.0pt; mso-list: l2 level1 lfo7; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="color: #333333; font-family: Wingdings; font-size: 10.0pt; mso-bidi-font-family: Wingdings; mso-fareast-font-family: Wingdings;">ü<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span style="background: white; color: #333333; font-size: 10.0pt; mso-bidi-font-family: Arial;">Unity does far more than OpenGL. For example, it can handle game levels
and inputs in addition to figuring out how to render your backgrounds and play
music.<b><u><o:p></o:p></u></b></span></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: 54.0pt; margin-right: 0cm; margin-top: 0cm; mso-add-space: auto; mso-line-height-alt: 2.0pt; mso-list: l2 level1 lfo7; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="color: #333333; font-family: Wingdings; font-size: 10.0pt; mso-bidi-font-family: Wingdings; mso-fareast-font-family: Wingdings;">ü<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span style="background: white; color: #333333; font-size: 10.0pt; mso-bidi-font-family: Arial;">Large amounts of documentation and tutorials available.<b><u><o:p></o:p></u></b></span></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: 54.0pt; margin-right: 0cm; margin-top: 0cm; mso-add-space: auto; mso-line-height-alt: 2.0pt; mso-list: l2 level1 lfo7; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="color: #333333; font-family: Wingdings; font-size: 10.0pt; mso-bidi-font-family: Wingdings; mso-fareast-font-family: Wingdings;">ü<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span style="background: white; color: #333333; font-size: 10.0pt; mso-bidi-font-family: Arial;">Free version if earning less than $100,000<b><u><o:p></o:p></u></b></span></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: 54.0pt; margin-right: 0cm; margin-top: 0cm; mso-add-space: auto; mso-line-height-alt: 2.0pt; mso-list: l2 level1 lfo7; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="color: #333333; font-family: Wingdings; font-size: 10.0pt; mso-bidi-font-family: Wingdings; mso-fareast-font-family: Wingdings;">ü<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span style="background: white; color: #333333; font-size: 10.0pt; mso-bidi-font-family: Arial;">Personal version allows distribution to multiple platforms.<b><u><o:p></o:p></u></b></span></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: 54.0pt; margin-right: 0cm; margin-top: 0cm; mso-add-space: auto; mso-line-height-alt: 2.0pt; mso-list: l7 level1 lfo8; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="color: #333333; font-family: "Wide Latin","serif"; font-size: 10.0pt; mso-bidi-font-family: "Wide Latin"; mso-fareast-font-family: "Wide Latin";">-<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;">
</span></span><!--[endif]--><span style="background: white; color: #333333; font-size: 10.0pt; mso-bidi-font-family: Arial;">Less control or specifics.<o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: 54.0pt; margin-right: 0cm; margin-top: 0cm; mso-add-space: auto; mso-line-height-alt: 2.0pt; mso-list: l7 level1 lfo8; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="color: #333333; font-family: "Wide Latin","serif"; font-size: 10.0pt; mso-bidi-font-family: "Wide Latin"; mso-fareast-font-family: "Wide Latin";">-<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;">
</span></span><!--[endif]--><span style="background: white; color: #333333; font-size: 10.0pt; mso-bidi-font-family: Arial;">Runs on it’s own VM<o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: 54.0pt; margin-right: 0cm; margin-top: 0cm; mso-add-space: auto; mso-line-height-alt: 2.0pt; mso-list: l7 level1 lfo8; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="color: #333333; font-family: "Wide Latin","serif"; font-size: 10.0pt; mso-bidi-font-family: "Wide Latin"; mso-fareast-font-family: "Wide Latin";">-<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;">
</span></span><!--[endif]--><span style="background: white; color: #333333; font-size: 10.0pt; mso-bidi-font-family: Arial;">Large game file sizes. (A minimum of 9mb
due to bundling Mono with every build)<o:p></o:p></span></div>
<div class="MsoListParagraphCxSpLast" style="margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: 54.0pt; margin-right: 0cm; margin-top: 0cm; mso-add-space: auto; mso-line-height-alt: 2.0pt; mso-list: l7 level1 lfo8; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="color: #333333; font-family: "Wide Latin","serif"; font-size: 10.0pt; mso-bidi-font-family: "Wide Latin"; mso-fareast-font-family: "Wide Latin";">-<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;">
</span></span><!--[endif]--><span style="background: white; color: #333333; font-size: 10.0pt; mso-bidi-font-family: Arial;">Shaders not great in free version<o:p></o:p></span></div>
<div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 4.0pt 1.0pt 4.0pt;">
<div class="MsoNoSpacing" style="border: none; mso-border-alt: solid windowtext .5pt; mso-line-height-alt: 2.0pt; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0cm;">
<b><u><span style="background: white; font-size: 10.0pt;">C# or JS in Unity –<o:p></o:p></span></u></b></div>
<div class="MsoNoSpacing" style="border: none; mso-border-alt: solid windowtext .5pt; mso-line-height-alt: 2.0pt; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0cm;">
<b><span style="background: white; font-size: 10.0pt;">js</span></b><span style="background: white; font-size: 10.0pt;"> in unity
is unique (unityscrpt) – more flexible but potentially slower<o:p></o:p></span></div>
<div class="MsoNoSpacing" style="border: none; mso-border-alt: solid windowtext .5pt; mso-line-height-alt: 2.0pt; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0cm;">
<span style="background: white; font-size: 10.0pt;">slightly more common in forums<o:p></o:p></span></div>
<div class="MsoNoSpacing" style="border: none; mso-border-alt: solid windowtext .5pt; mso-line-height-alt: 2.0pt; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0cm;">
<span style="background: white; font-size: 10.0pt;">can be slow!<o:p></o:p></span></div>
<div class="MsoNoSpacing" style="border: none; mso-border-alt: solid windowtext .5pt; mso-line-height-alt: 2.0pt; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0cm;">
<br /></div>
<div class="MsoNoSpacing" style="border: none; mso-border-alt: solid windowtext .5pt; mso-line-height-alt: 2.0pt; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0cm;">
<b><span style="background: white; font-size: 10.0pt;">C#</span></b><span style="background: white; font-size: 10.0pt;"> - less flexible,
strictly typed.<o:p></o:p></span></div>
<div class="MsoNoSpacing" style="border: none; mso-border-alt: solid windowtext .5pt; mso-line-height-alt: 2.0pt; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0cm;">
<span style="background: white; font-size: 10.0pt;">but always runs at JavaScript’s top speed.
(fast)<o:p></o:p></span></div>
<div class="MsoNoSpacing" style="border: none; mso-border-alt: solid windowtext .5pt; mso-line-height-alt: 2.0pt; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0cm;">
<span style="background: white; font-size: 10.0pt;">More access to tools and advanced
techniques.<o:p></o:p></span></div>
<div class="MsoNoSpacing" style="border: none; mso-border-alt: solid windowtext .5pt; mso-line-height-alt: 2.0pt; mso-padding-alt: 1.0pt 4.0pt 1.0pt 4.0pt; padding: 0cm;">
<span style="background: white; font-size: 10.0pt;">Other programs use c# - good for
learning overall.<o:p></o:p></span></div>
</div>
<div style="border-bottom: solid windowtext 1.0pt; border: none; mso-border-bottom-alt: solid windowtext .75pt; mso-element: para-border-div; padding: 0cm 0cm 1.0pt 0cm;">
<div class="MsoNoSpacing" style="border: none; mso-border-bottom-alt: solid windowtext .75pt; mso-line-height-alt: 2.0pt; mso-padding-alt: 0cm 0cm 1.0pt 0cm; padding: 0cm;">
<br /></div>
</div>
<div class="MsoNoSpacing">
<b><u><span style="background: white; font-size: 10.0pt;">Monkey X PRO</span></u></b><span style="background: white; font-size: 10.0pt;"><o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: 54.0pt; mso-line-height-alt: 2.0pt; mso-list: l6 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="color: #333333; font-family: Wingdings; font-size: 10.0pt; mso-bidi-font-family: Wingdings; mso-fareast-font-family: Wingdings;">ü<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;">
</span></span><!--[endif]--><span style="background: white; color: #333333; font-size: 10.0pt; mso-bidi-font-family: Arial;">Programming language for easily creating multi
platform apps . It translates “Monkey code” to other languages at compile time –
(C++, C#, Java, JS and Actionscript).</span><o:p></o:p></div>
<div class="MsoNoSpacing" style="margin-left: 54.0pt; mso-line-height-alt: 2.0pt; mso-list: l6 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="font-family: Wingdings; font-size: 10.0pt; mso-bidi-font-family: Wingdings; mso-fareast-font-family: Wingdings;">ü<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;">
</span></span><!--[endif]--><span style="background: white; color: #333333; font-size: 10.0pt; mso-bidi-font-family: Arial;">Has a number of built in modules</span><span style="background: white; font-size: 10.0pt;"><o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: 54.0pt; mso-line-height-alt: 2.0pt; mso-list: l6 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="font-family: Wingdings; font-size: 10.0pt; mso-bidi-font-family: Wingdings; mso-fareast-font-family: Wingdings;">ü<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;">
</span></span><!--[endif]--><span style="background: white; font-size: 10.0pt;">Doesn’t
run on its own VM (unlike unity / corona)<o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: 54.0pt; mso-line-height-alt: 2.0pt; mso-list: l6 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="font-family: Wingdings; font-size: 10.0pt; mso-bidi-font-family: Wingdings; mso-fareast-font-family: Wingdings;">ü<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;">
</span></span><!--[endif]--><span style="background: white; font-size: 10.0pt;">Rapid
prototyping<o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: 54.0pt; mso-line-height-alt: 2.0pt; mso-list: l6 level1 lfo1; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="font-family: Wingdings; font-size: 10.0pt; mso-bidi-font-family: Wingdings; mso-fareast-font-family: Wingdings;">ü<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;">
</span></span><!--[endif]--><span style="background: white; font-size: 10.0pt;">Easy
to learn object oriented language.<o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: 54.0pt; mso-line-height-alt: 2.0pt; mso-list: l1 level1 lfo2; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="font-family: "Wide Latin","serif"; font-size: 10.0pt; mso-bidi-font-family: "Wide Latin"; mso-fareast-font-family: "Wide Latin";">-<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span style="background: white; font-size: 10.0pt;">Not well documented<o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: 54.0pt; mso-line-height-alt: 2.0pt; mso-list: l1 level1 lfo2; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="font-family: "Wide Latin","serif"; font-size: 10.0pt; mso-bidi-font-family: "Wide Latin"; mso-fareast-font-family: "Wide Latin";">-<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span style="background: white; font-size: 10.0pt;">Limited asset store<o:p></o:p></span></div>
<div class="MsoNoSpacing" style="margin-left: 54.0pt; mso-line-height-alt: 2.0pt; mso-list: l1 level1 lfo2; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="font-family: "Wide Latin","serif"; font-size: 10.0pt; mso-bidi-font-family: "Wide Latin"; mso-fareast-font-family: "Wide Latin";">-<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span style="background: white; font-size: 10.0pt;">Learn a new language, that is
somewhat limited<o:p></o:p></span></div>
<div style="border-bottom: solid windowtext 1.0pt; border: none; mso-border-bottom-alt: solid windowtext .75pt; mso-element: para-border-div; padding: 0cm 0cm 1.0pt 0cm;">
<div class="MsoNoSpacing" style="border: none; mso-border-bottom-alt: solid windowtext .75pt; mso-line-height-alt: 2.0pt; mso-padding-alt: 0cm 0cm 1.0pt 0cm; padding: 0cm;">
<br /></div>
</div>
<div class="MsoNoSpacing">
<b><u><span style="background: white; font-size: 10.0pt;">libGDX<o:p></o:p></span></u></b></div>
<div class="MsoListParagraphCxSpFirst" style="margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: 54.0pt; margin-right: 0cm; margin-top: 0cm; mso-add-space: auto; mso-line-height-alt: 2.0pt; mso-list: l5 level1 lfo4; mso-outline-level: 2; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="color: #333333; font-family: Wingdings; font-size: 10.0pt; mso-bidi-font-family: Wingdings; mso-fareast-font-family: Wingdings;">ü<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;">
</span></span><!--[endif]--><span style="background: white; color: #333333; font-size: 10.0pt; mso-bidi-font-family: Arial;">Fast development via desktop deployment
(no need to deploy to android every time.. test straight from desktop)<o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: 54.0pt; margin-right: 0cm; margin-top: 0cm; mso-add-space: auto; mso-line-height-alt: 2.0pt; mso-list: l5 level1 lfo4; mso-outline-level: 2; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="color: #333333; font-family: Wingdings; font-size: 10.0pt; mso-bidi-font-family: Wingdings; mso-fareast-font-family: Wingdings;">ü<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;">
</span></span><!--[endif]--><span style="background: white; color: #333333; font-size: 10.0pt; mso-bidi-font-family: Arial;">Free and open-source (open source under
apache 2.0 license)<o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: 54.0pt; margin-right: 0cm; margin-top: 0cm; mso-add-space: auto; mso-line-height-alt: 2.0pt; mso-list: l5 level1 lfo4; mso-outline-level: 2; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="color: #333333; font-family: Wingdings; font-size: 10.0pt; mso-bidi-font-family: Wingdings; mso-fareast-font-family: Wingdings;">ü<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;">
</span></span><!--[endif]--><span style="background: white; color: #333333; font-size: 10.0pt; mso-bidi-font-family: Arial;">Doesn't force a specific design (design
any way you wish.. customisable)<o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: 54.0pt; margin-right: 0cm; margin-top: 0cm; mso-add-space: auto; mso-line-height-alt: 2.0pt; mso-list: l5 level1 lfo4; mso-outline-level: 2; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="color: #333333; font-family: Wingdings; font-size: 10.0pt; mso-bidi-font-family: Wingdings; mso-fareast-font-family: Wingdings;">ü<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;">
</span></span><!--[endif]--><span style="background: white; color: #333333; font-size: 10.0pt; mso-bidi-font-family: Arial;">Interfacing with platform specific code<o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: 54.0pt; margin-right: 0cm; margin-top: 0cm; mso-add-space: auto; mso-line-height-alt: 2.0pt; mso-list: l4 level1 lfo3; mso-outline-level: 2; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="color: #333333; font-family: "Wide Latin","serif"; font-size: 10.0pt; mso-bidi-font-family: "Wide Latin"; mso-fareast-font-family: "Wide Latin";">-<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span style="background: white; color: #333333; font-size: 10.0pt; mso-bidi-font-family: Arial;">Java dependency leading to performance issues.<o:p></o:p></span></div>
<div class="MsoListParagraphCxSpMiddle" style="margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: 54.0pt; margin-right: 0cm; margin-top: 0cm; mso-add-space: auto; mso-line-height-alt: 2.0pt; mso-list: l4 level1 lfo3; mso-outline-level: 2; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="color: #333333; font-family: "Wide Latin","serif"; font-size: 10.0pt; mso-bidi-font-family: "Wide Latin"; mso-fareast-font-family: "Wide Latin";">-<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;"> </span></span><!--[endif]--><span style="background: white; color: #333333; font-size: 10.0pt; mso-bidi-font-family: Arial;">Low level engine difficult for inexperienced programmers<o:p></o:p></span></div>
<div class="MsoListParagraphCxSpLast" style="margin-bottom: .0001pt; margin-bottom: 0cm; margin-left: 54.0pt; margin-right: 0cm; margin-top: 0cm; mso-add-space: auto; mso-line-height-alt: 2.0pt; mso-list: l4 level1 lfo3; mso-outline-level: 2; text-indent: -18.0pt;">
<!--[if !supportLists]--><span style="font-family: "Wide Latin","serif"; font-size: 10.0pt; mso-bidi-font-family: "Wide Latin"; mso-fareast-font-family: "Wide Latin";">-<span style="font-family: 'Times New Roman'; font-size: 7pt; font-stretch: normal;">
</span></span><!--[endif]--><span style="background: white; color: #333333; font-size: 10.0pt; mso-bidi-font-family: Arial;">Limited documentation </span><span style="background: white; font-size: 10.0pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; mso-line-height-alt: 2.0pt; mso-outline-level: 2;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; mso-line-height-alt: 2.0pt; mso-outline-level: 2;">
<span style="background: white; font-size: 10.0pt;"><o:p> -----------------------------------------------------------------</o:p></span><span style="background-color: white; font-size: 13.3333px;">----------------------------------------------</span><span style="background-color: white; font-size: 13.3333px;">----------------------------</span></div>
<div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; mso-line-height-alt: 2.0pt; mso-outline-level: 2;">
<span style="background-color: white; font-size: 13.3333px;"><br /></span></div>
<div class="MsoNormal" style="margin-bottom: .0001pt; margin-bottom: 0cm; mso-line-height-alt: 2.0pt; mso-outline-level: 2;">
<span style="background-color: white; font-size: 13.3333px;">Given all of the above, Unity3d appears to be the most appropriate in terms of effort required to get started, stability and available information.</span></div>
Anonymoushttp://www.blogger.com/profile/06600827240065232487noreply@blogger.com0tag:blogger.com,1999:blog-3506924777379935437.post-16812200789312941382016-02-17T09:34:00.003-08:002016-02-24T13:30:58.947-08:00First MeetingFor this meeting, my intent was to discuss my ideas and how realistic some of my expectations were. Given my limited experience in this area and my ambitious nature, I felt it would be immensely valuable to have someone with more experience let me know what aspects would take more time than expected and what would be outside of my abilities in the timeframe we have.<br />
<div>
<br /></div>
<div>
So far the most difficult part is knowing what technologies out of the all the possible ones i have seen would be best to choose and use for this project. Some guidance in this area was something i was hoping for and ultimately received.<br />
<div>
<br /></div>
<div>
Covered in this meeting:<br />
<br />
<i>I explained:</i></div>
<div>
<ul>
<li>The mechanics of the application and my vision of how it would operate / the style of presentation of information within the app.</li>
<li>The distinction i see for this app between "game" and "simulation".</li>
<li>Core features to be included. </li>
<li>Potential additional features.</li>
<li>Technologies researched and my current limitations in them understanding of them.</li>
</ul>
</div>
<div>
<br /></div>
<div>
We discussed that for this project it would be best to:</div>
<div>
<ul>
<li>Keep scope reasonable for now. </li>
<li>Get the basics working and expand accordingly. </li>
<li><br /></li>
<li>Have communications between the web server to update game information (require wifi?) if to be on webserver, maybe use php to communicate with database to get/set information/stats within the simulation. </li>
</ul>
</div>
<div>
<br /></div>
<div>
<i>For the following week we concluded it best to:</i></div>
<div>
<ul>
<li>Research and compare technologies, such as Unity, openGL along with researching new alternative game engines. {}This included reporting on the pros and cons of all and how they might/might not work for my project. </li>
</ul>
<ul>
<li>Use the above findings to decide on a game engine to use. </li>
</ul>
<ul>
<li>Additional to the apps previously researched that served to inform users on various plants and vegetables, to find and install games of a that deliver information/ do what I am trying to do in a similar way. I will report on similarities/differences, how they chose to do things, my findings and opinions on their relevance to my project. </li>
</ul>
<ul>
<li>I will focus some effort on getting accustomed to intents and screen changing in the Android SDK.</li>
</ul>
<ul>
<li>Decide on screens, splash screens, where to load into etc. </li>
</ul>
<ul>
<li>Decide if it is to be an android app or a web application: Choosing android app means i am bound to Java via the Android Studio, where as a web application allows me to use more versatile languages, but will be more limited.</li>
</ul>
<ul>
<li>Local or hosted database: This will determine if a server required to host online services, or if the app can operate completely local to the device.</li>
</ul>
<ul>
<li>Think about if object information will be populated before shipping the app out vs if the app should continually contact the web server, allowing new vegetables to be added</li>
<ul>
<li><span style="background-color: white; color: #222222; font-family: "arial" , sans-serif; font-size: 12.8px;">A web service could be setup using PHP(or something else) and MySQL to manage data persistence and to offer a secure mechanism to allow users access data...</span><a href="http://www.codeproject.com/Articles/267023/Send-and-receive-json-between-android-and-php" style="color: #1155cc; font-family: arial, sans-serif; font-size: 12.8px;" target="_blank">http://www.codeproject.com/<wbr></wbr>Articles/267023/Send-and-<wbr></wbr>receive-json-between-android-<wbr></wbr>and-php</a> -- <a href="http://www.androidhive.info/2014/01/how-to-create-rest-api-for-android-app-using-php-slim-and-mysql-day-12-2/" style="color: #1155cc; font-family: arial, sans-serif; font-size: 12.8px;" target="_blank">http://www.androidhive.info/<wbr></wbr>2014/01/how-to-create-rest-<wbr></wbr>api-for-android-app-using-php-<wbr></wbr>slim-and-mysql-day-12-2/</a></li>
</ul>
</ul>
<ul>
</ul>
<div>
<br /></div>
</div>
<div>
<br /></div>
<div>
Random findings post meeting.</div>
<div>
<u>localisation</u> - stripping out code base to allow expansion to multiple countires/languages etc</div>
<div>
<br /></div>
<div>
<u>raindrops</u>, to reduce power, have each rain drop linked to x amount of ther raindrops, dividing down total amount to be calculated<br />
<br />
<span style="background-color: white; font-family: "roboto" , "arial" , sans-serif; font-size: 13px; line-height: 17px; white-space: pre-wrap;">Have each tile is a GameObject; read the map data from an array, using two nested loops for x & z (y is up). When instantiating them, store a reference to the tile in a simple array. Store the number of the index on the tile itself, along with the X & Z from loops. The tiles move themselves into place.</span></div>
<div>
<span style="background-color: white; font-family: "roboto" , "arial" , sans-serif; font-size: 13px; line-height: 17px; white-space: pre-wrap;"><br /></span></div>
<div>
blender 3d tool</div>
<div>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 960px;"><colgroup><col span="15" style="width: 48pt;" width="64"></col></colgroup><tbody></tbody></table>
</div>
</div>
Anonymoushttp://www.blogger.com/profile/06600827240065232487noreply@blogger.com0tag:blogger.com,1999:blog-3506924777379935437.post-26745876824516530272016-02-17T09:32:00.001-08:002016-03-03T10:35:42.882-08:00Resources<b><u>Unity</u></b><br />
<br />
<a href="https://www.youtube.com/watch?v=kkouwY8LLfg">3d HEX tile map</a><br />
Asset available through unity. Seems over complex and resource heavy for what i need. although if it could be scaled down for performacne, maybe it could be used. If not, maybe it could provide insight if no other suitable alternative is found.<br />
<br />
<a href="http://protilemapeditor.com/">ProTileMap Home page</a><br />
<a href="https://www.youtube.com/watch?v=kcClhOo1J6I">ProTile mpa editor 1</a><br />
top view from 4.38seconds, could be useful, if this option only could be "picked" from the rest, resources could be spared. Size and android adaptability to be investigated.<br />
<br />
P<a href="https://www.youtube.com/watch?v=2aUnDlAzbJc&feature=iv&src_vid=kcClhOo1J6I&annotation_id=annotation_2950823127">roTile Map Editor 2</a><br />
from 3.10seconds, very interesting application of this technology on a tablet. Seems quick and efficient. <span style="background-color: white; font-family: "roboto" , "arial" , sans-serif; font-size: 13px; line-height: 17px; white-space: pre-wrap;">has Runtime Support / API</span><br />
<span style="background-color: white; font-family: "roboto" , "arial" , sans-serif; font-size: 13px; line-height: 17px; white-space: pre-wrap;">work with custom meshes/prefabs? Can I use my own tile assets?</span><br />
<span style="background-color: white; font-family: "roboto" , "arial" , sans-serif; font-size: 13px; line-height: 17px; white-space: pre-wrap;"> possible to make a simplified version in game that only allows certain shapes. T</span><span style="background-color: white; font-family: "roboto" , "arial" , sans-serif; font-size: 13px; line-height: 17px; white-space: pre-wrap;">here is whole API exposed for any kind of configurations. Investigate, are tiles "dynamic" will veg tiles "grow"</span><br />
<br />
<a href="https://youtu.be/C0oXhFE2Vgo?t=5">Cartoon Town and Farm</a>. <a href="https://www.assetstore.unity3d.com/en/#!/content/17254">Asset link</a> . Might be just art pack and provide object interaction.<a href="https://www.youtube.com/watch?v=IcX8aeU66mg">UniTile 3d</a><br />
<br />
<a href="https://www.youtube.com/watch?v=2j7AZdv0yr0">Tutorial series on 2D Map Editor in Unity</a> [C#]<br />
Includes how to Create a Scriptable Object(TileSet)<br />
<h1 class="yt watch-title-container" style="background: rgb(255, 255, 255); border: 0px; color: #222222; display: table-cell; font-family: Roboto, arial, sans-serif; font-size: 24px; font-weight: normal; margin: 0px 0px 13px; padding: 0px; vertical-align: top; width: 1250px; word-wrap: break-word;">
</h1>
<a href="https://www.youtube.com/watch?v=bpB4BApnKhM">Tutorial series Unity 3d: TileMaps</a>:<br />
<div>
from scratch approach. Comprehensive. Good resource. </div>
<div>
<br />
<a href="https://www.youtube.com/watch?v=1Y20pFS-6h0">unity tile map editor</a><br />
<br />
list of free assets:<br />
http://cinema-suite.com/5-best-free-unity-assets-dont-know/#.Vs3IR5yLRQA<br />
<br />
<br />
<br />
<b><u>GameSalad</u></b></div>
<div>
A game builder that aims to simplify. </div>
<div>
<a href="https://www.youtube.com/watch?v=PRYGJROEUAI">Grid based movement - sample video</a>. set grid size and can move about. might be easy to allow user to input variables that will define the grid layout.</div>
<div>
<a href="https://www.youtube.com/watch?v=MZ12-ugWT00">gamesalad tutorial for simple ball game</a> -<br />
<br />
<br />
<h1 class="yt watch-title-container" style="background: rgb(255, 255, 255); border: 0px; color: #222222; display: table-cell; font-family: Roboto, arial, sans-serif; font-size: 24px; font-weight: normal; margin: 0px 0px 13px; padding: 0px; vertical-align: top; width: 1250px; word-wrap: break-word;">
</h1>
<h1 class="yt watch-title-container" style="background: rgb(255, 255, 255); border: 0px; display: table-cell; margin: 0px 0px 13px; padding: 0px; vertical-align: top; width: 1250px; word-wrap: break-word;">
</h1>
<b><u>Visual Studio</u></b><br />
<a href="https://www.youtube.com/watch?v=s1o0gZwJS-4">Unite 2014 - Editor Scripting from the real world</a><br />
core concepts of Unity Editor scripting. Visual Studio. Potentially over kill for what i am doing. but a resource for the future non the less<br />
<br />
<br />
<br />
<br />
000webhost<br />
<a href="https://www.youtube.com/watch?v=MFvsRvo_78Y"><br /></a>
<a href="https://www.youtube.com/watch?v=MFvsRvo_78Y">ORIANART - How to make 2D Game Tilesets</a><br />
<br />
-------------------------<br />
<a href="https://www.assetstore.unity3d.com/en/#!/content/50282">Turn Based Strategy (TBS) Framework</a> - free. </div>
<div>
Both square & hex files. <span style="background-color: white; color: #222222; font-family: "verdana" , "arial" , "helvetica" , sans-serif; font-size: 14px; line-height: 20px;"> Modular components. Map generation can be used while editing or in runtime. Creates a series of "Tile" objects with properties. </span></div>
<div>
<span style="background-color: white; color: #222222; font-family: "verdana" , "arial" , "helvetica" , sans-serif; font-size: 14px; line-height: 20px;">Has a grid generator that places chosen gameobjects to a grid.</span></div>
<div>
<span style="background-color: white; color: #222222; font-family: "verdana" , "arial" , "helvetica" , sans-serif; font-size: 14px; line-height: 20px;"><i>Questions:Turn based... can this be disabled? or possibly used to my advantage? a turn is a "day", player has unlimited "actions" in his turn. </i></span><br />
<span style="background-color: white; color: #222222; font-family: "verdana" , "arial" , "helvetica" , sans-serif; font-size: 14px; line-height: 20px;"><i><br /></i></span>
<a href="https://en.wikipedia.org/wiki/Flood_fill">Flood fill</a></div>
<div>
<span style="background-color: white; color: #455463; font-family: "open sans" , sans-serif; font-size: 16px; line-height: 21.6px;">frontier expansion, or "flood-fill" which will take initial point (a tile whos type you know) then it will expand out, into neighbouring cells of the same type, and in doing so, generates a list of connected tiles of the same type.</span></div>
<div>
<span style="background-color: white; color: #455463; font-family: "open sans" , sans-serif; font-size: 16px; line-height: 21.6px;"><br /></span></div>
<div>
<span style="background-color: white; color: #455463; font-family: "open sans" , sans-serif; font-size: 16px; line-height: 21.6px;"><br /></span></div>
<div>
<span style="background-color: #fafafa; color: #333333; font-family: "helvetica" , "arial" , sans-serif; font-size: 14.6667px; line-height: 16.4267px;"> grid with blocks Use raycasting to select each block that you want to be destroyed then move the creatures to the location to destroy the blocks after a set amount of time. You could also using raycasting for the AI pathing as well to make sure they follow the correct path.</span></div>
<div>
<span style="background-color: white; color: #455463; font-family: "open sans" , sans-serif; font-size: 16px; line-height: 21.6px;"><br /></span></div>
<div>
<span style="background-color: white; color: #455463; font-family: "open sans" , sans-serif; font-size: 16px; line-height: 21.6px;"><br /></span></div>
<div>
<span style="background-color: white; color: #455463; font-family: "open sans" , sans-serif; font-size: 16px; line-height: 21.6px;">---------</span><br />
<span style="background-color: white; color: #455463; font-family: "open sans" , sans-serif; font-size: 16px; line-height: 21.6px;"><a href="https://www.wunderground.com/weather/api/d/pricing.html">weather api</a></span><br />
<br />
<br />
----<br />
<a href="https://github.com/futurice/android-best-practices">Best practices in Android development</a> - detailed guide on some pitfalls in android development. No mention of unity, but still some useful information.</div>
<div>
<br /></div>
<div>
<span style="background-color: #f1e8d6; font-family: "droid sans" , sans-serif; font-size: 14px; line-height: 21px;">about implementing the MVC </span><a class="api" href="http://www.javaranch.com/patterns/" style="background-color: #f1e8d6; border-bottom-color: rgb(85, 85, 85); border-bottom-style: dotted; border-width: 0px 0px 1px; box-sizing: border-box; font-family: 'Droid Sans', sans-serif; font-size: 14px; font-stretch: inherit; line-height: 21px; margin: 0px; padding: 0.001em; text-decoration: none; vertical-align: baseline;" target="_new" title="article: evil design patterns">pattern</a><span style="background-color: #f1e8d6; font-family: "droid sans" , sans-serif; font-size: 14px; line-height: 21px;"> in Android. <a href="http://www.therealjoshua.com/2011/11/android-architecture-part-1-intro/">here</a></span></div>
<div>
<span style="background-color: white; color: #455463; font-family: "open sans" , sans-serif; font-size: 16px; line-height: 21.6px;"><br /></span></div>
<div>
<h1 itemprop="name" style="-webkit-background-clip: border-box; background-color: white; background-repeat: no-repeat; box-sizing: border-box; color: #444444; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, sans-serif; font-size: 26px; font-weight: normal; line-height: 32px; margin: 0px; outline: 0px; overflow: hidden; padding: 3px 0px 0px 10px; text-overflow: ellipsis; text-rendering: optimizeLegibility; vertical-align: top;" title="Cartoon Town and Farm">
</h1>
</div>
Anonymoushttp://www.blogger.com/profile/06600827240065232487noreply@blogger.com0tag:blogger.com,1999:blog-3506924777379935437.post-37230415420611835342016-02-17T04:38:00.001-08:002016-02-17T04:38:05.706-08:00Ground Work<br />
Prior to meeting with my assigned supervisor there was a number of topics researched:<br />
<span style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;"><br /></span>
<span style="background-color: white;"><span style="color: #222222; font-family: arial, sans-serif;"><span style="font-size: 12.8px;">Began familiarising myself with the android SDK and getting simple projects working it and displaying them on my phone. </span></span></span><br />
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
Began looking at possibilities for the GUI elements, such as Unity or OpenGl.</div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
Collected some apps that had a similar style GUI i could reference.</div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
Looked for some guids on building a tile based applciation for android.</div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
Looked into hosting my own server at home, which could host a database that my app could connect to. Another conclusion was that SQLlite that comes with Android could be a suitable option depending on the size of the app.</div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
<br /></div>
<div style="background-color: white;">
<span style="color: #222222; font-family: arial, sans-serif;"><span style="font-size: 12.8px;">Discussed with a lecturer web applications vs android apps, how i could implement most of the business logic via a web service using PHP to update/retrieve information from an database, improving data persistence and allowing up to date information be accessed via multiple outlets (app, webpage etc).</span></span></div>
<div style="background-color: white;">
<span style="color: #222222; font-family: arial, sans-serif;"><span style="font-size: 12.8px;"><br /></span></span></div>
<div style="background-color: white;">
<span style="color: #222222; font-family: arial, sans-serif;"><span style="font-size: 12.8px;">Began research on hiring someone to develop sprite images for my growth cycles as a side option. Also looked if these may be available for free online.</span></span></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
<span style="font-size: 12.8px;">Concluded that an object oriented model for populating my crop classes/objects from a database seems like the best way to go </span></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
<span style="font-size: 12.8px;"><br /></span></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
<span style="font-size: 12.8px;">Outlined the potential need to scrape some websites to populate my own database. This may only be necessary for when i plan to expand my choice of available vegetables for use.</span></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
<span style="font-size: 12.8px;"><br /></span></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
Before all of the above, i tried to think through how the application could be delivered and what the most essential features would be. Additionally i tried to think through additional features that could be added over time in the event that there was time to include before the projects deadline.</div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
I have decided on an iterative approach for two reasons.</div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
1) it will be to experience this software development approach considering it is so widely used in the industry. Being able to talk about this approach in interview will be valuable and i can "hit the ground running"</div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
2) As i have chosen a project with quite a large scope for the time frame we have, it will be best to first identify core features and functionality, and get them working and get feedback on performance and feel of the product. I can then use what i have learned and try implement the next layer of features/functionality, always ensuring that the application is in working "submittable" condition at the end of each "sprint" so that if any feature i try implement appears to not be worth the time it is taking, or that it will not be achievable, i can leave drop it from the project and start on another feature without having disturbed the previous completed phase.</div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
<br /></div>
<div style="background-color: white; color: #222222; font-family: arial, sans-serif; font-size: 12.8px;">
<br /></div>
Anonymoushttp://www.blogger.com/profile/06600827240065232487noreply@blogger.com0tag:blogger.com,1999:blog-3506924777379935437.post-81611758514940262232016-02-17T04:08:00.001-08:002016-02-17T04:08:26.602-08:00Introduction - crop plannerMy idea is to build a crop simulator that will accurately represent the growing of vegetables for hobbyists and enthusiasts with a strong emphasis on encouraging children to be involved.<div>
<br /></div>
<div>
To appeal to children there will be game like GUI to simulate a real garden with a virtual garden.</div>
<div>
<br /></div>
<div>
This will enable a virtual model to be created inside the program by the user. This virtual garden can then be used to plan a real garden and help advise what can be grown at what times and what your space will allow. </div>
<div>
<br /></div>
<div>
This project scope will initially cover the "square foot growing" method, where by there are specific numbers of plants that can fit into an area of 1 square foot. To begin a limited amount of vegetables will be implemented, but the architecture and design principles will allow further additions of potentially a limitless amount of new vegetables.</div>
<div>
<br /></div>
<div>
Ideally the interactions between plants/vegetables will increase in complexity over time, accounting for synergistic growing suggestions, and combinations to avoid.</div>
<div>
<br /></div>
<div>
The main challenge will be learning how to build a game like environment on my own while handling all other projects and studies as this aspect is not covered in my current course.</div>
<div>
<br /></div>
Anonymoushttp://www.blogger.com/profile/06600827240065232487noreply@blogger.com0