ASP.NET MVC 4 Hello World Application

In this screencast we'll create a simple Hello World application using the Microsoft MVC 4 framework. We'll discuss some of the merits of MVC and finish up talking about unit testing.

Part 1- Creating the "Hello World" app.

Part 2- Dissecting the "Hello World" app.

Jochumson.com Web Site Launched!

http://www.jochumson.com

February 2014
Web site launched in order to showcase my various web development skills as well as provide a launchpad for my blog, various web demos and screencasts.

Features:

• Fully responsive design
• Looks great on phone, tablet, medium and large screens
• Flat and simple design
• Retina display support
• Web site design- Malosanu

Tech:

• Bootstrap
• jQuery
• Mixitup
• Fastclick
• Smooth Scroll
• Less Prefixe

Browser Support:

• Firefox 5+
• Google Chrome 14+
• Internet Explorer 8+
• Opera 11
• Safari 5

HTML Geolocation API

Make your applications smarter by leveraging the power of the Geolocation API!

The Geolocation API is used to determine a user's geographical position. Since this can compromise a user's privacy they must give permission before your HTML application can gain access to a users location information.

Here's how Google's Chrome browser presents the Geolocation permission dialog.

Once the user has allowed it, the application can then make one of two different calls into the Geolocation API. The API will call back into your application when the position information is available.

• navigator.geolocation.getCurrentPosition(showPosition,showError)

• Produces a one time callback providing location information 

• navigator.geolocation.watchPosition(showPosition,showError)

• Produces continual callbacks as the users location changes

The video (above) starts with a slide deck introducing some of the key concepts, then it demonstrates the Geolocation capability within the browser and finally shows the JavaScript code.

Here's a link to the demo page where you can test it yourself and download the code if you like.

This is Part1 of a series of articles showcasing some of the new HTML5 application features. Follow-on articles will cover the App Cache which allows your applications to run offline, as well as Web Storage (local and session), an expansion on the cookie storage concept and finally I'll cover Web Workers which allow you to spin up separate threads in the browser to do work in the background freeing up the UI thread, making your applications much more responsive when doing real work.

I'm including the slide deck separately here in case you would like to go through it on your own.

REST using Microsoft's ASP.NET Web API

Today we'll be talking about REST and how using it can make your HTML applications more responsive.

First a little background about what REST is. REST stands for REpresentational State Transfer. It's basically a software architecture style for exposing server based resources.

• Uses HTTP methods (verbs) explicitly- GET, POST, PUT, DELETE
• It's stateless.
• It exposes directory structure-like URIs.
• Returns XML, JavaScript Object Notation (JSON), or both.

A typical REST call looks like this:

http://example.com/customer/34456

This URI represents a request for information about a customer with Id 34456.

In our screencast we'll be creating a RESTful application leveraging Microsoft's ASP.NET Web API. ASP.NET Web API is a Microsoft framework that makes it easy to build HTTP services that support a broad range of clients, including browsers and mobile devices.

Our HTML application will utilize JQuery's Ajax capabilities to request data from the server (in our case widget data) and place it into the page without forcing a full page refresh. This type of responsive UI is becoming common place today and is expected from users.

I hope you enjoy the screencast. I plan to do more projects in the future utilizing ASP.NET's Web API.

Here's a link to download the code.

3D in the Browser- using Three.js (Part 1)

I've been using Three.js for the past year couple of years now. Running your creations directly in the browser using JavaScript makes things very easy. Three.js abstracts away a lot of the mundane chores that usually makes 3D development time consuming. 

You might wonder if JavaScript would slow things down too much to be usable. The reality is that the Graphics Processing Unit (GPU) that's on board most computers today has incredible power and ends up doing 99% of the work. You can verify this by running any of the Three.js examples and checking your CPU performance. For instance, in the WebGL example below, I'm only utilizing 12% of the CPU. It's randomly drawing 2000 pieces of pasta and barely stressing the processor. (I also had a number of applications running and 5-6 browser windows open at the time, any of which could have been taking lots of processor cycles.)

http://alteredqualia.com/three/examples/webgl_pasta.html

Here's the screencast..part 1 one of an ongoing series I'm producing which demonstrates the incredible capabilities of Three.js. I hope you enjoy the series and find the time to try Three.js yourself. Note: Visit Threejs.org to learn more.

Three.js Examples

http://threejs.org/examples

ChromeExperiments

http://www.chromeexperiments.com/

Simple Data Binding (JQuery versus AngularJS)

I've been using AngularJS this past year and I'm impressed with it's capabilities. Here are some of the reasons why.

Data Binding:

I'm finding that the two-way data binding capabilities of AngularJS are saving me considerable amounts of coding time.  By eliminating lots of mundane "boilerplate" coding, I can focus on the specific application logic of the feature I'm developing.

Templates and Directives:

These extend what you can do in HTML so you're basically describing how the model should be projected into the view. When Angular compiles, it uses these rendering instructions called directives to set up the data binding in your application. And you can create your own..which lets you easily create custom components which are described simply within the HTML markup.

MVC:

AngularJS basically uses the MVC design pattern which promotes separation of concerns. Actually it's more like the Model-View-ViewModel pattern popularized by Microsoft.

Dependency Injection:

AngularJS has a dependency injection subsystem which reduces the chances that refactoring will cause code breakage. This allows your code to ask for it's dependencies instead of defining them. This abstraction allows those dependencies to be injected into the underlying code therefore making them easier to change without the risk of code breakage.

Data Binding Example:

Here's an extremely simple example of data binding AngularJS. First though we'll look at how this same data binding would be done in plain old JavaScript, JQuery and then finally we'll see how much simpler it gets done in AngularJS.

Homemade Mini-Arcade

This was an interesting project which required a number of different skills. I started with a Jakks Namco 5 In 1 Arcade Classics joystick which I found used on Ebay for $13.

These battery operated video game boxes were popular years ago. You plugged them directly into your T.V. via RCA jacks. They typically offered a few of the most popular video games from the 80's and 90's, Pacman being the most often featured game.

This provided me with the heart of the arcade machine... the buttons, joystick and video game capabilities. I couldn't find any templates for small video game cabinets so I ended up just sketching out my own cabinet design on poster paper and building a paper mock-up. This allowed me to confirm the sizing prior to starting the cabinet build. It was important to confirm that the monitor and controls would fit comfortably. I used a small 3.5 watt component audio amplifier ($8) which i found online. This turned out to be way too much power. A 1/2 watt amplifier would have been fine. I used a 4 inch video screen I found on Amazon new for $19. I was able to find lots of video cabinet art on google images and I printed them out using sticker printer paper. I opted to replace the buttons that came with the joystick and instead bought coin-op cabinet buttons for $3 on ebay.

All in all this project was lots of fun and most people that see it want one. Unfortunately it takes more than 10 hours to build one and due to the copyright issues trying to sell something like this commercially would be problematic. I do think we'll see more of these types of mashups in the future. If I build another one I'll probably use Raspberry Pi and M.A.M.E which would allow me to run any video game through emulation, even the old Apple II arcade games I wrote years ago.

Here's a video of the finished project.