Building Web UIs

So my new job has been keeping me very busy, which is why I haven’t written a post in a long time. However, since I have a little extra time during these Christmas holidays, I’ve decided to write a little post about some UI coding principles I now embrace. This mostly pertains to HTML\Javascript\CSS. The over-arching philosophy for this is a seperation of interests similar to MVC, but just on the view side things. Whenever possible, I try to use JavaScript for UI functionality: events, calculations, loading (ajax), ui logic, etc.; As for anything visible, I try to use HTML …

Implementing Password Reset in MVC 4 EF Code First using Simple Membership – Part 2

I apologize for the long delay between part 1 and part 2, but I’ve been really busy. I’ve created 2 new jQuery plugins (scrolling related) and I’ve put out my own RWD Grid Framework called Bare Bones. Check them out! So it took me a while to figure out where we left off and what the next step is. Before you continue with this tutorial, you should already have a working copy of where we ended up with Part 1: an extended account model that allows for email entry. That was the hard part.  In Part 2, I’m going to …

Implementing Password Reset in MVC 4 EF Code First using Simple Membership – Part 1

So everyone by now knows that I’m a big fan of Entity Framework Code First approach: I’m a developer and not a DBA so I appreciate anything that allows me to abstract my task away from the SQL world. A previous post explained how to setup an MVC 4 EF-Code First application. That application comes with a baked in user authentication system using Simple Membership; however, it lacks one necessary function for it to be truly usable–a password reset. I’m not sure what the Microsoft guys were thinking when they created the starting sample application without a password reset since …

Choosing an ASP.NET MVC 4 Book

(the above graph takes the public review statistics from amazon.com on 6/21/2013) I find that choosing the right book is as important as going through the exercises and tutorials in it. If I am to invest 40+ hours into consuming it, I better choose the right one. The above info graphic represents the user review statistics from amazon.com as of 6/21/2013 (see references below). I don’t always follow Amazon reviews when picking out my books, and sometimes a really good review will sway me over many negative reviews; however, Freeman’s Pro ASP.NET MVC 4 (978-1430242369) had overwhelming positive reviews written …

Sketch Wireframe Kit

I have used wireframe kits such as this one in the past, but I was never 100% happy with any. The one I used most is the Jaws Sketching Kit but it didn’t have that “sketch” feel to it–the lines were just too perfect and I’m not as into rounded corners anymore. For that reason, I’ve decided to build my own. I’m still missing a few items that I don’t use often for wire-framing, but if I ever do create them, I will update the kit. UPDATE 6-14-2013: I didn’t really have time to write about the sketch kit the first time …

Code First Entity Framework with MVC4 and Visual Studio 2012

I am a huge fan of ADO.NET’s Entity Framework (EF) that bridges the gap between modelling entities\business logic and data engines. It allows web-programmers like myself to focus on the solution instead of worrying about properly setting up databases, keys, foreign-keys, constraints, and indexes. Because of it’s quick turn-around, EF is perfect for prototyping and proof of concepts. For enterprise sized solutions, code-first created databases may require some greater optimization, but that can always be achieved after the fact if not in the solution itself. Querying and operations are a simple endeavour–simply work with the abstracted model and let EF worry about performing …

Using LESS with ASP.NET MVC

There are several option in implementing LESS (the dynamic style sheet language) with your asp.net MVC application. While MVC 4.5 provides bundling and, with that, minification, it still does not provide the same dynamism as LESS; that being said, you can take advantage of both using the following technique. An aside for those unfamiliar with LESS: it’s a dynamic stylesheet language that allows you to extend CSS to allow variables, “mixins,” operations and function. It’s a powerful tool that can help decrease dev time while making your style code more robust. It allows you, for example, to declare a variable …

Classical Inheritance in Javascript

It’s amazing how flexible JavaScript is–it can do anything! It can even do OOP. As our JS implementations become more and more complicated, it’s great that ECMAScript allows us utilize the power of OOP, which should help us with code maintainability, re-use, and task-division. Although interfaces aren’t practical in a dynamic language that encouraged duck-typing, we can still take advantage of controlling variable scope (topic for another day), classes, and (pseudo) inheritance. In this article, I will go over one method of implementing classes and later I will talk about how to inherit that class in a new one. What …

Useful jQuery Plugins Part 2: Layout

Check out Part 1 of this article Part deux of the jQuery plugins focuses on layout. I will talk about 2 awesome plugins that I’ve used before (whether at work or in my ventures). First, what I mean by a layout jQuery plugin is one that places and controls major content elements on a screen. SlideJS This is a great plugin that creates the very popular effect of displaying a set of images that slide through. We’ve seen it before above the fold on the splash page on almost any corporate website–image one will talk about a fancy new product; …

Using JSONP with b1t.co API to Shorten URLs using JavaScript only

I thought that this would be a great post to go over an easy implementation of JSONP, and also the b1t.co API (for JSONP). If you do not want to invest the time and energy in creating some AJAX proxy server-side implementation, there’s a great work around the cross-domain AJAX call issue. It’s simple: You create a function that creates a JavaScript script that points to the web service of another domain You implement a callback funtion that does something with the returned JSON When the JavaScript script get’s “loaded” (aka, when the web service returns the JS response), it …