Kick-start: Create a Linux(Ubuntu) Environment for Windows Developers using VirtualBox, VSCode, Git, NodeJS

I enjoy working with Visual Studio Code (VSCode). Since it’s available for Linux and Mac, I thought I would give it a try in a different environment. As a Windows developer, I’ve wanted to try out Linux. In the past when I have attempted to work in Linux, I was overwhelmed with all the tools, configuration and such that must be learned to be productive.

I had a very difficult time finding beginner information that is current of setting up a Linux development environment. I found bits and pieces but nothing that showed end-to-end of how to get started.

In this post, I will describe how to setup a development environment in Linux (Ubuntu). The main technologies I will work with are the following:

  • Oracle VirtualBox – 5.1.14
  • Linux Ubuntu 64-bit: 16.04
  • Visual Studio Code (VSCode): 1.9.1
  • NodeJS: 6.9.5
  • Git: 2.7.4

This post is about setting up a basic Linux (Ubuntu) development environment.  I assume that the user is familiar with Windows and has very basic knowledge of hypervisor software to manage virtual machines.

I’m using Windows 10 as my host system. I don’t believe it should matter what host you are using, because other than VirtualBox, everything in this post will be installed on Linux Ubuntu.

Installing VirtualBox

We need somehow to run Ubuntu. To do this we need a Hypervisor. A hypervisor is software that runs virtual machines. There are many hypervisors available (Hyper-V, VMWare, VirtualBox, etc). I have selected Oracle VirtualBox for the following reasons:

  • Runs on Windows
  • Free for personal use
  • Easy to use
  • Very popular
  • Large Community

Let’s install VirtualBox by going to VirtualBox webpage:

https://www.virtualbox.org/wiki/Downloads

VirtualBaox Download
VirtualBaox Download

Once at the VirtualBox Download webpage, download VirtualBox

After downloading VirtualBox,  install it.

VirtualBaox Install
VirtualBaox Install

 Download Linux Ubuntu Desktop

When we create our virtual machine using VirtualBox we will need an image (iso) of Ubuntu to install. We will get this iso from Ubuntu’s website. It’s important that you download the desktop version of Ubuntu. Download Ubuntu Desktop from here:
Continue reading “Kick-start: Create a Linux(Ubuntu) Environment for Windows Developers using VirtualBox, VSCode, Git, NodeJS”

KickStart – C# Custom Configuration

This post will provide an example and explanation of how to create custom configuration for C# applications. I will discuss ConfigurationSections, ConfigurationElements, ConfigurationElementCollection. Also I will discuss how to nest these items together. My plan is to take very small steps; implementing each part of the configuration individually.

By the end of the post we will be able to navigate a custom configuration similar to the following config file:

Assumption

  • Good understanding of C#
  • Good understanding Visual Studio – I’m will be using VS 2012
  • .NET 3.5 and higher
  • Basic understanding of configuration files

The application we are going to create is quite contrived. The school settings that we will store in the config file would usually be stored in a database, but I want to provide a domain that most people understand.

Our Domain

A School has
A Name
A Address
Zero or More Courses
A Course has
A Title
An Optional Instructor
Zero or More Students
A Student has
A StudentId

We are going to create a Windows Console application. All it’s going to do is display values from the config file. When we are completed with the application it will display something similar to this:

Continue reading “KickStart – C# Custom Configuration”

Understanding AngularJS – Simple Example

I did a similar post as this post for Backbone.js Understanding Backbone.js – Simple Example. Based on readers’ comments the backbone.js post seemed to assist many people. My goal with this post is to help others understand the core parts of AngularJS and how they work together.

The AngularJS application that we are building will display a list of movies and will have the ability to add movies. We could create this application with very minimum code, but extensibility and maintainability will be limited. My primary objective is to show how to structure an AngularJS application that provides a base of knowledge to create other AngularJS applications extensible and maintainable.

My target audience will have some knowledge about AngularJS, but are having a difficult time implementing all but the most basic applications. By simple, I mean you should only have to focus on AngularJS. We will not be using jQuery, Twitter Bootstrap, or other 3rd party libraries.

We could create this application with just a controller and a view. But in this post I will describe the following core AngularJS features:

  • Routes
  • Modules
  • Views
  • Controllers
  • Services

Above I mentioned I will keep this post simple, but we do need a web server. The AngularJS Theater application will load views and data (json files) from the server. I would like to do these examples by access “file:///E:/TempProjects/Theater/index.html#/” on local computer, but most browsers cannot access these files on local computer do to Cross Origin issues. Here a StackOverflow question and answer that describes this issue: Cross origin requests are only supported for HTTP but it’s not cross-domain. So we need a web server. Any web server will do, such as IIS, Node.js and Express or other server. In this example I will be using Node.js and Express. You will not need to know anything about Node.js; all that is need is for you to install Node.js and to execute a script that I will provide. I will step you through the complete process to get Node.js and Express up and running.

Google Chome will be the browser I use, but any current browser should work fine. The reason I pick Chome is for its development tools. I will be developing in JetBrains WebStorm IDE, but any IDE or text editor should be fine.

This post will be based on a contrived idea of displaying a list of movies at a theater. There is nothing fancy here.

The complete solution can be downloaded from here:
Source – Understand-AngularJS-Simple Example(Theater)

Based on comments from Hasan this example works with AngularJS 1.1.5. It does not work with AngularJS 1.2.3.

Continue reading “Understanding AngularJS – Simple Example”

Setting-up AngularJS, Angular Seed, Node.js and Karma

I’ve used AngularJS for a few months, but I have no knowledge when it comes to testing AngularJS apps. I have a subscription to PluralSight.com and wanted to go through their online video training course for AngularJS. Specifically with this course I want to learn how to use Karma to do testing.

I’m usually extremely happy with PluralSight.com course, but in the beginning of this course I was somewhat disappointed. In Section 7 (“Angular Seed”) new technologies were introduced. The author introduced Angular-Seed, Node.js and Karma. I’ve worked with Node.js, but there are probably many people who have never used it. I believe the author took for granted that the student knew Node.js. For those who have never used Node.js this could be an obstacle.

When I started the course I didn’t have Node.js installed. I installed Node.js and things didn’t work as intended. I couldn’t run tests in Node.js because Karma was not installed. Once I installed Karma, Chrome wouldn’t launch in the tests.

With all the issues I was having, I wondered if others were having the same problems. If others were having similar issues, were they discouraged and not continuing with the course. So I decided to create this blog post to help others to get stared with AngularJS, Angular-Seed, Node.js and Karma.

Here are my assumptions:

  • You are a windows developer
  • Google Chrome browser is installed
  • You will use the Windows Command Prompt instead of Bash
  • You have little or no knowledge of Node.js
  • You have little or no knowledge of Karma
  • You will use Node.js as the web server. I will step you through this.
  • You have access to and IDE. Visual Studio will be fine. NotePad++ would also probably work. I use JetBrains WebStorm. JetBrains has a free 30 day trial for WebStorm.

Here are the high level step we will follow:

  1. Download and install Angular-Seed
  2. Download and install JetBrains WebStorm (Optional)
  3. Download and install Node.js
  4. Confirm Node.js is installed
  5. Run Karma Unit Tests – will fail because Karma is not installed
  6. Install Karma
  7. Run Karma Unit Tests again – Will fail because Chrome will not start
  8. Add System Variable to Windows
  9. Confirm System Variable Were Added
  10. Run Unit Tests again – should succeed
  11. Confirm that Units are being tracked by Karma
  12. Start Web Server by using Node.js

Continue reading “Setting-up AngularJS, Angular Seed, Node.js and Karma”

Re-Learning Backbone.js

In 2011 and in early 2012, I did an extensive amount of work with Backbone.js. I believe I was fairly competent with the technology and grew very fond of Backbone.js. During this time I created a blog post on Backbone.js, “Understanding Backbone.js – Simple Example”. Based on comments, this post did help a few individuals. Sometime around March my priorities changed and since then I’ve done very little client side development.

In November I started back doing client side development. I researched the different MV* frameworks and settled on using Backbone.js again. While I understood the concepts of MV* frameworks and Backbone.js, some of the details of the technology I could no longer recalled. Programming is definitely not riding a bike.

Since I was doing this on my own time, I didn’t have any deadlines or anyone I reported to. So I decided to re-learn Backbone.js from scratch.

When I wrote my first blog post on Backbone.js, I had many months of experience with the technology. I tried to create a very simple tutorial, but anyone who has no knowledge of Backbone.js would have a difficult time understanding some of the concepts. It’s amazing how well some authors can convey a concept at a beginner’s level about subjects that they are experts in. I know others that are extremely brilliant, but when they discuss a concept to someone who has little knowledge about the topic, they have a very difficult time explaining it. There are concepts that I know that I take for granted, and trying to explain these concepts at an elementary level is not easy. Many times when explaining something there are multiple concepts that need to be understood, and each concept needs to be understood to understand the other concepts. In the “Understanding Backbone.js – Simple Example” blog post, I took for granted that the readers understood certain concepts. The post I wrote was not short, and if I didn’t make these assumptions about the reader, the post would have been much longer.

Now that I’m re-learning Backbone.js, I thought this would be a great opportunity to provide others the basic concepts of Backbone.js. I have made assumptions that readers do have a basic knowledge of JavaScript and jQuery.

I have already been through the trials and tribulations of working with JavaScript in complex application. I then started to use jQuery. jQuery helped out, but did not solve for many of the complexities of the application. I had experience with MVC frameworks on the server side, and started reading about the different MV* frameworks on the client side. Eventually I decided to use Backbone.js. It would be nice if I could give you all the reasons I decided on Backbone.js, but this was a maturation process that would be very difficult to recall. With that in mind, I also make the assumption that readers have a basic understanding of MV* frameworks and the reasoning to use one and why the reader has decided to use Backbone.js.

Up to this point I have now written 7 posts in regards to re-learning Backbone.js and hopefully there will be more to come. This has been a lot of fun. With writing these posts I have learned much more than I would have otherwise learned. I hope these posts help others to learn Backbone.js and be more proficient.

It’s amazing the number of kind comments that readers provided to the post “Understanding Backbone.js – Simple Example”. Even though I’m not a sentimental person, these comments do provide me great appreciation that others benefited from the post. Please keep the comments coming. I am thankful for them and they keep me writing about topics I enjoy.

Below are my posts on Backbone.js. I plan to keep this list up to date on topics about Backbone.js.

 

 

Please enjoy

Re-Learning Backbone.js – View Events

It is common for Backbone.js views to include elements that the user can interact with. For example, the user can enter text in a text box, hover over a div, or click a button. These types of interaction can trigger events. If a Backbone.js view is bound to these events, then the view can react to these events. Reaction to these events could be validating data, displaying a message box, or saving or updating data in the model.

While we learning about Backbone.js view events, we will keep it very simple. In the following example we will not have templates or models, we will be working with a very simple view. In this example we will bind an input textbox key-up event to a view’s function. Whenever the user presses a key, an event should be triggered and a function should be called to log the value of the textbox to the browser console.


Continue reading “Re-Learning Backbone.js – View Events”

Re-Learning Backbone.js – Binding Models to Views

In the previous post we learned about Model Binding in isolation. There are many places where model binding can provide benefit. Where we see model binding the most is in relation to using views. Usually we want the view to depict those changes in the model. In this post we will bind a model to a view.

In the following example the view will be updated when the model changes.


Continue reading “Re-Learning Backbone.js – Binding Models to Views”

Re-Learning Backbone.js – Model Binding Events

Usually a view tracks a model, and when the data in the model changes the view is updated to represent the changes. In the previous two blog posts we learned about Bakbone.js Views, but our views did not track models and were not update when the model changed.

In this post we will learn the basics about binding models events. I do not want to overly complicate the situation, so we are going to learn about Backbone.js Model Binding Events in isolation. We will not be using views in these examples, but the knowledge we do gain here will be applied in the next blog post about views monitoring changes in models

In this example whenever the model’s data changes, the function movieChanged will be called.


Continue reading “Re-Learning Backbone.js – Model Binding Events”

Re-Learning Backbone.js – View Render

In this post we learn about different ways to render HTML using Backbone.js view and Underscore templates.

A Backbone view should include a render function. The render function should have the responsibility of manipulating the view’s el property. The el property is then used to update the DOM.

This post builds on the following posts:
Re-Learning Backbone.js – View Basics
Re-Learning Backbone.js – Templates (Underscore)
Re-Learning Backbone.js – Models
 

Here are a couple of quotes about Backbone.js Views:

“Backbone views are almost more convention than they are code — they don’t determine anything about your HTML or CSS for you, and can be used with any JavaScript templating library. The general idea is to organize your interface into logical views, backed by models, each of which can be updated independently when the model changes, without having to redraw the page. Instead of digging into a JSON object, looking up an element in the DOM, and updating the HTML by hand, you can bind your view’s render function to the model’s “change” event — and now everywhere that model data is displayed in the UI, it is always immediately up to date.” http://backbonejs.org/#View

“At a technical level, a Backbone view is simply a JavaScript object that manages a specific DOM element and its descendants.” http://aaronhardy.com/javascript/javascript-architecture-backbone-js-views/

In this first example we are going to add some text to a DOM div element.


Continue reading “Re-Learning Backbone.js – View Render”

Re-Learning Backbone.js – View Basics

There is probably more confusion with Backbone.js Views than with other features of Backbone. In this post I’m going to describe some basic features of Backbone Views. Also, In this post we will not be rendering any HTML, but I believe the concepts that you will learn will provide the bedrock for understanding Views better.

The end goal of a Backbone View is to represents an object in the DOM. Many times a view will be created that will manipulate an object that represents an element that is not originally assigned to the DOM. At some point the view object will be assigned to the DOM element and displayed.

A view usually builds up an element and adds it to the DOM. Here’s an example of what a view represents.

This element would be built by the Backbone view and then added to the DOM.

It’s important to understand that once a view is added to the DOM, the view is still aware of that element in the DOM and can manage that element. So if events occur on the DOM element, such as click or keyUp, the view can be notified of these changes and take action. Also if a view references a model and the model changes, the view can be automatically updated and in-turn the DOM element will be updated to reflect the changes in the model.

“At a technical level, a Backbone view is simply a JavaScript object that manages a specific DOM element and its descendants.” http://aaronhardy.com/javascript/javascript-architecture-backbone-js-views/

“How does Backbone relate to “traditional” MVC?
Different implementations of the Model-View-Controller pattern tend to disagree about the definition of a controller. If it helps any, in Backbone, the View class can also be thought of as a kind of controller, dispatching events that originate from the UI, with the HTML template serving as the true view. We call it a View because it represents a logical chunk of UI, responsible for the contents of a single DOM element.”
http://backbonejs.org/#FAQ-mvc

I don’t want to overwhelm you with a lot of content, so I’m going to take very small step to explain some core features of Backbone views. Even though it’s our end goal, in these examples we will not assign a view to a DOM element. Everything will be logged to the browser console.


Continue reading “Re-Learning Backbone.js – View Basics”